/* ---------- TV knobs ----------
   HOW TO ADJUST (Shift+click the TV, then check the console with F12
   to get x/y numbers):
     --?-x     knob CENTER, left-to-right  (% of TV width)
     --?-y     knob CENTER, top-to-bottom  (% of TV height)
     --?-size  knob width, as % of TV width
*/
.tv {
    /* Power knob (bottom) */
    --nob-x:    86.5%;
    --nob-y:    61.6%;
    --nob-size: 11%;

    /* Channel knob (top) */
    --top-nob-x:    86.5%;
    --top-nob-y:    48%;
    --top-nob-size: 13%;
}

/* ---------- TV screen text ----------
   HOW TO ADJUST (same Shift+click trick as the knobs):
     --?-x     center of the text, left-to-right  (% of TV width)
     --?-y     center of the text, top-to-bottom  (% of TV height)
     --?-size  text size (cqw = % of TV width, so it shrinks/grows with the TV)
*/
.tv {
    --text-color: #F0EAD6;     /* eggshell white */

    /* Tier 1: channels (top) */
    --channels-x:    42%;
    --channels-y:    41%;
    --channels-size: 3.2cqw;

    /* Tier 2: show name (middle of screen) */
    --show-x:    42%;
    --show-y:    59%;
    --show-size: 6cqw;

    /* Tier 3: show status */
    --status-x:    42%;
    --status-y:    64%;
    --status-size: 3.6cqw;

    /* Tier 4: login info (bottom) */
    --login-x:    42%;
    --login-y:    78%;
    --login-size: 2.8cqw;

    container-type: inline-size;   /* lets "cqw" sizes follow the TV's width */
}

.screen {
    position: absolute;
    inset: 0;               /* covers the whole TV box */
    pointer-events: none;   /* clicks pass through to the knobs */
    z-index: 1;             /* above the TV image, below the knobs */
}

.tv-text {
    position: absolute;
    margin: 0;
    transform: translate(-50%, -50%);   /* center the text on its x/y point */
    white-space: nowrap;                /* keep each tier on one line */
    font-family: "Fredoka", "Comic Sans MS", sans-serif;
    color: var(--text-color);
    text-shadow: 0 0 0.4em rgba(240, 234, 214, 0.35);   /* soft screen glow */
    letter-spacing: 0.03em;
}
/* Let the screen text be selected and copied */
.tv-text {
    pointer-events: auto;   /* the text catches the mouse (the rest of the screen still doesn't) */
    user-select: text;      /* allow selecting it */
    cursor: text;           /* I-beam cursor over the text */
}

/* Don't let the TV picture get grabbed or highlighted when you drag across it */
.tv-base {
    user-select: none;
    -webkit-user-drag: none;
}

.channels    { left: var(--channels-x); top: var(--channels-y); font-size: var(--channels-size); font-weight: 500; }
.show-name   { left: var(--show-x);     top: var(--show-y);     font-size: var(--show-size);     font-weight: 600; }
.show-status { left: var(--status-x);   top: var(--status-y);   font-size: var(--status-size);   font-weight: 400; }
.login       { left: var(--login-x);    top: var(--login-y);    font-size: var(--login-size);    font-weight: 400; opacity: 0.8; }

/* Channels: unselected ones are dimmer, the selected one is bold and highlighted */
.ch {
    opacity: 0.5;
    padding: 0 0.3em;
    border-radius: 0.3em;
    transition: opacity 0.2s, background 0.2s;
}
.ch.active {
    opacity: 1;
    font-weight: 700;
    background: rgba(240, 234, 214, 0.2);   /* soft eggshell highlight behind the word */
}

/* Quick flicker when the channel changes (script.js adds this class) */
.flicker {
    animation: flicker 0.25s ease-out;
}
@keyframes flicker {
    0%   { opacity: 0; }
    40%  { opacity: 0.6; }
    60%  { opacity: 0.2; }
    100% { opacity: 1; }
}
.login.flicker {
    animation-name: flicker-dim;   /* the login line is normally at 0.8 */
}

/* ---------- Loading GIF (while the TV waits for the server) ----------
   Same idea as the screen text:
     --loading-x     its CENTER, left-to-right (% of TV width)
     --loading-y     its CENTER, top-to-bottom (% of TV height)
     --loading-size  how wide it is (% of TV width) */
.tv {
    --loading-x:    42%;
    --loading-y:    61%;
    --loading-size: 14%;
}
.tv-loading {
    position: absolute;
    left:  var(--loading-x);
    top:   var(--loading-y);
    width: var(--loading-size);
    height: auto;
    transform: translate(-50%, -50%);
    display: none;          /* only shows while waiting */
    pointer-events: none;
    user-select: none;
}
/* Waiting: the GIF takes the place of the show name and status */
.tv.waiting .tv-loading { display: block; }
.tv.waiting .show-name,
.tv.waiting .show-status { visibility: hidden; }

