/* Trading Post — ungrouping for subtraction. SABE Learn */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Registering these as lengths is what lets the board animate open: a plain
   custom property cannot be interpolated, and transitioning the track *list*
   (grid-template-columns) leaves the grid stuck mid-way whenever the animation
   clock stalls.  Interpolating one length each is well defined and safe.
   Browsers without @property simply skip the animation — see relayout(). */
@property --ctrack { syntax: '<length>'; inherits: true; initial-value: 46px; }
@property --sha    { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --shb    { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root{
    /* SABE Learn tokens — matches css/style.css */
    --bg:#F7F6F2;
    --bg-alt:#EEECEA;
    --paper:#FFFFFF;
    --bg-purple:#EDEAFF;
    --bg-yellow:#FFF9E0;
    --bg-teal:#E2F8F3;
    --bg-coral:#FFEEEA;

    --ink:#0B0F1A;
    --ink-2:#374151;
    --ink-3:#71717A;

    --purple:#5533E8;
    --purple-dark:#3D1FC9;
    --yellow:#F5C200;
    --yellow-dark:#C9A000;
    --yellow-ink:#5C4600;
    --coral:#E84530;
    --coral-dark:#C43320;
    --teal:#009E82;
    --teal-dark:#007A65;

    --border:#DDDBD4;
    --border-2:#C8C5BC;

    --shadow-xs:0 1px 2px rgba(0,0,0,.06);
    --shadow-sm:0 2px 6px rgba(0,0,0,.08);
    --shadow:0 4px 14px rgba(0,0,0,.09);
    --shadow-lg:0 8px 24px rgba(0,0,0,.10);

    --r-xs:2px; --r:6px; --r-lg:10px; --r-xl:14px;
    --t:.2s cubic-bezier(.4,0,.2,1);

    /* manipulative sizing — set by fitBoard() */
    --u:14px;      /* one unit square */
    --gap:3px;     /* space between blocks */
    --ds:20px;     /* disc diameter */
    --rw:153px;    /* a full row: exactly ten units wide */
    --cw:171px;    /* a column showing its blocks */
    --cwn:calc(clamp(1.5rem,4.2vw,2.375rem) * 1.2);  /* a bare digit column */
    --gut:46px;    /* left gutter holding the minus sign */
    --ease:cubic-bezier(.4,0,.2,1);
    --open:.56s;   /* how long the block section takes to open */
}

[hidden]{display:none!important}

html,body{
    height:100%;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color:transparent;
}
body{overflow-y:auto; overflow-x:hidden;}

.game-viewport{height:100dvh;min-height:100dvh;display:flex;align-items:stretch;justify-content:center;
    width:100%;background:var(--bg);position:relative;overflow:hidden}

.back-link{position:fixed;top:12px;left:16px;z-index:300;color:var(--ink-3);font-size:.8125rem;
    font-weight:700;text-decoration:none;letter-spacing:-.01em;transition:var(--t)}
.back-link:hover{color:var(--purple)}

#app{
    position:relative;z-index:2;flex:1 1 auto;
    width:100%;max-width:1200px;height:100%;min-height:0;
    display:flex;flex-direction:column;
    padding:40px 16px 0;
    touch-action:none;
}

/* ---------- HUD ---------- */
#hud{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.hud-tier{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--teal);background:var(--bg-teal);
    padding:4px 10px;border-radius:var(--r-xs)}
.hud-right{display:flex;gap:16px;font-size:.75rem;font-weight:600;color:var(--ink-3);letter-spacing:-.01em}
.hud-right b{color:var(--ink);font-size:.9375rem;font-weight:800}
#dots{display:flex;gap:6px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--border);transition:var(--t)}
.dot.good{background:var(--teal)}
.dot.help{background:var(--yellow)}
.dot.now{background:var(--purple);transform:scale(1.2)}

/* ---------- PROMPT ---------- */
#prompt{text-align:center;margin:2px 0 10px;min-height:46px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
#promptText{font-size:clamp(1rem,2.5vw,1.375rem);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
#promptText em{font-style:normal;color:var(--purple)}
#promptSub{font-size:.8125rem;color:var(--ink-2);font-weight:600;min-height:1em;letter-spacing:-.01em}

/* word problems: the only place an equation runs horizontally */
#story{max-width:680px;margin:0 auto 10px;text-align:center;background:var(--bg-yellow);
    border:2px solid #F0E4B0;border-radius:var(--r-lg);padding:14px 20px}
