/* Mental Math.
   ───────────────────────────────────────────────────────────────────────
   Loaded after styles.css, games.css and games/numbers.css, because this
   game borrows the number games' cards wholesale: the dialog, the four
   stat tiles, the comparison bars, the week of ticks and the lists are all
   theirs and are not worth a second copy. What is here is the minute
   itself, which nothing else on the site has: a clock, a countdown, one
   enormous question and a box to answer it in.

   The two modes take two of the site's topic tones rather than the teal
   and amethyst the prototype used as placeholders. Brass stays out of it:
   it means rating and rank elsewhere, and a game that paid in brass would
   be making a claim it does not keep. */

body[data-page="game"] .mm-main{flex:1;min-height:0;display:flex;}

:root,html[data-theme="light"]{--mm-arith:var(--trg);--mm-arith-bg:var(--trg-bg);
  --mm-pow:var(--lin);--mm-pow-bg:var(--lin-bg);}

/* ══ THE OPENING ══
   What you see before a minute starts: which day it is, or which mode you
   want. Centred in the space the board would take, so starting a run does
   not move the page about. */
.mm-open{flex:1;min-height:0;width:100%;max-width:520px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.mm-open-when{font-family:'Newsreader',serif;font-size:21px;font-weight:600;
  color:var(--ink);}
.mm-open-note{font-size:13.5px;color:var(--ink-2);text-align:center;margin:0;}

.mm-modes{display:grid;gap:12px;width:100%;}
@media (min-width:560px){.mm-modes{grid-template-columns:1fr 1fr;}}

.mm-mode{appearance:none;cursor:pointer;text-align:left;font:inherit;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line-2);
  border-radius:5px;padding:15px 17px;display:flex;flex-direction:column;gap:5px;
  transition:border-color .15s,background .15s,transform .15s;}
.mm-mode:hover{transform:translateY(-1px);}
.mm-mode[data-mode="arithmetic"]{border-left-color:var(--trg);}
.mm-mode[data-mode="powers"]{border-left-color:var(--lin);}
.mm-mode[aria-pressed="true"][data-mode="arithmetic"]{background:var(--trg-bg);border-color:var(--trg);}
.mm-mode[aria-pressed="true"][data-mode="powers"]{background:var(--lin-bg);border-color:var(--lin);}
.mm-mode-name{font-family:'Newsreader',serif;font-size:18px;font-weight:600;color:var(--ink);}
.mm-mode-eg{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-3);}
.mm-mode[aria-pressed="true"][data-mode="arithmetic"] .mm-mode-eg{color:var(--trg);}
.mm-mode[aria-pressed="true"][data-mode="powers"] .mm-mode-eg{color:var(--lin);}

/* ══ THE MINUTE ══ */
.mm-hud{flex-shrink:0;width:100%;max-width:520px;display:flex;
  align-items:flex-end;justify-content:space-between;}
.mm-stat b{display:block;font-family:'JetBrains Mono',monospace;font-size:34px;
  font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.mm-stat i{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-style:normal;
  margin-top:4px;}
.mm-right{text-align:right;}

/* The clock, as a line that runs out. A number alone is read once; a line
   shortening is read without looking. */
.mm-bar{flex-shrink:0;width:100%;max-width:520px;height:5px;border-radius:3px;
  background:var(--surface-2);overflow:hidden;margin-top:10px;}
.mm-bar i{display:block;height:100%;background:var(--ink);transform-origin:left center;
  transform:scaleX(1);}

.mm-stage-in{flex:1;min-height:0;width:100%;max-width:520px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;
  position:relative;}

/* Three, two, one, over the top of a board that is not ready. */
.mm-count{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:'Newsreader',serif;font-size:84px;
  font-weight:600;color:var(--ink);z-index:2;}
/* A class setting display beats the browser's own rule for [hidden], so
   the countdown has to be told twice or it sits over the answer box for
   the whole minute. */
.mm-count[hidden]{display:none;}
.mm-stage-in.counting .mm-prompt,
.mm-stage-in.counting .mm-answer,
.mm-stage-in.counting .mm-keys,
.mm-stage-in.counting .mm-last{visibility:hidden;}

.mm-prompt{font-size:clamp(34px,10vw,56px);color:var(--ink);line-height:1.1;
  min-height:1.2em;display:flex;align-items:center;justify-content:center;}
.mm-prompt .katex{font-size:1em;}

.mm-answer{width:100%;max-width:260px;text-align:center;padding:12px 14px;
  border:1.5px solid var(--line-2);border-radius:4px;background:var(--surface);
  color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:28px;
  font-weight:600;font-variant-numeric:tabular-nums;}
.mm-answer:focus{outline:none;border-color:var(--ink);}

/* What happened to the last one. A fixed height, so the question above it
   does not jump every time an answer lands. */
.mm-last{min-height:20px;font-family:'JetBrains Mono',monospace;font-size:13px;
  text-align:center;color:var(--ink-3);}
.mm-last.ok{color:var(--pos);font-weight:600;}
.mm-last.miss{color:var(--neg);}

.mm-keys{margin-top:0!important;}
.mm-keys .btn{min-width:104px;}

/* ══ THE CARD ══ */
.mm-points{font-family:'Newsreader',serif;font-size:52px;font-weight:600;
  line-height:1;color:var(--ink);margin:2px 0 4px!important;}

.mm-missed{list-style:none;margin:0 0 4px;padding:0;text-align:left;}
.mm-missed li{display:flex;align-items:center;gap:10px;padding:7px 2px;
  border-bottom:1px solid var(--line);font-size:13.5px;}
.mm-missed li:last-child{border-bottom:0;}
.mm-missed-q{flex:1;min-width:0;color:var(--ink-2);}
.mm-missed-q .katex{font-size:1em;}
.mm-missed b{font-family:'JetBrains Mono',monospace;color:var(--ink);}
.mm-missed-you{font-family:'JetBrains Mono',monospace;font-size:10.5px;
  color:var(--ink-3);white-space:nowrap;}

/* Which board is being looked at, inside the figures card. */
.mm-switch{display:inline-flex;border:1px solid var(--line-2);border-radius:3px;
  overflow:hidden;margin:4px 0 12px;}
.mm-switch .nb-tab + .nb-tab{border-left:1px solid var(--line-2);}

@media (max-width:640px){
  .mm-stat b{font-size:28px;}
  .mm-answer{font-size:24px;max-width:220px;}
  .mm-keys .btn{min-width:88px;}
  .mm-count{font-size:64px;}
}