/* The Mehdees wordmark, identical to the mehdee.com masthead: Pacifico "The"
   tilted in sunset pink, Baloo 2 "MEHDEES" in cream with a pink glow, sitting
   on the same night-violet bar. */
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url('fonts/baloo2.woff2') format('woff2'); }
@font-face { font-family: 'Pacifico'; font-weight: 400; font-display: swap; src: url('fonts/pacifico.woff2') format('woff2'); }

/* Math Arena. Bright, high contrast, big targets, mobile first. */
:root {
  --ink: #17203A;
  --paper: #F7F9FF;
  --card: #FFFFFF;
  --line: #DDE4F5;
  --muted: #5A6683;
  --blue: #2563EB;
  --blue-dark: #1D4FD8;
  --green: #12885A;
  --green-soft: #DFF6EC;
  --red: #C6274B;
  --red-soft: #FDE7EC;
  --amber: #F59E0B;
  --purple: #7C3AED;
  --shadow: 0 2px 0 #C9D3EC, 0 10px 28px #17203a1f;
  --radius: 18px;
  --pad: 18px;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* A lab bench sky rather than a blank sheet: cool colour pools in the corners
   and a slow drift of science motifs behind everything, an atom, a flask, a
   leaf, a droplet and a molecule chain. Deliberately cooler than Math Arena's
   warm pinks so the two games feel like different places. All of it sits on
   fixed layers under the cards, so questions stay on plain white. */
body {
  background:
    radial-gradient(1100px 640px at 10% -10%, #BEF0E1 0%, transparent 62%),
    radial-gradient(980px 600px at 94% 2%, #C7E3FF 0%, transparent 64%),
    radial-gradient(900px 660px at 48% 110%, #DAF6D0 0%, transparent 62%),
    radial-gradient(700px 520px at 88% 82%, #DFD9FF 0%, transparent 62%),
    linear-gradient(180deg, #EAF5FF 0%, #ECFAF4 52%, #F3F0FF 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  position: relative;
}
body::before {
  content: '';
  position: fixed; inset: -120px;
  z-index: -1; pointer-events: none;
  opacity: .24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='52' cy='52' rx='31' ry='12' stroke='%235B8DEF' transform='rotate(35 52 52)'/%3E%3Cellipse cx='52' cy='52' rx='31' ry='12' stroke='%235B8DEF' transform='rotate(-35 52 52)'/%3E%3Ccircle cx='52' cy='52' r='6' fill='%235B8DEF' stroke='none'/%3E%3Cpath d='M176 24v20l-20 34h56l-20-34V24z' stroke='%2334C7A0'/%3E%3Cpath d='M170 22h24' stroke='%2334C7A0'/%3E%3Cpath d='M118 40q2 9 11 11q-9 2-11 11q-2-9-11-11q9-2 11-11z' fill='%23FFB020' stroke='none'/%3E%3Cpath d='M34 198q24-42 54-24-6 36-54 24z' stroke='%2312885A'/%3E%3Cpath d='M39 196q26-7 45-21' stroke='%2312885A'/%3E%3Cpath d='M196 140c13 17 19 25 19 33a19 19 0 0 1-38 0c0-8 6-16 19-33z' stroke='%2306B6D4'/%3E%3Cpath d='M112 112l26 15M140 127l23-12' stroke='%23A78BFA'/%3E%3Ccircle cx='110' cy='110' r='6' fill='%23A78BFA' stroke='none'/%3E%3Ccircle cx='142' cy='129' r='6' fill='%23A78BFA' stroke='none'/%3E%3Ccircle cx='165' cy='113' r='6' fill='%23A78BFA' stroke='none'/%3E%3Cpath d='M226 198q3 13 15 16q-12 3-15 16q-3-13-15-16q12-3 15-16z' fill='%23FFB020' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  animation: drift 90s linear infinite;
}
@keyframes drift { to { background-position: 150px 300px; } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: 760px; margin: 0 auto; padding: var(--pad); }
.top {
  display: flex; align-items: center; gap: 12px;
  padding: 11px var(--pad); background: #150F2B; border-bottom: 1px solid #37276360;
  position: sticky; top: 0; z-index: 20;
}
.wordmark { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.wordmark .the {
  font-family: 'Pacifico', 'Snell Roundhand', cursive;
  font-size: 1.05rem;
  color: #FF2D95;
  transform: rotate(-4deg) translateY(-2px);
}
.wordmark .mehdees {
  font-family: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: #FCF2E1;
  text-shadow: 0 0 18px #ff2d9538;
}
.top .spacer { margin-left: auto; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: #EEF3FF; color: var(--blue); border: 1px solid #CBD9FA;
  border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 800;
}
.top .pill { background: #ffffff1a; color: #FCF2E1; border-color: #ffffff33; }
.top .btn--ghost { background: transparent; color: #FCF2E1; border-color: #ffffff40; box-shadow: none; }
.top .btn--ghost:hover { background: #ffffff1a; color: #fff; border-color: #FF2D95; }
.pill--green { background: var(--green-soft); color: var(--green); border-color: #B6E7D3; }
.pill--amber { background: #FEF3C7; color: #92610A; border-color: #FBD98B; }

h1, h2 { font-family: 'Baloo 2', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif; }
h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.12; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; }
.lede { color: var(--muted); margin-top: 8px; }
.card {
  background: var(--card); border: 1px solid #ffffff;
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}
.stack > * + * { margin-top: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--blue); color: #fff; border: 0; border-radius: 14px;
  padding: 14px 22px; font-weight: 800; box-shadow: 0 3px 0 var(--blue-dark);
  transition: transform .06s ease;
}
.btn:hover { background: var(--blue-dark); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--blue-dark); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); box-shadow: 0 3px 0 #E4EAF8; }
.btn--ghost:hover { background: #F2F6FF; color: var(--ink); }
.btn--green { background: var(--green); box-shadow: 0 3px 0 #0B6B46; }
.btn--green:hover { background: #0F7A50; }
.btn--big { width: 100%; padding: 16px 22px; font-size: 1.05rem; }

label { display: block; font-weight: 800; margin-bottom: 6px; }
input[type="text"] {
  width: 100%; font: inherit; padding: 14px 16px;
  border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink);
}
input[type="text"]:focus { border-color: var(--blue); outline: none; }

/* grade picker */
.grades { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.grade {
  background: #fff; border: 2px solid var(--line); border-radius: 16px;
  padding: 14px 8px; text-align: center; font-weight: 800; box-shadow: 0 3px 0 #E4EAF8;
}
.grade b { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--blue); }
.grade small { display: block; color: var(--muted); font-weight: 700; font-size: .72rem; }
.grade[aria-pressed="true"] { border-color: var(--blue); background: #EEF3FF; }

/* topic list */
.topics { display: grid; gap: 10px; }
.topic {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 13px 15px;
  box-shadow: 0 3px 0 #E4EAF8;
}
.topic:hover { border-color: #B9CBF7; background: #FAFCFF; }
.topic--lock { background: #FBFCFF; cursor: not-allowed; }
.topic--lock > * { opacity: .5; }
.topic__t { font-weight: 800; }
.topic__b { color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.topic__stars { margin-left: auto; white-space: nowrap; font-size: 1rem; letter-spacing: 1px; }

/* play */
.hud { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.bar { height: 10px; background: #E7EDFB; border-radius: 999px; overflow: hidden; flex: 1; min-width: 120px; }
.bar > i { display: block; height: 100%; background: var(--blue); border-radius: 999px; transition: width .3s ease; }
.q { font-size: clamp(1.25rem, 4.5vw, 1.7rem); font-weight: 800; line-height: 1.3; }
.qsub { color: var(--muted); margin-top: 6px; font-weight: 700; font-size: .9rem; }
.visual { margin: 14px 0; font-size: 1.3rem; line-height: 1.7; letter-spacing: 2px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
@media (max-width: 430px) { .choices { grid-template-columns: 1fr; } }
.choice {
  background: #fff; border: 2px solid var(--line); border-radius: 14px;
  padding: 16px; font-weight: 800; font-size: 1.05rem; box-shadow: 0 3px 0 #E4EAF8;
}
.choice:hover:not([disabled]) { border-color: #B9CBF7; background: #FAFCFF; }
.choice.right { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.choice.wrong { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.feedback { margin-top: 14px; border-radius: 14px; padding: 14px 16px; font-weight: 700; display: none; }
.feedback.show { display: block; }
.feedback.ok { background: var(--green-soft); color: #0B6B46; }
.feedback.no { background: var(--red-soft); color: #9B1C3B; }
.feedback b { display: block; margin-bottom: 3px; }

.hearts { font-size: 1.1rem; letter-spacing: 2px; }
.result-num { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--blue); }

/* report card */
.report { border: 2px dashed var(--line); border-radius: var(--radius); padding: 18px; background: #fff; }
.rrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #F0F3FB; }
.rrow:last-child { border-bottom: 0; }
.rrow .rt { font-weight: 700; }
.rrow .rs { margin-left: auto; font-weight: 800; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.center { text-align: center; }
.hide { display: none !important; }
footer { color: var(--muted); font-size: .8rem; padding: 26px var(--pad) 40px; text-align: center; }
footer a { color: var(--blue); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- scratch paper ---------- */
.playfoot { display: flex; gap: 10px; flex-wrap: wrap; }

.pad {
  position: fixed; inset: 0; z-index: 60;
  display: none; flex-direction: column;
  background: #EEF1F9;
}
.pad.open { display: flex; }
.pad__bar {
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: #150F2B;
}
.pad__q {
  flex: 1; min-width: 0; color: #FCF2E1; font-weight: 800; font-size: 1.05rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pad__bar .btn { padding: 9px 18px; }

/* squared paper, so columns of digits line up like a workbook */
.pad__paper {
  flex: 1; position: relative; margin: 10px;
  background: #fff;
  background-image:
    repeating-linear-gradient(0deg, #E3E9F7 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, #E3E9F7 0 1px, transparent 1px 26px);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #D9E0F0;
  overflow: hidden;
}
#padCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

.pad__tools {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
}
.tool {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px;
  padding: 11px 15px; font-weight: 800; font-size: .92rem;
  box-shadow: 0 3px 0 #E4EAF8;
}
.tool:hover:not([disabled]) { border-color: #B9CBF7; background: #FAFCFF; }
.tool.is-on { border-color: var(--blue); background: #EEF3FF; color: var(--blue); }
.tool[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
.tool--wipe { color: var(--red); }
@media (max-width: 430px) { .tool { padding: 10px 12px; font-size: .85rem; } }

/* ---------- how to do this ---------- */
.helpbtn {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  background: #FFF7E6; color: #92610A;
  border: 2px solid #FBD98B; border-radius: 12px;
  padding: 9px 14px; font-weight: 800; font-size: .88rem;
}
.helpbtn:hover { background: #FEF0CE; }
.helpbtn[aria-expanded="true"] { background: #FEF0CE; border-color: #F0B429; }
.help {
  margin-top: 12px; padding: 16px 18px;
  background: #FFFCF4; border: 2px solid #FBD98B; border-radius: 14px;
}
.help h3 {
  font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif;
  font-size: 1rem; color: #92610A; margin-bottom: 3px;
}
.help .bench {
  font-family: ui-monospace, Menlo, monospace; font-size: .7rem;
  letter-spacing: .06em; color: #A9803A; display: block; margin-bottom: 10px;
}
.help ol { margin: 0 0 12px 20px; padding: 0; }
.help li { margin-bottom: 6px; color: var(--ink); }
.help .eg {
  background: #fff; border: 1px dashed #F0B429; border-radius: 10px;
  padding: 10px 12px; font-weight: 700; color: #7A5109;
}
.help .eg b { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #A9803A; margin-bottom: 3px; }

/* ---------- parent reset ---------- */
.parentline { text-align: center; color: var(--muted); font-size: .86rem; margin-top: 4px; }
.linkbtn {
  background: none; border: 0; padding: 0;
  color: var(--muted); font: inherit; font-weight: 800; text-decoration: underline;
}
.linkbtn:hover { color: var(--red); }

.sheet { align-items: center; justify-content: center; padding: 18px; background: #17203ACC; }
.sheet.open { display: flex; }
.sheet__box {
  background: #fff; border-radius: 20px; padding: 24px 22px;
  max-width: 460px; width: 100%; box-shadow: 0 24px 60px #17203a55;
  max-height: 92vh; overflow: auto;
}
.sheet__box h2 { font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif; font-size: 1.35rem; margin-bottom: 10px; }
.sheet__box p { margin-bottom: 12px; }
.sheet__list { margin: 0 0 12px 20px; color: var(--muted); }
.sheet__list li { margin-bottom: 4px; }
.sheet__warn { background: var(--red-soft); color: #9B1C3B; border-radius: 12px; padding: 12px 14px; }
.sheet__check {
  display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 18px;
  font-weight: 700; font-size: .92rem; cursor: pointer;
}
.sheet__check input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--red); }
.sheet__row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.btn--danger { background: var(--red); box-shadow: 0 3px 0 #9B1C3B; }
.btn--danger:hover { background: #A81F3F; }

/* Cards float above the sky rather than blending into it. */
.card, .topic, .screen { position: relative; z-index: 1; }

/* Shown only when the browser will not keep progress: a private window, or
   storage switched off. Amber, not red: nothing is broken, it just will not
   be remembered. */
.note {
  margin-top: 10px; padding: 11px 13px; border-radius: 12px;
  background: #FEF3C7; border: 1px solid #FBD98B; color: #7C4E06;
  font-size: .86rem; font-weight: 700; line-height: 1.45;
}
.note b { display: block; margin-bottom: 2px; }

/* ---------- public-domain photographs ---------- */
.shot { margin: 0; }
.shot img {
  width: 100%; max-width: 330px; height: auto; display: block;
  border-radius: 16px; border: 3px solid #fff;
  box-shadow: 0 6px 20px #17203a2e;
}
.shot figcaption {
  margin-top: 7px; font-size: .72rem; font-weight: 700; color: var(--muted);
  letter-spacing: .01em; max-width: 330px;
}

/* The game's own name beside the wordmark, so a child landing here knows
   which of the games they are in. */
.gamename {
  font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: .95rem; color: #FCF2E1;
  padding: 3px 11px; border-radius: 999px;
  background: #ffffff1f; border: 1px solid #ffffff2e;
  white-space: nowrap;
}
@media (max-width: 480px) { .gamename { font-size: .8rem; padding: 2px 8px; } }

/* ---------- header on small screens ----------
   The name pill had no nowrap, so flex squeezed it until "Aura · Grade 3"
   wrapped onto three lines and rendered as a blob. Everything in the bar now
   stays on one line, the name truncates instead of wrapping, and the pill
   drops out on the narrowest phones because the page heading already states
   the grade. */
.top { flex-wrap: nowrap; }
.top .wordmark,
.top .gamename,
.top .btn { flex: 0 0 auto; white-space: nowrap; }
.top .spacer { flex: 1 1 auto; margin-left: 0; }
.top .pill {
  flex: 0 1 auto; display: inline-block; max-width: 30vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .top { gap: 8px; padding: 9px 12px; }
  .wordmark .the { font-size: .92rem; }
  .wordmark .mehdees { font-size: 1.08rem; }
  .gamename { font-size: .76rem; padding: 2px 9px; }
  .top .pill { font-size: .72rem; padding: 4px 9px; }
  .top .btn { padding: 5px 11px !important; font-size: .78rem !important; }
}

@media (max-width: 620px) {
  /* The name now lives on the Change button, so it truncates rather than
     disappearing: a child should always see whose game this is. */
  /* Allow it to shrink; .top .btn pins the others at their natural width. */
  /* .btn is inline-flex, and text-overflow does nothing on a flex container,
     so the name was clipped mid-word from the wrong side. Make it a plain
     inline-block so it truncates properly if it ever has to. */
  #switchBtn {
    display: inline-block; text-align: center; line-height: 1.5;
    flex: 0 1 auto; min-width: 0; max-width: 60vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .wordmark .mehdees { font-size: 1rem; letter-spacing: 0; }
  .gamename { font-size: .72rem; padding: 2px 8px; }
}

/* Five tools wrapped 4 + 1, leaving Clear stranded on its own row. Give them
   one even row that shrinks to fit instead. */
@media (max-width: 620px) {
  .pad__tools { flex-wrap: nowrap; gap: 6px; padding-left: 8px; padding-right: 8px; }
  .tool {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 11px 6px; font-size: .8rem; gap: 4px;
  }
}
@media (max-width: 400px) {
  .tool { font-size: .72rem; padding: 10px 4px; }
}

/* Smallest phones still in use (iPhone SE 1st gen at 320px): the header has
   five items in Math Arena, so shrink the brand and the label to fit. */
@media (max-width: 360px) {
  .top { gap: 6px; padding: 8px 10px; }
  .wordmark { gap: 5px; }
  .wordmark .the { font-size: .8rem; }
  .wordmark .mehdees { font-size: .9rem; }
  .gamename { font-size: .66rem; padding: 2px 7px; }
  .top .btn { padding: 5px 9px !important; font-size: .72rem !important; }
}

/* The game name doubles as the way back to the skills list. */
.gamename { cursor: pointer; font: inherit; font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif; }
.gamename:hover { background: #ffffff33; border-color: #FF2D95; }

/* Every phone width holds brand, game name, pencil and the player button, so
   the two labels stay small right up to 430px. Below that the header runs out
   of room and flex starts shrinking the child's name, which is the one thing
   that should never be the part that gets cut. */
@media (max-width: 430px) {
  .gamename { font-size: .62rem; padding: 2px 6px; }
  #switchBtn { max-width: 58vw; font-size: .7rem !important; padding: 5px 9px !important; }
}
@media (max-width: 340px) {
  .gamename { font-size: .56rem; padding: 2px 5px; }
  #switchBtn { font-size: .64rem !important; }
}