#story .st-text{font-size:.9375rem;line-height:1.55;color:var(--ink-2);font-weight:600}
#story .st-eq{margin-top:8px;font-size:1.25rem;font-weight:800;letter-spacing:-.01em;
    color:var(--yellow-ink);font-variant-numeric:tabular-nums}

/* ---------- BOARD ---------- */
/* No justify-content here: centering an overflowing flex item that way makes its
   leading edge unreachable. `margin:auto` on #board centers and still scrolls. */
#boardWrap{flex:1 1 0;min-height:0;display:flex;align-items:center;overflow:auto;padding:4px 0 12px}
#board{margin:auto;flex:0 0 auto;background:var(--paper);border:2px solid var(--border);
    border-radius:var(--r-xl);padding:18px 20px 22px;box-shadow:var(--shadow-sm);
    --ctrack:var(--cwn);
    transition:--ctrack var(--open) var(--ease), --sha var(--open) var(--ease),
               --shb var(--open) var(--ease), padding var(--open) var(--ease)}
#board.blocks{--ctrack:var(--cw)}
#board.noanim{transition:none}
.brow{display:grid;grid-template-columns:var(--gut) repeat(var(--D),var(--ctrack));align-items:end}

#rowPlace .ph{font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-3);text-align:center;padding-bottom:7px;line-height:1.2}

/* shelves: teal (top number) above, coral (being taken away) below a dashed rule */
#rowShelf .colcell{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
    gap:5px;padding:0 9px 8px;position:relative;border-radius:var(--r);overflow:hidden}
#rowShelf .colcell.dropok{background:var(--bg-teal)}
#rowShelf .colcell.hover{background:var(--bg-teal);box-shadow:inset 0 0 0 2px var(--teal)}
/* every row is exactly ten units wide, and blocks pack from the left so the
   count in a column can be read at a glance */
.shelf{width:var(--rw);display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--gap);min-height:2px}
.shelf.a{align-content:flex-end}
.shelf.b{align-content:flex-start;border-top:2px dashed #F2BDB2;padding-top:6px;margin-top:2px}
.shelf.b.empty{border-top-color:transparent}
/* a column whose blocks have not been summoned takes up no room */
#rowShelf .colcell.off{padding-bottom:0}
.colcell.off .shelf{display:none}

/* ---------- BLOCKS ---------- */
.blk{flex:0 0 auto;position:relative;border-radius:var(--r-xs);cursor:grab;touch-action:none;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);transition:transform .12s var(--t)}
.blk:active{cursor:grabbing}
.blk.sel{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),0 0 0 3px var(--yellow);
    transform:translateY(-3px);z-index:5}
.blk.arriving{opacity:0}
.blk.dragging{position:fixed;z-index:500;pointer-events:none;
    transform:translate(-50%,-50%) scale(1.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),var(--shadow-lg)}

.blk.a{background:var(--teal)}
.blk.b{background:var(--coral)}

/* ones — one unit square */
.blk.p0{width:var(--u);height:var(--u)}

/* tens — a rod of ten: exactly as wide as ten unit squares with their gaps, so a
   rod and a row of ten ones line up edge to edge */
.blk.p1{width:var(--rw);height:var(--u)}
.blk.a.p1{background-image:repeating-linear-gradient(90deg,
    transparent 0,transparent var(--u),
    rgba(0,44,36,.42) var(--u),rgba(0,44,36,.42) calc(var(--u) + var(--gap)))}
.blk.b.p1{background-image:repeating-linear-gradient(90deg,
    transparent 0,transparent var(--u),
    rgba(74,12,4,.38) var(--u),rgba(74,12,4,.38) calc(var(--u) + var(--gap)))}

/* hundreds — a flat, ten by ten */
.blk.p2{width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);border-radius:var(--r-xs)}
.blk.a.p2{background-image:
    repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--u)*.32 - 1px),rgba(0,44,36,.38) calc(var(--u)*.32 - 1px),rgba(0,44,36,.38) calc(var(--u)*.32)),
    repeating-linear-gradient(0deg,transparent 0,transparent calc(var(--u)*.32 - 1px),rgba(0,44,36,.38) calc(var(--u)*.32 - 1px),rgba(0,44,36,.38) calc(var(--u)*.32))}
