:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{cursor:pointer}.app{min-height:100vh;transition:background .18s ease,color .18s ease}.app.dark{--bg: #0b1020;--surface: rgba(20, 28, 50, .86);--surface-strong: #18213a;--surface-soft: #202b48;--text: #f5f7fb;--muted: #aab4ca;--border: rgba(255, 255, 255, .1);--accent: #8b9cff;--accent-strong: #6f83ff;--danger: #ff7d8c;background:radial-gradient(circle at 15% 10%,rgba(90,107,255,.2),transparent 30%),radial-gradient(circle at 85% 85%,rgba(136,91,255,.18),transparent 30%),var(--bg);color:var(--text)}.app.light{--bg: #eef1f8;--surface: rgba(255, 255, 255, .92);--surface-strong: #ffffff;--surface-soft: #e8ebf5;--text: #172033;--muted: #657087;--border: rgba(23, 32, 51, .12);--accent: #5268e8;--accent-strong: #3851d6;--danger: #d95367;background:radial-gradient(circle at 15% 10%,rgba(82,104,232,.12),transparent 30%),radial-gradient(circle at 85% 85%,rgba(136,91,255,.1),transparent 30%),var(--bg);color:var(--text);color-scheme:light}.screen{min-height:100vh;width:min(1180px,100%);margin:0 auto;padding:32px}.centered-screen{display:grid;place-items:center}.hero-card,.content-card,.calculator-shell{width:min(760px,100%);border:1px solid var(--border);background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:28px;box-shadow:0 24px 80px #0000003d}.hero-card{padding:52px;text-align:center;position:relative}.hero-card h1,.menu-card h1{margin:8px 0 10px;font-size:clamp(2rem,6vw,4rem);line-height:1}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:.78rem;color:var(--accent)}.muted{color:var(--muted)}.theme-toggle{position:absolute;top:18px;right:18px;border:1px solid var(--border);border-radius:999px;padding:10px 14px;color:var(--text);background:var(--surface-soft)}.name-form{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:28px}.name-form input{width:100%;border:1px solid var(--border);border-radius:16px;padding:15px 18px;background:var(--surface-strong);color:var(--text);outline:none}.name-form input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}.primary-button,.secondary-button,.text-button,.feature-card,.choice-buttons button,.calculator-grid button{border:0}.primary-button{border-radius:16px;padding:0 24px;min-height:52px;color:#fff;background:var(--accent-strong);font-weight:800}.primary-button:disabled{opacity:.45;cursor:not-allowed}.menu-card{padding:42px;text-align:center}.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}.feature-card{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;border-radius:22px;color:var(--text);background:var(--surface-strong);box-shadow:inset 0 0 0 1px var(--border);transition:transform .15s ease,box-shadow .15s ease}.feature-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--accent),0 18px 32px #00000024}.feature-card strong{font-size:1.25rem}.feature-card span:last-child{color:var(--muted);line-height:1.5}.feature-icon{font-size:3rem}.text-button{margin-top:24px;background:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.top-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:52px}.secondary-button,.result-pill,.score-pill{border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);padding:12px 16px}.secondary-button{justify-self:start}.result-pill{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:800;text-align:center}.score-pill{justify-self:end;font-weight:800}.game-layout{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;width:min(850px,100%);margin:0 auto}.choice-display{text-align:center}.choice-display p{color:var(--muted);font-weight:700}.choice-preview{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--border);border-radius:28px;background:var(--surface);font-size:clamp(5rem,13vw,9rem);margin-bottom:16px}.versus{font-weight:900;color:var(--muted)}.choice-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:min(680px,100%);margin:52px auto 0}.choice-buttons button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;border-radius:18px;color:var(--text);background:var(--surface-strong);box-shadow:inset 0 0 0 1px var(--border);font-weight:800}.choice-buttons button:hover{box-shadow:inset 0 0 0 2px var(--accent)}.choice-buttons span{font-size:2.4rem}.calculator-screen{display:grid;place-items:center}.calculator-shell{max-width:560px;padding:26px}.calculator-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.calculator-header h2{margin:0}.calculator-display{min-height:100px;display:flex;align-items:center;justify-content:flex-end;overflow-wrap:anywhere;padding:18px 22px;border:1px solid var(--border);border-radius:18px;background:var(--surface-strong);font-size:clamp(2rem,7vw,3.5rem);font-weight:700;font-variant-numeric:tabular-nums}.calculator-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}.calculator-grid button{min-height:70px;border-radius:16px;color:var(--text);background:var(--surface-soft);box-shadow:inset 0 0 0 1px var(--border);font-weight:800;font-size:1.2rem}.calculator-grid button:hover{box-shadow:inset 0 0 0 2px var(--accent)}.calculator-grid .equals-button{background:var(--accent-strong);color:#fff}.calculator-grid .clear-button{color:var(--danger)}@media(max-width:700px){.screen{padding:18px}.hero-card,.menu-card{padding:30px 22px}.theme-toggle{position:static;margin-bottom:28px}.name-form,.menu-grid,.game-layout,.top-bar{grid-template-columns:1fr}.top-bar{margin-bottom:28px}.secondary-button,.score-pill{justify-self:stretch;text-align:center}.game-layout{max-width:360px}.versus{text-align:center}.choice-buttons{grid-template-columns:1fr}.calculator-shell{padding:18px}.calculator-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.calculator-grid button{min-height:60px}}
