/* ANACHRON — interface calquée sur le screen de référence : scène pleine largeur, HUD quête en haut à
gauche, cadrans en haut à droite, portraits joueur/PNJ en bas, dialogues en bulles sombres.
Mobile : la scène devient un bandeau, le fil de narration défile, la barre d'action reste fixe,
et un bottom sheet à onglets remplace les menus.
Animations : révélation de scène, narration à la plume, répliques séquencées, jauges, ambiance. */
:root {
--ink: #0c0a08; --paper: #e9dcc3; --paper-2: #cbb894; --gold: #d9a441; --gold-2: #f3cf7a; --blood: #c8483a;
--panel: rgba(10, 8, 6, .72); --panel-2: rgba(10, 8, 6, .88); --line: rgba(233, 220, 195, .18);
--font-title: 'Cinzel', 'Times New Roman', serif; --font-body: 'EB Garamond', Georgia, serif; --font-ui: 'Inter', system-ui, sans-serif;
--sab: env(safe-area-inset-bottom, 0px); --sat: env(safe-area-inset-top, 0px);
--ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 17px; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button { font-family: var(--font-ui); cursor: pointer; touch-action: manipulation; }
input, textarea { font-family: var(--font-body); }
a { color: var(--gold-2); }
.hidden { display: none !important; }
#app { min-height: 100%; }
.gold { color: var(--gold-2); }
/* ---------- Animations génériques ---------- */
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dropIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wordIn { from { opacity: 0; transform: translateY(3px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lineInR { from { opacity: 0; transform: translateX(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lineInL { from { opacity: 0; transform: translateX(-18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.11) translate(-1.2%, -0.8%); } }
@keyframes focusIn { 0% { opacity: 0; filter: blur(16px) sepia(.8) saturate(.4) brightness(.6); transform: scale(1.08); } 60% { opacity: 1; } 100% { opacity: 1; filter: none; transform: scale(1.04); } }
@keyframes drift { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .35; } 100% { transform: translate3d(14px, -90px, 0); opacity: 0; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .86; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinBack { to { transform: rotate(-360deg); } }
@keyframes glow { 0%, 100% { box-shadow: 0 8px 30px rgba(0,0,0,.7), 0 0 0 0 rgba(243,207,122,0); } 50% { box-shadow: 0 8px 30px rgba(0,0,0,.7), 0 0 24px 4px rgba(243,207,122,.55); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes chipUp { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -30px) scale(1); } }
@keyframes flashUp { 0% { background: rgba(142,224,138,0); } 20% { background: rgba(142,224,138,.28); } 100% { background: rgba(142,224,138,0); } }
@keyframes flashDown { 0% { background: rgba(255,138,122,0); } 20% { background: rgba(255,138,122,.3); } 100% { background: rgba(255,138,122,0); } }
@keyframes hit { 0%, 100% { opacity: .25; } 25%, 75% { opacity: 1; background: #ff9a8a; } }
@keyframes gain { 0% { opacity: .25; transform: scaleY(.4); } 60% { opacity: 1; transform: scaleY(1.25); background: #8ee08a; } 100% { opacity: 1; transform: none; } }
@keyframes hurt { 0% { box-shadow: inset 0 0 0 0 rgba(200,72,58,0); } 30% { box-shadow: inset 0 0 120px 20px rgba(200,72,58,.55); } 100% { box-shadow: inset 0 0 0 0 rgba(200,72,58,0); } }
@keyframes flip { 0% { transform: translateX(-50%) rotateX(0); } 40% { transform: translateX(-50%) rotateX(90deg); opacity: .4; } 60% { transform: translateX(-50%) rotateX(-90deg); opacity: .4; } 100% { transform: translateX(-50%) rotateX(0); } }
@keyframes ring { 0% { box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 0 0 rgba(243,207,122,.7); } 100% { box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 0 26px rgba(243,207,122,0); } }
@keyframes turnDial { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes stampIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-8deg); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(.96) rotate(-4deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(255,122,106,.6); } 100% { box-shadow: 0 0 0 18px rgba(255,122,106,0); } }
@keyframes dot { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.rise { animation: riseIn .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms); }
.drop { animation: dropIn .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms); }
.fade-in { animation: fadeIn .8s ease both; }
.stagger { animation: popIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 1.2s infinite; vertical-align: middle; margin-right: 4px; }
/* ---------- Home ---------- */
.home { position: relative; min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, #3a2a14 0%, #0c0a08 60%); display: flex; flex-direction: column; align-items: center; padding: calc(40px + var(--sat)) 20px 80px; }
.home .brand { font-family: var(--font-title); font-weight: 700; font-size: clamp(38px, 7vw, 72px); letter-spacing: .22em; color: var(--gold-2); text-shadow: 0 2px 30px rgba(217,164,65,.35); margin: 12px 0 4px; animation: riseIn 1s var(--ease) both; }
.home .tag { font-style: italic; font-size: clamp(17px, 2.4vw, 24px); color: var(--paper-2); text-align: center; max-width: 720px; margin: 0 0 32px; animation: riseIn 1s var(--ease) .15s both; }
.home .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; width: min(1080px, 100%); }
.card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.card h2 { font-family: var(--font-title); font-size: 18px; letter-spacing: .12em; color: var(--gold); margin: 0 0 14px; text-transform: uppercase; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-family: var(--font-ui); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-2); }
.field input, .field textarea { background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--paper); border-radius: 8px; padding: 12px; font-size: 17px; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,164,65,.15); }
.hint { font-size: 14px; color: var(--paper-2); font-style: italic; }
.btn { border: 1px solid var(--gold); background: linear-gradient(180deg, #e7b95a, #b9812a); color: #1a1206; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; border-radius: 8px; padding: 12px 18px; transition: transform .15s var(--ease), filter .15s, box-shadow .2s; min-height: 44px; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(217,164,65,.25); } .btn:active { transform: translateY(1px) scale(.98); } .btn[disabled] { opacity: .5; cursor: wait; transform: none; }
.btn.ghost { background: transparent; color: var(--gold-2); }
.btn.small { padding: 8px 12px; font-size: 12px; min-height: 40px; }
.photo-row { display: flex; gap: 14px; align-items: center; }
.photo-row .preview { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); background: #1a1410; flex: none; transition: transform .4s var(--ease); }
.photo-row .preview.show { animation: popIn .5s var(--ease); border-color: var(--gold); }
.photo-row input { min-width: 0; font-size: 14px; }
.campaigns { display: grid; gap: 12px; }
.camp { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: rgba(255,255,255,.03); display: flex; gap: 12px; align-items: flex-start; transition: border-color .25s, background .25s, transform .25s var(--ease); }
.camp:not(.locked):hover { border-color: var(--gold); background: rgba(255,255,255,.05); transform: translateY(-2px); }
.camp.locked { opacity: .45; }
.camp .name { font-family: var(--font-title); font-size: 16px; color: var(--gold-2); letter-spacing: .04em; }
.camp .t { color: var(--paper-2); font-style: italic; font-size: 15px; }
.camp .stars { font-family: var(--font-ui); font-size: 12px; color: var(--gold); letter-spacing: .1em; }
.games-list { display: grid; gap: 8px; margin-top: 8px; }
.game-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.03); transition: border-color .2s; }
.game-row:hover { border-color: var(--gold); }
.game-row .meta { font-family: var(--font-ui); font-size: 12px; color: var(--paper-2); }
.player-chip { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.player-chip img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1px solid var(--gold); }
.status { font-family: var(--font-ui); font-size: 13px; color: var(--gold-2); min-height: 18px; }
.error { color: #ff8a7a; font-family: var(--font-ui); font-size: 13px; }
@media (max-width: 860px) {
.home { padding: calc(24px + var(--sat)) 12px 60px; }
.home .grid { grid-template-columns: 1fr; gap: 16px; }
.card { padding: 18px 16px; border-radius: 12px; }
.camp { flex-direction: column; } .camp .btn { width: 100%; }
}
/* ---------- Jeu (desktop : tout en superposition sur la scène) ---------- */
.game { position: fixed; inset: 0; overflow: hidden; background: #000; }
.game.hurt::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 9; animation: hurt .7s ease-out; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 1.2s ease, filter .8s ease; will-change: transform, opacity; }
.scene > img.kb { animation: kenburns 45s ease-in-out infinite alternate; }
.scene > img.reveal { animation: focusIn 1.8s var(--ease) both; }
.scene > img.fading { opacity: .35 !important; filter: saturate(.5) blur(2px); }
.scene #scenePrev { z-index: 0; filter: saturate(.75); }
.scene #sceneImg { z-index: 1; }
.scene .placeholder { position: absolute; inset: 0; background: radial-gradient(800px 500px at 50% 40%, #2a1e10, #0a0806 70%); }
.scene .tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: background 2s ease; background: transparent; }
.game.night .scene .tint { background: linear-gradient(180deg, rgba(20,30,70,.22), rgba(5,8,20,.3)); }
.scene .vignette { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,.82) 100%); pointer-events: none; animation: breathe 9s ease-in-out infinite; }
.scene .dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.scene .dust i { position: absolute; width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%; background: radial-gradient(circle, rgba(255,235,190,.95), rgba(255,235,190,0)); animation: drift var(--d, 10s) linear infinite; animation-delay: var(--dl, 0s); opacity: 0; }
.scene .painting { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 3; font-family: var(--font-ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-2); background: var(--panel); padding: 8px 14px; border-radius: 20px; border: 1px solid var(--line); white-space: nowrap; display: flex; gap: 10px; align-items: center; animation: riseIn .6s var(--ease); }
.scene .painting::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 1.2s infinite; }
.scene .painting .clk { font-variant-numeric: tabular-nums; color: var(--gold-2); letter-spacing: .04em; }
.scene .painting .clk:empty { display: none; }
.scene .expand { display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 5; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--paper); font-size: 16px; }
/* HUD haut-gauche : santé + quête (comme le screen) */
.hud-tl { position: absolute; left: 22px; top: 18px; width: 214px; z-index: 3; }
.health { display: flex; gap: 3px; height: 14px; border: 2px solid #f0d9b0; border-radius: 3px; padding: 2px; background: rgba(0,0,0,.45); }
.health i { flex: 1; background: var(--blood); border-radius: 1px; opacity: .25; transition: opacity .6s; transform-origin: bottom; }
.health i.on { opacity: 1; }
.health i.hit { animation: hit 2.2s ease-in-out; }
.health i.gain { animation: gain 1.2s var(--ease); }
.quest { margin-top: 12px; }
/* L'OBJECTIF de l'époque : le cap. Il n'était affiché que tant qu'aucune quête n'existait, donc jamais
passé le premier tour, et le joueur ignorait pour quoi il jouait. Il reste, au-dessus du reste. */
.quest .goal { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); text-shadow: 0 1px 3px #000; margin-bottom: 7px; line-height: 1.3; opacity: .9; }
.quest .qmore { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.quest .qmore span { font-family: var(--font-ui); font-size: 11.5px; color: var(--paper-2); text-shadow: 0 1px 3px #000; padding-left: 10px; position: relative; opacity: .85; }
.quest .qmore span::before { content: '·'; position: absolute; left: 2px; color: var(--gold-2); }
.quest .qmore:hover span { color: #f1ead9; opacity: 1; }
.quest .title { font-family: var(--font-title); font-weight: 700; font-size: 15.5px; color: #fff; text-shadow: 0 1px 4px #000; border-bottom: 2px solid #fff; display: inline-block; padding-bottom: 3px; }
.quest .detail { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.35; color: #f1ead9; text-shadow: 0 1px 3px #000; margin-top: 8px; }
.quest .lvl { font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: #fff; margin-top: 12px; text-shadow: 0 1px 3px #000; }
/* L'échelle : où en est le joueur entre l'inconnu et l'objectif de l'époque (voir lib/ladder.mjs).
Cinq barreaux franchis par des FAITS — un répondant, un toit, un revenu, des gens, du crédit. */
.rung { margin-top: 9px; cursor: pointer; max-width: 214px; }
.rung .pips { display: flex; gap: 4px; }
.rung .pips i { width: 20px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.24); box-shadow: 0 1px 2px rgba(0,0,0,.55); transition: background .5s ease, box-shadow .5s ease; }
.rung .pips i.on { background: var(--gold, #d9a441); box-shadow: 0 0 6px rgba(217,164,65,.55); }
.rung .rt { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--gold-2, #f0d9b0); text-shadow: 0 1px 3px #000, 0 0 10px rgba(0,0,0,.85); margin-top: 5px; }
.rung .rn { font-family: var(--font-ui); font-size: 11px; line-height: 1.32; color: #e8dcc4; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0,0,0,.9); margin-top: 3px; }
.rung:hover .rt { color: #fff; }
/* Ce que la réputation a pesé sur le seuil de l'épreuve */
.tl-rep { font-family: var(--font-ui); font-size: 11.5px; margin-top: 4px; opacity: .92; }
.tl-rep.up { color: #9fd6a0; } .tl-rep.down { color: #e0a08c; }
.tl-rep span { opacity: .7; font-size: 10.5px; }
/* Cadrans haut-droite : horloge + lieu */
.hud-tr { position: absolute; right: 22px; top: 18px; display: flex; gap: 10px; align-items: flex-start; z-index: 3; }
.dial { position: relative; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 3px 10px rgba(0,0,0,.55)); }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial .face { fill: radial-gradient(#fff, #000); fill: #f2d9a8; stroke: #f0d9b0; stroke-width: 2; transition: fill .8s ease; }
.dial .night-arc { fill: rgba(38,48,96,.42); transition: fill .8s ease; }
.dial .ticks line { stroke: rgba(60,40,16,.5); stroke-width: 1; }
.dial .ticks line.big { stroke: rgba(60,40,16,.85); stroke-width: 1.8; }
.dial .rot { transform-origin: 50px 50px; }
.dial .hand { stroke: #6b3f14; stroke-width: 2.6; stroke-linecap: round; }
.dial .sun { fill: #f6c76b; stroke: #a25a20; stroke-width: 1.2; filter: drop-shadow(0 0 3px rgba(246,199,107,.9)); }
.dial .moon { fill: #dfe6ff; stroke: #6b7fbf; stroke-width: 1; opacity: .55; }
.dial .hub { fill: #f7e6c4; stroke: rgba(107,63,20,.35); stroke-width: .8; }
.dial .hh { position: relative; z-index: 2; font-family: var(--font-ui); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; color: #6b3f14; letter-spacing: -.02em; text-shadow: 0 1px 0 rgba(255,255,255,.45); pointer-events: none; }
.dial.night .face { fill: #1e2545; stroke: #8fa0d8; }
.dial.night .night-arc { fill: rgba(4,6,18,.72); }
.dial.night .ticks line { stroke: rgba(210,220,255,.35); } .dial.night .ticks line.big { stroke: rgba(210,220,255,.7); }
.dial.night .hand { stroke: #cfd8ff; } .dial.night .hub { fill: #232b4e; stroke: rgba(207,216,255,.35); }
.dial.night .sun { opacity: .45; } .dial.night .moon { opacity: 1; filter: drop-shadow(0 0 4px rgba(207,216,255,.8)); }
.dial.night .hh { color: #e7ecff; text-shadow: 0 1px 3px #000; }
.dial.turn { animation: ring 1.6s ease-out; }
.mapdial { width: 130px; height: 130px; border-radius: 50%; border: 2px solid #f0d9b0; background: radial-gradient(circle at 50% 50%, #3d5a2a, #1f2f16 65%, #15200f); box-shadow: 0 4px 16px rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px; position: relative; overflow: hidden; }
.mapdial::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 1px dashed rgba(240,217,176,.35); animation: spin 90s linear infinite; }
.mapdial.moved { animation: ring 1.8s ease-out; }
.mapdial.moved .loc { animation: popIn .8s var(--ease); }
.mapdial .loc { font-family: var(--font-title); font-size: 11px; line-height: 1.25; color: #fff; text-shadow: 0 1px 3px #000; letter-spacing: .03em; }
.mapdial .reg { font-family: var(--font-ui); font-size: 10px; color: #d8e7c4; margin-top: 4px; }
.mapdial .date { font-family: var(--font-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); margin-top: 4px; }
.date-banner { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 3; font-family: var(--font-title); font-weight: 700; letter-spacing: .22em; font-size: 14px; color: #fff; text-shadow: 0 1px 6px #000; background: var(--panel); padding: 8px 18px; border-radius: 4px; border: 1px solid var(--line); white-space: nowrap; transform-style: preserve-3d; }
.date-banner.flip { animation: flip 1.1s var(--ease) .4s; }
.date-banner b { color: var(--gold-2); }
/* Menu desktop (bandeau d'onglets sous la date) */
.menu { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 3; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.menu button { background: var(--panel); border: 1px solid var(--line); color: var(--paper-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; transition: color .2s, border-color .2s, transform .2s var(--ease); }
.menu button:hover { color: var(--gold-2); border-color: var(--gold); transform: translateY(-1px); }
/* Portraits bas (joueur à gauche, PNJ à droite) — ce sont des boutons (ouvrent la feuille).
Le nom est GRAVÉ DANS le cadre, sur un voile sombre au pied du portrait : on sait toujours à qui
l'on parle sans quitter le visage des yeux, et le bloc ne mange plus de hauteur sous l'image.
⚠ L'`img` du portrait vit à l'intérieur de `.scene` : sans le `>` de `.scene > img`, elle héritait
du `position:absolute; inset:0` des images de scène, débordait du cadre et recouvrait le nom. */
.portrait { position: absolute; bottom: 22px; width: 208px; z-index: 4; background: none; border: 0; padding: 0; text-align: left; color: inherit; font-family: inherit; transition: transform .25s var(--ease); }
.portrait:hover { transform: translateY(-3px); }
.portrait.left { left: 22px; } .portrait.right { right: 22px; }
.portrait .frame { position: relative; width: 208px; height: 272px; border: 3px solid #f0d9b0; box-shadow: 0 8px 30px rgba(0,0,0,.7); background: #1a1410; overflow: hidden; border-radius: 3px; transition: border-color .3s; }
.portrait .frame img { position: static; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.portrait.speaking .frame { border-color: var(--gold-2); animation: glow 1.4s ease-in-out infinite; }
.portrait.speaking .frame img { transform: scale(1.04); }
.portrait.speaking .plate .name { color: var(--gold-2); }
.portrait .frame .noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 44px; color: #6b5a3f; }
/* la plaque de nom, dans le cadre */
.portrait .plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 12px 10px; text-align: left; pointer-events: none;
background: linear-gradient(180deg, rgba(8,6,4,0) 0%, rgba(9,7,5,.62) 30%, rgba(9,7,5,.92) 62%, rgba(6,4,3,.985) 100%);
backdrop-filter: blur(1.5px); }
.portrait .plate .name { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 16px; letter-spacing: .01em; color: #fff; text-shadow: 0 1px 5px #000, 0 0 14px rgba(0,0,0,.8); line-height: 1.15; transition: color .3s; overflow: hidden; text-overflow: ellipsis; }
.portrait .plate .role { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em; color: var(--paper-2); text-shadow: 0 1px 5px #000; line-height: 1.25; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portrait.right .plate { text-align: right; }
.portrait.right { text-align: right; }
/* Dialogue : fil (narration + répliques) + barre d'action */
/* Toute la conversation tient dans UN axe de lecture. Sans `max-width`, la narration restait à gauche
pendant que les répliques, alignées à droite d'une zone de 2000 px, partaient 700 px plus loin :
l'œil traversait l'écran à chaque tour de parole. Le joueur reste à gauche, les PNJ à droite, mais
dans la même colonne. Le reste de la largeur appartient à la scène. */
.dialog { position: absolute; left: 258px; right: 252px; bottom: 22px; z-index: 4; display: flex; flex-direction: column; gap: 10px; max-width: none; max-height: 74vh; transition: min-height .8s var(--ease); }
/* Le fil de lecture et les commandes gardent la colonne étroite (une seule ligne de mire) ; seule la
barre de jauges profite de toute la largeur entre les cadres, sinon elle se replie en pavé de deux
lignes qui mange la hauteur de lecture. */
.flow, .choices, .free { max-width: 84ch; }
.flow { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; min-height: 150px; flex: 1 1 auto; padding-right: 6px;
scrollbar-width: thin; scrollbar-color: rgba(217,164,65,.42) transparent; }
/* Ascenseur discret et d'époque : celui du système (gris clair, avec ses flèches) cassait la scène. */
.flow.scrolled { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px); mask-image: linear-gradient(180deg, transparent 0, #000 24px); }
/* Il reste du texte en dessous : on le montre au lieu de le couper net sous les boutons d'action. */
.flow.more { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%); }
.flow.scrolled.more { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 26px), transparent 100%); }
.flow::-webkit-scrollbar { width: 8px; }
.flow::-webkit-scrollbar-track { background: transparent; }
.flow::-webkit-scrollbar-thumb { background: rgba(217,164,65,.35); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.flow::-webkit-scrollbar-thumb:hover { background: rgba(243,207,122,.6); background-clip: content-box; }
/* Pendant que la scène se peint (≈ 20 s), le haut de l'écran est un rectangle vide et le texte attend
tout en bas, loin du centre optique. On déploie le bloc vers le haut : le texte remonte, et comme
c'est `min-height` qui grandit (et non la position qui change), la barre d'action reste ancrée en
bas. Un bouton ne bouge jamais sous le curseur au moment où l'image arrive. */
.game:has(#painting:not(.hidden)) .dialog { min-height: 52vh; }
@media (prefers-reduced-motion: reduce) { .dialog { transition: none; } }
.actionbar { display: flex; flex-direction: column; gap: 8px; flex: none; }
/* La colonne de lecture. `max-width` est la règle la plus importante de ce fichier : sans elle, la
narration prenait toute la largeur de `.dialog` (≈ 2000 px sur un grand écran), soit 168 caractères
par ligne mesurés sur un vrai rendu. Au-delà de ~90, l'œil rate la ligne suivante au retour à la
ligne et on relit la même. 66ch nous ramène à ~70. L'ombre portée a sauté : sur une serif claire
posée sur du sombre, elle empâte les jambages au lieu de détacher le texte. */
.narration { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; font-size: 18px; line-height: 1.7; color: #f5eedd; max-width: 66ch; text-wrap: pretty; animation: riseIn .6s var(--ease) both; }
/* Le décor du lieu, dans sa propre bulle au-dessus de la scène. Il doit se lire comme une autre
VOIX, pas comme un paragraphe de plus : plus étroit, en italique, plus sourd, sans le fond plein
de la narration. Le signe météo en tête donne le temps qu'il fait avant même la lecture. */
.setting { display: flex; gap: 12px; align-items: baseline; max-width: 58ch; padding: 10px 16px; border: 1px solid rgba(233,220,195,.14); border-radius: 10px; background: rgba(10,8,6,.55);
font-size: 15.5px; line-height: 1.6; font-style: italic; color: var(--paper-2); text-wrap: pretty; animation: riseIn .5s var(--ease) both; }
.setting .ico { flex: none; font-style: normal; font-size: 15px; color: var(--gold); opacity: .85; line-height: 1.6; }
.setting .txt { min-width: 0; }
.narration p { margin: 0; }
.narration p + p { margin-top: .8em; }
.narration .w { display: inline; }
/* `--pt` (posé sur chaque ) : la pause entre deux battements — un paragraphe attend que le précédent ait fini (chantier immersion). */
.narration.typing .w { opacity: 0; animation: wordIn .42s ease-out forwards; animation-delay: calc(var(--t0, 0ms) + var(--pt, 0ms) + var(--i) * var(--wms, 34ms)); }
.narration.typing.instant .w { animation: none; opacity: 1; }
.events { display: flex; flex-direction: column; gap: 6px; }
.event { align-self: flex-start; background: rgba(120, 30, 20, .75); border: 1px solid rgba(255,140,120,.35); color: #ffe6dd; font-family: var(--font-ui); font-size: 13px; padding: 6px 12px; border-radius: 20px; transition: opacity .5s ease, transform .6s var(--ease); }
.event.pending { opacity: 0; transform: translateY(-10px); }
.event.history::before { content: '🔔 ÉVÉNEMENT HISTORIQUE — '; letter-spacing: .06em; font-weight: 600; }
.event.consequence::before { content: '⌛ CONSÉQUENCE — '; letter-spacing: .06em; font-weight: 600; }
.lines { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.lines.top { align-items: flex-start; }
/* Les répliques suivent la même règle de longueur de ligne que la narration : à 80 % d'une zone de
2000 px, une phrase de PNJ traversait tout l'écran. Un peu plus étroit que la narration, parce
qu'une bulle se lit d'un souffle. */
.line { background: rgba(8, 6, 4, .86); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; padding: 10px 18px; font-family: var(--font-ui); font-size: 15.5px; line-height: 1.55; color: #fff; max-width: min(58ch, 80%); text-wrap: pretty; animation: lineInR .55s var(--ease) both; }
.line.player { align-self: flex-start; background: rgba(40, 32, 22, .9); color: #f7e7c3; animation-name: lineInL; }
.line.pending { display: none; }
.line .who { color: var(--gold-2); font-weight: 600; margin-right: 6px; }
/* Ce que la scène a mis (ou pris) dans le paquetage — annoncé sous les répliques, cliquable vers l'onglet 🎒 */
.loot { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-ui); font-size: 12.5px; color: var(--paper-2); background: rgba(30, 24, 12, .72); border: 1px solid rgba(217,164,65,.32); border-left: 3px solid var(--gold); border-radius: 6px; padding: 7px 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.loot:hover { background: rgba(44, 35, 16, .82); border-color: rgba(217,164,65,.6); }
.loot.pending { display: none; }
.loot.late { animation: popIn .6s var(--ease) both, glow 2.4s ease-in-out 2; }
.lt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lt-row b { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; color: var(--gold-2); }
.lt-row.out b { color: rgba(255,190,170,.85); }
.lt { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 2px 9px; color: #f3e7cf; }
.lt-row.out .lt { color: #e8cfc6; opacity: .85; text-decoration: line-through; text-decoration-color: rgba(255,140,120,.5); }
.menu button.void { opacity: .42; }
.menu button.void:hover { opacity: .8; }
.menu button.new { color: var(--gold-2); border-color: var(--gold); }
.menu button.new::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 5px; vertical-align: 2px; border-radius: 50%; background: var(--gold); animation: pulse 1.8s ease-in-out infinite; }
.probe { font-family: var(--font-ui); font-size: 13px; color: var(--gold-2); background: rgba(60,40,10,.7); border: 1px solid rgba(217,164,65,.4); border-radius: 8px; padding: 8px 12px; animation: popIn .6s var(--ease) both, glow 2.4s ease-in-out 2; }
.probe.pending { display: none; }
.probe b { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-right: 6px; }
/* Les actions du corps et les choix de scène partageaient la même pilule sur des lignes adjacentes :
deux registres de décision opposés, un seul traitement visuel. On les sépare par un trait. */
.needs { padding-bottom: 9px; border-bottom: 1px solid rgba(217,164,65,.16); margin-bottom: 2px; }
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choices button { background: rgba(8,6,4,.85); border: 1px solid var(--line); color: var(--paper); font-family: var(--font-body); font-size: 16px; padding: 8px 14px; border-radius: 6px; transition: border-color .2s, background .2s, transform .2s var(--ease), opacity .4s; min-height: 40px; animation: popIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.choices button.pending { opacity: 0; animation: none; }
.choices button:hover { border-color: var(--gold); background: rgba(50, 36, 14, .9); transform: translateY(-2px); }
.choices button:active { transform: scale(.97); }
.free { display: flex; gap: 8px; align-items: stretch; }
.free input { flex: 1; min-width: 0; background: rgba(8,6,4,.9); border: 1px solid var(--line); border-radius: 10px; color: #fff; font-size: 17px; padding: 12px 14px; transition: border-color .2s, box-shadow .25s; }
.free input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,164,65,.14); }
.free input.listening { border-color: #ff9a8a; box-shadow: 0 0 0 3px rgba(255,120,100,.2); }
.free input.transcribing { background-image: linear-gradient(90deg, rgba(243,207,122,0) 0%, rgba(243,207,122,.12) 50%, rgba(243,207,122,0) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.free .mic { width: 54px; flex: none; border-radius: 10px; border: 1px solid var(--gold); background: linear-gradient(180deg, #e7b95a, #b9812a); font-size: 22px; color: #1a1206; transition: transform .15s var(--ease), filter .15s; }
.free .mic:hover { filter: brightness(1.08); transform: translateY(-1px); }
.free .mic.rec { background: linear-gradient(180deg, #ff7a6a, #b82a1c); border-color: #ff9a8a; animation: ripple 1s ease-out infinite; }
.free .send { width: 54px; flex: none; border-radius: 10px; border: 1px solid var(--line); background: rgba(8,6,4,.9); color: var(--gold-2); font-size: 18px; transition: border-color .2s, background .25s, transform .15s var(--ease), color .2s; }
.free .send.ready { border-color: var(--gold); background: linear-gradient(180deg, #e7b95a, #b9812a); color: #1a1206; }
.free .send:hover { transform: translateY(-1px); }
.free .menu-btn { display: none; width: 48px; flex: none; border-radius: 10px; border: 1px solid var(--line); background: rgba(8,6,4,.9); color: var(--gold-2); font-size: 20px; }
.free .send:hover, .free .menu-btn:hover { border-color: var(--gold); }
/* Barre de jauges (dans la barre d'action) */
/* La barre reste sur UNE ligne : sur deux, elle devient un pavé qui vole la hauteur de lecture.
Sous ~1400 px la place manque pour les libellés : on garde l'icône, le chiffre et l'infobulle. */
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px; font-family: var(--font-ui); font-size: 13px; color: #fff; }
.stats span { display: flex; gap: 5px; align-items: center; white-space: nowrap; cursor: pointer; position: relative; padding: 2px 4px; border-radius: 6px; transition: transform .2s var(--ease); }
.stats span:hover { transform: translateY(-1px); }
.stats span.flash-up { animation: flashUp 1.6s ease-out; } .stats span.flash-down { animation: flashDown 1.6s ease-out; }
.stats i { font-style: normal; }
.stats b { color: var(--gold-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.stats .lbl { color: #f1ead9; }
.stats .d { font-size: 11px; font-style: normal; }
.stats .d.up { color: #8ee08a; } .stats .d.down { color: #ff8a7a; }
.stats .chip { position: absolute; left: 50%; top: -6px; font-size: 13px; font-weight: 700; font-style: normal; pointer-events: none; animation: chipUp 1.5s ease-out forwards; text-shadow: 0 1px 3px #000; }
.stats .chip.up { color: #8ee08a; } .stats .chip.down { color: #ff8a7a; }
/* Overlay de délibération (le tour) */
.thinking { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); padding: 16px; opacity: 0; transition: opacity .35s ease; }
.thinking.open { opacity: 1; }
.thinking .box { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px 18px; width: min(468px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overscroll-behavior: contain; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.7); transform: translateY(16px) scale(.98); transition: transform .45s var(--ease); position: relative; overflow: hidden auto; scroll-behavior: smooth; }
/* La barre de défilement apparaissait dès que la boîte grandissait et cassait la mise en page.
On la masque : le contenu défile toujours, et un voile en bas dit qu'il reste à lire. */
.thinking .box { scrollbar-width: none; -ms-overflow-style: none; }
.thinking .box::-webkit-scrollbar { width: 0; height: 0; display: none; }
.thinking.open .box { transform: none; }
.thinking.done .box { border-color: var(--gold); }
.thinking .box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px 260px at 50% -12%, rgba(217,164,65,.14), transparent 72%); pointer-events: none; }
.orrery { position: relative; width: 84px; height: 84px; margin: 0 auto 10px; }
.orrery i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(243,207,122,.55); }
.orrery .r1 { animation: spin 14s linear infinite; }
.orrery .r2 { inset: 10px; border-style: dotted; border-color: rgba(233,220,195,.5); animation: spinBack 9s linear infinite; }
.orrery .r3 { inset: 20px; border-style: solid; border-color: rgba(217,164,65,.35); border-top-color: var(--gold-2); animation: spin 2.4s cubic-bezier(.6,.1,.4,.9) infinite; }
.orrery .r4 { inset: 30px; border: 0; background: radial-gradient(circle, rgba(243,207,122,.35), transparent 70%); animation: pulse 2s ease-in-out infinite; }
.orrery b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--gold-2); text-shadow: 0 0 12px rgba(243,207,122,.6); animation: bob 3s ease-in-out infinite; }
.thinking.done .orrery i { animation-play-state: paused; border-color: var(--gold-2); }
.thinking .t { font-family: var(--font-title); letter-spacing: .18em; font-size: 13px; color: var(--gold); text-transform: uppercase; }
.thinking .muse { margin-top: 8px; min-height: 2.6em; font-style: italic; font-size: 16.5px; color: #f5eedd; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.thinking .muse.in { animation: wordIn .7s ease-out both; }
.thinking .bar { margin-top: 10px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.thinking .bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #b9812a, #f3cf7a, #b9812a); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; transition: width .6s ease; }
.thinking .clock { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: 11.5px; color: var(--paper-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.thinking .clock span:first-child { color: var(--gold-2); font-weight: 600; }
.thinking .steps { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; font-family: var(--font-ui); font-size: 13px; color: var(--paper-2); text-align: left; }
.thinking .steps div { display: flex; gap: 8px; align-items: center; transition: color .3s; }
.thinking .steps .st { width: 14px; text-align: center; flex: none; }
.thinking .steps .st::before { content: '○'; color: var(--paper-2); }
.thinking .steps .lb { flex: 1; }
.thinking .steps .ms { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--paper-2); opacity: .8; }
.thinking .steps div.on { color: #fff; }
.thinking .steps div.on .st::before { content: '●'; color: var(--gold); animation: pulse 1s infinite; }
.thinking .steps div.on .ms { color: var(--gold-2); }
.thinking .steps div.done { color: #d9cdb4; }
.thinking .steps div.done .st::before { content: '✓'; color: #8ee08a; }
.thinking .intent { margin-top: 12px; text-align: left; font-family: var(--font-ui); font-size: 13px; color: #f1ead9; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .6s ease, max-height .7s var(--ease); }
.thinking .intent.in { opacity: 1; max-height: 260px; }
.thinking .intent .sum { line-height: 1.4; }
.thinking .intent .sum b { color: var(--gold-2); font-weight: 600; }
.thinking .intent .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.thinking .intent .chip { font-size: 11px; padding: 3px 8px; border-radius: 12px; border: 1px solid var(--line); color: var(--paper-2); animation: popIn .4s var(--ease) both; }
.thinking .intent .chip.know { border-color: rgba(142,224,138,.5); color: #b8f0b4; }
.thinking .intent .chip.claim { border-color: var(--gold); color: var(--gold-2); }
.thinking .intent .chip.risk { border-color: rgba(255,138,122,.6); color: #ffb0a4; }
.thinking .intent .ctx { margin-top: 8px; font-size: 12px; color: var(--paper-2); font-style: italic; opacity: 0; transition: opacity .6s; }
.thinking .intent .ctx.in { opacity: 1; }
.thinking .intent .ctx b { color: var(--gold-2); font-weight: 600; font-style: normal; }
.thinking .said { margin: 0 0 12px; font-style: italic; color: var(--paper-2); font-size: 14.5px; max-height: 3.2em; overflow: hidden; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.thinking .stamp { position: absolute; left: 50%; top: 50%; z-index: 2; font-family: var(--font-title); font-weight: 700; font-size: 34px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); border: 4px solid var(--gold-2); padding: 8px 22px; border-radius: 6px; opacity: 0; text-shadow: 0 2px 10px #000; box-shadow: 0 0 40px rgba(0,0,0,.6); background: rgba(10,8,6,.6); backdrop-filter: blur(3px); white-space: nowrap; }
.thinking .stamp.in { animation: stampIn .55s var(--ease) forwards; }
.thinking .stamp.failure, .thinking .stamp.catastrophe { color: #ff8a7a; border-color: #ff8a7a; }
.thinking .stamp.partial { color: #f1ead9; border-color: #f1ead9; }
/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--sab)); transform: translate(-50%, 20px); z-index: 50; background: #3a1410; color: #ffe6dd; border: 1px solid #ff8a7a; border-radius: 10px; padding: 10px 16px; font-family: var(--font-ui); font-size: 14px; opacity: 0; transition: .3s var(--ease); max-width: min(520px, 92vw); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Une erreur attend qu'on la lise : elle ne s'efface pas toute seule */
.toast.dismissible { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.toast.dismissible .x { background: none; border: 0; color: #ffb9ac; font-size: 15px; cursor: pointer; padding: 0 2px; line-height: 1; }
.toast.dismissible:hover { border-color: #ffb9ac; }
/* Écran de délibération : rien ne se referme tout seul, c'est le joueur qui renvoie l'écran */
/* La boîte défile (la scène s'y écrit au fil de l'eau) : le bouton reste COLLÉ en bas, sinon il passe
sous le pli et le joueur voit « RATÉ » sans rien pour continuer. */
.thinking .go { position: sticky; bottom: -18px; margin: 16px -26px -18px; padding: 14px 26px 18px; background: linear-gradient(180deg, transparent, var(--panel-2) 45%); opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s var(--ease); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 2; }
.thinking .go.in { opacity: 1; transform: none; }
.thinking .go-btn { font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: .04em; color: #1c1409; background: linear-gradient(180deg, #f3cf7a, #d9a441); border: 0; border-radius: 9px; padding: 9px 26px; cursor: pointer; box-shadow: 0 4px 14px rgba(217,164,65,.3); transition: transform .18s var(--ease), box-shadow .18s ease; }
.thinking .go-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(217,164,65,.45); }
.thinking .go-btn:active { transform: translateY(1px); }
.thinking .go-hint { font-family: var(--font-ui); font-size: 11px; color: #9d947f; letter-spacing: .03em; }
/* Lightbox (scène en grand) */
.lightbox { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; }
.lightbox.open { opacity: 1; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(.96); transition: transform .35s var(--ease); }
.lightbox.open img { transform: none; }
.lightbox .close { position: absolute; top: calc(12px + var(--sat)); right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: #fff; font-size: 18px; }
/* ---------- Badge debug (discret, haut droite) + panneau télémétrie ---------- */
.dbg { position: fixed; z-index: 35; top: 158px; right: 22px; height: 26px; border-radius: 13px; border: 1px solid rgba(243,207,122,.45); background: rgba(10,8,6,.7); color: var(--gold-2); font-family: var(--font-ui); font-size: 11px; display: flex; align-items: center; gap: 5px; padding: 0 8px 0 6px; opacity: .7; transition: opacity .25s, background .25s, transform .2s var(--ease); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.dbg .ic { font-size: 13px; line-height: 1; }
.dbg .v { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dbg .v:empty { display: none; }
.dbg:hover, .dbg.busy { opacity: 1; background: rgba(10,8,6,.9); transform: translateY(-1px); }
.dbg.busy .ic { animation: pulse .9s infinite; }
.dbg.home { top: auto; bottom: 14px; right: 14px; }
.dbg-panel { position: fixed; z-index: 36; top: 192px; right: 22px; width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 210px); overflow: auto; background: rgba(12,10,8,.97); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 16px; font-family: var(--font-ui); font-size: 12px; color: #e9dcc3; box-shadow: 0 30px 80px rgba(0,0,0,.7); opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--ease); scrollbar-width: thin; }
.dbg-panel.open { opacity: 1; transform: none; }
.dbg-panel .hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dbg-panel .hd b { font-family: var(--font-title); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--gold); }
.dbg-panel .hd .hint { font-size: 11px; flex: 1; }
.dbg-panel .x { background: transparent; border: 0; color: var(--paper-2); font-size: 14px; padding: 2px 6px; }
.dbg-panel .sec { border-top: 1px solid var(--line); padding: 8px 0 4px; }
.dbg-panel .sec.live { border-color: var(--gold); }
.dbg-panel h5 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-2); display: flex; align-items: center; gap: 6px; }
.dbg-panel .r { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.dbg-panel .r span { color: var(--paper-2); }
.dbg-panel .r b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.dbg-panel .r.on b { color: var(--gold-2); } .dbg-panel .r.done b { color: #8ee08a; }
.dbg-panel i { color: var(--paper-2); font-style: normal; opacity: .8; }
.dbg-panel .bad { color: #ff8a7a; }
.dbg-panel .phases { display: flex; gap: 2px; height: 16px; margin: 3px 0 5px; border-radius: 4px; overflow: hidden; font-size: 9.5px; }
.dbg-panel .phases .ph { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; white-space: nowrap; color: #1a1206; font-weight: 600; }
.dbg-panel .ph.interpret { background: #cbb894; } .dbg-panel .ph.retrieve { background: #8fa88a; } .dbg-panel .ph.arbiter { background: #e7b95a; } .dbg-panel .ph.persist { background: #b48a7a; }
.dbg-panel table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 11px; }
.dbg-panel th { text-align: left; font-weight: 500; color: var(--paper-2); padding: 2px 4px; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.dbg-panel td { padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,.04); font-variant-numeric: tabular-nums; vertical-align: top; }
.dbg-panel td i { display: block; font-size: 9.5px; }
.dbg-panel td:not(:first-child), .dbg-panel th:not(:first-child) { text-align: right; white-space: nowrap; }
.dbg-panel .calls, .dbg-panel .turns { display: flex; flex-direction: column; gap: 3px; }
.dbg-panel .c { display: grid; grid-template-columns: 1.3fr auto 1fr auto; gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 11px; }
.dbg-panel .turns .c { grid-template-columns: 1.6fr auto auto; }
.dbg-panel .c.error { color: #ff8a7a; }
.dbg-panel .c .k { color: #fff; } .dbg-panel .c .k i { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbg-panel .c .m, .dbg-panel .c .$ { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.dbg-panel .c .u { color: var(--paper-2); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbg-panel .c .e { grid-column: 1 / -1; font-size: 10px; }
/* ---------- Feuille à onglets : panneau latéral (desktop) / bottom sheet (mobile) ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .25s; }
.sheet-backdrop.open { opacity: 1; }
.sheet { position: fixed; z-index: 21; background: rgba(12,10,8,.98); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .35s var(--ease); box-shadow: -20px 0 60px rgba(0,0,0,.6); }
.sheet { top: 0; right: 0; bottom: 0; width: min(560px, 100%); transform: translateX(100%); }
.sheet.open { transform: translateX(0); }
.sheet-handle { display: none; }
.sheet-tabs { display: flex; gap: 6px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; flex: none; align-items: center; }
.sheet-tabs::-webkit-scrollbar { display: none; }
.sheet-tabs button { flex: none; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--paper-2); font-size: 12px; letter-spacing: .04em; padding: 8px 12px; border-radius: 20px; display: flex; gap: 6px; align-items: center; min-height: 36px; white-space: nowrap; transition: background .2s, color .2s, transform .2s var(--ease); }
.sheet-tabs button:hover { transform: translateY(-1px); }
.sheet-tabs button .ic { font-size: 14px; }
.sheet-tabs button.active { color: #1a1206; background: linear-gradient(180deg, #e7b95a, #b9812a); border-color: var(--gold); font-weight: 600; }
.sheet-tabs .home-tab { margin-left: auto; }
.sheet-tabs .close { width: 36px; padding: 0; justify-content: center; font-size: 14px; }
.sheet-body { flex: 1; overflow: auto; padding: 16px 20px 40px; -webkit-overflow-scrolling: touch; }
.sheet-body h3 { font-family: var(--font-title); letter-spacing: .14em; text-transform: uppercase; font-size: 15px; color: var(--gold); margin: 0 0 8px; }
.sheet-body h4 { font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-2); margin: 18px 0 8px; }
.sheet-body > .hint { display: block; margin-bottom: 12px; }
.sheet-body ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sheet-body li { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: rgba(255,255,255,.03); font-size: 16px; }
.sheet-body .sub { font-family: var(--font-ui); font-size: 12.5px; color: var(--paper-2); margin-top: 3px; }
.sheet-body .sub.inline { display: inline; margin: 0; } .sheet-body .sub.right { float: right; }
.sheet-body .empty { color: var(--paper-2); font-style: italic; }
.npc-head { display: flex; gap: 10px; align-items: center; }
.npc-head img, .npc-head .noimg { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; color: #6b5a3f; background: #1a1410; }
.bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; margin-top: 6px; clear: both; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #b9812a, #f3cf7a); animation: barGrow 1s var(--ease) both; transform-origin: left; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bar.red i { background: linear-gradient(90deg, #7a1e14, #ff7a6a); }
.kv { display: flex; gap: 10px 14px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 12px; color: var(--paper-2); margin-top: 6px; }
.kv b { color: var(--gold-2); }
.tag { display: inline-block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--paper-2); margin: 2px 4px 2px 0; }
.tag.new { color: #1a1206; background: var(--gold); border-color: var(--gold); font-weight: 700; }
.sheet li.fresh { box-shadow: inset 3px 0 0 var(--gold); padding-left: 9px; border-radius: 4px; }
.tag.open { color: var(--gold-2); border-color: var(--gold); } .tag.confirmed, .tag.success { color: #8ee08a; border-color: #8ee08a; } .tag.refuted, .tag.failure, .tag.catastrophe { color: #ff8a7a; border-color: #ff8a7a; }
.journal { display: grid; gap: 10px; }
.jentry { border-left: 2px solid var(--line); padding: 2px 0 2px 12px; }
.jentry.current { border-left-color: var(--gold); }
.jdate { font-family: var(--font-ui); font-size: 11.5px; color: var(--paper-2); letter-spacing: .04em; }
.jinput { font-size: 16px; color: var(--gold-2); margin-top: 3px; }
.jex { font-family: var(--font-ui); font-size: 13px; color: #d9cdb4; margin-top: 4px; line-height: 1.4; }
.tree { display: grid; gap: 4px; }
.tnode { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; }
.tnode.on-chain { border-color: var(--line); background: rgba(255,255,255,.03); }
.tnode.current { border-color: var(--gold); }
.tnode.branch { opacity: .55; }
.tnode .d { font-family: var(--font-ui); font-size: 11px; color: var(--paper-2); min-width: 70px; }
.tnode .txt { flex: 1; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rw { background: transparent; border: 1px solid var(--line); color: var(--gold-2); border-radius: 6px; padding: 6px 10px; font-size: 11px; white-space: nowrap; font-family: var(--font-ui); min-height: 32px; transition: border-color .2s, transform .2s var(--ease); }
.rw:hover { border-color: var(--gold); transform: translateY(-1px); }
.rw.now { border-color: var(--gold); color: var(--gold); }
/* Fin de ligne temporelle + Échos */
.gameover { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; animation: fadeIn 1.2s ease both; }
.gameover .box { max-width: 640px; width: 100%; background: var(--panel-2); border: 1px solid var(--blood); border-radius: 14px; padding: 24px 22px; box-shadow: 0 30px 80px #000; margin: auto; animation: riseIn 1s var(--ease) .6s both; }
.gameover .t { font-family: var(--font-title); letter-spacing: .24em; font-size: 14px; color: #ff9a8a; text-transform: uppercase; text-align: center; }
.gameover .reason { text-align: center; font-size: 18px; margin: 12px 0 20px; color: #f5eedd; }
.gameover .reason.victory { color: var(--gold-2); }
.echo-chain { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 12px 0 18px; }
.echo { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; background: rgba(255,255,255,.03); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.echo .y { font-family: var(--font-title); color: var(--gold); font-size: 12px; letter-spacing: .1em; }
.echo .l { font-size: 17px; }
.echo .w { font-family: var(--font-ui); font-size: 12px; color: var(--paper-2); }
.echo-arrow { text-align: center; color: var(--paper-2); font-size: 18px; line-height: 1.2; }
.gameover .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Les libellés disparaissaient dès 1400 px : sur un portable ordinaire (1280) la barre ne montrait plus
que six nombres nus, dont deux monnaies côte à côte. On les garde jusqu'à 1100 px, en plus compact. */
@media (max-width: 1400px) { .stats { gap: 2px 9px; font-size: 12.5px; } .stats .lbl { font-size: 11px; } }
@media (max-width: 1100px) { .stats .lbl { display: none; } .stats { gap: 2px 12px; font-size: 13.5px; } }
.stats .purse { border-left: 1px solid var(--line); padding-left: 9px; margin-left: 3px; }
/* ---------- Mobile : app plein écran, scène en bandeau, fil défilant, barre d'action fixe ---------- */
@media (max-width: 900px) {
.game { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.scene { position: relative; flex: none; height: 40vh; height: 40dvh; min-height: 230px; max-height: 360px; }
.scene .vignette { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,.78) 100%); }
.scene .expand { display: flex; align-items: center; justify-content: center; }
.scene .painting { font-size: 10px; padding: 6px 10px; }
.hud-tl { width: 150px; left: 10px; top: calc(10px + var(--sat)); }
.health { height: 11px; }
.quest .title { font-size: 13px; } .quest .detail { display: none; } .quest .lvl { font-size: 11px; margin-top: 6px; }
.rung { margin-top: 6px; } .rung .rn { display: none; } .rung .pips i { width: 14px; } .rung .rt { font-size: 10px; }
.threat { margin-top: 5px; padding: 4px 7px; } .threat .tw { display: none; } .threat .tn { font-size: 10.5px; }
.hud-tr { right: 10px; top: calc(10px + var(--sat)); gap: 6px; }
.dial { width: 52px; height: 52px; } .dial .hh { font-size: 8px; }
.mapdial { width: 86px; height: 86px; padding: 8px; }
.mapdial .loc { font-size: 7.5px; line-height: 1.2; max-height: 3.6em; overflow: hidden; } .mapdial .reg { display: none; } .mapdial .date { font-size: 7.5px; margin-top: 3px; letter-spacing: .02em; }
.menu { display: none; }
.portrait { bottom: 8px; width: 96px; }
.portrait .frame { width: 96px; height: 124px; border-width: 2px; }
.portrait .plate { padding: 16px 6px 5px; }
.portrait .plate .name { font-size: 11.5px; line-height: 1.1; white-space: nowrap; } .portrait .plate .role { display: none; }
.portrait.left { left: 10px; } .portrait.right { right: 10px; }
.dialog { position: static; flex: 1; min-height: 0; max-height: none; gap: 0; }
.flow { flex: 1; padding: 12px 12px 8px; gap: 10px; min-height: 0; max-width: none; }
.choices, .free { max-width: none; }
.narration { font-size: 16.5px; line-height: 1.6; padding: 14px 16px; }
.setting { font-size: 14px; padding: 9px 12px; gap: 9px; max-width: none; }
.line { max-width: 94%; font-size: 14.5px; padding: 8px 14px; }
.actionbar { background: #0c0a08; border-top: 1px solid var(--line); padding: 8px 10px calc(8px + var(--sab)); gap: 8px; }
.choices { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px; }
.choices::-webkit-scrollbar { display: none; }
.choices button { flex: none; font-size: 15px; padding: 8px 12px; max-width: 78vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.free .menu-btn { display: block; }
.free input { font-size: 16px; padding: 11px 12px; }
.free .mic, .free .send { width: 48px; }
.stats { gap: 6px; font-size: 12px; padding: 5px 4px; justify-content: space-between; border: 0; background: transparent; border-radius: 0; }
.stats .lbl, .stats .d { display: none; }
.stats span { gap: 3px; padding: 2px 3px; }
.thinking { align-items: flex-end; padding-bottom: calc(24px + var(--sab)); }
.thinking .box { padding: 18px 18px 14px; }
.thinking .stamp { font-size: 26px; }
.dbg { top: calc(104px + var(--sat)); right: 10px; }
.dbg-panel { top: calc(134px + var(--sat)); right: 10px; left: 10px; width: auto; max-height: calc(100vh - 150px); }
/* bottom sheet */
.sheet { top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: 88vh; height: 88dvh; border-radius: 18px 18px 0 0; transform: translateY(100%); box-shadow: 0 -20px 60px rgba(0,0,0,.7); }
.sheet.open { transform: translateY(0); }
.sheet-handle { display: block; padding: 10px 0 2px; touch-action: none; }
.sheet-handle i { display: block; width: 42px; height: 5px; border-radius: 3px; background: rgba(233,220,195,.35); margin: 0 auto; }
.sheet-tabs { padding: 8px 12px 10px; touch-action: pan-x; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sheet-tabs .home-tab { margin-left: 0; }
.sheet-body { padding: 14px 14px calc(30px + var(--sab)); }
.gameover { align-items: flex-end; padding: 12px 12px calc(12px + var(--sab)); }
.echo { flex-direction: column; align-items: flex-start; } .echo .rw { align-self: flex-end; }
}
@media (max-width: 900px) and (max-height: 620px) {
.scene { height: 32vh; height: 32dvh; min-height: 180px; }
}
/* ---------- Interludes : le monde bouge (nuit, heures, déplacement) + cartes d'événements ---------- */
/* Pendant un écran plein, le badge de coûts s'efface (il passait au-dessus de la route sur petit écran). */
body:has(.interlude) .dbg, body:has(.interlude) .dbg-panel { opacity: 0; pointer-events: none; }
.dbg { transition: opacity .4s ease; }
/* Écran plein : jamais coupé, jamais fermé tout seul. Le contenu défile s'il dépasse (petits téléphones, journal long). */
.interlude { position: fixed; inset: 0; z-index: 28; background: #000; opacity: 0; transition: opacity 1.6s ease; display: flex; align-items: flex-start; justify-content: center; padding: calc(20px + var(--sat)) 20px calc(20px + var(--sab)); cursor: pointer; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.interlude.dark { opacity: 1; }
.interlude.out { opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.il-stars { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2.5s ease 1.2s; }
.interlude.card .il-stars { opacity: 1; }
.il-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; animation: twinkle var(--d, 3s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes twinkle { 0%, 100% { opacity: .08; } 50% { opacity: .9; } }
.il-card { position: relative; width: min(640px, 100%); margin: auto 0; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity 1.2s ease, transform 1.2s var(--ease); }
.interlude.card .il-card { opacity: 1; transform: none; }
.il-kind { font-family: var(--font-ui); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--paper-2); }
.il-title { font-family: var(--font-title); font-weight: 700; font-size: clamp(26px, 4vw, 40px); letter-spacing: .12em; color: var(--gold-2); margin: 10px 0 4px; text-shadow: 0 2px 30px rgba(217,164,65,.35); }
.il-sub { font-style: italic; font-size: 19px; color: var(--paper); }
.il-date { margin-top: 14px; font-family: var(--font-ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-2); display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.il-date i { color: var(--gold); font-style: normal; }
.il-date span:last-of-type { color: #fff; }
.il-date .il-loc { width: 100%; text-transform: none; letter-spacing: .02em; font-size: 13px; margin-top: 4px; } .il-loc b { color: var(--gold-2); }
.il-narr { margin: 22px auto 0; max-width: 560px; font-size: 19px; line-height: 1.55; color: #f5eedd; text-align: left; opacity: 0; transition: opacity .6s; }
.interlude.narr .il-narr { opacity: 1; }
.il-narr .w { opacity: 0; }
/* `--pt` (posé sur chaque
) : la pause entre deux temps de l'interlude — la chute, le noir, le seuil du réveil (réveil aveugle). */
.interlude.narr .il-narr .w { animation: wordIn .5s ease-out forwards; animation-delay: calc(var(--pt, 0ms) + var(--i) * 45ms); }
.il-narr p { margin: 0; }
.il-narr p + p { margin-top: .85em; }
.interlude.instant .il-narr .w { animation: none; opacity: 1; }
.il-hint { margin-top: 22px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-2); opacity: 0; transition: opacity 1s ease 2s; }
.interlude.narr .il-hint { opacity: .6; animation: pulse 2.4s infinite; }
/* arc soleil → lune */
.il-arc { position: relative; width: 240px; height: 120px; margin: 6px auto 0; overflow: hidden; }
.il-arc::before { content: ''; position: absolute; left: 10px; right: 10px; bottom: -110px; height: 220px; border-radius: 50%; border: 1px dashed rgba(243,207,122,.35); }
.il-arc .orb { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; transform-origin: 0 0; }
.il-arc .orb i { position: absolute; left: -110px; top: -12px; width: 24px; height: 24px; border-radius: 50%; }
.il-arc .sun i { background: radial-gradient(circle at 40% 35%, #fff3b0, #f0b03a 60%, #b8651e); box-shadow: 0 0 24px 6px rgba(240,176,58,.55); }
.il-arc .moon i { background: radial-gradient(circle at 60% 40%, #f6f2e6, #b9c2d6 70%, #6b7899); box-shadow: 0 0 18px 4px rgba(200,210,240,.4); }
.il-arc .sun { transform: rotate(90deg); } .il-arc .moon { transform: rotate(-20deg); }
.interlude.card.nightfall .il-arc .sun { animation: arcSet 3.6s ease-in-out forwards; }
.interlude.card.nightfall .il-arc .moon { animation: arcRise 3.6s ease-in-out forwards; }
@keyframes arcSet { from { transform: rotate(90deg); } to { transform: rotate(190deg); } }
@keyframes arcRise { from { transform: rotate(-20deg); } to { transform: rotate(90deg); } }
.interlude.time_skip .il-arc .moon { display: none; }
.interlude.card.time_skip .il-arc .sun { animation: arcSkip 3.6s ease-in-out forwards; }
@keyframes arcSkip { from { transform: rotate(50deg); } to { transform: rotate(135deg); } }
/* route (déplacement imposé) */
.il-road { width: min(360px, 90%); height: 70px; margin: 8px auto 0; display: block; }
.il-road path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 6; stroke-dashoffset: 600; }
.interlude.card .il-road path { animation: roadDraw 3s ease-out forwards; }
@keyframes roadDraw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.il-road circle { fill: var(--gold-2); }
.il-road .to { opacity: 0; animation: fadeIn .8s ease 2.6s forwards; }
/* cartes d'événements (nouvelles du royaume, conséquences différées) */
.interlude.event .il-card { width: min(560px, 100%); }
.ev { display: flex; gap: 14px; align-items: flex-start; text-align: left; background: rgba(233,220,195,.06); border: 1px solid rgba(255,140,120,.35); border-radius: 12px; padding: 14px 16px; margin-top: 12px; opacity: 0; transform: translateY(10px); }
.interlude.card .ev { animation: popIn .7s var(--ease) forwards; animation-delay: calc(.4s + var(--i) * .9s); }
.ev .ev-ic { font-size: 26px; flex: none; }
.ev-date { font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #ffb0a4; }
.ev-txt { font-size: 18px; line-height: 1.45; color: #f5eedd; margin-top: 4px; }
.interlude.event.card .il-hint { opacity: .6; animation: pulse 2.4s infinite; }
/* ambiance : petite ligne flottante si le joueur hésite */
.ambient { position: absolute; left: 50%; top: 118px; transform: translate(-50%, 8px); z-index: 4; font-style: italic; font-size: 15px; color: #f1ead9; background: rgba(10,8,6,.6); border: 1px solid var(--line); padding: 6px 14px; border-radius: 20px; opacity: 0; transition: opacity .8s, transform .8s var(--ease); pointer-events: none; text-shadow: 0 1px 3px #000; white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; }
.ambient.show { opacity: 1; transform: translate(-50%, 0); }
.actionbar.hold .choices, .actionbar.hold .free { display: none; }
.scene > img.dim { filter: saturate(.6) brightness(.7); }
.thinking .intent .ctx.push { color: var(--gold-2); font-style: normal; }
@media (max-width: 900px) { .ambient { top: auto; bottom: 48px; font-size: 13px; } .il-title { font-size: 26px; } .il-narr { font-size: 17px; } .il-sub { font-size: 17px; } }
/* écrans courts (téléphone en portrait, barre d'URL visible) : on resserre pour que titre, texte et invite tiennent */
@media (max-height: 760px) {
.interlude { padding: calc(14px + var(--sat)) 14px calc(14px + var(--sab)); }
.il-arc { width: 170px; height: 76px; margin-top: 0; } .il-arc .orb i { left: -78px; width: 18px; height: 18px; }
.il-road { height: 52px; margin-top: 2px; }
.il-title { font-size: clamp(21px, 5.6vw, 28px); letter-spacing: .08em; margin: 6px 0 2px; }
.il-sub { font-size: 15.5px; } .il-date { margin-top: 9px; font-size: 11px; gap: 8px; }
.il-narr { margin-top: 14px; font-size: 16px; line-height: 1.48; }
.il-hint { margin-top: 14px; }
.ev { padding: 10px 12px; margin-top: 9px; } .ev .ev-ic { font-size: 21px; } .ev-txt { font-size: 16px; }
.jr-story { font-size: 16px; } .il-card.jr ul { font-size: 14.5px; } .jr-hook { font-size: 15px; }
}
/* rumeurs : propagation par lieu */
.event.rumor { background: rgba(60, 45, 15, .8); border-color: rgba(243,207,122,.4); color: #f7e7c3; }
.event.rumor::before { content: '📣 ON PARLE DE TOI — '; letter-spacing: .06em; font-weight: 600; }
/* L'adversaire frappe : le seul événement qui doit faire lever les yeux (voir lib/rival.mjs) */
.event.rival { background: rgba(96, 14, 14, .88); border-color: rgba(255,110,90,.65); color: #ffdcd4; box-shadow: 0 0 18px rgba(180,30,20,.35); }
.event.rival::before { content: '⚔ TON ADVERSAIRE AGIT — '; letter-spacing: .06em; font-weight: 700; }
.event.faction { background: rgba(30, 40, 70, .82); border-color: rgba(150,180,255,.4); color: #dbe4ff; }
.event.faction::before { content: '⚑ UNE FACTION BOUGE — '; letter-spacing: .06em; font-weight: 600; }
/* La menace au HUD : discrète tant qu'elle couve, insistante quand elle monte */
.threat { margin-top: 8px; max-width: 214px; cursor: pointer; font-family: var(--font-ui); background: rgba(58,10,8,.6); border: 1px solid rgba(220,90,70,.4); border-radius: 8px; padding: 5px 9px; }
.threat .th { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #ff9d86; font-weight: 700; }
.threat .tn { font-size: 12px; color: #ffe2da; font-weight: 600; text-shadow: 0 1px 3px #000; }
.threat .tw { font-size: 10.5px; line-height: 1.3; color: #e5c3ba; margin-top: 2px; }
.threat .tp { display: flex; gap: 3px; margin-top: 4px; }
.threat .tp i { width: 14px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); }
.threat .tp i.on { background: #e0553c; box-shadow: 0 0 6px rgba(224,85,60,.7); }
.threat.hot { border-color: rgba(255,110,80,.85); animation: threatPulse 2.6s ease-in-out infinite; }
@keyframes threatPulse { 0%,100% { box-shadow: 0 0 0 rgba(224,85,60,0); } 50% { box-shadow: 0 0 16px rgba(224,85,60,.5); } }
.ev.rumor { border-color: rgba(243,207,122,.45); } .ev.rumor .ev-date { color: var(--gold-2); }
.spread { display: grid; gap: 6px; margin-top: 8px; }
.sp { border-left: 2px solid var(--line); padding: 2px 0 2px 10px; }
.sp.here { border-left-color: var(--gold); }
.sp-h { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.sp .bar { height: 5px; margin-top: 4px; }
/* ---------- État du joueur : panneau permanent sous la santé + effets plein écran ---------- */
.status { margin-top: 8px; display: grid; gap: 3px; cursor: pointer; background: rgba(10,8,6,.55); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.st { display: grid; grid-template-columns: 16px 54px 1fr 48px; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 11px; color: #f1ead9; position: relative; }
.st i { font-style: normal; font-size: 12px; text-align: center; }
.st .nm { letter-spacing: .04em; text-transform: uppercase; font-size: 9.5px; color: var(--paper-2); }
.st .g { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.st .g b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #b9812a, #f3cf7a); transition: width .9s var(--ease), background .4s; }
.st .lb { font-size: 10px; color: var(--paper-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st.l1 .g b { background: linear-gradient(90deg, #b9812a, #e7b95a); } .st.l1 .lb { color: var(--gold-2); }
.st.l2 .g b { background: linear-gradient(90deg, #a34a1e, #ff9a4a); } .st.l2 .lb, .st.l2 i { color: #ffb070; animation: pulse 2.2s infinite; }
.st.l3 .g b { background: linear-gradient(90deg, #7a1e14, #ff5a4a); } .st.l3 .lb, .st.l3 i { color: #ff7a6a; animation: pulse .9s infinite; }
.st .tip { display: none; position: absolute; left: 100%; top: -4px; margin-left: 10px; z-index: 6; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12px; white-space: nowrap; color: #fff; pointer-events: none; }
.st:hover .tip { display: block; }
.cond-line { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cond-line span { padding: 3px 8px; border-radius: 10px; border: 1px solid; }
.cond-line .l2 { color: #ffb070; border-color: rgba(255,176,112,.6); background: rgba(120,60,10,.5); }
.cond-line .l3 { color: #ff7a6a; border-color: #ff5a4a; background: rgba(120,20,10,.65); animation: pulse .9s infinite; }
.portrait .plate .seen { display: block; font-family: var(--font-ui); font-size: 11.5px; color: var(--gold-2); font-style: italic; text-shadow: 0 1px 4px #000; margin-top: 3px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.need-row.l2 { border-color: rgba(255,138,122,.5); } .need-row.l3 { border-color: #ff5a4a; }
/* paupières (fatigue) */
.scene .eyelids { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
.scene .eyelids i { position: absolute; left: 0; right: 0; height: 0; background: #000; }
.scene .eyelids i:first-child { top: 0; border-radius: 0 0 50% 50% / 0 0 30% 30%; } .scene .eyelids i:last-child { bottom: 0; border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
.game.cond-fatigue-2 .scene .eyelids, .game.cond-fatigue-3 .scene .eyelids { display: block; }
.game.cond-fatigue-2 .scene .eyelids i { animation: blink 16s ease-in-out infinite; }
.game.cond-fatigue-3 .scene .eyelids i { animation: blinkHeavy 8s ease-in-out infinite; }
@keyframes blink { 0%, 88%, 100% { height: 0; } 91% { height: 22%; } 93% { height: 6%; } 96% { height: 34%; } }
@keyframes blinkHeavy { 0%, 70%, 100% { height: 4%; } 76% { height: 40%; } 80% { height: 12%; } 88% { height: 48%; } 94% { height: 20%; } }
.game.cond-fatigue-2 .scene > img { filter: saturate(.85) brightness(.92); }
.game.cond-fatigue-3 .scene > img { filter: blur(1.3px) saturate(.7) brightness(.85); }
/* froid : teinte bleue + tremblement */
.game.cond-cold-2 .scene .tint { background: linear-gradient(180deg, rgba(70,110,190,.22), rgba(40,60,120,.28)) !important; }
.game.cond-cold-3 .scene .tint { background: linear-gradient(180deg, rgba(70,110,190,.38), rgba(30,40,90,.5)) !important; }
.game.cond-cold-2 .scene > img.kb, .game.cond-cold-3 .scene > img.kb { animation: kenburns 45s ease-in-out infinite alternate, shiver .14s steps(2) infinite; }
@keyframes shiver { 0% { translate: 0 0; } 50% { translate: 1.2px -.8px; } 100% { translate: -1px .6px; } }
.game.cond-cold-3 .scene > img { filter: blur(.8px) saturate(.6); }
/* fièvre : halo chaud qui ondule */
.game.cond-fever-2 .scene > img.kb { animation: kenburns 45s ease-in-out infinite alternate, feverWobble 7s ease-in-out infinite; filter: sepia(.15) saturate(1.3) contrast(1.05); }
.game.cond-fever-3 .scene > img.kb { animation: kenburns 45s ease-in-out infinite alternate, feverWobble 4s ease-in-out infinite; filter: blur(1.5px) sepia(.3) saturate(1.6) hue-rotate(-8deg); }
@keyframes feverWobble { 0%, 100% { rotate: 0deg; scale: 1; } 30% { rotate: .6deg; scale: 1.015; } 65% { rotate: -.5deg; scale: 1.01; } }
.game.cond-fever-2 .scene .tint { background: radial-gradient(60% 60% at 50% 40%, rgba(255,140,60,0), rgba(200,80,30,.28)) !important; }
/* faim / soif : la vue s'assombrit par vagues */
.game.cond-hunger-2 .scene .vignette, .game.cond-thirst-2 .scene .vignette { animation: hungerWave 9s ease-in-out infinite; }
.game.cond-hunger-3 .scene .vignette, .game.cond-thirst-3 .scene .vignette { animation: hungerWave 4.5s ease-in-out infinite; }
@keyframes hungerWave { 0%, 100% { opacity: 1; filter: none; } 50% { opacity: 1; filter: brightness(.55); } }
/* blessures / santé basse : bords rouges, battement */
.scene::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; box-shadow: inset 0 0 120px 30px rgba(200,72,58,.6); transition: opacity 1s; }
.game.cond-wound-2 .scene::after { opacity: .45; }
.game.cond-wound-3 .scene::after { opacity: .75; animation: pulse 2s infinite; }
.game.low-health .scene::after { opacity: .9; animation: heartbeat 1.1s ease-in-out infinite; }
.game.low-health .health { animation: pulse .8s infinite; }
@keyframes heartbeat { 0%, 100% { opacity: .5; } 15% { opacity: 1; } 30% { opacity: .55; } 45% { opacity: .95; } }
/* propreté */
.game.cond-hygiene-2 .scene > img { filter: sepia(.25) contrast(.95); }
@media (max-width: 900px) {
.status { padding: 4px 6px; gap: 2px; grid-template-columns: repeat(7, 1fr); }
.st { grid-template-columns: 1fr; gap: 2px; justify-items: center; }
.st .nm, .st .lb, .st .tip { display: none; }
.st .g { width: 100%; height: 4px; }
.cond-line { font-size: 9.5px; gap: 4px; } .cond-line span { padding: 2px 6px; }
.portrait .plate .seen { display: none; }
}
.interlude.collapse { transition: opacity .45s ease; }
.interlude.collapse .il-title, .interlude.sickbed .il-title { color: #ff9a8a; text-shadow: 0 2px 30px rgba(200,72,58,.4); }
.interlude.collapse::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 160px 40px rgba(120, 20, 10, .55); pointer-events: none; }
.interlude.vigil .il-arc .sun { display: none; }
.interlude.card.vigil .il-arc .moon { animation: arcRise 3.6s ease-in-out forwards; }
.interlude.card.collapse .il-arc .sun, .interlude.card.sickbed .il-arc .sun { animation: arcSkip 3.6s ease-in-out forwards; }
.interlude.collapse .il-arc .moon, .interlude.sickbed .il-arc .moon { display: none; }
.thinking .intent .chip.manner { border-color: rgba(203,184,148,.6); color: #f1ead9; }
@media (max-width: 900px) { .need { font-size: 12px; padding: 2px 5px; } }
/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.scene .eyelids { display: none !important; }
.scene > img.kb { animation: none; }
.narration.typing .w { opacity: 1; animation: none; }
}
/* ---------- Actions « du monde » : ce que le corps et l'heure rendent logique (dormir, boire, se réchauffer…) ---------- */
.needs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.needs .cap { font-family: var(--font-ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-2); margin-right: 2px; text-shadow: 0 1px 3px #000; }
.needs .need { display: inline-flex; align-items: center; gap: 6px; background: rgba(8,6,4,.82); border: 1px solid rgba(233,220,195,.28); color: #f1ead9; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; padding: 5px 11px 5px 8px; border-radius: 20px; min-height: 30px; position: relative; transition: border-color .2s, background .2s, transform .2s var(--ease), opacity .4s; animation: popIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
.needs .need i { font-style: normal; font-size: 14px; line-height: 1; }
.needs .need .h { display: none; }
.needs .need.pending { opacity: 0; animation: none; }
.needs .need:hover { border-color: var(--gold); background: rgba(50,36,14,.92); transform: translateY(-2px); }
.needs .need:active { transform: scale(.97); }
.needs .need.l1 { border-color: rgba(243,207,122,.55); color: var(--gold-2); }
.needs .need.l2 { border-color: rgba(255,176,112,.75); color: #ffb070; background: rgba(90,40,10,.7); box-shadow: 0 0 0 0 rgba(255,154,74,.35); animation: popIn .5s var(--ease) both, needGlow 2.4s ease-in-out infinite; }
.needs .need.l3 { border-color: #ff5a4a; color: #ff9a8a; background: rgba(120,20,10,.75); animation: popIn .5s var(--ease) both, needGlow 1s ease-in-out infinite; }
@keyframes needGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,154,74,0); } 50% { box-shadow: 0 0 12px 1px rgba(255,154,74,.35); } }
.needs .need.l2:hover, .needs .need.l3:hover { animation: none; }
.actionbar.hold .needs { display: none; }
/* onglet Savoir › Ton corps : mêmes boutons, avec le détail visible */
.needs.sheet-needs { margin: 8px 0 14px; }
.needs.sheet-needs .need { animation: none; padding-right: 12px; }
.needs.sheet-needs .need .h { display: inline; color: var(--paper-2); font-weight: 400; font-size: 11.5px; margin-left: 2px; }
.needs.sheet-needs .need .h::before { content: '· '; }
@media (max-width: 900px) {
.needs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px; }
.needs::-webkit-scrollbar { display: none; }
.needs .cap { display: none; }
.needs .need { flex: none; font-size: 12px; white-space: nowrap; }
.needs.sheet-needs { flex-wrap: wrap; overflow: visible; margin: 8px 0 14px; padding: 0; }
}
/* ---------- Accueil : plusieurs avatars par appareil ---------- */
.avatars { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.avatars .av { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; padding: 6px 4px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; color: var(--paper-2); font-family: var(--font-ui); font-size: 11px; transition: border-color .2s, transform .2s var(--ease), background .2s; }
.avatars .av img, .avatars .av .noimg { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); background: #1a1410; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.avatars .av .nm { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatars .av:hover { border-color: var(--gold); transform: translateY(-2px); }
.avatars .av.active { border-color: var(--gold); background: rgba(217,164,65,.12); color: var(--gold-2); }
.avatars .av.active img { border-color: var(--gold); }
.avatars .av.new .plus { width: 52px; height: 52px; border-radius: 8px; border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--gold-2); }
.game-row img.gp { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); flex: none; }
/* ---------- Paquetage de départ ---------- */
.loadout { position: fixed; inset: 0; z-index: 60; background: rgba(6,4,2,.86); display: flex; align-items: center; justify-content: center; padding: calc(12px + var(--sat)) 12px calc(12px + var(--sab)); opacity: 0; transition: opacity .3s; }
.loadout.open { opacity: 1; }
.lo-card { width: min(920px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.7); transform: translateY(16px); transition: transform .4s var(--ease); overflow: hidden; }
.loadout.open .lo-card { transform: none; }
.lo-head { padding: 18px 22px 10px; border-bottom: 1px solid var(--line); }
.lo-head h2 { font-family: var(--font-title); font-size: 26px; letter-spacing: .1em; color: var(--gold-2); margin: 2px 0 6px; }
.lo-head .hint { margin: 0; }
.lo-body { overflow: auto; padding: 8px 22px 14px; scrollbar-width: thin; }
.lo-body h4 { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 16px 0 8px; }
.lo-body h4 span { color: var(--paper-2); letter-spacing: 0; text-transform: none; font-weight: 400; margin-left: 8px; font-style: italic; }
.lo-outfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lo-outfit, .lo-item { text-align: left; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; color: var(--paper); padding: 10px 12px; transition: border-color .2s, background .2s, transform .2s var(--ease); font-family: var(--font-body); }
.lo-outfit b, .lo-item b { display: block; font-family: var(--font-body); font-size: 16px; color: #f5eedd; }
.lo-outfit span, .lo-item span { display: block; font-size: 13.5px; color: var(--paper-2); line-height: 1.3; margin-top: 2px; }
.lo-outfit em { display: inline-block; margin-top: 6px; font-family: var(--font-ui); font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); border: 1px solid rgba(217,164,65,.5); border-radius: 10px; padding: 1px 7px; }
.lo-outfit:hover, .lo-item:hover { border-color: var(--gold); background: rgba(255,255,255,.05); transform: translateY(-1px); }
.lo-outfit.on, .lo-item.on { border-color: var(--gold); background: rgba(217,164,65,.14); box-shadow: inset 0 0 0 1px rgba(217,164,65,.4); }
.lo-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.lo-item { display: flex; gap: 10px; align-items: flex-start; position: relative; padding-right: 58px; }
.lo-item i { font-style: normal; font-size: 20px; line-height: 1.2; flex: none; width: 26px; text-align: center; }
.lo-item > div { flex: 1; min-width: 0; }
.lo-item em { position: absolute; right: 10px; top: 10px; font-family: var(--font-ui); font-style: normal; font-size: 11px; color: var(--paper-2); }
.lo-item.on em { color: var(--gold-2); }
.lo-item.on::after { content: '✓'; position: absolute; right: 12px; bottom: 8px; color: var(--gold-2); font-family: var(--font-ui); font-size: 13px; }
.lo-custom { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.lo-custom input { background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--paper); border-radius: 8px; padding: 10px 12px; font-size: 16px; }
.lo-custom input:focus { outline: none; border-color: var(--gold); }
.lo-foot { border-top: 1px solid var(--line); padding: 12px 22px calc(12px + var(--sab)); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: rgba(10,8,6,.96); }
.lo-weight { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; font-family: var(--font-ui); font-size: 12px; color: var(--paper-2); }
.lo-weight .bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.lo-weight .bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #b9812a, #f3cf7a); transition: width .35s var(--ease), background .3s; }
.lo-weight .bar i.over { background: linear-gradient(90deg, #a3281e, #ff6a5a); }
.lo-weight b { color: var(--gold-2); font-size: 14px; }
.lo-status { font-family: var(--font-ui); font-size: 13px; color: var(--gold-2); min-width: 120px; }
.lo-btns { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 900px) {
.loadout { padding: 0; align-items: stretch; }
.lo-card { width: 100%; max-height: none; border-radius: 0; border: 0; }
.lo-head { padding: calc(14px + var(--sat)) 14px 8px; } .lo-head h2 { font-size: 22px; }
.lo-body { padding: 6px 14px 12px; }
.lo-outfits, .lo-items, .lo-custom { grid-template-columns: 1fr; }
.lo-foot { padding: 10px 14px calc(10px + var(--sab)); gap: 10px; }
.lo-status { width: 100%; order: 3; min-width: 0; }
.lo-btns { margin-left: 0; width: 100%; order: 4; } .lo-btns .btn { flex: 1; }
}
/* bandeau : une nouvelle version du client a été déployée pendant que la page était ouverte */
.update-banner { position: fixed; left: 50%; top: calc(10px + var(--sat)); transform: translate(-50%, -20px); z-index: 70; background: rgba(60,40,10,.96); color: #f7e7c3; border: 1px solid var(--gold); border-radius: 20px; padding: 8px 16px; font-family: var(--font-ui); font-size: 13px; opacity: 0; transition: .35s var(--ease); box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.update-banner b { color: var(--gold-2); margin-right: 4px; }
.update-banner.show { opacity: 1; transform: translate(-50%, 0); }
/* époques : libellé sur les cartes de campagne et en tête du paquetage */
.camp .era { font-family: var(--font-ui); font-style: normal; font-size: 12px; color: var(--gold-2); letter-spacing: .04em; }
.lo-era { font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 6px; }
/* ---------- Épreuves (dé du serveur), journal du jour, carte, envies des PNJ, objets ---------- */
.thinking .dice { margin-top: 10px; font-family: var(--font-ui); font-size: 13px; color: var(--paper-2); display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; opacity: 0; transform: translateY(6px); transition: .4s var(--ease); }
.thinking .dice.in { opacity: 1; transform: none; }
.thinking .dice b { font-size: 18px; color: var(--gold-2); font-family: var(--font-title); }
.thinking .dice span { font-style: italic; }
.thinking .dice i { font-style: normal; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; border: 1px solid; }
.thinking .dice.success i { color: #8ee08a; border-color: #8ee08a; } .thinking .dice.failure i { color: #ffb070; border-color: #ffb070; } .thinking .dice.catastrophe i { color: #ff7a6a; border-color: #ff5a4a; animation: pulse .9s infinite; }
.interlude.journal .il-card.jr { max-width: 640px; text-align: left; }
.interlude.journal .il-title { text-align: center; }
.jr-story { font-size: 18px; line-height: 1.5; color: #f5eedd; margin: 10px 0 12px; }
.jr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.jr-chips span { font-family: var(--font-ui); font-size: 12px; padding: 3px 9px; border-radius: 12px; border: 1px solid var(--line); color: var(--paper-2); }
.jr-chips span.up { color: #8ee08a; border-color: rgba(142,224,138,.5); } .jr-chips span.down { color: #ff9a8a; border-color: rgba(255,138,122,.5); }
.il-card.jr h4 { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 12px 0 4px; }
.il-card.jr ul { margin: 0; padding-left: 18px; font-size: 15.5px; line-height: 1.45; color: var(--paper); }
.il-card.jr ul.threats li { color: #ffb070; }
.jr-hook { margin-top: 12px; font-style: italic; color: var(--gold-2); font-size: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.map { width: 100%; aspect-ratio: 1 / 1; max-height: 420px; background: radial-gradient(400px 300px at 50% 45%, rgba(60,45,20,.5), rgba(10,8,6,.2)); border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; font-family: var(--font-ui); }
.map line { stroke: rgba(233,220,195,.25); stroke-width: .5; stroke-dasharray: 1.2 1; } .map line.near { stroke: var(--gold); stroke-dasharray: none; stroke-width: .7; }
.map text.days { font-size: 2.6px; fill: var(--paper-2); text-anchor: middle; }
.map .pl circle { fill: #2a2016; stroke: var(--paper-2); stroke-width: .5; } .map .pl.here circle { fill: var(--gold); stroke: #fff; }
.map .pl circle.rumor { fill: var(--gold); stroke: none; animation: pulse 3s infinite; }
.map .pl text { text-anchor: middle; font-size: 3.4px; fill: #f1ead9; } .map .pl text.nm { font-size: 2.9px; fill: var(--paper-2); font-family: var(--font-body); } .map .pl.here text.nm { fill: var(--gold-2); font-weight: 600; }
.travel { display: flex; flex-direction: column; gap: 6px; }
.travel .rw { text-align: left; }
.travel .rw.banned { border-color: rgba(200,70,60,.45); color: #d8a09a; }
.travel .rw.banned:hover { border-color: rgba(200,70,60,.8); }
.sheet li.sign, .sheet li .sign { color: #ffb070; }
.wants { margin-top: 6px; font-size: 14px; color: var(--gold-2); font-style: italic; }
.obj-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } /* 4 boutons sur un écrit : ça passe à la ligne sur les petits téléphones */
.obj-acts button { background: transparent; border: 1px solid var(--line); color: var(--paper-2); font-family: var(--font-ui); font-size: 11px; padding: 3px 9px; border-radius: 10px; }
.obj-acts button:hover { border-color: var(--gold); color: var(--gold-2); }
.jtrial { font-family: var(--font-ui); font-size: 11.5px; margin: 2px 0 4px; color: var(--paper-2); }
.jtrial.success { color: #8ee08a; } .jtrial.failure { color: #ffb070; } .jtrial.catastrophe { color: #ff7a6a; }
.jday { margin: 6px 0 14px; padding: 10px 12px; border: 1px solid rgba(217,164,65,.45); border-left: 3px solid var(--gold); border-radius: 8px; background: rgba(60,45,20,.25); }
.jday b { font-family: var(--font-title); color: var(--gold-2); letter-spacing: .04em; }
/* ---------- Agenda : routine du monde, rendez-vous, échéances ---------- */
/* La routine de l'époque (« Bains et oisiveté ») portait la même pastille qu'un rendez-vous pris en jeu,
alors que l'agenda du joueur était vide. Ce qui n'engage personne est dit en gris. */
.next-up.routine { color: var(--paper-2); border-color: var(--line); opacity: .72; }
.next-up.routine b { font-weight: 500; }
.next-up { margin-top: 6px; font-family: var(--font-ui); font-size: 11.5px; color: var(--gold-2); background: rgba(10,8,6,.55); border: 1px solid rgba(217,164,65,.35); border-radius: 8px; padding: 4px 9px; cursor: pointer; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-up b { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; margin-right: 4px; color: var(--paper-2); }
.next-up:hover { border-color: var(--gold); }
.ag-day { margin: 10px 0 14px; }
.ag-date { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--font-title); font-size: 15px; color: var(--gold-2); letter-spacing: .06em; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.ag-date span { font-family: var(--font-ui); font-size: 11px; color: var(--paper-2); letter-spacing: 0; }
.ag-day.today .ag-date { color: var(--gold); border-bottom-color: rgba(217,164,65,.5); }
.ag-day ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.ag-item { display: flex; align-items: flex-start; gap: 9px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.03); }
.ag-item .t { font-family: var(--font-ui); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); width: 62px; flex: none; padding-top: 2px; }
.ag-item .b { flex: 1; min-width: 0; }
.ag-item b { font-family: var(--font-body); font-size: 16px; color: #f5eedd; font-weight: 500; }
.ag-item .sub.meta { font-size: 11.5px; opacity: .75; }
.ag-item.arbiter { border-color: rgba(217,164,65,.5); background: rgba(60,45,20,.25); }
.ag-item.claim { border-color: rgba(255,176,112,.45); }
.ag-item.past { opacity: .42; }
.ag-item .rw { align-self: center; flex: none; }
.ag-later { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.ag-later li { padding: 5px 8px; border-left: 2px solid var(--line); }
.ag-later b { font-family: var(--font-ui); font-size: 11px; color: var(--gold-2); letter-spacing: .04em; }
.ag-later.missed li { border-left-color: #ff8a7a; } .ag-later.missed b { color: #ff9a8a; }
.ag-later.done li { border-left-color: #8ee08a; opacity: .8; } .ag-later.done b { color: #8ee08a; }
@media (max-width: 900px) { .next-up { max-width: 180px; font-size: 10.5px; } .ag-item .t { width: 54px; } }
/* ---------- Écran de l'épreuve : l'enjeu, le dé qui roule, puis le verdict ----------
Entièrement fluide (clamp + vmin/vh) : le dé et le verdict grandissent avec l'écran au lieu
de sauter à un palier « mobile ». La boîte défile si l'enjeu est long ; l'animation du lancer
est franche (tumble + halo + onde à l'atterrissage) et se termine sur une piste 0→100 qui
montre le jet face au seuil. `prefers-reduced-motion` coupe le mouvement, pas la lisibilité. */
.thinking.roll .orrery, .thinking.roll .t, .thinking.roll .muse, .thinking.roll .bar, .thinking.roll .clock, .thinking.roll .steps, .thinking.roll .intent, .thinking.roll .said { display: none; }
.thinking.roll { align-items: center; padding: max(12px, var(--sat)) 12px max(12px, var(--sab)); background: rgba(0,0,0,.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.thinking.roll .box { background: rgba(8,6,4,.97); width: min(440px, 100%); max-height: 100%; padding: clamp(18px, 5vw, 28px) clamp(16px, 5vw, 26px) clamp(18px, 5vw, 24px); overflow: hidden auto; animation: rollSwap .45s var(--ease); }
@keyframes rollSwap { from { opacity: .55; transform: scale(.985); } to { opacity: 1; transform: none; } }
.trial { display: flex; flex-direction: column; align-items: center; gap: clamp(5px, 1.5vh, 9px); width: 100%; opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.trial.in { opacity: 1; transform: none; }
.tl-head { font-family: var(--font-title); letter-spacing: .2em; font-size: clamp(10px, 3vw, 12px); text-transform: uppercase; color: var(--gold); }
.tl-what { font-family: var(--font-body); font-size: clamp(15px, 4.4vw, 18px); color: #f5eedd; line-height: 1.32; text-wrap: balance; }
.tl-need { font-family: var(--font-ui); font-size: clamp(11.5px, 3.3vw, 13px); color: var(--paper-2); letter-spacing: .04em; }
.tl-need b { color: var(--gold-2); font-size: clamp(14px, 4.2vw, 16px); font-variant-numeric: tabular-nums; }
/* le dé et son halo : le halo ne tourne que pendant le lancer */
.tl-die { position: relative; display: grid; place-items: center; margin: clamp(4px, 1.4vh, 10px) 0 clamp(2px, .8vh, 6px); }
.tl-die::before { content: ''; position: absolute; width: 168%; height: 168%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(217,164,65,0) 0deg, rgba(243,207,122,.5) 90deg, rgba(217,164,65,0) 200deg, rgba(243,207,122,.35) 300deg, rgba(217,164,65,0) 360deg); filter: blur(11px); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.tl-die.spinning::before { opacity: .85; animation: spin 1.05s linear infinite; }
.die { position: relative; width: clamp(88px, min(26vmin, 26vh), 138px); aspect-ratio: 1; border-radius: clamp(14px, 4.5vmin, 26px); border: 2px solid rgba(233,220,195,.35); background: linear-gradient(155deg, #33261a, #16110c 70%); display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 700; font-size: clamp(34px, min(10vmin, 10vh), 54px); font-variant-numeric: tabular-nums; color: var(--gold-2); box-shadow: 0 12px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); will-change: transform; }
.die .n { display: block; line-height: 1; }
.die.rolling { animation: dieRoll .58s cubic-bezier(.36,.07,.19,.97) infinite; }
@keyframes dieRoll {
0% { transform: translateY(0) rotate(0deg) scale(1); }
14% { transform: translateY(-13%) rotate(-15deg) scale(1.07); }
32% { transform: translateY(2%) rotate(7deg) scale(.93); }
50% { transform: translateY(-11%) rotate(20deg) scale(1.06); }
68% { transform: translateY(2%) rotate(-9deg) scale(.95); }
85% { transform: translateY(-5%) rotate(11deg) scale(1.02); }
100% { transform: translateY(0) rotate(0deg) scale(1); }
}
.die.land { animation: dieLand .66s var(--ease); }
@keyframes dieLand { 0% { transform: translateY(-16%) rotate(10deg) scale(1.3); } 42% { transform: translateY(0) rotate(-2deg) scale(.9); } 68% { transform: scale(1.06); } 100% { transform: none; } }
/* onde de choc à l'atterrissage — reste dans la boîte pour ne pas être rognée par le défilement */
.die.land::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid currentColor; opacity: .85; animation: dieWave .75s var(--ease) forwards; pointer-events: none; }
@keyframes dieWave { to { transform: scale(1.32); opacity: 0; } }
.die.land.success { border-color: #8ee08a; color: #b8f0b4; box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 26px rgba(142,224,138,.35); }
.die.land.failure { border-color: #ffb070; color: #ffc79a; box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 26px rgba(255,176,112,.3); }
.die.land.catastrophe { border-color: #ff5a4a; color: #ff9a8a; box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 30px rgba(255,90,74,.45); }
/* piste 0→100 : la zone verte est ce qu'il fallait obtenir, l'aiguille est ton jet */
.tl-track { position: relative; width: min(280px, 100%); height: 9px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); margin: clamp(6px, 1.8vh, 12px) 0 4px; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.trial.landed .tl-track { opacity: 1; transform: none; }
.tl-track .zone { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(142,224,138,.6), rgba(142,224,138,.22)); }
.tl-track .pin { position: absolute; top: 50%; left: 50%; width: 3px; height: 21px; border-radius: 2px; background: var(--gold-2); transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(243,207,122,.85); transition: left .6s var(--ease); }
.trial.failure .tl-track .pin, .trial.catastrophe .tl-track .pin { background: #ffb070; box-shadow: 0 0 10px rgba(255,176,112,.85); }
.trial.catastrophe .tl-track .pin { background: #ff7a6a; box-shadow: 0 0 12px rgba(255,90,74,.9); }
.tl-res { margin-top: clamp(8px, 2vh, 14px); font-family: var(--font-title); font-weight: 700; font-size: clamp(20px, 6.8vw, 32px); letter-spacing: .14em; text-transform: uppercase; max-width: 100%; opacity: 0; transform: scale(1.3); transition: opacity .45s ease, transform .45s var(--ease); }
.tl-res.in { opacity: 1; transform: none; }
.tl-res.success { color: #8ee08a; text-shadow: 0 2px 24px rgba(142,224,138,.4); }
.tl-res.failure { color: #ffb070; text-shadow: 0 2px 24px rgba(255,176,112,.35); }
.tl-res.catastrophe { color: #ff7a6a; text-shadow: 0 2px 26px rgba(255,90,74,.5); animation: resPulse 1.4s ease-in-out infinite; }
@keyframes resPulse { 0%, 100% { opacity: 1; text-shadow: 0 2px 26px rgba(255,90,74,.5); } 50% { opacity: .82; text-shadow: 0 2px 34px rgba(255,90,74,.85); } }
@media (max-width: 900px) { .thinking .box { max-height: calc(100dvh - 90px); } }
/* écran couché / très bas : on resserre pour que le verdict reste visible sans défiler */
@media (max-height: 480px) {
.thinking.roll .box { padding: 14px 18px 16px; }
.trial { gap: 4px; }
.tl-what { font-size: clamp(13px, 3.2vw, 15px); line-height: 1.25; }
.tl-die { margin: 4px 0 2px; }
.die { width: clamp(62px, 20vh, 88px); border-radius: 14px; font-size: clamp(25px, 8vh, 34px); }
.tl-track { margin: 5px 0 3px; height: 7px; }
.tl-res { margin-top: 6px; font-size: clamp(17px, 5.4vh, 24px); }
}
@media (prefers-reduced-motion: reduce) {
.thinking.roll .box, .die.rolling, .die.land, .die.land::after, .tl-die.spinning::before, .tl-res.catastrophe { animation: none; }
.die.land::after { display: none; }
.trial, .tl-res, .tl-track, .tl-track .pin { transition-duration: .01ms; }
}
/* ---------- Ce que le joueur CONNAÎT du monde ----------
Un endroit n'apparaît dans un panneau que si on le lui a indiqué ou s'il y est allé (lib/venues.mjs).
Deux affordances : « Demander où… » se distingue des autres options, et le panneau dit son ignorance
sans jamais nommer ce qui est inconnu. */
.g-unknown { font-family: var(--font-ui); font-size: 12px; line-height: 1.35; color: var(--paper-2); background: rgba(255,255,255,.04); border: 1px dashed var(--line); border-radius: 8px; padding: 7px 10px; margin: 8px 0 2px; }
.kn-place { margin-top: 12px; }
.kn-place h4 { display: flex; align-items: baseline; gap: 8px; }
.kn-here { font-family: var(--font-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); border: 1px solid rgba(217,164,65,.5); border-radius: 10px; padding: 1px 7px; }
.kn-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.kn-list li { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.03); font-size: 15.5px; }
.kn-list li i { font-style: normal; font-size: 13px; flex: none; }
.kn-list li span { flex: 1; min-width: 0; }
.kn-list li em { font-family: var(--font-ui); font-style: normal; font-size: 11px; color: var(--paper-2); flex: none; }
.kn-list li.told { border-style: dashed; opacity: .88; }
.kn-list li.been { border-color: rgba(217,164,65,.35); }
/* ---------- Onglet Biens : patrimoine, maisonnée, liens, famille ---------- */
.kv.small { font-size: 12px; gap: 10px; margin-top: 3px; }
.kv .up, .kv span.up b { color: #8ee08a; } .kv .down { color: #ffb070; } .kv .bad b { color: #ff9a8a; }
.sheet .bar.red i { background: linear-gradient(90deg, #a3281e, #ff8a7a); }
/* ── Où passer la nuit ─────────────────────────────────────────────────────────
Le monde ne couche jamais le joueur : il choisit son gîte parmi ce qui existe
vraiment ici. Les indisponibles restent visibles, grisés, avec leur raison. */
.gite { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center;
background: rgba(4, 3, 2, .78); backdrop-filter: blur(7px); opacity: 0; transition: opacity .26s var(--ease); padding: 0; }
.gite.open { opacity: 1; }
@media (min-width: 720px) { .gite { align-items: center; padding: 24px; } }
.gite .g-card { width: min(560px, 100%); max-height: min(86vh, 760px); overflow-y: auto; overscroll-behavior: contain;
background: linear-gradient(180deg, rgba(22, 16, 10, .98), rgba(10, 8, 6, .99)); border: 1px solid var(--line);
border-bottom: none; border-radius: 18px 18px 0 0; padding: 20px 18px calc(18px + var(--sab)); text-align: center;
transform: translateY(28px); transition: transform .3s var(--ease); box-shadow: 0 -18px 60px rgba(0,0,0,.7); }
@media (min-width: 720px) { .gite .g-card { border-bottom: 1px solid var(--line); border-radius: 18px; padding-bottom: 18px; } }
.gite.open .g-card { transform: none; }
.gite .g-kind { font-family: var(--font-ui); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-2); }
.gite .g-title { font-family: var(--font-title); font-size: 21px; color: var(--gold-2); margin: 7px 0 5px; letter-spacing: .03em; }
.gite .g-hint { font-family: var(--font-body); font-size: 14px; color: var(--paper-2); line-height: 1.45; margin-bottom: 15px; }
.gite .g-list { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.gite .g-opt { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 11px 12px; border-radius: 13px; text-align: left;
background: rgba(233, 220, 195, .045); border: 1px solid rgba(233, 220, 195, .17); color: #f1ead9; cursor: pointer;
transition: border-color .18s, background .18s, transform .18s var(--ease);
animation: popIn .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.gite .g-opt:hover:not(.off) { border-color: var(--gold); background: rgba(80, 58, 20, .4); transform: translateY(-1px); }
.gite .g-opt:active:not(.off) { transform: scale(.99); }
.gite .g-opt.off { opacity: .42; cursor: not-allowed; }
/* « Demander où… » : la seule option qui ouvre ce que le joueur ne connaît pas encore (lib/venues.mjs).
À placer APRÈS `.gite .g-opt` — même spécificité, c'est la dernière règle qui gagne. */
.gite .g-opt.g-ask { border-color: rgba(217,164,65,.55); background: linear-gradient(180deg, rgba(60,45,20,.38), rgba(255,255,255,.03)); }
.gite .g-opt.g-ask .g-ic { color: var(--gold-2); }
.gite .g-opt.g-ask:hover:not(.off) { border-color: var(--gold); }
/* Ce qu'on t'a ACCORDÉ pour la nuit : ça vient de la scène que tu viens de jouer, ça se voit. */
.gite .g-opt.g-offer { border-color: rgba(140,190,150,.5); background: linear-gradient(180deg, rgba(30,55,38,.4), rgba(255,255,255,.03)); }
.gite .g-opt.g-offer .g-ic { color: #a8d8b4; }
.gite .g-opt.g-offer:hover:not(.off) { border-color: rgba(168,216,180,.9); }
.gite .g-ic { font-style: normal; font-size: 19px; line-height: 1.15; width: 24px; text-align: center; flex: 0 0 auto; }
.gite .g-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gite .g-txt b { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: #f6efdd; }
.gite .g-det { font-family: var(--font-body); font-size: 13px; color: var(--paper-2); line-height: 1.4; }
.gite .g-why { font-family: var(--font-ui); font-size: 11.5px; color: var(--blood); margin-top: 2px; }
.gite .g-note { font-family: var(--font-ui); font-size: 11px; letter-spacing: .04em; color: rgba(233, 220, 195, .55); margin-top: 3px; }
.gite .g-note.warn { color: #e0a24a; } .gite .g-note.bad { color: #e07a68; }
.gite .g-cost { flex: 0 0 auto; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; color: var(--gold-2); white-space: nowrap; padding-top: 2px; }
.gite .g-close { margin-top: 14px; }
.gite .g-close { width: 100%; }
/* ── Voyage : la carte de l'époque, et le joueur qui la traverse ────────────────
Le jeton rond porte le portrait de la partie ; il glisse le long de la route
pendant que le trait se dessine derrière lui. */
.interlude .il-map { width: min(380px, 78vw); max-height: 32vh; height: auto; aspect-ratio: 1 / 1; margin: 0 auto 4px; display: block; overflow: visible; }
.il-map .mp-dot { fill: rgba(233, 220, 195, .22); }
.il-map .mp text { font-family: var(--font-ui); font-size: 2.6px; fill: rgba(233, 220, 195, .34); text-anchor: middle; letter-spacing: .06em; }
.il-map .mp.end circle { fill: var(--gold); }
.il-map .mp.end text { font-size: 3.4px; fill: var(--gold-2); font-weight: 600;
paint-order: stroke; stroke: rgba(4, 3, 2, .92); stroke-width: 1px; stroke-linejoin: round; }
/* `transform: scale` sur un se fait autour de l'origine du repère SVG, pas du cercle :
sans transform-box, la pastille d'arrivée s'envole loin de sa position à chaque battement. */
.il-map .mp.end.to circle { fill: var(--gold-2); transform-box: fill-box; transform-origin: center;
animation: tokPulse 2.2s ease-in-out infinite; }
.il-map .route { fill: none; stroke: rgba(233, 220, 195, .18); stroke-width: .7; stroke-dasharray: 2.2 2.2; stroke-linecap: round; }
.il-map .route.trace { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 100;
animation: routeDraw var(--dur, 5s) cubic-bezier(.35, 0, .2, 1) forwards; filter: drop-shadow(0 0 2px rgba(217, 164, 65, .5)); }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
.il-map .tok .ring { fill: none; stroke: var(--gold-2); stroke-width: 1; }
.il-map .tok .halo { fill: rgba(217, 164, 65, .16); animation: tokPulse 2s ease-in-out infinite; }
.il-map .tok .dot { fill: var(--gold-2); }
.il-map.night .route.trace { stroke: #8fa6d8; filter: drop-shadow(0 0 3px rgba(143, 166, 216, .55)); }
.il-map.night .tok .ring { stroke: #b9c9ec; } .il-map.night .tok .halo { fill: rgba(143, 166, 216, .18); }
@keyframes tokPulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
.il-map .route.trace { animation: none; stroke-dashoffset: 0; }
.il-map .tok .halo, .il-map .mp.end.to circle { animation: none; }
}
/* Carnet des routes (onglet Carte) */
.sheet-body ul.roads li { border-left: 2px solid rgba(217, 164, 65, .35); padding-left: 10px; }
.sheet-body ul.roads li b { color: var(--gold-2); font-size: 13px; }
.sheet-body ul.roads li > .sub { display: inline; margin-left: 7px; opacity: .6; }
/* Panneau générique des corvées : retour vers la liste, et prix qu'on ne peut pas payer */
.gite .g-back { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0 0 8px;
font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .06em; color: var(--paper-2); cursor: pointer; }
.gite .g-back:hover { color: var(--gold-2); }
.gite .g-cost.short { color: #e0a24a; text-align: right; }
.gite .g-cost.short i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--gold); opacity: .85; margin-top: 2px; }
/* Heure de lever : se réveiller est une décision, comme se coucher */
.gite .g-wake { margin: 2px 0 13px; }
.gite .g-wake .cap { display: block; font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .16em;
text-transform: uppercase; color: rgba(233,220,195,.45); margin-bottom: 6px; }
.gite .g-wrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.gite .g-w { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 3px; border-radius: 11px;
background: rgba(233,220,195,.04); border: 1px solid rgba(233,220,195,.14); color: #e6dcc6; cursor: pointer;
transition: border-color .18s, background .18s, color .18s; }
.gite .g-w i { font-style: normal; font-size: 15px; line-height: 1; }
.gite .g-w b { font-family: var(--font-ui); font-size: 10px; font-weight: 600; text-align: center; line-height: 1.2; }
.gite .g-w span { font-family: var(--font-ui); font-size: 9px; color: rgba(233,220,195,.45); text-align: center; }
.gite .g-w:hover { border-color: rgba(217,164,65,.6); }
.gite .g-w.on { background: rgba(80,58,20,.55); border-color: var(--gold); color: var(--gold-2); }
.gite .g-w.on span { color: var(--gold); }
.gite .g-w.short span { color: #e07a68; }
/* Lecture au fil de l'eau : la narration arrive en flux pendant que l'arbitre finit sa comptabilité.
L'écran d'attente s'efface au profit du texte — le joueur lit à ~3 s au lieu d'attendre la fin du tour. */
.thinking .stream { display: none; }
.thinking.reading .stream { display: block; margin-top: 10px; text-align: left; font-size: 16.5px; line-height: 1.62; color: var(--paper); white-space: pre-wrap; animation: wordIn .5s ease-out both; }
.thinking.reading .stream::after { content: '▍'; color: var(--gold); animation: caret 1.05s steps(1) infinite; margin-left: 1px; }
.thinking.reading .orrery, .thinking.reading .muse, .thinking.reading .steps { display: none; }
/* Ce qu'on a compris RESTE quand la scène arrive : sans lui, l'écran se vidait d'un coup et se
remplissait d'autre chose — on croyait à une seconde pop-up. En lecture il se resserre. */
.thinking.reading .intent { border-top: 0; border-bottom: 1px solid var(--line); padding: 0 0 9px; margin: 0 0 11px; opacity: .85; }
.thinking.reading .intent .sum { font-size: 12.5px; }
.thinking.reading .intent .chips { gap: 4px; }
.thinking.reading .intent .chip { font-size: 10.5px; padding: 1px 7px; }
.thinking.reading .intent .ctx { font-size: 11px; }
/* ce que tu as dit est désormais EN TÊTE (ordre du DOM) : en lecture il se fait discret */
.thinking.reading .said { font-size: 12.5px; opacity: .6; margin: 0 0 10px; padding: 0; border: 0; }
.thinking.reading .bar, .thinking.reading .clock { opacity: .5; }
.thinking.reading .t::after { content: " — la scène s'écrit"; opacity: .7; }
.thinking.done.reading .stream::after { display: none; }
@keyframes caret { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
/* La fiche de l'adversaire (onglet Personnages) — voir lib/rival.mjs */
.rival-card { background: rgba(70,12,10,.55); border: 1px solid rgba(224,85,60,.45); border-radius: 12px; padding: 12px 14px; margin: 10px 0 16px; }
.rival-card .rc-head { font-family: var(--font-title); font-weight: 700; font-size: 15px; color: #ff9d86; }
.rival-card .rc-why { font-size: 13px; color: #f0d6cf; margin-top: 5px; line-height: 1.4; }
.rival-card .rc-done { margin: 9px 0 4px; padding-left: 20px; font-size: 12.5px; color: #e8cdc6; line-height: 1.45; }
.rival-card .rc-done li { margin-bottom: 4px; }
.rival-card .hint { margin-top: 8px; }
/* ---------- Lire un écrit qu'on tient en main (billet, lettre, acte, carnet) ---------- */
/* Le monde tend un papier au joueur : la scène en dit le sens, la page en dit le texte. Lire n'est
pas un tour — l'écran se pose PAR-DESSUS la feuille (z 45) et se referme sans rien faire avancer. */
.doc-ov { position: fixed; inset: 0; z-index: 45; background: rgba(4,3,2,.86); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: calc(52px + var(--sat)) 14px calc(20px + var(--sab)); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .26s ease; }
.doc-ov.on { opacity: 1; }
.doc-page { position: relative; width: min(560px, 100%); margin: auto; transform: translateY(16px) scale(.985); transition: transform .34s var(--ease); }
.doc-ov.on .doc-page { transform: none; }
.doc-close { position: fixed; right: 14px; top: calc(14px + var(--sat)); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(10,8,6,.85); color: var(--paper-2); font-size: 15px; }
.doc-close:hover { border-color: var(--gold); color: var(--gold-2); }
.doc-wait { font-family: var(--font-ui); font-size: 13.5px; color: var(--paper-2); background: rgba(10,8,6,.85); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; text-align: center; }
.doc-wait.err { color: #ffb0a4; border-color: rgba(255,140,120,.45); }
.doc-support { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .05em; color: var(--paper-2); font-style: italic; text-align: center; margin-bottom: 10px; }
/* la page elle-même : papier vieilli, pli central, ombre portée. Le texte s'écrit ligne à ligne. */
.doc-paper { position: relative; overflow: hidden; color: #2a1d0d; padding: 30px 30px 26px; border-radius: 3px; font-family: var(--font-body); box-shadow: 0 26px 60px rgba(0,0,0,.65), inset 0 0 60px rgba(140,105,55,.3);
background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.5), transparent 60%), radial-gradient(90% 70% at 90% 100%, rgba(120,86,40,.24), transparent 62%), linear-gradient(180deg, #efe3c6, #e2d2ad 55%, #d8c69c); }
/* le pli : assez visible pour qu'on voie un papier plié, assez discret pour ne pas barrer les mots */
.doc-paper::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 49.2%, rgba(120,90,45,.1) 49.85%, rgba(255,250,235,.22) 50.15%, transparent 50.8%); }
.doc-title { font-family: var(--font-title); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: #4a3212; border-bottom: 1px solid rgba(80,55,20,.28); padding-bottom: 10px; margin-bottom: 14px; }
.doc-lines p { margin: 0 0 9px; font-size: 18px; line-height: 1.5; opacity: 0; animation: docLine .5s ease forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes docLine { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.doc-sign { margin-top: 16px; text-align: right; font-style: italic; font-size: 17px; color: #40290f; }
.doc-seal { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 11.5px; color: #6a4415; }
.doc-seal i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d0574a, #8e2c22 70%, #5d1a13); color: #f6ddd6; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.doc-hard { margin-top: 12px; font-family: var(--font-ui); font-size: 11.5px; color: var(--paper-2); font-style: italic; }
.doc-hard b { color: var(--gold-2); font-style: normal; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.doc-note { margin-top: 12px; font-size: 16px; font-style: italic; color: #f1ead9; border-left: 2px solid var(--gold); padding-left: 12px; }
.doc-acts { margin-top: 18px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.doc-acts button { background: transparent; border: 1px solid var(--line); color: var(--paper-2); font-family: var(--font-ui); font-size: 12px; padding: 8px 15px; border-radius: 20px; min-height: 36px; }
.doc-acts button:hover { border-color: var(--gold); color: var(--gold-2); }
.obj-acts button.read { border-color: rgba(217,164,65,.55); color: var(--gold-2); }
@media (max-width: 600px) { .doc-paper { padding: 22px 20px 20px; } .doc-lines p { font-size: 16.5px; } .doc-note { font-size: 15px; } }
/* ---------------------------------------------------------------- mode test : toutes les sauvegardes
Une partie n'est normalement visible que depuis l'appareil qui a créé l'avatar. Ce panneau, ouvert par
ANACHRON_OPEN_SAVES=1, liste TOUT le serveur pour pouvoir reprendre n'importe quel état sans compte. */
.beta { font-family: var(--font-ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #0a0806; background: var(--gold); border-radius: 4px; padding: 2px 6px; vertical-align: 3px; }
.save-filter { width: 100%; margin: 10px 0 8px; background: rgba(8,6,4,.6); border: 1px solid var(--line); color: var(--paper); font-family: var(--font-ui); font-size: 13px; padding: 8px 10px; border-radius: 6px; }
.save-filter:focus { outline: none; border-color: var(--gold); }
.all-saves { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.all-saves::-webkit-scrollbar { width: 8px; }
.all-saves::-webkit-scrollbar-thumb { background: rgba(217,164,65,.35); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.save-row { display: flex; align-items: center; gap: 10px; background: rgba(8,6,4,.5); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; transition: border-color .2s, background .2s; }
.save-row:hover { border-color: rgba(217,164,65,.6); background: rgba(30,22,10,.55); }
.save-row .gp { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); flex: none; }
.save-row .gp.noimg { display: flex; align-items: center; justify-content: center; color: var(--paper-2); font-size: 18px; }
.save-row .sr-t { font-family: var(--font-title); font-size: 15px; color: #fff; }
.save-row .sr-c { font-family: var(--font-ui); font-size: 11px; color: var(--gold-2); letter-spacing: .04em; }
.save-row .meta { font-family: var(--font-ui); font-size: 11.5px; color: var(--paper-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save-row .sr-b { color: var(--gold-2); opacity: .85; }
/* ---------------------------------------------------------------- paramètres de l'histoire
Un seul réglage : la difficulté rédactionnelle (0-5, lib/prose.mjs). Le dégradé du curseur va du bleu
froid « arcade » à l'or « roman historique » : on voit où l'on est avant même de lire le libellé. */
.params { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
background: rgba(4,3,2,.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .26s var(--ease); padding: 20px; }
.params.open { opacity: 1; }
.params .p-card { width: min(600px, 94vw); max-height: 92vh; overflow-y: auto; background: linear-gradient(180deg, rgba(26,20,12,.98), rgba(12,9,6,.98));
border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; transform: translateY(12px); transition: transform .3s var(--ease); }
.params.open .p-card { transform: none; }
.params .p-kind { font-family: var(--font-ui); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-2); }
.params .p-title { font-family: var(--font-title); font-size: 24px; color: var(--gold-2); margin: 5px 0 10px; }
.params .p-hint { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.55; color: var(--paper-2); margin-bottom: 16px; }
.params .p-hint b { color: #f1ead9; }
.params .pr-card { border: 1px solid var(--line); border-radius: 11px; padding: 16px 16px 14px; background: rgba(8,6,4,.5); transition: border-color .3s, background .3s; }
.params .pr-card.lvl0, .params .pr-card.lvl1 { border-color: rgba(122,168,205,.5); background: rgba(14,24,32,.5); }
.params .pr-card.lvl2 { border-color: rgba(150,170,170,.45); }
.params .pr-card.lvl4 { border-color: rgba(217,164,65,.55); background: rgba(32,24,10,.5); }
.params .pr-card.lvl5 { border-color: rgba(243,207,122,.85); background: rgba(42,30,10,.6); }
.params .pr-head { display: flex; justify-content: space-between; align-items: baseline; }
.params .pv-label { font-family: var(--font-title); font-size: 21px; color: #fff; }
.params .pv-num { font-family: var(--font-ui); font-size: 12px; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.params .pv-tag { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--paper-2); margin-top: 2px; }
.params input[type=range] { width: 100%; margin: 18px 0 8px; appearance: none; height: 5px; border-radius: 4px; outline: none;
background: linear-gradient(90deg, #4d7f9e 0%, #7d8f8a 40%, #c39a4a 75%, #f3cf7a 100%); }
.params input[type=range]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
background: radial-gradient(circle at 35% 30%, #fff6df, var(--gold)); border: 2px solid #1a140c; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.params input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
background: radial-gradient(circle at 35% 30%, #fff6df, var(--gold)); border: 2px solid #1a140c; }
.params .pr-ticks { display: flex; justify-content: space-between; gap: 2px; }
.params .pr-ticks span { flex: 1; text-align: center; font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .04em;
color: var(--paper-2); opacity: .45; transition: opacity .2s, color .2s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.params .pr-ticks span i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.params .pr-ticks span.on { opacity: 1; color: var(--gold-2); }
.params .pr-ends { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: 10px; color: var(--paper-2); opacity: .6; margin-top: 9px; }
.params .pv-hint { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5; color: #f1ead9; margin-top: 12px;
border-top: 1px solid var(--line); padding-top: 11px; min-height: 34px; }
.params .p-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.params .p-note { font-family: var(--font-ui); font-size: 12px; color: var(--gold-2); text-align: right; margin-top: 8px; min-height: 16px; }
@media (max-width: 620px) { .params .pr-ticks span b { display: none; } .params .p-card { padding: 18px 16px; } }
/* ---------- Chantier immersion (31/08/2026) : battements, enjeu, annotations, reprise ---------- */
/* Le chiffre qui flotte sur le battement qui le raconte (🪙 −3 sur « tu poses trois deniers ») : la
prose arrête de faire la comptabilité, l'animation la fait à sa place — et la trace reste lisible. */
.narration p { position: relative; }
.beat-chip { display: inline-block; margin-left: 10px; font-family: var(--font-ui); font-style: normal; font-size: 13px; font-weight: 700;
padding: 2px 10px; border-radius: 12px; vertical-align: middle; white-space: nowrap; animation: beatChip 1.6s var(--ease) both; }
.beat-chip.up { color: #9ee6a0; background: rgba(28, 74, 30, .55); border: 1px solid rgba(120, 220, 130, .4); }
.beat-chip.down { color: #ffa294; background: rgba(96, 26, 16, .55); border: 1px solid rgba(255, 140, 120, .4); }
@keyframes beatChip { 0% { opacity: 0; transform: translateY(7px) scale(.8); } 18% { opacity: 1; transform: none; } 100% { opacity: .92; transform: none; } }
/* « Ce que ça change » : la flèche de conséquence du tour, une ligne, tamponnée après la scène.
Même famille visuelle que les tampons d'issue — c'est le monde qui parle, pas la narration. */
.stakes { align-self: flex-start; display: flex; gap: 12px; align-items: baseline; max-width: 60ch;
background: linear-gradient(100deg, rgba(58, 42, 14, .82), rgba(24, 18, 8, .82)); border: 1px solid rgba(217, 164, 65, .38); border-left: 3px solid var(--gold);
border-radius: 8px; padding: 10px 16px; font-size: 15.5px; line-height: 1.5; color: #f0e6cf; text-wrap: pretty;
transition: opacity .55s ease, transform .55s var(--ease); }
.stakes b { flex: none; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.stakes.pending { opacity: 0; transform: translateY(10px); }
/* Ce que chaque choix engage : ⏳ temps · ⚄ risqué · 🪙 coût — le prix se lit AVANT de cliquer. */
.choices button .cn { display: inline-block; margin-left: 9px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 400;
color: rgba(233, 220, 195, .55); letter-spacing: .02em; vertical-align: middle; }
.choices button:hover .cn { color: rgba(233, 220, 195, .8); }
@media (max-width: 900px) { .choices button .cn { font-size: 10.5px; margin-left: 7px; } }
/* « Précédemment » (reprise de partie) : la carte hérite du journal ; seule la ligne d'objectif est à elle. */
.recap .rc-goal { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--gold-2);
border: 1px solid rgba(217, 164, 65, .35); border-radius: 8px; padding: 8px 12px; margin: 10px 0 4px; }
@media (prefers-reduced-motion: reduce) {
.beat-chip { animation: none; opacity: .92; }
.stakes { transition: none; }
}
/* L'invite « toucher pour continuer / reprendre » du journal et du « Précédemment » n'avait aucune règle
de visibilité (seuls .narr et .event.card en avaient une) : elle restait à opacité 0. */
.interlude.journal.card .il-hint { opacity: .6; animation: pulse 2.4s infinite; }
/* Épreuve-événement en préparation : l'attente se TEND au lieu de lire la scène — le résultat n'est
jamais vendu avant que le dé roule (2e passe immersion). */
.thinking.trial-wait .stream { display: block; margin-top: 14px; }
.thinking.trial-wait .orrery { display: none; }
.thinking.trial-wait .tw { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 12px 10px; }
.thinking.trial-wait .tw i { font-style: normal; font-size: 34px; color: var(--gold); animation: pulse 1.5s infinite; }
.thinking.trial-wait .tw b { font-family: var(--font-ui); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.thinking.trial-wait .tw-what { font-size: 17.5px; color: #f5eedd; font-style: italic; text-align: center; }
.thinking.trial-wait .tw em { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .08em; color: var(--paper-2); opacity: .85; }
/* L'enjeu du jet, écrit comme un souffle retenu, entre le libellé et le dé. */
.tl-stake { margin: 8px 0 2px; font-size: 15.5px; line-height: 1.45; font-style: italic; color: var(--gold-2); text-align: center; }
/* Quand le dé roule, l'attente d'épreuve s'efface (sinon le libellé apparaissait deux fois). */
.thinking.roll .stream { display: none; }
/* La porte du battement : l'interlude ne se lance plus sur une minuterie — le joueur la franchit.
Elle vit DANS la barre d'action (vide en mode hold), à la place des choix : jamais en flottant
par-dessus le fil (une pilule fixed chevauchait les répliques — retour de partie). */
.beat-gate { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px auto 4px;
background: rgba(10, 8, 5, .93); border: 1px solid var(--gold); border-radius: 30px;
padding: 10px 26px; color: var(--gold-2); cursor: pointer; opacity: 0; transform: translateY(8px);
transition: opacity .5s ease, transform .5s var(--ease); max-width: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, .45), 0 0 24px rgba(217, 164, 65, .15); }
.beat-gate.in { opacity: 1; transform: none; animation: gatePulse 2.6s 1.2s infinite; }
.beat-gate:hover { background: rgba(30, 22, 10, .96); }
.beat-gate i { font-style: normal; font-size: 20px; }
.beat-gate b { font-family: var(--font-title); font-size: 17px; letter-spacing: .04em; font-weight: 600; white-space: nowrap; }
.beat-gate span { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .65; white-space: nowrap; }
@keyframes gatePulse { 0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, .45), 0 0 18px rgba(217, 164, 65, .12); } 50% { box-shadow: 0 4px 20px rgba(0, 0, 0, .45), 0 0 34px rgba(217, 164, 65, .32); } }
@media (max-width: 900px) { .beat-gate { padding: 9px 16px; gap: 8px; margin: 2px auto 2px; } .beat-gate b { font-size: 15px; } .beat-gate span { display: none; } }
@media (prefers-reduced-motion: reduce) { .beat-gate.in { animation: none; } }
/* ---------- HUD replié (défaut) : icônes d'abord, le détail au clic ou au dépliage (retour de partie :
« énormément d'informations à lire directement, l'image est couverte — privilégiez les icônes ») ---------- */
.hud-tl { transition: width .3s var(--ease); }
.hud-toggle { position: absolute; top: -8px; right: -8px; z-index: 4; width: 24px; height: 24px; border-radius: 50%;
border: 1px solid var(--line); background: rgba(10, 8, 6, .88); color: var(--gold-2); font-size: 11px; cursor: pointer; line-height: 1; padding: 0; }
.hud-toggle:hover { color: #fff; border-color: var(--gold); }
.hud-tl.min .status { display: flex; flex-wrap: wrap; gap: 2px 7px; padding: 4px 8px; }
.hud-tl.min .st { display: block; }
.hud-tl.min .st .nm, .hud-tl.min .st .g, .hud-tl.min .st .lb, .hud-tl.min .st .tip { display: none; }
.hud-tl.min .st i { font-size: 14px; opacity: .45; transition: opacity .3s; }
.hud-tl.min .st.l1 i { opacity: .85; }
.hud-tl.min .st.l2 i, .hud-tl.min .st.l3 i { opacity: 1; }
.hud-tl.min .quest { margin-top: 8px; }
.hud-tl.min .quest .goal, .hud-tl.min .quest .detail, .hud-tl.min .quest .qmore, .hud-tl.min .quest .lvl { display: none; }
.hud-tl.min .quest .title { display: block; font-size: 13px; border-bottom-width: 1px; max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.hud-tl.min .rung { margin-top: 6px; }
.hud-tl.min .rung .rt, .hud-tl.min .rung .rn { display: none; }
.hud-tl.min .threat { margin-top: 6px; padding: 3px 9px; display: flex; align-items: center; gap: 6px; }
.hud-tl.min .threat .th, .hud-tl.min .threat .tw, .hud-tl.min .threat .tp { display: none; }
.hud-tl.min .threat .tn::before { content: '⚔ '; }
/* la ligne d'alerte (niveau 2+) reste visible même repliée : c'est de l'urgent, pas du décor */
/* Bannière unique lieu · date · créneau · météo (le médaillon redondant a disparu) */
.date-banner { max-width: min(86vw, 720px); overflow: hidden; text-overflow: ellipsis; }
.date-banner .place { color: var(--gold-2); }
.date-banner .wx { color: var(--paper-2); font-size: 12px; letter-spacing: .12em; }
@media (max-width: 900px) {
/* mobile : la bannière (seule porteuse du lieu et de la date depuis la mort du médaillon) se glisse
entre le HUD et le cadran, en 2-3 lignes courtes ; la météo reste sur la bulle du décor */
.date-banner { font-size: 9.5px; letter-spacing: .08em; padding: 4px 9px; top: calc(8px + var(--sat)); left: auto; right: 92px; transform: none; animation: none; max-width: 134px; white-space: normal; text-align: center; line-height: 1.4; }
.date-banner .wx { display: none; }
.hud-toggle { top: -6px; right: -6px; width: 22px; height: 22px; }
}
/* ---------- LE PAF D'ÉLOQUENCE : ce que tes mots valent, dit tout de suite et en grand ----------
Tombe pendant la délibération (l'interprète répond en ~3 s). Récompense seulement : une phrase
brève n'est jamais punie, et l'anachronisme est un avertissement à part. */
.paf { display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 14px 0 4px; }
.paf-b { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 28px;
font-family: var(--font-ui); opacity: 0; transform: scale(.55); transition: opacity .18s ease, transform .5s cubic-bezier(.2,1.5,.4,1); }
.paf.in .paf-b { opacity: 1; transform: scale(1); }
.paf.in .paf-b:nth-child(2) { transition-delay: .28s; }
.paf.rest .paf-b { transform: scale(.94); opacity: .82; transition: transform .6s var(--ease), opacity .6s ease; }
.paf-b i { font-style: normal; font-size: 21px; line-height: 1; }
.paf-b b { font-size: 12.5px; font-weight: 700; letter-spacing: .18em; white-space: nowrap; }
.paf-b span { font-size: 11.5px; letter-spacing: .02em; opacity: .8; font-style: italic; }
/* quatre paliers : plus c'est haut, plus ça brille */
.paf-1 { background: rgba(30,26,18,.9); border: 1px solid rgba(203,184,148,.45); color: var(--paper-2); }
.paf-2 { background: rgba(46,36,14,.92); border: 1px solid rgba(217,164,65,.55); color: var(--gold-2); }
.paf-3 { background: linear-gradient(100deg, rgba(86,62,14,.95), rgba(40,30,10,.95)); border: 1px solid var(--gold); color: #ffe9b8;
box-shadow: 0 0 26px rgba(217,164,65,.3); }
.paf-4 { background: linear-gradient(100deg, rgba(140,98,18,.96), rgba(60,42,10,.96)); border: 1px solid #ffd98a; color: #fff6dd;
box-shadow: 0 0 40px rgba(255,205,110,.45), inset 0 1px 0 rgba(255,255,255,.25); animation: pafGlow 2.4s ease-in-out infinite; }
.paf-4 b { font-size: 14px; letter-spacing: .22em; }
.paf-warn { background: rgba(70,28,16,.92); border: 1px solid rgba(255,140,110,.5); color: #ffb9a4; }
@keyframes pafGlow { 0%, 100% { box-shadow: 0 0 30px rgba(255,205,110,.32), inset 0 1px 0 rgba(255,255,255,.22); } 50% { box-shadow: 0 0 52px rgba(255,205,110,.6), inset 0 1px 0 rgba(255,255,255,.3); } }
/* l'éclat : dix traits d'or qui partent du badge (éloquent et magistral seulement) */
.paf-burst { position: absolute; inset: 0; pointer-events: none; }
.paf-burst i { position: absolute; left: 50%; top: 50%; width: 2px; height: 11px; margin: -5px 0 0 -1px; border-radius: 2px;
background: linear-gradient(180deg, #ffe9b8, rgba(255,233,184,0)); opacity: 0;
transform: rotate(var(--a)) translateY(-8px); }
.paf.in .paf-burst i { animation: pafRay .85s ease-out .05s both; }
@keyframes pafRay { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-6px) scaleY(.5); } 25% { opacity: .95; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scaleY(1.15); } }
@media (max-width: 900px) { .paf-b { padding: 7px 14px; gap: 8px; } .paf-b b { font-size: 11px; letter-spacing: .14em; } .paf-b span { display: none; } .paf-4 b { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .paf-b { transition: opacity .2s; transform: none; } .paf.in .paf-b, .paf.rest .paf-b { transform: none; } .paf-4 { animation: none; } .paf.in .paf-burst i { animation: none; } }
/* ---------- La marque d'éloquence GRAVÉE sur la bulle du joueur (le PAF ne fait que passer, elle reste) ---------- */
.line.player { position: relative; }
.sp-mark { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; vertical-align: middle;
padding: 2px 9px 2px 7px; border-radius: 12px; cursor: help; position: relative; font-family: var(--font-ui);
animation: pafIn .6s cubic-bezier(.2,1.5,.4,1) both; }
.sp-mark i { font-style: normal; font-size: 12px; line-height: 1; }
.sp-mark b { font-size: 9.5px; font-weight: 700; letter-spacing: .13em; white-space: nowrap; }
@keyframes pafIn { 0% { opacity: 0; transform: scale(.5); } 100% { opacity: 1; transform: none; } }
.sp-mark.warn::after { content: '⚠'; font-size: 10px; margin-left: 2px; }
.sp-mark:hover, .sp-mark:focus, .sp-mark.open { z-index: 30; }
/* La bulle du décor, animée par `riseIn ... both`, garde un transform : elle crée un contexte
d'empilement et, plus bas dans le DOM, passait DEVANT l'infobulle. On élève le bloc de la
réplique du joueur au-dessus d'elle. */
.lines.top { position: relative; z-index: 5; }
/* l'infobulle : ce que le jugement veut dire, et pourquoi */
.sp-tip { display: none; position: absolute; right: 0; top: calc(100% + 7px); z-index: 20; width: max-content; max-width: min(300px, 74vw);
text-align: left; background: rgba(12,10,8,.98); border: 1px solid var(--gold); border-radius: 10px; padding: 9px 12px;
box-shadow: 0 12px 40px rgba(0,0,0,.7); font-family: var(--font-ui); font-size: 12px; line-height: 1.45; color: var(--paper);
white-space: normal; cursor: default; }
.sp-mark:hover .sp-tip, .sp-mark:focus .sp-tip, .sp-mark.open .sp-tip { display: block; animation: riseIn .25s var(--ease); }
.sp-tip b { display: block; font-size: 10.5px; letter-spacing: .14em; color: var(--gold-2); margin-bottom: 5px; }
.sp-tip .w { display: block; font-style: italic; color: #f5eedd; margin-bottom: 4px; }
.sp-tip .h { display: block; color: var(--paper-2); margin-bottom: 5px; }
.sp-tip .f { display: block; color: var(--gold-2); font-size: 11.5px; border-top: 1px solid var(--line); padding-top: 5px; margin-bottom: 5px; }
.sp-tip .src { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); opacity: .55; }
@media (max-width: 900px) { .sp-mark { margin-left: 7px; padding: 2px 7px; } .sp-mark b { font-size: 8.5px; letter-spacing: .1em; } .sp-tip { right: auto; left: 0; font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .sp-mark { animation: none; } }
/* ---------- LA MUSE : banc d'essai de rédaction (bouton ✨ de la barre d'action) ---------- */
.free .muse-btn { flex: none; width: 46px; background: rgba(46,36,14,.9); border: 1px solid rgba(217,164,65,.5); border-radius: 10px;
color: var(--gold-2); font-size: 18px; cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.free .muse-btn:hover { background: rgba(70,52,16,.95); border-color: var(--gold); transform: translateY(-1px); }
@media (max-width: 900px) { .free .muse-btn { width: 42px; font-size: 16px; } }
.mu-ov { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
display: flex; align-items: center; justify-content: center; padding: max(14px, var(--sat)) 12px max(14px, var(--sab));
opacity: 0; transition: opacity .26s ease; overflow-y: auto; }
.mu-ov.open { opacity: 1; }
.mu-card { width: min(680px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; background: rgba(12,10,8,.98); border: 1px solid var(--line);
border-radius: 14px; padding: 20px 22px 18px; box-shadow: 0 30px 90px rgba(0,0,0,.75); transform: translateY(14px); transition: transform .3s var(--ease); }
.mu-ov.open .mu-card { transform: none; }
.mu-head h2 { font-family: var(--font-title); font-size: 22px; color: var(--gold-2); margin: 4px 0 6px; }
.mu-head .hint { margin: 0 0 14px; }
.mu-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.mu-style { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 9px 12px; border-radius: 10px; cursor: pointer;
background: rgba(28,22,14,.75); border: 1px solid var(--line); color: var(--paper); transition: border-color .2s, background .2s, transform .2s var(--ease); }
.mu-style:hover { border-color: var(--gold); background: rgba(50,38,14,.85); transform: translateY(-2px); }
.mu-style.on { border-color: var(--gold); background: rgba(70,52,16,.9); box-shadow: 0 0 18px rgba(217,164,65,.22); }
.mu-style i { font-style: normal; font-size: 17px; }
.mu-style b { font-family: var(--font-ui); font-size: 13px; color: var(--gold-2); letter-spacing: .03em; }
.mu-style span { font-family: var(--font-ui); font-size: 11px; line-height: 1.35; color: var(--paper-2); }
.mu-hint { width: 100%; margin-top: 10px; background: rgba(8,6,4,.9); border: 1px solid var(--line); border-radius: 9px; color: #fff;
font-family: var(--font-ui); font-size: 13px; padding: 9px 12px; }
.mu-hint:focus { outline: none; border-color: var(--gold); }
/* la sortie : le texte arrive mot à mot, avec un curseur qui bat */
.mu-out { margin-top: 12px; min-height: 108px; max-height: 34vh; overflow-y: auto; background: rgba(8,6,4,.85); border: 1px solid var(--line);
border-radius: 10px; padding: 13px 15px; font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; color: #f5eedd; white-space: pre-wrap; }
.mu-out.writing { border-color: rgba(217,164,65,.55); box-shadow: 0 0 22px rgba(217,164,65,.12); }
.mu-idle { color: var(--paper-2); font-family: var(--font-ui); font-size: 13px; font-style: italic; }
.mu-cursor { display: inline-block; width: 8px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: var(--gold);
animation: caret 1.05s steps(1) infinite; }
.mu-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 620px) { .mu-card { padding: 16px 14px 14px; } .mu-styles { grid-template-columns: 1fr 1fr; } .mu-style span { display: none; } .mu-out { font-size: 15.5px; } }
/* ---------- Onglet FACTIONS : la fiche complète (identité, ce qu'elle veut, ses gens, ses seuils) ---------- */
.fa-card { background: rgba(20,16,10,.55); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; margin-bottom: 12px; }
.fa-h { display: flex; align-items: center; gap: 11px; }
.fa-h i { font-style: normal; font-size: 24px; line-height: 1; flex: none; }
.fa-h b { display: block; font-family: var(--font-title); font-size: 17px; color: var(--gold-2); }
.fa-seat { font-family: var(--font-ui); font-size: 11px; color: var(--paper-2); letter-spacing: .05em; }
.fa-seat::before { content: '⌖ '; color: var(--gold); }
.fa-desc { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--paper); }
.fa-wa { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.4; color: var(--paper-2); }
.fa-wa b { color: var(--gold-2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; margin-right: 5px; }
.fa-wa .bad b { color: #ff9d86; }
.fa-gs { margin-top: 11px; display: flex; flex-direction: column; gap: 5px; }
.fa-g { display: grid; grid-template-columns: 84px 1fr 30px; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 11.5px; }
.fa-g .l { color: var(--paper-2); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.fa-g b { text-align: right; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.fa-g.bad b { color: #ff9d86; }
.fa-card h5 { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 13px 0 6px; }
.fa-card h5 span { color: var(--paper-2); margin-left: 5px; }
.fa-ms { display: flex; flex-direction: column; gap: 6px; }
.fa-m { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 9px; border-radius: 9px; cursor: pointer;
background: rgba(10,8,6,.5); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.fa-m:hover { border-color: var(--gold); background: rgba(40,30,12,.6); }
.fa-m.here { border-color: rgba(217,164,65,.45); }
.fa-m img, .fa-m .noimg { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; flex: none; border: 1px solid var(--line); }
.fa-m .noimg { display: flex; align-items: center; justify-content: center; background: rgba(30,24,16,.8); color: var(--paper-2); font-size: 17px; }
.fa-mt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fa-mt b { font-family: var(--font-ui); font-size: 13px; color: #f1ead9; }
.fa-mt b .pt { font-style: normal; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-left: 5px; }
.fa-mt > span { font-family: var(--font-ui); font-size: 11.5px; color: var(--paper-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-mr { color: var(--gold-2) !important; font-size: 10.5px !important; }
.fa-guess { color: rgba(203,184,148,.5) !important; font-size: 10px !important; font-style: italic; }
.fa-none { margin-top: 10px; font-family: var(--font-ui); font-size: 12px; color: var(--paper-2); font-style: italic; }
.fa-ev { margin: 0; padding-left: 17px; font-size: 13px; line-height: 1.4; color: var(--paper); }
.fa-next { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: 11.5px; color: var(--paper-2); }
.fa-next b { color: var(--gold-2); }
@media (max-width: 620px) { .fa-g { grid-template-columns: 68px 1fr 26px; } .fa-m img, .fa-m .noimg { width: 34px; height: 34px; } }
/* ---------- Onglet BIENS : chaque bien porte sa peinture (ouvrable en grand) ---------- */
.holdings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ho-card { background: rgba(20,16,10,.55); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; padding: 0; }
.ho-img { display: block; position: relative; width: 100%; padding: 0; border: 0; background: rgba(8,6,4,.6); cursor: zoom-in; }
.ho-img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--ease); }
.ho-img:hover img { transform: scale(1.03); }
.ho-zoom { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 8px; background: rgba(8,6,4,.8);
border: 1px solid var(--line); color: var(--gold-2); font-size: 14px; display: flex; align-items: center; justify-content: center; }
.ho-img.painting, .ho-img.retry { aspect-ratio: 3 / 1; display: flex; align-items: center; justify-content: center; gap: 9px;
font-family: var(--font-ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-2);
background: radial-gradient(400px 200px at 50% 40%, rgba(42,30,16,.9), rgba(10,8,6,.9)); cursor: default; }
.ho-img.retry { cursor: pointer; color: #ff9d86; }
.ho-b { padding: 11px 14px 12px; }
.ho-b > b { font-family: var(--font-title); font-size: 16px; color: var(--gold-2); }
.fa-bd { color: var(--paper-2) !important; font-size: 11.5px !important; line-height: 1.35; white-space: normal !important; }
/* ---------- LE BILAN DU TOUR, révélé dans le noir (une seule pop-up, tout s'y joue) ---------- */
.aft { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.aft-row { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .55s var(--ease); }
.aft-row.in { opacity: 1; transform: none; }
.aft .stakes { align-self: stretch; max-width: none; }
.aft .loot { align-self: stretch; margin: 0; }
.aft-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.aft-chips span { font-family: var(--font-ui); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; border: 1px solid; }
.aft-chips .up { color: #9ee6a0; border-color: rgba(120,220,130,.45); background: rgba(28,74,30,.4); }
.aft-chips .down { color: #ffa294; border-color: rgba(255,140,120,.45); background: rgba(96,26,16,.4); }
/* en mode lecture, la boîte doit pouvoir grandir sans pousser le bouton hors de vue */
.thinking.reading .box { max-height: calc(100dvh - 40px); overflow-y: auto; }
@media (prefers-reduced-motion: reduce) { .aft-row { transition: opacity .2s; transform: none; } }
/* Le tampon d'issue quand le bilan se révèle sous lui : dans le flux, centré, plus petit — il ne
recouvre plus le badge d'éloquence ni la fin de la scène. */
.thinking .stamp.inline { position: static; display: table; margin: 14px auto 0; font-size: 26px; border-width: 3px;
padding: 6px 18px; backdrop-filter: none; box-shadow: none; background: rgba(10,8,6,.5); }
.thinking .stamp.inline.in { animation: stampInline .5s var(--ease) forwards; }
@keyframes stampInline { 0% { opacity: 0; transform: scale(1.5) rotate(-8deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(-2deg); } }
@media (max-width: 900px) { .thinking .stamp.inline { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .thinking .stamp.inline.in { animation: none; opacity: 1; } }
/* ---------- LA CARTE DU MONDE, plein écran : fond peint + ce que le joueur sait, par-dessus ---------- */
.mp-open { width: 100%; margin-bottom: 10px; }
.worldmap { position: fixed; inset: 0; z-index: 70; background: #080705; display: flex; flex-direction: column;
opacity: 0; transition: opacity .28s ease; }
.worldmap.open { opacity: 1; }
.wm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(10px, var(--sat)) 14px 10px;
background: linear-gradient(180deg, rgba(10,8,6,.96), rgba(10,8,6,.75)); border-bottom: 1px solid var(--line); z-index: 3; }
.wm-t b { display: block; font-family: var(--font-title); font-size: 17px; color: var(--gold-2); letter-spacing: .04em; }
.wm-t span { font-family: var(--font-ui); font-size: 11.5px; color: var(--paper-2); }
.wm-tools { display: flex; gap: 6px; }
.wm-tools button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: rgba(20,16,10,.9);
color: var(--gold-2); font-size: 15px; cursor: pointer; }
.wm-tools button:hover { border-color: var(--gold); color: #fff; }
.wm-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; }
.wm-canvas { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.wm-canvas.grab { cursor: grabbing; }
.wm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wm-bg.blank { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-ui); font-size: 12px;
letter-spacing: .16em; text-transform: uppercase; color: var(--paper-2);
background: radial-gradient(900px 600px at 50% 45%, #2a2013, #0c0906 75%); }
.wm-roads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wm-roads line { stroke: rgba(20,12,6,.5); stroke-width: .35; stroke-dasharray: 1.6 1.2; vector-effect: non-scaling-stroke; }
.wm-roads line.near { stroke: rgba(217,164,65,.9); stroke-width: .6; stroke-dasharray: none; }
.wm-d { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-ui); font-size: calc(9px / var(--z, 1));
color: var(--gold-2); background: rgba(10,8,6,.8); border-radius: 8px; padding: 1px 6px; white-space: nowrap; pointer-events: none;
border: 1px solid rgba(217,164,65,.3); }
/* un lieu : la pastille, son nom, et le jeton du joueur s'il y est */
.wm-p { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px;
background: none; border: 0; padding: 0; cursor: pointer; z-index: 2; }
.wm-dot { width: calc(30px / var(--z, 1)); height: calc(30px / var(--z, 1)); border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-style: normal; font-size: calc(15px / var(--z, 1)); background: rgba(12,10,8,.92); border: 2px solid rgba(217,164,65,.55);
box-shadow: 0 3px 12px rgba(0,0,0,.65); transition: transform .2s var(--ease), border-color .2s; }
.wm-p:hover .wm-dot, .wm-p.sel .wm-dot { transform: scale(1.18); border-color: var(--gold); }
.wm-p.here .wm-dot { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 3px 14px rgba(0,0,0,.7); }
.wm-p.near .wm-dot { border-color: var(--gold); }
.wm-p.banned .wm-dot { border-color: #e0553c; }
.wm-n { font-family: var(--font-title); font-size: calc(12px / var(--z, 1)); font-weight: 700; color: #fff; letter-spacing: .03em;
text-shadow: 0 1px 4px #000, 0 0 10px rgba(0,0,0,.9); white-space: nowrap; }
.wm-halo { position: absolute; top: 0; left: 50%; width: calc(30px / var(--z, 1)); height: calc(30px / var(--z, 1));
transform: translate(-50%, 0) scale(var(--s, 1)); border-radius: 50%; background: radial-gradient(circle, rgba(217,164,65,.45), rgba(217,164,65,0) 70%);
pointer-events: none; animation: pulse 3s ease-in-out infinite; }
.wm-me { position: absolute; top: calc(-16px / var(--z, 1)); width: calc(30px / var(--z, 1)); height: calc(30px / var(--z, 1));
border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.8); }
/* le panneau du bas : ce qu'on sait du lieu touché, et le départ */
.wm-info { background: linear-gradient(0deg, rgba(10,8,6,.98), rgba(10,8,6,.86)); border-top: 1px solid var(--line);
padding: 12px 14px calc(12px + var(--sab)); min-height: 76px; z-index: 3; }
.wm-hint { font-family: var(--font-ui); font-size: 12px; color: var(--paper-2); font-style: italic; }
.wm-card { max-width: 760px; margin: 0 auto; }
.wm-ch { display: flex; align-items: center; gap: 9px; }
.wm-ch i { font-style: normal; font-size: 19px; }
.wm-ch b { font-family: var(--font-title); font-size: 17px; color: var(--gold-2); }
.wm-tag { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
border: 1px solid rgba(217,164,65,.5); border-radius: 10px; padding: 2px 8px; }
.wm-tag.bad { color: #ff9d86; border-color: rgba(255,140,110,.5); }
.wm-cl { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.4; color: var(--paper); margin-top: 5px; }
.wm-cl.bad { color: #ff9d86; } .wm-cl.dim { color: var(--paper-2); font-style: italic; }
.wm-go { margin-top: 9px; }
@media (max-width: 900px) {
.wm-t b { font-size: 15px; } .wm-tools button { width: 32px; height: 32px; }
.wm-info { min-height: 68px; padding: 10px 12px calc(10px + var(--sab)); }
}
/* ---------- Aperçu de la carte peinte dans l'onglet (cliquable → plein écran) ---------- */
.mp-prev { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 1px solid var(--line);
border-radius: 12px; overflow: hidden; background: #0c0906; cursor: pointer; margin-bottom: 12px; }
.mp-prev:hover { border-color: var(--gold); }
.mp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mp-prev:hover .mp-bg { transform: scale(1.04); }
.mp-bg.blank { display: flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-ui); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase; color: var(--paper-2); background: radial-gradient(500px 300px at 50% 45%, #2a2013, #0c0906 75%); }
.mp-roads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mp-roads line { stroke: rgba(20,12,6,.45); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.mp-roads line.near { stroke: rgba(217,164,65,.85); stroke-width: 1.6; stroke-dasharray: none; }
.mp-p { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.mp-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal;
font-size: 11px; background: rgba(12,10,8,.9); border: 1.5px solid rgba(217,164,65,.5); box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.mp-p.here .mp-dot { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 2px 10px rgba(0,0,0,.7); }
.mp-p b { font-family: var(--font-title); font-size: 9.5px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.9); white-space: nowrap; }
.mp-halo { position: absolute; top: 0; left: 50%; width: 22px; height: 22px; transform: translate(-50%, 0) scale(var(--s, 1));
border-radius: 50%; background: radial-gradient(circle, rgba(217,164,65,.4), rgba(217,164,65,0) 70%); animation: pulse 3s ease-in-out infinite; }
.mp-me { position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.8); }
.mp-full { position: absolute; right: 8px; bottom: 8px; font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--gold-2); background: rgba(8,6,4,.85); border: 1px solid rgba(217,164,65,.4);
border-radius: 14px; padding: 4px 11px; }
.mp-prev:hover .mp-full { background: rgba(50,38,14,.92); color: #fff; }
/* La fiche d'un lieu, en bas de la carte plein écran : sa peinture, ce qu'il est, qui peut s'y trouver */
.wm-info.open { max-height: 52vh; overflow-y: auto; }
.wm-card { display: flex; gap: 14px; max-width: 900px; margin: 0 auto; align-items: flex-start; }
.wm-img { flex: none; width: 220px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: rgba(8,6,4,.7); }
.wm-img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; cursor: zoom-in; transition: transform .5s var(--ease); }
.wm-img img:hover { transform: scale(1.05); }
.wm-img.painting { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-ui);
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-2); }
.wm-cb { flex: 1; min-width: 0; }
.wm-ty { font-family: var(--font-ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-2); }
.wm-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.wm-wl { font-family: var(--font-ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); width: 100%; }
.wm-m { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 16px;
background: rgba(20,16,10,.8); border: 1px solid var(--line); }
.wm-m.here { border-color: var(--gold); }
.wm-m img, .wm-m .noimg { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.wm-m .noimg { display: flex; align-items: center; justify-content: center; background: rgba(40,32,20,.9); color: var(--paper-2); font-size: 12px; font-style: normal; }
.wm-m b { font-family: var(--font-ui); font-size: 11.5px; color: #f1ead9; white-space: nowrap; }
@media (max-width: 760px) {
.wm-card { flex-direction: column; gap: 10px; }
.wm-img { width: 100%; }
.wm-info.open { max-height: 62vh; }
}
/* ---------- FINITION DE LA RÉVÉLATION : rythme, espace, et des arrivées qui font plaisir ----------
Chaque élément du bilan est un temps : il monte, il s'installe, il laisse la place au suivant. */
.thinking .box > * { flex: none; }
/* le récit respire : une hairline le sépare de ce qui suit, sans trait dur */
.thinking.reading .stream { padding-bottom: 16px; position: relative; }
.thinking.reading .stream::before { content: ''; position: absolute; left: 22%; right: 22%; bottom: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(217,164,65,.3), transparent); }
.thinking.done.reading .stream { padding-bottom: 18px; }
/* Le badge d'éloquence et le tampon prennent leur place, centrés, avec de l'air autour */
.paf { margin: 16px 0 2px; }
.thinking .stamp.inline { margin-top: 16px; }
/* LE BILAN — un bloc par ligne, séparés, chacun avec son entrée */
.aft { gap: 11px; margin-top: 16px; }
.aft-row { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .45s ease, transform .55s cubic-bezier(.2,1.2,.3,1); }
.aft-row.in { opacity: 1; transform: none; }
/* « Ce que ça change » : un éclat d'or balaye la bande au moment où elle se pose */
.aft .stakes { position: relative; overflow: hidden; padding: 12px 18px; gap: 14px; }
.aft-row.in .stakes::after { content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 30%, rgba(255,225,160,.22) 50%, transparent 70%);
transform: translateX(-110%); animation: sweep 1.1s .15s ease-out forwards; }
@keyframes sweep { to { transform: translateX(110%); } }
/* les jauges tombent l'une après l'autre */
.aft-chips { gap: 7px; }
.aft-chips span { opacity: 0; animation: chipDrop .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i, 0) * 130ms); padding: 4px 12px; }
@keyframes chipDrop { 0% { opacity: 0; transform: translateY(-8px) scale(.8); } 100% { opacity: 1; transform: none; } }
/* le paquetage : les pastilles arrivent en cascade elles aussi */
.aft .loot { padding: 10px 14px; }
.aft-row.in .loot .lt { animation: chipDrop .45s cubic-bezier(.2,1.4,.4,1) both; }
.aft-row.in .loot .lt:nth-child(2) { animation-delay: .08s; }
.aft-row.in .loot .lt:nth-child(3) { animation-delay: .16s; }
.aft-row.in .loot .lt:nth-child(4) { animation-delay: .24s; }
/* le bouton se détache du bilan */
.thinking .go { margin-top: 20px; }
@media (max-width: 900px) {
.aft { gap: 9px; margin-top: 13px; }
.aft .stakes { padding: 10px 14px; gap: 11px; }
.paf { margin: 13px 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
.aft-row { transition: opacity .2s; transform: none; }
.aft-row.in .stakes::after, .aft-chips span, .aft-row.in .loot .lt { animation: none; opacity: 1; }
}
/* ---------- Le tour en cartes (03/09/2026) ----------
Chaque temps du tour est une carte : une seule est nette, les précédentes s'estompent, et le joueur
passe à la suivante (toucher, espace, auto-lecture). Tout est scoppé sous `.game.cards`, posé par le
client quand `ux.immersion` est vrai : en classique, rien de ce bloc ne s'applique. */
.steps { display: flex; align-items: center; gap: 6px; flex: none; height: 22px; padding: 0 4px; max-width: 84ch; font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; color: var(--paper-2); }
.steps .dots { display: flex; align-items: center; gap: 6px; }
.steps i { width: 6px; height: 6px; border-radius: 50%; background: rgba(233,220,195,.28); transition: width .35s var(--ease), height .35s var(--ease), background .35s ease, box-shadow .35s ease; }
.steps i.done { background: var(--gold); opacity: .6; }
.steps i.cur { width: 9px; height: 9px; background: var(--gold-2); box-shadow: 0 0 10px rgba(243,207,122,.8); }
.steps em { font-style: normal; margin-left: 6px; font-variant-numeric: tabular-nums; }
.steps button { font: 500 10.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-2); background: none; border: 1px solid transparent; border-radius: 10px; padding: 2px 8px; min-height: 0; transition: color .2s, border-color .2s; }
.steps button.auto { margin-left: auto; }
.steps button:hover { color: var(--gold-2); border-color: var(--line); }
.steps button[aria-pressed="true"] { color: var(--gold-2); border-color: rgba(217,164,65,.5); }
.steps.done button.all, .steps.hidden { display: none; }
.game.cards .flow { padding-left: 14px; padding-bottom: 20px; }
.game.cards .ncards { display: contents; }
.game.cards .card-step { position: relative; }
.game.cards .card-step.pending { display: none; }
.game.cards .stakes.card-step { opacity: 1; transform: none; animation: popIn .5s var(--ease) both; }
.game.cards .card-step.past { animation: none; opacity: .45; filter: saturate(.6); transition: opacity .5s ease, filter .5s ease; }
.game.cards .flow.done .card-step.past { opacity: .72; filter: none; }
.game.cards .card-step.past:hover { opacity: 1; filter: none; }
/* Pendant la lecture, les choix ne réservent pas leur place : le fil a toute la hauteur. */
.game.cards .flow:not(.done) ~ .actionbar .choices .pending, .game.cards .flow:not(.done) ~ .actionbar .needs { display: none; }
/* la carte de narration : un trait d'or à gauche et le glyphe de son battement */
.game.cards .narration.nc { border-left: 2px solid rgba(217,164,65,.55); border-radius: 4px 12px 12px 4px; padding: 14px 18px 14px 20px; }
.game.cards .nc .beat { position: absolute; left: -12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: #14100c; border: 1px solid rgba(217,164,65,.5); display: grid; place-items: center; font-size: 12px; font-style: normal; color: var(--gold-2); z-index: 1; }
/* la bulle : le visage de celui qui parle, son nom, son rôle */
.game.cards .line { display: grid; gap: 3px 12px; align-items: start; border-radius: 18px 18px 4px 18px; padding: 10px 14px 11px 16px; }
.game.cards .line[data-who="npc"] { grid-template-columns: minmax(0, 1fr) 40px; }
.game.cards .line.player { grid-template-columns: 40px minmax(0, 1fr); border-radius: 18px 18px 18px 4px; }
.game.cards .line .av { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; grid-row: 1 / span 4; background: #1a1206; }
.game.cards .line .av.noimg { display: grid; place-items: center; font-style: normal; color: #6b5a3f; font-size: 20px; }
.game.cards .line[data-who="npc"] .av { grid-column: 2; }
.game.cards .line.player .av { grid-column: 1; }
.game.cards .line[data-who="npc"] > :not(.av) { grid-column: 1; }
.game.cards .line.player > :not(.av) { grid-column: 2; }
.game.cards .line.in .av { animation: ring .9s var(--ease) both; }
@keyframes ring { 0% { transform: scale(.55); box-shadow: 0 0 0 0 rgba(243,207,122,.75); } 60% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(243,207,122,0); } 100% { transform: none; box-shadow: 0 0 0 0 rgba(243,207,122,0); } }
.game.cards .line .who { display: block; font-family: var(--font-title); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--gold-2); margin: 0; }
.game.cards .line .who small { font-family: var(--font-ui); font-size: 11.5px; font-weight: 400; letter-spacing: 0; color: var(--paper-2); margin-left: 8px; }
.game.cards .line .txt { min-width: 0; }
.game.cards .line .txt.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game.cards .line .unclamp { justify-self: start; font: 500 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); background: none; border: 0; padding: 2px 0 0; min-height: 0; }
.game.cards .line .sp-mark { justify-self: start; }
/* la pastille « suite » sur la carte courante */
.game.cards .next { position: absolute; right: 14px; bottom: -13px; z-index: 2; font: 600 10.5px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #1a1206; background: var(--gold-2); padding: 4px 10px; border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.5); animation: nudge 1.5s ease-in-out infinite; pointer-events: none; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* les choix : le geste en tête, la nuance en dessous, le poids à droite */
.game.cards .choices { flex-direction: column; flex-wrap: nowrap; gap: 7px; }
.game.cards .choices button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 14px; align-items: center; text-align: left; padding: 8px 14px; border-radius: 8px; }
.game.cards .choices button .lead { font-size: 17px; font-weight: 500; color: #fff; }
.game.cards .choices button .rest { grid-column: 1; font-size: 14.5px; color: var(--paper-2); line-height: 1.4; }
.game.cards .choices button .cn { grid-column: 2; grid-row: 1 / span 2; margin: 0; white-space: nowrap; }
@media (max-width: 900px) {
.steps { padding: 6px 12px 0; height: auto; }
.game.cards .flow { padding-left: 14px; }
.game.cards .line { max-width: 94%; }
.game.cards .choices { flex-direction: column; overflow: visible; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; scrollbar-width: none; }
.game.cards .choices button { flex: none; max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
.game.cards .choices button .lead { font-size: 16px; }
.game.cards .choices button .rest { font-size: 13.5px; }
.game.cards .choices button .cn { grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
.game.cards .card-step.past { transition: none; }
.game.cards .line.in .av, .game.cards .next { animation: none; }
}
/* ---------- Mode lecture (03/09/2026, 2e passe) : l'interface s'efface pendant qu'on lit ----------
`reading` est posée sur `.game` par la machine à cartes et retirée aux choix ; `peek` (souris près du
haut du cadre, ou toucher sur le tableau) fait revenir le HUD un instant. Toujours sous `.game.cards`. */
.game.cards .hud-tl, .game.cards .hud-tr, .game.cards .actionbar .stats { transition: opacity .6s ease, transform .6s var(--ease); }
.game.cards.reading .hud-tl, .game.cards.reading .hud-tr { animation: none; opacity: 0; transform: translateY(-8px); pointer-events: none; }
.game.cards.reading .actionbar .stats { opacity: 0; transform: translateY(6px); pointer-events: none; }
.game.cards.reading.peek .hud-tl, .game.cards.reading.peek .hud-tr { opacity: 1; transform: none; pointer-events: auto; }
body:has(.game.cards.reading:not(.peek)) .dbg { opacity: 0; pointer-events: none; }
/* le tableau se voile un peu pendant la lecture */
.game.cards.reading .scene .tint { background: rgba(0, 0, 0, .3); }
.game.cards.reading.night .scene .tint { background: linear-gradient(180deg, rgba(20,30,70,.42), rgba(5,8,20,.5)); }
/* un seul menu : les onglets flottants s'en vont, ☰ prend place à côté du cadran */
.game.cards .menu { display: none; }
.menu-open { position: relative; width: 44px; height: 44px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--paper); font-size: 18px; transition: border-color .2s, color .2s; }
.menu-open:hover { color: var(--gold-2); border-color: var(--gold); }
.menu-open.new::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 1.8s ease-in-out infinite; }
.sheet-tabs.grouped { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; position: relative; padding-right: 56px; }
.sheet-tabs.grouped .stg h5 { margin: 0 0 6px; font-family: var(--font-title); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.sheet-tabs.grouped .str { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-tabs.grouped .home-tab { margin-left: 0; }
.sheet-tabs.grouped .close { position: absolute; top: 12px; right: 14px; }
/* champ / contrechamp : celui qui parle s'avance, l'autre recule */
.game.cards .portrait { transition: transform .7s var(--ease), opacity .7s ease, filter .7s ease; transform-origin: bottom center; }
.game.cards .portrait.lit, .game.cards .portrait.dim { animation: none; }
.game.cards .portrait.lit { transform: scale(1.05); }
.game.cards .portrait.dim { transform: scale(.94); opacity: .5; filter: saturate(.6); }
.game.cards .portrait.dim .plate .name { color: var(--paper-2); }
/* les chiffres ne s'affichent que quand ils bougent (survol : tout) */
.game.cards .stats span:not(:hover):not(.moved) .num, .game.cards .stats span:not(:hover):not(.moved) .lbl, .game.cards .stats span:not(:hover):not(.moved) .d { display: none; }
.game.cards .stats span.moved { background: rgba(217,164,65,.14); }
.game.cards .stats { gap: 2px 12px; }
.fly { position: fixed; z-index: 60; font: 700 13px var(--font-ui); padding: 3px 10px; border-radius: 12px; pointer-events: none; box-shadow: 0 3px 12px rgba(0,0,0,.5); transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .4s ease .9s; }
.fly.up { color: #9ee6a0; background: rgba(28,74,30,.9); border: 1px solid rgba(120,220,130,.5); }
.fly.down { color: #ffa294; background: rgba(96,26,16,.9); border: 1px solid rgba(255,140,120,.5); }
/* la lettrine, et le tampon qui se pose comme un cachet */
.game.cards .ncards .nc:first-child p::first-letter { font-family: var(--font-title); font-size: 2.6em; line-height: .85; float: left; margin: 5px 8px 0 0; color: var(--gold-2); }
.game.cards .stakes.card-step.in { animation: seal .55s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes seal { 0% { transform: scale(1.12); opacity: 0; } 60% { transform: scale(.985); opacity: 1; } 100% { transform: none; opacity: 1; } }
@media (max-width: 900px) {
.game.cards .hud-tr .menu-open { display: none; }
.game.cards .scene { transition: height .7s var(--ease), min-height .7s var(--ease); }
.game.cards.reading .scene { height: 26vh; height: 26dvh; min-height: 170px; }
.game.cards.reading .actionbar .stats { display: none; }
.sheet-tabs.grouped { display: grid; grid-template-columns: 1fr 1fr; flex-wrap: wrap; overflow: visible; padding-right: 52px; }
.game.cards .ncards .nc:first-child p::first-letter { font-size: 2.3em; }
}
@media (prefers-reduced-motion: reduce) {
.game.cards .hud-tl, .game.cards .hud-tr, .game.cards .actionbar .stats, .game.cards .portrait, .game.cards .scene, .fly { transition: none; }
.game.cards .stakes.card-step.in { animation: none; }
}
/* Téléphone, retour de partie : une fois les choix affichés, le fil n'avait plus que ~140 px, et le panneau ☰
rangé en quatre familles mangeait la hauteur de son contenu. Le tableau descend à 30 % (24 % en lecture),
la barre des cartes s'efface quand le tour est fini, la rangée du corps se resserre, les choix défilent
dans 30 % au plus, et les familles du panneau tiennent sur UNE ligne qui défile. */
@media (max-width: 900px) {
.game.cards .scene { height: 30vh; height: 30dvh; min-height: 190px; max-height: 300px; }
.game.cards.reading .scene { height: 24vh; height: 24dvh; min-height: 170px; }
.game.cards .steps.done { display: none; }
.game.cards .flow { min-height: 26vh; }
.game.cards .actionbar { padding-top: 6px; gap: 6px; }
.game.cards .needs { padding-bottom: 6px; }
.game.cards .needs .need { font-size: 11.5px; padding: 2px 6px; }
.game.cards .choices { max-height: 30vh; gap: 5px; }
.game.cards .choices button { padding: 7px 12px; }
.game.cards .choices button .lead { font-size: 15.5px; }
.game.cards .choices button .rest { font-size: 13px; line-height: 1.35; }
.game.cards .free input { padding: 9px 12px; }
.sheet-tabs.grouped { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding: 8px 52px 8px 12px; align-items: center; }
.sheet-tabs.grouped .stg { display: flex; align-items: center; gap: 6px; flex: none; }
.sheet-tabs.grouped .stg h5 { margin: 0 4px 0 0; white-space: nowrap; }
.sheet-tabs.grouped .str { flex-wrap: nowrap; }
.sheet-tabs.grouped .close { top: 8px; right: 10px; }
body:has(.game.cards) .sheet { height: 92vh; height: 92dvh; }
}
/* Le badge de coût passait par-dessus le panneau ☰ ouvert (téléphone) : il s'efface tant que le panneau est là. */
body:has(.sheet.open) .dbg, body:has(.sheet.open) .dbg-panel { opacity: 0; pointer-events: none; }
/* ---------- Téléphone : le HUD du bandeau (03/09, retour de partie « prend des screens en responsive ») ----------
Dans un bandeau de 30 % de l'écran, le HUD replié, le bandeau lieu·date sur trois lignes, le cadran, le
badge de coût et deux portraits de 96 × 124 se marchaient dessus : quête et menace coupées par le
portrait, badge sur le visage du PNJ, date par-dessus les icônes du corps. Le bandeau lieu·date devient
une ligne pleine largeur tout en haut, le HUD replié ne garde que santé, corps, alertes et quête (la
menace et le rendez-vous vivent dans ☰, et reviennent au dépliage, par-dessus tout), les portraits
passent à 72 × 92 au ras du bas, le badge de coût se range sous le cadran. */
@media (max-width: 900px) {
.date-banner { left: 0; right: 0; top: var(--sat); transform: none; max-width: none; width: auto; border-radius: 0; border-width: 0 0 1px; padding: 4px 12px; font-size: 10px; letter-spacing: .1em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; background: rgba(10,8,6,.82); }
.hud-tl { top: calc(32px + var(--sat)); width: 178px; }
.hud-tr { top: calc(30px + var(--sat)); }
.dbg { top: calc(88px + var(--sat)); right: 10px; height: 22px; line-height: 20px; font-size: 10.5px; padding: 0 8px; }
.hud-tl.min .threat, .hud-tl.min .next-up, .hud-tl.min .rung { display: none; }
.hud-tl.min .status { gap: 1px 4px; padding: 3px 6px; }
.hud-tl.min .st i { font-size: 12px; }
.hud-tl.min .cond-line { margin-top: 4px; }
.hud-tl.min .quest { margin-top: 5px; }
.hud-tl.min .quest .title { font-size: 12px; padding-bottom: 2px; }
.hud-tl:not(.min) { z-index: 6; background: rgba(10,8,6,.9); border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: -8px; width: 210px; max-height: calc(100% - 44px); overflow-y: auto; scrollbar-width: none; }
.hud-tl:not(.min) .hud-toggle { top: 0; right: 0; }
.portrait { width: 72px; bottom: 6px; }
.portrait .frame { width: 72px; height: 92px; }
.portrait .plate { padding: 12px 5px 4px; }
.portrait .plate .name { font-size: 10.5px; }
.scene .expand { bottom: 6px; width: 30px; height: 30px; font-size: 14px; }
/* le panneau ☰ : tout visible d'un coup, en chips serrées qui s'enroulent, sans défilement latéral */
.sheet-tabs.grouped { display: flex; flex-wrap: wrap; overflow: visible; gap: 4px 5px; padding: 8px 46px 8px 10px; align-items: center; }
.sheet-tabs.grouped .stg, .sheet-tabs.grouped .str { display: contents; }
.sheet-tabs.grouped .stg h5 { flex: none; margin: 0 2px 0 5px; font-size: 9px; letter-spacing: .12em; }
.sheet-tabs.grouped .stg:first-child h5 { margin-left: 0; }
.sheet-tabs.grouped button { font-size: 11.5px; padding: 5px 8px; gap: 4px; }
.sheet-tabs.grouped button .ic { font-size: 12px; }
.sheet-tabs.grouped .close { top: 8px; right: 8px; width: 30px; height: 30px; min-height: 0; }
}
/* Le panneau ☰ sur téléphone, 2e essai : les chips qui s'enroulaient prenaient 210 px. Grille de quatre
colonnes, une famille par ligne (journal · monde · toi + récit · accueil et fermer), tout visible en ~135 px. */
@media (max-width: 900px) {
.sheet-tabs.grouped { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 8px 10px; align-items: stretch; }
.sheet-tabs.grouped .stg h5 { display: none; }
.sheet-tabs.grouped button { justify-content: center; min-width: 0; padding: 5px 4px; min-height: 28px; font-size: 10.5px; letter-spacing: 0; gap: 3px; border-radius: 8px; white-space: nowrap; overflow: hidden; }
.sheet-tabs.grouped button > :last-child { overflow: hidden; text-overflow: ellipsis; }
.sheet-tabs.grouped button .ic { font-size: 12px; flex: none; }
.sheet-tabs.grouped .close { position: static; width: auto; height: auto; min-height: 28px; }
}
/* ---------- Le grand moment (03/09/2026) ----------
Le jour d'un engagement pris (« S'y rendre » sur un rendez-vous, une convocation, une échéance) ou une
épreuve qui pèse : la délibération passe en cinéma. Bandes noires, le tableau en lumière qui s'approche,
un carton daté, le silence avant le dé. Classe `grand` sur `.thinking`, posée par grandOn / showMoment. */
.thinking.grand { background: rgba(0,0,0,.34); backdrop-filter: none; -webkit-backdrop-filter: none; }
.thinking.grand::before, .thinking.grand::after { content: ''; position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 1; transition: height 1.3s var(--ease); pointer-events: none; }
.thinking.grand::before { top: 0; } .thinking.grand::after { bottom: 0; }
.thinking.grand.open::before, .thinking.grand.open::after { height: clamp(34px, 9vh, 92px); }
.thinking.grand .box { background: transparent; border: 0; box-shadow: none; width: min(780px, 100%); text-align: center; }
.thinking.grand .box::before { display: none; }
.thinking.grand .orrery, .thinking.grand .t, .thinking.grand .muse, .thinking.grand .steps, .thinking.grand .bar, .thinking.grand .clock { display: none; }
.thinking.grand .said { opacity: .6; font-size: 14px; }
.scene img.grand-zoom { transition: transform 9s ease-out, opacity .6s ease, filter .6s ease; transform: scale(1.1); }
.moment { margin: 10px 0 18px; opacity: 0; transform: translateY(12px); transition: opacity 1.2s ease, transform 1.2s var(--ease); }
.moment.in { opacity: 1; transform: none; }
.moment .m-kicker { font-family: var(--font-ui); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--paper-2); }
.moment .m-date { font-family: var(--font-title); font-size: 14px; letter-spacing: .3em; color: var(--gold); margin-top: 14px; text-transform: uppercase; }
.moment .m-title { font-family: var(--font-title); font-weight: 700; font-size: clamp(26px, 4.6vw, 46px); letter-spacing: .1em; line-height: 1.15; color: var(--gold-2); margin: 10px 0 8px; text-shadow: 0 2px 34px rgba(217,164,65,.4); text-wrap: balance; }
.moment .m-sub { font-style: italic; font-size: 18px; color: var(--paper); }
.moment .m-rule { width: 80px; height: 1px; margin: 16px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
/* l'attente d'une épreuve qui pèse, en grand */
.thinking.grand .tw i { font-size: 46px; }
.thinking.grand .tw b { font-size: 13px; letter-spacing: .34em; }
.thinking.grand .tw-what { font-family: var(--font-title); font-style: normal; font-size: clamp(20px, 3.4vw, 32px); letter-spacing: .06em; color: var(--gold-2); text-shadow: 0 2px 30px rgba(217,164,65,.35); }
/* le dé, en grand : plus large, et il bat comme un cœur pendant le silence */
.thinking.grand .trial .tl-head { font-size: 13px; letter-spacing: .34em; }
.thinking.grand .trial .tl-what { font-family: var(--font-title); font-size: clamp(18px, 2.8vw, 26px); color: var(--gold-2); letter-spacing: .04em; }
.thinking.grand .die { width: clamp(104px, min(30vmin, 30vh), 168px); }
.thinking.grand .tl-die.await .die { animation: heartbeat 1.7s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.06); } 24% { transform: scale(1); } 36% { transform: scale(1.04); } 50% { transform: scale(1); } }
.thinking.grand .stream { font-size: 17.5px; max-width: 62ch; margin-left: auto; margin-right: auto; text-align: left; }
/* dans le HUD, le jour venu : le rendez-vous pris brille */
.next-up.grand { border-color: var(--gold-2); color: #fff; background: rgba(60,40,10,.78); animation: glow 2.4s ease-in-out infinite; }
.next-up.grand b { color: var(--gold-2); }
.next-up.grand::before { content: 'Le jour venu · '; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
@media (prefers-reduced-motion: reduce) {
.thinking.grand::before, .thinking.grand::after, .moment, .scene img.grand-zoom { transition: none; }
.thinking.grand .tl-die.await .die, .next-up.grand { animation: none; }
}
/* Sous le cadre cinéma, il ne reste que le tableau : le fil, le HUD, les portraits et les boutons de la page
s'effacent (ils se lisaient à travers le carton). Ils reviennent avec la scène suivante. */
body:has(.thinking.grand) .game .dialog, body:has(.thinking.grand) .game .hud-tl, body:has(.thinking.grand) .game .hud-tr, body:has(.thinking.grand) .game .menu,
body:has(.thinking.grand) .game .portrait, body:has(.thinking.grand) .game .steps, body:has(.thinking.grand) .game .date-banner, body:has(.thinking.grand) .game .expand, body:has(.thinking.grand) .dbg { animation: none; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.thinking .said:empty { display: none; }
body:has(.thinking.grand) .game .scene .vignette { opacity: .5; }
@media (max-width: 900px) { body:has(.thinking.grand) .game .scene { height: 100vh; height: 100dvh; max-height: none; transition: height 1.2s var(--ease); } }
/* ---------- Ton visage change · par leurs yeux · le cabinet (03/09/2026) ---------- */
.portrait .seen-med { position: absolute; top: 6px; right: 6px; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--gold-2); object-fit: cover; background: #1a1206; box-shadow: 0 4px 14px rgba(0,0,0,.6); animation: popIn .6s var(--ease) both; }
.portrait .frame img.repaint { animation: repaint 2.2s ease both; }
@keyframes repaint { 0% { opacity: 0; filter: sepia(1) blur(4px); } 60% { opacity: 1; filter: sepia(.4) blur(0); } 100% { opacity: 1; filter: none; } }
.seen-fig { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; margin: 0 0 14px; border: 1px solid rgba(217,164,65,.4); border-radius: 12px; padding: 10px; background: rgba(46,32,9,.35); }
.seen-fig img { width: 120px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 2px solid var(--gold); cursor: zoom-in; }
.seen-fig figcaption { font-size: 15px; line-height: 1.45; color: var(--paper); text-wrap: pretty; }
.seen-fig b { display: block; font-family: var(--font-title); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.faces { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: thin; scrollbar-color: rgba(217,164,65,.42) transparent; }
.faces figure { flex: none; width: 96px; margin: 0; text-align: center; }
.faces img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 2px solid var(--line); cursor: zoom-in; transition: border-color .2s, transform .2s var(--ease); }
.faces img:hover { transform: translateY(-2px); border-color: var(--gold); }
.faces figure.cur img { border-color: var(--gold-2); box-shadow: 0 0 18px rgba(243,207,122,.35); }
.faces figcaption { font-family: var(--font-ui); font-size: 10.5px; line-height: 1.3; color: var(--paper-2); margin-top: 5px; }
.sheet-body ul.cabinet { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sheet-body ul.cabinet li.cab { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 11px; align-items: start; background: linear-gradient(180deg, rgba(60,40,18,.32), rgba(20,14,8,.5)); border-color: rgba(217,164,65,.25); }
.cab-img { width: 72px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid rgba(217,164,65,.45); box-shadow: 0 6px 16px rgba(0,0,0,.5); background: #1a1206; cursor: zoom-in; transition: transform .2s var(--ease); }
.cab-img:hover { transform: scale(1.04); }
.cab-ph { width: 72px; aspect-ratio: 1; display: grid; place-items: center; font-size: 26px; border-radius: 8px; border: 1px dashed rgba(217,164,65,.3); background: rgba(0,0,0,.3); }
.cab-b { min-width: 0; }
@media (max-width: 900px) { .sheet-body ul.cabinet { grid-template-columns: 1fr; } .seen-fig { grid-template-columns: 96px 1fr; } .seen-fig img { width: 96px; } }
/* La carte du paquetage (mode cartes) : un toucher dessus passe à la suite, c'est ce bouton qui ouvre le sac. */
.game.cards .loot { cursor: default; }
.game.cards .loot .lt-open { align-self: flex-start; margin-top: 4px; font: 500 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-2); background: rgba(217,164,65,.12); border: 1px solid rgba(217,164,65,.45); border-radius: 12px; padding: 3px 9px; min-height: 0; cursor: pointer; }
.game.cards .loot .lt-open:hover { background: rgba(217,164,65,.25); }
/* ---------- Parler et entendre (03/09/2026) : le bouton de la barre des cartes ---------- */
.steps button.voice { margin-left: auto; }
.steps button.voice + button.auto { margin-left: 0; }
.steps button.voice[data-lvl="2"] { color: #ffd27a; border-color: rgba(255,210,122,.6); background: rgba(80,50,10,.35); }
/* ---------- Récit › Dureté du monde (03/09/2026) ---------- */
.params .mercy-card { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.params .mercy-row { display: flex; gap: 6px; margin-top: 8px; }
.params .mercy-btn { flex: 1; font: 500 12.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-2); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px; padding: 9px 6px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.params .mercy-btn:hover { color: var(--paper); border-color: rgba(217,164,65,.5); }
.params .mercy-btn.on { color: #1a1206; background: linear-gradient(180deg, #e7b95a, #b9812a); border-color: var(--gold); font-weight: 600; }
.params .mercy-hint { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5; color: #f1ead9; margin-top: 9px; min-height: 18px; }
/* ---------- Entrer avec son adresse (03/09/2026) ---------- */
.home.login { min-height: 100vh; min-height: 100dvh; justify-content: center; }
.lg-card { width: min(460px, 100%); }
.lg-form { display: flex; gap: 8px; margin-top: 14px; }
.lg-form input { flex: 1; min-width: 0; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--paper); border-radius: 8px; padding: 12px 14px; font-size: 17px; }
.lg-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,164,65,.18); }
.lg-card .status { margin-top: 12px; }
.lg-card a { color: var(--gold-2); }
.home .logout { position: absolute; top: 14px; right: 16px; font: 500 11.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-2); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.home .logout:hover { color: var(--gold-2); border-color: var(--gold); }
@media (max-width: 600px) { .lg-form { flex-direction: column; } }
/* L'écran d'entrée héritait des chips `.tag` de l'inventaire et du panneau `.status` du HUD (bordures, capitales) : on les rend à l'accueil. */
.home .tag { font-family: var(--font-body); font-style: italic; font-size: clamp(17px, 2.4vw, 24px); letter-spacing: 0; text-transform: none; color: var(--paper-2); border: 0; background: none; padding: 0; border-radius: 0; display: block; }
.home .status { display: block; margin-top: 12px; background: none; border: 0; border-radius: 0; padding: 0; min-height: 18px; font-family: var(--font-ui); font-size: 13px; color: var(--gold-2); cursor: default; }
/* ---------- Le parcours d'entrée (03/09/2026) : toi → ton époque → ton paquetage → la porte ---------- */
.home.ob { justify-content: flex-start; padding-top: 22px; }
.home.ob .brand.small { font-size: clamp(26px, 4vw, 40px); margin: 6px 0 10px; }
.ob-rail { display: flex; gap: 6px 22px; flex-wrap: wrap; justify-content: center; margin: 0 0 22px; font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-2); }
.ob-rail span { display: inline-flex; align-items: center; gap: 8px; opacity: .55; }
.ob-rail span i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-style: normal; font-size: 11px; }
.ob-rail span.cur { opacity: 1; color: var(--gold-2); } .ob-rail span.cur i { border-color: var(--gold); background: rgba(217,164,65,.18); color: var(--gold-2); }
.ob-rail span.done { opacity: .85; } .ob-rail span.done i { background: var(--gold); border-color: var(--gold); color: #1a1206; }
.ob-stage { width: 100%; display: flex; justify-content: center; }
.ob-card { width: min(680px, 100%); background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px 20px; animation: riseIn .6s var(--ease) both; }
.ob-card.wide { width: min(1080px, 100%); }
.ob-card h2 { font-family: var(--font-title); font-size: 20px; letter-spacing: .1em; color: var(--gold); margin: 0 0 8px; text-transform: uppercase; }
.ob-card .hint { font-size: 15.5px; }
.ob-photo { display: flex; gap: 18px; align-items: center; margin: 18px 0 14px; }
.ob-cam { position: relative; width: 190px; aspect-ratio: 1; flex: none; border-radius: 12px; overflow: hidden; border: 2px solid var(--gold); background: #1a1206; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.ob-cam video, .ob-cam img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-cam video { transform: scaleX(-1); }
.ob-cam-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; color: #6b5a3f; }
.ob-brush { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.ob-cam.painting .ob-brush { opacity: 1; }
.ob-cam.painting img { filter: sepia(.9) contrast(1.1) blur(1.5px); transition: filter 1.5s ease; }
.ob-brush i { position: absolute; left: -40%; width: 40%; height: 18%; background: linear-gradient(90deg, transparent, rgba(243,207,122,.55), transparent); filter: blur(2px); animation: brush 2.6s ease-in-out infinite; }
.ob-brush i:nth-child(1) { top: 18%; } .ob-brush i:nth-child(2) { top: 46%; animation-delay: .8s; } .ob-brush i:nth-child(3) { top: 74%; animation-delay: 1.6s; }
@keyframes brush { 0% { left: -40%; } 100% { left: 110%; } }
.ob-cam.reveal img { animation: repaint 2.4s ease both; filter: none; }
.ob-photo-btns { display: flex; flex-direction: column; gap: 8px; }
.ob-photo-btns .btn { text-align: center; }
.ob-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ob-card .field { margin-top: 10px; }
.ob-card textarea { resize: vertical; min-height: 56px; }
.ob-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.ob-card .status { margin-top: 10px; }
.ob-eras { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; margin: 16px 0 12px; }
.ob-era { position: relative; text-align: left; padding: 0; background: rgba(8,6,4,.7); border: 2px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--paper); cursor: pointer; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; animation: popIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
.ob-era:hover { transform: translateY(-3px); border-color: rgba(217,164,65,.6); }
.ob-era.on { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(243,207,122,.25), 0 18px 40px rgba(0,0,0,.5); transform: translateY(-3px); }
.ob-era.locked { opacity: .5; cursor: default; filter: saturate(.4); }
.ob-era-img { position: relative; aspect-ratio: 16 / 10; background: #14100c; }
.ob-era-img img, .ob-era-blank { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-era-blank { background: radial-gradient(400px 200px at 50% 0%, #3a2a14, #0c0a08); }
.ob-era-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%); }
.ob-era-name { position: absolute; left: 12px; right: 12px; bottom: 10px; font-family: var(--font-title); font-weight: 700; font-size: 15px; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 6px #000; }
.ob-era-body { padding: 9px 12px 11px; }
.ob-era-body .t { font-style: italic; font-size: 14px; color: var(--paper-2); line-height: 1.35; }
.ob-era-body .stars { font-family: var(--font-ui); font-size: 11px; color: var(--gold); letter-spacing: .08em; margin-top: 6px; }
.ob-hook { min-height: 48px; font-size: 16.5px; line-height: 1.5; color: #f5eedd; border-left: 2px solid rgba(217,164,65,.55); padding: 6px 14px; margin: 6px 0 4px; text-wrap: pretty; }
@media (max-width: 700px) {
.home.ob { padding-top: 14px; }
.ob-card { padding: 18px 16px 16px; }
.ob-photo { flex-direction: column; align-items: stretch; }
.ob-cam { width: min(260px, 70vw); margin: 0 auto; }
.ob-photo-btns { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.ob-fields { grid-template-columns: 1fr; }
.ob-eras { grid-template-columns: 1fr 1fr; gap: 9px; }
.ob-era-name { font-size: 13px; } .ob-era-body { padding: 7px 9px 9px; } .ob-era-body .t { font-size: 13px; }
.ob-actions { flex-wrap: wrap; }
}
/* `hidden` doit gagner sur les `display` du parcours (le smiley restait sur le portrait, les champs ne s'effaçaient pas). */
.ob [hidden] { display: none !important; }
.ob-eras { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }