/* The Lyceum theme, shared with the other Sprints and the Mastery Board.
   Tokens first, then components. Light is the base and dark redefines values
   only, so no colour is ever defined solely inside a media query. */
:root{
  --ground:#FAF6FA; --surface:#FFFFFF; --surface-2:#F3EDF3;
  --line:#E2D8E4; --line-strong:#CDBDD1;
  --ink:#2A1F2D; --ink-2:#5C4C61; --ink-3:#8A798F;
  --accent:#E2591B; --accent-ink:#FFFFFF; --accent-soft:#FDEBE0;
  --voice:#7B4B94; --voice-soft:#F0E6F5;
  --good:#1F8A5B; --good-soft:#E1F3EA;
  --bad:#C4342F; --bad-soft:#FBE6E5;
  --gold:#B7791F; --gold-soft:#FBF0DC;
  --shadow:0 1px 2px rgba(42,31,45,.06), 0 8px 24px -12px rgba(42,31,45,.18);
  --shadow-lift:0 2px 4px rgba(42,31,45,.08), 0 18px 40px -18px rgba(42,31,45,.28);
  --radius:14px; --radius-lg:22px;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#171021; --surface:#211829; --surface-2:#2C2135;
    --line:#3A2C45; --line-strong:#523F60;
    --ink:#F4EEF6; --ink-2:#C3B3CB; --ink-3:#93829C;
    --accent:#FF8A4C; --accent-ink:#2A1405; --accent-soft:#3B2416;
    --voice:#C293DC; --voice-soft:#312140;
    --good:#4ECB93; --good-soft:#16311F;
    --bad:#FF7B72; --bad-soft:#3A1D1D;
    --gold:#E0A94E; --gold-soft:#332612;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lift:0 2px 4px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ground:#171021; --surface:#211829; --surface-2:#2C2135;
  --line:#3A2C45; --line-strong:#523F60;
  --ink:#F4EEF6; --ink-2:#C3B3CB; --ink-3:#93829C;
  --accent:#FF8A4C; --accent-ink:#2A1405; --accent-soft:#3B2416;
  --voice:#C293DC; --voice-soft:#312140;
  --good:#4ECB93; --good-soft:#16311F;
  --bad:#FF7B72; --bad-soft:#3A1D1D;
  --gold:#E0A94E; --gold-soft:#332612;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html,body{
  margin:0;padding:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);-webkit-text-size-adjust:100%;
}
body{min-height:100dvh}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.1;text-wrap:balance}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

#app{max-width:640px;margin:0 auto;padding:clamp(14px,3vw,22px) clamp(14px,4vw,24px) 48px}
.screen{animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ------------------------------------------------- who is signed in --- */
/* Same bar, same place, in every Sprint. The name is the biggest thing on
   it on purpose: a child who sits down at a machine someone else left open
   should see whose account it is before they type a single answer. */
.lyceum-bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:10px 0 14px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.lb-home{
  justify-self:start;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;color:var(--ink-3);font-weight:700;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;transition:.15s;
}
.lb-home:hover{color:var(--voice);border-color:var(--voice);background:var(--surface)}
.lb-home svg{width:14px;height:14px}
.lb-app{justify-self:end;font-family:var(--display);font-weight:800;font-size:.82rem;
        letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}
.lb-who{
  justify-self:center;display:flex;align-items:center;gap:2px;
  font-family:inherit;background:var(--voice-soft);border:1px solid transparent;
  border-radius:999px;padding:3px 4px;transition:.15s;
}
.lb-who:hover{border-color:var(--voice)}
/* Two tap targets in one chip, each big enough for a small finger, with a
   hairline between them so it reads as two things. The name goes to their own
   page; only the small one hands the machine on. */
.lb-me{display:flex;align-items:center;gap:10px;text-decoration:none;
       border-radius:999px;padding:4px 12px 4px 4px;transition:.15s}
.lb-me:hover{background:var(--surface)}
.lb-avatar{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--voice);
  color:#fff;display:grid;place-items:center;font-family:var(--display);
  font-weight:800;font-size:1rem;
}
.lb-name{font-family:var(--display);font-size:1.32rem;font-weight:800;
         letter-spacing:-.02em;color:var(--ink);line-height:1}
