/* MathsQuest styles. Themes are sets of CSS variables on <body>. */
:root {
  --font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --hand: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive;
  --radius: 18px;
  --good: #2a9d3f;
  --hmm: #e08a00;
}

body.theme-space {
  --bg: radial-gradient(ellipse at top, #24306e 0%, #0d1236 60%, #070a1f 100%);
  --ink: #f4f6ff;
  --card: #ffffff;
  --card-ink: #1d2340;
  --accent: #ffcc33;
  --accent-ink: #1d2340;
  --main: #6c5ce7;
  --main-ink: #fff;
  --soft: #e9e6ff;
  --path: #ffffff66;
  --map: radial-gradient(circle at 30% 30%, #1f2a6b, #0b1030);
}
body.theme-pirates {
  --bg: linear-gradient(#7fd0f0 0%, #3aa3d4 45%, #1b6f9e 100%);
  --ink: #12324a;
  --card: #fffaf0;
  --card-ink: #3b2a14;
  --accent: #f2b632;
  --accent-ink: #3b2a14;
  --main: #c1440e;
  --main-ink: #fff;
  --soft: #f7e7c6;
  --path: #8b5a2b;
  --map: radial-gradient(circle at 50% 40%, #f6e3b4, #e4c88a 70%, #c9a565);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  font-size: 20px;
  color: var(--ink);
  background: var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}
button { font: inherit; cursor: pointer; }
h1 { font-size: 2rem; margin: .4em 0; }
h2 { font-size: 1.25rem; margin: 1.2em 0 .4em; }
.hidden { display: none !important; }
.center { max-width: 1000px; margin: 0 auto; padding: 1rem 1.5rem 3rem; text-align: center; }
main { padding: 0 1.5rem 2rem; }
.note { opacity: .8; font-size: .9rem; }
.lead { font-size: 1.2rem; }
.err { color: #ff6b6b; min-height: 1.2em; margin: .3em 0; }

/* Read-aloud line */
.say { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.speak {
  border: none; background: var(--accent); color: var(--accent-ink);
  border-radius: 50%; width: 2.2rem; height: 2.2rem; font-size: 1.1rem; flex: none;
  box-shadow: 0 3px 0 #0003;
}
.speak:active { transform: translateY(2px); box-shadow: none; }

/* Top bar */
.topbar {
  display: flex; align-items: center; gap: .6rem; padding: .7rem 1.5rem;
  background: #0002; backdrop-filter: blur(4px);
}
.spacer { flex: 1; }
.logo { font-weight: 800; font-size: 1.4rem; letter-spacing: .5px; }
.back, .who-btn, .icon-btn {
  border: none; border-radius: 999px; background: var(--card); color: var(--card-ink);
  padding: .4rem .9rem; box-shadow: 0 3px 0 #0003; display: inline-flex; align-items: center; gap: .4rem;
}
.icon-btn { padding: .4rem .6rem; }
.icon-btn.off { opacity: .45; }
.star-count { font-weight: 800; background: var(--accent); color: var(--accent-ink); padding: .35rem .9rem; border-radius: 999px; }

/* Avatars and profile cards */
.avatar { display: inline-grid; place-items: center; }
.avatar.small { font-size: 1.3rem; }
.avatar.big { font-size: 3.5rem; height: 5rem; }
.profiles { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; margin-top: 1.5rem; }
.profile-card { position: relative; }
.profile {
  width: 180px; padding: 1rem; border: none; border-radius: var(--radius);
  background: var(--card); color: var(--card-ink); display: flex; flex-direction: column; align-items: center; gap: .3rem;
  box-shadow: 0 6px 0 #0003; transition: transform .15s;
}
.profile:hover { transform: translateY(-4px) rotate(-1deg); }
.profile.new { background: var(--soft); }
.remove {
  position: absolute; top: -8px; right: -8px; border: none; border-radius: 50%; width: 1.8rem; height: 1.8rem;
  background: #fff; color: #a33; box-shadow: 0 2px 4px #0004; font-size: .9rem;
}

/* New player form */
.form .name-input {
  font: inherit; font-size: 1.6rem; padding: .6rem 1rem; border-radius: var(--radius); border: 3px solid var(--accent);
  width: min(420px, 90%); text-align: center;
}
.choices { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.choice {
  border: 3px solid transparent; background: var(--card); color: var(--card-ink); border-radius: var(--radius);
  padding: .5rem .9rem; box-shadow: 0 4px 0 #0003; font-weight: 700;
}
.avatars .choice { font-size: 2rem; padding: .3rem .6rem; }
.choice.on { border-color: var(--accent); transform: scale(1.08); background: var(--soft); }
.theme-choice, .choice.soon { display: flex; flex-direction: column; align-items: center; min-width: 130px; }
.theme-choice span, .choice.soon span { font-size: 2.6rem; }
.choice.soon { opacity: .55; box-shadow: none; }
.choice.soon small { font-weight: 400; font-size: .75rem; }

.big-btn {
  border: none; border-radius: var(--radius); padding: .8rem 1.6rem; font-size: 1.25rem; font-weight: 800;
  box-shadow: 0 5px 0 #0004; margin: .4rem;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #0004; }
.big-btn.go { background: var(--main); color: var(--main-ink); }
.big-btn.ghost { background: var(--soft); color: var(--card-ink); }
.form .go { margin-top: 1.5rem; font-size: 1.5rem; }

/* Map */
.map-head { text-align: center; }
.map-head h1 { margin-bottom: 0; }
.map {
  position: relative; max-width: 1100px; height: 560px; margin: 1rem auto; border-radius: 28px;
  background: var(--map); box-shadow: inset 0 0 40px #0005, 0 8px 0 #0003; overflow: hidden;
}
.theme-pirates .map { border: 6px solid #8b5a2b; }
.map-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-path polyline {
  fill: none; stroke: var(--path); stroke-width: 6; stroke-dasharray: 2 14; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.deco { position: absolute; font-size: 1.1rem; opacity: .6; animation: twinkle 4s infinite; pointer-events: none; }
.theme-pirates .deco { opacity: .35; }
@keyframes twinkle { 50% { opacity: .15; transform: scale(.8); } }
.stop {
  position: absolute; transform: translate(-50%, -50%); border: none; background: none; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; transition: transform .15s;
}
.theme-pirates .stop { color: #3b2a14; }
.stop:hover { transform: translate(-50%, -50%) scale(1.1); }
.stop-icon { font-size: 4rem; line-height: 1; filter: drop-shadow(0 4px 4px #0006); }
.stop b { background: var(--card); color: var(--card-ink); border-radius: 999px; padding: .1rem .7rem; margin-top: .2rem; box-shadow: 0 3px 0 #0003; }
.stop small { color: var(--accent); font-size: 1.1rem; text-shadow: 0 1px 2px #000a; letter-spacing: 2px; }
.stop.locked { opacity: .5; }
.stop.locked .stop-icon { filter: grayscale(1); }
.stop.locked small { color: inherit; letter-spacing: 0; text-shadow: none; }
.stop.next .stop-icon { animation: bob 1.6s ease-in-out infinite; }
.hero { position: absolute; font-size: 2.6rem; transform: translate(-130%, -90%); animation: bob 2s ease-in-out infinite; pointer-events: none; }
@keyframes bob { 50% { translate: 0 -8px; } }

/* Topic page */
.topic-title { font-size: 4rem; margin-bottom: 0; }
.stars-big { font-size: 3rem; color: var(--accent); letter-spacing: 6px; margin: .3rem 0 1rem; }
.stars-big.pop span { display: inline-block; }
.stars-big.pop span.won { animation: pop .5s backwards; }
@keyframes pop { from { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.4); } }
.steps { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }
.step-btn {
  width: 240px; padding: 1.4rem 1rem; border: none; border-radius: var(--radius);
  background: var(--card); color: var(--card-ink); display: flex; flex-direction: column; gap: .3rem; align-items: center;
  box-shadow: 0 6px 0 #0003; transition: transform .15s;
}
.step-btn:hover { transform: translateY(-4px); }
.step-btn span { font-size: 3rem; }
.step-btn b { font-size: 1.3rem; }

/* Cards */
.card {
  background: var(--card); color: var(--card-ink); border-radius: 24px; padding: 1.4rem 1.6rem;
  box-shadow: 0 8px 0 #0003; text-align: center;
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.badge { background: var(--soft); padding: .3rem .9rem; border-radius: 999px; font-weight: 700; font-size: .95rem; }
.dots { display: flex; gap: .4rem; }
.dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--soft); }
.dots span.on { background: var(--main); }
.trick { max-width: 900px; margin: 1.5rem auto; }
.slide-text { font-size: 1.5rem; line-height: 1.4; margin: 1.2rem 0; min-height: 3em; }
.slide-visual { min-height: 260px; display: grid; place-items: center; margin-bottom: 1rem; }
.card-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.done { max-width: 720px; margin: 2rem auto; }
.done .card-nav { justify-content: center; }
.big-emoji { font-size: 5rem; }

/* Visuals */
.ladder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem; }
.rung {
  background: var(--soft); border-radius: 12px; padding: .35rem .6rem; min-width: 64px;
  display: flex; flex-direction: column; animation: rise .4s backwards;
}
.rung small { font-size: .7rem; opacity: .7; }
.rung b { font-size: 1.4rem; }
.rung.hot { background: var(--accent); transform: scale(1.12); }
.plus { font-size: .75rem; color: var(--main); font-weight: 700; animation: rise .4s backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.pv table { border-collapse: collapse; margin: 0 auto; font-size: 2.2rem; }
.pv th, .pv td { border: 3px solid var(--card-ink); width: 90px; height: 72px; }
.pv th { font-size: 1.2rem; background: var(--soft); }
.pv td.after { color: var(--main); font-weight: 800; animation: slideLeft 1s .4s backwards; }
@keyframes slideLeft { from { transform: translateX(90px); opacity: 0; } }
.pv-note { font-size: 1.4rem; font-weight: 700; }
.array { display: inline-grid; gap: 4px; font-size: 1.5rem; }
.array span { animation: rise .3s backwards; }
.array-wrap p { font-weight: 700; }
.clock { width: 260px; height: 260px; }
.clock .face { fill: #fff; stroke: var(--card-ink); stroke-width: 4; }
.clock .hr { font-size: 18px; font-weight: 700; fill: var(--card-ink); }
.clock .min { font-size: 14px; font-weight: 700; fill: #1d7bd6; }
.clock .hand { stroke: var(--main); stroke-width: 5; stroke-linecap: round; transform-origin: 0 0; animation: tick 6s steps(12) infinite; }
.clock .pin { fill: var(--card-ink); }
@keyframes tick { to { transform: rotate(360deg); } }
.fives { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 620px; }
.fives .ten { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 3px solid var(--main); border-radius: 12px; animation: rise .5s backwards; }
.fives .ten.odd { border-style: dashed; border-color: var(--accent); }
.fives .ten b { font-size: 1.2rem; margin-left: 4px; }
.fives .five { display: grid; grid-template-columns: repeat(5, 12px); gap: 3px; }
.fives .five i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.book {
  font-family: var(--hand); font-size: 2rem; text-align: left; padding: .5rem 2rem;
  background: repeating-linear-gradient(#fff 0 46px, #b8d4ee 46px 48px); border-left: 4px solid #e88; min-width: 60%;
}
.book .line { height: 48px; line-height: 48px; }

/* Quiz */
.quiz { display: grid; grid-template-columns: minmax(380px, 460px) 1fr; gap: 1.2rem; max-width: 1300px; margin: 1rem auto; align-items: start; }
.q-card { display: flex; flex-direction: column; gap: .7rem; }
.progress { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.progress span { width: 22px; height: 10px; border-radius: 6px; background: var(--soft); }
.progress span.past { background: var(--good); }
.progress span.now { background: var(--accent); }
.streak { font-weight: 800; color: var(--hmm); }
.q-text { font-size: 2.8rem; font-weight: 800; display: flex; justify-content: center; align-items: center; gap: .8rem; }
.answer-box {
  font-size: 2.6rem; font-weight: 800; height: 4.2rem; line-height: 4rem; border: 4px dashed var(--main);
  border-radius: var(--radius); width: 200px; margin: 0 auto; background: #fff;
}
.answer-box.right { border-style: solid; border-color: var(--good); color: var(--good); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; width: 280px; margin: 0 auto; }
.keypad button {
  font-size: 1.7rem; font-weight: 800; padding: .5rem; border: none; border-radius: 14px;
  background: var(--soft); color: var(--card-ink); box-shadow: 0 4px 0 #0002;
}
.keypad button:active { transform: translateY(3px); box-shadow: none; }
.keypad .ok { background: var(--good); color: #fff; }
.keypad .del { background: #ddd; }
.feedback { font-size: 1.2rem; font-weight: 700; min-height: 1.5em; }
.feedback.good { color: var(--good); animation: pop .4s; }
.feedback.hmm { color: var(--hmm); }
.feedback.show-answer { color: var(--card-ink); background: var(--soft); border-radius: 12px; padding: .5rem; }
.help-area .hint { background: #fff6d6; color: #5a4300; border-radius: 12px; padding: .6rem .8rem; font-weight: 700; }
.help-area .ladder { margin-top: .5rem; }
.help-area .rung { min-width: 52px; padding: .2rem .4rem; }
.help-area .rung b { font-size: 1.1rem; }

/* Scratchpad */
.pad-side { position: sticky; top: 1rem; }
.pad { background: var(--card); border-radius: 24px; padding: .7rem; box-shadow: 0 8px 0 #0003; }
.pad-tools { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: 0 .3rem .6rem; color: var(--card-ink); }
.pad-title { font-weight: 800; margin-right: auto; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #0003; }
.swatch.on, .tool.on { box-shadow: 0 0 0 3px var(--accent); }
.tool { border: none; background: var(--soft); border-radius: 10px; padding: .25rem .5rem; font-size: 1.1rem; }
.pad-canvas { width: 100%; height: 520px; border-radius: 14px; display: block; touch-action: none; cursor: crosshair; }
.pad-side .note { text-align: center; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.drawing { position: relative; margin: 0; background: var(--card); color: var(--card-ink); border-radius: 16px; padding: .5rem; box-shadow: 0 5px 0 #0003; }
.drawing img { width: 100%; border-radius: 10px; display: block; }
.drawing figcaption { font-size: .85rem; padding-top: .3rem; }

@media (max-width: 900px) {
  .quiz { grid-template-columns: 1fr; }
  .pad-side { position: static; }
  .pad-canvas { height: 380px; }
  .map { height: 480px; }
  .stop-icon { font-size: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Work it out */
.work-entry { display: flex; justify-content: center; margin: 1rem 0 .5rem; }
.work-entry .step-btn { width: 360px; }
.work-entry .stars { color: var(--hmm); font-size: 1.4rem; letter-spacing: 3px; }
.work { max-width: 900px; margin: 1rem auto; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.work .card-head { align-self: stretch; }
.card-nav.mid { justify-content: center; }
.start-cols { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; }
.start-col { display: flex; flex-direction: column; gap: .5rem; min-width: 220px; }
.start-col h2 { margin: .2em 0 0; font-size: 1.6rem; }
.start-col .note { margin: 0 0 .3rem; }
.start-btn {
  border: 3px solid transparent; background: var(--soft); color: var(--card-ink); border-radius: var(--radius);
  padding: .6rem 1rem; font-size: 1.4rem; font-weight: 800; box-shadow: 0 4px 0 #0002;
}
.start-btn:hover { border-color: var(--main); }
.start-btn:active { transform: translateY(3px); box-shadow: none; }
.start-note { font-weight: 700; background: var(--soft); border-radius: 12px; padding: .4rem .8rem; margin: 0; }
.hop-q { font-size: 2.4rem; }
.work .lead { margin: .2rem 0; }
.nl-wrap { width: 100%; }
.numberline { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto; }
.nl-axis { stroke: var(--card-ink); stroke-width: 3; }
.nl-ten { stroke: var(--card-ink); stroke-width: 3; }
.nl-one { stroke: var(--card-ink); stroke-width: 1.5; opacity: .5; }
.nl-tenlabel { font-size: 15px; fill: var(--card-ink); opacity: .7; }
.nl-start { font-size: 18px; font-weight: 800; fill: var(--hmm); }
.nl-land { font-size: 18px; font-weight: 800; fill: var(--main); }
.nl-hop { fill: none; stroke: var(--main); stroke-width: 3.5; stroke-linecap: round; animation: draw .6s ease-out; stroke-dasharray: 1000; }
.nl-hop.now { stroke: var(--hmm); stroke-dasharray: 6 6; animation: none; }
@keyframes draw { from { stroke-dashoffset: 1000; } }
.nl-step { font-size: 15px; font-weight: 800; fill: var(--main); }
.nl-ask { font-size: 22px; font-weight: 800; fill: var(--hmm); }
.nl-dot { fill: var(--main); }
.nl-startdot { fill: var(--hmm); }
.nl-bridge { font-size: 16px; font-weight: 800; fill: #5a4300; }
@media (max-width: 600px) {
  .work { padding: 1rem .8rem; }
  .work .q-text { font-size: 2rem; }
  .start-cols { gap: 1rem; }
  .start-col { min-width: 150px; }
  .start-btn { font-size: 1.15rem; padding: .5rem .6rem; }
}