:root{
  --bg-scene:#2f5d46;
  --ink:#f3f7ee;
  --ink-soft:#c9dbc8;
  --panel:rgba(10,26,19,.62);
  --panel-edge:rgba(255,255,255,.14);
  --accent:#e8c76a;
  --accent-ink:#2a2208;
  --btn:rgba(255,255,255,.14);
  --font:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:106.25%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-text-size-adjust:100%}
body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background-color:var(--bg-scene);transition:background-color 1.4s ease;
  color:var(--ink);font-family:var(--font);font-weight:500}
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:
   radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),
   linear-gradient(to bottom,rgba(255,255,255,.06),rgba(0,0,0,.42))}
body[data-scene="0"]{--bg-scene:#3a7a58}
body[data-scene="1"]{--bg-scene:#2d6f86}
body[data-scene="2"]{--bg-scene:#7a4f78}
body[data-scene="3"]{--bg-scene:#a2593a}
body[data-scene="4"]{--bg-scene:#1f2f55}
#app{position:relative;margin:0 auto;width:100%;max-width:520px;height:100vh;height:100dvh;
  display:flex;flex-direction:column;padding:env(safe-area-inset-top) 8px env(safe-area-inset-bottom)}
#hud{flex:none;display:grid;grid-template-columns:1.3fr .8fr .8fr 1.2fr auto;gap:6px;align-items:stretch;padding:8px 0 6px}
.stat,.nextbox{background:var(--panel);border:1px solid var(--panel-edge);border-radius:12px;padding:5px 8px;
  display:flex;flex-direction:column;justify-content:center;min-width:0}
.lab{font-size:10.5px;font-weight:700;color:var(--ink-soft);letter-spacing:.04em;white-space:nowrap}
.stat b{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:.01em;overflow:hidden;text-overflow:clip}
.nextbox{align-items:center;padding:4px 8px}
#next{display:block;width:60px;height:30px}
#stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#boardwrap{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.18)}
#board{display:block}
#toast{position:absolute;left:50%;top:14%;transform:translate(-50%,0);max-width:92%;text-align:center;
  background:rgba(10,26,19,.82);border:1px solid var(--panel-edge);border-radius:14px;padding:8px 14px;
  font-weight:900;font-size:17px;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,6px)}
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(6,16,12,.6);animation:fadein .35s ease both;padding:8px}
#overlay[hidden]{display:none}
.card{width:100%;max-width:300px;background:rgba(14,34,26,.94);border:1px solid var(--panel-edge);border-radius:18px;padding:16px 14px;text-align:center}
.card h2{margin:0 0 6px;font-size:24px;font-weight:900;letter-spacing:.02em}
.card p{margin:0 0 8px;font-size:15px;line-height:1.6;font-weight:700}
.card p em{font-style:normal;color:var(--accent);font-weight:900}
#ov-recent{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;
  font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;max-height:68px;overflow:hidden}
#ov-recent:empty{display:none}
#bar{flex:none;display:flex;gap:10px;justify-content:center;padding:8px 0 10px}
.btn{font:inherit;font-weight:900;font-size:16px;color:var(--ink);background:var(--btn);
  border:1.5px solid var(--panel-edge);border-radius:14px;min-height:48px;min-width:112px;padding:0 18px;cursor:pointer;
  transition:transform .12s ease,background-color .2s ease}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;min-width:160px;font-size:18px}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (max-width:360px){
  #hud{gap:4px}.stat,.nextbox{padding:4px 5px}.stat b{font-size:15px}.lab{font-size:9.5px}#next{width:48px;height:24px}
}