:root{--ink: #0e1430;--cloud: #f5f7ff;--cobalt: #2855f8;--yellow: #ffd449;--coral: #ff7f73;--font-display: "Trebuchet MS", "Avenir Next", system-ui, sans-serif;--font-body: system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:#05070f;color:var(--cloud);font-family:var(--font-body);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#game,#game canvas{position:fixed;inset:0;display:block;touch-action:none}.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:#05070f8c;z-index:10}.overlay.title{background:linear-gradient(180deg,#05070f33,#05070fb3)}.card{max-width:560px;width:100%;background:#0e1430e6;border:2px solid rgba(255,212,73,.4);border-radius:22px;padding:clamp(16px,4vh,32px) clamp(18px,4vw,36px);display:grid;gap:10px;text-align:center;box-shadow:0 18px 60px #00000080}.card.small{max-width:380px}.card h1,.card h2{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:.02em}.card h1{font-size:clamp(2.2rem,7vh,3.4rem);color:var(--yellow);text-shadow:3px 3px 0 var(--cobalt)}.card h2{font-size:1.8rem}.card p{margin:0}.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:800;color:#9bb0ff}.tag{font-size:1.1rem;font-weight:700}.how{list-style:none;padding:0;margin:4px 0;display:grid;gap:4px;font-size:.95rem;color:#c9d2f2}.how strong{color:#fff}.keys{font-size:.85rem;color:#aeb7da}.keys span{font-family:ui-monospace,Menlo,monospace;background:#ffffff1a;border-radius:6px;padding:1px 6px;color:#fff}.keys.touch{display:none}@media(pointer:coarse){.keys{display:none}.keys.touch{display:block}}.card .go{margin-top:6px;font-weight:800;color:var(--yellow);animation:go-pulse 1.4s ease-in-out infinite}.score{font-family:ui-monospace,Menlo,monospace;font-size:1.4rem;font-weight:700}@keyframes go-pulse{50%{opacity:.55}}.era-toast{position:fixed;left:50%;top:18%;transform:translate(-50%) scale(.9);font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,6vh,2.6rem);letter-spacing:.06em;color:#fff;text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink);opacity:0;pointer-events:none;z-index:5;transition:opacity .18s,transform .18s}.era-toast.show{opacity:1;transform:translate(-50%) scale(1)}.touch-ui{position:fixed;inset:0;pointer-events:none;z-index:6}.touch-btn{position:absolute;pointer-events:auto;border:2px solid rgba(255,255,255,.5);background:#0e14308c;color:#fff;font-family:var(--font-display);font-weight:800;border-radius:999px;touch-action:none}.touch-btn.roll{right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:84px;height:84px;font-size:.95rem}.touch-btn.pause{left:50%;transform:translate(-50%);top:max(10px,env(safe-area-inset-top));width:48px;height:44px;font-size:.9rem}.rotate{position:fixed;inset:0;z-index:20;display:none;place-items:center;background:#0e1430;padding:24px;text-align:center}@media(orientation:portrait)and (pointer:coarse){.rotate{display:grid}}.rotate-card{display:grid;gap:18px;justify-items:center;font-family:var(--font-display);font-weight:800;font-size:1.2rem}.rotate-phone{width:54px;height:92px;border:4px solid var(--yellow);border-radius:12px;animation:rotate-hint 2.4s ease-in-out infinite}@keyframes rotate-hint{0%,30%{transform:rotate(0)}60%,to{transform:rotate(90deg)}}@media(prefers-reduced-motion:reduce){.go,.rotate-phone{animation:none}.era-toast{transition:none}}