/* Math Practice. Site tokens (--ink/--ink-soft/--line/--crimson/--gold) so the High Contrast theme in feed/xp.js composes; --mp-* are the kid accents. */
:root{
  --paper:#f3ead6; --tile:#fbf6ea; --ink:#211c17; --ink-soft:#5e5648; --line:rgba(33,28,23,.16);
  --crimson:#8e1d1d; --gold:#a9802f;
  --mp-a:#d9480f; --mp-b:#1c64b0; --mp-g:#6b3fb3; --mp-good:#1d7a46; --mp-good-bg:#e3f4e8;
  --mp-star:#f5b700; --mp-star-edge:#b07f00; --mp-soft-bg:#fbefd9;
  --display:"EB Garamond",Georgia,serif; --ui:"Inter",system-ui,-apple-system,sans-serif;
  --mp-q:clamp(54px,15vw,76px); --mp-ans:clamp(34px,9.5vw,44px); --mp-body:17px; --mp-tap:84px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#16120e; --tile:#211a13; --ink:#efe6d0; --ink-soft:#b3a68e; --line:rgba(239,230,208,.16);
    --crimson:#cf4a43; --gold:#c79a44; --mp-a:#ff8a4c; --mp-b:#6cb2ff; --mp-g:#b58cff; --mp-good:#5fd394; --mp-good-bg:#173323;
    --mp-soft-bg:#2b2116; }
}
html[data-large-print="on"]{ --mp-q:clamp(66px,19vw,96px); --mp-ans:clamp(42px,12vw,56px); --mp-body:21px; --mp-tap:100px }

*{ box-sizing:border-box }
html,body{ margin:0 }
html{ scroll-padding-top:var(--fb-bar-h,37px) }
body{ padding-top:var(--fb-bar-h,37px); background:var(--paper); color:var(--ink); font-family:var(--ui); font-size:var(--mp-body);
  line-height:1.45; -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden; -webkit-tap-highlight-color:transparent }
.wrap{ max-width:600px; margin:0 auto; padding:0 16px calc(48px + env(safe-area-inset-bottom)) }
button{ font:inherit; color:inherit }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
:focus-visible{ outline:3px solid var(--mp-b); outline-offset:3px }

/* header */
.mp-top{ text-align:center; padding:12px 0 6px; position:relative }
.mp-back{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; margin:0 0 4px; border-radius:999px;
  font:600 15px/1 var(--ui); color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); background:var(--tile) }
.mp-back:hover{ color:var(--ink) }
.mp-top h1{ font-family:var(--display); font-weight:500; font-size:clamp(34px,9vw,46px); line-height:1.05; margin:6px 0 6px }
.mp-goal{ margin:0 auto; max-width:30ch; font-weight:700; font-size:clamp(17px,4.6vw,20px); line-height:1.3; color:var(--mp-a); text-wrap:balance }
.mp-goal span{ background:linear-gradient(90deg,var(--mp-a),var(--crimson),var(--mp-g),var(--mp-b),var(--mp-a)); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:mpPan 9s linear infinite }
.mp-goal-star{ display:inline-block; vertical-align:-4px; margin-right:6px; width:22px; height:22px; fill:var(--mp-star); stroke:var(--mp-star-edge); stroke-width:2.5; animation:mpTwinkle 2.6s ease-in-out infinite }
@keyframes mpPan{ to{ background-position:300% 0 } }
@keyframes mpTwinkle{ 0%,100%{ transform:scale(1) rotate(0) } 50%{ transform:scale(1.18) rotate(12deg) } }

/* Play and summary get the whole phone screen; "Levels" is the way back. */
body.mp-playing .mp-top, body.mp-playing .mp-foot{ display:none }
body.mp-playing .wrap{ padding-top:8px }
.mp-loading{ text-align:center; color:var(--ink-soft); padding:60px 0; min-height:320px }
.mp-h2{ font-family:var(--display); font-weight:500; font-size:24px; margin:22px 0 10px }
.mp-ico{ width:20px; height:20px; fill:var(--mp-star); stroke:var(--mp-star-edge); stroke-width:3; flex:none }

/* level picker */
.mp-levels{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.mp-level{ width:100%; display:flex; align-items:center; gap:14px; min-height:var(--mp-tap); padding:12px 14px; text-align:left; cursor:pointer;
  background:var(--tile); border:2px solid var(--line); border-radius:18px; transition:transform .12s ease, border-color .15s ease }
.mp-level:hover{ border-color:var(--mp-b) }
.mp-level:active{ transform:scale(.98) }
.mp-level-ex{ flex:none; width:76px; height:56px; display:grid; place-items:center; border-radius:12px; background:var(--paper);
  font:800 19px/1 var(--ui); font-variant-numeric:lining-nums tabular-nums; color:var(--mp-b); letter-spacing:-.01em }
.mp-levels li:nth-child(2) .mp-level-ex{ color:var(--mp-a) }
.mp-levels li:nth-child(3) .mp-level-ex{ color:var(--crimson) }
.mp-levels li:nth-child(4) .mp-level-ex{ color:var(--mp-g) }
.mp-levels li:nth-child(5) .mp-level-ex{ color:var(--mp-good); font-size:16px }
.mp-level-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.mp-level-txt b{ font-size:1.12em; line-height:1.2; text-wrap:balance }
.mp-level-txt small{ font-size:.86em; color:var(--ink-soft) }
.mp-level-stars{ flex:none; display:inline-flex; align-items:center; gap:4px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-soft) }

