/* ============================================================
   Games Unlimited — v2 design system (clean · tactile · confident)
   ============================================================ */
:root {
  --canvas:   #f6f5f2;
  --surface:  #ffffff;
  --surface-2:#f2f1ec;
  --sunk:     #ecebe5;
  --ink:      #16171a;
  --ink-2:    #5c616b;
  --ink-3:    #9297a0;
  --line:     #e6e3db;
  --line-2:   #d6d2c8;
  --accent:   #2f6df6;

  --q-queens:#8b5cf6; --q-tango:#f59e0b; --q-zip:#10b981;
  --q-sudoku:#2563eb; --q-pinpoint:#f43f6a; --q-crossclimb:#6366f1;
  --c: var(--accent);

  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --sh-1: 0 1px 2px rgba(20,22,28,.05), 0 2px 6px rgba(20,22,28,.05);
  --sh-2: 0 4px 14px rgba(20,22,28,.09), 0 18px 42px rgba(20,22,28,.10);
  --sh-3: 0 12px 34px rgba(20,22,28,.16), 0 34px 70px rgba(20,22,28,.20);
  --ease: cubic-bezier(.2,.7,.3,1);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body{
  min-height:100vh; background:var(--canvas); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
}
button{ font-family:inherit; }
::selection{ background:color-mix(in srgb,var(--c) 30%,transparent); }

/* ---------------- App bar ---------------- */
.appbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:14px 22px; background:color-mix(in srgb,var(--canvas) 82%,transparent);
  backdrop-filter:saturate(1.3) blur(12px); -webkit-backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:11px; font-weight:750; letter-spacing:-.02em; font-size:16px; cursor:pointer; }
.brand .glyph{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; font-size:15px; font-weight:800;
  background:linear-gradient(135deg,var(--q-queens),var(--q-crossclimb)); box-shadow:var(--sh-1);
}
.brand .thin{ color:var(--ink-3); font-weight:600; }
.back-btn{
  display:none; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-weight:600; font-size:13.5px; padding:8px 14px 8px 12px; border-radius:999px; cursor:pointer; transition:.16s var(--ease);
}
.back-btn:hover{ background:var(--surface-2); transform:translateX(-2px); border-color:var(--line-2); }
.appbar.in-game .back-btn{ display:inline-flex; }
.spacer{ margin-left:auto; }
.icon-toggle{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  cursor:pointer; font-size:15px; transition:.16s var(--ease);
}
.icon-toggle:hover{ background:var(--surface-2); }

.stage{ flex:1; width:100%; }

/* ---------------- Home ---------------- */
.home{ max-width:1000px; margin:0 auto; padding:48px 22px 64px; }
.hero{ margin-bottom:40px; }
.kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:16px;
}
.kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--q-zip); box-shadow:0 0 0 4px color-mix(in srgb,var(--q-zip) 22%,transparent); }
.hero h1{ margin:0 0 14px; font-size:clamp(32px,6.4vw,56px); line-height:1.02; letter-spacing:-.04em; font-weight:820; max-width:12ch; }
.hero p{ margin:0; max-width:56ch; color:var(--ink-2); font-size:16px; line-height:1.6; }

.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.card{
  position:relative; overflow:hidden; text-align:left; cursor:pointer; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
  display:flex; flex-direction:column; gap:13px;
}
.card::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); opacity:0; transition:opacity .2s; }
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.card:hover::after{ opacity:1; }
.card .top{ display:flex; align-items:center; gap:13px; }
.card .tile{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:23px; flex:none;
  background:color-mix(in srgb,var(--c) 14%,var(--surface)); border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
}
.card h3{ margin:0; font-size:18px; letter-spacing:-.02em; }
.card .tagline{ margin:2px 0 0; font-size:11.5px; color:var(--ink-3); font-weight:650; text-transform:uppercase; letter-spacing:.05em; }
.card .blurb{ color:var(--ink-2); font-size:13.5px; line-height:1.55; margin:0; flex:1; }
.card .foot{ display:flex; align-items:center; justify-content:space-between; padding-top:11px; border-top:1px solid var(--line); }
.card .stat{ font-size:12px; color:var(--ink-3); font-weight:600; }
.card .stat b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.card .play{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; color:var(--c); }
.card .play .arrow{ transition:transform .2s var(--ease); }
.card:hover .play .arrow{ transform:translateX(4px); }

