/* Core Layout CSS - TV Container and Screen Positioning */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #ECEA01; /* Ensure HTML element also has yellow background */
}

/* Canvas - viewport-wide element */
canvas {
    mix-blend-mode: screen;
    position: absolute;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    opacity: var(--vcr-opacity);
    filter: blur(var(--vcr-blur));
    display: none;
}

canvas.active {
    display: block;
}

body, html {
    width: 100%;
    height: 100%;
    min-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    font-family: 'Courier New', monospace;
    margin: 0;
    padding: 0;
    background-color: #ECEA01; /* Ensure yellow reaches all edges */
    position: relative;
}

.background {
    width: 100vw;
    height: 100vh; /* Fallback for browsers without dvh support */
    height: 100dvh; /* Dynamic viewport height - adjusts for mobile UI */
    background-color: #ECEA01;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* TV Shadow - positioned behind TV container but above background */
.tv-shadow {
    position: fixed;
    /* Position at TV overlay origin (x=0, y=0) relative to TV container center and scale */
    left: calc(50% + (0 / 1686 - 0.5) * min(50vw, calc(95vh * 1686 / 1621)));
    top: calc(50% + (0 / 1621 - 0.5) * calc(min(50vw, calc(95vh * 1686 / 1621)) * 1621 / 1686));
    /* Scale shadow maintaining its true aspect ratio: 3136:1621 = 1.9346375077 */
    width: calc(3136 / 1686 * min(50vw, calc(95vh * 1686 / 1621))); /* Shadow width scaled by TV scale factor */
    height: calc(3136 / 1686 * min(50vw, calc(95vh * 1686 / 1621)) / 1.9346375077); /* Height = width ÷ aspect ratio */
    z-index: 0; /* Behind TV container (which is z-index: auto = 0) */
    opacity: 1.0; /* Full opacity since PNG is already semi-transparent */
    pointer-events: none; /* Don't interfere with interactions */
}

.tv-container {
    position: relative;
    width: min(50vw, calc(95vh * 1686 / 1621));
    height: calc(min(50vw, calc(95vh * 1686 / 1621)) * 1621 / 1686);
    min-width: clamp(20vw, 25vw, 30vw);
    min-height: calc(clamp(20vw, 25vw, 30vw) * 1621 / 1686);
    max-width: clamp(80vw, 85vw, 90vw);
    max-height: calc(clamp(80vw, 85vw, 90vw) * 1621 / 1686);
    background: transparent;
    z-index: 2; /* Above TV shadow (z-index: 0) */
    padding: 0;
    margin: 0;
    pointer-events: none; /* Allow clicks to pass through to hanging cards */
}

.tv-screen {
    position: absolute;
    left: calc(211 / 1686 * 100%);
    top: calc(89 / 1621 * 100%);
    width: calc(997 / 1686 * 100%);
    height: calc(788 / 1621 * 100%);
    background: #000;
    overflow: hidden;
    z-index: 1;
    border-radius: calc(120 / 1686 * 100%);
    clip-path: inset(0 round calc(120 / 1686 * 100%));
    transform: translate(0%, 0%);
}

.screen-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 0;
}

.screen-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: calc(80 / 1686 * 100%);
    overflow: hidden;
}

.channel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.screen-glass {
    position: absolute;
    left: calc(211 / 1686 * 100%);
    top: calc(89 / 1621 * 100%);
    width: calc(997 / 1686 * 100%);
    height: calc(788 / 1621 * 100%);
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

.tv-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 3;
    pointer-events: none;
}

.power-button {
    position: absolute;
    left: calc(116 / 1686 * 100%);
    top: calc(1303 / 1621 * 100%);
    width: calc(59 / 1686 * 100%);
    height: calc(60 / 1621 * 100%);
    cursor: pointer;
    z-index: 5;
    pointer-events: all; /* Ensure power button remains clickable */
    /* Expand touch target on mobile using pseudo-element */
}

.power-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    /* Invisible but expands clickable area by 2x on mobile */
}

.power-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
}

.power-off {
    opacity: 1;
}

.power-on {
    opacity: 0;
}

.tv-container.powered-on .power-off {
    opacity: 0;
}

.tv-container.powered-on .power-on {
    opacity: 1;
}