.lb-switch{font-family:inherit;font-size:.66rem;font-weight:700;letter-spacing:.08em;
           text-transform:uppercase;color:var(--voice);background:transparent;border:0;
           border-left:1px solid var(--line-strong);padding:10px 14px;cursor:pointer;
           border-radius:0 999px 999px 0;transition:.15s}
.lb-switch:hover{filter:brightness(1.15);text-decoration:underline}
@media (max-width:520px){
  .lyceum-bar{grid-template-columns:1fr 1fr;row-gap:12px}
  .lb-who{grid-column:1 / -1;grid-row:2;justify-self:center}
  .lb-name{font-size:1.5rem}
}

/* -------------------------------------------------------------- name --- */
.brand{
  font-family:var(--display);font-size:clamp(36px,10vw,54px);line-height:1;
  margin:5vh 0 6px;letter-spacing:-.03em;text-align:center;font-weight:800;
}
.brand span{color:var(--voice)}
.tagline{text-align:center;color:var(--ink-3);margin:0 0 32px;font-size:15px;font-weight:600}

#name-form{display:flex;flex-direction:column;gap:12px}
#name-form label{color:var(--ink-3);font-size:14px;font-weight:600}

input[type=text],#name-input{
  background:var(--surface);border:2px solid var(--line-strong);color:var(--ink);
  border-radius:var(--radius);padding:16px;font-size:20px;width:100%;outline:none;
  font-family:inherit;
}
input:focus{border-color:var(--accent)}

.btn{
  border:0;border-radius:var(--radius);padding:16px 20px;font-size:18px;
  font-weight:800;cursor:pointer;font-family:inherit;transition:.15s;
}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.05);box-shadow:var(--shadow-lift)}
.btn.primary:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink-2);border:2px solid var(--line-strong)}
.btn.ghost:hover{border-color:var(--ink-3);color:var(--ink);background:var(--surface)}
.btn.small{padding:8px 14px;font-size:14px}

.error{color:var(--bad);font-size:14px;margin:0;font-weight:700}

.recent{margin-top:28px}
.recent-label{color:var(--ink-3);font-size:13px;text-align:center;margin:0 0 10px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--ink-2);
  border-radius:999px;padding:8px 16px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:.15s;
}
.chip:hover{border-color:var(--voice);color:var(--ink)}

/* -------------------------------------------------------------- menu --- */
.topbar{display:flex;justify-content:space-between;align-items:center;margin:8px 0 26px}
.who{color:var(--ink-3);font-size:16px;font-weight:600}
.who strong{color:var(--ink)}
.pick-title{font-size:22px;margin:0 0 14px;font-weight:800;letter-spacing:-.02em}

.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--voice);
  border-radius:var(--radius);color:var(--ink);padding:20px 14px;display:flex;
  flex-direction:column;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
  box-shadow:var(--shadow);transition:.15s;
}
.mode:hover{border-left-color:var(--accent);box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.mode:active{transform:none}
.mode.wide{grid-column:1 / -1;flex-direction:row;justify-content:center;gap:14px}
.mode .sign{font-family:var(--display);font-size:34px;line-height:1;color:var(--voice);font-weight:800}
.mode .mode-name{font-size:15px;font-weight:700}
/* The count of facts still outstanding, on the tile itself. It is the only
   number in this app meant to go DOWN, so a child watching it fall is the
   whole point of putting it where they can see it. */
.mode .mode-sub{font-family:var(--mono);font-size:11px;font-weight:700;
                letter-spacing:.04em;color:var(--ink-3);min-height:1em}

.fine{color:var(--ink-3);font-size:13px;text-align:center;margin:16px 0 0;font-weight:600}

.panel{
  margin-top:26px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow);
}
.panel h3{margin:0 0 12px;font-size:.72rem;color:var(--ink-3);font-weight:800;
          letter-spacing:.12em;text-transform:uppercase}