/* ---------------- Game view ---------------- */
.game{ max-width:640px; margin:0 auto; padding:26px 16px 72px; animation:rise .3s var(--ease); }
@keyframes rise{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }

.game-head{ text-align:center; margin-bottom:18px; }
.game-head .badge{ display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:22px; letter-spacing:-.025em; }
.game-head .badge .em{ font-size:24px; }
.game-head p{ margin:9px auto 0; max-width:50ch; color:var(--ink-2); font-size:13.5px; line-height:1.55; }

.hud{ display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; margin-bottom:16px; }
.hud .chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:8px 14px; box-shadow:var(--sh-1); font-weight:750; font-size:15px; font-variant-numeric:tabular-nums;
}
.hud .chip .k{ color:var(--ink-3); font-weight:650; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; }
.hud .chip .ico{ font-size:14px; opacity:.8; }

.controls{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.btn{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-weight:650; font-size:13.5px; padding:10px 16px; border-radius:11px; cursor:pointer; box-shadow:var(--sh-1);
  transition:transform .1s var(--ease),background .16s,border-color .16s;
}
.btn .bi{ font-size:14px; line-height:1; }
.btn:hover{ background:var(--surface-2); border-color:var(--line-2); }
.btn:active{ transform:translateY(1px) scale(.985); }
.btn.primary{
  color:#fff; border-color:transparent; box-shadow:0 3px 12px color-mix(in srgb,var(--c) 42%,transparent);
  background:var(--c);
}
.btn.primary:hover{ filter:brightness(1.06); background:var(--c); }
.btn.ghost{ background:transparent; box-shadow:none; }
.sel{
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:650; font-size:13.5px;
  padding:10px 12px; border-radius:11px; cursor:pointer; box-shadow:var(--sh-1);
}

.status{ text-align:center; min-height:20px; margin:2px 0 14px; font-weight:650; font-size:13.5px; color:var(--ink-2); }
.status.good{ color:var(--q-zip); } .status.bad{ color:var(--q-pinpoint); }

.board-wrap{ display:flex; justify-content:center; }
.board{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:16px;
}
.grid{ display:grid; gap:0; touch-action:none; }
.cell{ position:relative; display:flex; align-items:center; justify-content:center; user-select:none; -webkit-user-select:none; cursor:pointer; font-weight:700; transition:background .1s; }
.hint{ color:var(--ink-3); font-size:12.5px; text-align:center; margin-top:16px; line-height:1.55; max-width:46ch; margin-left:auto; margin-right:auto; }

/* ---------- Queens ---------- */
.queens .grid{ border-radius:10px; overflow:hidden; box-shadow:inset 0 0 0 2px rgba(0,0,0,.22); }
:root[data-theme="dark"] .queens .grid{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.14); }
.queens .cell{ border:1px solid rgba(0,0,0,.13); }
:root[data-theme="dark"] .queens .cell{ border-color:rgba(0,0,0,.3); }
.queens .cell:hover{ filter:brightness(1.07); }
.queens .cell .mark{ font-size:40%; opacity:.5; color:rgba(0,0,0,.62); animation:pop .16s var(--ease); }
.queens .cell .q{ font-size:64%; animation:qpop .28s var(--ease); filter:drop-shadow(0 2px 2px rgba(0,0,0,.32)); }
.queens .cell.rb-top{ border-top:3px solid #111; } .queens .cell.rb-bottom{ border-bottom:3px solid #111; }
.queens .cell.rb-left{ border-left:3px solid #111; } .queens .cell.rb-right{ border-right:3px solid #111; }
:root[data-theme="dark"] .queens .cell.rb-top,:root[data-theme="dark"] .queens .cell.rb-bottom,:root[data-theme="dark"] .queens .cell.rb-left,:root[data-theme="dark"] .queens .cell.rb-right{ border-color:#000; }
.queens .cell.bad-cell::after{ content:""; position:absolute; inset:2px; border-radius:5px; box-shadow:inset 0 0 0 3px var(--q-pinpoint); animation:shake .3s; }
@keyframes qpop{ 0%{transform:scale(0) rotate(-22deg);} 60%{transform:scale(1.2) rotate(5deg);} 100%{transform:scale(1);} }
@keyframes pop{ from{transform:scale(.4);opacity:0;} to{opacity:.5;} }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }

/* ---------- Tango ---------- */
.tango .grid{ border-radius:10px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line-2); }
.tango .cell{ background:var(--surface); font-size:150%; border:1px solid var(--line); }
.tango .cell:hover{ background:var(--surface-2); }
.tango .cell.fixed{ background:var(--sunk); }
.tango .cell .sym{ animation:qpop .26s var(--ease); line-height:1; }
.tango .sym-sun{ color:var(--q-tango); } .tango .sym-moon{ color:var(--q-crossclimb); }
.tango .cell.bad-cell{ background:color-mix(in srgb,var(--q-pinpoint) 18%,var(--surface)); }
.tango .con{
  position:absolute; z-index:5; background:var(--surface); color:var(--ink); font-size:12px; font-weight:800;
  width:21px; height:21px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--line-2); box-shadow:var(--sh-1);
}