.channel-dial {
    position: absolute;
    left: calc(1426 / 1686 * 100%);
    top: calc(1321 / 1621 * 100%);
    width: calc(219 / 1686 * 100%);
    height: calc(244 / 1621 * 100%);
    cursor: pointer;
    z-index: 5;
    pointer-events: all; /* Ensure channel dial remains clickable */
}

.dial-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dial-image.active {
    opacity: 1;
}

/* Volume Control - VERTICAL SLIDER positioned outside TV container */
.volume-control {
    position: fixed;
    /* Calculate position relative to TV container center and scale */
    left: calc(50% + (141 / 1686 - 0.5) * min(50vw, calc(95vh * 1686 / 1621)));
    top: calc(50% + (1397 / 1621 - 0.5) * calc(min(50vw, calc(95vh * 1686 / 1621)) * 1621 / 1686));
    width: calc(8 / 1686 * min(50vw, calc(95vh * 1686 / 1621))); /* 8px width scaled to TV */
    height: calc(160 / 1621 * calc(min(50vw, calc(95vh * 1686 / 1621)) * 1621 / 1686)); /* 160px height scaled to TV */
    z-index: 1000;
    background: transparent;
}

/* Power instruction container - positioned like other TV elements */
.power-instruction {
    position: absolute;
    left: calc(245 / 1686 * 100%); /* x+245 relative to TV container (positive value) */
    top: calc(1305 / 1621 * 100%); /* y-1305 relative to TV container */
    width: calc(392 / 1686 * 100%); /* 392px width scaled to TV */
    height: calc(48 / 1621 * 100%); /* 48px height scaled to TV - maintains 392:48 ratio */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    user-select: none;
    pointer-events: none;
    overflow: hidden; /* Prevent text overflow */
}

/* Text scales to fill container using TV width percentage */
.power-instruction b {
    font-size: calc(48 / 1686 * 100%); /* Font size as percentage of TV container width */
    line-height: 1;
    white-space: nowrap; /* Prevent wrapping */
    color: #FFD7DF;
    text-shadow: 0 -40px 100px, 0 0 3px, 0 0 1em #ff4444, 0 0 0.5em #ff4444, 0 0 0.1em #ff4444;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
}

.volume-track {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #474747 0%, #000000 50%, #474747 100%); /* Horizontal gradient as specified */
    border-radius: 0; /* Rectangular slider track */
    cursor: pointer;
    border: calc(1 / 1686 * 100vw) solid #D1C19E; /* 1px stroke scaled */
    box-shadow: none;
}

.volume-thumb {
    position: absolute;
    left: 50%;
    top: 65%; /* Default to 35% volume (65% from top since top = max volume) */
    transform: translate(-50%, -50%);
    width: calc(16 / 8 * 100%); /* 16px relative to 8px track width = 200% */
    height: calc(16 / 160 * 100%); /* 16px relative to 160px track height = 10% */
    background: radial-gradient(circle, #f0f0f0 0%, #d0d0d0 30%, #b0b0b0 60%, #888888 100%); /* Silver radial finish */
    border-radius: 50%;
    border: none;
    cursor: grab;
    transition: all 0.2s ease;
    box-shadow:
        0 calc(2 / 1621 * 100vh) calc(4 / 1621 * 100vh) rgba(0,0,0,0.4),
        inset 0 calc(1 / 1621 * 100vh) calc(2 / 1621 * 100vh) rgba(255,255,255,0.6);
}

.volume-thumb:hover {
    background: radial-gradient(circle, #ffffff 0%, #e0e0e0 30%, #c0c0c0 60%, #999999 100%);
    box-shadow:
        0 calc(3 / 1621 * 100vh) calc(6 / 1621 * 100vh) rgba(0,0,0,0.3),
        inset 0 calc(1 / 1621 * 100vh) calc(3 / 1621 * 100vh) rgba(255,255,255,0.7);
}

.volume-thumb:active {
    cursor: grabbing;
    background: radial-gradient(circle, #e8e8e8 0%, #c8c8c8 30%, #a8a8a8 60%, #777777 100%);
    box-shadow:
        0 calc(1 / 1621 * 100vh) calc(2 / 1621 * 100vh) rgba(0,0,0,0.5),
        inset 0 calc(1 / 1621 * 100vh) calc(2 / 1621 * 100vh) rgba(255,255,255,0.4);
}