@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..700,0..1,-50..200");

:root{
  --bg-a:#050b18; --bg-b:#0f1c34; --bg-c:#1e1b4b;
  --text:#f8fbff; --muted:rgba(248,251,255,.70);
  --line:rgba(255,255,255,.16); --soft:rgba(255,255,255,.085);
  --accent:#7dd3fc; --accent-2:#c084fc; --accent-3:#34d399;
  --success:#34d399; --warning:#fbbf24; --danger:#fb7185;
  --shadow:0 28px 90px rgba(0,0,0,.42);
  --edge:clamp(8px,1.1vw,16px); --footer-h:32px; --radius:28px;
}

body.light-theme{
  --bg-a:#edf7ff; --bg-b:#dbeafe; --bg-c:#f5f3ff;
  --text:#102033; --muted:rgba(16,32,51,.72);
  --line:rgba(15,23,42,.14); --soft:rgba(255,255,255,.70);
  --shadow:0 24px 70px rgba(15,23,42,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
button{font:inherit}

body{
  margin:0; min-height:100vh; padding-bottom:var(--footer-h);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 8% 10%,rgba(125,211,252,.25),transparent 30%),
    radial-gradient(circle at 86% 12%,rgba(192,132,252,.23),transparent 33%),
    radial-gradient(circle at 50% 100%,rgba(52,211,153,.12),transparent 38%),
    linear-gradient(135deg,var(--bg-a),var(--bg-b) 55%,var(--bg-c));
  overflow-x:hidden;
  transition:background .3s ease,color .3s ease;
}

body:before,body:after{
  content:""; position:fixed; inset:-20%; z-index:-4; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle,rgba(125,211,252,.22) 1px,transparent 1px);
  background-size:78px 78px,78px 78px,128px 128px;
  opacity:.18;
}

body.light-theme:before, body.light-theme:after{opacity:.26}

body.game-body:before{
  content:attr(data-math);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(7rem,19vw,24rem); font-weight:1000; letter-spacing:-.10em;
  color:rgba(255,255,255,.04);
  background:radial-gradient(circle at center,rgba(255,255,255,.06),transparent 55%);
}
body.light-theme.game-body:before{color:rgba(15,23,42,.045)}

.material-symbols-rounded{
  font-family:"Material Symbols Rounded"; font-weight:600; font-style:normal;
  font-size:1.24rem; line-height:1; display:inline-flex;
  -webkit-font-feature-settings:"liga"; -webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 1,"wght" 650,"GRAD" 0,"opsz" 24;
}

.icon-gradient{
  background:linear-gradient(135deg,var(--accent),var(--accent-2),var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 10px rgba(125,211,252,.18));
}

.app-shell{width:100%; min-height:calc(100vh - var(--footer-h)); padding:var(--edge)}

.topbar{
  position:sticky; top:var(--edge); z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 10px; border-radius:24px; border:1px solid var(--line);
  background:rgba(5,11,24,.76); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
}
body.light-theme .topbar{background:rgba(255,255,255,.70)}

.brand{min-width:220px; display:flex; align-items:center; gap:10px}
.logo,.logo-link{
  width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:16px;
  background:linear-gradient(135deg,rgba(125,211,252,.36),rgba(192,132,252,.34));
  border:1px solid rgba(255,255,255,.18); box-shadow:0 0 34px rgba(125,211,252,.20);
  position:relative; transition:transform .2s ease;
}
.logo-link:hover{transform:translateY(-2px)}
.logo-link[data-tip]:hover:after,.icon-button[data-tip]:hover:after{
  content:attr(data-tip); position:absolute; top:calc(100% + 8px); z-index:30;
  padding:7px 10px; border-radius:999px; color:var(--text);
  background:rgba(6,13,25,.92); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-size:.76rem; font-weight:900;
  white-space:nowrap; box-shadow:0 12px 28px rgba(0,0,0,.25);
}
body.light-theme .logo-link[data-tip]:hover:after, body.light-theme .icon-button[data-tip]:hover:after{background:rgba(255,255,255,.95)}

.brand h1{margin:0; font-size:clamp(.96rem,1.35vw,1.28rem); line-height:1.05; letter-spacing:-.04em}
.brand p{margin:3px 0 0; color:var(--muted); font-size:.78rem}

.nav-actions,.topbar-stats{display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:nowrap}
.topbar-stats{justify-content:center}
.top-stat{
  min-height:36px; display:inline-flex; align-items:center; gap:6px; padding:0 10px;
  border-radius:999px; background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.12);
  color:var(--text); font-weight:950; font-size:.84rem; white-space:nowrap;
}
body.light-theme .top-stat{background:rgba(255,255,255,.55)}

.button,.primary-button,.icon-button{
  min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 13px; border-radius:999px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08); color:var(--text); cursor:pointer; font-weight:900;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
body.light-theme .button, body.light-theme .icon-button{background:rgba(255,255,255,.55)}
.primary-button{color:#06111f; background:linear-gradient(135deg,var(--accent),#a7f3d0)}
.icon-button{width:40px; padding:0; position:relative; flex:0 0 auto}
.button:hover,.primary-button:hover,.icon-button:hover{transform:translateY(-1px); border-color:rgba(125,211,252,.42)}
.icon-button[data-tip]:hover:after{right:0}

.site-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:120; height:var(--footer-h);
  display:flex; align-items:center; justify-content:center; padding:0 12px;
  border-top:1px solid rgba(255,255,255,.10); background:rgba(5,11,24,.66);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:rgba(248,251,255,.58); font-size:.76rem;
}
body.light-theme .site-footer{background:rgba(255,255,255,.72); color:rgba(16,32,51,.62)}
.site-footer button{
  border:0; background:transparent; color:inherit; font-weight:700; cursor:pointer; padding:2px 4px;
}
.site-footer button:hover{color:#a7f3d0}

.home-hero{min-height:calc(100vh - 85px - var(--footer-h)); display:grid; align-items:center; padding-top:10px}
.home-card{
  min-height:calc(100vh - 106px - var(--footer-h)); display:grid; align-content:center;
  border-radius:34px; border:1px solid var(--line);
  background:
    radial-gradient(circle at 16% 10%,rgba(125,211,252,.22),transparent 36%),
    radial-gradient(circle at 85% 22%,rgba(192,132,252,.18),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.052));
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); box-shadow:var(--shadow);
  padding:clamp(18px,3.6vw,44px); position:relative; overflow:hidden;
}
body.light-theme .home-card{background:rgba(255,255,255,.62)}
.home-card:before{
  content:"Σ  π  √  ∞  3×3"; position:absolute; right:-3vw; top:1vw;
  font-size:clamp(4rem,11vw,12rem); font-weight:1000; letter-spacing:-.12em;
  color:rgba(255,255,255,.035); transform:rotate(-7deg);
}
body.light-theme .home-card:before{color:rgba(15,23,42,.045)}

.intro-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(280px,1.2fr) minmax(240px,.8fr); gap:18px; align-items:end}
.home-card h1{max-width:1080px; margin:0; font-size:clamp(2.1rem,5.5vw,5.4rem); line-height:.92; letter-spacing:-.07em}
.home-card p{max-width:840px; color:var(--muted); line-height:1.55; font-size:1rem}
.intro-panel{padding:14px; border-radius:22px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.075)}
body.light-theme .intro-panel{background:rgba(255,255,255,.46)}
.intro-panel strong{display:block; margin-bottom:8px}
.intro-list{display:grid; gap:8px; margin:0; padding:0; list-style:none; color:var(--muted); font-size:.88rem; line-height:1.34}
.intro-list li{display:grid; grid-template-columns:auto 1fr; gap:8px}

.mode-bar{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.mode-pill{
  display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.075);
  color:var(--text); font-weight:900; cursor:pointer; white-space:nowrap;
}
.mode-pill.active{color:#06111f; background:linear-gradient(135deg,var(--accent),#a7f3d0)}

.challenge-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr));
  gap:10px; margin-top:18px;
}
.challenge-card{
  position:relative; min-height:142px; padding:12px; border-radius:22px; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
  overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease;
}
body.light-theme .challenge-card{background:rgba(255,255,255,.52)}
.challenge-card:before{
  content:attr(data-watermark); position:absolute; right:-4px; bottom:-18px; font-size:4.4rem;
  opacity:.10; pointer-events:none;
}
.challenge-card:hover{border-color:rgba(125,211,252,.45); box-shadow:0 0 26px rgba(125,211,252,.12)}
.challenge-card.locked{filter:grayscale(.65); opacity:.58; cursor:not-allowed}
.challenge-card.completed{border-color:rgba(52,211,153,.45)}
.challenge-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:15px;background:rgba(125,211,252,.14);font-size:1.35rem;margin-bottom:8px}
.challenge-card strong{display:block; margin-bottom:4px; font-size:.92rem}
.challenge-card span{display:block; color:var(--muted); line-height:1.25; font-size:.78rem}
.time-lines{display:grid; gap:2px; margin-top:7px; color:var(--muted); font-size:.70rem}
.time-lines b{color:#a7f3d0}
body.light-theme .time-lines b{color:#047857}
.card-pill{
  position:absolute; top:9px; right:9px; z-index:2; padding:5px 8px; border-radius:999px;
  font-size:.66rem; font-weight:950; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); cursor:pointer;
}
.completed .card-pill{color:#04120c; background:linear-gradient(135deg,var(--success),#a7f3d0)}
.solution-title{margin-bottom:8px;color:#a7f3d0;font-weight:1000;font-size:.74rem;text-align:center}
.mini-triangle{position:relative;width:128px;height:102px;margin:auto}
.mini-hollow,.mini-magic{display:grid;gap:4px;place-items:center;justify-content:center}
.mini-hollow{grid-template-columns:repeat(3,28px)}
.mini-magic{grid-template-columns:repeat(var(--mini-n),minmax(15px,23px))}
.mini-cell{width:23px;height:23px;display:grid;place-items:center;border-radius:8px;background:rgba(125,211,252,.18);border:1px solid rgba(255,255,255,.12);font-size:.66rem;font-weight:950}
.mini-cell.empty{opacity:.08}.mini-triangle .mini-cell{position:absolute}.mini-triangle .p0{left:52px;top:0}.mini-triangle .p1{left:24px;top:38px}.mini-triangle .p2{right:24px;top:38px}.mini-triangle .p3{left:0;bottom:0}.mini-triangle .p4{left:52px;bottom:0}.mini-triangle .p5{right:0;bottom:0}

.game-layout{display:grid;grid-template-columns:minmax(540px,1fr) minmax(214px,252px);gap:10px;padding-top:10px;min-height:calc(100vh - 86px - var(--footer-h))}
.panel{
  position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.050));
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); box-shadow:var(--shadow);
}
body.light-theme .panel{background:rgba(255,255,255,.58)}
.panel-inner{position:relative;z-index:1;padding:14px}
.game-panel{
  display:grid; place-items:center; min-height:calc(100vh - 98px - var(--footer-h)); padding:clamp(8px,1.1vw,18px);
  background:
    radial-gradient(circle at center,rgba(125,211,252,.13),transparent 50%),
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
}
.game-focus{width:min(100%,990px);display:grid;place-items:center;gap:10px;animation:pageIn .28s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.challenge-intro{
  width:min(100%,760px);display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;
  padding:10px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.075);margin-bottom:2px;
}
.challenge-intro .emoji{grid-row:1/span 2;font-size:1.45rem}.challenge-intro strong{letter-spacing:-.03em}.challenge-intro p{margin:0;color:var(--muted);font-size:.81rem;line-height:1.32}
.panel h3{margin:0;font-size:1rem}.muted{color:var(--muted);line-height:1.45}.compact-text{font-size:.83rem}
.progress-ring{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:conic-gradient(var(--accent) calc(var(--progress,0)*1%),rgba(255,255,255,.10) 0),rgba(255,255,255,.08)}
.progress-ring span{width:29px;height:29px;display:grid;place-items:center;border-radius:inherit;background:rgba(7,15,31,.88);font-size:.60rem;font-weight:1000}
body.light-theme .progress-ring span{background:rgba(255,255,255,.82)}
.number-bank{display:grid;grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:7px;margin-top:10px;max-height:38vh;overflow:auto;padding-right:3px}
.tile{
  width:100%;height:100%;min-height:46px;display:grid;place-items:center;border-radius:14px;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.075));box-shadow:0 10px 22px rgba(0,0,0,.20);
  color:var(--text);font-size:clamp(1rem,2vw,1.55rem);font-weight:1000;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
}
.tile.dragging{position:fixed;z-index:1200;width:var(--drag-size,58px);height:var(--drag-size,58px);min-height:0;pointer-events:none;opacity:.96;transform:translate(-50%,-50%) scale(1.03);box-shadow:0 24px 58px rgba(0,0,0,.44)}
.cell{position:absolute;display:grid;place-items:stretch;border-radius:20px;border:1px dashed rgba(255,255,255,.27);background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035));overflow:hidden;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
.cell:after{content:attr(data-label);position:absolute;left:7px;top:6px;color:rgba(255,255,255,.20);font-size:.60rem;font-weight:950;pointer-events:none}
body.light-theme .cell:after{color:rgba(15,23,42,.32)}
.cell.over{border-color:var(--accent);background:rgba(125,211,252,.14);box-shadow:0 0 28px rgba(125,211,252,.24)}
.cell.ok{border-color:rgba(52,211,153,.75);background:linear-gradient(145deg,rgba(52,211,153,.23),rgba(125,211,252,.09));box-shadow:0 0 26px rgba(52,211,153,.20)}
.cell .tile{min-height:0;width:100%;height:100%;border-radius:inherit;border:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.32),transparent 30%),linear-gradient(145deg,rgba(125,211,252,.46),rgba(192,132,252,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.sum-list{display:grid;gap:7px;margin-top:10px;max-height:calc(100vh - 240px);overflow:auto;padding-right:3px}
.sum-pill{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;border-radius:999px;color:var(--muted);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);font-size:.76rem;font-weight:900}
.sum-pill.ok{color:#04120c;background:linear-gradient(135deg,var(--success),#a7f3d0);box-shadow:0 0 22px rgba(52,211,153,.30)}
.score-button{position:fixed;left:var(--edge);bottom:calc(var(--footer-h) + var(--edge));z-index:75;width:46px;height:46px;border-radius:17px;border:1px solid rgba(255,255,255,.16);background:rgba(6,13,25,.76);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 16px 40px rgba(0,0,0,.28);cursor:pointer}
.score-drawer{position:fixed;left:var(--edge);bottom:calc(var(--footer-h) + var(--edge) + 56px);z-index:76;width:min(350px,calc(100vw - 24px));display:none;border:1px solid rgba(255,255,255,.15);border-radius:22px;background:rgba(6,13,25,.84);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow);padding:12px}
body.light-theme .score-drawer{background:rgba(255,255,255,.92)}
.score-drawer.open{display:block;animation:pageIn .2s ease both}.score-list{display:grid;gap:7px;margin-top:10px;max-height:360px;overflow:auto}.score-card{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:9px 10px;border-radius:14px;color:var(--muted);background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.10);font-size:.79rem}.score-card.current{color:var(--text);border-color:rgba(125,211,252,.42)}.score-card strong{color:var(--text)}.score-card small{grid-column:1/-1;color:var(--muted)}
.toast-stack{position:fixed;top:84px;right:var(--edge);z-index:1400;display:grid;gap:10px;width:min(360px,calc(100vw - 28px))}.toast{position:relative;display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;padding:13px;border-radius:20px;border:1px solid rgba(255,255,255,.18);background:rgba(6,13,25,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow);animation:pageIn .25s ease both}body.light-theme .toast{background:rgba(255,255,255,.92)}.toast-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:13px;background:rgba(52,211,153,.16)}.toast p{margin:0;color:var(--muted);font-size:.86rem}
.modal-overlay{position:fixed;inset:0;z-index:1300;display:none;place-items:center;padding:20px;background:rgba(2,6,16,.74);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.modal-overlay.active{display:grid;animation:pageIn .2s ease both}.modal-card{width:min(700px,100%);position:relative;overflow:hidden;text-align:center;padding:26px;border-radius:32px;border:1px solid rgba(255,255,255,.20);background:radial-gradient(circle at top left,rgba(125,211,252,.18),transparent 35%),linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.075));box-shadow:var(--shadow)}body.light-theme .modal-card{background:rgba(255,255,255,.94)}.modal-badge{width:78px;height:78px;display:grid;place-items:center;margin:0 auto 14px;border-radius:26px;background:linear-gradient(135deg,var(--success),var(--accent));font-size:2rem}.modal-card h2{margin:0;font-size:clamp(1.8rem,4.5vw,3.25rem);line-height:.98;letter-spacing:-.05em}.modal-card p{margin:12px auto 0;max-width:56ch;color:var(--muted);line-height:1.5}.time-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px auto 0;max-width:460px}.compare-card{padding:12px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}.compare-card span{display:block;color:var(--muted);font-size:.75rem;font-weight:900;text-transform:uppercase}.compare-card strong{display:block;margin-top:5px;font-size:1.3rem}.modal-actions{display:flex;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap}.confetti{position:fixed;top:-18px;width:10px;height:16px;border-radius:4px;z-index:1350;pointer-events:none;animation:confettiFall 1.8s linear forwards}@keyframes confettiFall{to{transform:translateY(110vh) rotate(760deg);opacity:0}}

