:root{
  --brand:#3bb36b;
  --accent:#2b6cb0;
  --warm:#ff914d;
  --bg:#f7fbf8;
  --text:#1f2937;
}
*{box-sizing:border-box}
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:"Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
header{ display:flex; align-items:center; gap:16px; padding:12px 16px; background:#fff;
  border-bottom:4px solid var(--brand); position:sticky; top:0; z-index:5; }
header img.logo{ height:56px }
h1{ font-size:clamp(22px,3.5vw,34px); margin:0; line-height:1.1 }
.badge{ font-weight:800; background:linear-gradient(90deg,var(--brand),var(--warm));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.container{ max-width:1200px; margin:0 auto; padding:16px }
.controls{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:10px 0 18px }
.controls .pill{ background:#fff; border:2px dashed var(--brand); border-radius:999px; padding:8px 12px; display:flex; align-items:center; gap:8px }
.controls input, .controls select, .controls button, .controls label{ font-size:18px }
.controls input, .controls select{ padding:10px 14px; border-radius:12px; border:2px solid var(--brand); background:#fff }
.controls button{ padding:12px 16px; border-radius:16px; border:0; background:linear-gradient(90deg,var(--brand),var(--accent));
  color:#fff; font-weight:900; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.12); transition:transform .06s ease }
.controls button:active{ transform:scale(.98) }

.board{ background:#fff; border-radius:22px; padding:16px; border:3px solid rgba(0,0,0,.06);
  box-shadow:0 14px 40px rgba(0,0,0,.08); position:relative; overflow:hidden }
.grid{ display:grid; gap:8px; user-select:none; touch-action:manipulation }
.tile{ background:#ffffff; border:3px solid rgba(0,0,0,.06); border-radius:16px; min-height:84px;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size: clamp(22px, 3.5vw, 32px);
  position:relative; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.06); transition:transform .08s ease }
.tile:active{ transform:scale(.98) }
.tile.target{ outline:4px solid rgba(59,179,107,.35) }
.tile.wrong{ animation: nope .25s linear }
@keyframes nope{
  0%{ transform:translateX(0) } 25%{ transform:translateX(-6px) } 50%{ transform:translateX(6px) } 75%{ transform:translateX(-4px) } 100%{ transform:translateX(0) }
}
.token{ position:absolute; width:54px; height:54px; display:flex; align-items:center; justify-content:center;
  font-size:36px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.2)); transition: all .25s ease }
.goal{ position:absolute; width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-size:34px; opacity:.9 }
.info{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0 0 }
.badge2{ background:#fff; border:2px solid #e5e7eb; border-radius:12px; padding:6px 10px; font-weight:800 }
#confetti{ position:fixed; inset:0; pointer-events:none; z-index:10 }
footer{ text-align:center; padding:28px 12px 40px; color:#4b5563; font-size:14px }
@media print{ header,.controls,.board,footer,#confetti{ display:none !important } }