*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Inter,system-ui,sans-serif;color:#F4F5F7;overflow:hidden;
  background:radial-gradient(90% 70% at 50% -10%,#9bb0ff22,transparent 70%),linear-gradient(180deg,#16181f,#0e1015);
}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}

:root{
  --accent:#9BB0FF;
  --line:#ffffff14;
  --dim:#8990a0;
  --paper:#232939;
  --crease:#ffffff1c;
  --c1:#FFB84D;   /* amber  · circle  */
  --c2:#FF6B8A;   /* rose   · diamond */
  --c3:#4FD69C;   /* jade   · square  */
  --c4:#54C7FF;   /* sky    · triangle*/
}

#app{
  height:100dvh;max-width:620px;margin:0 auto;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:10px;
}

/* ---- header: title left, stats right, one compact row ---- */
header{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand{display:flex;flex-direction:column;line-height:1.1;margin-right:auto;min-width:0}
.brand b{font:700 20px 'Bricolage Grotesque',system-ui,sans-serif;color:var(--accent);letter-spacing:-.01em}
.brand small{font:10px 'Space Mono',monospace;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:430px){.brand small{display:none}}
.stats{display:flex;gap:6px}
.stat{
  min-width:58px;padding:6px 9px;text-align:center;
  border:1px solid var(--line);border-radius:11px;background:#ffffff08;
}
.stat b{display:block;font:700 16px 'Space Mono',monospace;font-variant-numeric:tabular-nums;line-height:1.15}
.stat span{display:block;font:9px 'Space Mono',monospace;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.stat.hi b{color:var(--accent)}

/* ---- progress: how close the sheet is to one pip per colour ---- */
.prog{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.prog .bar{flex:1;height:6px;border-radius:99px;background:#ffffff12;overflow:hidden}
.prog .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#7d92ff,var(--accent));transition:width .3s cubic-bezier(.4,1.3,.6,1)}
.prog span{font:10px 'Space Mono',monospace;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---- stage ---- */
.stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}

/* The field is a fixed box big enough for the level's starting sheet, so the
   sheet visibly shrinks into it as it folds rather than rescaling every turn. */
.field{position:relative;flex:0 0 auto}

.sheet{
  --cell:40px;
  position:absolute;border-radius:10px;perspective:900px;
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,var(--crease) 1px,transparent 1px),
    linear-gradient(to bottom,var(--crease) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);
  box-shadow:0 18px 38px #0008,inset 0 0 0 1px #ffffff12,inset 0 1px #ffffff14;
  transition:left .26s cubic-bezier(.4,1.1,.6,1),top .26s cubic-bezier(.4,1.1,.6,1),
             width .26s cubic-bezier(.4,1.1,.6,1),height .26s cubic-bezier(.4,1.1,.6,1);
}
.sheet.solved{box-shadow:0 0 0 1px #9bb0ff88,0 18px 44px #9bb0ff33,inset 0 0 30px #9bb0ff1a}

/* pips */
.cell{position:absolute;display:grid;place-items:center;pointer-events:none}
.cell svg{width:64%;height:64%;display:block;overflow:visible}
.cell.gone{visibility:hidden}
.p1 svg{fill:var(--c1);filter:drop-shadow(0 0 7px #ffb84d66)}
.p2 svg{fill:var(--c2);filter:drop-shadow(0 0 7px #ff6b8a66)}
.p3 svg{fill:var(--c3);filter:drop-shadow(0 0 7px #4fd69c66)}
.p4 svg{fill:var(--c4);filter:drop-shadow(0 0 7px #54c7ff66)}
.cell.fused{animation:fuse .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes fuse{0%{transform:scale(.5);opacity:.4}55%{transform:scale(1.32)}100%{transform:scale(1)}}

/* The half of the sheet that is being folded over. Duration must match
   FOLD_MS in game.js. The ease overshoots a touch so the flap lands with a
   paper slap, and ::after sweeps a shade across it mid-turn for depth. */
.flap{
  position:absolute;border-radius:8px;z-index:4;
  background-color:#252b3a;
  background-image:
    linear-gradient(to right,var(--crease) 1px,transparent 1px),
    linear-gradient(to bottom,var(--crease) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);
  box-shadow:0 14px 30px #000a,inset 0 0 0 1px #ffffff1a;
  transition:transform .56s cubic-bezier(.52,.02,.38,1.06);
}
.flap::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:#000;opacity:0;animation:flapShade .56s ease-in-out;
}
@keyframes flapShade{0%{opacity:0}45%{opacity:.32}100%{opacity:0}}

.sheet.deal{animation:deal .34s cubic-bezier(.34,1.4,.64,1)}
@keyframes deal{from{transform:scale(.92);opacity:.35}to{transform:scale(1);opacity:1}}

/* crease preview drawn while a fold handle is hovered or focused */
.guide{position:absolute;background:var(--accent);opacity:.75;border-radius:2px;z-index:3;pointer-events:none}
.flapmask{position:absolute;z-index:2;pointer-events:none;border-radius:8px;background:#9bb0ff1f;box-shadow:inset 0 0 0 1px #9bb0ff55}

/* ---- fold handles, parked in the gutters so they never fight the sheet ----
   The handle layer rides the same transition as the sheet, so creases stay
   glued to their grid lines while the sheet glides back to centre. */
.hnds{
  position:absolute;pointer-events:none;
  transition:left .26s cubic-bezier(.4,1.1,.6,1),top .26s cubic-bezier(.4,1.1,.6,1),opacity .2s;
}
.hnds.busy{opacity:.18}   /* step aside while the flap is turning */
.hnds .hnd{pointer-events:auto}
.hnd{
  position:absolute;width:26px;height:26px;padding:0;z-index:6;
  display:grid;place-items:center;
  border:1px solid #ffffff1f;border-radius:9px;background:#232838;
  font:700 13px 'Space Mono',monospace;color:#C7CCD5;line-height:1;
  transition:background .16s,border-color .16s,color .16s,transform .12s;
}
.hnd::after{content:'';position:absolute;inset:-8px}   /* touch target */
.hnd:active{transform:scale(.9)}
@media(hover:hover){.hnd:not(.jam):hover{background:var(--accent);border-color:var(--accent);color:#151a2b}}
.hnd:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hnd.jam{color:#6a3040;background:#2a1f26;border-color:#ff6b8a2e;cursor:not-allowed}
.hnd.tip{background:var(--accent);border-color:var(--accent);color:#151a2b;animation:tip 1s ease-in-out infinite}
@keyframes tip{0%,100%{box-shadow:0 0 0 0 #9bb0ff66}50%{box-shadow:0 0 0 7px #9bb0ff00}}

/* ---- tally + hint line ---- */
.footrow{flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;min-height:20px}
.tally{display:flex;gap:6px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:8px;background:#ffffff0a;border:1px solid var(--line);font:700 11px 'Space Mono',monospace;font-variant-numeric:tabular-nums}
.chip svg{width:11px;height:11px;display:block}
.chip.done{opacity:.42}
#hint{font:11px 'Space Mono',monospace;color:var(--dim);letter-spacing:.04em;text-align:center}

/* ---- controls: thumb-reachable on phones ---- */
footer{display:flex;justify-content:center;gap:8px;flex:0 0 auto}
footer button{
  min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:13px;
  background:#ffffff0d;font-weight:700;font-size:13px;transition:background .18s,opacity .18s;
}
footer button:active{background:#ffffff1a}
footer button:disabled{opacity:.4;cursor:default}
footer .primary{background:var(--accent);color:#151a2b;border-color:var(--accent)}
footer .iconbtn{min-width:46px;padding:0 12px;font-size:17px;line-height:1}
@media(max-width:400px){
  footer button{padding:0 10px;font-size:12px}
  footer .iconbtn{min-width:40px;padding:0 8px;font-size:15px}
}

/* ---- modal ---- */
#modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:#080a0dd9;z-index:20}
#modal[hidden]{display:none}
#modalCard{
  width:min(380px,100%);padding:26px 24px;border-radius:20px;text-align:center;
  background:#1a1e28;border:1px solid #ffffff20;box-shadow:0 30px 60px #0008;
  animation:pop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
#modalCard h2{font:700 25px 'Bricolage Grotesque',system-ui,sans-serif;margin:0 0 10px}
#modalCard p{margin:0 0 12px;font-size:14px;line-height:1.6;color:#B8BEC9}
#modalCard .sum{font:13px 'Space Mono',monospace;color:#C9CED8}
#modalCard .sum b{color:#fff}
#modalCard .note{font-size:13px;color:var(--dim)}
#modalCard .legend{display:flex;justify-content:center;gap:12px;margin:0 0 14px}
#modalCard .legend svg{width:17px;height:17px;display:block}
.stars{font-size:30px;letter-spacing:6px;margin:2px 0 10px;color:#3a3f4d}
.stars .on{color:#FFC24D;text-shadow:0 0 14px #ffc24d66}
.modalBtn{margin-top:4px;padding:12px 22px;border:0;border-radius:12px;background:var(--accent);color:#151a2b;font-weight:700;font-size:14px}
.modalBtn.ghost{margin-left:8px;background:#ffffff12;color:#E7EAEF}

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

/* short viewports: trim chrome so the sheet keeps its size */
@media(max-height:640px){
  #app{gap:7px;padding-top:7px}
  .brand b{font-size:17px}
  .stat{min-width:52px;padding:5px 7px}
  .stat b{font-size:14px}
  footer button{min-height:42px;padding:0 11px}
  #hint{display:none}
}