/* La Croisée: illustrated encounters (encounter_scene.js, run.js renderSceneEvent). */
.enc-stage { position: relative; margin: -12px -12px 10px; line-height: 0; border-bottom: 3px solid var(--edge); border-radius: 8px 8px 0 0; overflow: hidden; }
.enc-stage .enc-art.live { width: 100%; margin: 0; aspect-ratio: 4 / 3; border: 0; border-radius: 0; display: block; image-rendering: pixelated; }
.enc-stage + h2 { margin-top: 0; }
.enc-stage .say { line-height: 1.3; max-width: 64%; width: max-content; font-size: .8rem; }
.enc-stage .say:not(.you) { width: 62%; }
.enc-stage .say .say-text { margin: 0; }
.enc-stage .say.you { background: rgba(255, 236, 196, .97); color: #3a2410; }
.hud.slim { padding: 6px 8px; }
.hud.slim .hud-row { margin: 0; }
.narrative-entry details { margin-top: .7rem; }
.narrative-entry summary { cursor: pointer; color: #d6be87; }
.narrative-memory { border-top: 1px solid #4d4f50; margin-top: .6rem; padding-top: .4rem; }
.narrative-memory p { margin: .4rem 0; }
.narrative-entry h4 { margin: .7rem 0 .4rem; }
.subtabs { flex-wrap: wrap; }

/* Dialogue belongs below the illustration. Selecting a question opens its reply immediately. */
.enc-dialogue { margin: 12px 0; }
.enc-reply { padding: 12px; border-left: 3px solid var(--gold, #d6be87); border-radius: 0 8px 8px 0; background: var(--panel-2, #2c2f31); }
.enc-reply-speaker { display: block; color: var(--gold, #d6be87); margin-bottom: 6px; }
.enc-reply-text { margin: 0; white-space: pre-line; }
.enc-question-prompt { margin: 12px 0 4px; color: var(--gold, #d6be87); font-size: .8rem; }
.choices .dialogue-return { border-style: dashed; opacity: .85; }
.choices[aria-busy="true"] { opacity: .65; }

/* The encounter on a stage (run.js renderSceneEvent): words in bubbles over the set, the place below, then one card per
   reply with the face of who answers, its cost and its odds; a luck gauge for gambles; the outcome on a parchment. */
.event.staged { margin-top: 6px; }
.event.staged .enc-stage { margin: 0; border: 3px solid var(--edge); border-radius: 6px; box-shadow: 0 4px 0 #0008; }
.enc-say { position: absolute; width: 74%; padding: 6px 9px 7px; background: #f4ecd8; color: #2a1a0e; border: 2px solid #1c1418; border-radius: 6px;
  font: 400 .84rem/1.28 var(--text); box-shadow: 0 3px 0 rgba(0, 0, 0, .45); transform: translate(-50%, -100%); animation: enc-pop .22s ease-out; }
.enc-say .nm { display: block; font: 400 .72rem var(--pixel); color: #8a3c14; margin-bottom: 2px; }
.enc-say.mine { background: #fbe7b8; width: 64%; }
.enc-say.mine .nm { color: #2e5a8a; }
.enc-say:after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -9px; width: 12px; height: 9px; background: #1c1418; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.enc-say:before { content: ""; position: absolute; left: calc(var(--tail, 50%) + 2px); bottom: -5px; width: 8px; height: 6px; background: inherit; z-index: 1; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.enc-narr { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 88%; padding: 6px 10px; background: #1b1520e6; color: #f2e6c8; border: 2px solid #c3a778;
  border-radius: 3px; font: italic .84rem/1.3 var(--text); line-height: 1.3; animation: enc-pop .22s ease-out; }
.enc-stamp { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%) rotate(-6deg); font: 400 1.6rem var(--pixel); line-height: 1; padding: 6px 14px;
  border: 3px solid currentColor; border-radius: 4px; background: #1b1520d9; text-shadow: 0 3px 0 #000; animation: enc-stamp .3s ease-out; }
.enc-stamp.win { color: #8ee69c; }
.enc-stamp.lose { color: #ff8a7a; }
.enc-luck { position: absolute; left: 7%; right: 7%; top: 18%; line-height: 1; }
.enc-luck .bar { position: relative; height: 18px; border: 2px solid #1b1520; background: #7a2a32; box-shadow: 0 3px 0 #0009, inset 0 0 0 2px #00000040; }
.enc-luck .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #67c477 0 6px, #5ab36a 6px 8px); }
.enc-luck .needle { position: absolute; top: -9px; left: 50%; width: 4px; height: 32px; background: #f6c453; border: 2px solid #1b1520; transform: translateX(-50%); box-shadow: 0 2px 0 #0008; }
.enc-luck .labels { display: flex; justify-content: space-between; font: 400 .72rem var(--pixel); color: #f4ecd8; text-shadow: 0 2px 0 #000; margin-bottom: 4px; }
@keyframes enc-pop { from { opacity: 0; margin-top: 4px; } to { opacity: 1; margin-top: 0; } }
@keyframes enc-stamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(1.6); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1); } }

.enc-plaque { margin: 10px 2px 2px; }
.enc-plaque h2 { margin: 0 0 2px; font-size: 1.15rem; color: var(--gold); }
.enc-plaque p { margin: 0; font: italic .9rem/1.4 var(--text); color: #c9bfae; }
.enc-carnet { display: inline-block; margin-top: 6px; font: 400 .72rem var(--pixel); color: #d6be87; border: 1px dashed #8a7550; padding: 2px 7px; border-radius: 3px; }
.enc-said { margin: 10px 0 0; padding: 10px 12px; background: #f4ecd8; color: #2a1a0e; border: 2px solid #1c1418; border-radius: 6px; box-shadow: 0 3px 0 #0008; }
.enc-said b { display: block; font: 400 .72rem var(--pixel); color: #8a3c14; margin-bottom: 2px; }
.enc-said p { margin: 0; font: .9rem/1.35 var(--text); white-space: pre-line; }

.event .enc-choices { display: grid; gap: 7px; margin-top: 8px; }
.enc-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; text-align: left; padding: 6px 9px 6px 6px;
  background: var(--panel); color: var(--ink); border: 2px solid var(--edge); border-left: 6px solid var(--tone, #7fb3ff); border-radius: 4px; box-shadow: 0 3px 0 #0008; font: inherit; cursor: pointer; }
.enc-card:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #0008; }
.enc-card .who { width: 38px; height: 38px; background: #1b1520; border: 2px solid #0c0d0e; border-radius: 3px; overflow: hidden; display: grid; place-items: start center; line-height: 0; }
.enc-card .who canvas { image-rendering: pixelated; margin-top: 2px; }
.enc-card .who.sign { place-items: center; color: var(--tone, #7fb3ff); font: 400 1.2rem var(--pixel); line-height: 1; }
.enc-card .body { min-width: 0; }
.enc-card .tone { display: block; font: 400 .7rem var(--pixel); color: var(--tone, #7fb3ff); }
.enc-card .tone em { font-style: normal; color: var(--muted); }
.enc-card .label { display: block; font: 600 .95rem/1.2 var(--text); }
.enc-card .stake { display: grid; gap: 3px; justify-items: end; font: 400 .72rem var(--pixel); color: var(--muted); }
.enc-card .enc-cost { display: inline-flex; gap: 3px; align-items: center; color: #f2d998; white-space: nowrap; }
.enc-card .odds { width: 46px; height: 8px; background: #7a2a32; border: 1px solid #0c0d0e; position: relative; }
.enc-card .odds i { position: absolute; inset: 0 auto 0 0; background: #67c477; }
.enc-card .word { font-size: .62rem; color: #8d8f8e; }
.enc-card.t-parler { --tone: #7fb3ff; }
.enc-card.t-agir { --tone: #ff8a6a; }
.enc-card.t-ruser { --tone: #c79bff; }
.enc-card.t-offrir { --tone: #f2c14e; }
.enc-card.t-partir, .enc-card.t-retour { --tone: #a6a9a8; }
.enc-card.dialogue-return { border-style: dashed; border-left-style: solid; }
.enc-card.locked { opacity: .55; --tone: #6b6d6c; box-shadow: none; background: #232527; cursor: default; }
.enc-card.locked .label { font-weight: 400; color: #a6a9a8; }
.enc-card:disabled:not(.locked) { opacity: .7; }

.event.staged .outcome { border-top: 0; padding-top: 0; }
.enc-result { margin-top: 10px; padding: 10px 12px; background: #f4ecd8; color: #2a1a0e; border: 2px solid #1c1418; border-radius: 4px; box-shadow: 0 3px 0 #0008; }
.enc-result p { margin: 0 0 8px; font: italic .95rem/1.4 var(--text); }
.enc-gains { display: flex; flex-wrap: wrap; gap: 6px; }
.enc-gain { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; background: #2a2d30; color: #efe9de; border: 2px solid #0c0d0e; border-radius: 3px; font: 400 .78rem/1.25 var(--pixel); }
.enc-gain.good { color: #9be6a6; }
.enc-gain.bad { color: #ff9a8a; }
.enc-go { margin-top: 12px; width: 100%; }
.flyer-relic { color: #f6c453; font: 400 1.2rem var(--pixel); text-shadow: 0 2px 0 #000; }
@media (prefers-reduced-motion: reduce) { .enc-say, .enc-narr, .enc-stamp { animation: none; } }
.enc-stage:has(.enc-luck) .enc-say { opacity: 0; transition: opacity .15s; }
.enc-card .label .enc-cls { font-style: normal; color: var(--gold); opacity: .9; white-space: nowrap; }