@media(max-width:1040px){
  .topbar{position:relative;top:0}
  .game-layout{grid-template-columns:1fr;min-height:auto}
  .game-panel{min-height:calc(100vh - 156px - var(--footer-h));padding:8px}
  .side-panel{display:none}
  .number-bank.mobile-dock{
    position:fixed;left:var(--edge);right:var(--edge);bottom:calc(var(--footer-h) + var(--edge));z-index:100;
    display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,40px);grid-auto-columns:40px;
    gap:7px;overflow-x:auto;overflow-y:hidden;max-height:none;padding:9px;border-radius:20px;border:1px solid rgba(255,255,255,.15);
    background:rgba(6,13,25,.84);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 48px rgba(0,0,0,.30);
    touch-action:pan-x;
  }
  body.light-theme .number-bank.mobile-dock{background:rgba(255,255,255,.92)}
  .number-bank.mobile-dock .tile{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:13px;font-size:1rem}
  body.game-body{padding-bottom:calc(var(--footer-h) + 104px)}
}

@media(max-width:720px){
  .topbar{align-items:stretch;flex-direction:column;gap:8px}
  .brand{min-width:0}.nav-actions,.topbar-stats{justify-content:flex-start}
  .brand h1{font-size:1rem}.brand p{font-size:.73rem}
  .home-card{padding:16px;border-radius:28px}
  .home-card h1{font-size:clamp(2rem,11vw,3.6rem)}
  .intro-grid{grid-template-columns:1fr;gap:12px}.intro-panel{padding:12px}
  .challenge-grid{grid-template-columns:1fr}.challenge-card{min-height:134px}
  .game-panel{min-height:calc(100vh - 210px - var(--footer-h))}
  .challenge-intro{padding:9px}.challenge-intro p{font-size:.74rem}
  .top-stat{min-height:32px;font-size:.76rem;padding:0 9px}
  .time-compare{grid-template-columns:1fr}
  .score-button{left:auto;right:var(--edge);bottom:calc(var(--footer-h) + 92px)}
  .score-drawer{left:auto;right:var(--edge);bottom:calc(var(--footer-h) + 146px)}
}



/* =========================
   V5 refinements
   ========================= */

:root{
  --topbar-h: 66px;
}

body.light-theme{
  --bg-a:#dff4ff;
  --bg-b:#edf5ff;
  --bg-c:#f7f3ff;
  --text:#0f172a;
  --muted:rgba(15,23,42,.76);
  --line:rgba(15,23,42,.18);
  --soft:rgba(255,255,255,.76);
}

body.light-theme .game-panel,
body.light-theme .home-card,
body.light-theme .panel{
  background:
    radial-gradient(circle at 16% 10%, rgba(14,165,233,.15), transparent 36%),
    radial-gradient(circle at 85% 22%, rgba(124,58,237,.12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(239,246,255,.78));
  color: var(--text);
}

body.light-theme .hollow-frame:after,
body.light-theme .triangle-outline:after{
  background: rgba(226, 242, 255, .92);
}

body.light-theme .magic-square-board{
  background:
    repeating-linear-gradient(0deg, rgba(15,23,42,.055) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(15,23,42,.055) 0 1px, transparent 1px 22px),
    rgba(232,243,255,.72);
}

body.light-theme .cell{
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(226,242,255,.54));
  border-color: rgba(15,23,42,.20);
}

body.light-theme .cell.over{
  background: rgba(14,165,233,.16);
  border-color: rgba(2,132,199,.65);
}

body.light-theme .cell.ok{
  background: linear-gradient(145deg, rgba(52,211,153,.28), rgba(14,165,233,.12));
  border-color: rgba(5,150,105,.72);
}

body.light-theme .cell .tile,
body.light-theme .tile{
  color:#0f172a;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.70),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(191,219,254,.70));
  border-color: rgba(15,23,42,.16);
}

body.light-theme .sum-pill{
  color: rgba(15,23,42,.78);
  background: rgba(255,255,255,.68);
  border-color: rgba(15,23,42,.14);
}

body.light-theme .challenge-intro{
  background: rgba(255,255,255,.72);
  border-color: rgba(15,23,42,.16);
}

.material-symbols-rounded,
.icon-gradient.material-symbols-rounded{
  font-family:"Material Symbols Rounded", "Segoe UI Symbol", sans-serif;
}

/* Modal icon/text fix */
.modal-badge .material-symbols-rounded,
#confirmIcon.material-symbols-rounded{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  line-height:1;
  max-width:1em;
  overflow:hidden;
}

/* Appbar score button state */
#scoreToggleTop{
  display:inline-flex;
}

/* Hide floating score button when top score exists */
body .score-button{
  display:none;
}

/* Better footer: less accidental click */
.site-footer{
  pointer-events:none;
}

.site-footer button{
  pointer-events:auto;
  opacity:.72;
  font-size:.74rem;
}

/* Mobile fixed compact appbar */
@media(max-width:1040px){
  :root{
    --topbar-h: 72px;
  }

  body.game-body{
    padding-top: calc(var(--topbar-h) + var(--edge));
    padding-bottom: calc(var(--footer-h) + 88px);
  }

  body.game-body .topbar{
    position:fixed;
    top:var(--edge);
    left:var(--edge);
    right:var(--edge);
    z-index:500;
    min-height:var(--topbar-h);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:8px;
    padding:8px;
  }

  body.game-body .brand{
    min-width:0;
    overflow:hidden;
    gap:8px;
  }

  body.game-body .brand h1{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.92rem;
  }

  body.game-body .brand p{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.70rem;
  }

  body.game-body .logo-link{
    width:38px;
    height:38px;
    border-radius:14px;
  }

  body.game-body .topbar-stats{
    flex-wrap:nowrap;
    justify-content:flex-end;
    gap:5px;
  }

  body.game-body .top-stat{
    min-width:auto;
    min-height:34px;
    padding:0 8px;
    font-size:.74rem;
    white-space:nowrap;
  }

  body.game-body .top-stat .label-text{
    display:none;
  }

  body.game-body .progress-ring{
    width:34px;
    height:34px;
    min-width:34px;
  }

  body.game-body .progress-ring span{
    width:25px;
    height:25px;
    font-size:.52rem;
  }

  body.game-body .nav-actions{
    flex-wrap:nowrap;
    justify-content:flex-end;
    gap:5px;
  }

  body.game-body .icon-button{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
    border-radius:13px;
    font-size:.92rem;
  }

  body.game-body .icon-button .material-symbols-rounded{
    font-size:1.05rem;
  }

  body.game-body .game-layout{
    padding-top:0;
    min-height:calc(100vh - var(--topbar-h) - var(--footer-h) - 104px);
  }

  body.game-body .game-panel{
    min-height:calc(100vh - var(--topbar-h) - var(--footer-h) - 112px);
  }

  /* Dock: compact, fills a row first; wraps to second row only when needed */
  .number-bank.mobile-dock{
    grid-auto-flow:row;
    grid-template-rows:none;
    grid-template-columns:repeat(auto-fit, minmax(38px, 40px));
    justify-content:center;
    align-content:center;
    gap:6px;
    padding:8px 10px;
    max-height:96px;
    overflow-x:auto;
    overflow-y:hidden;
    touch-action:pan-x;
  }

  .number-bank.mobile-dock .tile{
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
    border-radius:12px;
    font-size:.95rem;
  }

  .fox-helper{
    bottom:calc(var(--footer-h) + 96px);
  }

  .score-drawer{
    left:auto;
    right:var(--edge);
    bottom:calc(var(--footer-h) + 94px);
  }
}

@media(max-width:720px){
  :root{
    --topbar-h: 76px;
  }

  body.game-body .topbar{
    grid-template-columns:minmax(0,1fr) auto auto;
  }

  body.game-body .topbar-stats{
    grid-column:auto;
  }

  body.game-body .nav-actions{
    grid-column:auto;
  }

  body.game-body .top-stat{
    padding:0 7px;
  }

  body.game-body .top-stat:first-child{
    max-width:76px;
  }

  body.game-body .game-panel{
    min-height:calc(100vh - var(--topbar-h) - var(--footer-h) - 116px);
  }

  .challenge-intro{
    margin-top:0;
    padding:8px 9px;
  }

  .number-bank.mobile-dock{
    grid-template-columns:repeat(auto-fit, minmax(36px, 38px));
    max-height:92px;
    padding:7px 8px;
    gap:5px;
  }

  .number-bank.mobile-dock .tile{
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    font-size:.90rem;
  }
}



/* =========================
   V6 mobile/desktop layout refinements
   ========================= */

:root{
  --topbar-h: 66px;
  --mobile-dock-h: 96px;
}

/* Cell labels more discreet */
.cell:after{
  opacity:.45;
  font-size:.52rem !important;
  font-weight:800 !important;
}

body.light-theme .cell:after{
  opacity:.42;
  color:rgba(15,23,42,.34) !important;
}

/* Desktop: remove unnecessary vertical overflow and better distribute game */
@media(min-width:1041px){
  body.game-body{
    overflow-y:auto;
  }

  body.game-body .app-shell{
    min-height:auto;
    padding-bottom:calc(var(--edge) + 2px);
  }

  body.game-body .topbar{
    position:sticky;
    top:var(--edge);
  }

  body.game-body .game-layout{
    min-height:calc(100vh - 96px - var(--footer-h));
    align-items:stretch;
  }

  body.game-body .game-panel{
    min-height:calc(100vh - 106px - var(--footer-h));
    max-height:calc(100vh - 106px - var(--footer-h));
    overflow:hidden;
  }

  body.game-body .game-focus{
    max-height:100%;
    align-content:center;
  }

  body.game-body .challenge-intro{
    width:min(760px,70%);
  }

  .hollow-square-board{
    width:min(68vh,760px,62vw) !important;
  }

  .triangle-board{
    width:min(76vh,840px,68vw) !important;
  }

  .magic-square-board{
    width:min(70vh,760px,62vw) !important;
  }

  .side-panel{
    max-height:calc(100vh - 106px - var(--footer-h));
  }

  .sum-list{
    max-height:calc(100vh - 330px);
  }
}