.blk.b.p2{background-image:
    repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--u)*.32 - 1px),rgba(74,12,4,.34) calc(var(--u)*.32 - 1px),rgba(74,12,4,.34) calc(var(--u)*.32)),
    repeating-linear-gradient(0deg,transparent 0,transparent calc(var(--u)*.32 - 1px),rgba(74,12,4,.34) calc(var(--u)*.32 - 1px),rgba(74,12,4,.34) calc(var(--u)*.32))}

/* discs — the same move, carried to any magnitude */
.blk.disc{width:var(--ds);height:var(--ds);border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:calc(var(--ds)*.40);font-weight:800;letter-spacing:-.04em;
    line-height:1;color:#fff;overflow:visible}

/* ---------- WRITTEN PROBLEM ---------- */
.cell{display:flex;align-items:flex-end;justify-content:center;position:relative;
    font-size:clamp(1.5rem,4.2vw,2.375rem);font-weight:800;line-height:1;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums}
#rowTop{padding-top:calc(var(--u)*3.2);margin-top:4px}
/* the place headers belong to the manipulative view; without blocks they are
   both unnecessary and too wide for a tight digit column */
#board:not(.blocks) #rowPlace{display:none}
/* nothing summoned and nothing written yet: hold no room above the digits for
   rewrites either, so it reads like a problem copied off a worksheet */
#board.bare #rowTop{padding-top:2px;margin-top:0}
#board.bare{padding:22px 24px}
#rowTop .cell{padding-bottom:5px;cursor:default}
/* tapping a top digit reveals that place's blocks — a short underline under the
   digit itself, not the column, so it cannot be read as part of the notation */
#rowTop .cell.pokable{cursor:pointer}
#rowTop .cell.pokable .dig{box-shadow:0 4px 0 -2px var(--bg-purple)}
#rowTop .cell.pokable:hover .dig{box-shadow:0 4px 0 -2px var(--purple)}
#rowBot .cell{padding:8px 0 10px}
.minus{grid-column:1;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 12px 10px 0;
    font-size:clamp(1.5rem,4.2vw,2.375rem);font-weight:800;color:var(--coral)}
.dig{color:var(--ink)}
.dig.struck{color:var(--ink-3);opacity:.55}
.dig.struck::after{content:'';position:absolute;left:-16%;right:-16%;top:52%;height:3px;
    background:var(--coral);transform:rotate(-16deg);border-radius:2px}
#rowTop .cell.pokable:hover .dig{color:var(--purple)}
#rowBot .dig{color:var(--coral)}

/* Commas hang off the digit itself so every row shares one baseline. They use
   ::before because ::after is already the strike-through on a traded digit. */
.dig,.abox{position:relative}
.cell.hascomma .dig::before,
#rowAns .cell.hascomma .abox::before{content:',';position:absolute;left:100%;bottom:0;
    padding-left:.05em;color:var(--ink-3);font-weight:700}
#rowAns .cell.hascomma .abox::before{bottom:.14em}
.cell.hascomma .dig:empty::before{content:none}

/* the stack of crossed-out rewrites above a digit */
.rw{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column-reverse;align-items:center;gap:2px;pointer-events:none}
.rwv{font-size:.46em;font-weight:800;color:var(--teal);line-height:1.05;position:relative;padding:0 2px}
.rwv.struck{color:var(--ink-3);opacity:.6}
.rwv.struck::after{content:'';position:absolute;left:-10%;right:-10%;top:52%;height:2px;
    background:var(--coral);transform:rotate(-16deg);border-radius:2px}
.rwbox{min-width:1.6em;height:1.2em;font-size:.5em;border:2px dashed var(--yellow-dark);
    border-radius:var(--r);display:flex;align-items:center;justify-content:center;
    color:var(--yellow-ink);font-weight:800;background:var(--bg-yellow);padding:0 4px;
    animation:pulseBox 1.6s ease-in-out infinite}
@keyframes pulseBox{0%,100%{box-shadow:0 0 0 0 rgba(245,194,0,.45)}50%{box-shadow:0 0 0 7px rgba(245,194,0,0)}}
.rwbox.bad{animation:shake .38s;border-color:var(--coral);color:var(--coral);background:var(--bg-coral)}

/* answer line */
.eqline{grid-column:1 / -1;height:3px;border-radius:2px;background:var(--ink);margin:4px 0 10px}
#rowAns .cell{padding-bottom:4px}
.abox{min-width:1.15em;height:1.3em;border:2px dashed var(--border-2);border-radius:var(--r);
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
    background:var(--bg);transition:var(--t);padding:0 .12em}
