/* ===================================================================
   Puzzle Arcade — design system
   =================================================================== */
:root {
  --bg: #0b0f1f;
  --bg2: #121733;
  --panel: #1a2143;
  --panel-2: #222a52;
  --panel-3: #2b3568;
  --line: #313c72;
  --text: #f1f4ff;
  --muted: #99a3d4;
  --muted-2: #6f78a8;
  --accent: #6f8cff;
  --accent-2: #b06cff;
  --accent-3: #46d3ff;
  --good: #2ee6a6;
  --warn: #ffcb5c;
  --bad: #ff6585;
  --sun: #ffb22e;
  --moon: #9fb0ff;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 24px 60px -28px rgba(0,0,0,.75);
  --shadow-sm: 0 8px 22px -12px rgba(0,0,0,.6);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
[data-theme="light"] {
  --bg: #eef1fb;
  --bg2: #e2e7fa;
  --panel: #ffffff;
  --panel-2: #f4f6ff;
  --panel-3: #e9edff;
  --line: #dde3f7;
  --text: #161b38;
  --muted: #5a628c;
  --muted-2: #8b92b8;
  --shadow: 0 24px 60px -32px rgba(50,60,130,.4);
  --shadow-sm: 0 8px 22px -14px rgba(50,60,130,.35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  min-height: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.app-bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1000px 560px at 8% -10%, rgba(111,140,255,.28), transparent 58%),
    radial-gradient(900px 560px at 102% -4%, rgba(176,108,255,.22), transparent 56%),
    radial-gradient(700px 500px at 50% 120%, rgba(70,211,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

button { font-family: inherit; cursor: pointer; border: none; color: inherit; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 12px clamp(14px, 4vw, 40px);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 11px;
  background: none; font-size: 18px; font-weight: 700;
  padding: 4px 6px; border-radius: 12px;
}
.brand-logo {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 11px; color: #fff; font-size: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px -8px var(--accent);
}
.brand-name { letter-spacing: -.01em; }
.brand-name b { color: var(--accent); font-weight: 800; }
.topnav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.topnav button {
  background: none; color: var(--muted); padding: 8px 13px;
  border-radius: 999px; font-size: 13.5px; font-weight: 600; transition: .18s;
}
.topnav button:hover { color: var(--text); background: var(--panel); }
.topnav button.on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow-sm); }
.theme-toggle {
  background: var(--panel); border: 1px solid var(--line);
  width: 40px; height: 40px; border-radius: 12px; font-size: 17px;
  display: grid; place-items: center; transition: .18s;
}
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--accent); }

/* ---------- Views ---------- */
.view { display: none; padding: clamp(18px, 4vw, 44px); max-width: 1140px; margin: 0 auto; }
.view.active { display: block; animation: fade .4s cubic-bezier(.2,.7,.2,1); }
@keyframes fade { from { opacity: 0; transform: translateY(10px);} to {opacity:1; transform:none;} }

/* ---------- Hub ---------- */
.hero { text-align: center; padding: 30px 0 10px; }
.hero h1 {
  font-size: clamp(30px, 6.4vw, 52px); margin: 0 0 14px; font-weight: 900;
  background: linear-gradient(110deg, var(--text) 10%, var(--accent) 55%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent);
}
.hero p { color: var(--muted); max-width: 640px; margin: 0 auto; font-size: 16px; }