/* sticker shelf */
.mp-shelf{ margin-top:8px }
.mp-shelf-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.mp-total{ display:inline-flex; align-items:center; gap:5px; color:var(--ink-soft); font-size:.95em }
.mp-total b{ color:var(--ink) }
.mp-stickers{ list-style:none; margin:0; padding:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  background:var(--tile); border:2px solid var(--line); border-radius:18px }
.mp-sticker{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-soft); text-align:center }
.mp-sticker svg, .mp-lock{ width:52px; height:52px }
.mp-lock{ display:grid; place-items:center; border-radius:50%; border:2px dashed var(--line); font:800 20px/1 var(--ui); color:var(--line) }
.mp-sticker.is-got span{ color:var(--ink); font-weight:600 }
.mp-next{ margin:8px 2px 0; color:var(--ink-soft); font-size:.92em }

/* settings switches */
.mp-opts{ display:grid; gap:8px }
.mp-opts .mp-h2{ margin-bottom:2px }
.mp-opt{ display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:10px 14px; text-align:left; cursor:pointer;
  background:var(--tile); border:2px solid var(--line); border-radius:14px }
.mp-opt-txt{ flex:1; display:flex; flex-direction:column }
.mp-opt-txt small{ color:var(--ink-soft); font-size:.84em }
.mp-sw{ flex:none; width:52px; height:30px; border-radius:999px; background:var(--line); position:relative; transition:background .18s ease }
.mp-sw::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s ease }
.mp-opt[aria-checked="true"] .mp-sw{ background:var(--mp-good) }
.mp-opt[aria-checked="true"] .mp-sw::after{ transform:translateX(22px) }

/* play */
.mp-playbar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:6px 0 8px }
.mp-ghost{ justify-self:start; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--tile); font-weight:600; font-size:15px; color:var(--ink-soft) }
.mp-count{ font-weight:600; color:var(--ink-soft); font-size:15px; font-variant-numeric:tabular-nums }
.mp-clock{ justify-self:end; font:700 17px/1 var(--ui); font-variant-numeric:tabular-nums; color:var(--mp-b); padding:8px 12px; border-radius:999px; background:var(--tile); border:1px solid var(--line) }
.mp-slots{ list-style:none; margin:0 0 12px; padding:0; display:flex; justify-content:center; gap:6px }
.mp-slot{ width:26px; height:26px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center }
.mp-slot svg{ width:24px; height:24px; fill:var(--mp-star); stroke:var(--mp-star-edge); stroke-width:2.5 }
.mp-slot.is-now{ border-color:var(--mp-b); box-shadow:0 0 0 3px color-mix(in srgb, var(--mp-b) 22%, transparent) }
.mp-slot.is-star{ border-color:transparent }
.mp-slot.is-tried{ background:var(--line); border-color:transparent }
.mp-slot.is-pop svg{ animation:mpPop .5s cubic-bezier(.2,1.6,.4,1) }
@keyframes mpPop{ 0%{ transform:scale(.2) rotate(-40deg) } 100%{ transform:scale(1) rotate(0) } }

.mp-card{ background:var(--tile); border:2px solid var(--line); border-radius:22px; padding:18px 14px 16px; text-align:center }
.mp-q-row{ display:flex; align-items:center; justify-content:center; gap:10px }
/* 128px = wrap + card padding + the speaker button. */
.mp-q{ margin:0; font:800 min(var(--mp-q), calc((min(100vw, 600px) - 128px) / var(--qw, 5))) / 1.05 var(--ui); font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.02em; white-space:nowrap }
.mp-q-blank{ color:var(--mp-b) }
.mp-speak{ flex:none; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:1px solid var(--line); background:var(--paper); color:var(--mp-b) }
.mp-speak svg{ width:24px; height:24px }
.mp-cap{ margin:6px 0 0; color:var(--ink-soft); font-weight:600 }

