/* ===========================================================
   Gemeinsames Design-System für Binoxxo & Sudoku
   =========================================================== */

/* Inter (Variable, Latin) – lokal, voll offline */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-latin.woff2") format("woff2");
}
:root{
  --primary:#0a0a0a; --primary-active:#1f1f1f; --primary-disabled:#e5e5e5;
  --ink:#0a0a0a; --body:#3a3a3a; --body-strong:#1a1a1a; --muted:#6a6a6a; --muted-soft:#9a9a9a;
  --hairline:#e5e5e5; --hairline-soft:#f0f0f0; --grid-line:#cfc6ad;
  --canvas:#fffaf0; --surface-soft:#faf5e8; --surface-card:#f5f0e0; --surface-strong:#ebe6d6;
  --on-primary:#ffffff;
  --brand-pink:#ff4d8b; --brand-teal:#1a3a3a; --brand-lavender:#b8a4ed;
  --brand-peach:#ffb084; --brand-ochre:#e8b94a; --brand-mint:#a4d4c5; --brand-coral:#ff6b5a;
  --success:#22c55e; --warning:#f59e0b; --error:#ef4444;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:9999px;
  --sym-o:#1a3a3a;   /* O = teal */
  --sym-x:#ff6b5a;   /* X = coral */
  /* Spiel-Highlights (themebar) */
  --hl-sel:#f6e7bf; --hl-same:#efe4c4; --hl-bad:#fde2e0;
  --hint-bg:#f7ead0; --conflict-bg:#fde2e0;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding:32px 16px 64px;
}
.wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:24px;}

/* ---- Top-Nav / Zurück ---- */
.topnav{display:flex;align-items:center;gap:10px;padding:0 4px;}
.theme-pick{display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);}
.theme-select{
  appearance:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:8px 32px 8px 14px;cursor:pointer;max-width:200px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236a6a6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  transition:border-color .12s;
}
.theme-select:hover{border-color:var(--ink);}
.theme-save{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;border:1px solid var(--hairline);border-radius:var(--r-pill);
  background:var(--canvas);color:var(--muted);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s,transform .05s;
}
.theme-save svg{width:16px;height:16px;display:block;}
.theme-save:hover{border-color:var(--ink);color:var(--ink);}
.theme-save:active{transform:scale(.92);}
.theme-save:disabled{opacity:.5;cursor:default;}
.theme-save.saved{background:var(--brand-teal);color:var(--on-primary);border-color:var(--brand-teal);}
.back{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--muted);
  padding:6px 12px;border:1px solid var(--hairline);border-radius:var(--r-pill);
  transition:color .12s,border-color .12s;
}
.back:hover{color:var(--ink);border-color:var(--ink);}

/* ---- Header ---- */
.header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 4px;}
h1{
  font-size:56px;font-weight:500;line-height:1.0;letter-spacing:-2px;margin:0;
  color:var(--ink);
}
.subtitle{font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);}

/* ---- Card ---- */
.card{
  background:var(--surface-soft);
  border-radius:var(--r-xl);
  padding:24px;
}
.controls{display:flex;flex-direction:column;gap:18px;}
.control-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.control-label{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);width:88px;flex-shrink:0;}

