:root {
  color-scheme: dark;
  --ink: #0b0614;
  --paper: #ffe34a;
  --foam: #f7fbff;
  --cyan: #19e7ff;
  --pink: #ff4fa3;
  --green: #2be08a;
  --red: #ff4b4b;
  --purple: #8b4dff;
  /* Numbers use a very clear font: 1 has a foot, 7 does not, so they never look alike. */
  --num: "Atkinson Hyperlegible", "Trebuchet MS", Verdana, system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: #14093a;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: Nunito, "Trebuchet MS", system-ui, sans-serif;
  color: var(--foam);
}

#app {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #1c0f52 0%, #14093a 60%, #0c0624 100%);
}

.hidden { display: none !important; }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    calc(18px + env(safe-area-inset-top))
    18px
    calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  text-align: center;
}

.kicker {
  margin: 4px 0 0;
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

h1 {
  margin: 6px 0 4px;
  font-family: Bangers, Impact, "Arial Black", sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 14vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--ink), 0 0 20px rgba(139, 77, 255, 0.6);
}

.lead {
  margin: 4px 0 10px;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.3;
  max-width: 34ch;
}

.label {
  margin: 8px 0 6px;
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--paper);
}

/* Table chips */
.chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 380px);
}

.chip {
  min-height: 56px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #3a2a7a;
  color: var(--foam);
  font: 700 1.4rem var(--num);
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 0.6;
}

.chip.on {
  background: linear-gradient(180deg, #fff8cf 0%, var(--paper) 100%);
  color: var(--ink);
  opacity: 1;
}

.chip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 4px;
}

.mini {
  min-height: 44px;
  padding: 0 14px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font: 900 0.9rem Nunito, sans-serif;
  box-shadow: 3px 3px 0 var(--ink);
}

.mini:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.modes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  width: min(100%, 380px);
  margin-bottom: 10px;
}

.mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffd0e8 0%, var(--pink) 100%);
  color: var(--ink);
  font: 900 0.75rem Nunito, sans-serif;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
}

.mode b { font-size: 1.3rem; line-height: 1; }
button.mode { padding: 0; font-family: Nunito, sans-serif; }
.mode:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.speeds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 380px);
}

.spd {
  min-height: 64px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #3a2a7a;
  color: var(--foam);
  font: 900 0.85rem/1.2 Nunito, sans-serif;
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 0.6;
}

.spd.on {
  background: linear-gradient(180deg, #c8f7ff 0%, var(--cyan) 100%);
  color: var(--ink);
  opacity: 1;
}

.spd:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.best {
  margin: 8px 0 6px;
  font-weight: 900;
  color: var(--cyan);
}

.big {
  width: min(100%, 380px);
  min-height: 64px;
  margin-top: 10px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff8cf 0%, var(--paper) 100%);
  color: var(--ink);
  font: 400 1.9rem Bangers, Impact, sans-serif;
  letter-spacing: 0.05em;
  box-shadow: 5px 5px 0 var(--ink);
}

.big.alt {
  min-height: 54px;
  background: #3a2a7a;
  color: var(--foam);
  font-size: 1.4rem;
}

.big:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }

/* Title screen: settings scroll, the start button stays put at the bottom */
#screen-title {
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

.title-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(14px + env(safe-area-inset-top)) 18px 12px;
  -webkit-overflow-scrolling: touch;
}

.startbar {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 8px 18px calc(14px + env(safe-area-inset-bottom));
  background: #0c0624;
  border-top: 4px solid var(--ink);
}

.startbar { gap: 10px; }
.startbar .big { margin-top: 0; width: auto; }
.startbar .big.go { flex: 1 1 0; max-width: 260px; }
.startbar .big.weak {
  flex: 0 0 auto;
  min-width: 120px;
  padding: 0 12px;
  font-size: 1.15rem;
  line-height: 1.05;
  background: linear-gradient(180deg, #ffd0e6 0%, var(--pink) 100%);
}
.big:disabled { opacity: 0.4; box-shadow: 3px 3px 0 var(--ink); }

.trouble { width: min(100%, 380px); }

.trouble-list { display: flex; flex-direction: column; gap: 8px; }

.trow {
  display: grid;
  grid-template-columns: 1fr 64px 40px;
  grid-template-areas: "name bar pct" "go go go";
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  min-height: 56px;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #3a2a7a;
  color: var(--foam);
  font: 900 0.95rem Nunito, sans-serif;
  text-align: left;
  box-shadow: 3px 3px 0 var(--ink);
}

.trow:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.trow-name { grid-area: name; }
.trow-bar {
  grid-area: bar;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #1c0f52;
  overflow: hidden;
}
.trow-bar i { display: block; height: 100%; }
.trow-pct { grid-area: pct; text-align: right; color: var(--paper); }
.trow-go { grid-area: go; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--cyan); }