/* dot pictures: rows of five, like a ten-frame */
.mp-pic{ margin:14px auto 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px }
.mp-dots{ display:grid; grid-template-columns:repeat(var(--cols,5),var(--d,22px)); gap:6px; justify-content:center }
.mp-dots i{ width:var(--d,22px); height:var(--d,22px); border-radius:50%; display:block }
.mp-dots .da{ background:var(--mp-a) }
.mp-dots .db{ background:var(--mp-b) }
.mp-dots .dg{ background:var(--mp-g) }
.mp-dots .dx{ border:2.5px solid var(--ink-soft); opacity:.55; position:relative }
.mp-dots .dx::after{ content:""; position:absolute; left:50%; top:-4px; bottom:-4px; width:2.5px; background:var(--ink-soft); transform:translateX(-50%) rotate(45deg) }
.mp-pic-op{ font:800 28px/1 var(--ui); color:var(--ink-soft) }
.mp-pic-x{ --d:14px; gap:8px }
.mp-pic-x .mp-dots{ gap:4px }
.mp-group{ padding:7px; border-radius:12px; border:2px solid color-mix(in srgb, var(--mp-g) 45%, transparent); background:color-mix(in srgb, var(--mp-g) 8%, transparent) }

.mp-answers{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 0 }
.mp-ans{ min-height:var(--mp-tap); border-radius:20px; border:2px solid var(--line); border-bottom-width:5px; background:var(--tile); cursor:pointer;
  font:800 var(--mp-ans)/1 var(--ui); font-variant-numeric:lining-nums tabular-nums; color:var(--ink); transition:transform .1s ease, background .15s ease, opacity .2s ease }
.mp-ans:hover:not(:disabled){ border-color:var(--mp-b) }
.mp-ans:active:not(:disabled){ transform:translateY(2px); border-bottom-width:3px }
.mp-ans:disabled{ cursor:default }
.mp-ans.is-right, .mp-ans.is-reveal{ background:var(--mp-good-bg); border-color:var(--mp-good); color:var(--mp-good) }
.mp-ans.is-right{ animation:mpBounce .45s ease }
.mp-ans.is-miss{ opacity:.35; border-style:dashed }
.mp-ans:disabled:not(.is-right):not(.is-reveal):not(.is-miss){ opacity:.6 }
@keyframes mpBounce{ 40%{ transform:scale(1.07) } }
.mp-feedback{ min-height:2.9em; margin:12px 0 0; text-align:center; font-weight:700; font-size:1.06em }
.mp-feedback.is-good{ color:var(--mp-good) }
.mp-feedback.is-soft{ color:var(--ink); background:var(--mp-soft-bg); border-radius:14px; padding:10px 12px }
.mp-next-row{ display:flex; justify-content:center }

.mp-btn{ min-height:60px; padding:0 30px; border-radius:999px; border:0; cursor:pointer; background:var(--mp-b); color:#fff; font-weight:700; font-size:1.08em }
.mp-btn-2{ background:transparent; color:var(--ink); border:2px solid var(--line) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mp-btn:not(.mp-btn-2){ color:#0d1a2b } }

/* summary */
.mp-done{ padding:22px 16px 20px; margin-top:8px }
.mp-done-level{ margin:0; color:var(--ink-soft); font-weight:600 }
.mp-done-h{ font-family:var(--display); font-weight:600; font-size:clamp(34px,9vw,44px); line-height:1.1; margin:4px 0 14px; outline:none }
.mp-slots-big{ gap:4px }
.mp-slots-big .mp-slot{ width:27px; height:27px }
.mp-slots-big .mp-slot svg{ width:26px; height:26px }
.mp-cheer{ margin:4px 0 0; font-weight:700; color:var(--mp-good) }
.mp-time{ margin:8px 0 0; font-weight:600; font-variant-numeric:tabular-nums }
.mp-time small{ color:var(--ink-soft) }
.mp-best{ color:var(--mp-a) }
.mp-unlock{ display:flex; align-items:center; justify-content:center; gap:12px; margin:16px auto 0; padding:10px 16px; border-radius:16px; background:var(--mp-soft-bg); max-width:320px }
.mp-unlock svg{ width:56px; height:56px; flex:none; animation:mpPop .6s cubic-bezier(.2,1.6,.4,1) }
.mp-done-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:20px }

/* footer */
.mp-foot{ margin:34px 0 0; padding-top:16px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:15px }
.mp-foot h2{ font-family:var(--display); font-weight:500; font-size:21px; color:var(--ink); margin:0 0 6px }
.mp-reset{ min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer; font-size:14px }

@media (min-width:720px){
  .mp-stickers{ grid-template-columns:repeat(6,1fr) }
  .mp-answers{ grid-template-columns:repeat(4,1fr) }
}

@media (prefers-reduced-motion: reduce){
  .mp-goal span{ animation:none; background-position:0 0 }
  .mp-goal-star, .mp-slot.is-pop svg, .mp-ans.is-right, .mp-unlock svg{ animation:none }
  .mp-level, .mp-ans, .mp-sw, .mp-sw::after{ transition:none }
}