/* =========================================================
   SHUFLIO — stylesheet
   Author: Nebula Tactic
   ---------------------------------------------------------
   SHUFLIO
   The palette comes from the toy itself: a felt table, a
   beech tray, blackened steel, painted beads, card stock.
   Two themes — the wood and the beads never change, only
   the room the tray is sitting in.
   ========================================================= */

:root{
  /* the tray and its hardware are theme-independent */
  --wood-lit:#f0dab4;
  --wood:#dcbb8c;
  --wood-mid:#c69a67;
  --wood-dark:#9a6f42;
  --wood-shadow:#6d4b2a;
  --steel:#312c27;
  --steel-lit:#574e45;
  --paper:#faf3e2;
  --paper-edge:#e2d6bb;
  --ink:#2a2622;
  --amber:#f0a63c;
  --amber-deep:#c97d1c;

  --r-lg:22px;
  --r-md:14px;
  --ease-spring:cubic-bezier(.2,1.35,.4,1);
  --ease-out:cubic-bezier(.22,.9,.28,1);
}

/* ---- dark: the toy on a slate carpet ---- */
[data-theme="dark"]{
  --bg-1:#2b333a; --bg-2:#1a2026; --bg-3:#141a1f;
  --bg-glow:#3a444d;
  --text:#f2ede4;
  --text-dim:#a9a49b;
  --panel:rgba(255,255,255,.07);
  --panel-hi:rgba(255,255,255,.14);
  --hairline:rgba(255,255,255,.1);
  --modal-1:#2f383f; --modal-2:#20272d;
  --scrim:rgba(10,14,17,.7);
  --btn-ink:var(--ink);
  --weave-a:rgba(255,255,255,.028);
  --weave-b:rgba(0,0,0,.05);
  --meta:#20262c;
}

/* ---- light: the toy on a pale linen table ---- */
[data-theme="light"]{
  --bg-1:#fdf8ef; --bg-2:#f2e9d9; --bg-3:#e7dcc8;
  --bg-glow:#fffdf8;
  --text:#2a2018;
  --text-dim:#7d7062;
  --panel:rgba(90,62,32,.075);
  --panel-hi:rgba(90,62,32,.15);
  --hairline:rgba(90,62,32,.16);
  --modal-1:#fffaf0; --modal-2:#f3e8d6;
  --scrim:rgba(60,44,26,.42);
  --btn-ink:var(--ink);
  --weave-a:rgba(120,86,45,.035);
  --weave-b:rgba(120,86,45,.05);
  --meta:#f3e8d6;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;padding:0;height:100%;
  overscroll-behavior:none;overflow:hidden;
  /* the canvas keeps the theme colour so nothing ever shows through white */
  background:var(--bg-2);
}

body{
  font-family:ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg-glow) 0%, transparent 60%),
    linear-gradient(175deg,var(--bg-1),var(--bg-2) 55%,var(--bg-3));
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
  transition:background .35s ease,color .35s ease;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:
    repeating-linear-gradient(0deg,var(--weave-a) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,var(--weave-b) 0 1px,transparent 1px 3px);
}

#app{
  position:relative;z-index:1;width:100%;overflow:hidden;
  height:100vh;height:100dvh;
}

