/* Historical stories open below the card, leaving the combat stats easy to scan. */
.card-detail>.hero-lore,.card-detail>.card-detail-actions{grid-column:1/-1;min-width:0}
.card-detail>.card-detail-actions{display:flex;align-items:center;gap:12px}
.card-detail .hero-lore{border:1px solid #aa8e5766;border-radius:5px;background:linear-gradient(120deg,#e2d0a377,#fff5dc55);overflow:hidden}
.card-detail .hero-lore>summary{padding:13px 16px;color:#4e5737;font-weight:700;font-size:15px;line-height:1.4;cursor:pointer;min-height:46px}
.card-detail .hero-lore>summary:hover{background:#fff7de45}
.card-detail .hero-lore>summary:focus-visible{outline:2px solid #6c8044;outline-offset:-3px}
.card-detail .hero-lore[open]>summary{border-bottom:1px solid #aa8e5744}
:is(.card-detail,.campaign-hero-story) .hero-lore-body{padding:18px 20px;max-width:900px}
:is(.card-detail,.campaign-hero-story) .hero-lore-body>h3{margin:0 0 12px;color:#564527;font-size:21px;line-height:1.35}
:is(.card-detail,.campaign-hero-story) .hero-lore-body>p{margin:0 0 13px;font-size:14px;line-height:1.85;color:#443d2d;overflow-wrap:anywhere}
:is(.card-detail,.campaign-hero-story) .hero-lore-body>.hero-lore-note{padding:10px 13px;border-left:3px solid #aa915e;background:#dcc68e40;color:#625239;font-size:12px;line-height:1.75}
:is(.card-detail,.campaign-hero-story) .hero-lore-sources{padding-top:13px;border-top:1px solid #aa8e5744;color:#726044}
:is(.card-detail,.campaign-hero-story) .hero-lore-sources h4{font-size:12px;margin:0 0 8px}
:is(.card-detail,.campaign-hero-story) .hero-lore-sources ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
:is(.card-detail,.campaign-hero-story) .hero-lore-sources li{font-size:12px;line-height:1.6;overflow-wrap:anywhere}
:is(.card-detail,.campaign-hero-story) .hero-lore-sources a{color:#3e624a;text-decoration:underline;text-underline-offset:3px}
:is(.card-detail,.campaign-hero-story) .hero-lore-sources a:focus-visible{outline:2px solid #6c8044;outline-offset:3px}
:is(.card-detail,.campaign-hero-story) .hero-lore-sources small{display:block;font-size:11px;color:#806d4d}
.campaign-encounter .encounter-info .encounter-rewards{display:flex;flex-direction:column;gap:5px;padding:12px 0;margin:10px 0;border-top:1px solid #c8b17844;border-bottom:1px solid #c8b17844;font-size:12px;line-height:1.7;color:#fff0c5}
.campaign-encounter .encounter-rewards strong{color:#dec38c;font-size:11px}
.campaign-encounter .encounter-rewards span{overflow-wrap:anywhere}
.campaign-encounter .encounter-info>.btn{margin-top:8px}

/* The selected hero's story fills the space below the encounter window. */
.campaign-sidebar{position:absolute;z-index:20;top:120px;right:30px;bottom:100px;width:380px;display:flex;flex-direction:column;gap:12px;min-height:0;pointer-events:none}
.campaign-sidebar>.campaign-encounter{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:100%;max-height:none;overflow:visible;flex:0 0 auto;pointer-events:auto}
.campaign-hero-story{display:flex;flex-direction:column;flex:1 1 0;min-height:130px;border:4px ridge #b6a575;border-radius:3px;background:var(--antique-parchment);color:#443d2d;box-shadow:0 10px 26px #10232290,inset 0 0 0 1px #fff6dc88;overflow:hidden;pointer-events:auto}
.campaign-story-heading{flex:0 0 auto;padding:13px 17px 11px;border-bottom:1px solid #aa8e5766;background:#ae925015}
.campaign-story-heading>small{display:block;color:#876a34;font-size:10px;line-height:1.4;letter-spacing:1px;font-weight:700}
.campaign-story-heading>h2{margin:5px 0 0;font-size:20px;line-height:1.25;color:#584528;overflow-wrap:anywhere}
.campaign-story-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9b885e #e8dab6;scroll-padding:14px}
.campaign-story-scroll:focus-visible{outline:2px solid #71805a;outline-offset:-3px}
.campaign-hero-story .hero-lore-body{padding:15px 17px}
.campaign-hero-story .hero-lore-body>h3{font-size:17px;line-height:1.4}
.campaign-hero-story .hero-lore-body>p{font-size:13px;line-height:1.8}
.campaign-hero-story .hero-lore-body>.hero-lore-note{font-size:11px;line-height:1.7;padding:9px 11px}
.campaign-hero-story .hero-lore-sources{padding-top:0}
.campaign-hero-story .hero-lore-sources>summary{padding:12px 0;color:#66583e;font-size:12px;font-weight:700;cursor:pointer;min-height:40px}
.campaign-hero-story .hero-lore-sources>summary:focus-visible{outline:2px solid #71805a;outline-offset:-2px}
.campaign-hero-story .hero-lore-sources ul{padding-bottom:5px}
@media(max-width:1100px){.campaign-sidebar{right:20px;width:360px}}
@media(max-height:740px) and (min-width:761px){.campaign-sidebar{top:106px;bottom:89px}}
@media(max-height:600px) and (min-width:761px){
 .campaign-sidebar{top:20px;bottom:85px;overflow:auto;pointer-events:auto;scrollbar-width:thin}
 .campaign-hero-story{flex-basis:230px;flex-shrink:0}
}
@media(max-width:760px){
 .card-detail .hero-lore-body{padding:15px 14px}
 .card-detail .hero-lore-body>h3{font-size:18px}
 .card-detail .hero-lore-body>p{font-size:13px;line-height:1.8}
 .card-detail .hero-lore>summary{font-size:14px;padding:12px 13px}
 .card-detail>.card-detail-actions .btn{min-height:40px}
 .campaign-sidebar{top:auto;left:10px;right:10px;bottom:79px;width:auto;height:min(540px,calc(100% - 105px));gap:9px}
 .campaign-hero-story{min-height:130px}
 .campaign-story-heading{padding:10px 13px 8px}
 .campaign-story-heading>h2{font-size:17px;margin-top:3px}
 .campaign-hero-story .hero-lore-body{padding:12px 13px}
 .campaign-hero-story .hero-lore-body>h3{font-size:16px}
 .campaign-hero-story .hero-lore-body>p{font-size:12px;line-height:1.75}
}
@media(max-width:760px) and (max-height:580px){
 .campaign-sidebar{overflow:auto;pointer-events:auto;scrollbar-width:thin}
 .campaign-hero-story{flex-basis:230px;flex-shrink:0}
}