/* Mobile: topbar becomes two organized rows:
   first row = home + centered title, second row = stats/actions */
@media(max-width:1040px){
  :root{
    --topbar-h: 118px;
    --mobile-dock-h: 104px;
  }

  body.game-body{
    padding-top:calc(var(--topbar-h) + var(--edge));
    padding-bottom:calc(var(--footer-h) + var(--mobile-dock-h) + var(--edge));
    overflow-y:auto;
  }

  body.game-body .topbar{
    position:fixed !important;
    top:var(--edge);
    left:var(--edge);
    right:var(--edge);
    z-index:500;
    min-height:var(--topbar-h);
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "home title"
      "stats actions";
    align-items:center;
    gap:8px;
    padding:8px 10px;
  }

  body.game-body .brand{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"home title";
    grid-area:home / home / title / title;
    width:100%;
    min-width:0;
    gap:8px;
    align-items:center;
  }

  body.game-body .logo-link{
    grid-area:home;
    width:38px;
    height:38px;
    border-radius:14px;
  }

  body.game-body .brand > div{
    grid-area:title;
    min-width:0;
    text-align:center;
    padding-right:38px; /* balances home icon on the left */
  }

  body.game-body .brand h1{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.98rem;
  }

  body.game-body .brand p{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.70rem;
  }

  body.game-body .topbar-stats{
    grid-area:stats;
    justify-content:flex-start;
    flex-wrap:nowrap;
    min-width:0;
    gap:5px;
  }

  body.game-body .nav-actions{
    grid-area:actions;
    justify-content:flex-end;
    flex-wrap:nowrap;
    gap:5px;
  }

  body.game-body .top-stat{
    min-height:32px;
    padding:0 8px;
    font-size:.72rem;
    white-space:nowrap;
  }

  body.game-body .progress-ring{
    width:32px;
    height:32px;
    min-width:32px;
  }

  body.game-body .progress-ring span{
    width:24px;
    height:24px;
    font-size:.50rem;
  }

  body.game-body .icon-button{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
    border-radius:13px;
    font-size:.92rem;
  }

  body.game-body .game-layout{
    padding-top:0;
    min-height:auto;
  }

  body.game-body .game-panel{
    min-height:calc(100vh - var(--topbar-h) - var(--footer-h) - var(--mobile-dock-h) - 18px);
    max-height:none;
    overflow:visible;
    padding:8px;
  }

  body.game-body .game-focus{
    gap:8px;
    align-content:center;
  }

  .challenge-intro{
    width:100%;
    grid-template-columns:auto minmax(0,1fr);
    padding:8px 9px;
    border-radius:18px;
  }

  .challenge-intro strong{
    white-space:normal;
    line-height:1.08;
  }

  .challenge-intro p{
    display:block;
    white-space:normal;
    overflow:visible;
    font-size:.72rem;
    line-height:1.25;
  }

  .challenge-intro .emoji{
    font-size:1.25rem;
  }

  /* Mobile dock: compact, scrollable horizontally AND vertically when needed */
  .number-bank.mobile-dock{
    position:fixed;
    left:var(--edge);
    right:var(--edge);
    bottom:calc(var(--footer-h) + var(--edge));
    z-index:100;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(34px, 36px));
    grid-auto-rows:36px;
    justify-content:center;
    align-content:start;
    gap:5px;
    max-height:var(--mobile-dock-h);
    min-height:58px;
    overflow:auto;
    padding:8px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(6,13,25,.84);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    box-shadow:0 18px 48px rgba(0,0,0,.30);
    touch-action:pan-x pan-y;
    overscroll-behavior:contain;
  }

  body.light-theme .number-bank.mobile-dock{
    background:rgba(255,255,255,.92);
  }

  .number-bank.mobile-dock .tile{
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    border-radius:12px;
    font-size:.9rem;
  }

  /* Fox: visible and interactive on mobile, bubble appears above dock */
  .fox-helper{
    position:fixed;
    right:calc(var(--edge) + 4px);
    bottom:calc(var(--footer-h) + var(--mobile-dock-h) + 12px);
    z-index:110;
    width:min(300px, calc(100vw - 24px));
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    pointer-events:none;
  }

  .fox-character{
    width:58px;
    height:64px;
    pointer-events:auto;
    z-index:2;
  }

  .fox-head{
    width:44px;
    height:39px;
    left:7px;
  }

  .fox-body{
    left:18px;
    top:38px;
    width:27px;
    height:25px;
  }

  .fox-tail{
    width:32px;
    height:17px;
    bottom:8px;
  }

  .fox-message{
    display:block !important;
    max-width:220px;
    align-self:end;
    padding:9px 10px;
    font-size:.75rem;
    line-height:1.25;
    pointer-events:none;
    transform-origin:bottom right;
  }

  .fox-message strong{
    margin-bottom:2px;
  }

  .score-drawer{
    left:auto;
    right:var(--edge);
    bottom:calc(var(--footer-h) + var(--mobile-dock-h) + 12px);
    max-height:calc(100vh - var(--topbar-h) - var(--footer-h) - var(--mobile-dock-h) - 40px);
    overflow:auto;
  }

  .triangle-board{
    width:min(96vw,520px) !important;
  }

  .hollow-square-board{
    width:min(96vw,520px) !important;
  }

  .magic-square-board{
    width:min(94vw,calc(100vh - var(--topbar-h) - var(--footer-h) - var(--mobile-dock-h) - 86px)) !important;
  }
}

@media(max-width:520px){
  :root{
    --topbar-h: 122px;
    --mobile-dock-h: 108px;
  }

  body.game-body .topbar{
    padding:7px;
    gap:7px;
  }

  body.game-body .brand h1{
    font-size:.94rem;
  }

  body.game-body .brand p{
    font-size:.66rem;
  }

  body.game-body .top-stat{
    padding:0 7px;
    font-size:.68rem;
  }

  body.game-body .icon-button{
    width:32px;
    min-width:32px;
    height:32px;
    min-height:32px;
  }

  .number-bank.mobile-dock{
    grid-template-columns:repeat(auto-fill, minmax(32px, 34px));
    grid-auto-rows:34px;
  }

  .number-bank.mobile-dock .tile{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
    font-size:.86rem;
  }

  .fox-helper{
    right:var(--edge);
    width:min(275px, calc(100vw - 18px));
  }

  .fox-message{
    max-width:200px;
    font-size:.72rem;
  }
}



/* =========================
   V7 mobile polish and no-horizontal-scroll refinements
   ========================= */

html,
body{
  max-width:100%;
  overflow-x:hidden !important;
}

.app-shell,
.home-card,
.game-layout,
.game-panel,
.panel{
  max-width:100%;
}

/* Distinct modal personalities */
.modal-overlay[data-modal-kind="danger"] .modal-card{
  background:
    radial-gradient(circle at 20% 10%, rgba(251,113,133,.22), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.17), rgba(127,29,29,.16));
}