.history{width:100%;border-collapse:collapse;font-size:15px}
.history td{padding:8px 0;border-bottom:1px solid var(--line)}
.history tr:last-child td{border-bottom:0}
.history td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.history .rank{color:var(--ink-3);width:26px;font-family:var(--mono)}
.history .me{color:var(--voice);font-weight:800}

.facts{display:flex;flex-wrap:wrap;gap:8px}
.fact{
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;font-size:15px;font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.fact b{font-weight:700}
.fact small{color:var(--ink-3);font-family:var(--body);margin-left:6px;font-size:12px;font-weight:600}
.fact.miss{border-color:var(--bad);background:var(--bad-soft)}
.fact.miss small{color:var(--bad)}

/* -------------------------------------------------------------- test --- */
.test{display:flex;flex-direction:column;min-height:82dvh}
.hud{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.hud-item{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.hud-item small{color:var(--ink-3);font-size:13px;font-weight:600;margin-left:4px}
.hud .clock{font-family:var(--mono);color:var(--voice);font-size:24px}

.bar{height:6px;background:var(--surface-2);border-radius:99px;margin:12px 0 0;overflow:hidden}
#bar-fill{height:100%;width:0%;background:var(--voice);transition:width .12s linear}

.question-wrap{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,5vh,40px);
}
.question{
  font-family:var(--display);font-size:clamp(56px,18vw,104px);font-weight:800;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:flex;gap:.18em;
  align-items:center;line-height:1;
}
#q-op{color:var(--voice)}

/* input[type=text] sets width:100% and outranks a bare class, so the answer
   box has to say so as an input or it stretches the width of the screen. */
input.answer{
  width:clamp(180px,55vw,240px);text-align:center;font-size:clamp(40px,12vw,56px);
  font-weight:800;font-variant-numeric:tabular-nums;padding:14px;border-width:3px;
  caret-color:var(--accent);font-family:var(--display);
}
.answer.flash-good{border-color:var(--good);background:var(--good-soft)}
.answer.flash-bad{border-color:var(--bad);background:var(--bad-soft)}

.miss-note{
  height:30px;font-size:22px;font-weight:800;color:var(--bad);
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .25s ease;
  pointer-events:none;font-family:var(--mono);
}
.miss-note.on{opacity:1;transition:none}

.quit{align-self:center;margin-top:8px;opacity:.7}

/* ----------------------------------------------------------- results --- */
#results-title{font-size:30px;margin:16px 0 20px;font-weight:800;letter-spacing:-.02em}
.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.score{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow);
}
.score.big{grid-column:1 / -1;border-left:4px solid var(--voice)}
.score span{font-size:30px;font-weight:800;font-family:var(--mono);font-variant-numeric:tabular-nums}
.score.big span{font-size:46px;color:var(--voice)}
.score small{color:var(--ink-3);font-size:13px;font-weight:600}

.pb{
  margin:14px 0 0;padding:12px 16px;border-radius:var(--radius);
  background:var(--gold-soft);border:1px solid var(--gold);color:var(--gold);
  font-weight:800;text-align:center;
}

.actions{display:flex;flex-direction:column;gap:10px;margin-top:28px}

@media (max-width:380px){.modes{grid-template-columns:1fr}}

/* ------------------------------------------------------- leaderboard --- */
.board{
  margin-top:34px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:18px 18px 14px;box-shadow:var(--shadow);
}
.board-title{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);
  margin:0 0 14px;font-weight:800;
}
.board-tabs{display:flex;gap:6px;margin-bottom:14px}
.board-tab{
  flex:1;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3);
  border-radius:9px;padding:8px 0;font-size:17px;font-weight:800;cursor:pointer;
  font-family:inherit;line-height:1;transition:.15s;
}
.board-tab:hover{color:var(--ink);border-color:var(--line-strong)}
.board-tab.wide{flex:1.6;font-size:13px}
.board-tab.is-on{border-color:var(--voice);color:var(--voice);background:var(--voice-soft)}

