:root {
  color-scheme: dark;
  --bg: #09071f;
  --ink: #f8fbff;
  --muted: #b8c6ff;
  --panel: rgba(18, 17, 48, .78);
  --panel-strong: rgba(28, 24, 72, .9);
  --cyan: #38e8ff;
  --pink: #ff4fd8;
  --yellow: #ffe45e;
  --green: #62ff93;
  --orange: #ff9f43;
  --purple: #8b5cf6;
  --red: #ff5574;
  --shadow: 0 28px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(56,232,255,.28), transparent 28rem),
    radial-gradient(circle at 85% 20%, rgba(255,79,216,.24), transparent 28rem),
    linear-gradient(145deg, #09071f 0%, #15103d 48%, #260b3c 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}
.bg-orb { position: fixed; width: 28rem; height: 28rem; border-radius: 50%; filter: blur(16px); opacity: .32; pointer-events: none; mix-blend-mode: screen; animation: floaty 9s ease-in-out infinite; }
.orb-one { left: -9rem; top: 10rem; background: var(--cyan); }
.orb-two { right: -8rem; bottom: 4rem; background: var(--pink); animation-delay: -4s; }
.starfield::before, .starfield::after { content:"✦  ×  ✧  +  ✦  ×  ✧  +  ✦"; position:fixed; left:5%; right:5%; color:rgba(255,255,255,.18); letter-spacing:3rem; pointer-events:none; animation: drift 18s linear infinite; }
.starfield::before { top: 8%; } .starfield::after { bottom: 9%; animation-direction: reverse; }
@keyframes floaty { 50% { transform: translate3d(20px,-30px,0) scale(1.06); } }
@keyframes drift { to { transform: translateX(-12rem); } }
.shell { position: relative; width: min(1160px, calc(100vw - 28px)); margin: 28px auto 54px; }
.game-panel {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 34px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.game-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(56,232,255,.9), rgba(255,79,216,.55), rgba(255,228,94,.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .55;
}
.hero { display:grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: stretch; padding: 34px; overflow:hidden; }
.hero::after { content:"12×12"; position:absolute; right:250px; top:18px; font:900 7rem/1 Fredoka, sans-serif; color:rgba(255,255,255,.045); transform:rotate(-9deg); }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin:0 0 10px; color: var(--yellow); text-transform:uppercase; letter-spacing:.14em; font:800 .78rem/1 JetBrains Mono, ui-monospace, monospace; }
h1 { margin: 0; font-family: Fredoka, Inter, sans-serif; font-size: clamp(3rem, 9vw, 6.7rem); line-height: .83; letter-spacing: -.065em; text-wrap: balance; }
h1 span { color: transparent; background: linear-gradient(90deg, var(--cyan), var(--green), var(--yellow), var(--pink)); -webkit-background-clip:text; background-clip:text; filter: drop-shadow(0 8px 22px rgba(255,79,216,.28)); }
h2 { margin:0; font: 900 clamp(1.7rem, 4vw, 2.4rem)/1 Fredoka, Inter, sans-serif; letter-spacing: -.035em; }
p { color: var(--muted); font-size: 1.08rem; line-height:1.55; }
.hero-text { max-width: 660px; font-size: 1.2rem; }
.hero-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.hero-chips span, .badge, .rank { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.1); border-radius:999px; padding:9px 12px; font-weight:900; color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.score-card { display:grid; place-items:center; text-align:center; padding:22px; background: radial-gradient(circle at 50% 0%, rgba(56,232,255,.22), transparent 62%), rgba(255,255,255,.08); }
.mascot { font-size: 4.2rem; filter: drop-shadow(0 12px 18px rgba(0,0,0,.28)); animation: bob 2.3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(4deg); } }
.score-card span { font: 900 3.6rem/1 Fredoka, sans-serif; color: var(--green); text-shadow:0 0 24px rgba(98,255,147,.35); }
.score-card small { color: var(--muted); font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.practice-card { margin: 24px 0; padding: 30px; overflow:hidden; }
.arena-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.question { display:block; font: 900 clamp(4.2rem, 16vw, 9rem)/.85 Fredoka, Inter, sans-serif; letter-spacing:-.07em; text-shadow: 0 0 36px rgba(56,232,255,.24); }
.combo-box { display:grid; gap:10px; justify-items:end; }
.streak { padding:11px 15px; border-radius:999px; background:linear-gradient(135deg, rgba(255,159,67,.28), rgba(255,79,216,.24)); color:#fff; font-weight:900; white-space:nowrap; border:1px solid rgba(255,255,255,.2); }
.rank { color: var(--yellow); font-size:.9rem; }
.answer-form { display:flex; gap:13px; margin-top:22px; }
input { flex:1; min-width:0; font: 900 clamp(1.6rem, 5vw, 2.6rem)/1 Fredoka, Inter, sans-serif; padding:20px 22px; border-radius:25px; border:2px solid rgba(56,232,255,.45); outline:none; color:#fff; background: rgba(2,6,23,.48); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
input::placeholder { color: rgba(184,198,255,.58); }
input:focus { border-color:var(--yellow); box-shadow:0 0 0 6px rgba(255,228,94,.14), 0 0 42px rgba(56,232,255,.18); }
button { border:0; border-radius:24px; padding:16px 24px; color:#14051f; font-weight:1000; font-size:1.04rem; cursor:pointer; font-family: Fredoka, Inter, sans-serif; transition:.18s transform, .18s filter; }
button:hover { transform: translateY(-2px) scale(1.01); filter: brightness(1.05); }
button:focus-visible, input:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 4px; }
.primary-action { min-width: 150px; background:linear-gradient(135deg, var(--yellow), var(--green) 52%, var(--cyan)); box-shadow:0 15px 38px rgba(56,232,255,.2); }
.ghost, .mini { background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.18); }
.mini { margin-top:14px; padding:9px 12px; border-radius:16px; font-size:.88rem; }
.feedback { min-height:1.7em; font-weight:900; font-size:1.13rem; color:#fff; }
.feedback.good { color:var(--green); text-shadow:0 0 18px rgba(98,255,147,.3); } .feedback.bad { color:var(--red); }
.sparkles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.sparkle { position:absolute; font-size:1.6rem; animation: pop 900ms ease-out forwards; }
@keyframes pop { 0% { transform: translateY(20px) scale(.2) rotate(0); opacity:0; } 20% { opacity:1; } 100% { transform: translateY(-120px) scale(1.35) rotate(180deg); opacity:0; } }
.dashboard { padding: 27px; margin-top: 22px; }
.section-title { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom: 18px; }
.compact-title { margin-bottom: 8px; }
.tables { display:grid; grid-template-columns:repeat(auto-fit, minmax(178px, 1fr)); gap:14px; }
.table-card { position:relative; overflow:hidden; border-radius:24px; padding:17px; border:1px solid rgba(255,255,255,.15); background:linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); }
.table-card::after { content: attr(data-table); position:absolute; right:-8px; bottom:-28px; font:900 6rem/.8 Fredoka,sans-serif; color:rgba(255,255,255,.055); }
.table-card strong { font:900 1.45rem/1 Fredoka,sans-serif; }
.meter { height:11px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; margin:13px 0; }
.meter span { display:block; height:100%; background:linear-gradient(90deg, var(--cyan), var(--green), var(--yellow)); box-shadow:0 0 16px rgba(98,255,147,.3); }
.meta { color: var(--muted); font-size:.9rem; line-height:1.5; position:relative; z-index:1; }
.badge { display:inline-block; margin-top:10px; padding:7px 10px; font-size:.78rem; position:relative; z-index:1; }
.badge.competent { background:rgba(98,255,147,.16); color:var(--green); } .badge.almost_there { background:rgba(255,228,94,.16); color:var(--yellow); } .badge.needs_practice { background:rgba(255,85,116,.15); color:#ff9bad; }
.recent { color:var(--muted); padding-left:24px; columns:2; column-gap:34px; }
.recent li { margin:8px 0; break-inside:avoid; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:18px; }
.login-card { width:min(480px, 100%); padding:34px; text-align:left; overflow:hidden; }
.login-badge { font-size:4rem; width:86px; height:86px; display:grid; place-items:center; border-radius:28px; background:rgba(255,255,255,.12); margin-bottom:18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.login-card h1 { font-size:clamp(3rem, 14vw, 5.1rem); }
.login-card form { display:grid; gap:13px; margin-top:20px; }
.login-card input { font-size:1.3rem; }
.error { color:var(--red); font-weight:900; min-height:1.4em; }
@media (max-width: 780px) { .hero { grid-template-columns:1fr; padding:24px; } .arena-top, .answer-form, .section-title { flex-direction:column; align-items:stretch; } .combo-box { justify-items:start; } button { width:100%; } .recent { columns:1; } .question { font-size:clamp(4rem, 22vw, 7rem); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }