/* =========================================================================
   Math Path — bright, bold, thick-outlined look (inspired by TypingLand)
   ========================================================================= */
:root {
  --ink: #1d1b2e;
  --yellow: #ffd23f;
  --green: #3ddc84;
  --blue: #3aa0ff;
  --orange: #ff9f1c;
  --pink: #ff5d8f;
  --purple: #9b5de5;
  --cyan: #00c2d1;
  --answer: #1769d4;
  --font: 'Fredoka', 'Baloo 2', 'Nunito', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --line: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  background: linear-gradient(#7fd1ff, #c9efff 70%);
  user-select: none;
  -webkit-user-select: none;
}
button { font-family: inherit; color: inherit; }
.hidden { display: none !important; }

/* ---------- sky decoration ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; background: #fff; border-radius: 999px; opacity: .85; width: 240px; height: 64px; animation: drift 60s linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 90px; height: 90px; left: 40px; top: -45px; }
.cloud::after { width: 120px; height: 110px; left: 100px; top: -60px; }
.cloud.c1 { top: 16%; left: -260px; }
.cloud.c2 { top: 48%; left: -260px; animation-delay: -25s; transform: scale(.7); }
.cloud.c3 { top: 72%; left: -260px; animation-delay: -45s; transform: scale(1.2); }
@keyframes drift { to { translate: calc(100vw + 520px) 0; } }
.hill { position: absolute; bottom: -38vh; border-radius: 50%; border: var(--line) solid var(--ink); }
.hill.h1 { left: -15vw; width: 80vw; height: 60vh; background: #6be39a; }
.hill.h2 { right: -20vw; width: 90vw; height: 55vh; background: #45cf7f; }

/* ---------- screens ---------- */
.screen {
  position: fixed;
  top: var(--hud-height, 52px);
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  transition: top 0.25s ease;
}
.topbar { display: flex; align-items: center; gap: 18px; padding: 18px 28px 6px; min-height: 96px; }
.iconbtn {
  flex: none; width: 66px; height: 66px; border-radius: 50%; background: #fff; cursor: pointer;
  border: 5px solid var(--ink); box-shadow: 0 6px 0 var(--ink); display: grid; place-items: center;
  transition: transform .12s, box-shadow .12s;
}
.iconbtn:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ink); }
.iconbtn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.iconbtn svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn.muted .wave { opacity: .15; }
.logo {
  margin-left: auto; font-size: 40px; font-weight: 700; color: #fff; letter-spacing: 1px;
  -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; display: flex; align-items: center; gap: 10px;
}
.logo-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); border: 5px solid var(--ink); box-shadow: 18px 0 0 -5px var(--green), 18px 0 0 0 var(--ink); margin-right: 18px; }

/* ---------- trail chips ---------- */
.chips { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; min-height: 60px; }
.chip {
  height: 56px; min-width: 56px; padding: 0 18px; border-radius: 18px; font-size: 24px; font-weight: 700;
  border: 5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.chip:hover { transform: translateY(-2px); }
.chip .csym { font-size: 38px; line-height: 1; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.chip .csym.sm { font-size: 28px; }
.dicon { display: inline-flex; gap: 4px; }
.dicon i { width: 18px; height: 26px; border: 4px solid var(--ink); border-radius: 6px; background: #fff; display: inline-block; }

/* ---------- color helpers ---------- */
.c-green, .card.c-green { background-color: var(--green); }
.c-blue, .card.c-blue { background-color: var(--blue); }
.c-orange, .card.c-orange { background-color: var(--orange); }
.c-pink, .card.c-pink { background-color: var(--pink); }
.c-purple, .card.c-purple { background-color: var(--purple); }
.c-cyan, .card.c-cyan { background-color: var(--cyan); }
.c-yellow, .card.c-yellow { background-color: var(--yellow); }
.c-white, .card.c-white { background-color: #fff; }

/* ---------- cards ---------- */
.card {
  background-color: #fff; border: var(--line) solid var(--ink); border-radius: 34px; box-shadow: 0 10px 0 var(--ink);
}
.pick {
  position: relative; cursor: pointer; font: inherit; padding: 0; overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 38%);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s;
}
.pick:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 18px 0 var(--ink); }
.pick:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--ink); }
.pick:focus-visible { outline: 6px solid #fff; outline-offset: 4px; }
.pick.locked { filter: grayscale(.85); opacity: .55; cursor: not-allowed; }
.pick.locked:hover { transform: none; box-shadow: 0 10px 0 var(--ink); }
.stroke, .sym, .bignum, .xex, .lnum, .bword, .prompt {
  color: #fff; -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill;
}

/* ---------- menu ---------- */
.prompt { margin: 0; text-align: center; font-size: clamp(30px, 3.6vw, 58px); -webkit-text-stroke-width: 9px; letter-spacing: .5px; }
.stage { flex: 1; min-height: 0; padding: 18px 4vw 5vh; display: flex; }
.stage > * { flex: 1; min-height: 0; }

.grid4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4vh 3vw; width: min(100%, 150vh); margin: 0 auto; }
.opcard .sym { font-size: min(26vh, 15vw); line-height: 1; font-weight: 700; -webkit-text-stroke-width: 14px; display: block; transform: translateY(-3%); }

.digits-layout { display: grid; grid-template-columns: 3fr 1.25fr; gap: 3vw; }
.dcards { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2.4vw; }
.dcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; perspective: 600px; }
.bignum { font-weight: 700; line-height: 1; -webkit-text-stroke-width: 12px; }
.bignum[data-n="1"] { font-size: min(30vh, 13vw); }
.bignum[data-n="2"] { font-size: min(22vh, 8.6vw); }
.bignum[data-n="3"] { font-size: min(16vh, 6.2vw); }
.dlabel { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 28px; font-weight: 700; }
.dlabel .dicon i { width: 26px; height: 36px; }

.preview-slot { min-height: 0; display: flex; }
.preview { flex: 1; display: flex; flex-direction: column; padding: 14px; background-color: #fffdf3;
  background-image: radial-gradient(circle, rgba(29,27,46,.12) 1.5px, transparent 1.6px); background-size: 28px 28px; }
.pv-cap { align-self: center; font-size: 22px; font-weight: 700; padding: 4px 18px; border: 4px solid var(--ink); border-radius: 999px; background: var(--yellow); }
.pv-holder { flex: 1; position: relative; overflow: hidden; }

.side-layout { display: grid; grid-template-columns: 1.1fr 2fr; gap: 3vw; }
.ocards { display: grid; gap: 2.4vw; }
.ocards.n2 { grid-template-columns: 1fr 1fr; }
.ocards.n3 { grid-template-columns: 1fr 1fr 1fr; }
.ocards.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ocards.grid22 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ocards .span2 { grid-column: 1 / -1; }
/* example cards: drop the little side labels so the worked example can be drawn bigger */
.mini .ws .tag { display: none; }
.mcard { display: flex; flex-direction: column; align-items: stretch; padding: 14px 16px 14px; gap: 10px; min-height: 0; }
.mname { font-size: clamp(22px, 2.1vw, 36px); font-weight: 700; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; }
.mini { flex: 1; position: relative; overflow: hidden; background: #fff; border: 4px solid var(--ink); border-radius: 20px; min-height: 0; }
.mblurb { font-size: clamp(15px, 1.15vw, 20px); font-weight: 600; background: rgba(255,255,255,.85); border: 3px solid var(--ink); border-radius: 14px; padding: 4px 10px; }
.xcard, .lcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; padding: 20px; }
.xex { font-size: clamp(34px, 4vw, 70px); font-weight: 700; -webkit-text-stroke-width: 9px; }
.xex .zz { color: var(--yellow); }
.xex .rr { color: var(--yellow); }
.xtitle { font-size: clamp(22px, 2vw, 34px); font-weight: 700; background: #fff; border: 4px solid var(--ink); border-radius: 999px; padding: 6px 22px; }
.lnum { font-size: min(20vh, 9vw); font-weight: 700; line-height: 1; }
.lpath { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 90%; align-items: center; }
.lpath i { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); }
.flag { width: 30px; height: 36px; border-left: 5px solid var(--ink); position: relative; }
.flag::after { content: ''; position: absolute; left: 0; top: 0; width: 24px; height: 18px; background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 12px 9px; border: 3px solid var(--ink); }

/* =========================================================================
   Worksheet
   ========================================================================= */
