/* Phase 30: a field journal, using our existing optimized scene paintings. */
.lobby-paths { padding: 22px; margin-top: 22px; background: #19211b; border: 1px solid #8e7853; }
.path-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.path-card { padding: 18px; background: #24281f; border: 1px solid #665c43; }
.path-card.selected { border: 2px solid #d8b978; background: #343723; }
.path-card p { line-height: 1.8; color: #cec7b0; }
.path-card button { margin: 5px 8px 5px 0; }
.path-combat-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.path-combat-actions button { max-width: 280px; text-align: left; }
.path-combat-actions small { display: block; font-size: .72rem; line-height: 1.5; margin-top: 6px; }
.story-stage { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #e4cb96; border-left: 3px solid #b99762; padding-left: 12px; font-size: .85rem; }
.story-stage button { font-size: .75rem; padding: 8px 10px; }
.story-target-plan { width: 100%; border: 1px solid #85754c; background: linear-gradient(100deg, #3e3c28, #232920); color: #efddb5; }
.story-target-plan summary { padding: 16px; cursor: pointer; font-weight: 600; line-height: 1.6; }
.story-target-plan summary:focus-visible { outline: 2px solid #eac78a; outline-offset: 2px; }
.story-target-plan[open] summary { border-bottom: 1px solid #85754c; }
.story-target-plan > p { margin: 12px 16px; color: #b6bda6; font-size: .8rem; line-height: 1.6; }
.story-target-options { display: grid; gap: 10px; padding: 0 12px 12px; }
.convoy-story { grid-column: 1 / -1; border-left: 3px solid #b99762; }
.board .cell.story-destination, #board .cell.story-destination { outline: 2px dashed #d8b56b; outline-offset: 2px; }
#board .cell.story-destination .event-label { color: #ffe2a0; }
.event-scene:not(.combat-scene) .convoy-story .story-choice { display: block; margin-top: 10px; }
.event-scene:not(.combat-scene):not([hidden]) { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); background-color: #151711; background-position: center; min-height: 650px; }
.event-scene:not(.combat-scene)::before { background: #10150fdb; }
.event-scene:not(.combat-scene) .event-scene-copy { width: 100%; min-height: 0; padding: 30px; background: linear-gradient(110deg, #24251df5, #171c17f5); border-left: 1px solid #736247; }
.event-scene:not(.combat-scene) .event-scene-copy > h2 { font: 700 clamp(1.7rem, 2.5vw, 2.7rem)/1.3 Georgia, 'STSong', serif; margin: 12px 0 20px; }
.event-scene:not(.combat-scene) .event-scene-story { max-width: none; white-space: pre-line; color: #ded1b7; line-height: 1.95; text-shadow: none; }
.event-vignette { position: relative; margin: 0; align-self: start; min-height: 550px; height: 100%; max-height: 820px; overflow: hidden; background: #171913; }
.event-vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; filter: saturate(.75); }
.event-vignette::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #10170b36 30%, #10170bea 92%); pointer-events: none; }
.event-vignette figcaption { position: absolute; z-index: 1; bottom: 34px; left: 28px; right: 28px; }
.event-vignette blockquote { margin: 18px 0 0; font: 1.2rem/1.85 Georgia, 'STSong', serif; color: #f0dfb9; }
.vignette-stamp { display: inline-block; padding: 6px 10px; border: 1px solid #d2b4799c; color: #e2c58e; letter-spacing: .14em; font: .68rem ui-monospace, monospace; transform: rotate(-3deg); }
.event-vignette small { display: block; color: #aab7a1; font: .7rem ui-monospace, monospace; margin-top: 18px; }
.event-scene:not(.combat-scene) .event-scene-status { background: #12221ad6; margin: 18px 0; }
.event-scene:not(.combat-scene) .scene-panel { background: transparent; border: 0; border-top: 1px solid #76664788; padding: 18px 0 0; }
.event-scene:not(.combat-scene) #event-actions { display: grid; gap: 10px; }
.event-scene:not(.combat-scene) .story-choice { display: grid; grid-template-columns: 32px minmax(0,1fr) 16px; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 14px; background: linear-gradient(100deg, #3e3c28, #232920); border: 1px solid #85754c; color: #efddb5; transition: border-color .15s, background .15s, transform .15s; }
.story-choice:hover:not(:disabled), .story-choice:focus-visible { border-color: #eac78a; background: #444936; transform: translateX(3px); outline: 2px solid #d4be8866; outline-offset: 2px; }
.story-choice:disabled { opacity: .46; }
.spectator-choices .story-choice:disabled { opacity: .9; cursor: default; }
.spectator-choices .choice-arrow { visibility: hidden; }
.story-choice .choice-emblem { color: #cab47d; font: 1.8rem Georgia, serif; text-align: center; }
.story-choice strong { display: block; font-size: .92rem; line-height: 1.5; }
.story-choice small { display: block; color: #b6bda6; font-size: .77rem; font-weight: 400; margin-top: 5px; line-height: 1.6; }
.choice-arrow { color: #c4a26f; }
.event-scene.result-scene:not(.combat-scene) { grid-template-columns: minmax(230px,.6fr) minmax(0,1.4fr); }
.result-outcome { margin: 0 0 20px; padding: 16px 18px; background: #141b15; border-left: 3px solid #d5ad65; color: #e6d5b5; }
.result-outcome small { display: block; color: #ab976d; letter-spacing: .12em; margin-bottom: 6px; }
.result-gains { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.result-gains article { padding: 14px; background: #141e17; border: 1px solid #576548; }
.result-change-list { display: flex; flex-wrap: wrap; gap: 8px; }
.result-change { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 10px; background: #22291e; color: #c8cfb7; }
.result-change > span { color: #b8ab80; }
.result-change small { font-size: .75rem; line-height: 1.5; }
.result-change b { font: 700 1.3rem ui-monospace, monospace; }
.result-change.gain b { color: #b8d59b; }
.result-change.loss b { color: #eea48a; }
.result-loot-heading { margin: 24px 0 12px; display: flex; align-items: center; gap: 12px; }
.result-loot-heading::after { content: ''; height: 1px; background: #716447; flex: 1; }
.result-loot-grid { grid-template-columns: repeat(auto-fit,minmax(225px,1fr)); }
.loot-stamp { display: inline-block; border: 1px solid #6e8565; padding: 2px 6px; margin: 5px 0; font-size: .7rem; color: #b9d1a8; }
.loot-stamp.pending { border-color: #c49d50; color: #eac681; }
.route-guide { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 12px 0; padding: 12px 16px; border: 1px solid #7b7851; color: #c5c4a3; background: #16221bea; font-size: .8rem; }
.route-guide strong { color: #e4cb96; }
.map-frame.split-road-frame { width: min(100%, 1000px); }
.board.node-road { position: relative; gap: 14px; }
.route-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.route-lines path { stroke: #59371d; stroke-width: 5; fill: none; stroke-dasharray: 8 5; }
.node-route-controls button { width: auto; min-width: 130px; padding: 10px 14px; font-size: .9rem; white-space: nowrap; }
.node-road .cell { z-index: 1; }
.board.node-road .blocked-tile { visibility: hidden; }
.route-step-button { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 2px solid #ead68c; padding: 0; z-index: 3; cursor: pointer; }
.route-step-button:hover, .route-step-button:focus-visible { background: #d6b96a22; outline: 2px solid #f3e7ad; }
.route-reachable { box-shadow: 0 0 18px #e0c16766; }
.remote-support-feed { margin: 8px 18px; padding: 8px 16px; border-left: 3px solid #d7b66b; color: #e2d0a7; background: #17261fec; font-size: .85rem; }
.remote-support-feed p { margin: 6px 0; line-height: 1.7; }
.remote-support-feed span { color: #f3d581; margin-right: 8px; }
.remote-support-feed strong { color: #b7cfb0; }
.board.branching-road { gap: 10px; }
.board.branching-road .cell[data-cell-y='3']:not(.blocked-tile) { border: 2px solid #d7b96c; box-shadow: 0 0 14px #d5a85633; }
.board.branching-road .cell[data-cell-y='1']:not(.blocked-tile) { border: 1px solid #779483; box-shadow: none; }
.board.branching-road .cell[data-cell-y='4']:not(.blocked-tile), .board.branching-road .cell[data-cell-y='5']:not(.blocked-tile), .board.branching-road .cell[data-cell-y='6']:not(.blocked-tile) { border-top: 2px solid #bb935d; }
.board.split-road .cell:not(.blocked-tile) { border-top: 2px solid #779483; }
.board.split-road .cell[data-cell-y='2']:not(.blocked-tile) { border-top-color: #bb935d; }
.board.split-road .cell[data-cell-y='1']:not(.blocked-tile) { border: 2px solid #d7b96c; box-shadow: 0 0 14px #d5a85633; }
.board.split-road .blocked-tile { opacity: 1; border: 0; background: repeating-linear-gradient(135deg, transparent, transparent 8px, #6d725018 8px, #6d725018 9px); }
.board.split-road .blocked-tile .event-label { visibility: hidden; }
@media (max-width: 1100px) {
  .event-scene:not(.combat-scene) .event-scene-copy { padding: 22px; }
  .event-scene:not(.combat-scene):not([hidden]), .event-scene.result-scene:not(.combat-scene) { grid-template-columns: minmax(200px,.65fr) minmax(0,1.35fr); }
}
@media (max-width: 760px) {
  .event-scene:not(.combat-scene):not([hidden]), .event-scene.result-scene:not(.combat-scene) { grid-template-columns: 1fr; }
  .event-vignette { min-height: 240px; height: 240px; }
}
@media (prefers-reduced-motion: reduce) { .story-choice { transition: none !important; transform: none !important; } }

.profession-choice-actions { display: flex; flex-wrap: wrap; gap: 14px; padding: 18px 0 8px; }
.profession-choice-actions button { flex: 1; min-width: 180px; border-color: #c7ad68; }
[data-open-profession] { border-color: #c7ad68; text-align: left; }