.modal-overlay[data-modal-kind="pause"] .modal-card{
  background:
    radial-gradient(circle at 20% 10%, rgba(251,191,36,.22), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.17), rgba(113,63,18,.16));
}

.modal-overlay[data-modal-kind="external"] .modal-card{
  background:
    radial-gradient(circle at 20% 10%, rgba(125,211,252,.24), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.17), rgba(14,165,233,.12));
}

.modal-overlay[data-modal-kind="preview"] .modal-card{
  background:
    radial-gradient(circle at 20% 10%, rgba(192,132,252,.24), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.17), rgba(88,28,135,.15));
}

.modal-overlay[data-modal-kind="success"] .modal-card{
  background:
    radial-gradient(circle at 20% 10%, rgba(52,211,153,.24), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.17), rgba(6,95,70,.16));
}

/* Home mobile app-like typography */
@media(max-width:720px){
  body:not(.game-body) .app-shell{
    padding:8px;
  }

  body:not(.game-body) .topbar{
    position:relative;
    top:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    padding:12px;
    border-radius:24px;
  }

  body:not(.game-body) .brand{
    min-width:0;
    width:100%;
  }

  body:not(.game-body) .brand h1{
    font-size:1.08rem;
  }

  body:not(.game-body) .brand p{
    font-size:.76rem;
  }

  body:not(.game-body) .nav-actions{
    display:grid;
    grid-template-columns:1fr repeat(3,42px);
    width:100%;
    gap:8px;
  }

  body:not(.game-body) .primary-button{
    min-width:0;
    justify-content:center;
  }

  .home-hero{
    min-height:auto;
    display:block;
    padding-top:8px;
  }

  .home-card{
    min-height:auto;
    padding:18px 16px 72px;
    border-radius:28px;
    display:block;
  }

  .home-card:before{
    font-size:4.8rem;
    right:-20px;
    top:12px;
    opacity:.55;
  }

  .intro-grid{
    display:block;
  }

  .home-card h1{
    font-size:2.45rem;
    line-height:.96;
    letter-spacing:-.055em;
    max-width:12ch;
  }

  .home-card p{
    margin-top:14px;
    font-size:.98rem;
    line-height:1.45;
    max-width:34ch;
  }

  .intro-panel{
    margin-top:14px;
    border-radius:22px;
  }

  .intro-list{
    gap:10px;
    font-size:.86rem;
  }

  .mode-bar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:16px;
  }

  .mode-pill{
    width:100%;
    justify-content:center;
    padding:10px 8px;
    font-size:.82rem;
    white-space:nowrap;
  }

  .challenge-grid{
    margin-top:18px;
    gap:10px;
  }

  .challenge-card{
    min-height:128px;
  }
}

/* General small screen mode buttons remain side by side */
@media(max-width:430px){
  .mode-pill{
    font-size:.76rem;
    padding-inline:6px;
    gap:5px;
  }
}

/* Game mobile: appbar less tall, no horizontal scroll, board fits */
@media(max-width:1040px){
  :root{
    --topbar-h: 114px;
    --mobile-dock-h: 92px;
  }

  body.game-body .topbar{
    max-width:calc(100vw - (var(--edge) * 2));
    overflow:hidden;
  }

  body.game-body .brand > div{
    padding-right:0;
  }

  body.game-body .brand h1,
  body.game-body .brand p{
    text-align:center;
  }

  body.game-body .topbar-stats,
  body.game-body .nav-actions{
    min-width:0;
  }

  body.game-body .top-stat{
    min-width:0;
  }

  body.game-body .game-panel{
    min-height:calc(100vh - var(--topbar-h) - var(--footer-h) - var(--mobile-dock-h) - 10px);
    border-radius:24px;
  }

  body.game-body .game-focus{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .challenge-intro{
    max-width:100%;
    overflow:hidden;
  }

  .triangle-board{
    width:min(92vw, calc(100vh - var(--topbar-h) - var(--footer-h) - var(--mobile-dock-h) - 110px), 520px) !important;
    min-width:0;
  }

  .hollow-square-board{
    width:min(92vw, calc(100vh - var(--topbar-h) - var(--footer-h) - var(--mobile-dock-h) - 100px), 520px) !important;
    min-width:0;
  }

  .magic-square-board{
    width:min(92vw, calc(100vh - var(--topbar-h) - var(--footer-h) - var(--mobile-dock-h) - 112px), 520px) !important;
    min-width:0;
  }

  /* Mobile fox: only emoji button by default; bubble appears briefly when active */
  .fox-helper{
    width:auto;
    right:calc(var(--edge) + 8px);
    bottom:calc(var(--footer-h) + var(--mobile-dock-h) + 10px);
    grid-template-columns:auto;
    pointer-events:none;
  }

  .fox-character{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:rgba(6,13,25,.78);
    border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:0 14px 34px rgba(0,0,0,.28);
    pointer-events:auto;
  }

  body.light-theme .fox-character{
    background:rgba(255,255,255,.88);
  }

  .fox-character:before{
    content:"🦊";
    font-size:1.65rem;
  }

  .fox-head,
  .fox-body,
  .fox-tail{
    display:none !important;
  }

  .fox-message{
    display:none !important;
    position:absolute;
    right:0;
    bottom:54px;
    width:min(230px, calc(100vw - 28px));
    max-width:min(230px, calc(100vw - 28px));
    padding:10px 11px;
    border-radius:16px 16px 4px 16px;
    font-size:.76rem;
    line-height:1.25;
    background:rgba(6,13,25,.90);
    box-shadow:0 18px 42px rgba(0,0,0,.32);
  }

  body.light-theme .fox-message{
    background:rgba(255,255,255,.95);
  }

  .fox-helper.show-message .fox-message{
    display:block !important;
    animation:pageIn .18s ease both;
  }

  .number-bank.mobile-dock{
    max-width:calc(100vw - (var(--edge) * 2));
    grid-template-columns:repeat(auto-fill, minmax(32px, 34px));
    grid-auto-rows:34px;
    gap:5px;
    max-height:var(--mobile-dock-h);
    padding:7px 8px;
    justify-content:center;
  }

  .number-bank.mobile-dock .tile{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
    font-size:.86rem;
  }
}

@media(max-width:520px){
  :root{
    --topbar-h: 116px;
    --mobile-dock-h: 90px;
  }

  body.game-body .topbar{
    grid-template-columns:1fr;
    grid-template-areas:
      "home"
      "stats"
      "actions";
    justify-items:stretch;
    gap:6px;
  }

  body.game-body .brand{
    grid-area:home;
  }

  body.game-body .brand > div{
    text-align:center;
  }

  body.game-body .topbar-stats{
    justify-content:center;
    width:100%;
  }

  body.game-body .nav-actions{
    justify-content:center;
    width:100%;
  }

  body.game-body .brand h1{
    font-size:.92rem;
  }

  body.game-body .brand p{
    font-size:.64rem;
  }

  body.game-body .logo-link{
    width:34px;
    height:34px;
  }

  body.game-body .top-stat{
    min-height:28px;
    padding:0 7px;
    font-size:.66rem;
  }

  body.game-body .icon-button{
    width:31px;
    min-width:31px;
    height:31px;
    min-height:31px;
    border-radius:12px;
  }

  .challenge-intro{
    padding:7px 8px;
  }

  .challenge-intro p{
    font-size:.69rem;
  }

  .triangle-board{
    width:min(90vw, calc(100vh - var(--topbar-h) - var(--footer-h) - var(--mobile-dock-h) - 112px), 500px) !important;
  }

  .hollow-square-board{
    width:min(90vw, calc(100vh - var(--topbar-h) - var(--footer-h) - var(--mobile-dock-h) - 106px), 500px) !important;
  }

  .magic-square-board{
    width:min(90vw, calc(100vh - var(--topbar-h) - var(--footer-h) - var(--mobile-dock-h) - 118px), 500px) !important;
  }
}



/* =========================
   V8 refinements
   ========================= */

/* Timer pill is now an action */
body.game-body .top-stat:first-child{
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

body.game-body .top-stat:first-child:hover{
  transform:translateY(-1px);
  border-color:rgba(125,211,252,.48);
}

body.game-body.paused .top-stat:first-child{
  background:linear-gradient(135deg, rgba(251,191,36,.24), rgba(251,113,133,.16));
  border-color:rgba(251,191,36,.55);
}

/* Light mode: stronger board contrast */
body.light-theme .triangle-outline{
  opacity:.92;
  background:
    linear-gradient(135deg, rgba(14,116,144,.34), rgba(124,58,237,.20)),
    repeating-linear-gradient(45deg, rgba(15,23,42,.12) 0 1px, transparent 1px 18px) !important;
}

body.light-theme .triangle-outline:after{
  background:rgba(239,248,255,.78) !important;
}

body.light-theme .hollow-frame{
  opacity:.92;
  background:
    linear-gradient(135deg, rgba(14,116,144,.22), rgba(124,58,237,.18)),
    repeating-linear-gradient(0deg, rgba(15,23,42,.075) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(15,23,42,.070) 0 1px, transparent 1px 26px) !important;
}

body.light-theme .hollow-frame:after{
  background:rgba(214,231,245,.92) !important;
}

body.light-theme .magic-square-board{
  background:
    repeating-linear-gradient(0deg, rgba(15,23,42,.08) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(15,23,42,.08) 0 1px, transparent 1px 22px),
    rgba(223,239,252,.86) !important;
}

body.light-theme .cell{
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(209,229,246,.72)) !important;
  border-color:rgba(15,23,42,.28) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.46);
}

