/* Layout: full-bleed canvas world; DOM overlays float above it (start card, cartridge carousel, choice card).
   Single sunny-meadow look on purpose, so colors are set explicitly with no dark variant. */
:root{
  --sky:#63bff4;
  --grass:#7ccf6a;
  --leaf:#2f7d4a;
  --sun:#ffd84d;
  --berry:#ff5d7a;
  --berry-deep:#c93c58;
  --orange:#ff9f43;
  --ink:#2c3a2e;
  --soft:#5e6f60;
  --card:#fffdf5;
  --edge:#efe3c2;
  --f-ui:"Baloo 2","Chiron GoRound TC","PingFang TC","Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;
  --f-num:"Baloo 2","Chiron GoRound TC",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* Halloween theme: same layout, night palette */
body.hw{--sky:#211846;--berry:#ff7a1a;--berry-deep:#c4540a;--leaf:#6a3fb5;--card:#fff6ea;--edge:#e9c9a4}
body.hw .menu-title{text-shadow:0 3px 0 rgba(0,0,0,.45)}
body.hw .screen.dim{background:rgba(20,10,40,.5)}
html,body{height:100%;margin:0;overflow:hidden;background:var(--sky);color:var(--ink);font-family:var(--f-ui);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#stage{position:fixed;inset:0;display:block;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
h1,h2{margin:0;font-weight:900;text-wrap:balance;letter-spacing:.02em}
p{margin:0;line-height:1.6}

.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-y:auto;
  padding-block:calc(14px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.screen.clear{pointer-events:none}
.screen.dim{background:rgba(30,60,40,.35)}

.card{background:var(--card);border-radius:28px;padding:24px;width:100%;max-width:560px;margin:auto;
  box-shadow:0 6px 0 var(--edge),0 20px 50px rgba(30,70,40,.25);display:flex;flex-direction:column;gap:14px}
.start-card h1{font-size:clamp(30px,6.5vw,46px)}
.hero-row{display:flex;gap:6px;font-size:clamp(30px,7vw,46px);line-height:1}
.hero-row span{display:inline-block;animation:bob 2.4s ease-in-out infinite}
.hero-row span:nth-child(2n){animation-delay:-1.2s}
@keyframes bob{50%{transform:translateY(-6px)}}
.lede{color:var(--soft)}
.tips{margin:0;padding-left:20px;color:var(--soft);font-size:14px;display:flex;flex-direction:column;gap:4px}
.tips b{color:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{border:none;border-radius:999px;padding:14px 22px;font-size:17px;font-weight:700}
.btn-go{background:var(--berry);color:#fff;box-shadow:0 5px 0 var(--berry-deep)}
.btn-go:active{transform:translateY(3px);box-shadow:0 2px 0 var(--berry-deep)}
.btn-soft{background:#fff;box-shadow:inset 0 0 0 3px var(--edge),0 4px 0 var(--edge)}
.btn[disabled]{opacity:.55;cursor:wait}
.status{min-height:1.4em;font-size:14px;color:var(--berry-deep);font-weight:700}
.status.ok{color:var(--soft);font-weight:400}

/* camera preview */
.preview{position:fixed;z-index:5;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));
  width:150px;border-radius:16px;overflow:hidden;background:#173022;border:3px solid #fff;box-shadow:0 6px 18px rgba(20,50,30,.3);pointer-events:none}
.preview.big{width:190px}
.pv-stage{position:relative;aspect-ratio:4/3;max-width:100%}
.pv-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.pv-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-read{font-size:12px;font-weight:700;padding:4px 8px;background:#fff;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.corner-btn{position:fixed;z-index:6;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));
  border:none;border-radius:999px;background:rgba(255,253,245,.92);padding:9px 16px;font-weight:700;font-size:15px;box-shadow:0 3px 0 var(--edge)}

/* menu */
.menu{justify-content:space-between;gap:6px;overflow:hidden}
.menu-top{width:100%;max-width:1100px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.menu-title{font-size:clamp(22px,4.2vw,34px);color:#fff;text-shadow:0 3px 0 rgba(30,100,150,.35)}
.menu-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.music-btn{border:none;border-radius:999px;background:rgba(255,253,245,.9);padding:9px 14px;font-size:14px;font-weight:700;box-shadow:0 3px 0 rgba(0,0,0,.08)}
.seg{display:inline-flex;background:rgba(255,253,245,.9);border-radius:999px;padding:4px;gap:2px;box-shadow:0 3px 0 rgba(0,0,0,.08)}
.seg button{border:none;background:transparent;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:700;color:var(--soft)}
.seg button[aria-pressed="true"]{background:var(--leaf);color:#fff}
.carousel{position:relative;width:100%;flex:1;min-height:0;touch-action:pan-y}
.nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:52px;height:52px;border:none;border-radius:50%;
  background:rgba(255,253,245,.92);font-size:34px;line-height:1;font-weight:900;color:var(--leaf);box-shadow:0 4px 0 rgba(0,0,0,.12)}
.nav-prev{left:0}.nav-next{right:0}
.menu-foot{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.dots{display:flex;gap:8px}
.dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.6)}
.dots i.on{background:#fff;transform:scale(1.35)}
.hints{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.hint-chip{background:rgba(255,253,245,.92);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700;box-shadow:0 3px 0 rgba(0,0,0,.08)}

/* game cartridge */
.cart{position:absolute;left:50%;top:50%;height:min(100%,460px);aspect-ratio:3/4;max-width:80vw;container-type:size;
  border-radius:24px 24px 32px 32px;background:var(--c);padding:clamp(10px,3.5%,18px) clamp(10px,5%,20px) clamp(8px,3%,14px);
  display:flex;flex-direction:column;gap:clamp(6px,2%,12px);
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.14),0 6px 0 rgba(0,0,0,.12),0 18px 30px rgba(20,60,40,.28);
  transition:transform .45s cubic-bezier(.2,.9,.25,1.12),opacity .35s,filter .35s;cursor:pointer;will-change:transform}
.cart.side{filter:saturate(.75) brightness(.96)}
.cart-notch{height:4.4cqh;border-radius:2cqh;background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 2.4cqw,transparent 2.4cqw 4.8cqw)}
.cart-label{flex:1;min-height:0;background:var(--card);border-radius:4cqh;padding:3cqh;display:flex;flex-direction:column;gap:1.6cqh}
.cart-art{position:relative;flex:1;min-height:0;border-radius:3cqh;overflow:hidden;background:var(--bg)}
.cart-art span{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));line-height:1}
.cart-art .bub{border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.15) 45%,rgba(160,210,255,.25));
  box-shadow:inset 0 0 0 .5cqh rgba(255,255,255,.75)}
.cart-title{font-size:7.2cqh;font-weight:900;line-height:1.1}
.cart-tag{font-size:3.4cqh;color:var(--soft);line-height:1.35}
.cart-chips{display:flex;gap:1.4cqw;flex-wrap:wrap}
.cart-chips span{font-size:3cqh;font-weight:700;background:#f3ecd8;border-radius:99px;padding:.6cqh 2.2cqw}
.cart-hold{height:5.6cqh;border-radius:99px;background:rgba(255,255,255,.35);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cart-hold i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sun)}
.cart-hold b{position:relative;font-size:3.2cqh;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cart.side .cart-hold{visibility:hidden}

/* countdown */
.ready-num{font-family:var(--f-num);font-weight:800;font-size:min(32vw,190px);line-height:1;color:#fff;
  -webkit-text-stroke:6px var(--leaf);paint-order:stroke fill;text-shadow:0 8px 0 rgba(0,0,0,.15)}
.ready-hint{margin-top:12px;background:var(--card);border-radius:999px;padding:10px 20px;font-size:clamp(16px,3.4vw,24px);font-weight:900;box-shadow:0 4px 0 var(--edge);text-align:center;max-width:90vw}
.ready-hint:empty{display:none}

/* pause / results */
.choice-card{max-width:520px;align-items:stretch;text-align:center}
.eyebrow{font-size:14px;font-weight:900;letter-spacing:.12em;color:var(--berry)}
.choice-card h2{font-size:clamp(24px,5vw,34px)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.stats:empty{display:none}
.stat{background:#f6efdc;border-radius:16px;padding:10px 12px}
.stat .k{font-size:13px;color:var(--soft)}
.stat .v{font-family:var(--f-num);font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.note{color:var(--soft);font-size:15px}
.note:empty{display:none}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{border:none;border-radius:20px;padding:16px 10px;font-size:19px;font-weight:900;background:#f3ecd8;box-shadow:0 4px 0 var(--edge);transition:transform .2s}
.choice.sel{background:var(--berry);color:#fff;box-shadow:0 5px 0 var(--berry-deep);transform:scale(1.04)}
.hold{height:8px;border-radius:99px;background:#efe6cf;overflow:hidden}
.hold i{display:block;height:100%;width:0;background:var(--sun)}
.hint{font-size:14px;color:var(--soft)}

@media (max-height:520px){
  .card{padding:16px;gap:10px}
  .tips{font-size:13px}
  .nav{width:44px;height:44px;font-size:28px}
  .hint-chip{font-size:12px;padding:4px 10px}
  .preview{width:120px}.preview.big{width:150px}
  .stat .v{font-size:22px}
  .choice{padding:12px 8px;font-size:17px}
}
@media (max-width:520px){
  .preview{width:112px}.preview.big{width:140px}
}
@media (prefers-reduced-motion:reduce){
  .hero-row span{animation:none}
  .cart{transition:none}
}