.screen{
  position:absolute;inset:0;display:none;flex-direction:column;
  overflow:hidden;                      /* never let a child widen the page */
  padding:max(10px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));
}
.screen.is-active{display:flex}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  font:inherit;font-weight:650;font-size:17px;color:var(--btn-ink);
  border:0;border-radius:999px;padding:15px 30px;
  background:linear-gradient(180deg,var(--wood-lit),var(--wood) 60%,var(--wood-mid));
  box-shadow:0 4px 0 var(--wood-dark),0 10px 20px rgba(0,0,0,.28);
  cursor:pointer;transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out);
}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--wood-dark),0 4px 10px rgba(0,0,0,.25)}
.btn-primary{
  background:linear-gradient(180deg,#ffc978,var(--amber) 60%,var(--amber-deep));
  box-shadow:0 4px 0 #93590d,0 12px 26px rgba(240,166,60,.28);
  font-size:19px;padding:17px 44px;
}
.btn-primary:active{box-shadow:0 0 0 #93590d,0 5px 12px rgba(0,0,0,.25)}
.btn-ghost{
  background:transparent;color:var(--text-dim);font-weight:550;
  box-shadow:inset 0 0 0 1.5px var(--hairline);
}
.btn-ghost:active{transform:translateY(1px);box-shadow:inset 0 0 0 1.5px var(--panel-hi)}
.btn-danger{background:transparent;color:#e0574a;box-shadow:inset 0 0 0 1.5px rgba(224,87,74,.4)}
.btn-sm{font-size:15px;padding:11px 22px}

.btn-daily{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--panel);color:var(--text);
  box-shadow:inset 0 0 0 1.5px var(--hairline);font-size:16px;padding:14px 22px;
}
.btn-daily i{font-style:normal;font-size:12.5px;color:var(--amber);font-weight:700;letter-spacing:.04em}
.btn-daily.done i{color:var(--text-dim)}
.btn-daily:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px var(--panel-hi)}

.icon-btn{
  width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;
  border:0;border-radius:50%;background:var(--panel);color:var(--text);cursor:pointer;
  transition:background .15s,transform .12s;
}
.icon-btn:active{transform:scale(.92);background:var(--panel-hi)}
.icon-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-btn[hidden]{display:none}

#btn-sound .ic-sound-off,[data-theme="dark"] #btn-theme .ic-light,[data-theme="light"] #btn-theme .ic-dark{display:none}
[data-theme="dark"] #btn-theme .ic-dark,[data-theme="light"] #btn-theme .ic-light{display:block}
body.muted #btn-sound .ic-sound-on{display:none}
body.muted #btn-sound .ic-sound-off{display:block}
body.muted #btn-sound{color:var(--text-dim)}

.link{
  font:inherit;font-size:13.5px;background:none;border:0;padding:2px 0;cursor:pointer;
  color:var(--text-dim);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--panel-hi);
}
.link:active{color:var(--text)}

:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px}

/* ---------------------------------------------------------
   App header + brand
   --------------------------------------------------------- */