body.light-theme .cell:after{
  color:rgba(15,23,42,.48) !important;
  opacity:.55 !important;
}

body.light-theme .game-panel{
  background:
    radial-gradient(circle at center,rgba(14,165,233,.18),transparent 50%),
    radial-gradient(circle at 70% 20%,rgba(124,58,237,.13),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(225,239,252,.82)) !important;
}

/* Mobile appbar: keep icons and stats in the same row */
@media(max-width:1040px){
  body.game-body .topbar{
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "home home"
      "stats actions" !important;
    align-items:center;
  }

  body.game-body .brand{
    grid-area:home !important;
    width:100%;
  }

  body.game-body .brand > div{
    text-align:center;
    padding-right:38px;
  }

  body.game-body .topbar-stats{
    grid-area:stats !important;
    justify-content:flex-end !important;
    width:auto;
  }

  body.game-body .nav-actions{
    grid-area:actions !important;
    justify-content:flex-start !important;
    width:auto;
  }

  body.game-body .top-stat{
    flex:0 0 auto;
  }

  .number-bank.mobile-dock{
    justify-content:center !important;
    justify-items:center;
  }

  /* Fox loose on left, bubble opens to the right */
  .fox-helper{
    left:calc(var(--edge) + 6px) !important;
    right:auto !important;
    bottom:calc(var(--footer-h) + var(--mobile-dock-h) + 10px) !important;
    width:auto !important;
    display:grid !important;
    grid-template-columns:auto auto !important;
    align-items:end !important;
    gap:8px !important;
    pointer-events:none;
  }

  .fox-character{
    width:42px !important;
    height:42px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    border-radius:0 !important;
    pointer-events:auto !important;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
  }

  .fox-character:before{
    content:"🦊";
    font-size:2.05rem !important;
  }

  .fox-message{
    position:static !important;
    display:none !important;
    width:min(230px, calc(100vw - 78px)) !important;
    max-width:min(230px, calc(100vw - 78px)) !important;
    align-self:end;
    padding:9px 10px !important;
    border-radius:16px 16px 16px 4px !important;
    font-size:.74rem !important;
    line-height:1.25 !important;
    pointer-events:none;
  }

  .fox-helper.show-message .fox-message{
    display:block !important;
  }
}

@media(max-width:520px){
  body.game-body .topbar{
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "home home"
      "stats actions" !important;
    gap:6px !important;
  }

  body.game-body .brand > div{
    padding-right:34px;
  }

  body.game-body .topbar-stats{
    justify-content:flex-end !important;
    gap:4px !important;
  }

  body.game-body .nav-actions{
    justify-content:flex-start !important;
    gap:4px !important;
  }

  body.game-body .top-stat{
    padding:0 6px !important;
    font-size:.64rem !important;
  }

  body.game-body .icon-button{
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    min-height:30px !important;
  }

  .fox-message{
    width:min(218px, calc(100vw - 72px)) !important;
    max-width:min(218px, calc(100vw - 72px)) !important;
  }
}



/* =========================
   V9 compact appbar, single pause toast, better tile spacing
   ========================= */

/* One toast stack item feels cleaner on mobile */
.toast-stack{
  pointer-events:none;
}

body.game-body .toast-stack .toast:not(:last-child){
  display:none;
}

