:root{
  --bg0:#2a211a; --bg1:#1a140f;
  --ink:#f3e7d6; --ink-dim:#b7a187;
  --line:#4a3a2c;
  --ok:#7fd18a; --bad:#e0795f;
  --panel:rgba(34,26,19,.82);
  --panel-line:rgba(120,94,66,.4);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:radial-gradient(120% 120% at 50% 18%,var(--bg0),var(--bg1));
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:none;
}
#stage{position:fixed;inset:0;display:flex}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* top bar */
#topbar{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;gap:.6rem;
  padding:max(.6rem,env(safe-area-inset-top)) 1rem .6rem;
  pointer-events:none;
}
#topbar .title{font-size:1.05rem;font-weight:600;letter-spacing:.01em}
#topbar .title sup{font-size:.62em}
#topbar .stats{
  margin-left:auto;display:flex;gap:.4rem;align-items:center;
  font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:.9rem;
}
#topbar .stats .dot{opacity:.5}
.icon-btn{
  pointer-events:auto;background:transparent;border:none;color:var(--ink);
  font-size:1.4rem;line-height:1;padding:.1rem .35rem;cursor:pointer;border-radius:8px;
}
.icon-btn:active{background:rgba(255,255,255,.08)}

/* menu */
#menu{
  position:absolute;top:3rem;right:.8rem;z-index:6;
  background:var(--panel);backdrop-filter:blur(8px);
  border:1px solid var(--panel-line);border-radius:12px;
  display:flex;flex-direction:column;min-width:11rem;overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
#menu[hidden]{display:none}
#menu button{
  background:transparent;border:none;color:var(--ink);text-align:left;
  padding:.7rem 1rem;font:inherit;font-size:.92rem;cursor:pointer;
  border-bottom:1px solid rgba(120,94,66,.18);
}
#menu button:last-child{border-bottom:none}
#menu button:active{background:rgba(255,255,255,.07)}

/* controls */
#controls{
  position:absolute;left:0;right:0;bottom:6.2rem;z-index:5;
  display:flex;justify-content:center;align-items:flex-end;gap:.5rem;
  padding:0 .5rem;pointer-events:none;
}
#controls[hidden]{display:none}
.ctl-group{
  pointer-events:auto;background:var(--panel);backdrop-filter:blur(8px);
  border:1px solid var(--panel-line);border-radius:14px;padding:.5rem .5rem;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.ctl-label{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.ctl-group.act{flex-direction:row;align-items:center;justify-content:center;gap:.5rem}
.ctl-group.act button{margin-top:0}   /* override the overlay .primary rule's margin-top */
.ctl-group button{
  background:#3a2d22;border:1px solid var(--panel-line);color:var(--ink);
  font:inherit;font-weight:600;border-radius:10px;cursor:pointer;
  min-width:2rem;min-height:2rem;font-size:.9rem;
}
.ctl-group button:active{background:#4a392b;transform:translateY(1px)}
.ctl-group button:disabled{opacity:.4}
.ctl-group.act button{padding:.55rem 1.1rem;min-height:2.3rem}
.ctl-group button.primary{background:#7a5a36;border-color:#9c7647}
.ctl-group button.primary:disabled{background:#3a2d22;border-color:var(--panel-line)}
#place-btn:not(:disabled){background:#3f6a45;border-color:var(--ok);color:#eafff0}

/* tray */
#tray-wrap{position:absolute;left:0;right:0;bottom:0;z-index:4}
#tray{
  display:flex;gap:.5rem;overflow-x:auto;overflow-y:hidden;
  padding:.5rem .8rem calc(.5rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(20,15,10,.92),rgba(20,15,10,0));
  scrollbar-width:none;touch-action:pan-x;
}
#tray::-webkit-scrollbar{display:none}
/* edge cues: fade + chevron when there are more pieces to scroll to */
#tray-wrap::before,#tray-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:2.75rem;pointer-events:none;
  display:flex;align-items:center;z-index:1;opacity:0;transition:opacity .2s ease;
  font-size:1.3rem;color:var(--ink-dim);
}
#tray-wrap::before{
  left:0;justify-content:flex-start;padding-left:.5rem;content:"‹";
  background:linear-gradient(to right,rgba(20,15,10,.96),rgba(20,15,10,0));
}
#tray-wrap::after{
  right:0;justify-content:flex-end;padding-right:.5rem;content:"›";
  background:linear-gradient(to left,rgba(20,15,10,.96),rgba(20,15,10,0));
}
#tray-wrap.more-left::before{opacity:1}
#tray-wrap.more-right::after{opacity:1}
.tray-piece{
  flex:0 0 auto;width:4.6rem;height:4.6rem;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--panel-line);
  cursor:pointer;position:relative;
}
.tray-piece.selected{outline:2px solid var(--ink);outline-offset:1px}
.tray-piece.placed{opacity:.28;pointer-events:none;filter:grayscale(.5)}
.tray-piece canvas{width:100%;height:100%;display:block}