.note { margin: 8px 0 4px; font-weight: 800; font-size: 0.85rem; color: #cfc3ff; }

.topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(100%, 380px);
}

.topic {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 6px 10px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #3a2a7a;
  color: var(--foam);
  font: 900 0.95rem/1.15 Nunito, sans-serif;
  text-align: left;
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 0.6;
}

.topic .ico {
  flex: none;
  min-width: 26px;
  text-align: center;
  font-size: 1.3rem;
}

.topic.on {
  background: linear-gradient(180deg, #fff8cf 0%, var(--paper) 100%);
  color: var(--ink);
  opacity: 1;
}

.topic:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

#tables-box { width: min(100%, 380px); }

.grades {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 380px);
}

.tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(100%, 380px);
  margin: 4px 0 6px;
}

#grades-box { width: min(100%, 380px); }

.hint {
  margin-top: 6px;
  padding: 2px 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-weight: 900;
  font-size: 0.85rem;
}

/* Game screen */
#screen-game {
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

#hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 8px;
  z-index: 3;
}

.hud-bit {
  font-weight: 900;
  font-size: 1.05rem;
  padding: 6px 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(11, 6, 20, 0.7);
  min-height: 40px;
  display: flex;
  align-items: center;
}

#hearts { font-size: 1.3rem; letter-spacing: 2px; }
.score span { margin-left: 6px; color: var(--paper); font-family: var(--num); }
.combo { color: var(--cyan); min-width: 56px; justify-content: center; }
.combo.hot { color: var(--pink); }

#sky {
  position: relative;
  flex: 1;
  overflow: hidden;
}

#stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #cfe, transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent),
    radial-gradient(2px 2px at 10% 80%, #fec, transparent),
    radial-gradient(1.5px 1.5px at 55% 45%, #fff, transparent);
  opacity: 0.8;
}

#ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  background: repeating-linear-gradient(90deg, #2be08a 0 24px, #1fb870 24px 48px);
  border-top: 4px solid var(--ink);
}

.monster {
  position: absolute;
  left: 50%;
  top: 0;
  width: 190px;
  margin-left: -95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
  z-index: 2;
}

.monster .hint { order: -1; margin: 0 0 6px; }

.monster .question {
  order: -2;
  margin-bottom: 6px;
  padding: 4px 18px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  font: 700 2.4rem var(--num);
  letter-spacing: 0.02em;
  box-shadow: 4px 4px 0 var(--ink);
  white-space: nowrap;
}

.monster .body {
  position: relative;
  width: 110px;
  height: 100px;
  border: 4px solid var(--ink);
  border-radius: 50% 50% 38% 38%;
  background: var(--m-color, var(--pink));
  box-shadow: inset -8px -8px 0 rgba(0, 0, 0, 0.18);
}

.monster .body::before,
.monster .body::after {
  content: "";
  position: absolute;
  top: -16px;
  width: 14px;
  height: 22px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--m-color, var(--pink));
}
.monster .body::before { left: 22px; transform: rotate(-18deg); }
.monster .body::after { right: 22px; transform: rotate(18deg); }

.eyes {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.eyes i {
  width: 26px;
  height: 26px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.eyes i::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  left: 6px;
  top: 8px;
}

.mouth {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 38px;
  height: 18px;
  margin-left: -19px;
  border: 3px solid var(--ink);
  border-radius: 4px 4px 20px 20px;
  background: #5a0f2e;
}

.monster.zap { animation: zap 0.35s ease-out forwards; }
@keyframes zap {
  0% { filter: brightness(3); }
  100% { opacity: 0; transform: var(--t) scale(0.2) rotate(40deg); }
}

.monster.splat .body { transform: scaleY(0.55) scaleX(1.25); transform-origin: bottom; }

#sky.shake { animation: shake 0.3s; }
@keyframes shake {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-8px, 3px); }
  75% { transform: translate(8px, -3px); }
}