/* Appbar: less empty height, better distribution */
@media(max-width:1040px){
  :root{
    --topbar-h: 96px;
    --mobile-dock-h: 86px;
  }

  body.game-body{
    padding-top:calc(var(--topbar-h) + var(--edge));
  }

  body.game-body .topbar{
    min-height:var(--topbar-h) !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    grid-template-areas:
      "home title title"
      "stats stats actions" !important;
    padding:7px 9px !important;
    gap:6px !important;
    border-radius:22px !important;
  }

  body.game-body .brand{
    display:contents !important;
  }

  body.game-body .logo-link{
    grid-area:home !important;
    width:36px !important;
    height:36px !important;
    border-radius:14px !important;
  }

  body.game-body .brand > div{
    grid-area:title !important;
    min-width:0;
    padding-right:0 !important;
    text-align:center !important;
    align-self:center;
  }

  body.game-body .brand h1{
    font-size:.94rem !important;
    line-height:1.04 !important;
  }

  body.game-body .brand p{
    font-size:.66rem !important;
    line-height:1.05 !important;
  }

  body.game-body .topbar-stats{
    grid-area:stats !important;
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:5px !important;
    min-width:0;
  }

  body.game-body .nav-actions{
    grid-area:actions !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:5px !important;
    min-width:0;
  }

  body.game-body .top-stat{
    min-height:30px !important;
    padding:0 8px !important;
    font-size:.68rem !important;
    border-radius:999px !important;
  }

  body.game-body .progress-ring{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
  }

  body.game-body .progress-ring span{
    width:22px !important;
    height:22px !important;
    font-size:.48rem !important;
  }

  body.game-body .icon-button{
    width:31px !important;
    min-width:31px !important;
    height:31px !important;
    min-height:31px !important;
    border-radius:12px !important;
  }

  body.game-body .game-panel{
    min-height:calc(100vh - var(--topbar-h) - var(--footer-h) - var(--mobile-dock-h) - 10px) !important;
  }

  .number-bank.mobile-dock{
    min-height:54px !important;
    max-height:var(--mobile-dock-h) !important;
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(34px, 38px)) !important;
    justify-content:space-evenly !important;
    justify-items:center !important;
    align-content:center !important;
    gap:6px !important;
    padding:7px 9px !important;
  }

  .number-bank.mobile-dock .tile{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    font-size:.92rem !important;
  }
}

@media(max-width:520px){
  :root{
    --topbar-h: 98px;
    --mobile-dock-h: 86px;
  }

  body.game-body .topbar{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    grid-template-areas:
      "home title title"
      "stats stats actions" !important;
    gap:5px !important;
    padding:7px !important;
  }

  body.game-body .brand h1{
    font-size:.88rem !important;
  }

  body.game-body .brand p{
    font-size:.61rem !important;
  }

  body.game-body .topbar-stats{
    gap:4px !important;
  }

  body.game-body .nav-actions{
    gap:4px !important;
  }

  body.game-body .top-stat{
    padding:0 6px !important;
    font-size:.62rem !important;
  }

  body.game-body .icon-button{
    width:29px !important;
    min-width:29px !important;
    height:29px !important;
    min-height:29px !important;
  }

  .number-bank.mobile-dock{
    grid-template-columns:repeat(auto-fit, minmax(32px, 36px)) !important;
    justify-content:space-evenly !important;
    gap:5px !important;
  }

  .number-bank.mobile-dock .tile{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    font-size:.88rem !important;
  }
}

/* Placed numbers: larger, with breathing room inside cells */
.cell{
  padding:clamp(4px, .7vw, 8px);
}

.cell .tile{
  width:100% !important;
  height:100% !important;
  border-radius:calc(inherit - 4px);
  font-size:clamp(1.15rem, 2.4vw, 2rem) !important;
  transform:none !important;
}

.magic-square-board.size-5 .cell,
.magic-square-board.size-6 .cell{
  padding:clamp(2px, .45vw, 5px);
}

.magic-square-board.size-5 .cell .tile,
.magic-square-board.size-6 .cell .tile{
  font-size:clamp(.92rem, 1.75vw, 1.38rem) !important;
}

/* Keep bank numbers compact */
.number-bank:not(.mobile-dock) > .tile{
  font-size:clamp(1.1rem, 2vw, 1.65rem) !important;
}

/* Pause state visual without repeated notifications */
body.game-body.paused .game-panel{
  box-shadow:inset 0 0 0 2px rgba(251,191,36,.18), var(--shadow);
}

body.game-body.paused .top-stat:first-child::after{
  content:"⏸";
  margin-left:4px;
}



/* =========================
   V10 home expanders and mobile two-column cards
   ========================= */

.home-expander{
  position:relative;
  z-index:2;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.075);
  border-radius:24px;
  overflow:hidden;
  margin-top:12px;
}

body.light-theme .home-expander{
  background:rgba(255,255,255,.58);
  border-color:rgba(15,23,42,.13);
}

.home-expander:first-child{
  margin-top:0;
}

.home-expander summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  font-weight:1000;
  letter-spacing:-.03em;
  color:var(--text);
}

.home-expander summary::-webkit-details-marker{
  display:none;
}

.home-expander summary:after{
  content:"expand_more";
  font-family:"Material Symbols Rounded";
  font-size:1.3rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-2),var(--accent-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:transform .18s ease;
}

.home-expander[open] summary:after{
  transform:rotate(180deg);
}

.home-expander .expander-body{
  padding:0 16px 16px;
}

.home-expander .expander-body p{
  margin:0;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

.home-expander .home-card h1{
  margin:0;
}

.home-intro-title{
  margin:0;
  font-size:clamp(1.45rem,3.8vw,3.6rem);
  line-height:1;
  letter-spacing:-.055em;
}

.home-intro-text{
  max-width:980px;
  color:var(--muted);
  line-height:1.62;
  font-size:clamp(.92rem,1vw,1.02rem);
}

.how-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}

.how-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
  align-items:start;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-size:.88rem;
  line-height:1.38;
}

body.light-theme .how-item{
  background:rgba(255,255,255,.50);
  border-color:rgba(15,23,42,.10);
}

.home-expander .mode-bar{
  margin-top:14px;
}

.home-expander + .challenge-grid{
  margin-top:16px;
}

/* make old intro panel harmless if any remnants exist */
.intro-panel{
  display:none;
}

@media(max-width:720px){
  .home-expander{
    border-radius:22px;
    margin-top:10px;
  }

  .home-expander summary{
    padding:12px 13px;
    gap:8px;
    font-size:.93rem;
  }

  .home-expander .expander-body{
    padding:0 13px 13px;
  }

  .home-intro-title{
    font-size:1.85rem !important;
    max-width:100% !important;
    letter-spacing:-.045em;
    line-height:1.02;
  }

  .home-intro-text{
    font-size:.88rem !important;
    line-height:1.52 !important;
    max-width:100% !important;
    text-align:justify;
  }

  .how-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .how-item{
    font-size:.80rem;
    padding:9px;
  }

  .challenge-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .challenge-card{
    min-height:150px !important;
    padding:10px !important;
    border-radius:20px !important;
  }

  .challenge-card:before{
    font-size:3.2rem !important;
    right:-2px !important;
    bottom:-12px !important;
  }

  .challenge-icon{
    width:36px !important;
    height:36px !important;
    border-radius:14px !important;
    font-size:1.15rem !important;
    margin-bottom:7px !important;
  }

  .challenge-card strong{
    font-size:.82rem !important;
    margin-bottom:3px !important;
  }

  .challenge-card span{
    font-size:.69rem !important;
    line-height:1.22 !important;
  }

  .time-lines{
    font-size:.63rem !important;
    margin-top:6px !important;
  }

  .card-pill{
    top:8px !important;
    right:8px !important;
    font-size:.58rem !important;
    padding:4px 7px !important;
  }
}

@media(max-width:360px){
  .challenge-grid{
    grid-template-columns:1fr !important;
  }
}