.board-table{width:100%;border-collapse:collapse;font-size:15px}
.board-table td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.board-table tr:last-child td{border-bottom:0}
.board-rank{width:30px;color:var(--ink-3);font-family:var(--mono);font-size:13px}
.board-rank.medal{color:var(--gold);font-weight:800}
.board-name{font-weight:700}
.board-score{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.board-score small{display:block;color:var(--ink-3);font-size:11px;font-family:var(--body);font-weight:600}
.board-empty{color:var(--ink-3);font-size:14px;text-align:center;margin:10px 0;font-weight:600}
.board-note{color:var(--ink-3);font-size:12px;text-align:center;margin:12px 0 0;font-weight:600}
.board-name.board-me{color:var(--voice)}


/* ------------------------------------------------- who is at the keyboard --- */
/* Names as buttons a child can hit without aiming, and a quieter way in for
   somebody genuinely new. The size is the point: this is the most-used control
   in the whole app and it used to be a text field. */
.who-ask{margin:0 0 10px;font-family:var(--display);font-size:1.15rem;font-weight:800;
         letter-spacing:-.01em}
.roster{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
.roster .who{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 14px;
             font-family:var(--display);font-size:1.15rem;font-weight:800;letter-spacing:-.01em;
             color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);
             border-radius:999px;cursor:pointer;text-align:left;transition:.15s}
.roster .who:hover{border-color:var(--voice);box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.roster .who .initial{width:34px;height:34px;flex:0 0 34px;border-radius:50%;
                      background:var(--voice);color:#fff;display:grid;place-items:center;
                      font-size:1rem}
.roster .none{color:var(--ink-3);font-size:.88rem;font-weight:600}
.newkid{margin-top:12px;background:transparent;border:1px dashed var(--line-strong);
        color:var(--ink-2);border-radius:999px;padding:10px 18px;font-weight:700;
        font-size:.86rem;cursor:pointer;transition:.15s}
.newkid:hover{border-color:var(--accent);color:var(--accent)}
.newform{margin-top:12px}
.newrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
/* Said before a second account exists, not after somebody notices one. */
.near{margin:8px 0 0;font-size:.9rem;font-weight:700;color:var(--accent)}
.near b{font-family:var(--display)}
.near .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* ------------------------------------------------------ the school's mark --- */
/* Two paths rather than a picture, so the navy can step aside on the dark
   theme instead of sinking into the ground. */
.schoolmark{display:block;margin:0 auto 10px;height:34px;width:auto}
.schoolmark .wm-name{fill:#0B1F3A}
.schoolmark .wm-sub{fill:#B58A35}
@media (prefers-color-scheme: dark){
  .schoolmark .wm-name{fill:#F0EAF2}
  .schoolmark .wm-sub{fill:#D9B25C}
}

/* ------------------------------------------- the facts that keep coming back
   The list has been on this page for a while. The button is the new part: a
   child could see which facts were beating them and had no way to go and do
   anything about it, which is a page that describes a problem rather than
   helping with one. */
/* Practice, not a sprint. It sits in the same grid as the four operations
   because that is where a child looks, but it is marked as a different kind of
   thing: the action colour rather than the sprint purple, and no band comes
   out of it. */
.mode.practise{border-left-color:var(--accent)}
.mode.practise .sign{color:var(--accent)}
.mode.practise .mode-sub{color:var(--accent)}
/* Nothing outstanding. The tile stays in place rather than vanishing and
   leaving a hole in the grid -- an empty list is an achievement, and a child
   who has cleared it should be told so. */
.mode.practise.clear{border-left-color:var(--good);cursor:default;opacity:.75}
.mode.practise.clear .sign,.mode.practise.clear .mode-sub{color:var(--good)}
.mode.practise.clear:hover{border-left-color:var(--good);box-shadow:var(--shadow);
                           transform:none}
#facts-panel h3 .count{font-family:var(--mono);font-size:.68rem;font-weight:700;
  color:var(--accent);margin-left:8px;letter-spacing:.02em}