/* 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 reading-corner sky: warm amber, rose and violet with an open book, a
   pencil, quotation marks and letters drifting behind. Warmer than Science
   Lab's teal and softer than Math Arena's pink, so all three games read as
   different places. All of it sits on fixed layers under the cards, so
   questions stay on plain white. */
body {
  background:
    radial-gradient(1150px 680px at 8% -10%, #FFEBD3 0%, transparent 60%),
    radial-gradient(1020px 620px at 96% 0%, #FFE1EA 0%, transparent 62%),
    radial-gradient(950px 680px at 50% 112%, #EBE3FF 0%, transparent 60%),
    radial-gradient(760px 560px at 90% 84%, #FFF6CE 0%, transparent 60%),
    linear-gradient(180deg, #FFF9F2 0%, #FFF4F8 55%, #F8F5FF 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: .17;
  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%3Cpath d='M30 176h34a10 10 0 0 1 10 10v34H40a10 10 0 0 1-10-10z' stroke='%23C2410C'/%3E%3Cpath d='M118 176H84a10 10 0 0 0-10 10v34h34a10 10 0 0 0 10-10z' stroke='%23C2410C'/%3E%3Cpath d='M168 42l26 26-52 52-30 4 4-30z' stroke='%23F59E0B'/%3E%3Cpath d='M112 124l30-4' stroke='%23F59E0B'/%3E%3Cpath d='M40 44q-12 0-12 12t12 12q0 14-14 18M74 44q-12 0-12 12t12 12q0 14-14 18' stroke='%23DB2777'/%3E%3Cpath d='M196 220l16-42 16 42M202 206h20' stroke='%237C3AED'/%3E%3Cpath d='M128 96h26M141 96v30' stroke='%230E9F6E'/%3E%3Cpath d='M226 128q3 12 14 15q-11 3-14 15q-3-12-14-15q11-3 14-15z' fill='%23F59E0B' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  animation: drift 200s 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; }
}

/* Locked levels must be fully opaque: the pattern was showing through and
   competing with their text. */
.topic--lock { background: #FFFFFF; }
.topic--lock > * { opacity: .72; }