/* Math Cages: home, the bar, the board, the keypad. Warm paper, soft cage
   tints, a firm ink outline round every cage, big plain numbers. */
:root{
  --k0:#FBEBC9;--k1:#DDEFEA;--k2:#E5E3F6;--k3:#F8DDD3;--k4:#E3EDD2;
  --line:#1D2730;--num:#12474A;--sel:#FFE08A;
}

/* ------------------------------------------------------------------ home */
.home{align-items:center;justify-content:center;gap:1.1em;padding:1em;text-align:center;overflow:auto}
.home-head{display:flex;flex-direction:column;align-items:center;gap:.35em}
.home-icon{width:4.2em;height:4.2em;border-radius:1em;box-shadow:0 6px 18px rgba(29,39,48,.2)}
.title{font:800 clamp(2.2em,9vw,3.4em)/1 var(--sans);letter-spacing:-.01em;margin:0;color:var(--ink)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.08em;text-wrap:balance;max-width:22em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.8em;width:min(30em,100%)}
.levels{display:grid;grid-template-columns:repeat(5,1fr);width:min(28em,100%)}
.levels .choice{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;min-width:0;padding:.45em .3em}
.levels .choice b{font-size:.92em}
.levels .choice small{font-size:.75em;opacity:.85;font-weight:500}
.row .go{font-size:1.6em;line-height:1;color:var(--ink-dim)}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.home > :first-child{margin-top:auto}.home > :last-child{margin-bottom:auto}
@media (max-width:520px){.levels{grid-template-columns:repeat(3,1fr)}}
@media (orientation:landscape) and (max-height:520px){
  .home{flex-direction:row;gap:1.4em;padding:.6em 1em}
  .home > *{margin-block:auto!important}
  html:not(.hw-embed) body:has(#home:not([hidden])) #home.home{padding-top:.6em!important}
  .home-head{flex:0 1 auto;padding-top:2.6em}
  html.hw-embed .home-head{padding-top:0}
  .home-icon{width:3em;height:3em}
  .title{font-size:2.1em}
  .home-body{gap:.5em;flex:0 1 24em}
  .levels .choice{padding:.3em .2em}
  .home .pill{padding:.5em 2em}
  .links .link{min-height:40px;padding:.2em .5em}
}
@media (max-height:420px){.tagline{display:none}}

/* ---------------------------------------------------------------- game */
#game{flex-direction:column}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:max(.5em,env(safe-area-inset-top)) .7em .3em;width:min(36em,100%);margin:0 auto}
.felt{flex:1;min-height:0;min-width:0;display:grid;place-items:center;padding:7px}
.dock{display:flex;flex-direction:column;align-items:center;gap:.5em;padding:.3em .6em max(.6em,env(safe-area-inset-bottom))}
.icon-btn{width:48px;height:48px;border-radius:14px;border:1px solid var(--hair);background:var(--panel);display:grid;place-items:center;padding:0;flex:none}
.icon-btn svg,.tool svg,.readout svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.readout{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;padding:0 .9em;border-radius:14px;background:var(--panel);border:1px solid var(--hair);line-height:1.1}
.readout span{font-weight:800;font-size:1.1em}
.readout small{color:var(--ink-soft);font-size:.8em}
.readout.clock{flex-direction:row;gap:.35em;min-width:5.2em;font-variant-numeric:tabular-nums}
.readout.clock svg{width:20px;height:20px;stroke:var(--ink-soft)}

/* the keypad: one big key per number */
.pad{display:flex;gap:.35em;justify-content:center;flex-wrap:wrap}
.key{width:clamp(44px,12vw,60px);height:52px;border-radius:14px;border:1px solid var(--hair);background:var(--panel);font:800 1.55em/1 var(--sans);color:var(--num);
  box-shadow:0 3px 0 #D2CCBF;padding:0;transition:transform .08s,box-shadow .08s,opacity .2s}
.key:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #D2CCBF}
.key.full{opacity:.38}
.pad.noting .key{font-size:1.05em;font-weight:700;color:var(--accent);border-color:var(--accent-hi);background:#F1FAF8}
.tools{display:flex;gap:.45em;justify-content:center;flex-wrap:wrap}
.tool{display:flex;align-items:center;gap:.4em;min-height:46px;padding:0 .95em;border-radius:14px;border:1px solid var(--hair);background:var(--panel);font-weight:700}
.tool:disabled{opacity:.42;cursor:default}
.tool[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent-lo)}
.tool[aria-pressed=true] svg{stroke:#fff}
.tool:active:not(:disabled),.icon-btn:active{transform:translateY(1px)}
.icon-btn:focus-visible,.tool:focus-visible,.key:focus-visible,.board:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px}

/* the board */
.board{--cs:48px;position:relative;display:grid;grid-template-columns:repeat(var(--n),var(--cs));grid-auto-rows:var(--cs);
  border-radius:10px;box-shadow:0 0 0 3px var(--line),0 10px 28px rgba(29,39,48,.18);touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden;background:#fff}
.cell{position:relative;display:grid;place-items:center;cursor:pointer;transition:background-color .15s}
.cell::after{content:"";position:absolute;inset:0;pointer-events:none}
.t0{background:var(--k0)}.t1{background:var(--k1)}.t2{background:var(--k2)}.t3{background:var(--k3)}.t4{background:var(--k4)}
.cell.line::after{background:rgba(29,39,48,.07)}
.cell.same .val{color:var(--accent)}
.cell.sel{z-index:4}
.cell.sel::after{background:rgba(255,224,138,.5);box-shadow:inset 0 0 0 4px var(--gold);border-radius:3px}
@media (hover:hover){.cell:hover::after{background:rgba(255,255,255,.28)}}
.lab{position:absolute;left:calc(var(--cs)*.07);top:calc(var(--cs)*.04);font:700 max(11px,calc(var(--cs)*.235))/1 var(--sans);color:var(--line);letter-spacing:-.02em;z-index:2;pointer-events:none;white-space:nowrap}
.val{position:relative;font:800 calc(var(--cs)*.56)/1 var(--sans);color:var(--num);z-index:1;padding-top:calc(var(--cs)*.1);pointer-events:none}
.val:empty{display:none}
.nts{position:absolute;z-index:1;inset:calc(var(--cs)*.26) calc(var(--cs)*.06) calc(var(--cs)*.04);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  font:700 max(9px,calc(var(--cs)*.19))/1 var(--sans);color:var(--accent-lo);pointer-events:none}
.nts i{font-style:normal;display:grid;place-items:center}
.cell.bad .val{color:var(--bad)}
.cell.bad::after{box-shadow:inset 0 0 0 3px rgba(200,56,44,.75);background:rgba(200,56,44,.08)}
.cell.sel.bad::after{box-shadow:inset 0 0 0 4px var(--bad)}
.cell.pop .val{animation:vpop .26s cubic-bezier(.3,1.6,.5,1)}
@keyframes vpop{from{transform:scale(.35)}}
.cell.shake{animation:shake .34s}
@keyframes shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.cell.glow::before{content:"";position:absolute;inset:0;pointer-events:none;animation:glow .8s ease-out both}
@keyframes glow{0%{background:rgba(43,163,153,.55)}100%{background:rgba(43,163,153,0)}}
.cell.sweep .val{animation:sweep .45s ease-out}
@keyframes sweep{40%{transform:translateY(-12%) scale(1.18);color:var(--accent)}}
.cell.hinted::before{content:"";position:absolute;inset:0;pointer-events:none;animation:hglow 1s ease-out both}
@keyframes hglow{0%{background:rgba(255,255,255,.95)}100%{background:rgba(255,255,255,0)}}
.cell.win .val{animation:win .55s ease-out both}
@keyframes win{0%{transform:scale(1)}45%{transform:scale(1.3) rotate(-6deg);color:var(--accent)}100%{transform:scale(1.05);color:var(--accent-lo)}}
.edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.edges .thin{stroke:rgba(29,39,48,.2);stroke-width:.025;fill:none}
.edges .thick{stroke:var(--line);stroke-width:.075;stroke-linecap:square;fill:none}

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

/* a phone on its side, or a short frame: the bar at the left, the keypad at the right */
@media (orientation:landscape) and (max-height:520px){
  #game{flex-direction:row}
  .bar{flex-direction:column;justify-content:center;width:auto;margin:0;padding:.5em .3em .5em max(.6em,env(safe-area-inset-left));gap:.5em}
  .readout{min-width:6em}
  .dock{justify-content:center;padding:.4em max(.6em,env(safe-area-inset-right)) .4em .3em;gap:.45em;max-width:13.5em}
  .pad{display:grid;grid-template-columns:repeat(3,48px);gap:.35em}
  .key{width:48px;height:46px;font-size:1.35em}
  .tools{display:grid;grid-template-columns:1fr 1fr;gap:.35em}
  .tool{min-height:44px;padding:0 .6em;font-size:.9em}
}
@media (orientation:landscape) and (max-height:340px){.tool span{display:none}.tool{justify-content:center}.key{height:44px}}
@media (max-width:520px) and (orientation:portrait){
  .tools{display:grid;grid-template-columns:repeat(4,1fr);width:min(100%,24em);gap:.4em}
  .tool{flex-direction:column;justify-content:center;gap:.1em;min-height:54px;padding:.25em .2em;font-size:.8em}
}
@media (max-width:300px){.key{width:40px}}

/* cards */
.card.result h2{color:var(--accent)}
.row .time{font-weight:800;font-variant-numeric:tabular-nums}
.how p{margin:.25em 0}
.how-art{display:grid;place-items:center;margin:.1em 0 .6em}
.mini{display:grid;grid-template-columns:repeat(3,2.6em);grid-auto-rows:2.6em;border:3px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.mini span{position:relative;display:grid;place-items:center;font-weight:800;font-size:1.25em;color:var(--num);box-shadow:inset -1px -1px 0 rgba(29,39,48,.2)}
.mini span.er{border-right:3px solid var(--line)}
.mini span.eb{border-bottom:3px solid var(--line)}
.mini small{position:absolute;left:.25em;top:.15em;font-size:.48em;font-weight:700;color:var(--line)}
@media (max-height:420px){.how-art{display:none}}
/* short screens: cards stay whole, their buttons side by side */
@media (max-height:520px){
  .card{padding:.8em 1em .8em;width:min(34em,100%)}
  .card h2{font-size:1.3em;margin:0 0 .35em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .actions .pill{padding:.45em 1.4em;font-size:1.05em}
  .card .stats{margin:.1em 0 .2em}
  .card .note{margin:.15em 0}
  .how{display:grid;grid-template-columns:1fr 1fr;column-gap:1.2em;font-size:.92em}
  .how .note{grid-column:1/-1}
  .rows{gap:.35em}
  .card .row{min-height:44px;padding:.35em .8em}
}