/* Game Show Stage — dark stage, gold marquee, bright player colors. Single dark theme on purpose. */
:root{
  --stage:#14122b; --stage-2:#1b1838; --card:#221f45; --line:#3a3570;
  --gold:#ffd23f; --gold-dk:#c99a00; --red:#ff5a5f; --blue:#3d8bff; --green:#3ddc84;
  --ink:#ffffff; --ink-soft:#c9c4ef;
  --display:'Bungee',Impact,'Arial Black',sans-serif;
  --body:'Baloo 2','Trebuchet MS','Arial Rounded MT Bold',sans-serif;
  color-scheme:dark;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box;
  height:100%;background:var(--stage);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--stage);color:var(--ink);font-family:var(--body);font-size:16px;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#app{height:100%;max-width:900px;margin:0 auto;position:relative}
.screen{height:100%;display:flex;flex-direction:column;
  padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px))}

/* ---------- home ---------- */
.marquee{padding:18px 16px 14px;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:radial-gradient(ellipse at 50% 0%,#3a2f7a 0%,var(--stage) 72%);position:relative}
.marquee::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:8px;
  background:radial-gradient(circle,var(--gold) 0 3px,transparent 3.5px) 0 50%/18px 8px repeat-x;animation:bulbs 1.2s steps(2) infinite}
@keyframes bulbs{50%{background-position:9px 50%}}
.eyebrow{font-size:13px;letter-spacing:3px;color:var(--gold);font-weight:700}
.logo{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(38px,11vw,64px);line-height:1;color:var(--gold);text-shadow:0 4px 0 var(--red)}
.link-btn{background:none;border:0;color:var(--ink-soft);font-weight:700;font-size:14px;text-decoration:underline;min-height:36px;cursor:pointer;padding:0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.chip{border:0;border-radius:999px;padding:6px 14px;font-weight:800;font-size:16px;min-height:40px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#fff;transition:transform .15s}
.chip .stars{font-family:var(--display);font-weight:400;font-size:14px;background:rgba(0,0,0,.22);border-radius:999px;padding:1px 8px}
.chip.dark-text{color:#14122b}
.chip.pop{animation:pop .45s}
@keyframes pop{40%{transform:scale(1.25)}}
.chips.small{margin:0;flex-wrap:nowrap;overflow-x:auto;max-width:100%;justify-content:safe center;padding:2px 2px 4px;scrollbar-width:none}
.chips.small::-webkit-scrollbar{display:none}
.chips.small .chip{font-size:15px;min-height:44px;padding:4px 11px;flex:0 0 auto}

.grid{flex:1;overflow:auto;padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;-webkit-overflow-scrolling:touch}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:820px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-height:120px;cursor:pointer;transition:transform .12s,border-color .12s}
.tile:active{transform:scale(.96);border-color:var(--gold)}
.tile .badge{width:62px;height:62px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.tile .badge svg{width:42px;height:42px}
.tile .name{font-weight:800;font-size:17px;line-height:1.1}
.tile .tag{font-size:12px;color:var(--ink-soft);font-weight:700;letter-spacing:.5px}
.dock{padding:12px 16px 16px;border-top:1px solid #2a2655;background:var(--stage)}

.btn{border:0;border-radius:16px;min-height:52px;padding:0 20px;font-weight:800;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s}
.btn:active{transform:translateY(3px)}
.btn.big{width:100%;min-height:62px;font-family:var(--display);font-weight:400;font-size:22px}
.btn.gold{background:var(--gold);color:#14122b;box-shadow:0 5px 0 var(--gold-dk)}
.btn.red{background:var(--red);color:#fff;box-shadow:0 5px 0 #b8383c}
.btn.green{background:var(--green);color:#0b2a1a;box-shadow:0 5px 0 #1f9a57}
.btn.ghost{background:var(--card);border:2px solid var(--line);color:#fff}
.btn:disabled{opacity:.45}

/* ---------- game shell ---------- */
.topbar{display:flex;align-items:center;gap:10px;padding:12px 14px 6px}
.icon-btn{width:46px;height:46px;flex:0 0 46px;border-radius:14px;background:var(--card);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.muted #muteWave{display:none}
.game-title{flex:1;margin:0;text-align:center;font-family:var(--display);font-weight:400;font-size:clamp(15px,4.6vw,22px);color:var(--gold);line-height:1.1}
.stage{flex:1;min-height:0;position:relative;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:min(14px,1.4vh);padding:10px 16px;text-align:center;transition:background-color .35s}
.score-row{padding:6px 12px 2px;display:flex;flex-direction:column;align-items:center;gap:2px}
.hint{font-size:12px;color:var(--ink-soft);font-weight:700}
.controls{display:flex;gap:12px;padding:10px 16px 16px}
.controls .btn{flex:1}

/* stage content */
.call{font-family:var(--display);font-weight:400;font-size:clamp(30px,min(10vw,6.5vh),72px);line-height:1.02;margin:0;text-wrap:balance}
.sub{font-size:clamp(18px,min(5.4vw,3.4vh),30px);font-weight:800;margin:0;text-wrap:balance;line-height:1.15}
.small-note{font-size:15px;color:var(--ink-soft);font-weight:700;margin:0}
.intro-badge{width:120px;height:120px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(255,210,63,.25)}
.intro-badge svg{width:84px;height:84px}
.how{font-size:19px;font-weight:700;max-width:30ch;margin:0;color:var(--ink-soft);line-height:1.3}
.big-pic{font-size:min(36vw,17vh);line-height:1;filter:drop-shadow(0 8px 0 rgba(0,0,0,.25))}
.countdown{font-family:var(--display);font-size:clamp(48px,16vw,96px);line-height:1}

/* traffic light */
.tlight{width:min(150px,32vw,17vh);padding:min(16px,1.6vh) 0;border-radius:40px;background:#0b0a1a;border:4px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:12px}
.lamp{width:min(92px,20vw,11vh);aspect-ratio:1;border-radius:50%;transition:background .2s,box-shadow .2s}
.lamp.r{background:#3a1d24}.lamp.y{background:#3a3420}.lamp.g{background:#163a28}
.lamp.r.on{background:var(--red);box-shadow:0 0 40px 10px rgba(255,90,95,.6)}
.lamp.y.on{background:var(--gold);box-shadow:0 0 40px 10px rgba(255,210,63,.6)}
.lamp.g.on{background:var(--green);box-shadow:0 0 40px 10px rgba(61,220,132,.6)}

/* zoom */
.zoom-box{width:min(78vw,40vh);aspect-ratio:1;border-radius:28px;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;border:6px solid var(--gold)}
.zoom-pic{font-size:min(56vw,33vh);line-height:1;will-change:transform}

/* bomb */
.bomb{font-size:min(38vw,20vh);line-height:1}
.bomb.wobble{animation:wob .5s infinite}
@keyframes wob{25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.boom-flash{animation:flash .6s 3}
@keyframes flash{50%{background:#ff9f1c}}

/* timer ring */
.ring{width:min(200px,48vw,26vh);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ring-in{width:84%;aspect-ratio:1;border-radius:50%;background:var(--stage);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:clamp(40px,12vw,64px)}

/* canvas games */
.play-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.overlay-top{position:absolute;left:0;right:0;top:10px;display:flex;justify-content:center;gap:10px;pointer-events:none;z-index:3}
.pill{background:rgba(20,18,43,.82);border:2px solid var(--line);border-radius:999px;padding:4px 14px;font-weight:800;font-size:18px}
.banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:4;background:rgba(20,18,43,.9);border:3px solid var(--gold);border-radius:22px;padding:16px 22px;pointer-events:none;width:max-content;max-width:90%}

/* sheet */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(8,7,20,.78);display:flex;align-items:flex-end;justify-content:center;
  padding:16px max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.sheet-card{width:100%;max-width:520px;background:var(--stage-2);border:2px solid var(--line);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:14px;max-height:90%;overflow:auto}
.sheet-card h2{margin:0;font-family:var(--display);font-weight:400;color:var(--gold);font-size:26px}
.player-rows{display:flex;flex-direction:column;gap:10px}
.prow{display:flex;gap:8px;align-items:center}
.prow input{flex:1;min-width:0;height:50px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:#fff;font:inherit;font-size:18px;font-weight:700;padding:0 14px}
.swatch{width:50px;height:50px;border-radius:14px;border:3px solid rgba(255,255,255,.6);cursor:pointer;flex:0 0 50px}
.remove{width:50px;height:50px;flex:0 0 50px;border-radius:14px;border:2px solid var(--line);background:none;color:var(--ink-soft);font-size:24px;cursor:pointer}
.sheet-actions{display:flex;gap:10px;flex-wrap:wrap}
.sheet-actions .btn{flex:1 1 180px;font-size:16px}
.error{color:#ff9a9d;font-weight:700;margin:0}

/* spin */
.spin-wrap{align-self:center;display:flex;flex-direction:column;align-items:center;gap:22px;position:relative}
.wheel{width:min(84vw,52vh);aspect-ratio:1;border-radius:50%;border:8px solid var(--gold);position:relative;
  background:conic-gradient(#ff5a5f 0 36deg,#ff9f1c 36deg 72deg,#ffd23f 72deg 108deg,#3ddc84 108deg 144deg,#2ec4b6 144deg 180deg,#3d8bff 180deg 216deg,#b28dff 216deg 252deg,#ff7eb6 252deg 288deg,#7ad7f0 288deg 324deg,#c6f0d8 324deg 360deg);
  transition:transform 4.2s cubic-bezier(.12,.7,.15,1)}
.wheel .wicon{position:absolute;left:50%;top:50%;width:14%;aspect-ratio:1;margin:-7% 0 0 -7%;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.wheel .wicon svg{width:76%;height:76%}
.pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:2;border-left:18px solid transparent;border-right:18px solid transparent;border-top:34px solid #fff}
.spin-label{font-family:var(--display);font-size:clamp(22px,7vw,36px);color:var(--gold);text-align:center;min-height:1.2em}

.toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;background:var(--gold);color:#14122b;font-weight:800;padding:10px 18px;border-radius:999px;max-width:90%;text-align:center}

/* confetti star burst */
.burst{position:fixed;z-index:25;pointer-events:none;font-size:26px;animation:fly .9s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}