.ws {
  --cw: 56px; --ch: 74px;
  position: absolute; left: 0; top: 0; display: grid; transform-origin: 0 0;
  font-size: 52px; font-weight: 700; color: var(--ink); line-height: 1;
  transition: transform .35s ease;
}
.mini .ws, .pv-holder .ws { transition: none; }
.ws .cell { display: flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 14px; }
.ws .op { color: var(--pink); }
.ws .small-op { font-size: 40px; }
.ws .qmark { color: #b6b0cc; }
.ws .title { font-size: 40px; justify-content: flex-start; padding-left: 8px; }
.ws .title small { font-size: 26px; color: #6f6a86; margin-left: 10px; }
.ws .tag { font-size: 22px; color: #6f6a86; justify-content: flex-start; padding-left: 12px; }
.ws .label { font-size: 34px; justify-content: flex-end; padding-right: 12px; }
.ws .hdr { font-size: 38px; }
.ws .hdr-a { color: #2b7de9; }
.ws .hdr-b { color: #e04a2f; }
.ws .rlabel { color: var(--purple); }
.ws .bring { color: var(--purple); }
.ws .spacer { pointer-events: none; }

.slot { display: grid; grid-auto-flow: column; grid-auto-columns: var(--cw); position: relative; color: var(--answer); }
.slot .sc {
  margin: 6px 4px; border: 3px dashed #c3bdd8; border-radius: 12px; background: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
}
.slot.free {
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  margin: 6px 4px; border: 3px dashed #c3bdd8; border-radius: 14px; background: rgba(255,255,255,.7);
}
.slot.active .sc, .slot.free.active {
  border: 4px solid var(--ink); background: var(--yellow); color: var(--ink);
  box-shadow: 0 5px 0 var(--ink); animation: pulse 1.1s ease-in-out infinite;
}
.slot.filled .sc, .slot.revealed .sc, .slot.free.filled, .slot.free.revealed {
  border-color: transparent; background: transparent; box-shadow: none; animation: none;
}
.slot.revealed { color: #ff7b00; }
.slot .sc.blank { visibility: hidden; }
.slot.wrong .sc, .slot.free.wrong { background: #ff9a9a !important; animation: shake .45s; }
.slot.quiet:not(.active):not(.filled):not(.revealed) { visibility: hidden; }
.slot.small { font-size: 30px; color: var(--pink); }
.slot.small .sc, .slot.free.small { margin: 12px 9px 2px; border-width: 3px; }
.ws-holder .ws .title { display: none; }
.slot.free.small-slot { font-size: 36px; }
.gone { display: none !important; }
.pop { animation: pop .4s ease-out; }
.struck { position: relative; color: #b0aac4 !important; }
.struck::after {
  content: ''; position: absolute; left: 14%; right: 14%; top: 48%; height: 5px;
  background: #ff3d6e; border-radius: 3px; transform: rotate(-24deg);
}
.focus { background: rgba(255,210,63,.42); box-shadow: inset 0 0 0 3px #f5a800; border-radius: 14px; }
.slot.focus:not(.filled) .sc { border-color: #f5a800; }

.hline { align-self: start; height: var(--line); margin-top: -3px; background: var(--ink); border-radius: 4px; }
.bracket { border-top: var(--line) solid var(--ink); position: relative; margin-top: 2px; pointer-events: none; }
.bracket::before {
  content: ''; position: absolute; left: calc(-1 * var(--line) / 2); top: calc(-1 * var(--line)); width: calc(var(--cw) * .5); height: calc(100% + 8px);
  border-right: var(--line) solid var(--ink); border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}
.vdiv { border-left: var(--line) solid var(--ink); margin-left: calc(var(--cw) / 2 - 3px); margin-top: 2px; }
.dbox { border: 5px solid var(--ink); border-radius: 14px; background: #fff; margin: 4px; }
.ws .divisor { font-size: 56px; }
.slot.boxcell { border: 5px solid var(--ink) !important; border-radius: 0 !important; margin: 0 0 -5px -5px; background: #fff; font-size: 40px; }
.slot.boxcell.active { background: var(--yellow); box-shadow: none; }
.slot.boxcell.filled, .slot.boxcell.revealed { background: #fff !important; border-color: var(--ink) !important; }
.slot.free.total { font-size: 46px; }
.nline { align-self: center; height: var(--line); background: var(--ink); border-radius: 3px; }
.tick { align-self: center; justify-self: center; width: var(--line); height: 34px; background: var(--ink); border-radius: 3px; }
.ws .mark { font-size: 34px; }
.arc { border: 5px solid var(--blue); border-bottom: none; border-radius: 999px 999px 0 0; margin: 14px 8px 0; }
.slot.free.jump { font-size: 38px; }
.dots {
  border: 4px solid var(--ink); border-radius: 16px; background: #fff; margin: 4px 6px; padding: 10px;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; overflow: hidden;
}
.dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); border: 3px solid var(--ink); transition: opacity .5s; }
.dot.fresh { background: var(--orange); }
.dot.left { background: var(--yellow); }
.dot.moved { opacity: .2; }
.dgroup { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border: 3px solid var(--pink); border-radius: 12px; background: #fff0f5; }
.ws .phdr { font-size: 24px; color: #fff; background: var(--purple); border: 4px solid var(--ink); border-radius: 12px; margin: 8px 10px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }

@keyframes pulse { 50% { transform: translateY(-3px) scale(1.04); } }

/* stack & carry helpers */
.ws .cmark { font-size: 30px; color: var(--pink); align-items: flex-end; padding-bottom: 6px; }
.colfocus { background: rgba(255,210,63,.42); box-shadow: inset 0 0 0 3px #f5a800; border-radius: 12px; }
.slot.active .sc.next { background: #fff; border-style: dashed; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { border-color: transparent; } }

/* number line hops */
.ws .hop { font-size: 34px; color: var(--purple); }
.ws .hop.back { color: #e04a2f; }
.slot.free.markslot { font-size: 30px; margin: 8px 14px; }
.arc.pending { visibility: hidden; }
.brace { border: 4px solid var(--purple); border-bottom: none; border-radius: 16px 16px 0 0; margin: 0 6px 0; pointer-events: none; }
.arc { position: relative; z-index: 1; }
.pplus {
  position: absolute; top: calc(50% + 12px); transform: translateX(-50%); font: 700 22px var(--font); font-style: normal;
  color: #18b45a; white-space: nowrap; pointer-events: none;
}
.seg { position: relative; pointer-events: none; }
.pip {
  position: absolute; top: 50%; width: 5px; height: 20px; margin: -10px 0 0 -2.5px; border-radius: 3px;
  background: #7a7590; cursor: pointer; pointer-events: auto; transition: background .15s, transform .15s;
}
.pip::before { content: ''; position: absolute; inset: -10px -9px; } /* bigger tap target */
.pip:hover { background: var(--green); transform: scaleY(1.3); }
.pmark {
  position: absolute; bottom: 50%; height: 44px; border: 4px solid var(--green); border-bottom: none;
  border-radius: 999px 999px 0 0; pointer-events: none;
}
.pmark b {
  position: absolute; top: -40px; font: 700 26px var(--font); color: #fff; background: var(--green);
  border: 3px solid var(--ink); border-radius: 10px; padding: 0 7px; line-height: 1.25;
}
.pmark b.r { right: 0; transform: translateX(50%); }
.pmark b.l { left: 0; transform: translateX(-50%); }
.hopper {
  position: absolute; bottom: 50%; left: 0; width: 20px; height: 20px; margin-bottom: 2px; border-radius: 50%;
  background: var(--blue); border: 4px solid var(--ink); transform: translate(-50%, 0); z-index: 2;
}

/* base-ten blocks: 13 → 10 + 3 */
.slot.free.split { font-size: 40px; gap: 8px; }
.slot.free.split .plus { color: #7a7590; }
.slot.free.split .ten { display: inline-block; transition: color .8s, transform .8s; }
.slot.free.split .ten.green { color: #18b45a; transform: scale(1.2); }
.flyer { will-change: transform; }
.flytext { display: flex; align-items: center; justify-content: center; font: 700 40px var(--font); color: #18b45a; background: transparent; }
.blk.glow, .dot.glow { box-shadow: 0 0 0 4px #7dffb0, 0 0 14px 4px #3ddc84; background-color: var(--green); }
.blk.wiggle { animation: wiggle .25s ease-in-out infinite; box-shadow: 0 0 0 4px #ffe58a, 0 0 14px 4px var(--yellow); }
@keyframes wiggle { 25% { transform: rotate(-8deg) scale(1.1); } 75% { transform: rotate(8deg) scale(1.1); } }

/* dot groups: rows + group-size slider */
.dots { flex-direction: column; flex-wrap: wrap; align-content: flex-start; column-gap: 8px; }
.dots > .dgroup { align-self: flex-start; }
.drow { display: flex; gap: 5px; padding: 3px 5px; border-radius: 999px; border: 3px solid transparent; align-self: flex-start; }
.drow.full.good { border-color: #18b45a; background: #e2ffec; }
.drow.full.close { border-color: #f5a800; background: #fff6d6; }
.drow.full.bad { border-color: #b6b0cc; }
.drow.short.good, .drow.short.close, .drow.short.bad { border: 3px dashed #ff5d8f; }
.drow.short.good { border-color: #f5a800; }
.drow.ghostrow { border: none; padding: 0 5px; }
.gslider {
  margin: 4px 6px; padding: 6px 12px; border: 4px solid var(--ink); border-radius: 16px; background: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 4px; font-size: 26px; line-height: 1.1;
  transition: opacity .3s, background .3s;
}
.gslider.off { visibility: hidden; }
.gslider[data-mode='good'] { background: #e2ffec; border-color: #18b45a; }
.gslider[data-mode='close'] { background: #fff6d6; }
.gslider[data-mode='bad'] { background: #ffeef3; }
.gs-top { display: flex; align-items: baseline; justify-content: space-between; font-weight: 700; color: #6f6a86; }
.gs-val { font-size: 42px; color: var(--purple); }
.gs-range { width: 100%; accent-color: var(--purple); height: 30px; cursor: pointer; }
.gs-msg { font-size: 18px; line-height: 1; font-weight: 700; color: #4b4663; min-height: 18px; white-space: normal; }
.gslider[data-mode='good'] .gs-msg { color: #138a46; }
.gslider[data-mode='bad'] .gs-msg { color: #d6335e; }
.slot.free.active[data-ghost]:empty::before { content: attr(data-ghost); opacity: .3; color: var(--ink); }

/* base-ten blocks */
.blocks {
  border: 4px solid var(--ink); border-radius: 16px; background: #fff; margin: 4px 6px; padding: 8px;
  display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-end; gap: 4px; overflow: hidden;
}
.brk { flex-basis: 100%; height: 4px; }
.blk { display: inline-block; border: 2.5px solid var(--ink); transition: opacity .5s, transform .5s; position: relative; }
.blk.ba { background-color: var(--blue); }
.blk.bb { background-color: var(--orange); }
.blk.bc { background-color: var(--green); }
.b0 { width: 22px; height: 22px; border-radius: 4px; }
.b1 { width: 18px; height: 80px; border-radius: 3px; background-image: repeating-linear-gradient(to bottom, transparent 0 5.5px, rgba(29,27,46,.45) 5.5px 8px); }
.b2, .b3 { width: 60px; height: 60px; border-radius: 4px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 3.2px, rgba(29,27,46,.35) 3.2px 5px), repeating-linear-gradient(to right, transparent 0 3.2px, rgba(29,27,46,.35) 3.2px 5px); }
.b3 { border-width: 4px; box-shadow: 4px -4px 0 -1px var(--ink); }
.blk.traded, .blk.broken { opacity: .18; transform: scale(.75); }
.blk.taken { opacity: .45; }
.blk.unbuilt { visibility: hidden; }
.blk.spent { opacity: .15; transform: scale(.8); box-shadow: none; }
.takezone { background: #fff6ec; border-color: var(--orange); border-style: dashed; }
.ws .takehdr { background: var(--orange); }
.blk.taken::after {
  content: '✕'; position: absolute; inset: -6px; display: grid; place-items: center;
  font: 700 22px var(--font); color: #ff2d55; -webkit-text-stroke: 1px #fff;
}
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@keyframes pop { 0% { transform: scale(1.6); } 60% { transform: scale(.9); } 100% { transform: none; } }

/* =========================================================================
   Game screen
   ========================================================================= */
.path { flex: 1; position: relative; height: 84px; display: flex; align-items: center; justify-content: space-between; margin: 0 20px; padding: 0 10px; }
.path::before { content: ''; position: absolute; left: 24px; right: 30px; top: 50%; border-top: 7px dotted rgba(29,27,46,.55); }
.stone {
  position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 5px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink); display: grid; place-items: center; font-size: 17px; font-weight: 700;
}
.stone.done { background: var(--yellow); font-size: 0; }
.stone.done::after { content: '★'; font-size: 26px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.stone.now { background: var(--cyan); }
.goal { position: relative; z-index: 1; width: 46px; height: 60px; border-left: 6px solid var(--ink); }
.goal::after { content: ''; position: absolute; left: 0; top: 0; width: 40px; height: 28px; background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 14px 14px; border: 4px solid var(--ink); }
.walker { position: absolute; top: -16px; width: 58px; height: 58px; z-index: 3; pointer-events: none; }
.walker svg { width: 100%; height: 100%; }

.gmain { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(380px, 31vw); gap: 30px; padding: 14px 32px 36px; }
.paper {
  display: flex; flex-direction: column; min-height: 0; padding: 14px 22px; background-color: #fffdf6;
  background-image: radial-gradient(circle, rgba(29,27,46,.13) 1.6px, transparent 1.7px); background-size: 30px 30px;
}
.paper-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prob-title { font-size: 40px; font-weight: 700; }
.prob-title .op { color: var(--pink); }
.prob-title i { font-style: normal; display: inline-block; border-radius: 8px; transition: background .3s, transform .3s; }
.prob-title i.countsrc { background: var(--yellow); box-shadow: 0 0 0 3px var(--ink); transform: scale(1.25); }
.flydigit { font: 700 40px var(--font); color: var(--answer); display: flex; align-items: center; justify-content: center; }
.prob-title .q { color: #b6b0cc; }
.prob-title .ans { color: var(--answer); }
.method-tag { font-size: 22px; font-weight: 700; padding: 6px 18px; border: 4px solid var(--ink); border-radius: 999px; background: var(--yellow); }
.ws-holder { flex: 1; min-height: 0; position: relative; overflow: hidden; }

.side { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.buddy { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; }
.bubble {
  align-self: stretch; position: relative; background: #fff; border: 5px solid var(--ink); border-radius: 26px;
  box-shadow: 0 8px 0 var(--ink); padding: 18px 22px; font-size: clamp(20px, 1.6vw, 28px); line-height: 1.35;
  margin-bottom: 26px; flex: none; overflow: visible;
}
/* speech-bubble tail: dark triangle + matching fill triangle laid over the bubble's bottom edge & shadow */
.bubble::before, .bubble::after { content: ''; position: absolute; pointer-events: none; }
.bubble::before {
  right: 48px; bottom: -38px; width: 44px; height: 44px; background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 78% 100%);
}
.bubble::after {
  right: 56px; bottom: -24px; width: 29px; height: 30px; background: inherit;
  clip-path: polygon(0 0, 100% 0, 80% 100%);
}
.bubble b { color: var(--answer); }
.bubble small { font-size: .75em; color: #6f6a86; }
.bubble.oops { background: #ffe0e6; }
.bubble.win { background: #d9ffe8; }
.bubble.auto { background: #e2f1ff; }
.mascot { width: 140px; height: 140px; margin: -18px 10px -8px 0; animation: bob 2.6s ease-in-out infinite; }
.buddy-row { display: flex; align-items: center; justify-content: flex-end; gap: 16px; align-self: stretch; }
.contbtn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-size: 28px; font-weight: 700; cursor: pointer;
  color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; background: var(--green);
  border: 5px solid var(--ink); border-radius: 22px; box-shadow: 0 7px 0 var(--ink);
}
.contbtn svg { width: 26px; height: 26px; fill: #fff; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.contbtn:hover { background: #5ae79a; }
.contbtn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.contbtn.nudge { animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge {
  0%, 60%, 100% { transform: none; }
  65% { transform: rotate(-8deg) scale(1.08); } 72% { transform: rotate(8deg) scale(1.08); }
  79% { transform: rotate(-6deg) scale(1.05); } 86% { transform: rotate(5deg); } 93% { transform: rotate(-2deg); }
}
.mascot.think { animation: think 1.6s ease-in-out infinite; }
@keyframes think { 50% { transform: rotate(-6deg) translateY(-4px); } }
.mascot svg { width: 100%; height: 100%; overflow: visible; }
.m-mouth-open { display: none; }
.mascot.happy .m-mouth, .mascot.cheer .m-mouth, .walker .m-mouth { display: none; }
.mascot.happy .m-mouth-open, .mascot.cheer .m-mouth-open, .walker .m-mouth-open { display: inline; }
.mascot.happy { animation: hop .5s ease-out; }
.mascot.cheer { animation: cheer .55s ease-in-out infinite; }
.mascot.oops { animation: shake .45s; }
.m-leaves { transform-origin: 60px 38px; animation: sway 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes hop { 40% { transform: translateY(-26px) rotate(-6deg); } }
@keyframes cheer { 50% { transform: translateY(-30px) rotate(6deg) scale(1.05); } }
@keyframes sway { 50% { transform: rotate(8deg); } }

.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; background-color: var(--purple); flex: none; }
.key {
  height: min(9vh, 86px); font-size: min(5vh, 46px); font-weight: 700; cursor: pointer; background: #fff;
  border: 5px solid var(--ink); border-radius: 20px; box-shadow: 0 7px 0 var(--ink);
  display: grid; place-items: center; transition: transform .06s, box-shadow .06s;
}
.key:hover { background: #fff7d1; }
.key:active, .key.down { transform: translateY(6px); box-shadow: 0 1px 0 var(--ink); }
.key svg { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.k-back { background: var(--pink); }
.k-back:hover { background: #ff7aa3; }
.k-enter { background: var(--green); }
.k-enter:hover { background: #5ae79a; }

/* ---------- celebration ---------- */
.celebrate { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; background: rgba(255,255,255,.25); }
.banner { padding: 26px 64px 30px; text-align: center; background-color: var(--yellow); animation: bannerIn .7s cubic-bezier(.2,1.5,.4,1) both; }
.bword { font-size: clamp(56px, 7vw, 110px); font-weight: 700; line-height: 1; -webkit-text-stroke-width: 12px; }
.beq { margin-top: 10px; font-size: clamp(30px, 3vw, 50px); font-weight: 700; }
.beq b { color: var(--answer); }
.trumpet { position: absolute; width: min(240px, 17vw); }
.trumpet svg { width: 100%; display: block; }
.trumpet.tl { left: 4%; animation: tInL .7s var(--d) cubic-bezier(.2,1.3,.4,1) both, toot .3s calc(var(--d) + .7s) 7 alternate ease-in-out; }
.trumpet.tr { right: 4%; animation: tInR .7s var(--d) cubic-bezier(.2,1.3,.4,1) both, toot .3s calc(var(--d) + .7s) 7 alternate ease-in-out; }
.trumpet.tr svg { transform: scaleX(-1); }
@keyframes bannerIn { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }
@keyframes tInL { from { translate: -60vw 0; rotate: -40deg; } }
@keyframes tInR { from { translate: 60vw 0; rotate: 40deg; } }
@keyframes toot { to { scale: 1.12; rotate: -6deg; } }

#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ---------- victory ---------- */
#victory { align-items: center; justify-content: center; }
.victory-card { padding: 40px 70px 46px; text-align: center; background-color: #fff; animation: bannerIn .7s cubic-bezier(.2,1.5,.4,1) both; }
.victory-card h2 { font-size: 46px; margin: 10px 0 8px; }
.victory-card p { font-size: 26px; margin: 0 0 28px; color: #5d5875; }
.stars { display: flex; justify-content: center; gap: 18px; }
.star { font-size: 120px; line-height: 1; color: #e5e1ee; -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; animation: starIn .6s calc(var(--i) * .25s + .3s) both; }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.15) rotate(6deg); } }
.star.on { color: var(--yellow); }
.vbtns { display: flex; gap: 24px; justify-content: center; }
.bigbtn {
  font-size: 36px; font-weight: 700; padding: 14px 46px; border: var(--line) solid var(--ink); border-radius: 26px;
  box-shadow: 0 8px 0 var(--ink); cursor: pointer; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
}
.bigbtn:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }

/* =========================================================================
   Big Sapling Top Navigation Header & Rotate Overlay
   ========================================================================= */
:root {
  --hud-height: 52px;
}
.screen {
  position: fixed;
  top: var(--hud-height, 52px);
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}
.game-hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.25s ease;
}
.game-hud.collapsed {
  transform: translateY(-115%);
  pointer-events: none;
  box-shadow: none;
}
.game-hud .hud-left,
.game-hud .hud-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.game-hud .hud-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(30, 41, 59, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #f8fafc;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.game-hud .hud-btn:hover {
  background: #15803d;
  border-color: #86efac;
  color: #ffffff;
  transform: translateY(-1px);
}
.game-hud .hud-btn:active {
  transform: scale(0.96);
}
.hud-collapse-toggle {
  display: none;
  padding: 0.35rem 0.65rem;
}

/* Floating Pills when HUD is Collapsed */
.hud-floating-toggle {
  display: none;
  position: fixed;
  top: 0.45rem;
  left: 0.75rem;
  z-index: 999;
  background: rgba(30, 41, 59, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  padding: 0.32rem 0.8rem;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  color: #f8fafc;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
  align-items: center;
  gap: 0.35rem;
  user-select: none;
  -webkit-user-select: none;
}
.hud-floating-toggle:hover {
  background: #15803d;
  border-color: #86efac;
}
.hud-floating-right {
  left: auto;
  right: 0.75rem;
}

@media (max-width: 768px), (max-height: 540px) {
  .hud-collapse-toggle {
    display: inline-flex;
  }
  .game-hud .btn-text-full {
    display: none;
  }
  .game-hud {
    padding: 0 0.85rem;
  }
}
.game-hud .hud-title-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}
.game-hud .hud-title-badge .game-tag {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #86efac;
  font-weight: 800;
}
.game-hud .hud-title-badge .game-prompt {
  font-size: 0.95rem;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Rotate Prompt Overlay (Touch Devices in Portrait) */
.rotate-prompt-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
}
@media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse) {
  .rotate-prompt-overlay {
    display: flex !important;
  }
}
.rotate-card {
  background: #1e293b;
  border: 2px solid #334155;
  border-radius: 1.5rem;
  padding: 2.25rem 2rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  animation: rotateCardFadeIn 0.3s ease-out;
}
@keyframes rotateCardFadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.rotate-phone-anim {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.rotate-phone-anim svg {
  animation: phoneTilt 2.2s infinite ease-in-out;
  transform-origin: center center;
}
@keyframes phoneTilt {
  0%, 15% { transform: rotate(0deg); }
  45%, 70% { transform: rotate(-90deg); }
  90%, 100% { transform: rotate(0deg); }
}
.rotate-title {
  color: #ffffff;
  font-family: var(--font);
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 0.75rem 0;
  line-height: 1.25;
}
.rotate-desc {
  color: #cbd5e1;
  font-family: var(--font);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}
.rotate-desc em {
  color: #86efac;
  font-style: normal;
  font-weight: 700;
}

@media (max-height: 540px) {
  .topbar {
    min-height: 44px;
    padding: 4px 16px 2px;
    gap: 8px;
  }
  .iconbtn {
    width: 38px;
    height: 38px;
    border-width: 3px;
    box-shadow: 0 3px 0 var(--ink);
  }
  .iconbtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--ink);
  }
  .iconbtn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--ink);
  }
  .iconbtn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.8;
  }
  .topbar .logo {
    display: none;
  }
  .game-hud.collapsed ~ .screen .topbar {
    padding-left: 135px;
    padding-right: 75px;
  }

  .chips {
    min-height: 36px;
    gap: 6px;
  }
  .chip {
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 14px;
    border-width: 2.5px;
    box-shadow: 0 2.5px 0 var(--ink);
    gap: 5px;
  }
  .chip .csym {
    font-size: 22px;
    -webkit-text-stroke-width: 3px;
  }
  .chip .csym.sm {
    font-size: 16px;
  }
  .dicon i {
    width: 10px;
    height: 16px;
    border-width: 2px;
  }

  .prompt {
    font-size: clamp(15px, 4vh, 20px);
    -webkit-text-stroke-width: 3.5px;
    margin: 2px 0 0;
    line-height: 1.1;
  }
  .stage {
    padding: 4px 3vw 8px;
  }
  .grid4 {
    gap: 1.6vh 2.5vw;
    width: min(100%, 140vh);
  }
  .card {
    border-width: 3.5px;
    border-radius: 16px;
    box-shadow: 0 4px 0 var(--ink);
  }
  .pick:hover {
    transform: translateY(-3px) rotate(-1deg);
    box-shadow: 0 7px 0 var(--ink);
  }
  .pick:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--ink);
  }
  .opcard .sym {
    font-size: min(17vh, 10vw);
    -webkit-text-stroke-width: 6px;
  }

  /* Digits & Method cards compact layout */
  .digits-layout {
    gap: 1.5vw;
  }
  .dcards {
    gap: 1.5vw;
  }
  .dcard {
    gap: 1.5vh;
    padding: 6px;
  }
  .dlabel {
    font-size: 14px;
    gap: 3px;
  }
  .dlabel .dicon i {
    width: 14px;
    height: 20px;
    border-width: 2px;
  }
  .side-layout {
    gap: 1.5vw;
    grid-template-columns: 0.95fr 2fr;
  }
  .preview {
    padding: 8px;
  }
  .pv-cap {
    font-size: 14px;
    padding: 2px 12px;
    border-width: 2.5px;
  }
  .ocards {
    gap: 1.5vw;
  }
  .mcard {
    padding: 6px 10px;
    gap: 4px;
    border-radius: 14px;
  }
  .mname {
    font-size: clamp(15px, 2.4vh, 20px);
    -webkit-text-stroke: 3.5px var(--ink);
  }
  .mblurb {
    font-size: 12px;
    border-width: 2px;
    border-radius: 8px;
    padding: 2px 6px;
  }
  .xcard, .lcard {
    padding: 6px;
    gap: 1vh;
  }
  .xex {
    font-size: clamp(20px, 4.5vh, 32px);
    -webkit-text-stroke-width: 4px;
  }
  .xtitle {
    font-size: 14px;
    padding: 3px 12px;
    border-width: 2.5px;
  }
  .lnum {
    font-size: min(13vh, 5.5vw);
    -webkit-text-stroke-width: 4px;
  }
  .lpath {
    gap: 4px;
  }
  .lpath i {
    width: 13px;
    height: 13px;
    border-width: 2px;
  }
  .flag {
    width: 20px;
    height: 24px;
    border-left-width: 3.5px;
  }
  .flag::after {
    width: 16px;
    height: 12px;
    border-width: 2px;
    background-size: 8px 6px;
  }

  /* Gameplay Screen Compact */
  .path {
    height: 40px;
    margin: 0 10px;
    padding: 0 4px;
  }
  .path::before {
    border-top-width: 4px;
  }
  .stone {
    width: 28px;
    height: 28px;
    font-size: 12px;
    border-width: 3px;
    box-shadow: 0 2.5px 0 var(--ink);
  }
  .stone.done::after {
    font-size: 16px;
    -webkit-text-stroke-width: 2.5px;
  }
  .goal {
    width: 28px;
    height: 36px;
    border-left-width: 3px;
  }
  .goal::after {
    width: 24px;
    height: 16px;
    border-width: 2.5px;
  }
  .walker {
    top: -8px;
    width: 34px;
    height: 34px;
  }
  .gmain {
    gap: 10px;
    padding: 4px 12px 8px;
    grid-template-columns: 1fr minmax(240px, 32vw);
  }
  .paper {
    padding: 6px 12px;
    border-radius: 16px;
  }
  .prob-title {
    font-size: 22px;
  }
  .method-tag {
    font-size: 14px;
    padding: 2px 10px;
    border-width: 2.5px;
  }
  .side {
    gap: 6px;
  }
  .bubble {
    padding: 6px 10px;
    font-size: 14px;
    border-width: 3px;
    border-radius: 14px;
    margin-bottom: 8px;
    box-shadow: 0 3px 0 var(--ink);
  }
  .bubble::before {
    right: 28px;
    bottom: -20px;
    width: 22px;
    height: 22px;
  }
  .bubble::after {
    right: 33px;
    bottom: -12px;
    width: 14px;
    height: 15px;
  }
  .mascot {
    width: 60px;
    height: 60px;
    margin: -8px 4px -2px 0;
  }
  .contbtn {
    padding: 4px 12px;
    font-size: 16px;
    border-width: 3px;
    border-radius: 12px;
    box-shadow: 0 3px 0 var(--ink);
  }
  .contbtn svg {
    width: 16px;
    height: 16px;
  }
  .numpad {
    gap: 5px;
    padding: 6px;
    border-radius: 16px;
  }
  .key {
    height: min(7.5vh, 44px);
    font-size: min(4vh, 22px);
    border-width: 2.5px;
    border-radius: 10px;
    box-shadow: 0 3px 0 var(--ink);
  }
  .key svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
  }
  .victory-card {
    padding: 16px 24px;
    max-width: 480px;
  }
  .victory-card h2 {
    font-size: 24px;
  }
  .vbtns .bigbtn {
    padding: 8px 24px;
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}