:root{
  --bg:#0f2229; --panel:#16313a; --panel2:#1b3a44;
  --wood1:#c98a4b; --wood2:#95622f; --woodDark1:#7a5a3e; --woodDark2:#57402a;
  --slot:#4fd5c4; --gold:#ffc94d; --ink:#eaf4f4; --muted:#8fb3b3;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  background:
    radial-gradient(1200px 500px at 50% -200px, #1a3d49 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center;
  padding:14px 12px 28px;
  user-select:none; -webkit-user-select:none;
}
header{width:100%; max-width:500px; text-align:center; margin-bottom:8px;}
h1{
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.55rem;
  margin:0; letter-spacing:.5px;
  color:var(--gold);
  text-shadow:0 2px 0 rgba(0,0,0,.35);
}
.sub{margin:2px 0 0; font-size:.8rem; color:var(--muted);}

/* level pegs */
#tabs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:10px 0 12px;}
.tab{
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:.95rem;
  border:none; border-radius:10px; padding:8px 13px; cursor:pointer;
  color:#3a2612;
  background:linear-gradient(180deg,var(--wood1),var(--wood2));
  box-shadow:0 3px 0 #4a341d, inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .08s;
}
.tab:active{transform:translateY(2px); box-shadow:0 1px 0 #4a341d;}
.tab.current{outline:3px solid var(--gold); outline-offset:2px;}
.tab.locked{
  background:linear-gradient(180deg,#3a4c52,#2a383d); color:#6d8288;
  box-shadow:0 3px 0 #1a2529;
}
.tab .check{color:#1f7d3f; margin-left:4px;}

#stage{
  position:relative; width:100%; max-width:500px;
  border-radius:14px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 4px #0b1a20;
}
canvas{display:block; width:100%; height:auto; touch-action:none; background:#122a33;}

/* piece shelf */
#shelfWrap{width:100%; max-width:500px; margin-top:14px;}
.shelfLabel{
  font-family:'Fredoka',sans-serif; font-size:.8rem; font-weight:600;
  color:var(--muted); letter-spacing:1.5px; text-transform:uppercase;
  margin:0 0 6px 4px;
}
#tray{
  display:flex; gap:12px; align-items:flex-end;
  padding:12px 12px 10px;
  border-radius:12px;
  background:linear-gradient(180deg,var(--woodDark1) 0%, var(--woodDark2) 100%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4), 0 4px 0 #3b2b1c;
  min-height:88px;
}
.trayItem{position:relative; text-align:center; touch-action:none;}
.shape{
  width:54px; height:54px; margin:0 auto;
  background:linear-gradient(160deg,#e0a55f 0%, #b0763a 55%, #8a5a28 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35);
  border-radius:6px;
  cursor:grab;
  transition:transform .1s;
}
.trayItem:not(.empty) .shape:active{transform:scale(1.08);}
.shape.rr, #ghost.rr{clip-path:polygon(0 0, 100% 100%, 0 100%); border-radius:0;}
.shape.rl, #ghost.rl{clip-path:polygon(100% 0, 0 100%, 100% 100%); border-radius:0;}
.shape.sw, #ghost.sw{
  clip-path:polygon(0 0, 100% 100%, 0 100%); border-radius:0;
  background:linear-gradient(160deg,#7fe3d5 0%, #35a897 55%, #1f7c6f 100%);
}
.shape.tr, #ghost.tr{
  clip-path:polygon(0 45%, 100% 45%, 100% 100%, 0 100%); border-radius:0;
  background:linear-gradient(180deg,
    #ff7a6e 45%, #ff7a6e 57%,
    #b0763a 57%, #8a5a28 100%);
}
.shape.cb, #ghost.cb{
  background:
    linear-gradient(115deg, transparent 46%, rgba(60,44,26,.55) 46% 49%, transparent 49%),
    linear-gradient(20deg, transparent 60%, rgba(60,44,26,.45) 60% 63%, transparent 63%),
    linear-gradient(160deg,#dcc09a 0%, #ab8a5f 55%, #83653f 100%);
}
.plabel{font-size:.68rem; color:#d8c3a5; margin-top:5px; font-weight:600;}
.count{
  position:absolute; top:-7px; right:-4px;
  background:var(--gold); color:#3a2612;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:.75rem;
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 3px rgba(0,0,0,.4); z-index:2;
}
.trayItem.empty .shape{filter:grayscale(1) brightness(.5); cursor:default;}
.trayItem.empty .count{background:#3a4c52; color:#6d8288;}

#controls{display:flex; gap:10px; width:100%; max-width:500px; margin-top:12px;}
.btn{
  flex:1; border:none; border-radius:12px; padding:13px 8px; cursor:pointer;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.02rem;
  color:#3a2612;
  background:linear-gradient(180deg,var(--wood1),var(--wood2));
  box-shadow:0 4px 0 #4a341d, inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .08s;
}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 #4a341d;}
.btn.primary{
  background:linear-gradient(180deg,#ffd66e,#f0a92e);
  box-shadow:0 4px 0 #9c6a12, inset 0 1px 0 rgba(255,255,255,.5);
}
.btn.primary:active{box-shadow:0 1px 0 #9c6a12;}
.btn.ghost{
  background:linear-gradient(180deg,#2a4750,#20363d); color:var(--muted);
  box-shadow:0 4px 0 #14252a;
}
.btn.ghost:active{box-shadow:0 1px 0 #14252a;}

#hint{
  width:100%; max-width:500px; margin-top:12px; text-align:center;
  font-size:.82rem; color:var(--muted); line-height:1.45;
}

/* overlays */
#toast{
  position:absolute; left:50%; top:14px; transform:translateX(-50%) translateY(-90px);
  background:#0b1a20ee; color:var(--ink);
  padding:9px 18px; border-radius:999px;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:.95rem;
  white-space:nowrap; pointer-events:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 4px 14px rgba(0,0,0,.4); z-index:5;
}
#toast.show{transform:translateX(-50%) translateY(0);}
#overlay{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; flex-direction:column;
  background:rgba(10,22,28,.82); backdrop-filter:blur(2px);
  text-align:center; z-index:6; padding:20px;
}
#overlay.show{display:flex;}
#overlay h2{
  font-family:'Fredoka',sans-serif; font-size:1.7rem; margin:0 0 6px; color:var(--gold);
}
#overlay p{margin:0 0 18px; color:var(--ink); font-size:.95rem;}
#overlay .btn{flex:none; padding:13px 30px;}

#ghost{
  position:fixed; width:54px; height:54px; pointer-events:none; z-index:50;
  display:none; opacity:.9;
  background:linear-gradient(160deg,#e0a55f 0%, #b0763a 55%, #8a5a28 100%);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));
  border-radius:6px;
}
#ghost.rr{clip-path:polygon(0 0, 100% 100%, 0 100%); border-radius:0;}
#ghost.rl{clip-path:polygon(100% 0, 0 100%, 100% 100%); border-radius:0;}

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