@font-face{font-family:PixelOperator;src:url(/assets/fonts/PixelOperator8.ttf) format("truetype");font-display:swap}@font-face{font-family:PixelOperatorBold;src:url(/assets/fonts/PixelOperator8-Bold.ttf) format("truetype");font-display:swap}:root{--bg-top: #8fd8ff;--bg-bottom: #fff1b8;--panel: rgba(9, 14, 22, .8);--panel-soft: rgba(17, 24, 35, .58);--panel-line: rgba(255, 255, 255, .12);--text: #f3f7ea;--text-dim: #bdd0c4;--accent: #ffd465;--accent-warm: #ff9856;--good: #8df0a9;--danger: #ff8f95;--shadow: rgba(4, 7, 14, .32)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}body{overflow:hidden;color:var(--text);font-family:PixelOperator,monospace;background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.7),transparent 22%),radial-gradient(circle at 84% 14%,rgba(255,231,174,.72),transparent 20%),linear-gradient(180deg,var(--bg-top),var(--bg-bottom))}button,input,textarea,select{font:inherit}#app{position:relative}.game-container{position:absolute;inset:0}.game-container canvas{display:block;width:100%;height:100%}.typing-ui{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;gap:18px;pointer-events:none;padding:20px 24px 24px}.typing-ui.hidden{display:none}.typing-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.brand{margin:0;color:#161f28cc;letter-spacing:.16em;text-transform:uppercase;font-size:clamp(1.1rem,1.8vw,1.5rem);text-shadow:0 1px 0 rgba(255,255,255,.36)}.live-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:end}.stat-chip{min-width:108px;padding:10px 14px;background:var(--panel-soft);border:1px solid var(--panel-line);border-radius:16px;box-shadow:0 14px 34px var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stat-chip span{display:block;color:var(--text-dim);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}.stat-chip strong{display:block;margin-top:3px;font-family:PixelOperatorBold,monospace;font-size:1.4rem}.prompt-panel{align-self:center;width:min(1260px,calc(100vw - 48px));padding:18px 22px 22px;background:linear-gradient(180deg,#ffd6651a,#fff0),var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:24px;box-shadow:0 22px 60px var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.prompt-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:12px}.sentence-label,.sentence-hint,.overlay-kicker,.overlay-meta,.section-label{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}.prompt{margin:0;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:clamp(1.35rem,2.5vw,2.45rem);line-height:1.45;letter-spacing:.02em;white-space:normal}.prompt .done{color:var(--good)}.prompt .current{color:#111722;background:var(--accent);border-radius:4px}.prompt .pending{color:#ffffff57}.prompt .error,.prompt .error-inline{color:var(--danger)}.prompt .error-inline{margin-left:.16em}.prompt .math-question{color:#ffe7a6}.prompt .math-answer{color:var(--text)}.prompt .math-slot{display:inline-flex;min-width:.7em;justify-content:center}.overlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:14px;background:radial-gradient(circle at top,rgba(255,223,139,.16),transparent 35%),linear-gradient(180deg,#080b1238,#080b1294)}.overlay.hidden{display:none}.overlay-card{width:min(920px,calc(100vw - 36px));max-height:calc(100vh - 28px);overflow:hidden;padding:22px 24px 20px;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#ffda8b24,#fff0),#0e141ee6;box-shadow:0 30px 80px #05070e75;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.overlay-shell{display:block}.overlay.results-layout .overlay-card{width:min(1080px,calc(100vw - 36px))}.overlay.results-layout .overlay-shell{display:grid;grid-template-columns:minmax(0,1.4fr) 300px;gap:18px;align-items:stretch}.overlay-results{display:flex;flex-direction:column;justify-content:space-between;padding:18px;border-radius:22px;background:linear-gradient(180deg,#ffd6651f,#ffffff05),#ffffff0d;border:1px solid rgba(255,255,255,.1)}.overlay-results.hidden{display:none}.results-label{margin:0 0 12px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}.results-grid{display:grid;grid-template-columns:1fr;gap:10px}.result-card{padding:12px 14px;border-radius:16px;background:#090e168a;border:1px solid rgba(255,255,255,.08)}.result-card span{display:block;color:var(--text-dim);font-size:.84rem;text-transform:uppercase;letter-spacing:.08em}.result-card strong{display:block;margin-top:4px;font-family:PixelOperatorBold,monospace;font-size:1.6rem;color:#fff4cf}.results-footnote{margin:14px 0 0;color:#ffffffbd;line-height:1.24}.overlay-topline{display:flex;justify-content:space-between;gap:14px;align-items:center}.overlay-tag{margin:0;padding:7px 12px;border-radius:999px;background:#ffffff14;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}.hero-row{display:grid;grid-template-columns:minmax(0,1.35fr) 220px;gap:16px;align-items:center;margin:10px 0 14px}.hero-copy h1{margin:0;font-family:PixelOperatorBold,monospace;font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:.06em;text-transform:uppercase}#overlay-body{margin:8px 0 0;font-size:1.05rem;line-height:1.24;color:var(--text);max-width:42rem}.hero-accent{position:relative;height:108px;border-radius:20px;background:linear-gradient(180deg,#8fd8ff4d,#ffedb414),#ffffff0a;overflow:hidden}.hero-track{position:absolute;left:16px;right:16px;bottom:22px;height:20px;border-radius:999px;background:linear-gradient(180deg,#ffe6adf2,#ffcc6ed6),#f4cb76;box-shadow:0 12px #39291842,inset 0 -8px #5637162e}.hero-track:before{content:"";position:absolute;inset:6px 16px auto;height:6px;border-radius:999px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 22px,transparent 22px 44px)}.hero-flag{position:absolute;right:34px;bottom:40px;width:10px;height:44px;background:#6f4e2a;box-shadow:0 10px 24px #0003}.hero-flag:before{content:"";position:absolute;left:12px;top:2px;width:34px;height:22px;border-radius:0 10px 10px 0;background:linear-gradient(180deg,#ffe38d,#ff9b59)}.hero-flag:after{content:"";position:absolute;left:-88px;bottom:-2px;width:42px;height:42px;border-radius:12px;background:radial-gradient(circle at 35% 34%,rgba(255,255,255,.16),transparent 45%),linear-gradient(180deg,#a1e4ffcc,#60b27299);transform:skew(-12deg)}.menu-section{margin-top:12px;padding:12px 14px 14px;border-radius:18px;background:#ffffff0b;border:1px solid rgba(255,255,255,.08)}.menu-section.compact-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}.section-label{margin:0;font-size:.82rem}.chip-row,.difficulty-grid,.mode-grid.compact{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}.menu-chip{padding:6px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#ffffff0d;color:var(--text);cursor:pointer;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;transition:transform .12s ease,border-color .12s ease,background .12s ease}.menu-chip.active,.menu-chip:hover,.menu-chip:focus-visible{border-color:#ffd665b8;background:#ffd66526;transform:translateY(-1px)}.character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 0}.character-card{padding:10px 10px 9px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:linear-gradient(180deg,#ffffff0f,#ffffff05),#ffffff05;color:var(--text);cursor:pointer;text-align:center;transition:transform .12s ease,border-color .12s ease,background .12s ease}.character-card.active,.character-card:hover,.character-card:focus-visible{border-color:#ffd665ad;background:linear-gradient(180deg,#ffd66524,#ffd6650d),#ffffff0d;transform:translateY(-2px)}.character-preview{display:block;width:72px;height:72px;margin:0 auto 6px;image-rendering:pixelated;background-repeat:no-repeat}.character-preview.knight{background-image:url(/assets/sprites/knight.png);background-size:576px 576px;background-position:-2px -4px}.character-preview.slime-green{background-image:url(/assets/sprites/slime_green.png);background-size:286px 215px;background-position:-2px -1px}.character-preview.slime-purple{background-image:url(/assets/sprites/slime_purple.png);background-size:286px 215px;background-position:-2px -1px}.character-name{display:block;font-family:PixelOperatorBold,monospace;letter-spacing:.06em;text-transform:uppercase;font-size:.92rem}.overlay-action{margin-top:14px;padding:11px 18px;border:0;border-radius:16px;pointer-events:auto;cursor:pointer;background:linear-gradient(180deg,#ffe08d,#ffb95a);color:#2b2517;text-transform:uppercase;letter-spacing:.08em;box-shadow:0 12px 28px #ffb04952}.overlay-meta{margin:10px 0 0;font-size:.88rem}@media(max-width:900px){.overlay-card{width:min(760px,calc(100vw - 28px));padding:18px 18px 16px}.overlay.results-layout .overlay-shell,.hero-row,.menu-section.compact-row{grid-template-columns:1fr}}@media(max-width:760px){.typing-ui{padding:14px 14px 0}.typing-header,.prompt-head{flex-direction:column;align-items:flex-start}.live-stats{justify-content:flex-start}.prompt-panel{width:calc(100vw - 28px);padding:14px 16px 18px}.stat-chip{min-width:92px}.character-grid{grid-template-columns:1fr}.overlay-topline{flex-direction:column;align-items:flex-start}}