@font-face { font-family: Nunito; src: url(fonts/nunito.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
:root { --ink: #f6eadb; --dim: rgba(246,234,219,.62); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #141826; overflow: hidden; }
body { font-family: Nunito, system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); user-select: none; -webkit-user-select: none; }
#stage { position: fixed; inset: 0; }
canvas#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#hud { position: absolute; inset: 0; pointer-events: none; }
.glow { position: absolute; left: calc(12px + env(safe-area-inset-left)); top: calc(10px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--dim); text-shadow: 0 1px 6px rgba(0,0,0,.35); transition: opacity .6s; }
.glow i { width: 9px; height: 9px; border-radius: 50%; background: #ffd28a; box-shadow: 0 0 10px 3px rgba(255,210,138,.55); }
.hint { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); text-align: center; font-size: 14px; letter-spacing: .06em; color: var(--dim);
  text-shadow: 0 1px 6px rgba(0,0,0,.5); opacity: 0; transition: opacity 1.2s; }
.hint.show { opacity: 1; }

.screen, .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
[hidden] { display: none !important; }
#title { background: radial-gradient(ellipse at 50% 70%, rgba(255,138,75,.18), transparent 60%), rgba(10,12,28,.35); animation: fadein .9s ease; }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.title-art { width: min(68vw, 300px); margin-bottom: 10px; filter: drop-shadow(0 12px 30px rgba(0,0,0,.45)); }
.title-art svg { width: 100%; height: auto; display: block; }
h1 { margin: 6px 0 2px; font-weight: 300; font-size: clamp(34px, 9vw, 52px); letter-spacing: .14em; }
.tag { margin: 0 0 26px; color: var(--dim); font-size: 15px; letter-spacing: .08em; }
.big { font: inherit; font-weight: 600; font-size: 18px; letter-spacing: .05em; color: #1a1830; background: linear-gradient(180deg, #ffd9a8, #ffb37a);
  border: 0; border-radius: 999px; padding: 14px 38px; cursor: pointer; box-shadow: 0 8px 24px rgba(255,160,100,.28); }
.big:active { transform: translateY(1px); }
.link { font: inherit; font-size: 14px; letter-spacing: .05em; color: var(--dim); background: none; border: 0; margin-top: 14px; cursor: pointer; text-decoration: underline dotted; }
.best { margin: 18px 0 0; font-size: 13px; letter-spacing: .08em; color: var(--dim); }
.title-icons { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 14px; }
.roundicon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(246,234,219,.25); background: rgba(20,24,38,.45); color: var(--ink); font: inherit; font-size: 20px; cursor: pointer; }
.roundicon.off { opacity: .45; }

#result { background: rgba(8,10,24,.35); animation: fadein 1.6s ease; }
.card { background: rgba(20,24,38,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(246,234,219,.12); border-radius: 22px; padding: 26px 32px 22px; min-width: min(78vw, 320px); }
.kicker { margin: 0; font-size: 13px; letter-spacing: .14em; color: var(--dim); }
.score { font-size: 56px; font-weight: 200; letter-spacing: .04em; margin: 6px 0 0; color: #ffd9a8; text-shadow: 0 0 24px rgba(255,200,140,.4); }
.sub { margin: 0 0 20px; font-size: 13px; letter-spacing: .06em; color: var(--dim); }
#test-result { position: absolute; left: 0; top: 0; }