.cards {
  display: grid; gap: 20px; margin-top: 36px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.card {
  position: relative; text-align: left; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
  transition: transform .24s cubic-bezier(.2,.7,.2,1), border-color .24s, box-shadow .24s;
  display: flex; flex-direction: column; gap: 6px;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--ca, var(--accent)), transparent 80%);
  opacity: .9;
}
.card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ca, var(--accent)) 60%, var(--line));
  box-shadow: 0 30px 60px -26px color-mix(in srgb, var(--ca, var(--accent)) 40%, #000); }
.card .ico {
  font-size: 30px; width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ca, var(--accent)) 18%, var(--panel-3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ca, var(--accent)) 30%, transparent);
  margin-bottom: 6px;
}
.card h3 { margin: 4px 0 0; font-size: 21px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.card .best { margin-top: 10px; font-size: 12.5px; color: var(--ca, var(--accent));
  font-weight: 700; min-height: 16px; letter-spacing: .01em; }
.card .glow { position: absolute; inset: -50% -40% auto auto; width: 200px; height: 200px; z-index: -1;
  background: radial-gradient(circle, var(--ca, var(--accent-2)), transparent 70%); opacity: .16; }

.card:nth-child(1){ --ca:#ff6585; } .card:nth-child(2){ --ca:#b06cff; }
.card:nth-child(3){ --ca:#46d3ff; } .card:nth-child(4){ --ca:#2ee6a6; }
.card:nth-child(5){ --ca:#ffcb5c; }

.hub-foot { text-align: center; color: var(--muted-2); margin-top: 40px; font-size: 13px; }

/* ---------- Game shell ---------- */
.game-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.back {
  background: var(--panel); border: 1px solid var(--line);
  padding: 10px 15px; border-radius: 12px; font-weight: 600; font-size: 14px; transition: .18s;
}
.back:hover { transform: translateX(-3px); border-color: var(--accent); }
.game-head h2 { margin: 0; font-size: clamp(21px, 4vw, 30px); }
.game-tools { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.game-stage { display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* shared control widgets */
.btn {
  background: var(--panel); border: 1px solid var(--line);
  padding: 10px 15px; border-radius: 12px; font-weight: 600; font-size: 14px; transition: .16s;
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color: #fff;
  box-shadow: 0 12px 26px -12px var(--accent); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg button { background: none; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--muted); transition: .15s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
select.btn { appearance: none; padding-right: 30px; }

.hud {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); padding: 12px 20px; border-radius: 16px; box-shadow: var(--shadow);
}
.hud .stat { text-align: center; min-width: 78px; }
.hud .stat .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.hud .stat .v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hud .big { font-size: 32px; line-height: 1; background: none; transition: transform .15s; }
.hud .big:hover { transform: scale(1.12); }

.board-wrap { background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); }

.hint { color: var(--muted); font-size: 13.5px; text-align: center; max-width: 540px; }
.hint b, .hint strong { color: var(--text); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 32px);
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  padding: 13px 20px; border-radius: 14px; box-shadow: var(--shadow);
  font-weight: 600; opacity: 0; pointer-events: none; transition: .32s cubic-bezier(.2,.7,.2,1); z-index: 50;
  max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.good { border-color: var(--good); box-shadow: 0 0 0 1px var(--good), var(--shadow); }
.toast.bad { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad), var(--shadow); }

/* ===================================================================
   DÉMINEUR
   =================================================================== */
.ms-grid { display: grid; gap: 0; user-select: none; touch-action: manipulation;
  border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--line); }
.ms-cell {
  width: var(--cell, 32px); height: var(--cell, 32px);
  display: grid; place-items: center; font-weight: 800;
  font-size: calc(var(--cell, 32px) * .52);
  background: linear-gradient(150deg, #38437f, #2b3568);
  box-shadow: inset 0 0 0 1px #1c2456; cursor: pointer; transition: filter .08s;
}
[data-theme="light"] .ms-cell { background: linear-gradient(150deg, #d4ddff, #c2cdff); box-shadow: inset 0 0 0 1px #b3bff0; }
.ms-cell:hover { filter: brightness(1.14); }
.ms-cell.down, .ms-cell.open {
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); cursor: default; filter: none;
}
.ms-cell.mine { background: var(--bad); }
.ms-cell.exploded { background: #ff2f54; box-shadow: inset 0 0 0 2px #fff6; }
.ms-cell.flag::after { content: "🚩"; }
.ms-cell.wrong { background: #6b3a4a; }
.ms-cell.wrong::after { content: "❌"; }
.ms-cell.n1 { color: #6db1ff; } .ms-cell.n2 { color: #3fd884; }
.ms-cell.n3 { color: #ff7b7b; } .ms-cell.n4 { color: #b894ff; }
.ms-cell.n5 { color: #ffa05c; } .ms-cell.n6 { color: #45d6c9; }
.ms-cell.n7 { color: #f1f4ff; } .ms-cell.n8 { color: #99a3d4; }

/* ===================================================================
   TANGO
   =================================================================== */
.tango-grid { display: grid; gap: 5px; background: var(--line); padding: 5px; border-radius: 16px; position: relative; }
.tg-cell {
  width: var(--cell, 56px); height: var(--cell, 56px); position: relative;
  background: var(--panel-2); border-radius: 11px; display: grid; place-items: center;
  cursor: pointer; transition: transform .1s, background .15s, box-shadow .15s;
}
.tg-cell:not(.fixed):hover { background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); }
.tg-cell:not(.fixed):active { transform: scale(.94); }
/* cases-indices (fixes) : nettement distinctes — fond foncé "verrouillé" + liseré */
.tg-cell.fixed {
  background: var(--bg); cursor: default;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 38%, var(--line));
}
.tg-cell.fixed::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, var(--text)); opacity: .55;
}
.tg-cell.bad { background: color-mix(in srgb, var(--bad) 32%, var(--panel-2)); box-shadow: inset 0 0 0 2px var(--bad); }

/* symboles dessinés : soleil (disque ambre) vs lune (croissant bleu) */
.tg-cell .sym { width: 60%; height: 60%; border-radius: 50%; animation: pop .16s cubic-bezier(.3,1.4,.5,1); }
.tg-cell.fixed .sym { width: 64%; height: 64%; }
.sym.sun {
  background: radial-gradient(circle at 36% 32%, #ffe6a0, var(--sun) 62%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 26%, transparent), 0 0 16px -2px var(--sun);
}
.sym.moon {
  background: transparent; position: relative;
  box-shadow: inset -0.34em -0.12em 0 0.02em var(--moon), 0 0 14px -3px var(--moon);
}
.tg-cell.fixed .sym.sun { background: radial-gradient(circle at 36% 32%, #fff0c8, var(--sun) 60%); }
@keyframes pop { from { transform: scale(.3); opacity: 0;} to { transform: scale(1); opacity: 1;} }

/* contraintes = / × : pastilles colorées et contrastées */
.tg-con { position: absolute; z-index: 6; font-weight: 900; font-size: 13px;
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px;
  transform: translate(-50%, -50%); pointer-events: none; color: #fff;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(255,255,255,.25); }
.tg-con.eq  { background: linear-gradient(135deg, #2ee6a6, #15b3c9); }   /* égal */
.tg-con.neq { background: linear-gradient(135deg, #ff6585, #ff8f3c); }   /* différent */

/* ===================================================================
   2048
   =================================================================== */
.g2048 { position: relative; background: var(--panel-2); border-radius: 14px; padding: 12px; touch-action: none; }
.g2048-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.g2048-bg { width: var(--cell, 86px); height: var(--cell, 86px); border-radius: 11px; background: var(--panel); }
.g2048-tiles { position: absolute; inset: 12px; }
.tile {
  position: absolute; width: var(--cell, 86px); height: var(--cell, 86px); border-radius: 11px;
  display: grid; place-items: center; font-weight: 800; transition: transform .12s cubic-bezier(.3,.8,.3,1);
  font-size: calc(var(--cell, 86px) * .34); box-shadow: var(--shadow-sm);
}
.tile.spawn { animation: tSpawn .15s ease; }
.tile.merge { animation: tMerge .18s ease; }
@keyframes tSpawn { from { transform: scale(0);} to { transform: scale(1);} }
@keyframes tMerge { 0%{transform:scale(1);} 50%{transform:scale(1.18);} 100%{transform:scale(1);} }
.t2{background:#313c7c;color:#e3e8ff} .t4{background:#3c4a9c;color:#e3e8ff}
.t8{background:#5b6cff;color:#fff} .t16{background:#7a5bff;color:#fff}
.t32{background:#9b54ff;color:#fff} .t64{background:#c04bff;color:#fff}
.t128{background:#ff6bd0;color:#fff} .t256{background:#ff7ba0;color:#fff}
.t512{background:#ffa15c;color:#fff} .t1024{background:#ffc94b;color:#3a2a00}
.t2048{background:#ffe14b;color:#3a2a00; box-shadow:0 0 30px #ffe14b99} .tbig{background:#2ee6a6;color:#04241a}

/* ===================================================================
   SUDOKU
   =================================================================== */
.sk-grid { display: grid; grid-template-columns: repeat(9, var(--cell, 46px)); background: color-mix(in srgb, var(--text) 70%, var(--line));
  gap: 1px; padding: 3px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.sk-cell { width: var(--cell, 46px); height: var(--cell, 46px); background: var(--panel-2);
  display: grid; place-items: center; font-size: calc(var(--cell, 46px) * .5); font-weight: 700;
  cursor: pointer; position: relative; transition: background .12s; }
.sk-cell.fixed { color: var(--text); background: var(--panel); cursor: default; }
.sk-cell:not(.fixed) { color: var(--accent); }
.sk-cell.sel { background: color-mix(in srgb, var(--accent) 42%, var(--panel-2)); box-shadow: inset 0 0 0 2px var(--accent); }
.sk-cell.peer { background: color-mix(in srgb, var(--accent) 13%, var(--panel-2)); }
.sk-cell.same { background: color-mix(in srgb, var(--accent-2) 28%, var(--panel-2)); }
.sk-cell.bad { color: var(--bad) !important; }
.sk-cell.br { border-right: 2px solid color-mix(in srgb, var(--text) 70%, var(--line)); }
.sk-cell.bb { border-bottom: 2px solid color-mix(in srgb, var(--text) 70%, var(--line)); }
.sk-notes { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3,1fr);
  font-size: calc(var(--cell, 46px) * .2); color: var(--muted); pointer-events: none; font-weight: 600; }
.sk-notes span { display: grid; place-items: center; }
.sk-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; max-width: 380px; width: 100%; }
.sk-pad button { padding: 15px 0; font-size: 20px; font-weight: 800; }
.sk-pad .tool { font-size: 13px; font-weight: 700; }
.sk-pad .tool.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:none; }

/* ===================================================================
   LIGHTS OUT
   =================================================================== */
.lo-grid { display: grid; gap: 10px; }
.lo-cell { width: var(--cell, 64px); height: var(--cell, 64px); border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); transition: .15s; cursor: pointer; }
.lo-cell.on { background: linear-gradient(135deg, var(--warn), #ff9d5c);
  box-shadow: 0 0 26px -2px var(--warn), inset 0 0 0 1px #fff4; border-color: transparent; }
.lo-cell:hover { transform: scale(.95); }
.lo-cell:active { transform: scale(.88); }

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  .topnav { display: none; }
  .hud .stat { min-width: 60px; }
  .hud .stat .v { font-size: 21px; }
}
.win-flash { animation: winFlash .9s ease; }
@keyframes winFlash { 0%,100%{filter:none;} 50%{filter:drop-shadow(0 0 26px var(--good));} }