/* Salle des jeux : la nuit du site, deux portes. */
:root { --night: #0b1020; --text: #e6e1d4; --muted: #a2abc0; --gold: #d6b25e; --gold-hi: #f4de9c; --line: rgba(214, 178, 94, .28);
  --f-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif; --f-label: 'Cinzel', Georgia, serif; --f-body: 'IM Fell English', 'Palatino Linotype', Georgia, serif; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(120% 80% at 50% 0%, #18243f 0%, var(--night) 65%); color: var(--text); font: 19px/1.6 var(--f-body); min-height: 100vh; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.barre { padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); }
.retour { color: var(--gold-hi); text-decoration: none; font: 700 15px var(--f-display); letter-spacing: .04em; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 48px max(16px, env(safe-area-inset-right, 0px)) 80px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 16px; }
.sur { font: 600 12px/1.3 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
h1 { margin: 0; font: 700 clamp(32px, 5vw, 54px)/1.1 var(--f-display); color: var(--gold-hi); text-wrap: balance; }
.intro { max-width: 60ch; color: var(--muted); margin: 0; }
.jeux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
@media (max-width: 800px) { .jeux { grid-template-columns: minmax(0, 1fr); } }
.jeu { display: grid; gap: 12px; align-content: start; padding: 30px 28px; text-decoration: none; min-height: 100%; border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.jeu:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); }
.jeu .nom { font: 700 clamp(28px, 3.4vw, 38px)/1.1 var(--f-display); }
.jeu .txt { font-size: 18px; }
.jeu .gain { font-style: italic; font-size: 16px; }
.jeu .aller { font: 600 13px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.encrier { background: repeating-linear-gradient(90deg, transparent 0 27px, rgba(120, 100, 70, .07) 27px 28px), #f0eadc; color: #1d1914; }
.encrier .sur, .encrier .aller, .encrier .gain { color: #a4552a; }
.carillon { background: radial-gradient(circle at 75% 20%, #2a3488 0%, #0e1340 45%, #070920 100%); color: #e3e8ff; }
.carillon .nom, .carillon .aller { color: #f5cf6a; } .carillon .sur { color: #7fd8ff; } .carillon .gain { color: #a3acd6; }