/* Presentation only: chronicle, NPC cards and direct desktop navigation. */
.tavern-bg { background: #282c2b url('/static/img/ashen-valley.webp') center / cover no-repeat; }
.tavern-bg::after { background: linear-gradient(180deg,#10100f15,#08090930),radial-gradient(ellipse at center,transparent 45%,#08090955); }
.chronicle { background-color: rgba(10,10,9,.82); }
.chron-title,.composer { background: rgba(12,11,9,.72); }
.npc { background-color: rgba(12,11,10,.76); }
.monster-art { display:block; width:100%; height:100%; border-radius:50%; background-image:url('/static/img/monster-atlas.webp'); background-size:500% 600%; background-repeat:no-repeat; }
.foe-por { padding:4px; overflow:hidden; background:#161411; }
.battle-card { position:relative; isolation:isolate; padding:27px 28px 18px 62px; border:1px solid #b88d50; border-radius:2px; background:linear-gradient(100deg,#100e0bf5 25%,#100e0bdf 65%,#100e0bc9),url('/static/img/ashen-valley.webp') right center / cover; box-shadow:inset 0 0 0 4px #100d09,inset 0 0 0 5px #9e79333d,0 5px 20px #0004; }
.battle-card::before { content:''; position:absolute; inset:6px auto 6px 6px; width:30px; background:linear-gradient(90deg,#622c1f70,#37170b44); border-right:1px solid #925b35; z-index:-1; }
.battle-card::after { content:'◇'; position:absolute; top:-12px; right:14px; color:#caa35d; font-size:20px; }
.battle-label { color:#ce8066; font:14px/1.5 var(--book); letter-spacing:.22em; margin-bottom:9px; }
.battle-strike { display:flex; align-items:center; gap:15px; flex-wrap:wrap; font:23px/1.35 var(--title); color:#eadcc0; }
.battle-strike svg { width:36px; height:36px; fill:none; stroke:#dec08d; stroke-width:1.5; }
.battle-strike strong { color:#d68b75; font-weight:600; font-size:27px; }
.battle-arrow { color:#c9a063; padding:0 8px; }
.battle-prose { margin-top:16px; font:18px/1.8 var(--serif); color:#e8deca; overflow-wrap:anywhere; }
.battle-prose p { margin:0 0 12px; }
.battle-verdict { display:flex; align-items:center; justify-content:center; gap:20px; margin:20px 0 0; padding:18px 0; border-block:1px solid #a880444d; background:linear-gradient(90deg,transparent,#b18b3210,transparent); }
.battle-verdict h3 { margin:0; color:#e2bf7c; font:600 32px/1.1 var(--title); letter-spacing:.16em; }
.battle-verdict p { margin:5px 0 0; color:#e2d6bc; font:20px var(--title); }
.crossed { position:relative; display:block; width:64px; height:64px; }
.crossed svg { position:absolute; inset:0; width:64px; height:64px; fill:none; stroke:#cfaa66; stroke-width:1.3; }
.crossed svg+svg { transform:scaleX(-1); }
.battle-rewards { display:flex; flex-wrap:wrap; justify-content:space-evenly; gap:12px 20px; padding:16px 0 8px; color:#dfbb75; font:16px/1.5 var(--book); }
.battle-condition { color:#b8c79f; }
.battle-complete { display:flex; align-items:center; gap:18px; border:1px solid #949d667d; border-radius:3px; margin:12px 0 0 -29px; padding:14px 20px; background:linear-gradient(90deg,#282f1ccc,#19201599); color:#d8dbb8; font:20px/1.5 var(--title); }
.battle-complete>span { color:#becf91; font:30px var(--title); }
@media(max-width:700px) { .battle-card { padding:20px 16px 16px 35px; }.battle-card::before { width:15px; }.battle-strike { gap:8px; font-size:20px; }.battle-strike strong { font-size:23px; }.battle-prose { font-size:16px; }.battle-complete { margin-left:-10px; }.battle-rewards { justify-content:flex-start; } }
.topbar { padding: 9px 24px; gap: 16px; z-index: 12; flex-wrap: wrap; }
.tb-menu { display: none; }
.brand { font-size: 19px; letter-spacing: .13em; }
.desktop-nav { flex: 0 0 auto; align-self: stretch; align-items: center; }
.desktop-nav button { padding: 12px 10px; font-size: 14px; border-bottom: 2px solid transparent; }
.desktop-nav button:hover { color: #f4dfb0; background: #c9a35a0a; }
.desktop-nav button:focus-visible { outline: 1px solid var(--gold); outline-offset: -3px; }
#screen-game:not(:has(.drawer:not(.hidden))) .desktop-nav button.active { border-bottom-color: transparent; }
.drawer { top: var(--topbar-height, 66px); height: calc(var(--app-h, 100dvh) - var(--topbar-height, 66px)); }
.drawer-caption { flex: 1; padding: 10px 18px; font: 23px var(--title); color: var(--bronze-hi); }
.drawer-body { scrollbar-width: thin; scrollbar-color: var(--bronze) #15110c; }
.chronicle { width: min(78%, 1160px); }
#feed { padding: 24px 38px 18px; }
.turn { border: 0; margin: 0 0 30px; padding: 0; }
.scene { gap: 24px; }
.hc { flex-direction: row-reverse; align-items: flex-start; align-self: flex-end; max-width: 88%; gap: 16px; padding: 0; border: 0; background: none; }
.hc > div:last-child { min-width: 0; }
.hc-av { width: 48px; height: 48px; font-size: 25px; margin-top: 24px; }
.hc .hc-name { font: 18px var(--title); color: #bea276; text-align: right; margin: 0 10px 5px; }
.hc .hc-name span { display: none; }
.hc-text { padding: 12px 20px; background: linear-gradient(135deg,#24221fbb,#171613bb); border: 1px solid #8d806638; border-radius: 12px 12px 3px 12px; font: 18px/1.65 var(--serif); }
.hc-res { max-width: 660px; margin: 9px 4px 0; font: 13px/1.6 var(--book); color: #b6a88e; }
.hc-res b { color: #b89660; }
.wb { position: relative; gap: 18px; padding: 23px 26px 24px 20px; border: 0; border-left: 2px solid #b58a49; background: linear-gradient(100deg,#77603a13,transparent 92%); }
.wb > div { min-width: 0; }
.quill { width: 27px; height: 36px; flex: none; color: #bd9361; margin-top: 2px; }
.wb p { font: 18px/1.85 var(--serif); color: #e7decc; margin: 0 0 1em; overflow-wrap: anywhere; }
.npc { position: relative; grid-template-columns: 126px minmax(0,1fr); gap: 25px; padding: 25px; margin: 4px 0 0; border: 1px solid #a47d40; border-radius: 2px; background: linear-gradient(125deg,#30251922,#0b090855); box-shadow: inset 0 0 0 4px #0e0b08,inset 0 0 0 5px #8a6a3e38; }
.npc:last-child { border-bottom: 1px solid #a47d40; }
.npc::before,.npc::after { content: '◇'; position: absolute; color: #c39b56; font-size: 15px; line-height: 15px; background: #15110d; }
.npc::before { top: -7px; left: 12px; }
.npc::after { bottom: -7px; right: 12px; }
.npc-por { width: 126px; height: 126px; margin-top: 7px; }
.npc-name { font: 600 30px/1.15 var(--title); margin: 0; }
.npc-name span { display: block; margin-top: 5px; font: 19px/1.3 var(--title); color: #bda274; }
.npc-name span::before { display: none; }
.npc-speech { margin: 17px 0 21px; color: #f0e7d6; font: 22px/1.55 var(--serif); overflow-wrap: anywhere; }
.npc .rows { margin: 14px 0 0; padding: 0; gap: 8px 14px; font: 15px/1.65 var(--book); }
.npc .rows dt { font: 16px/1.65 var(--title); white-space: nowrap; }
.npc .rows dt::before { display: inline-block; width: 24px; font: 16px var(--serif); }
.npc .rows dt.act { color: #c8a05d; }.npc .rows dt.act::before { content: '⚔'; }
.npc .rows dt.feel { color: #cf8476; }.npc .rows dt.feel::before { content: '♡'; }
.npc .rows dt.think { color: #b299cb; }.npc .rows dt.think::before { content: '◈'; }
.npc .rows dd { color: #c9c0b1; font-style: normal; }
.npc.foe { border-color: #755343; }.npc.foe::before,.npc.foe::after { display: none; }
.notes { margin: 16px 0 0 47px; padding: 0; border: 0; color: #bba071; font-size: 13px; }
.notes div { margin: 6px 0; }
.notes div::before { content: '◇'; margin-right: 8px; }
.story { border-left: 2px solid #b58a49; padding: 20px 25px; font: 18px/1.85 var(--serif); }
@media (min-width: 1200px) { #screen-game:has(.drawer:not(.hidden)) .chron-wrap { margin-right: 460px; } #screen-game:has(.drawer:not(.hidden)) .chronicle { width: 96%; } }
@media (max-width: 1550px) { .desktop-nav { order: 4; justify-content: center; width: 100%; } .topbar { row-gap: 0; } .desktop-nav button { padding: 7px 19px; } }
@media (max-width: 1100px) { .chronicle { width: 96%; } .brand { font-size: 16px; }.tb-cond { display: none; } }
@media (max-width: 700px) { #feed { padding: 18px 14px; }.hc { max-width: 96%; }.hc-av { width: 34px; height: 34px; }.hc-text { font-size: 16px; }.wb { padding: 15px 12px; gap: 9px; }.wb p { font-size: 16px; }.npc { grid-template-columns: 64px minmax(0,1fr); padding: 16px; gap: 14px; }.npc-por { width: 64px; height: 64px; }.npc-name { font-size: 25px; }.npc-speech { font-size: 18px; }.npc .rows { grid-template-columns: 1fr; gap: 2px; }.npc .rows dd { margin-bottom: 8px; }.desktop-nav button { padding: 8px; }.notes { margin-left: 14px; } }

/* Dense surfaces keep the scenery behind the reading layer. */
.chronicle { background-color:rgba(10,10,9,.89); }
.npc { background-color:rgba(12,11,10,.83); }
.ref-monster { overflow:hidden; padding:2px; }
.battle-strike .battle-skull { width:26px; height:30px; fill:#bd7865; stroke:none; }.battle-skull circle,.battle-skull .skull-nose { fill:#15110e; }.battle-verdict { position:relative; }.battle-verdict::before { content:"◇"; position:absolute; top:-14px; left:50%; color:#c4a166; background:#14120e; padding:0 6px; font-size:19px; }