/* monstrebien.ch — base commune des jeux de réflexion et de langue (Sudoku, Litteral Master, Conjugaison, Le Mot Faux,
   Cherchez l'erreur). Page claire, police Inter, jetons du site. Chaque jeu charge cette feuille puis la sienne.
   Structure : .g-page > .g-top (titre, score, chrono) + .g-screen[data-screen] (menu, partie, résultat) + .g-foot. */
:root {
  --bg: #f5f8fc; --panel: #fff; --ink: #013861; --dim: #5d7489; --line: #dde7f1; --line-2: #c5d5e6;
  --blue: #1270c7; --blue-2: #0b559f; --blue-soft: #e3effc; --sky: #cfe6ff;
  --lime: #7ac943; --lime-2: #4f9a22; --lime-soft: #e8f7dc; --red: #e5484d; --red-soft: #fde8e8; --green: #16a34a; --green-soft: #dcfce7;
  --amber: #c7860a; --amber-soft: #fff4d1; --accent: var(--blue);
  --radius: 12px; --radius-sm: 8px; --border: 1px solid var(--line);
  --shadow: 0 1px 2px rgba(1, 56, 97, .05), 0 12px 32px -14px rgba(1, 56, 97, .28);
  --shadow-sm: 0 1px 2px rgba(1, 56, 97, .06), 0 6px 16px -8px rgba(1, 56, 97, .22);
  --font: 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* hall of fame intégré (voir /css/hall.css) */
  --gold: var(--amber); --mbh-row: rgba(1, 56, 97, .05); --mbh-me: rgba(18, 112, 199, .1); --mbh-on-accent: #fff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 500 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0; }
[hidden] { display: none !important; }
a { color: var(--blue); }

.g-page { max-width: 760px; margin: 0 auto; padding: 14px 14px max(24px, env(safe-area-inset-bottom)); }
.g-top { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 14px; }
.g-top .g-logo { height: 40px; width: auto; }
.g-top h1 { font-size: 1.25rem; font-weight: 800; }
.g-top .g-sub { display: block; font-size: .78rem; font-weight: 600; color: var(--dim); }
.g-top .g-spacer { flex: 1; }
.g-stat { display: grid; justify-items: end; line-height: 1.1; }
.g-stat small { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.g-stat b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.g-stat.is-warn b { color: var(--red); }
.g-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; border: var(--border); border-radius: 50%; background: var(--panel); color: var(--ink); }
.g-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-icon:hover { border-color: var(--blue); color: var(--blue); }

.g-screen { display: grid; gap: 14px; }
.g-card { padding: 18px; background: var(--panel); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.g-card h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
.g-lead { color: var(--dim); font-size: .95rem; }
.g-menu-title { font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; }
.g-menu-title em { font-style: normal; color: var(--accent); }

.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .55rem 1.2rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font-weight: 700; font-size: .95rem; text-decoration: none; transition: transform .12s, box-shadow .15s, border-color .15s, filter .15s; }
.g-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--blue); }
.g-btn:active { transform: none; }
.g-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.g-btn-main { background: linear-gradient(135deg, #8fdc5a, #68b934); color: #0b2f12; border-color: transparent; font-size: 1.05rem; min-height: 50px; padding: .6rem 1.6rem; }
.g-btn-blue { background: linear-gradient(135deg, #1b82df, var(--blue-2)); color: #fff; border-color: transparent; }
.g-btn-main:hover, .g-btn-blue:hover { border-color: transparent; filter: brightness(1.06); }
.g-btn-ghost { background: transparent; border-color: transparent; color: var(--dim); }
.g-btn-ghost:hover { box-shadow: none; transform: none; color: var(--ink); border-color: transparent; background: var(--blue-soft); }
.g-btn-sm { min-height: 36px; padding: .35rem .8rem; font-size: .86rem; }
.g-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.g-row.center { justify-content: center; }
.g-row.between { justify-content: space-between; }

/* choix (niveau, mode) : boutons segmentés */
.g-opts { display: grid; gap: 6px; }
.g-opts > span { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.g-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.g-seg button { flex: 1 1 auto; min-height: 42px; padding: .4rem .9rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel); font-weight: 700; font-size: .9rem; color: var(--dim); }
.g-seg button small { display: block; font-size: .72rem; font-weight: 500; }
.g-seg button:hover { border-color: var(--blue); color: var(--ink); }
.g-seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.g-seg button[aria-pressed="true"] small { color: rgba(255, 255, 255, .75); }

/* barre de temps */
.g-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.g-bar i { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 999px; transform-origin: left; transition: transform .25s linear, background .3s; }
.g-bar.is-low i { background: var(--red); }

/* champ de réponse et touches d'accents */
.g-input { width: 100%; min-height: 50px; padding: .6rem .9rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel); font-size: 1.15rem; font-weight: 700; outline: none; }
.g-input:focus { border-color: var(--blue); }
.g-input.is-ok { border-color: var(--green); background: var(--green-soft); }
.g-input.is-ko { border-color: var(--red); background: var(--red-soft); }
.g-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.g-keys button { min-width: 40px; min-height: 40px; padding: 0 .6rem; border: var(--border); border-radius: var(--radius-sm); background: var(--panel); font-weight: 700; font-size: 1.05rem; }
.g-keys button:hover { border-color: var(--blue); }

/* retour après une réponse */
.g-fb { padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 600; }
.g-fb.ok { background: var(--green-soft); color: #14532d; }
.g-fb.ko { background: var(--red-soft); color: #7f1d1d; }
.g-fb.info { background: var(--blue-soft); color: var(--blue-2); }
.g-fb b { font-weight: 800; }
.g-fb small { display: block; margin-top: 4px; font-weight: 500; opacity: .9; }

/* résultat */
.g-result-score { font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--accent); }
.g-result-score small { font-size: .35em; letter-spacing: 0; color: var(--dim); font-weight: 700; margin-left: .3em; }
.g-grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.g-grid-stats div { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg); }
.g-grid-stats small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.g-grid-stats b { font-size: 1.15rem; font-weight: 800; }
.g-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.g-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg); font-size: .92rem; }
.g-list li.ok { background: var(--green-soft); }
.g-list li.ko { background: var(--red-soft); }
.g-list li .r { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }

.g-foot { margin-top: 22px; font-size: .78rem; color: var(--dim); text-align: center; }
.g-foot a { color: inherit; }
.g-best { font-size: .88rem; color: var(--dim); }
.g-best b { color: var(--ink); }
.g-kbd { display: inline-block; padding: 0 .4em; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--panel); font-size: .8em; font-weight: 700; }