/* ---------- Zip ---------- */
.zip .grid{ border-radius:10px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line-2); }
.zip .cell{ background:var(--surface); border:1px solid var(--line); }
.zip .cell.on{ background:color-mix(in srgb,var(--q-zip) 13%,var(--surface)); }
.zip .num{ width:70%; height:70%; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--surface); font-weight:800; font-size:98%; z-index:3; box-shadow:var(--sh-1); transition:.15s var(--ease); }
.zip .num.active{ background:var(--q-zip); color:#fff; transform:scale(1.08); }
.zip svg.path-layer{ position:absolute; pointer-events:none; z-index:2; overflow:visible; }
.zip .wall{ position:absolute; background:var(--ink); z-index:4; border-radius:3px; }

/* ---------- Sudoku ---------- */
.sudoku .grid{ border-radius:10px; overflow:hidden; box-shadow:inset 0 0 0 2px var(--ink); }
.sudoku .cell{ background:var(--surface); font-size:150%; border:1px solid var(--line-2); }
.sudoku .cell.fixed{ color:var(--ink); font-weight:800; background:var(--surface-2); }
.sudoku .cell:not(.fixed){ color:var(--c); font-weight:700; }
.sudoku .cell.peer{ background:color-mix(in srgb,var(--c) 8%,var(--surface)); }
.sudoku .cell.same{ background:color-mix(in srgb,var(--c) 20%,var(--surface)); }
.sudoku .cell.sel{ background:color-mix(in srgb,var(--c) 30%,var(--surface)); box-shadow:inset 0 0 0 2px var(--c); }
.sudoku .cell.bad-cell{ color:var(--q-pinpoint); background:color-mix(in srgb,var(--q-pinpoint) 15%,var(--surface)); }
.sudoku .cell.box-r{ border-right:3px solid var(--ink); } .sudoku .cell.box-b{ border-bottom:3px solid var(--ink); }
.pad{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; max-width:360px; margin:18px auto 0; }
.pad button{ border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:750; font-size:20px; padding:14px 0; border-radius:12px; cursor:pointer; box-shadow:var(--sh-1); transition:.1s var(--ease); }
.pad button:hover{ background:var(--surface-2); transform:translateY(-1px); }
.pad button:active{ transform:scale(.95); }
.pad .erase{ grid-column:span 6; font-size:14px; font-weight:700; color:var(--ink-2); }

/* ---------- Pinpoint ---------- */
.board.pinpoint{ width:100%; max-width:460px; }
.pinpoint .clues{ display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.pinpoint .clue{
  display:flex; align-items:center; gap:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:15px 16px; font-size:17px; font-weight:650; animation:revealClue .32s var(--ease);
}
@keyframes revealClue{ from{opacity:0;transform:translateY(-6px) scale(.98);} to{opacity:1;transform:none;} }
.pinpoint .clue .n{ width:26px; height:26px; border-radius:8px; background:color-mix(in srgb,var(--c) 16%,var(--surface)); color:var(--c); display:grid; place-items:center; font-size:13px; font-weight:800; flex:none; }
.pinpoint .clue.locked{ background:transparent; border-style:dashed; color:var(--ink-3); font-weight:600; font-size:14px; }
.pinpoint .clue.locked .n{ background:transparent; color:var(--ink-3); }
.pinpoint .options{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pinpoint .opt{
  text-align:left; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:650; font-size:14.5px;
  padding:14px 16px; border-radius:var(--r-md); cursor:pointer; box-shadow:var(--sh-1); transition:.14s var(--ease);
}
.pinpoint .opt:hover:not(:disabled){ border-color:var(--c); transform:translateY(-2px); }
.pinpoint .opt.correct{ background:color-mix(in srgb,var(--q-zip) 16%,var(--surface)); border-color:var(--q-zip); color:var(--q-zip); }
.pinpoint .opt.wrong{ background:color-mix(in srgb,var(--q-pinpoint) 12%,var(--surface)); border-color:var(--q-pinpoint); color:var(--q-pinpoint); opacity:.75; }

/* ---------- Crossclimb ---------- */
.board.crossclimb{ width:100%; max-width:480px; }
.crossclimb .ladder{ display:flex; flex-direction:column; gap:8px; }
.crossclimb .rung{
  display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:9px 11px; transition:box-shadow .15s,transform .15s,border-color .15s,background .15s;
}
.crossclimb .rung.solved-rung{ border-color:color-mix(in srgb,var(--q-zip) 55%,var(--line)); background:var(--surface); }
.crossclimb .rung.dragover{ border-color:var(--c); transform:scale(1.015); }
.crossclimb .rung.dragging{ opacity:.4; }
.crossclimb .mv-col{ display:flex; flex-direction:column; gap:3px; flex:none; cursor:grab; }
.crossclimb .mv-col:active{ cursor:grabbing; }
.crossclimb .mv{ width:26px; height:20px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:6px; cursor:pointer; font-size:10px; line-height:1; display:grid; place-items:center; transition:.12s; }
.crossclimb .mv:hover:not(:disabled){ background:color-mix(in srgb,var(--c) 12%,var(--surface)); color:var(--c); border-color:var(--c); }
.crossclimb .mv:disabled{ opacity:.3; cursor:default; }
.crossclimb .clue-text{ flex:1; display:flex; align-items:center; font-size:13.5px; color:var(--ink-2); font-weight:600; line-height:1.35; min-width:0; }
.crossclimb .tiles{ display:flex; gap:5px; align-items:center; flex:none; }
.crossclimb .tiles input{
  width:40px; height:46px; text-align:center; text-transform:uppercase; font-size:21px; font-weight:800; border:1.5px solid var(--line-2);
  background:var(--surface); color:var(--ink); border-radius:9px; outline:none; caret-color:var(--c); transition:border-color .14s,background .14s;
}
.crossclimb .tiles input:focus{ border-color:var(--c); box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent); }
.crossclimb .tiles input.good{ border-color:var(--q-zip); background:color-mix(in srgb,var(--q-zip) 12%,var(--surface)); }

/* ---------------- Win overlay ---------------- */
.overlay{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:color-mix(in srgb,#000 48%,transparent); backdrop-filter:blur(7px); animation:fade .22s var(--ease); }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
.win-card{ position:relative; width:min(400px,92vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-3); padding:32px 28px; text-align:center; animation:pop-in .3s var(--ease); }
@keyframes pop-in{ from{opacity:0;transform:translateY(14px) scale(.96);} to{opacity:1;transform:none;} }
.win-card .medal{ width:72px; height:72px; margin:0 auto 16px; border-radius:20px; display:grid; place-items:center; font-size:38px; background:color-mix(in srgb,var(--c) 16%,var(--surface)); border:1px solid color-mix(in srgb,var(--c) 32%,transparent); }
.win-card h2{ margin:0 0 5px; font-size:25px; letter-spacing:-.025em; }
.win-card .sub{ color:var(--ink-2); font-size:14px; margin:0 0 22px; }
.win-stats{ display:flex; gap:10px; justify-content:center; margin-bottom:22px; }
.win-stats .s{ flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 8px; }
.win-stats .s .v{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.win-stats .s .l{ font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-top:3px; }
.win-actions{ display:flex; gap:10px; }
.win-actions .btn{ flex:1; justify-content:center; padding:13px; font-size:14.5px; }

/* ---------------- Toast ---------------- */
.toast-host{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:70; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{ background:var(--ink); color:var(--canvas); font-weight:650; font-size:13.5px; padding:11px 18px; border-radius:999px; box-shadow:var(--sh-3); animation:toastin .3s var(--ease); }
@keyframes toastin{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }

/* ---------------- Confetti ---------------- */
.confetti{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:65; }
.confetti i{ position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(105vh) rotate(720deg); opacity:.15; } }

.footer{ text-align:center; color:var(--ink-3); font-size:12px; padding:24px 16px 34px; }

@media (max-width:560px){
  .brand .thin{ display:none; }
  .card-grid{ grid-template-columns:1fr; }
  .hero{ margin-bottom:30px; }
  .pinpoint .options{ grid-template-columns:1fr; }
  .crossclimb .clue-text{ font-size:12.5px; }
}