/* ============================================================
   Socle visuel commun à tous les jeux du site.
   Ne contient QUE ce qui est partagé : palette, remise à zéro,
   barre du haut, overlays, boutons, toast. Le plateau, le pavé
   et les outils propres à un jeu restent dans le fichier du jeu.
   ============================================================ */

:root{
  /* fond et surfaces */
  --bg:#0f1420;
  --surface:#171e2e;
  --surface-2:#1e2739;
  --line:#2c3852;
  --line-strong:#4a5c80;

  /* texte */
  --txt:#e8edf7;
  --txt-dim:#8b9ab5;

  /* sémantique */
  --accent:#5eb0ff;      /* action, sélection, saisie du joueur */
  --err:#ff5f6d;         /* conflit de règle — jamais « chiffre faux » par défaut */
  --ok:#3ddc97;          /* réussite */
  --tip:#ffc75a;         /* défi du jour, série, indices */
  --cage:#9d8cff;        /* contraintes secondaires (cages Killer, sommes Kakuro) */

  /* familles de jeux, utilisées par le hub et les vignettes */
  --logique:#5eb0ff;
  --arcade:#ff9f68;

  --radius:12px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  background:var(--bg);color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  touch-action:manipulation;
}

/* Une page de jeu occupe exactement l'écran et ne défile pas.
   Le hub, lui, défile normalement : il n'a pas cette classe. */
body.jeu{
  height:100%;overflow:hidden;overscroll-behavior:none;
  user-select:none;-webkit-user-select:none;
}
body.jeu #app{
  display:flex;flex-direction:column;height:100dvh;
  padding:calc(env(safe-area-inset-top) + 6px) 8px calc(env(safe-area-inset-bottom) + 6px);
  gap:6px;max-width:560px;margin:0 auto;
}

/* ---------- barre du haut d'un jeu ---------- */
.mj-top{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 2px;flex:0 0 auto}
.mj-back{
  background:var(--surface);border:1px solid var(--line);color:var(--txt-dim);
  width:32px;height:32px;border-radius:999px;display:grid;place-items:center;
  cursor:pointer;flex:0 0 auto;text-decoration:none;
}
.mj-back:active{background:var(--surface-2)}
.mj-back svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mj-pill{
  background:var(--surface);border:1px solid var(--line);color:var(--txt);
  font:600 12px/1 system-ui,sans-serif;padding:9px 11px;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;gap:5px;white-space:nowrap;min-width:0;
}
.mj-pill:active{background:var(--surface-2)}
.mj-pill.daily{border-color:var(--tip);color:var(--tip)}
.mj-stats{display:flex;gap:10px;align-items:center;font:600 12px/1 system-ui,sans-serif;color:var(--txt-dim)}
.mj-stats b{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums}
.mj-streak{color:var(--tip);display:none}
.mj-streak.on{display:block}
.mj-icon{
  background:var(--surface);border:1px solid var(--line);color:var(--txt-dim);
  width:32px;height:32px;border-radius:999px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
}
.mj-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- overlays et feuilles ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(9,13,22,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:16px;z-index:10;
}
.overlay.show{display:flex}
.sheet{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:20px;width:100%;max-width:340px;text-align:center;
  max-height:94dvh;overflow:auto;
}
.sheet h2{margin:0 0 4px;font-size:22px}
.sheet p{margin:0 0 16px;color:var(--txt-dim);font-size:13px;line-height:1.5}
.sect{
  text-align:left;font:700 10px/1 system-ui,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-dim);margin:16px 2px 8px;
}

/* ---------- contrôles ---------- */
.btn{
  width:100%;background:var(--accent);color:#06101f;border:none;border-radius:12px;
  font:700 15px/1 system-ui,sans-serif;padding:14px;cursor:pointer;margin-top:8px;
}
.btn.ghost{background:transparent;color:var(--txt-dim);border:1px solid var(--line)}
.btn.gold{background:var(--tip);color:#2a1e00}
.btn.small{font-size:13px;padding:11px}
.opt{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  color:var(--txt);font:600 15px/1 system-ui,sans-serif;padding:13px 16px;margin-bottom:8px;cursor:pointer;
}
.opt:active{border-color:var(--accent)}
.opt span{font:500 12px/1 system-ui,sans-serif;color:var(--txt-dim);text-align:right}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;color:var(--txt-dim);
  font:600 12px/1 system-ui,sans-serif;padding:10px 14px;cursor:pointer;
}
.chip.on{background:var(--accent);border-color:var(--accent);color:#06101f}
.hintline{margin:8px 2px 0!important;font-size:11.5px!important;line-height:1.45!important;text-align:left}

/* ---------- carte « défi du jour » ---------- */
.daily-card{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:linear-gradient(135deg,rgba(255,199,90,.16),rgba(255,199,90,.04));
  border:1px solid rgba(255,199,90,.45);border-radius:14px;padding:14px;color:var(--txt);
}
.daily-card:active{border-color:var(--tip)}
.dc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.dc-title{font:700 15px/1 system-ui,sans-serif;color:var(--tip)}
.dc-streak{font:700 12px/1 system-ui,sans-serif;color:var(--tip)}
.dc-sub{font:500 12px/1.4 system-ui,sans-serif;color:var(--txt-dim)}

/* ---------- fin de partie ---------- */
.time-big{font:700 34px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;margin:10px 0 6px}
.win-streak{
  display:none;background:rgba(255,199,90,.12);border:1px solid rgba(255,199,90,.4);
  border-radius:12px;padding:10px;margin-bottom:12px;color:var(--tip);
  font:700 13px/1.4 system-ui,sans-serif;
}
.win-streak.show{display:block}
.share-box{
  display:none;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--txt);font:500 11px/1.5 ui-monospace,monospace;padding:10px;margin-top:8px;
  resize:none;height:74px;
}
.share-box.show{display:block}

/* ---------- toast (créé à la demande par socle.js) ---------- */
#mjToast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 92px);transform:translateX(-50%);
  background:var(--surface-2);border:1px solid var(--line);color:var(--txt);
  font:700 13px/1 system-ui,sans-serif;padding:11px 18px;border-radius:999px;
  opacity:0;transition:opacity .18s;pointer-events:none;z-index:20;white-space:nowrap;
}
#mjToast.show{opacity:1}
#mjToast.combo{border-color:var(--accent);color:var(--accent)}
#mjToast.gold{border-color:var(--tip);color:var(--tip)}

/* ---------- passerelle vers les autres jeux, depuis un menu de jeu ---------- */
.autres{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.autres a{
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:9px 3px;display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--txt-dim);text-decoration:none;font:600 9.5px/1.1 system-ui,sans-serif;text-align:center;
}
.autres a:active{border-color:var(--accent)}
.autres a[aria-current]{border-color:var(--accent);color:var(--accent)}
.autres svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}