:root {
    --tint: #7a7a7a; --tvw: min(46vw, 64vh);
    /* TV + tape stack are centred as one group on the dresser */
    --tapew: min(15vw, 210px); --tapegap: 2.5vw;
    --tvx: calc(50% - (var(--tapegap) + var(--tapew)) / 2);
    --pw: min(12.5vw, 30vh);
}
body { background: #030306; font-family: 'VT323', monospace; }

.world { position: fixed; inset: 0; overflow: hidden; }
.frozen * { animation-play-state: paused !important; }

/* ── Room ───────────────────────────────────────────────────── */
.wall { position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 30% 20% at 12% 90%, rgba(0,0,0,.6), transparent),
        radial-gradient(ellipse 12% 30% at 90% 30%, rgba(60,40,20,.18), transparent),
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 3vw, transparent 3vw 6vw),
        var(--grain),
        linear-gradient(#0e0f17, #08080d 60%, #050507);
    background-size: auto, auto, auto, 200px, auto; background-blend-mode: normal, normal, normal, overlay, normal; }

.window { position: absolute; isolation: isolate; left: 20%; right: 20%; top: 5%; bottom: 40%;
    background: #000; box-shadow: 0 0 0 1.2vmin #0a0a0c, 0 0 0 1.6vmin #1a1a1f, 0 3vmin 6vmin rgba(0,0,0,.8); overflow: hidden; }
.window canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mullion-v, .mullion-h { position: absolute; background: linear-gradient(90deg, #0a0a0c, #1d1d22, #0a0a0c); z-index: 4; }
.mullion-v { left: calc(50% - .6vmin); width: 1.2vmin; top: 0; bottom: 0; }
.mullion-h { top: 58%; height: 1vmin; left: 0; right: 0; background: linear-gradient(#0a0a0c, #1d1d22, #0a0a0c); }
.blinds { position: absolute; left: -1%; right: -1%; top: 0; height: 13%; z-index: 5;
    background: repeating-linear-gradient(#22252e 0 1.3vmin, #0c0d11 1.3vmin 1.6vmin);
    box-shadow: 0 1vmin 2vmin rgba(0,0,0,.7); }
.blinds::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.6vmin; height: 1vmin; background: #2c2f38; transform: rotate(-.6deg); }
.sill { position: absolute; left: 19%; right: 19%; top: 60%; height: 2.2vmin; background: linear-gradient(#26262c, #0e0e11); box-shadow: 0 1.5vmin 2vmin rgba(0,0,0,.7); }

/* Rooftop neon across the street = the site title */
.sign { position: absolute; left: 50%; top: 40%; z-index: 2; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; pointer-events: none; }
.sign h1 { margin: 0; font: 400 clamp(26px, 4.6vw, 76px)/1 'Monoton', cursive; color: #ffd6ec; letter-spacing: .04em;
    text-shadow: 0 0 4px #ff4fa8, 0 0 12px #ff2e93, 0 0 28px #ff2e93, 0 0 60px #b3006a; }
.sign h1 .dead { animation: dead 6s infinite; }
@keyframes dead { 0%, 100% { opacity: 1; } 8% { opacity: .15; } 9% { opacity: 1; } 11% { opacity: .2; } 14% { opacity: 1; } 60% { opacity: 1; } 61% { opacity: .25; } 62% { opacity: 1; } }
.sign p { margin: .1em 0 0; font: 400 clamp(14px, 2.2vw, 36px)/1 'Monoton', cursive; letter-spacing: .5em; color: #d8fbff;
    text-shadow: 0 0 4px #3ff0ff, 0 0 14px #19c9ff, 0 0 30px #0090ff; animation: buzz 3s infinite; }
@keyframes buzz { 0%, 100% { opacity: 1; } 50% { opacity: .9; } 51% { opacity: 1; } }
.scaffold { height: 1.6vmin; margin: .5vmin 6% 0; background:
    repeating-linear-gradient(45deg, transparent 0 .6vmin, #15161c .6vmin .8vmin),
    repeating-linear-gradient(-45deg, transparent 0 .6vmin, #15161c .6vmin .8vmin);
    border-top: 2px solid #15161c; }

.tvlight { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(ellipse 55% 45% at var(--tvx) 72%, var(--tint), transparent 70%);
    opacity: .22; transition: background .4s; animation: tvflick 2.2s infinite; }
@keyframes tvflick { 0%, 100% { opacity: .22; } 20% { opacity: .18; } 21% { opacity: .25; } 60% { opacity: .2; } }
.flash { position: absolute; inset: 0; pointer-events: none; background: #c9d6ff; opacity: 0; mix-blend-mode: screen; }
.flash.on { animation: flash .7s; }
@keyframes flash { 0% { opacity: .35; } 8% { opacity: 0; } 16% { opacity: .22; } 100% { opacity: 0; } }

.dresser { position: absolute; left: 50%; bottom: 0; width: min(84vw, 1180px); height: 9vh; transform: translateX(-50%);
    background: repeating-linear-gradient(91deg, rgba(0,0,0,.25) 0 2px, transparent 2px 13px), linear-gradient(#2a180c, #160b05 30%, #0b0603);
    box-shadow: inset 0 3px 0 rgba(255,210,170,.08), 0 -1vmin 4vmin rgba(0,0,0,.6); }

/* ── The set ────────────────────────────────────────────────── */
.set { position: absolute; left: var(--tvx); bottom: calc(9vh - 2px); width: var(--tvw); aspect-ratio: 1.36; transform: translateX(-50%); }
.ears { position: absolute; left: 60%; top: 0; width: 0; height: 0; z-index: -1; }
.ears i { position: absolute; bottom: 0; left: -1px; width: 3px; height: calc(var(--tvw) * .5); background: linear-gradient(#cfcfcf, #555); transform-origin: 50% 100%; border-radius: 2px; }
.ears i:nth-child(1) { transform: rotate(-31deg); } .ears i:nth-child(2) { transform: rotate(19deg); height: calc(var(--tvw) * .44); }
.ears i::after { content: ''; position: absolute; top: -4px; left: -3px; width: 9px; height: 9px; border-radius: 50%; background: #ddd; }
.ears b { position: absolute; left: calc(var(--tvw) * -.06); bottom: -2px; width: calc(var(--tvw) * .12); height: calc(var(--tvw) * .045); border-radius: 50% 50% 0 0; background: radial-gradient(circle at 40% 30%, #444, #0d0d0d); }

.cab { position: absolute; inset: 0; border-radius: 2.4% / 3.2%; padding: 4.2% 4.2% 7%;
    display: grid; grid-template-columns: 1fr 21%; gap: 3.5%;
    background:
        repeating-linear-gradient(93deg, rgba(0,0,0,.2) 0 2px, transparent 2px 9px, rgba(255,220,180,.05) 9px 11px, transparent 11px 23px),
        radial-gradient(ellipse at 30% 20%, rgba(255,200,150,.08), transparent 60%),
        linear-gradient(#3b2213, #1e0f07);
    box-shadow: inset 0 2px 0 rgba(255,220,180,.15), inset 0 -4px 10px rgba(0,0,0,.6), 0 2vmin 5vmin rgba(0,0,0,.8); }
.badge { position: absolute; left: 4.4%; bottom: 2%; font-size: calc(var(--tvw) * .026); color: #c7a86b; letter-spacing: .2em; opacity: .8; }
.bezel { background: #121110; border-radius: 4% / 5.5%; padding: 4.5%; box-shadow: inset 0 0 0 2px #000, inset 0 .6vmin 1.2vmin rgba(0,0,0,.9); }
.screen { position: relative; width: 100%; height: 100%; border-radius: 9% / 12%; overflow: hidden; background: #020304; cursor: pointer; outline: none; }
.screen:focus-visible { box-shadow: 0 0 0 3px var(--tint); }
.screen::after { content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit;
    background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.33) 2px 3px),
                radial-gradient(ellipse 60% 45% at 30% 20%, rgba(255,255,255,.13), transparent 60%);
    box-shadow: inset 0 0 4vmin rgba(0,0,0,.95), inset 0 0 1vmin rgba(0,0,0,.9); }

.chan { position: absolute; inset: 0; opacity: 0; }
.chan.on { opacity: 1; }
.switching .chan.on { animation: roll .35s steps(6); }
@keyframes roll { 0% { transform: translateY(-30%); filter: brightness(2) contrast(2); } 60% { transform: translateY(8%); } 100% { transform: none; } }
/* Slideshow timing lives in js/home.js (one slide per album) */
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.eyecast { background: radial-gradient(#2b1150, #0b0416); display: grid; place-items: center; }
.eyecast .mp-eye { width: 62%; }
.testcard { background:
    radial-gradient(circle, transparent 30%, #ddd 30% 31.5%, transparent 31.5%),
    linear-gradient(90deg, transparent 49.7%, #ddd 49.7% 50.3%, transparent 50.3%),
    linear-gradient(transparent 49.5%, #ddd 49.5% 50.5%, transparent 50.5%),
    repeating-linear-gradient(90deg, #444 0 1px, transparent 1px 8.33%),
    repeating-linear-gradient(#444 0 1px, transparent 1px 11.1%),
    linear-gradient(90deg, #5e4a15, #15456b 50%, #5e1546); }
.snow { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; z-index: 5; }
.switching .snow, .ch0 .snow { opacity: .9; }

.osd { position: absolute; z-index: 7; color: #6bff8f; font-size: calc(var(--tvw) * .055);
    text-shadow: 0 0 6px #2bff6a, 2px 2px 0 rgba(0,0,0,.8); }
.osd-ch { top: 7%; right: 9%; }
.osd-name { left: 8%; right: 8%; bottom: 8%; display: flex; justify-content: space-between; align-items: end; gap: 1em; }
.osd-name b { font-weight: 400; color: #fff; text-shadow: 0 0 8px rgba(255,255,255,.6), 2px 0 rgba(255,0,80,.6), -2px 0 rgba(0,220,255,.6); font-size: 1.15em; }
.osd-name span { font-size: .6em; animation: in-blink 1.2s steps(2) infinite; }
.ch0 .osd-name span { visibility: hidden; }

.panel { display: flex; flex-direction: column; align-items: center; gap: 7%; padding: 8% 0 0; }
.dial { position: relative; width: 92%; aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
    background: radial-gradient(circle, #0c0b0a 56%, #3a2a1a 57% 59%, #120c07 60%); }
.dial .num { position: absolute; left: 50%; top: 50%; font-size: calc(var(--tvw) * .03); color: #d8bf86; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-430%) rotate(calc(-1 * var(--a))); }
.dial .num.on { color: #6bff8f; text-shadow: 0 0 6px #2bff6a; }
.knob { position: absolute; inset: 20%; border-radius: 50%;
    background: conic-gradient(#2c2c2c, #6a6a6a, #2c2c2c, #6a6a6a, #2c2c2c, #6a6a6a, #2c2c2c);
    box-shadow: 0 .4vmin .8vmin rgba(0,0,0,.8), inset 0 0 0 .4vmin #1a1a1a;
    transform: rotate(var(--rot, -90deg)); transition: transform .35s cubic-bezier(.3,1.7,.5,1); }
.knob::after { content: ''; position: absolute; left: calc(50% - 2px); top: 8%; width: 4px; height: 32%; background: #e8e2d4; border-radius: 2px; }
.chbtns { display: flex; gap: 8%; width: 92%; }
.chbtns button { flex: 1; aspect-ratio: 1.3; border: 0; border-radius: 12%; cursor: pointer; background: linear-gradient(#3a3a3a, #161616); color: #d8bf86;
    font-size: calc(var(--tvw) * .028); box-shadow: 0 .3vmin 0 #000, inset 0 1px 0 rgba(255,255,255,.15); }
.chbtns button:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.grill { flex: 1; width: 92%; margin-bottom: 4%; border-radius: 4%;
    background: repeating-linear-gradient(transparent 0 .5vmin, #0b0604 .5vmin 1vmin); }
.pwr-row { display: flex; align-items: center; justify-content: space-between; width: 92%; margin-bottom: 6%; }
.pwr { width: 18%; aspect-ratio: 1; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 1vmin #ff3b30; }
.mute { position: relative; width: 62%; aspect-ratio: 2.3; border: 0; border-radius: 10%; cursor: pointer; background: linear-gradient(#3a3a3a, #161616); color: #d8bf86;
    font-size: calc(var(--tvw) * .024); letter-spacing: .08em; box-shadow: 0 .3vmin 0 #000, inset 0 1px 0 rgba(255,255,255,.15); padding: 0 0 0 14%; }
.mute::before { content: ''; position: absolute; left: 12%; top: 50%; width: 12%; aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%); background: #3a2a10; }
.mute[aria-pressed="true"]::before { background: #ffb02e; box-shadow: 0 0 .8vmin #ffb02e; }
.mute:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.osd-vol { top: 7%; left: 9%; opacity: 0; transition: opacity .2s; }
.osd-vol.show { opacity: 1; }

/* VHS tapes on the dresser = the menu, readable at a glance */
.tapes { position: absolute; bottom: calc(9vh - 2px); left: calc(var(--tvx) + var(--tvw) / 2 + var(--tapegap)); display: flex; flex-direction: column-reverse; gap: 0; }
/* Retro SLR sitting on top of the tape stack (4 tapes tall) */
.camera { position: absolute; z-index: 1; width: calc(var(--tapew) * .74); padding: 0; border: 0; background: none; cursor: pointer;
    left: calc(var(--tvx) + var(--tvw) / 2 + var(--tapegap) + var(--tapew) * .1);
    bottom: calc(9vh - 2px + 4 * min(4.6vh, 40px) - .2vh);
    transform: rotate(-3deg); transform-origin: 50% 100%; transition: transform .2s; filter: drop-shadow(0 .5vmin .6vmin rgba(0,0,0,.7)); }
.camera svg { display: block; width: 100%; height: auto; overflow: visible; }
.camera:hover, .camera:focus-visible { transform: rotate(-3deg) translateY(-3%); }
.camera.snap { animation: snap .25s; }
@keyframes snap { 40% { transform: rotate(-3deg) scale(.97); } }
.cam-strap { filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.camflash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 5;
    background: radial-gradient(ellipse at var(--fx, 80%) var(--fy, 60%), #fff, rgba(235,240,255,.85) 30%, rgba(220,230,255,.4) 70%); }
.camflash.on { animation: camflash .45s ease-out; }
@keyframes camflash { 0% { opacity: 0; } 8% { opacity: .55; } 100% { opacity: 0; } }
.tape { display: block; width: var(--tapew); height: min(4.6vh, 40px); border: 0; padding: 0 .7em; text-align: left; cursor: pointer;
    background: linear-gradient(#1b1b1b, #0a0a0a); box-shadow: inset 0 0 0 1px #2a2a2a, 0 2px 0 #000;
    transform: translateX(var(--off, 0)) rotate(var(--rot, 0)); transition: transform .2s; }
.tape span { display: block; background: #e9e2cf; color: #191919; font: 400 min(1.6vh, 15px)/1.4 'Permanent Marker', cursive; padding: .15em .5em; border-left: .5em solid var(--c); white-space: nowrap; overflow: hidden; }
.tape:hover, .tape:focus-visible { transform: translateX(calc(var(--off, 0px) - 12px)) rotate(var(--rot, 0)); }
.tape.on span { box-shadow: 0 0 0 2px var(--c); }
/* Posters taped to the wall either side of the window */
.poster { position: absolute; top: 9%; margin: 0; width: var(--pw); aspect-ratio: 240 / 346; transform: rotate(var(--rot));
    box-shadow: .4vmin .8vmin 2.4vmin rgba(0,0,0,.75); }
.poster.p1 { --rot: -3deg; left: calc((20% - var(--pw)) / 2); }
.poster.p2 { --rot: 2.5deg; right: calc((20% - var(--pw)) / 2); top: 13%; }
.poster img { display: block; width: 100%; height: 100%; filter: brightness(.6) contrast(1.08) saturate(.85); }
.poster::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(118deg, rgba(255,255,255,.12), transparent 32%),
                radial-gradient(ellipse 60% 40% at 100% 100%, rgba(0,0,0,.5), transparent),
                linear-gradient(90deg, transparent 49.6%, rgba(0,0,0,.25) 50%, transparent 50.4%); }
.poster::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--grain); background-size: 140px; mix-blend-mode: overlay; opacity: .55; }
.poster i { position: absolute; z-index: 2; top: -2.5%; width: 26%; height: 6%; background: rgba(214,204,170,.55); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.poster i:nth-of-type(1) { left: -8%; transform: rotate(-38deg); }
.poster i:nth-of-type(2) { right: -8%; transform: rotate(36deg); }
.poster i:nth-of-type(3) { top: auto; bottom: -2.5%; left: -8%; transform: rotate(34deg); }
.poster i:nth-of-type(4) { top: auto; bottom: -2.5%; right: -8%; transform: rotate(-40deg); }

.hud { position: fixed; left: 0; right: 0; bottom: 2vh; z-index: 50; text-align: center; color: #9a9aa8; font-size: clamp(16px, 1.8vw, 24px); pointer-events: none; }
.hud kbd { font: inherit; color: #e8e8f0; border: 1px solid #555; padding: 0 .35em; margin: 0 .2em; }
.copyright { position: fixed; right: 3vmin; bottom: 2vh; z-index: 50; margin: 0; color: #6f6f7c; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .04em; pointer-events: none; }
.diving ~ .hud, .diving ~ .copyright { opacity: 0; }

.skin-late { --in-bg: #040608; --in-ink: #d8f5e0; --in-dim: #5f8a6c; --in-accent: #6bff8f; --in-hot: #ff2e93; --in-display: 'Monoton'; }
.skin-late .in-title { font-size: clamp(22px, 3.6vw, 44px); color: #ffd6ec; text-shadow: 0 0 6px #ff2e93, 0 0 20px #ff2e93; }

/* ── Bookcase left of the TV: favourite books + a dice set on top ── */
.bookcase { --bcw: min(16vw, 230px); position: absolute; bottom: -2vh; width: var(--bcw); height: 54vh;
    left: calc(var(--tvx) - var(--tvw) / 2 - var(--tapegap) - var(--bcw));
    display: grid; grid-template-rows: repeat(3, 1fr); gap: 1.1vmin; padding: 1.1vmin;
    background: repeating-linear-gradient(91deg, rgba(0,0,0,.25) 0 2px, transparent 2px 13px), linear-gradient(#2e1a0d, #170b05);
    box-shadow: inset 0 2px 0 rgba(255,210,170,.1), 1vmin 0 3vmin rgba(0,0,0,.6); }
.bc-shelf { position: relative; display: flex; align-items: flex-end; gap: 1px; padding: 0 4%; min-height: 0;
    background: linear-gradient(#0b0603, #170d07); box-shadow: inset 0 1.2vmin 1.4vmin rgba(0,0,0,.85); }
.bc-top { position: absolute; left: 6%; right: 6%; bottom: 100%; display: flex; justify-content: center; }

.book { position: relative; flex: none; width: var(--w); height: var(--h); container-type: size; overflow: hidden;
    writing-mode: vertical-rl; display: flex; align-items: center; justify-content: space-between; gap: 5%;
    color: var(--ink, #d8cfbd); font-family: var(--font, Georgia, serif); text-transform: uppercase; line-height: 1;
    background:
        linear-gradient(90deg, rgba(255,255,255,.14), transparent 22%, transparent 72%, rgba(0,0,0,.4)),
        linear-gradient(var(--band, transparent) 0 0) 0 6% / 100% 2.5% no-repeat,
        linear-gradient(var(--band, transparent) 0 0) 0 92% / 100% 2.5% no-repeat,
        var(--spine);
    border-radius: 2px 2px 1px 1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45);
    transform: rotate(var(--lean, 0deg)); transform-origin: 0 100%; transition: transform .2s; }
.book b { font-weight: 400; letter-spacing: .04em; font-size: min(62cqw, calc(74cqh / var(--len, 8))); white-space: nowrap; }
.book small { font-size: min(34cqw, calc(42cqh / var(--alen, 12))); letter-spacing: .06em; opacity: .85; white-space: nowrap; }
/* keep spine text between the bands (6–8.5% and 92–94.5% of the height) */
.book > :first-child { margin-top: 10.5cqh; }
.book > :last-child { margin-bottom: 13cqh; }
.book.fav { cursor: help; }
.book.fav:hover { transform: translateY(-6%); }

.dice { display: flex; align-items: flex-end; gap: 2%; width: 100%; padding: 0 0 .3vmin; border: 0; background: none; cursor: pointer; }
.die { width: 14%; flex: none; filter: drop-shadow(0 .4vmin .5vmin rgba(0,0,0,.7)); transform: rotate(var(--r, 0deg)); }
.die svg { display: block; width: 100%; height: auto; overflow: visible; }
.dice:hover .die { filter: drop-shadow(0 0 .8vmin rgba(160,102,255,.7)); }
.dice.rolling .die { animation: tumble .65s cubic-bezier(.3,.6,.4,1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes tumble {
    0% { transform: translateY(0) rotate(var(--r)); }
    35% { transform: translateY(-120%) rotate(calc(var(--r) + 200deg)); }
    70% { transform: translateY(0) rotate(calc(var(--r) + 340deg)); }
    82% { transform: translateY(-18%) rotate(calc(var(--r) + 355deg)); }
    100% { transform: translateY(0) rotate(calc(var(--r) + 360deg)); }
}
.bc-tip { position: absolute; left: 50%; bottom: calc(100% + 7vmin); transform: translateX(-50%); z-index: 2; white-space: nowrap; pointer-events: none;
    padding: 2px 10px; background: rgba(0,0,0,.85); box-shadow: 0 0 0 1px #3a3a44; color: #e8e2d4; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: .06em;
    opacity: 0; transition: opacity .15s; }
.bc-tip.show { opacity: 1; }
.bc-tip.crit { color: #6bff8f; text-shadow: 0 0 8px #2bff6a; }
.bc-tip.fail { color: #ff5a4a; }

@media (max-aspect-ratio: 4/5) {
    :root { --tvw: 88vw; --tvx: 50%; }
    .sill { left: 3%; right: 3%; top: 48%; }
    .window { left: 4%; right: 4%; top: 6%; bottom: 52%; }
    .sign h1 { font-size: 8.4vw; } .sign p { font-size: 4.4vw; }
    .set { bottom: calc(15vh - 2px); }
    .dresser { height: 15vh; }
    .tapes, .poster, .bookcase, .camera { display: none; }
    .hud { bottom: 2vh; font-size: 16px; }
    .hud .k2 { display: none; }
    .copyright { top: 2.5vmin; bottom: auto; right: 0; left: 0; text-align: center; }
}