/* toast */
#toast{
  position:absolute;top:5.6rem;left:50%;transform:translateX(-50%);z-index:7;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:999px;
  padding:.45rem .9rem;font-size:.85rem;color:var(--ink);
  box-shadow:0 8px 22px rgba(0,0,0,.4);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
#toast[hidden]{display:none}
#toast.bad{color:var(--bad)}

/* overlays */
#win,#help,#puzzles{
  position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  background:rgba(15,11,8,.66);backdrop-filter:blur(4px);padding:1.5rem;
}
#win[hidden],#help[hidden],#puzzles[hidden]{display:none}

/* puzzle picker */
#puzzle-list{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0 .2rem}
.puzzle-opt{
  display:flex;flex-direction:column;gap:.15rem;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--panel-line);
  border-radius:12px;padding:.65rem .8rem;color:var(--ink);font:inherit;cursor:pointer;
}
.puzzle-opt:active{background:rgba(255,255,255,.07)}
.puzzle-opt.current{border-color:#9c7647;background:rgba(156,118,71,.14)}
.puzzle-opt.kbd{outline:2px solid var(--ink);outline-offset:1px}   /* keyboard highlight */
.puzzle-opt .pz-name{font-weight:600}
.puzzle-opt.current .pz-name::after{content:" ✓";color:var(--ok)}
.puzzle-opt .pz-meta{font-size:.78rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.puzzle-opt .pz-blurb{font-size:.82rem;color:var(--ink-dim);line-height:1.35}
.win-card,.help-card{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:18px;
  padding:1.6rem 1.5rem;max-width:24rem;width:100%;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.help-card{text-align:left}
.win-title{letter-spacing:.04em}
.win-card h2,.help-card h2{margin:.3rem 0 .6rem;font-size:1.45rem}
.win-card h2{font-size:1.7rem}
#win-stats{color:var(--ink-dim);font-variant-numeric:tabular-nums}
.help-card ul{margin:.6rem 0;padding-left:1.1rem;line-height:1.6;font-size:.92rem}
.help-card .muted{color:var(--ink-dim);font-size:.82rem;margin-top:.8rem}
.help-card .ok{color:var(--ok)}
/* key legend (revealed once a hardware keyboard is seen) */
#help-keys[hidden]{display:none}
.keys-title{margin:.7rem 0 .2rem;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.help-card ul.keys{list-style:none;padding-left:0;margin:.2rem 0;font-size:.82rem;line-height:1.9;color:var(--ink-dim)}
.keys b{
  display:inline-block;background:#3a2d22;border:1px solid var(--panel-line);border-radius:5px;
  padding:0 .34em;margin:0 .06em;color:var(--ink);font-weight:600;font-size:.9em;line-height:1.5;
}
.primary{
  margin-top:1rem;background:#7a5a36;border:1px solid #9c7647;color:#fff;
  font:inherit;font-weight:600;font-size:1rem;padding:.7rem 1.4rem;border-radius:12px;cursor:pointer;
}
.primary:active{transform:translateY(1px)}
.win-actions{display:flex;gap:.6rem;justify-content:center}
.secondary{
  margin-top:1rem;background:transparent;border:1px solid var(--panel-line);color:var(--ink);
  font:inherit;font-weight:600;font-size:1rem;padding:.7rem 1.2rem;border-radius:12px;cursor:pointer;
}
.secondary:active{transform:translateY(1px);background:rgba(255,255,255,.06)}

@media (max-width:360px){
  .ctl-group.act button{padding:.5rem .9rem}
}