/* ===== '80s extras: toys, TV, trading cards, props, game ===== */

/* ---------- Toy shelf ---------- */
.shelf{position:relative}
.shelf__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px}
.shelf__burst{display:inline-flex;align-items:center;justify-content:center;width:120px;height:120px;background:var(--yellow);color:var(--ink);font:400 18px/1 var(--display);text-transform:uppercase;text-align:center;clip-path:polygon(50% 0,61% 15%,79% 7%,80% 26%,98% 30%,88% 47%,100% 62%,82% 69%,84% 88%,65% 84%,54% 100%,43% 85%,24% 94%,21% 75%,2% 70%,13% 53%,0 37%,18% 30%,17% 11%,36% 15%);transform:rotate(-8deg)}
.pegboard{position:relative;padding:34px 28px 28px;border-radius:16px;background-color:#1a1c3d;background-image:radial-gradient(circle,#0a0b1a 3px,transparent 4px);background-size:28px 28px;border:1px solid var(--line)}
.toys{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.toy{perspective:1200px;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;text-align:left}
.toy__inner{position:relative;aspect-ratio:3/4;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.toy:hover .toy__inner{transform:translateY(-6px) rotate(-1.5deg)}
.toy.is-flipped .toy__inner{transform:rotateY(180deg)}
.toy__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.toy__face img{width:100%;height:100%;object-fit:cover}
.toy__back{transform:rotateY(180deg);background:#f6f1e4;color:#1a1430;padding:20px;display:flex;flex-direction:column;gap:10px;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0 6px,transparent 6px 12px)}
.toy__back h3{margin:0;font:400 26px/1 var(--display);text-transform:uppercase}
.toy__back .role{font:400 9px var(--pixel);text-transform:uppercase;color:#7a2a5a}
.toy__back ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px}
.toy__back li::before{content:"★ ";color:#d7263d}
.toy__back .stat{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;font:400 9px var(--pixel);text-transform:uppercase}
.toy__back .bar{height:8px;background:#e3d8c2;border-radius:2px;overflow:hidden}
.toy__back .bar i{display:block;height:100%;background:linear-gradient(90deg,#ff4fa3,#ffd23f)}
.toy__back .cta{margin-top:auto;display:block;text-align:center;font-weight:700;background:var(--ink);color:var(--yellow);padding:10px;border-radius:6px;text-decoration:none}
.toy__hint{margin:10px 0 0;text-align:center;font:400 9px var(--pixel);color:var(--quiet);text-transform:uppercase}
.shelf__note{margin:18px 0 0;font-size:13px;color:var(--quiet);text-align:right}

/* ---------- Retro TV ---------- */
.tv{position:relative;width:100%;max-width:560px;margin:80px auto 0}
.tv__ears{position:absolute;left:50%;top:-12px;width:0;height:0}
.tv__ears::before,.tv__ears::after{content:"";position:absolute;bottom:0;width:4px;height:84px;background:linear-gradient(#ddd,#888);border-radius:2px;transform-origin:bottom center}
.tv__ears::before{transform:rotate(-32deg)} .tv__ears::after{transform:rotate(28deg)}
.tv__ears i{position:absolute;left:-18px;bottom:-14px;width:40px;height:20px;background:#2b2b2b;border-radius:20px 20px 4px 4px}
.tv__cabinet{position:relative;display:flex;gap:18px;padding:22px;border-radius:22px;background:
  repeating-linear-gradient(92deg,rgba(0,0,0,.08) 0 3px,transparent 3px 9px),
  linear-gradient(180deg,#8a5a34,#5e3a1e);box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -6px 0 rgba(0,0,0,.25),0 30px 60px rgba(0,0,0,.6)}
.tv__bezel{flex:1;min-width:0;background:#1b1b1b;border-radius:16px;padding:16px;box-shadow:inset 0 0 0 3px #333}
.tv__screen{position:relative;aspect-ratio:4/3;border-radius:28px/22px;overflow:hidden;background:#050507;box-shadow:inset 0 0 40px rgba(0,0,0,.9)}
.tv__screen img,.tv__screen iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.tv__screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55));z-index:2}
.tv__play{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(10,11,26,.35);border:0;color:var(--text);cursor:pointer;font:400 11px var(--pixel);text-transform:uppercase}
.tv__play span.btnc{width:74px;height:74px;border-radius:50%;background:var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 0 30px rgba(255,210,63,.6)}
.tv__play:hover span.btnc{transform:scale(1.08)}
.tv__ch{position:absolute;top:12px;right:16px;z-index:3;font:400 14px var(--pixel);color:#5dff7a;text-shadow:0 0 6px #5dff7a}
.tv__side{width:84px;display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:6px}
.tv__knob{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eee,#999 60%,#555);box-shadow:0 3px 0 #2a1a0c;position:relative}
.tv__knob::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:14px;margin-left:-1.5px;background:#333;border-radius:2px}
.tv__knob--b::after{transform:rotate(70deg);transform-origin:50% 18px}
.tv__grille{width:60px;flex:1;min-height:70px;border-radius:6px;background:repeating-linear-gradient(0deg,#2a1a0c 0 3px,#4a3220 3px 7px)}
.tv__brand{font:400 9px var(--pixel);color:#f1d9b0;text-transform:uppercase;letter-spacing:1px}
.tv__feet{display:flex;justify-content:space-between;padding:0 50px}
.tv__feet i{width:34px;height:14px;background:#2b1a0c;border-radius:0 0 6px 6px}
.tv.is-on .tv__screen iframe{animation:crtOn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes crtOn{0%{transform:scale(1,.004);filter:brightness(6)}55%{transform:scale(1,.04);filter:brightness(3)}100%{transform:none;filter:none}}
.tv-row{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:center}
.tv-row > .tv-col{flex:1 1 420px;min-width:0}
.tv__caption{margin:16px 0 0;text-align:center;font:400 10px var(--pixel);color:var(--quiet);text-transform:uppercase}

/* ---------- Trading cards ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px}
.filters button{font:400 10px var(--pixel);text-transform:uppercase;color:var(--text);background:var(--panel);border:1px solid var(--line2);padding:12px 14px;border-radius:6px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px}
.tcard{perspective:1200px;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;text-align:left}
.tcard[hidden]{display:none}
.tcard__inner{position:relative;aspect-ratio:5/7;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.tcard:hover .tcard__inner{transform:translateY(-6px) rotate(1deg)}
.tcard.is-flipped .tcard__inner{transform:rotateY(180deg)}
.tcard__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.tcard__front{background:var(--c,#ff4fa3);padding:10px;display:flex;flex-direction:column}
.tcard__top{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 8px;font:400 9px var(--pixel);color:var(--ink);text-transform:uppercase}
.tcard__art{flex:1;min-height:0;border:4px solid var(--ink);border-radius:8px;overflow:hidden;background:#fff}
.tcard__art img{width:100%;height:100%;object-fit:cover}
.tcard__name{margin:8px 0 0;background:var(--ink);color:var(--text);border-radius:8px;padding:10px 12px}
.tcard__name h3{margin:0;font:400 22px/1 var(--display);text-transform:uppercase}
.tcard__name p{margin:4px 0 0;font:400 8px var(--pixel);color:var(--yellow);text-transform:uppercase}
.tcard__back{transform:rotateY(180deg);background:#f6f1e4;color:#1a1430;padding:18px;display:flex;flex-direction:column;gap:10px;border:6px solid var(--c,#ff4fa3)}
.tcard__back h3{margin:0;font:400 24px/1 var(--display);text-transform:uppercase}
.tcard__back p{margin:0;font-size:15px;line-height:1.45}
.tcard__back .pw{font:400 9px var(--pixel);text-transform:uppercase;color:#7a2a5a}
.tcard__back ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.tcard__back li{font:400 8px var(--pixel);text-transform:uppercase;background:var(--ink);color:var(--yellow);padding:6px 7px;border-radius:3px}
.tcard__back .go{margin-top:auto;display:block;text-align:center;font-weight:700;color:var(--ink);background:var(--yellow);padding:11px;border-radius:6px;text-decoration:none;border:2px solid #1a1430}
.tcard--holo .tcard__front::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.55;background:linear-gradient(115deg,transparent 20%,rgba(255,79,163,.7) 35%,rgba(45,226,230,.7) 45%,rgba(255,210,63,.7) 55%,transparent 70%);background-size:250% 250%;animation:holo 4s linear infinite}
@keyframes holo{from{background-position:100% 0}to{background-position:-150% 0}}
.holo-tag{background:linear-gradient(90deg,#ff4fa3,#2de2e6,#ffd23f);color:var(--ink);padding:3px 5px;border-radius:3px}

/* ---------- Desk-drawer props ---------- */
.prop{position:absolute;z-index:2;cursor:default;transition:transform .3s}
.prop:hover{animation:wiggle .5s ease-in-out}
@keyframes wiggle{0%,100%{transform:rotate(var(--r,0deg))}25%{transform:rotate(calc(var(--r,0deg) - 6deg)) scale(1.05)}75%{transform:rotate(calc(var(--r,0deg) + 6deg)) scale(1.05)}}
.prop{transform:rotate(var(--r,0deg))}
.prop__tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font:400 9px var(--pixel);text-transform:uppercase;background:var(--yellow);color:var(--ink);padding:7px 9px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .2s}
.prop:hover .prop__tip,.prop:focus .prop__tip{opacity:1}
.cassette{width:150px;height:96px;background:#ff4fa3;border-radius:8px;padding:10px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.cassette__label{background:#f6f1e4;border-radius:4px;height:44px;padding:4px 8px;font:400 13px/1.1 'Archivo',sans-serif;font-weight:700;color:#1a1430;position:relative}
.cassette__label small{display:block;font:400 7px var(--pixel);color:#7a2a5a}
.cassette__win{position:absolute;left:24px;right:24px;bottom:-26px;height:22px;background:#2a1a2e;border-radius:11px;display:flex;justify-content:space-between;align-items:center;padding:0 8px}
.cassette__win i{width:14px;height:14px;border-radius:50%;background:#f6f1e4;border:3px dotted #2a1a2e;animation:spin 2s linear infinite}
.cassette__foot{position:absolute;left:30px;right:30px;bottom:0;height:12px;background:#d93c8a;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
@keyframes spin{to{transform:rotate(360deg)}}
.vhs{width:190px;height:108px;background:#16161c;border-radius:6px;padding:12px;box-shadow:0 10px 24px rgba(0,0,0,.5);border:1px solid #2c2c36}
.vhs__label{background:#f6f1e4;height:44px;border-radius:3px;padding:5px 8px;color:#1a1430;font:700 13px/1.1 'Archivo',sans-serif;border-left:8px solid var(--cyan)}
.vhs__label small{display:block;font:400 7px var(--pixel);color:#c22;margin-top:4px}
.vhs__win{margin:10px auto 0;width:80px;height:22px;background:#0a0a10;border-radius:4px;border:2px solid #2c2c36}
.floppy{width:96px;height:100px;background:#2d7ff9;border-radius:4px;position:relative;box-shadow:0 10px 24px rgba(0,0,0,.5);clip-path:polygon(0 0,90% 0,100% 10%,100% 100%,0 100%)}
.floppy__shutter{position:absolute;left:24px;top:0;width:44px;height:34px;background:#c9ced8}
.floppy__shutter::after{content:"";position:absolute;right:8px;top:6px;width:10px;height:22px;background:#2d7ff9}
.floppy__label{position:absolute;left:10px;right:10px;bottom:8px;height:44px;background:#f6f1e4;border-radius:2px;padding:5px;font:400 7px/1.5 var(--pixel);color:#1a1430;text-transform:uppercase}
.cube{width:78px;height:78px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;background:#111;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.cube i{border-radius:3px}

/* ---------- Footer extras ---------- */
.foot__fun{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.sound-toggle{font:400 9px var(--pixel);text-transform:uppercase;background:none;border:1px solid var(--line2);color:var(--quiet);padding:9px 10px;border-radius:4px;cursor:pointer}
.sound-toggle[aria-pressed="true"]{color:var(--ink);background:var(--cyan);border-color:var(--cyan)}

/* ---------- Game overlay ---------- */
.game{position:fixed;inset:0;z-index:100;background:rgba(5,5,14,.92);display:flex;align-items:center;justify-content:center;padding:16px}
.game[hidden]{display:none}
.game__box{position:relative;width:100%;max-width:520px;background:#111327;border:3px solid var(--pink);border-radius:14px;box-shadow:0 0 0 4px var(--ink),0 0 60px rgba(255,79,163,.5);padding:14px}
.game__bar{display:flex;justify-content:space-between;align-items:center;font:400 10px var(--pixel);text-transform:uppercase;color:var(--yellow);padding:0 4px 10px}
.game canvas{display:block;width:100%;height:auto;aspect-ratio:3/4;image-rendering:pixelated;border-radius:6px;background:#1b1d2e;touch-action:none}
.game__close{background:none;border:2px solid var(--text);color:var(--text);font:400 10px var(--pixel);padding:8px 10px;border-radius:4px;cursor:pointer}
.game__help{margin:10px 4px 0;font:400 8px/1.8 var(--pixel);color:var(--quiet);text-transform:uppercase;text-align:center}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:101;font:400 11px var(--pixel);text-transform:uppercase;background:var(--yellow);color:var(--ink);padding:14px 16px;border-radius:6px;box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--yellow)}

@media (max-width:1180px){.prop{display:none}}
@media (max-width:860px){
  .tv__side{width:56px} .tv__knob{width:34px;height:34px} .tv__cabinet{padding:14px;gap:10px} .tv__bezel{padding:10px}
  .pegboard{padding:20px 14px}
}
@media (prefers-reduced-motion:reduce){.tcard--holo .tcard__front::after,.cassette__win i{animation:none}}
.review-quote{margin:0 0 22px;font:400 clamp(34px,3.6vw,52px)/1.05 var(--display);text-transform:uppercase}
button.toy__hint{display:block;width:100%;background:none;border:0;cursor:pointer;padding:6px}
button.toy__hint:hover{color:var(--yellow)}
.toy{cursor:pointer}
.toy__back{padding:16px;gap:8px}
.toy__back h3{font-size:22px}
.toy__back ul{font-size:14px;gap:4px}
.toy__back .cta{padding:9px}

/* Footer arcade strip: hi-score + tappable cheat-code controller */
@keyframes scoreGlow{0%,100%{text-shadow:0 0 6px rgba(255,210,63,.35)}50%{text-shadow:0 0 16px rgba(255,210,63,.9),0 0 30px rgba(255,79,163,.5)}}
.arcade{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-top:26px;padding-bottom:26px;border-bottom:1px dashed var(--line)}
.arcade__score{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-family:var(--pixel);text-transform:uppercase}
.arcade__label{font-size:11px;color:var(--pink)}
.arcade__num{font-weight:400;font-size:22px;color:var(--yellow);letter-spacing:2px;animation:scoreGlow 2.4s ease-in-out infinite}
.arcade__dare{font-size:9px;color:var(--quiet)}
.arcade__code{display:flex;align-items:center;gap:7px;font:400 12px/1 var(--pixel);color:#3a3e74}
.arcade__code > *{transition:color .15s,filter .15s}
.arcade__code > .is-lit{color:var(--cyan);filter:drop-shadow(0 0 5px var(--cyan))}
.arcade__code b{font-weight:400;margin-left:3px}
.arcade__code.is-done > *{color:var(--yellow);filter:drop-shadow(0 0 6px var(--yellow))}
.arcade__code.is-miss{animation:miss .3s}
@keyframes miss{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ka{display:inline-block;width:11px;height:11px;background:currentColor;clip-path:polygon(50% 5%,100% 90%,0 90%)}
.ka--d{transform:rotate(180deg)}.ka--l{transform:rotate(-90deg)}.ka--r{transform:rotate(90deg)}
.arcade__ctrl{display:flex;align-items:center;gap:22px;padding:10px 16px;background:#131533;border:2px solid #2a2d55;border-radius:999px;box-shadow:inset 0 2px 0 rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.4)}
.dpad{display:grid;grid-template-columns:repeat(3,26px);grid-template-rows:repeat(3,26px)}
.dpad__b,.dpad__c{background:#23264a;border:0;padding:0;display:grid;place-items:center;color:#a49fd0;cursor:pointer}
.dpad__c{cursor:default}
.dpad__b--u{grid-column:2;grid-row:1;border-radius:5px 5px 0 0}
.dpad__b--l{grid-column:1;grid-row:2;border-radius:5px 0 0 5px}
.dpad__c{grid-column:2;grid-row:2}
.dpad__b--r{grid-column:3;grid-row:2;border-radius:0 5px 5px 0}
.dpad__b--d{grid-column:2;grid-row:3;border-radius:0 0 5px 5px}
.dpad__b .ka{width:10px;height:10px}
.abtn{display:flex;gap:10px;transform:rotate(-14deg)}
.abtn__b{width:36px;height:36px;border-radius:50%;border:0;font:400 11px var(--pixel);color:#fff;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.45)}
.abtn__b--b{background:#c2357b}.abtn__b--a{background:var(--pink)}
.dpad__b:hover,.dpad__b:focus-visible{color:var(--cyan);background:#2c3060}
.abtn__b:hover,.abtn__b:focus-visible{filter:brightness(1.15)}
.dpad__b:active,.dpad__b.is-press{background:#3a3e74;color:var(--cyan)}
.abtn__b:active,.abtn__b.is-press{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.dpad__b:focus-visible,.abtn__b:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
@media (max-width:760px){
  .arcade{justify-content:center;text-align:center}
  .arcade__score{justify-content:center;width:100%}
  .arcade__code{order:2;width:100%;justify-content:center}
  .arcade__ctrl{order:3}
  .dpad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px)}
  .abtn__b{width:46px;height:46px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.arcade__num{animation:none}}

/* ---------- High scores board ---------- */
.scores__grid{display:grid;grid-template-columns:1fr 340px;gap:36px;align-items:start}
.board{background:#07081a;border:2px solid #2a2d55;border-radius:16px;padding:26px 28px 22px;box-shadow:0 0 0 6px #0f1130,0 24px 60px rgba(0,0,0,.45),inset 0 0 60px rgba(45,226,230,.05);position:relative;overflow:hidden}
.board::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.board__top{display:grid;grid-template-columns:64px 300px 1fr;gap:18px;font:400 10px var(--pixel);color:var(--quiet);text-transform:uppercase;padding:0 0 14px;border-bottom:2px dashed #2a2d55}
.board__list{list-style:none;margin:0;padding:0}
.board__row{display:grid;grid-template-columns:64px 300px 1fr;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid #1b1d3d}
.board__row:last-child{border-bottom:0}
.board__rank{font:400 13px var(--pixel);color:var(--cyan);text-transform:uppercase}
.board__score b{display:block;font:400 clamp(24px,2.4vw,34px)/1 var(--pixel);white-space:nowrap;color:var(--yellow);text-shadow:0 0 14px rgba(255,210,63,.45);letter-spacing:-1px}
.board__score small{display:block;margin-top:8px;font:400 9px var(--pixel);color:var(--pink);text-transform:uppercase}
.board__who{font-size:15px;color:var(--muted);line-height:1.45}
.board__who strong{display:block;font:400 22px/1.1 var(--display);text-transform:uppercase;color:var(--text);margin-bottom:4px}
.board__row--1 .board__rank{color:var(--yellow)}
.board__row--1 .board__score b{font-size:clamp(32px,3.3vw,46px);color:#fff;text-shadow:0 0 6px var(--pink),0 0 22px var(--pink),0 0 40px rgba(255,79,163,.6)}
.board__foot{margin:14px 0 0;text-align:center;font:400 9px var(--pixel);color:var(--quiet);text-transform:uppercase}
.board__foot .blink{color:var(--yellow);animation:blink 1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.reel{margin:0}
.reel__screen{position:relative;aspect-ratio:9/16;max-height:620px;border-radius:26px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#2a1440,#0a0b1a 70%);border:10px solid #15172f;box-shadow:0 0 0 2px #2a2d55,0 24px 60px rgba(0,0,0,.5),0 0 40px rgba(255,79,163,.18)}
.reel__screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.reel__play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;background:transparent;color:var(--text);cursor:pointer;font:400 10px var(--pixel);text-transform:uppercase}
.reel__icon{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:var(--pink);color:#fff;font-size:28px;box-shadow:0 0 0 6px rgba(255,79,163,.25),0 0 40px rgba(255,79,163,.6);padding-left:5px;transition:transform .2s}
.reel__play:hover .reel__icon,.reel__play:focus-visible .reel__icon{transform:scale(1.08)}
.reel__play:focus-visible{outline:3px solid var(--yellow);outline-offset:-6px}
.reel__big{font:400 44px var(--pixel);color:var(--yellow);text-shadow:0 0 16px rgba(255,210,63,.5)}
.reel figcaption{margin-top:12px;text-align:center;font-size:14px;color:var(--quiet)}
@media (max-width:1180px){.board__top,.board__row{grid-template-columns:56px 240px 1fr}}
@media (max-width:980px){.scores__grid{grid-template-columns:1fr}.reel{max-width:340px;margin:0 auto}}
@media (max-width:640px){
  .board{padding:20px 16px 18px}
  .board__top{display:none}
  .board__row{grid-template-columns:44px 1fr;gap:6px 12px;padding:16px 0}
  .board__who{grid-column:2}
  .board__rank{font-size:10px;align-self:start;padding-top:6px}
}
@media (prefers-reduced-motion:reduce){.board__foot .blink{animation:none}}

/* ---------- Channel-changing TV ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tv__static{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:
  repeating-radial-gradient(circle at 17% 32%,rgba(255,255,255,.9) 0 1px,transparent 1px 3px),
  repeating-radial-gradient(circle at 73% 61%,rgba(160,160,170,.9) 0 1px,transparent 1px 2px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.25) 0 2px,rgba(0,0,0,.5) 2px 4px),#555;background-size:7px 9px,5px 6px,100% 4px,auto}
.tv.is-tuning .tv__static{animation:tvStatic .56s steps(6) both}
@keyframes tvStatic{0%{opacity:0}10%{opacity:1;background-position:0 0,0 0,0 0}40%{background-position:3px 5px,2px 1px,0 7px}70%{opacity:1;background-position:1px 2px,4px 3px,0 3px}100%{opacity:0}}
.tv.is-tuning .tv__ch{animation:chBlink .56s steps(2) both}
@keyframes chBlink{50%{opacity:0}}
.tv__dial{border:0;padding:0;cursor:pointer;transition:transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;transform:rotate(var(--turn,0deg))}
.tv__dial:hover,.tv__dial:focus-visible{box-shadow:0 3px 0 #2a1a0c,0 0 0 4px var(--yellow),0 0 18px rgba(255,210,63,.7)}
.tv__dial:focus-visible{outline:none}
section:not(.tv-touched) .tv__dial{animation:dialHint 2.4s ease-in-out 2s infinite}
@keyframes dialHint{0%,70%,100%{box-shadow:0 3px 0 #2a1a0c}80%{box-shadow:0 3px 0 #2a1a0c,0 0 0 5px rgba(255,210,63,.85),0 0 20px rgba(255,210,63,.7)}}
.tv-remote{display:flex;align-items:stretch;justify-content:center;gap:8px;margin:22px auto 0;max-width:560px;flex-wrap:nowrap}
.tv-remote__arrow,.tv-remote__ch{font:400 9px var(--pixel);text-transform:uppercase;color:var(--muted);background:#131533;border:1px solid #2a2d55;border-radius:6px;padding:10px 12px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tv-remote__chs{display:flex;gap:6px;flex:1;min-width:0}
.tv-remote__chs .tv-remote__ch{flex:1 1 0;min-width:0;line-height:1.5}
.tv-remote__arrow{flex:0 0 auto;font-size:11px;line-height:1}
.tv-remote__ch b{display:block;font-weight:400;font-size:12px;color:#5dff7a;margin-bottom:5px;text-shadow:0 0 6px rgba(93,255,122,.6)}
.tv-remote__ch.is-on{background:#1d2047;border-color:var(--yellow);color:var(--text)}
.tv-remote__arrow:hover,.tv-remote__ch:hover,.tv-remote__arrow:focus-visible,.tv-remote__ch:focus-visible{border-color:var(--cyan);color:var(--text);outline:none}
.tv-hint{line-height:1.9}
.tv-hint::before{content:"\2191  "}
.tv-quote{transition:opacity .25s,transform .25s}
.tv-quote.is-tuning{opacity:0;transform:translateY(6px)}
.tv-quote__who{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.kudos{margin-top:72px;padding-top:44px;border-top:1px dashed #2a2d55}
.kudos__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:10px}
.kudo{margin:0;background:#131533;border:1px solid #23264a;border-radius:14px;padding:24px 26px}
.kudo blockquote{margin:0 0 14px;font:400 26px/1.15 var(--display);text-transform:uppercase;color:var(--text)}
.kudo figcaption{font-size:14px;color:var(--quiet)}
.kudo figcaption strong{color:var(--yellow);font-weight:700}
@media (max-width:640px){.tv-remote{gap:5px}.tv-remote__arrow{padding:8px 7px;font-size:9px}.tv-remote__ch{padding:8px 4px;font-size:6px}.tv-remote__ch b{font-size:11px}.kudo blockquote{font-size:22px}}
@media (prefers-reduced-motion:reduce){.tv.is-tuning .tv__static,.tv.is-tuning .tv__ch,section:not(.tv-touched) .tv__dial{animation:none}.tv-quote{transition:none}}
/* show the full 16:9 thumbnail letterboxed, like widescreen on a vintage set */
.tv__screen img[data-tv-thumb]{object-fit:contain;background:#000}

/* Testimonial cards with headshots */
.kudos__grid{grid-template-columns:repeat(2,1fr);gap:22px}
.kudo{display:grid;grid-template-columns:72px 1fr;gap:6px 20px;align-items:start;padding:26px 28px}
.kudo__face{grid-row:1/3;width:72px;height:72px;border-radius:50%;border:3px solid var(--yellow);box-shadow:0 0 0 4px rgba(255,210,63,.15);object-fit:cover;background:#23264a}
.kudo__face--init{display:grid;place-items:center;font:400 14px var(--pixel);color:var(--yellow)}
.kudo blockquote{margin:0}
.kudo__pull{margin:0 0 10px;font:400 26px/1.12 var(--display);text-transform:uppercase;color:var(--text)}
.kudo__full{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--muted)}
.kudo figcaption{grid-column:2;font-size:14px;color:var(--quiet);display:flex;flex-direction:column;gap:2px}
.kudo figcaption strong{color:var(--yellow);font-weight:700;font-size:15px}
@media (max-width:860px){.kudos__grid{grid-template-columns:1fr}}
@media (max-width:520px){.kudo{grid-template-columns:1fr;padding:22px}.kudo__face{grid-row:auto;width:64px;height:64px}.kudo figcaption{grid-column:auto}.kudo__pull{font-size:22px}}
.kudo blockquote{font:400 16px/1.6 var(--body);text-transform:none;color:var(--muted)}
.kudo__full{font:400 15px/1.6 var(--body);text-transform:none}

/* Reel poster: show the still, keep its caption readable, controls along the bottom */
.reel__screen{aspect-ratio:3/4}
.reel__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__play{justify-content:flex-end;padding-bottom:26px;background:linear-gradient(180deg,rgba(10,11,26,0) 55%,rgba(10,11,26,.85) 82%,rgba(10,11,26,.95) 100%)}
.reel__play .reel__icon{position:absolute;top:16px;right:16px;width:54px;height:54px;font-size:20px}
.reel__big{font-size:38px;line-height:1}

/* Remote: yellow arrow buttons so they read as clickable */
.tv-remote__arrow{background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-size:18px;padding:10px 16px;box-shadow:0 3px 0 #b8901c}
.tv-remote__arrow:hover,.tv-remote__arrow:focus-visible{background:#ffe27a;border-color:#ffe27a;color:var(--ink);outline:none}
.tv-remote__arrow:active{transform:translateY(2px);box-shadow:0 1px 0 #b8901c}
.tv-remote__arrow:focus-visible{box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--yellow)}
@media (max-width:640px){.tv-remote__arrow{font-size:15px;padding:8px 10px}.tv-remote__ch b{font-size:10px}}

/* Static stat overlay (no playback) */
.reel__stat{cursor:default;pointer-events:none}
.reel__stat .reel__big{font-size:44px}

/* Attract-mode chase on the footer cheat code */
.arcade__code > .is-chase{color:var(--yellow);filter:drop-shadow(0 0 6px var(--yellow))}
/* A11y pass: 8px pixel-font floor and 44px touch targets */
@media (max-width:640px){
  .tv-remote__ch{font-size:8px;padding:10px 4px;min-height:52px}
  .tv-remote__arrow{min-width:44px;min-height:56px}
  .tv__knob{width:44px;height:44px}
  .dpad__b{min-width:44px;min-height:44px}
}
button.toy__hint{min-height:44px}
.sound-toggle{min-height:44px;padding:12px 14px}
/* Focus ring stays visible on cyan/yellow/pink fills */
.bg-cyan:focus-visible,.bg-yellow:focus-visible,.bg-pink:focus-visible,.btn:focus-visible,[class*="bg-"]:focus-visible{outline:3px solid var(--ink);box-shadow:0 0 0 6px var(--cyan)}
@media (max-width:640px){.dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}}
[data-q-link]{display:inline-block;padding:9px 0;margin:-9px 0}
.filters button{min-height:44px}
/* Action Squad: sideways swipe row on phones */
@media (max-width:640px){
  .pegboard{overflow:hidden}
  .toys{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 18% 10px 4px;scrollbar-width:none}
  .toys::-webkit-scrollbar{display:none}
  .toys .toy{flex:0 0 72%;scroll-snap-align:center}
  .shelf__swipe{display:block}
}
.shelf__swipe{display:none;margin:0 0 14px;font:400 10px/1.6 var(--pixel);text-transform:uppercase;color:var(--yellow)}
@media (max-width:640px){
  .shelf__swipe{display:block}
  .shelf__head{position:relative;margin-bottom:20px}
  .shelf__burst{position:absolute;right:0;top:-6px;width:84px;height:84px;font-size:13px}
}
/* Odd count: let the last review stretch across instead of leaving a gap */
@media (min-width:861px){.kudos__grid .kudo:last-child:nth-child(odd){grid-column:1/-1}}