.abox:hover{border-color:var(--ink-3)}
/* right to left: a column stays shut until everything to its right is done */
.abox.locked{opacity:.4;cursor:not-allowed;border-style:dotted}
.abox.locked:hover{border-color:var(--border-2)}
.abox.on{border-style:solid;border-color:var(--purple);background:var(--bg-purple);
    color:var(--purple);animation:pulseFocus 1.6s ease-in-out infinite}
@keyframes pulseFocus{0%,100%{box-shadow:0 0 0 0 rgba(85,51,232,.35)}50%{box-shadow:0 0 0 7px rgba(85,51,232,0)}}
.abox.done{border-style:solid;border-color:var(--teal);background:var(--bg-teal);color:var(--teal-dark);
    cursor:default;animation:none;opacity:1}
.abox.bad{animation:shake .38s;border-color:var(--coral);color:var(--coral);background:var(--bg-coral)}

/* pointing hint */
.hintpulse{animation:hintPop 1.05s ease-in-out 2}
@keyframes hintPop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.colcell.hintzone{animation:zoneGlow 1.05s ease-in-out 2}
@keyframes zoneGlow{0%,100%{box-shadow:inset 0 0 0 0 rgba(245,194,0,0)}
    50%{box-shadow:inset 0 0 0 3px var(--yellow)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}
    45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}

/* ---------- KEYPAD + TOOLS ---------- */
#deck{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
    padding:4px 0 18px;flex:0 0 auto}
#pad{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.key{width:clamp(42px,7.2vw,54px);height:clamp(38px,6vh,46px);border-radius:var(--r);
    border:2px solid var(--border);background:var(--paper);color:var(--ink);font-family:inherit;
    font-size:1.0625rem;font-weight:800;cursor:pointer;transition:var(--t);box-shadow:var(--shadow-xs)}