.pop {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  font: 700 2.2rem var(--num);
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--ink);
  pointer-events: none;
  animation: pop 0.8s ease-out forwards;
  z-index: 4;
  white-space: nowrap;
}
.pop.bad { color: var(--red); }
@keyframes pop {
  0% { opacity: 0; margin-top: 20px; }
  15% { opacity: 1; }
  100% { opacity: 0; margin-top: -40px; }
}

/* Answers */
.answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  background: #0c0624;
  border-top: 4px solid var(--ink);
  z-index: 3;
}

.ans {
  min-height: 78px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff8cf 0%, var(--paper) 100%);
  color: var(--ink);
  font: 700 2.2rem var(--num);
  letter-spacing: 0.02em;
  box-shadow: 4px 4px 0 var(--ink);
}

.ans.small { font-size: 1.7rem; }

.ans:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.ans.right { background: var(--green); }
.ans.wrong { background: var(--red); color: #fff; }

/* Game over */
.stats {
  display: flex;
  gap: 10px;
  margin: 6px 0;
  width: min(100%, 380px);
}
.stats div {
  flex: 1;
  padding: 10px 4px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: #3a2a7a;
  box-shadow: 3px 3px 0 var(--ink);
}
.stats b { display: block; font: 700 1.7rem var(--num); color: var(--paper); }
.stats span { font-size: 0.75rem; font-weight: 900; }

.review { width: min(100%, 380px); }
.review-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.review-list span {
  padding: 8px 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
}
.review-list span.tap { cursor: pointer; }
.review-list span.tap::after { content: " ❔"; }
.review-list span.tap.open { background: var(--paper); }
.review-list .why {
  flex: 1 0 100%;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: rgba(25, 231, 255, 0.16);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: left;
}
.review-hint { margin: 2px 0 8px; font-weight: 800; font-size: 0.8rem; color: #cfc3ff; }

@media (max-height: 640px) {
  .monster .body { width: 84px; height: 76px; }
  .monster .question { font-size: 2rem; }
  .ans { min-height: 62px; font-size: 1.9rem; }
  h1 { font-size: 2.4rem; }
  .chip { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  #sky.shake, .monster.zap { animation: none; }
}

/* ---------- Times Grid ---------- */
#screen-grid { padding: 0; overflow: hidden; align-items: stretch; }

.gtop {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 4px;
}
.gtop h2 {
  margin: 0;
  font-family: Bangers, Impact, "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--ink);
}
.gback, .gpill {
  min-width: 48px;
  min-height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #3a2a7a;
  color: #fff;
  font: 900 1.1rem Nunito, sans-serif;
  box-shadow: 3px 3px 0 var(--ink);
}
.gpill { background: rgba(11, 6, 20, 0.7); box-shadow: none; }
.gpill b { font-family: var(--num); color: var(--paper); }
.gback:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.gnums {
  flex: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 4px 12px 8px;
}
.gnum {
  min-height: 44px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #3a2a7a;
  color: var(--foam);
  font: 700 1.25rem var(--num);
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 0.65;
}
.gnum.on { background: linear-gradient(180deg, #c8f7ff 0%, var(--cyan) 100%); color: var(--ink); opacity: 1; }
.gnum:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
  padding: 2px 12px 8px;
}
.gbox {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff8cf 0%, var(--paper) 100%);
  color: var(--ink);
  font: 700 1.55rem/1.1 var(--num);
  box-shadow: 3px 3px 0 var(--ink);
}
.gbox small { font: 700 0.8rem var(--num); opacity: 0.7; }
.gbox:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.gbox.sel { background: linear-gradient(180deg, #c8f7ff 0%, var(--cyan) 100%); outline: 4px solid var(--pink); outline-offset: 1px; }
.gbox.done { background: linear-gradient(180deg, #b6f7d8 0%, var(--green) 100%); }
.gbox.done .res { font-size: 1.8rem; }
.gbox.done.slip { box-shadow: 0 0 0 4px #ff9f1c, 3px 3px 0 var(--ink); }
.gbox.shake { animation: gshake 0.3s; }
@keyframes gshake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.gpanel {
  flex: none;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  background: #0c0624;
  border-top: 4px solid var(--ink);
  text-align: center;
}
.gq { margin: 0; font: 700 1.5rem var(--num); color: var(--paper); }
.gtip { margin: 2px 0 6px; min-height: 2.5em; font: 800 0.88rem/1.25 Nunito, sans-serif; color: #cfc3ff; }
.gans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gans .ans { min-height: 58px; font-size: 1.8rem; }
.gans .big { grid-column: 1 / -1; width: 100%; margin-top: 0; }