.apphead{display:flex;align-items:center;gap:10px;padding:2px 0 6px;flex:0 0 auto}
.brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.brand-mark{width:36px;height:36px;flex:0 0 36px}
.brand-mark svg{width:100%;height:100%;display:block}
.bm-plate{fill:var(--wood)}
.bm-bar{fill:#241f1b}
.bm-b1{fill:#3e63dd}.bm-b2{fill:#f5b31b}.bm-b3{fill:#e5484d}
.bm-gloss{fill:rgba(255,255,255,.5)}
.brand-name{
  font-size:19px;font-weight:800;letter-spacing:.16em;
  white-space:nowrap;overflow:hidden;text-overflow:clip;min-width:0;
}
.apphead-actions{display:flex;gap:5px;flex:0 0 auto}

.home-scroll{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;
}
.home-wrap{
  margin:auto;width:100%;max-width:400px;padding:14px 0 8px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

.home-title{
  margin:0;font-size:clamp(38px,11.5vw,54px);line-height:1;
  font-weight:800;letter-spacing:.1em;
  background:linear-gradient(180deg,var(--wood-lit),var(--wood-mid) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.home-sub{margin:14px 0 0;color:var(--text-dim);font-size:15.5px;line-height:1.55;max-width:31ch}

.home-meters{display:flex;gap:10px;margin:22px 0 20px;width:100%}
.meter{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--panel);border-radius:var(--r-md);padding:11px 6px;
}
.meter b{font-size:19px;font-variant-numeric:tabular-nums}
.meter span{font-size:10.5px;color:var(--text-dim);letter-spacing:.05em}
.meter-ic{width:17px;height:17px;fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linejoin:round}
.meter-star{color:var(--amber);font-size:16px;line-height:17px}
.meter.hot b{color:var(--amber)}

.diff-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%;margin-bottom:20px}
@media (min-width:520px){.diff-picker{grid-template-columns:repeat(4,1fr)}}
.diff{
  flex:1;font:inherit;cursor:pointer;border:0;border-radius:var(--r-md);
  padding:11px 6px;background:var(--panel);color:var(--text);
  display:flex;flex-direction:column;gap:2px;align-items:center;
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .18s,background .18s;
}
.diff b{font-size:14.5px;font-weight:650}
.diff span{font-size:10.5px;color:var(--text-dim)}
.diff.on{background:var(--panel-hi);box-shadow:inset 0 0 0 2px var(--amber)}
.diff.on b{color:var(--amber)}
.diff-god b{letter-spacing:.06em}
.diff-god.on{box-shadow:inset 0 0 0 2px #b06bf0}
.diff-god.on b{
  color:transparent;background:linear-gradient(95deg,#d5b3f5,#8e4ec6 60%,#e93d82);
  -webkit-background-clip:text;background-clip:text;
}
.chip-god.on{background:linear-gradient(95deg,#8e4ec6,#e93d82);color:#fff}

.home-buttons{display:flex;flex-direction:column;gap:11px;width:100%;max-width:300px}
.home-progress{margin:20px 0 12px;color:var(--text-dim);font-size:13.5px}

.site-foot{
  margin-top:auto;padding:26px 0 10px;text-align:center;
  border-top:1px solid var(--hairline);width:100%;max-width:460px;
  margin-left:auto;margin-right:auto;
}
.foot-links{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;color:var(--text-dim);font-size:13px}
.foot-made{margin:14px 0 4px;font-size:13.5px;color:var(--text-dim);letter-spacing:.02em}
.heart{color:#e5484d}
.foot-made b{color:var(--text);font-weight:650}

/* ---------------------------------------------------------
   Topbar / documents
   --------------------------------------------------------- */
.topbar{display:flex;align-items:center;gap:10px;padding:2px 0 10px;flex:0 0 auto}
.topbar-title{flex:1;text-align:center;font-size:17px;font-weight:650}
.topbar-spacer{flex:1}
.topbar-meta{flex:0 0 auto;min-width:40px;text-align:right;color:var(--text-dim);font-size:13px}

.doc-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:24px}
.doc{max-width:620px;margin:0 auto;font-size:15px;line-height:1.62;color:var(--text-dim)}
.doc h3{margin:26px 0 6px;font-size:15.5px;color:var(--text);font-weight:700}
.doc p{margin:0 0 10px}
.doc-lead{font-size:16.5px;color:var(--text);margin-bottom:18px}
.doc-note{margin-top:22px;padding:14px 16px;background:var(--panel);border-radius:var(--r-md);font-size:14px}
.doc-note b,.doc b{color:var(--text)}
.doc-fine{margin-top:22px;font-size:12.5px;opacity:.7}
.howto{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.howto li{padding-left:4px}
.howto b{display:block;color:var(--text);margin-bottom:2px}

.badge-list{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:9px}
.badge{
  display:flex;align-items:center;gap:13px;padding:13px 15px;
  background:var(--panel);border-radius:var(--r-md);
}
.badge-ic{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;
  background:var(--panel-hi);font-size:20px;filter:grayscale(1);opacity:.45;
}
.badge.got .badge-ic{
  filter:none;opacity:1;
  background:linear-gradient(180deg,#ffc978,var(--amber-deep));
}
.badge-txt b{display:block;font-size:14.5px;font-weight:650}
.badge-txt span{font-size:12.5px;color:var(--text-dim)}
.badge.got .badge-txt b{color:var(--amber)}

/* ---------------------------------------------------------
   Level select
   --------------------------------------------------------- */
.diff-strip{display:flex;gap:6px;justify-content:center;padding:0 0 10px;flex:0 0 auto;flex-wrap:wrap}
.chip{
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border:0;
  padding:8px 15px;border-radius:999px;background:var(--panel);color:var(--text-dim);
  transition:background .16s,color .16s;
}
.chip.on{background:var(--amber);color:var(--ink)}

.chapter-strip{
  display:flex;gap:7px;overflow-x:auto;padding:0 0 12px;flex:0 0 auto;
  scrollbar-width:none;
}
.chapter-strip::-webkit-scrollbar{display:none}
.chapter{
  flex:0 0 auto;font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:0;
  padding:8px 15px;border-radius:999px;background:var(--panel);color:var(--text-dim);
  display:flex;align-items:center;gap:7px;
}
.chapter.on{background:var(--panel-hi);color:var(--text);box-shadow:inset 0 0 0 2px var(--amber)}
.chapter.locked{opacity:.4}
.chapter i{font-style:normal;font-size:11px;opacity:.75}

.chapter-head{
  max-width:520px;margin:0 auto 12px;display:flex;align-items:center;gap:12px;
  font-size:13px;color:var(--text-dim);
}
.chapter-bar{flex:1;height:6px;border-radius:3px;background:var(--panel);overflow:hidden}
.chapter-bar i{display:block;height:100%;border-radius:3px;background:var(--amber);transition:width .4s var(--ease-out)}

.levels-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:20px}
.levels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:10px;max-width:520px;margin:0 auto}
.lvl{
  position:relative;aspect-ratio:1;border:0;border-radius:16px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font:inherit;font-weight:700;font-size:17px;color:var(--ink);
  background:linear-gradient(180deg,var(--wood-lit),var(--wood-mid));
  box-shadow:0 3px 0 var(--wood-dark),0 6px 12px rgba(0,0,0,.22);
  transition:transform .12s var(--ease-out);
}
.lvl:active{transform:translateY(3px)}
.lvl.locked{background:var(--panel);color:transparent;box-shadow:inset 0 0 0 1.5px var(--hairline)}
.lvl.locked::after{content:"";position:absolute;width:15px;height:12px;border-radius:3px;margin-top:5px;background:var(--panel-hi)}
.lvl.locked::before{content:"";position:absolute;width:13px;height:10px;margin-top:-7px;border-radius:7px 7px 0 0;border:2.5px solid var(--panel-hi);border-bottom:0}
.lvl.current{box-shadow:0 3px 0 var(--wood-dark),0 0 0 3px var(--amber),0 8px 18px rgba(240,166,60,.3)}
.lvl-stars{display:flex;gap:2px;height:8px}
.lvl-stars i{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.2)}
.lvl-stars i.on{background:#8a4b00;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.levels-foot{height:16px}

/* ---------------------------------------------------------
   Game board — Nebula Tactic
   --------------------------------------------------------- */
.play{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;min-height:0}

.card-zone{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px}
.card-level{font-size:16px;font-weight:650;margin-bottom:2px;text-align:center}
.card{
  position:relative;padding:10px 12px;border-radius:9px;
  background:linear-gradient(168deg,#fffaee,var(--paper) 55%,var(--paper-edge));
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 22px rgba(0,0,0,.32),0 2px 4px rgba(0,0,0,.22);
  transform:rotate(-1.1deg);transition:transform .3s var(--ease-spring);
}
.card.pop{transform:rotate(0deg) scale(1.07)}
.card-rail{position:relative;display:flex;gap:6px;justify-content:center;align-items:center;margin-bottom:9px;padding-bottom:2px}
.card-rail::before{content:"";position:absolute;left:2px;right:2px;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(40,34,28,.55)}
.card-rail .dot{position:relative;background:var(--paper);box-shadow:none;border:2px solid rgba(40,34,28,.4)}
.card-grid{display:grid;gap:6px}
.card-row{display:flex;gap:6px}
.dot{width:13px;height:13px;border-radius:50%;position:relative;display:grid;place-items:center}
.dot.empty{background:rgba(0,0,0,.055);box-shadow:inset 0 1px 2px rgba(0,0,0,.09)}
.dot svg{width:7px;height:7px;opacity:.55}
.card-caption{font-size:11.5px;color:var(--text-dim);letter-spacing:.09em}
.card-solved{
  position:absolute;inset:0;border-radius:9px;display:grid;place-items:center;
  background:rgba(35,140,80,.9);opacity:0;transition:opacity .22s;pointer-events:none;
}
.card-solved svg{width:38px;height:38px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.card.solved .card-solved{opacity:1}
.card.solved .card-solved svg{animation:tick .45s var(--ease-out) forwards}
@keyframes tick{to{stroke-dashoffset:0}}

.board-area{flex:1 1 auto;min-height:0;min-width:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tray{
  position:relative;border-radius:var(--r-lg);padding:11px;
  background:linear-gradient(112deg,var(--wood-lit),var(--wood) 30%,var(--wood-mid) 70%,var(--wood-dark));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.16),
    0 22px 44px rgba(0,0,0,.4),0 4px 8px rgba(0,0,0,.28);
}
.tray::before{
  content:"";position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background:repeating-linear-gradient(97deg,rgba(140,95,55,0) 0 6px,rgba(140,95,55,.09) 6px 7px,
    rgba(140,95,55,0) 7px 15px,rgba(140,95,55,.05) 15px 16px);
}
.tray-inner{
  position:relative;width:100%;height:100%;border-radius:15px;
  background:linear-gradient(160deg,#f6e3c3,#e6c99f 60%,#d9b787);
  box-shadow:inset 0 3px 7px rgba(109,75,42,.45),inset 0 -2px 0 rgba(255,255,255,.4);
  overflow:hidden;touch-action:none;
}

.rail{
  position:absolute;border-radius:99px;z-index:2;
  background:linear-gradient(180deg,#7a6e60 0%,#3a332c 38%,#15110e 100%);
  box-shadow:0 3px 6px rgba(60,38,16,.5),inset 0 1px 0 rgba(255,255,255,.22);
}
.rod{
  position:absolute;border-radius:99px;z-index:2;
  background:linear-gradient(90deg,#6d6153 0%,#332c26 42%,#15110e 100%);
  box-shadow:2px 0 5px rgba(60,38,16,.42),inset 1px 0 0 rgba(255,255,255,.18);
}
.rod-cap{
  position:absolute;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 34% 28%,#7a6e60,#1b1613 72%);
  box-shadow:0 2px 4px rgba(60,38,16,.45);
}
.groove{
  position:absolute;border-radius:99px;z-index:1;
  background:rgba(109,75,42,.16);box-shadow:inset 0 1px 3px rgba(109,75,42,.4);
}
.rail.flash{animation:railFlash .55s ease-in-out 3}
@keyframes railFlash{50%{box-shadow:0 0 0 5px rgba(240,166,60,.45),0 3px 6px rgba(60,38,16,.5)}}

.socket{
  position:absolute;border-radius:50%;pointer-events:none;z-index:3;
  border:2px solid rgba(109,75,42,.22);transition:opacity .2s;
}
.socket.filled{opacity:0}
.socket-rail{border-color:rgba(30,25,20,.3)}

.ghost{
  position:absolute;border-radius:50%;z-index:4;
  border:2.5px dashed rgba(109,75,42,.42);
  opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .18s var(--ease-out),transform .18s var(--ease-out);
}
.ghost.show{opacity:1;transform:scale(1)}
.ghost.near{border-style:solid;border-color:rgba(46,120,72,.85);background:rgba(46,120,72,.14);transform:scale(1.09)}
.ghost.hint{border-style:solid;border-color:var(--amber-deep);opacity:1;transform:scale(1);animation:hintPulse .9s ease-in-out infinite}
@keyframes hintPulse{0%,100%{box-shadow:0 0 0 0 rgba(240,166,60,.55)}50%{box-shadow:0 0 0 10px rgba(240,166,60,0)}}

.bead{
  position:absolute;left:0;top:0;border-radius:50%;z-index:5;
  will-change:transform;transform:translate3d(0,0,0);
  transition:transform .3s var(--ease-spring),box-shadow .2s var(--ease-out),filter .2s;
  cursor:grab;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 27%,var(--hi) 0%,var(--mid) 42%,var(--mid) 66%,var(--lo) 100%);
  box-shadow:
    0 var(--edge) 0 -1px var(--lo),
    0 calc(var(--edge) + 3px) 9px rgba(60,38,16,.34),
    inset 0 -3px 6px rgba(0,0,0,.2),
    inset 0 3px 5px rgba(255,255,255,.26);
}
.bead .glyph{width:30%;height:30%;opacity:0;transition:opacity .2s}
body.symbols .bead .glyph{opacity:.34}
.bead .glyph path,.bead .glyph circle{fill:rgba(255,255,255,.95);stroke:none}

.bead.lifted{
  transition:box-shadow .18s var(--ease-out),filter .18s;cursor:grabbing;z-index:60;
  box-shadow:
    0 var(--edge) 0 -1px var(--lo),
    0 calc(var(--edge) + 4px) 10px rgba(60,38,16,.4),
    inset 0 -3px 6px rgba(0,0,0,.2),
    inset 0 3px 5px rgba(255,255,255,.3),
    0 0 0 3px rgba(255,255,255,.6);
  filter:brightness(1.04);
}
.bead.dragging{transition:none}
.bead.selected{filter:brightness(1.08) saturate(1.05);animation:heldPulse 1.5s ease-in-out infinite}
@keyframes heldPulse{
  0%,100%{box-shadow:0 var(--edge) 0 -1px var(--lo),0 calc(var(--edge) + 4px) 10px rgba(60,38,16,.4),
    inset 0 -3px 6px rgba(0,0,0,.2),inset 0 3px 5px rgba(255,255,255,.3),0 0 0 3px rgba(255,255,255,.6)}
  50%{box-shadow:0 var(--edge) 0 -1px var(--lo),0 calc(var(--edge) + 4px) 10px rgba(60,38,16,.4),
    inset 0 -3px 6px rgba(0,0,0,.2),inset 0 3px 5px rgba(255,255,255,.3),0 0 0 6px rgba(255,255,255,.22)}}
.bead.hint-src{animation:hintBead .8s ease-in-out infinite}
@keyframes hintBead{0%,100%{filter:brightness(1)}50%{filter:brightness(1.32) saturate(1.2)}}
.bead.settled{animation:settle .34s var(--ease-out)}
@keyframes settle{38%{transform:translate3d(var(--tx),calc(var(--ty) + 3px),0) scaleY(.9) scaleX(1.06)}}

.col-done{
  position:absolute;border-radius:99px;pointer-events:none;z-index:1;
  background:rgba(46,140,84,.14);box-shadow:inset 0 0 0 2px rgba(46,140,84,.35);
  opacity:0;transition:opacity .25s;
}
.col-done.on{opacity:1}

/* ---------------------------------------------------------
   HUD
   --------------------------------------------------------- */
.hud{flex:0 0 auto;display:flex;flex-direction:column;gap:11px;padding-top:4px;align-items:center}
.stats{display:flex;gap:26px}
.stat{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:56px}
.stat-v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.stat-k{font-size:10.5px;color:var(--text-dim);letter-spacing:.07em}
.tools{display:flex;gap:10px}
.tool{
  font:inherit;font-size:12.5px;font-weight:600;color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:0;border-radius:var(--r-md);padding:9px 17px;cursor:pointer;
  background:var(--panel);transition:transform .12s,background .15s;
}
.tool:active{transform:translateY(2px);background:var(--panel-hi)}
.tool[disabled]{opacity:.32;pointer-events:none}
.tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.nudge[hidden],.coach[hidden],.toast[hidden]{display:none}
.nudge{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 96px);
  display:flex;align-items:center;gap:8px;
  background:var(--meta);color:var(--text);
  font-size:14px;font-weight:600;padding:11px 18px;border-radius:999px;
  box-shadow:0 10px 26px rgba(0,0,0,.4);animation:nudgeIn .3s var(--ease-spring);
  pointer-events:none;z-index:120;
}
@keyframes nudgeIn{from{opacity:0;transform:translate(-50%,10px)}}
@media (min-width:900px){.nudge{bottom:34px}}

.coach{
  position:absolute;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 130px);
  background:var(--meta);border-radius:var(--r-md);padding:14px 16px;
  display:flex;align-items:center;gap:12px;z-index:110;
  box-shadow:0 12px 30px rgba(0,0,0,.45);animation:coachIn .35s var(--ease-spring);
}
.coach p{margin:0;font-size:14px;line-height:1.45;color:var(--text-dim);flex:1}
@keyframes coachIn{from{opacity:0;transform:translateY(14px)}}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(env(safe-area-inset-top) + 14px);z-index:400;
  display:flex;align-items:center;gap:11px;max-width:calc(100% - 28px);
  background:var(--meta);color:var(--text);padding:12px 18px;border-radius:999px;
  box-shadow:0 14px 34px rgba(0,0,0,.45);animation:toastIn .38s var(--ease-spring);
}
.toast .t-ic{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#ffc978,var(--amber-deep));font-size:15px;
}
.toast b{display:block;font-size:14px}
.toast span{font-size:12px;color:var(--text-dim)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-16px)}}

/* ---------------------------------------------------------
   Modals
   --------------------------------------------------------- */
.modal-layer{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;
  background:var(--scrim);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  animation:fadeIn .2s;
}
.modal-layer[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}}
.modal{
  width:100%;max-width:330px;text-align:center;
  background:linear-gradient(170deg,var(--modal-1),var(--modal-2));
  border-radius:26px;padding:26px 22px 22px;
  box-shadow:0 26px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09);
  animation:modalIn .34s var(--ease-spring);display:flex;flex-direction:column;gap:12px;
}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.94)}}
.modal-title{margin:0 0 4px;font-size:21px;font-weight:700}

.win-stars{display:flex;justify-content:center;gap:10px;margin-bottom:2px}
.win-stars svg{width:46px;height:46px}
.win-stars .st{fill:var(--panel-hi)}
.win-stars .st.on{fill:#f5b73f;filter:drop-shadow(0 4px 10px rgba(245,183,63,.5));animation:starPop .5s var(--ease-spring) backwards}
.win-stars svg:nth-child(1) .st.on{animation-delay:.05s}
.win-stars svg:nth-child(2) .st.on{animation-delay:.18s}
.win-stars svg:nth-child(3) .st.on{animation-delay:.34s}
@keyframes starPop{from{transform:scale(0) rotate(-45deg);opacity:0}}
.win-title{margin:0;font-size:29px;font-weight:800;letter-spacing:-.02em}
.win-level{margin:0;color:var(--text-dim);font-size:14px}
.win-stats{display:flex;justify-content:center;gap:32px;margin:8px 0 6px}
.win-stats div{display:flex;flex-direction:column;gap:2px}
.win-stats span{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.win-stats small{font-size:10.5px;color:var(--text-dim);letter-spacing:.07em}
.win-note{margin:0 0 8px;font-size:13px;color:var(--amber);font-weight:600}
.win-note[hidden]{display:none}
.win-buttons{display:flex;flex-direction:column;gap:10px}

.modal-install{max-width:380px;text-align:left;max-height:84vh;overflow-y:auto}
.install-lead{margin:0;font-size:14.5px;line-height:1.55;color:var(--text)}
.install-why{
  margin:4px 0 2px;font-size:12.5px;line-height:1.5;color:var(--text-dim);
  background:var(--panel);border-radius:var(--r-md);padding:11px 13px;
}
.install-guide h4{
  margin:14px 0 8px;font-size:13px;font-weight:700;color:var(--amber);
  letter-spacing:.05em;text-transform:uppercase;
}
.install-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.install-steps li{font-size:14px;line-height:1.5;color:var(--text-dim)}
.install-steps b{color:var(--text)}
.install-more{margin-top:14px;border-top:1px solid var(--hairline);padding-top:10px}
.install-more summary{
  font-size:13.5px;color:var(--text-dim);cursor:pointer;list-style:none;
  padding:4px 0;font-weight:600;
}
.install-more summary::-webkit-details-marker{display:none}
.install-more summary::before{content:"▸ ";color:var(--amber)}
.install-more[open] summary::before{content:"▾ "}
.install-more h4{margin-top:12px}

/* a quiet dot when the browser is ready to install right now */
#btn-install{position:relative}
#btn-install.ready::after{
  content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 2px var(--bg-2);
}

.modal-share{max-width:360px}
.share-msg{
  margin:0 0 6px;font-size:13.5px;line-height:1.5;color:var(--text-dim);
  background:var(--panel);border-radius:var(--r-md);padding:11px 13px;text-align:left;
  word-break:break-word;
}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px;margin:6px 0 10px}
.share-opt{
  font:inherit;border:0;background:none;cursor:pointer;padding:4px 0;
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text);
  transition:transform .12s var(--ease-out);
}
.share-opt:active{transform:translateY(2px)}
.share-opt i{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--tint);box-shadow:0 4px 12px rgba(0,0,0,.22);
}
.share-opt svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share-opt svg.solid{fill:#fff;stroke:none}
.share-opt span{font-size:11px;color:var(--text-dim);letter-spacing:.01em}

.row-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 4px;font-size:16px;cursor:pointer;border-bottom:1px solid var(--hairline);
}
.row-toggle input{position:absolute;opacity:0;pointer-events:none}
.row-toggle i{flex:0 0 50px;height:29px;border-radius:99px;background:var(--panel-hi);position:relative;transition:background .2s}
.row-toggle i::after{
  content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;
  background:#fff;transition:transform .22s var(--ease-spring);box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.row-toggle input:checked + i{background:var(--amber)}
.row-toggle input:checked + i::after{transform:translateX(21px)}
.row-note{margin:-4px 0 6px;font-size:12.5px;color:var(--text-dim);text-align:left;line-height:1.45}

.haptic-tick{
  position:fixed;bottom:0;left:0;width:1px;height:1px;
  opacity:0;pointer-events:none;overflow:hidden;z-index:-1;
}

#confetti{position:fixed;inset:0;z-index:300;pointer-events:none;display:none}
#confetti.on{display:block}

/* ---------------------------------------------------------
   Wider screens
   --------------------------------------------------------- */
@media (min-width:760px){
  .screen{padding:16px 22px}
  .play{gap:18px}
  .dot{width:16px;height:16px}
  .card{padding:13px 15px;border-radius:11px}
  .stats{gap:44px}
  .home-wrap{max-width:440px}
  .brand-name{font-size:21px}
}
@media (min-width:900px){
  .play{
    display:grid;align-items:center;gap:22px;
    grid-template-columns:minmax(180px,220px) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
  }
  .card-zone{grid-column:1;grid-row:1;align-self:end}
  .hud{grid-column:1;grid-row:2;align-self:start;align-items:stretch;gap:20px;padding-top:0}
  .board-area{grid-column:2;grid-row:1 / span 2;height:100%}
  .stats{flex-direction:column;gap:10px}
  .stat{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;padding:0 4px}
  .stat-k{order:-1}
  .tools{flex-direction:column;gap:8px}
  .tool{flex-direction:row;justify-content:flex-start;gap:11px;padding:11px 15px;font-size:14px}
}
/* Phones. The header carries a logo, a wordmark and five controls, which
   together need ~383px — more than any phone under 412px has. Shrink the
   controls first, and below 360px let the logo stand in for the wordmark. */
@media (max-width:430px){
  .icon-btn{width:36px;height:36px;flex-basis:36px}
  .icon-btn svg{width:19px;height:19px}
  .brand-mark{width:31px;height:31px;flex-basis:31px}
  .brand-name{font-size:16px;letter-spacing:.1em}
  .brand{gap:7px}
  .apphead{gap:7px}
  .apphead-actions{gap:3px}
}
@media (max-width:360px){
  .screen{padding-left:10px;padding-right:10px}
  .brand-name{display:none}
  .icon-btn{width:34px;height:34px;flex-basis:34px}
  .home-meters{gap:7px}
  .meter{padding:9px 4px}
  .meter b{font-size:17px}
  .meter span{font-size:9.5px;letter-spacing:0}
  .diff-picker{gap:6px}
  .diff{padding:9px 4px}
  .diff b{font-size:13.5px}
  .diff span{font-size:9.5px}
  .btn{font-size:16px;padding:13px 22px}
  .btn-primary{font-size:18px;padding:15px 30px}
  .home-title{letter-spacing:.06em}
  .foot-links{gap:6px;font-size:12px}
}

@media (max-height:640px){
  .card-caption{display:none}
  .hud{gap:8px;padding-top:2px}
  .stat-v{font-size:17px}
  .tool{padding:7px 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.08s!important}
}

/* end of stylesheet — Nebula Tactic */