/* message court (dans le style du jeu) */
.g-toast { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translate(-50%, 16px); z-index: 50; max-width: calc(100% - 28px); padding: 9px 14px; border: var(--border); border-radius: var(--radius-sm); background: var(--panel); box-shadow: var(--shadow); font-size: .92rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.g-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* hall of fame intégré : sur fond clair */
.mbh, .mbh-board, .mbh-toast { --mbh-accent: var(--amber); --mbh-radius: var(--radius-sm); }
.mbh-board-in, .mbh-toast { box-shadow: var(--shadow); }
.mbh-all { border-color: var(--line-2); }

@media (max-width: 520px) {
  .g-page { padding: 10px 10px max(20px, env(safe-area-inset-bottom)); }
  .g-card { padding: 14px; }
  .g-top h1 { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .g-bar i, .g-toast, .g-btn { transition: none; } }

/* ---------- Le jeu d'abord : les écrans menu / fin de manche / résultat sont des incrustations par-dessus le jeu ----------
   Le jeu occupe tout l'écran dès l'ouverture ; le menu est un panneau compact centré. Les jeux en 3D laissent leur scène
   visible derrière. Pour les autres, .g-backdrop affiche la couverture du jeu floutée (--cover posé en style inline). */
html, body { height: 100%; }
.g-page { min-height: 100dvh; display: flex; flex-direction: column; }
.g-page > .g-top { position: relative; z-index: 30; }
.g-backdrop { position: fixed; inset: -24px; z-index: -1; background: var(--bg) center / cover no-repeat; filter: blur(8px) brightness(.72) saturate(1.1); will-change: transform; pointer-events: none; }
.g-screen[data-screen="play"] { flex: 1; }
.g-screen:not([data-screen="play"]) { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 72px 14px 20px; overflow: auto; background: rgba(1, 56, 97, .38); }
.g-screen:not([data-screen="play"]) > * { width: min(100%, 460px); flex: none; }
.g-screen:not([data-screen="play"]) .g-card { padding: 14px 16px; }
.g-screen:not([data-screen="play"]) .g-menu-title { font-size: clamp(1.25rem, 4.2vw, 1.6rem); }
.g-screen:not([data-screen="play"]) .g-lead { font-size: .88rem; line-height: 1.4; }
.g-screen:not([data-screen="play"]) .g-help { display: none; }
.g-screen:not([data-screen="play"]) .mbh { max-width: none; }
.g-foot { position: relative; z-index: 30; }
@media (max-height: 640px) { .g-screen:not([data-screen="play"]) { justify-content: flex-start; } }
/* le fond flouté et l'en-tête sur carte n'apparaissent que quand une incrustation est ouverte */
.g-backdrop { opacity: 0; transition: opacity .3s; }
body:has(.g-screen:not([data-screen="play"]):not([hidden])) .g-backdrop { opacity: 1; }
body:has(.g-screen:not([data-screen="play"]):not([hidden])) .g-page > .g-top { padding: 8px 12px; margin: 0 0 10px; border-radius: var(--radius); background: rgba(255, 255, 255, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); }
.g-foot { z-index: auto; }

/* ---------- Immersion : le jeu vit sur son décor (couverture floutée) du début à la fin, l'en-tête devient un tableau de bord ---------- */
.g-backdrop { opacity: 1 !important; filter: blur(10px) brightness(.5) saturate(1.15); }
body:has(.g-screen:not([data-screen="play"]):not([hidden])) .g-page > .g-top { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; margin: 0 0 14px; }
.g-page > .g-top { color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.g-page > .g-top .g-sub, .g-page > .g-top .g-stat small { color: rgba(255, 255, 255, .75); }
.g-page > .g-top .g-stat.is-warn b { color: #ff8a8a; }
.g-page > .g-top .g-icon, .g-page > .g-top .k-round { background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .25); color: #fff; box-shadow: none; }
.g-page > .g-top .k-round svg { stroke: #fff; }
.g-foot { display: none; }
.g-screen[data-screen="play"] .g-best, .g-screen[data-screen="play"] > .g-row > .g-lead, .g-screen[data-screen="play"] > .g-lead, .g-screen[data-screen="play"] .k-stars span, .g-screen[data-screen="play"] .slide-tools .g-lead { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.g-screen[data-screen="play"] .g-best b { color: #fff; }
.g-screen[data-screen="play"] .k-stars span { color: rgba(255, 255, 255, .35); }
.g-screen[data-screen="play"] .k-stars span.on { color: var(--k-sun, #ffd54a); }
.g-screen:not([data-screen="play"]) { background: rgba(0, 0, 0, .25); }
.g-screen[data-screen="play"] .g-btn-ghost { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.g-screen[data-screen="play"] .g-btn-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.g-screen[data-screen="play"] { align-content: start; }