.key:hover{border-color:var(--purple);color:var(--purple)}
.key:active{transform:translateY(1px)}
.key.wide{font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.key.ok{color:var(--teal);border-color:#B7E6DB}
.key.ok:hover{border-color:var(--teal);color:var(--teal-dark)}
#pad.idle{opacity:.45;pointer-events:none}
#tools{display:flex;flex-direction:column;gap:8px}
#tools .tool{min-width:112px;text-align:center}
.tool{padding:10px 18px;border-radius:var(--r);border:2px solid var(--border);background:var(--paper);
    color:var(--ink-2);font-family:inherit;font-size:.8125rem;font-weight:700;letter-spacing:-.01em;
    cursor:pointer;transition:var(--t);box-shadow:var(--shadow-xs)}
.tool:hover{border-color:var(--purple);color:var(--purple)}

/* ---------- THE NUDGE ----------
   A silent demonstration that a red block can be dragged onto a blue one: a
   translucent copy of the block makes the move under a fingertip ring.  No
   words, and it stops for good the first time the student does it themselves. */
.nudge{opacity:.78}
.nudge-ring{position:fixed;pointer-events:none;border-radius:50%;
    border:2.5px solid var(--purple);background:rgba(85,51,232,.16);
    box-shadow:0 0 0 7px rgba(85,51,232,.09)}
.blk.nudge-hit{animation:nudgeHit .42s ease-out}
@keyframes nudgeHit{0%{transform:scale(1)}42%{transform:scale(1.24)}100%{transform:scale(1)}}

/* ---------- FX LAYER (break animation) ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:600}
#fx .blk{position:fixed;cursor:default;transform-origin:center}
#fx .cracking{animation:crack .2s ease-in-out}
@keyframes crack{0%{transform:scale(1)}35%{transform:scale(1.16) rotate(-2.5deg)}
    70%{transform:scale(1.06) rotate(2deg)}100%{transform:scale(1)}}
.spark{position:fixed;width:6px;height:6px;border-radius:50%;background:var(--yellow)}

/* ---------- OVERLAYS ---------- */
.overlay{position:fixed;inset:0;z-index:700;display:flex;align-items:center;justify-content:center;
    padding:24px;background:rgba(11,15,26,.55);overflow-y:auto}
.panel{width:100%;max-width:540px;text-align:center;background:var(--paper);
    border:2px solid var(--border);border-radius:var(--r-xl);padding:36px 28px;
    box-shadow:var(--shadow-lg);margin:auto}
.panel h1{font-size:clamp(1.9rem,6vw,2.75rem);font-weight:800;letter-spacing:-.02em;
    line-height:1.1;margin-bottom:12px;color:var(--ink)}
.panel h1 span{color:var(--purple)}
.panel p{font-size:.9375rem;color:var(--ink-2);line-height:1.6;margin-bottom:22px}
.tiers{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;text-align:left}
.tier{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-lg);
    border:2px solid var(--border);background:var(--paper);cursor:pointer;transition:var(--t)}
.tier:hover{border-color:var(--purple);background:var(--bg-purple);transform:translateY(-1px)}
.tier.lock{opacity:.45;cursor:not-allowed}
.tier.lock:hover{border-color:var(--border);background:var(--paper);transform:none}
.tier .n{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--bg-purple);
    color:var(--purple);font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.tier .tx{flex:1 1 auto}
.tier .tt{font-size:.9375rem;font-weight:800;letter-spacing:-.01em}
.tier .tb{font-size:.75rem;color:var(--ink-3);font-weight:500}
.tier .tk{font-size:.6875rem;color:var(--ink-3);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 30px;
    border-radius:var(--r);border:2px solid var(--purple);cursor:pointer;background:var(--purple);
    color:#fff;font-family:inherit;font-size:.9375rem;font-weight:700;letter-spacing:-.01em;
    line-height:1;transition:var(--t)}
.btn:hover{background:var(--purple-dark);border-color:var(--purple-dark);
    transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.ghost{background:var(--paper);border-color:var(--border);color:var(--ink-2);
    padding:11px 20px;font-size:.875rem}
.btn.ghost:hover{border-color:var(--border-2);color:var(--ink);box-shadow:var(--shadow-sm)}
.end-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px}
.end-actions .btn:not(.ghost){flex-basis:100%;margin-bottom:6px}
.stars{font-size:2rem;letter-spacing:6px;color:var(--yellow);margin-bottom:8px}
.big-score{font-size:3.25rem;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.03em}

/* ---------- TEACHER GUIDE ---------- */
.tg-section{background:var(--bg);border-top:3px solid var(--border);padding:56px 24px 64px;
    font-family:'Inter',sans-serif;color:var(--ink);line-height:1.6}
.tg-inner{max-width:960px;margin:0 auto}
.tg-eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--teal);margin:0 0 8px;display:block}
.tg-heading{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin:0 0 10px;letter-spacing:-.02em}
.tg-intro{font-size:1rem;color:var(--ink-2);max-width:680px;margin:0 0 32px;line-height:1.7}
.tg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:36px}
.tg-card{background:var(--paper);border:2px solid var(--border);border-radius:var(--r-lg);padding:22px}
.tg-card h3{font-size:.9375rem;font-weight:700;margin:0 0 12px}
.tg-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.tg-card li{font-size:.875rem;color:var(--ink-2);padding-left:18px;position:relative;line-height:1.55}
.tg-card li::before{content:'→';position:absolute;left:0;color:var(--teal);font-size:.75rem;top:3px}
.tg-std{font-weight:700;color:var(--purple)}
.tg-faq{border-top:2px solid var(--border);padding-top:24px;display:flex;flex-direction:column;gap:10px}
.tg-faq details{border:2px solid var(--border);border-radius:var(--r);padding:14px 18px;background:var(--paper)}
.tg-faq summary{font-weight:700;font-size:.9375rem;cursor:pointer;list-style:none;color:var(--ink)}
.tg-faq summary::-webkit-details-marker{display:none}
.tg-faq summary::before{content:'+ ';color:var(--teal)}
.tg-faq details[open] summary::before{content:'− '}
.tg-faq details p{margin:10px 0 0;font-size:.875rem;color:var(--ink-2);line-height:1.6}

@media (max-width:620px){
    :root{--gut:32px;--cwn:calc(clamp(1.1rem,6vw,1.7rem) * 1.2)}
    #app{padding:34px 6px 0}
    #board{padding:14px 12px 16px;border-radius:var(--r-lg)}
    #deck{gap:12px}
    #tools{flex-direction:row}
    .cell{font-size:clamp(1.1rem,6vw,1.7rem)}
    .minus{font-size:clamp(1.1rem,6vw,1.7rem);padding-right:8px}
    #story{padding:10px 14px}
}