/* No signal: the show name fades out */
.tv.nosignal .show-name { opacity: 0.35; }

/* Knobs are locked while waiting; clicking one makes it wiggle */
.tv.waiting .nob,
.tv.waiting .top-nob { cursor: not-allowed; }
.jiggle {
    animation: knob-jiggle 0.3s ease-out;
}
@keyframes knob-jiggle {
    0%   { rotate: 0deg; }
    25%  { rotate: -8deg; }
    50%  { rotate: 8deg; }
    75%  { rotate: -4deg; }
    100% { rotate: 0deg; }
}

/* ---------- "Are you sure?" box (on the TV screen, see script.js POWER) ----------
     --confirm-x / --confirm-y  its CENTER (% of TV width / height)
     --confirm-width            how wide it is (% of TV width)  */
.tv {
    --confirm-x:     42%;
    --confirm-y:     60%;
    --confirm-width: 52%;
}
.tv-confirm {
    position: absolute;
    left:  var(--confirm-x);
    top:   var(--confirm-y);
    width: var(--confirm-width);
    transform: translate(-50%, -50%);
    z-index: 3;             /* above the screen text and the knobs */
    box-sizing: border-box;
    padding: 2.2cqw 2.6cqw;
    background: rgba(20, 20, 20, 0.92);
    border: 0.4cqw solid #F0EAD6;
    border-radius: 2cqw;
    color: #F0EAD6;
    font-family: "Fredoka", "Comic Sans MS", sans-serif;
    text-align: center;
    animation: flicker 0.25s ease-out;
}
.tv-confirm[hidden] { display: none; }
.tv-confirm p { margin: 0; }
.tv-confirm-question {
    font-size: 3.6cqw;
    font-weight: 600;
}
.tv-confirm-note {
    margin-top: 0.6cqw !important;
    font-size: 2.4cqw;
    opacity: 0.75;
}
.tv-confirm-buttons {
    display: flex;
    gap: 1.6cqw;
    margin-top: 1.8cqw;
}
.tv-confirm-buttons button {
    flex: 1;
    padding: 1cqw 0.6cqw;
    border: none;
    border-radius: 1.2cqw;
    background: #F0EAD6;
    color: #222;
    font: inherit;
    font-size: 2.6cqw;
    font-weight: 600;
    cursor: pointer;
}
.tv-confirm-buttons button:hover { background: #FFD500; }

/* ---------- Test server panel (script.js, look for TEST) ---------- */
.test-panel {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 20;            /* above everything, so it can always be clicked */
    max-width: 260px;
    padding: 12px 14px;
    background: #111;
    color: #F0EAD6;
    border: 2px dashed #FFD500;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    font-family: "Fredoka", "Comic Sans MS", sans-serif;
    font-size: 14px;
    line-height: 1.35;
}
.test-panel[hidden] { display: none; }
.test-title {
    color: #FFD500;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
}
.test-channel {
    font-weight: 600;
    margin: 4px 0 2px;
}
.test-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.test-buttons button {
    flex: 1 1 28%;
    padding: 6px 4px;
    border: none;
    border-radius: 6px;
    background: #F0EAD6;
    color: #222;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.test-buttons button:hover { background: #FFD500; }
@keyframes flicker-dim {
    0%   { opacity: 0; }
    40%  { opacity: 0.5; }
    60%  { opacity: 0.15; }
    100% { opacity: 0.8; }
}

/* ---------- Page: stack everything in a centered column ---------- */
body {
    display: flex;
    flex-direction: column;   /* heading, button, TV stacked, not side by side */
    justify-content: center;
    align-items: center;
    gap: 16px;
    min-height: 100vh;
    margin: 0;
    background: #222;
}

h1 {
    color: whitesmoke;
}

.tv {
    position: relative;
    width: min(65vw, 550px);   /* TV scales with the window, max 550px */
}

/* Layer 1: TV image sets the size of the whole box */
.tv-base {
    display: block;
    width: 100%;
    height: auto;
}

/* Layer 2: the power knob */
.nob {
    --angle: 0deg;   /* script.js changes this */

    position: absolute;
    left:  var(--nob-x);
    top:   var(--nob-y);
    width: var(--nob-size);
    min-width: 30px;   /* never smaller than this, even on tiny screens */
    height: auto;

    /* translate(-50%,-50%) puts the knob's CENTER on the x/y point,
       so it spins in place instead of swinging around a corner */
    transform: translate(-50%, -50%) rotate(var(--angle));
    transition: transform 0.25s ease-out;

    cursor: pointer;
    z-index: 2;
}

/* Layer 2b: the channel knob */
.top-nob {
    --angle: 0deg;   /* script.js changes this */

    position: absolute;
    left:  var(--top-nob-x);
    top:   var(--top-nob-y);
    width: var(--top-nob-size);
    min-width: 30px;
    height: auto;

    transform: translate(-50%, -50%) rotate(var(--angle));
    transition: transform 0.25s ease-out;

    cursor: pointer;
    z-index: 2;
}

/* ---------- Speaker + TV side by side ---------- */
.stage {
    display: flex;
    flex-direction: row;
    align-items: flex-end;   /* bottoms line up, like they're sitting on a shelf */
    gap: 16px;
}

.speaker {
    --on-nob-x:    69%;
    --on-nob-y:    36%;
    --on-nob-size: 7%;

    --on-light-x:    71%;      /* light CENTER, left-to-right */
    --on-light-y:    21.83%;   /* light CENTER, top-to-bottom */
    --on-light-size: 16%;      /* light width, as % of speaker width */

    position: relative;
    width: min(22vw, 250px);
}

.speaker-base {
    display: block;
    width: 100%;
    height: auto;
}

.on-nob {
    position: absolute;
    left:  var(--on-nob-x);
    top:   var(--on-nob-y);
    width: var(--on-nob-size);
    height: auto;
    transform: translate(-50%, -50%);   /* center the knob on the x/y point */
    z-index: 2;
    cursor: pointer;
}

.on-light {
    position: absolute;
    left:  var(--on-light-x);
    top:   var(--on-light-y);
    width: var(--on-light-size);
    height: auto;
    transform: translate(-50%, -50%);   /* center the light on the x/y point */
    z-index: 2;
    pointer-events: none;   /* clicks pass through to whatever is underneath */
}

/* ---------- Pleiades (top right) ---------- */
.pleiades {
    --from-top:       30px;               /* gap from top of page */
    --from-right:     33px;               /* gap from right of page */
    --cluster-width:  min(25vw, 220px);   /* how spread out the cluster is */
    --star-size:      min(4vw, 40px);     /* size of the BIGGEST star */
    --cluster-rotate: 55deg;              /* turn the whole cluster */

    position: absolute;   /* use "fixed" to keep it there while scrolling */
    top:   var(--from-top);
    right: var(--from-right);
    width:  var(--cluster-width);
    height: calc(var(--cluster-width) * 0.6);
    transform: rotate(var(--cluster-rotate));
    pointer-events: none;   /* clicks pass through the stars */
}

.star {
    position: absolute;
    /* --sx / --sy go from -1 to 1 and are set by script.js */
    left: calc(50% + var(--sx) * var(--cluster-width) / 2);
    top:  calc(50% + var(--sy) * var(--cluster-width) / 2);
    width: calc(var(--star-size) * var(--s));
    height: auto;
    transform: translate(-50%, -50%) rotate(var(--r));
}

/* ---------- Little lights (top left, hanging) ---------- */
.little-lights {
    --lights-size: min(230vw, 600px);   /* how big the lights are */

    position: fixed;    /* sticks to the screen, even when scrolling */
    top: 0;             /* flush against the top edge */
    left: 0;            /* flush against the left edge */
    width: var(--lights-size);
    height: auto;
    pointer-events: none;   /* clicks pass through */
    z-index: 3;             /* sits on top of everything else */
}
.blink {
    z-index: 4;   /* one layer above the little lights */
}

/* ---------- Hook (under the hanging lights, top left) ---------- */
.hook {
    /* Where the CENTER of the hook sits, like dropX in gravity.js:
       --hook-x: 0 = left edge of the screen, 0.5 = middle, 1 = right edge
       --hook-y: 0 = top edge of the screen,  0.5 = middle, 1 = bottom edge */
    --hook-x: 0.17;
    --hook-y: 0.33;
    --hook-size: 50px;    /* how wide the hook is */

    position: fixed;      /* stays put like the lights, even when scrolling */
    left: calc(var(--hook-x) * 100%);
    top:  calc(var(--hook-y) * 100%);
    transform: translate(-50%, -50%);   /* center the hook on that point */
    width: var(--hook-size);
    height: auto;
    pointer-events: none; /* clicks pass through */
    z-index: 1;           /* behind the falling objects, so they can hang on it */
}

/* ---------- Poster (pull-down, see poster.js) ---------- */
.poster {
    /* WHERE IT HANGS, as % of the screen:
       --poster-x:     the poster's CENTER, left-to-right (0% = left edge, 100% = right edge)
       --poster-y:     the poster's TOP, top-to-bottom    (0% = top edge,  100% = bottom edge)
       --poster-width: how wide it is (12vw = 12% of the screen's width)
       --grab-zone:    extra invisible space under the handle so it's easy to grab */
    --poster-x:     80%;
    --poster-y:     0%;
    --poster-width: 12vw;
    --grab-zone:    24px;

    position: fixed;      /* stays put, like the lights */
    left: var(--poster-x);
    top:  var(--poster-y);
    width: var(--poster-width);
    transform: translateX(-50%);   /* center it on --poster-x */
    z-index: 1;           /* below the falling objects and the lights */

    cursor: grab;
    user-select: none;
    touch-action: none;   /* lets you drag on phones without scrolling */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.poster.grabbed {
    cursor: grabbing;
}
/* Hidden when it would overlap the TV (poster.js decides) */
.poster.hidden {
    visibility: hidden;
}
/* The invisible grab zone under the handle */
.poster::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 100%;
    height: var(--grab-zone);
}
/* The two slices of the picture: the unrolled part, and the handle */
.poster-sheet,
.poster-handle {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;    /* everything outside the slice is invisible */
}
.poster img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* ---------- MSGPooki (behind the poster, same spot) ---------- */
.pooki {
    /* WHERE IT SITS, as % of the screen (starts the same as the poster):
       --pooki-x:     its CENTER, left-to-right (0% = left edge, 100% = right edge)
       --pooki-y:     its TOP, top-to-bottom    (0% = top edge,  100% = bottom edge)
       --pooki-width: how wide it is (12vw = 12% of the screen's width) */
    --pooki-x:     79%;
    --pooki-y:     0%;
    --pooki-width: 12vw;

    position: fixed;      /* stays put, like the poster */
    left: var(--pooki-x);
    top:  var(--pooki-y);
    width: var(--pooki-width);
    height: auto;
    transform: translateX(-50%);   /* center it on --pooki-x */
    pointer-events: none; /* clicks pass through, so the poster can still be grabbed */
    z-index: 0;           /* below the poster (the poster is 1), so the poster covers it */
}

/* ---------- Gravity (gravity.js) ---------- */
/* Invisible layer covering the screen that holds the falling objects */
.fallers {
    position: fixed;
    inset: 0;
    pointer-events: none;   /* clicks pass through the empty parts */
    z-index: 2;             /* above the TV and speaker, below the hanging lights */
}

/* Each falling object. gravity.js moves and spins it every frame. */
.faller {
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
    transform-origin: center;
    pointer-events: auto;   /* but the objects themselves can be grabbed */
    cursor: grab;
    user-select: none;
    touch-action: none;     /* lets you drag on phones without scrolling */
    will-change: transform;
}
.faller.grabbed {
    cursor: grabbing;
}

/* Floating objects fade in at the top of the screen instead of dropping in */
.faller.floater {
    animation: floater-appear 0.8s ease-out;
}
@keyframes floater-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Explosion (gravity.js, look for FLOATING). Its size is set there too. */
.explosion {
    position: fixed;
    height: auto;
    transform: translate(-50%, -50%);   /* center the blast on where it hit */
    pointer-events: none;               /* clicks pass through */
    user-select: none;
    z-index: 5;                         /* on top of everything, even the lights */
}

/* Boundary outlines (press B to show/hide) */
.boundary-debug {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    display: none;
}
/* ---------- Flag (in the background, behind everything) ---------- */
.flag {
    /* WHERE IT SITS, as % of the screen:
       --flag-x:     its CENTER, left-to-right (0% = left edge, 100% = right edge)
       --flag-y:     its CENTER, top-to-bottom (0% = top edge,  100% = bottom edge)
       --flag-width: how wide it is (40vw = 40% of the screen's width)
       --flag-tilt:  turn it, in degrees (0 = straight)
       --flag-fade:  1 = full color, 0.5 = half see-through, 0 = invisible */
    --flag-x:     31%;
    --flag-y:     50%;
    --flag-width: 30vw;
    --flag-tilt:  0deg;
    --flag-fade:  1;

    position: fixed;      /* stays put while scrolling, like the lights */
    left: var(--flag-x);
    top:  var(--flag-y);
    width: var(--flag-width);
    height: auto;
    transform: translate(-50%, -50%) rotate(var(--flag-tilt));
    opacity: var(--flag-fade);
    pointer-events: none; /* clicks pass through */
    z-index: -1;          /* behind everything, even the TV and stars */
}

/* ---------- Pots (along the bottom, see script.js) ---------- */
.pots {
    --pot-size: 70px;     /* how wide EVERY pot is */

    position: fixed;      /* stuck to the bottom of the screen, even when scrolling */
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    pointer-events: none; /* clicks pass through */
    z-index: 1;           /* behind the falling objects, in front of the TV */
}
.pot {
    position: absolute;
    bottom: 0;                       /* sitting on the bottom edge */
    left: var(--x);                  /* set randomly by script.js */
    width: var(--pot-size);
    height: auto;
    /* center it on its spot, and mirror it if --flip is -1 */
    transform: translateX(-50%) scaleX(var(--flip));
}