/* ---- Segmented pills ---- */
.seg{display:inline-flex;gap:6px;flex-wrap:wrap;}
.pill{
  appearance:none;border:1px solid var(--hairline);background:transparent;
  color:var(--muted);font-family:inherit;font-size:14px;font-weight:500;
  padding:8px 16px;border-radius:var(--r-pill);cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.pill:hover{color:var(--ink);}
.pill.active{background:var(--primary);color:var(--on-primary);border-color:var(--primary);}

/* ---- Buttons ---- */
.btn{
  appearance:none;font-family:inherit;font-size:14px;font-weight:600;
  height:44px;padding:0 20px;border-radius:var(--r-md);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;
  transition:background .12s,color .12s,border-color .12s,opacity .12s;
}
.btn-primary{background:var(--primary);color:var(--on-primary);}
.btn-primary:hover{background:var(--primary-active);}
.btn-secondary{background:var(--canvas);color:var(--ink);border-color:var(--hairline);}
.btn-secondary:hover{border-color:var(--ink);}
.btn-secondary.active{background:var(--brand-teal);color:var(--on-primary);border-color:var(--brand-teal);}
.btn:disabled{background:var(--primary-disabled);color:var(--muted-soft);border-color:transparent;cursor:not-allowed;}
.btn-secondary:disabled{background:var(--canvas);color:var(--muted-soft);border-color:var(--hairline-soft);}

/* ---- Play bar ---- */
.playbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.timer{display:flex;align-items:baseline;gap:10px;}
.timer .t{font-size:40px;font-weight:500;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums;}
.timer .lbl{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);}
.actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ---- Highscore ---- */
.hs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap;}
.hs-title{font-size:24px;font-weight:600;letter-spacing:-0.3px;margin:0;}
.hs-context{font-size:13px;font-weight:500;color:var(--muted);}
.hs-list{display:flex;flex-direction:column;gap:6px;}
.hs-row{
  display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:12px;
  padding:12px 16px;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-md);font-size:15px;
}
.hs-row.best{background:var(--brand-teal);color:var(--on-primary);border-color:var(--brand-teal);}
.hs-row.fresh{outline:2px solid var(--brand-ochre);outline-offset:1px;}
.hs-rank{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;}
.hs-row.best .hs-rank{color:var(--brand-mint);}
.hs-time{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-0.3px;}
.hs-date{font-size:12px;color:var(--muted);}
.hs-row.best .hs-date{color:var(--brand-mint);}
.hs-empty{font-size:14px;color:var(--muted);padding:16px 0;}
.hs-clear{font-size:13px;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;font-family:inherit;}
.hs-clear:hover{color:var(--error);}

/* ---- Toast ---- */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:var(--primary);color:var(--on-primary);padding:12px 20px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:30;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---- Win banner ---- */
.win-banner{
  display:none;align-items:center;gap:16px;background:var(--brand-teal);color:var(--on-primary);
  border-radius:var(--r-lg);padding:20px 24px;margin-bottom:18px;
}
.win-banner.show{display:flex;}
.win-banner .big{font-size:28px;font-weight:500;letter-spacing:-0.5px;}
.win-banner .meta{font-size:14px;color:var(--brand-mint);}

/* ---- Generating overlay ---- */
.generating{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(255,250,240,.7);border-radius:var(--r-lg);font-size:14px;font-weight:600;color:var(--muted);}
.generating.show{display:flex;}

/* ===========================================================
   Übersichtsseite (Home)
   =========================================================== */
.home-intro{font-size:16px;color:var(--body);max-width:48ch;margin:0;padding:0 4px;line-height:1.5;}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.home-card{
  display:flex;flex-direction:column;gap:16px;text-decoration:none;color:inherit;
  background:var(--surface-soft);border:1px solid transparent;border-radius:var(--r-xl);
  padding:24px;transition:transform .12s,border-color .12s,background .12s;
}
.home-card:hover{transform:translateY(-3px);border-color:var(--ink);background:var(--surface-card);}
.home-card .thumb{
  aspect-ratio:1/1;width:96px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-strong);padding:8px;display:grid;gap:4px;
}
.home-card .thumb.binoxxo{grid-template-columns:repeat(4,1fr);}
.home-card .thumb.sudoku{grid-template-columns:repeat(3,1fr);}
.home-card .thumb i{background:var(--canvas);border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:12px;font-weight:600;color:var(--brand-teal);}
.home-card .thumb svg{width:80%;height:80%;}
.home-card h2{font-size:28px;font-weight:500;letter-spacing:-0.6px;margin:0;}
.home-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.45;}
.home-card .go{margin-top:auto;font-size:13px;font-weight:600;color:var(--brand-coral);letter-spacing:.3px;}

@media (max-width:560px){
  h1{font-size:40px;letter-spacing:-1px;}
  .control-label{width:100%;}
  .timer .t{font-size:32px;}
  body{padding:20px 12px 48px;}
  .home-grid{grid-template-columns:1fr;}
}