/* Shared page UI. The renderer and authoritative game rules are unchanged. */
:root{--readable:system-ui,-apple-system,"Segoe UI",sans-serif;--surface:#11120f;--surface-raised:#1b1c16;--text-clear:#e9e5d8;--text-muted:#b7b3a3;--line-soft:#49422e;--accent:#e8c773}
body{color:var(--text-clear)}
body :is(button,a,input,select,summary):focus-visible{outline:2px solid #f8da8c;outline-offset:3px}
body :is(.wow-dialog,.main-card,.roster-card,.result-frame){color:var(--text-clear)}
body .wow-dialog{background:linear-gradient(145deg,#1b1c16,#10110f 55%);border:1px solid #746139;border-radius:10px;box-shadow:0 24px 100px #000c,0 0 0 1px #000;scrollbar-color:#776640 #161611;scrollbar-width:thin}
body .wow-dialog::backdrop{background:#030505b8;backdrop-filter:blur(3px)}
/* Live Armory dimensions and page layout come from gear-sheet.css and talents.css. */
#armoryDialog [hidden]{display:none!important}
/* Let the desktop workbench use the available height instead of its sidebar's
   intrinsic text height. Long talent descriptions keep their existing scroller. */
@media(min-width:951px){#armoryDialog[data-tab=talents] .talent-workbench{flex:1 1 0;min-height:440px}#armoryDialog[data-tab=talents] .talent-sidebar{min-height:0}}
@media(min-width:951px) and (max-height:900px){
 #armoryDialog[data-tab=talents] .talent-budget{padding:8px 10px;gap:0}
 #armoryDialog[data-tab=talents] .talent-budget strong{font-size:26px}
 #armoryDialog[data-tab=talents] .talent-details{padding:10px}
 #armoryDialog[data-tab=talents] .talent-detail-title{margin-bottom:8px;grid-template-columns:36px minmax(0,1fr);gap:8px}
 #armoryDialog[data-tab=talents] .talent-detail-title>img{width:36px;height:36px}
 #armoryDialog[data-tab=talents] .talent-details p{margin:6px 0}
 #armoryDialog[data-tab=talents] #talentEffectHeading{margin-top:8px}
 #armoryDialog[data-tab=talents] #talentEffects{padding:6px 8px}
 #armoryDialog[data-tab=talents] .talent-actions{padding:0 10px 8px;gap:6px}
 #armoryDialog[data-tab=talents] .talent-actions #trainTalent{min-height:30px}
 #armoryDialog[data-tab=talents] .talent-reset{padding:8px 10px}
 #armoryDialog[data-tab=talents] .talent-reset-note{margin-top:6px}
}
@media(min-width:951px) and (max-height:700px){
 #armoryDialog[data-tab=talents] .talent-header{margin:0 0 4px}
 #armoryDialog[data-tab=talents] .talent-header h2{margin:0;font-size:24px}
 #armoryDialog[data-tab=talents] .talent-explanation{margin:4px 0}
 #armoryDialog[data-tab=talents] .talent-workbench{min-height:350px}
 #armoryDialog[data-tab=talents] .talent-tree-canvas{min-height:260px}
 #armoryDialog[data-tab=talents] .talent-tree-heading{padding:6px}
 #armoryDialog[data-tab=talents] .talent-tree-signature{min-height:35px;padding:6px}
}
/* Progress is a summary of the existing systems, with direct paths into them. */
.progress-intro{max-width:720px}.progress-intro h2{margin:4px 0 8px;font-size:32px;color:#f0d793}.progress-intro p{font-size:14px;color:var(--text-muted);margin:6px 0}.progress-intro .progress-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}
.progress-stats{display:flex;gap:38px;padding:16px 0 20px;margin:0}.progress-stats div{display:flex;flex-direction:column-reverse;gap:4px}.progress-stats dt{font:12px var(--readable);color:var(--text-muted)}.progress-stats dd{font:600 26px var(--readable);margin:0;color:#f5e6b6}
.progress-paths{display:grid;grid-template-columns:1fr 1fr;gap:14px}.progress-path{position:relative;padding:20px;border:1px solid var(--line-soft);border-radius:7px;background:linear-gradient(135deg,#222319,#151610);display:flex;flex-direction:column;align-items:start}
.progress-path h3{font:500 18px var(--readable);margin:0 35px 15px 0;color:#f1d58e}.progress-step{position:absolute;right:18px;top:18px;font:14px var(--readable);color:#8a815f}.progress-count{font:600 14px var(--readable);color:var(--text-clear)}
.progress-path progress{appearance:none;width:100%;height:6px;border:0;border-radius:4px;margin:12px 0 2px;background:#060805;accent-color:#d5b566}.progress-path progress::-webkit-progress-bar{background:#060805;border-radius:4px}.progress-path progress::-webkit-progress-value{background:linear-gradient(90deg,#886c36,#e8c773);border-radius:4px}.progress-path progress::-moz-progress-bar{background:#d5b566;border-radius:4px}
.progress-path p{font-size:13px;color:var(--text-muted);margin:12px 0 18px}.progress-path button{margin-top:auto;min-height:34px}.progress-help{margin-top:18px;border-left:2px solid #9d844b;padding:4px 16px;font:13px/1.6 var(--readable);color:var(--text-muted)}.progress-help p{margin:4px 0}.progress-help strong{color:#dfd3b6;font-weight:500}
/* Progress tab feats (progression.js renderFeats): the path cards' frame, dimmed until earned. */
.progress-feats{margin-top:18px}.progress-feats-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.progress-feats-head h3{font:500 18px var(--readable);margin:0;color:#f1d58e}.progress-feats-note{font-size:13px;color:var(--text-muted);margin:6px 0 12px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}.feat-card{padding:12px 14px;border:1px solid var(--line-soft);border-radius:7px;background:linear-gradient(135deg,#222319,#151610)}.feat-card strong{display:block;font:500 15px var(--readable);color:#f1d58e}.feat-card p{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--text-muted)}
.feat-card.earned{border-color:#9d844b;box-shadow:inset 0 0 0 1px rgba(232,199,115,.16)}.feat-card.earned .feat-title{color:var(--text-clear)}.feat-card.locked{border-color:rgba(157,132,75,.22);background:#141510}.feat-card.locked strong{color:#8a815f}.feat-card.locked .feat-how{color:var(--text-clear)}
/* The Codex keeps a strong effect first, then optional fine print. */
#codexDialog .codex-detail,#codexDialog .codex-item-detail{background:#141610;border-color:var(--line-soft);border-radius:7px;padding:18px}
#codexDialog :is(.codex-detail p,.codex-item-detail p,.codex-item-sources){font:13px/1.6 var(--readable);color:var(--text-clear)}
#codexDialog :is(.codex-detail h3,.codex-item-detail h3){font:500 21px/1.3 var(--readable)}
#codexDialog :is(.codex-row-label strong,.codex-item-text strong){font:500 14px var(--readable)}
#codexDialog :is(.codex-row-label small,.codex-item-text small,.codex-reference-caption small){font:11px/1.5 var(--readable);color:var(--text-muted)}
#codexDialog .codex-section>h2{background:#1b1c16;font:11px var(--readable);letter-spacing:.1em}
#codexDialog :is(.codex-detail h4,.codex-item-detail h4){font:600 11px var(--readable);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
#codexDialog .codex-fineprint{border-top:1px solid var(--line-soft);margin-top:16px;padding-top:14px}
#codexDialog .codex-fineprint summary{font:13px var(--readable);cursor:pointer;color:var(--accent)}
#codexDialog .codex-detail .codex-art-note{font:11px/1.5 var(--readable);color:var(--text-muted)}
#codexDialog .codex-item-row{min-height:52px}.codex-count{font-family:var(--readable)}
/* Lobby cards retain the live character scene, with less ornament and clearer actions. */
body .main-card.native-frame{border-image:none;border:1px solid #655735;border-radius:9px;background:linear-gradient(145deg,#1b1d17f5,#0f110ef5);padding:20px;box-shadow:0 10px 32px #0008}
body .main-card :is(p,.next-line,.next-under,.account-status,.gear-totals,.gear-status){font-family:var(--readable);line-height:1.45}
body .main-card :is(.main-card-sub,.next-line){font-size:13px;color:#e4d9bb}
body .main-card :is(.next-under,.next-rules){font-size:12px;color:var(--text-muted)}
body .hero-card-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.hero-card-actions small{font:10px var(--readable)}
body #heroCard .character-account{display:none}
body #heroCard .hero-vendor{display:block;width:100%;min-height:30px;margin:8px 0 2px;font-size:13px}
body #nextZone{font-size:34px;line-height:1.12;margin:10px 0}
body #nextRunCard,body #partyCard{border-color:#a58b4b;box-shadow:0 10px 32px #0008,0 0 25px #d3a94d10}
body .friends-card h2{font-size:26px}.friends-card .invite-entry label{font:12px var(--readable)}
body .corner-bar{gap:0;border:1px solid #554a31;border-radius:6px;background:#10120ff2;padding:3px;max-width:calc(100vw - 24px);left:12px;bottom:10px}
body .corner-bar :is(.small-button,.wow-button){font:12px var(--readable);padding:8px 10px;min-height:34px;background:none;border:0;border-radius:3px;text-decoration:none;box-shadow:none;text-shadow:none}
body .corner-bar :is(button,a):hover{background:#322c1b;color:#ffe6a3}
.development-note{position:fixed;left:20px;top:18px;z-index:3;max-width:380px;padding:9px 13px;border:1px solid #77623866;background:#12140fe8;border-radius:6px;color:#bdb8a6;font:12px/1.45 var(--readable)}
.development-note strong{display:block;font-size:11px;color:#e8c773;text-transform:uppercase;letter-spacing:.1em}.development-note a{color:#ead193}.development-note p{margin:4px 0 0}
body:not([data-screen=setup]) .development-note,body.in-room .development-note{display:none}
/* A report should be readable before it is decorative. */
body .result-frame{background:linear-gradient(#1c1d17,#10120f);border:1px solid #86703d;border-radius:10px}
body .result-frame :is(p,dt,dd,li,summary,.result-item-text,.result-note){font-family:var(--readable)}
body .result-frame .result-stats{gap:10px}.result-stats dt{color:var(--text-muted);font-size:11px}.result-stats dd{font-size:20px}
body .result-frame .result-item-detail,body .result-frame .result-item-effect{font-size:13px;line-height:1.5}
body .result-frame .result-note{font-size:13px;line-height:1.5}.result-frame .death-recap{margin-top:10px;margin-bottom:20px}
@media(min-width:801px) and (max-width:1100px){.main-cards{left:12px;right:12px;bottom:68px;grid-template-columns:minmax(220px,1fr) minmax(300px,1.2fr) minmax(220px,1fr);gap:12px}body .main-card.native-frame{padding:16px}body #nextZone{font-size:28px}.development-note{max-width:290px}}
@media(max-height:800px){body #heroCard{max-height:calc(100dvh - 170px)}body .main-card.native-frame{padding:14px}body #heroCard .gear-doll{gap:5px}body #heroCard .gear-doll-left,body #heroCard .gear-doll-right{gap:4px}body #heroCard .gear-totals{margin:6px 0}body #heroCard .gear-set-bonus{font-size:10px}}
@media(max-width:760px){.progress-paths{grid-template-columns:1fr}.progress-stats{gap:24px}.development-note{position:relative;top:auto;left:auto;margin:12px 16px 0;max-width:none}.corner-bar{max-height:100px;overflow:auto}body .main-cards{padding-bottom:116px}}
@media(prefers-reduced-motion:reduce){body *,body *::before,body *::after{scroll-behavior:auto!important}}


/* The fallback controls are also used while the native HUD is starting. */
@media(min-width:801px) and (max-width:1200px){body.playing:not(.native-hud):not(.run-finished) #runBar{left:310px;right:15px;width:auto;max-width:none;transform:none}}

@media(min-width:801px) and (max-height:800px){
 body #heroCard{max-height:calc(100dvh - 110px)}
 body #heroCard .gear-doll{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
 body #heroCard .gear-doll-left,body #heroCard .gear-doll-right,body #heroCard .gear-doll-weapon{display:contents}
 body #heroCard .gear-slot-icon{width:32px;height:32px}
 body #heroCard .gear-slot{flex:0 0 17%}
 body #heroCard .gear-totals{padding:5px 7px;font-size:11px;gap:3px 8px}
 body #heroCard .hero-card-actions{margin-top:10px}
 .development-note{left:auto;right:20px;max-width:280px}
}

/* Keep replay, feedback and exit reachable while a long report scrolls. */
body.playing #result.result{padding:16px;overflow:hidden}
#result .result-frame{max-height:calc(100dvh - 32px);padding:0;overflow:hidden;background:linear-gradient(#1c1d17,#10120f);border:1px solid #86703d;border-radius:10px;box-shadow:0 20px 70px #000c}
#result .result-frame:before,#result .result-frame:after{display:none}
#result .result-content{width:100%;min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px 26px 8px;scrollbar-width:thin;scrollbar-color:#776640 #161611;text-align:center}
#result .result-actions{flex:none;align-self:stretch;margin:0;padding:12px 16px;gap:10px;border-top:1px solid var(--line-soft);background:#13140f}
@media(max-height:740px){#result .result-content{padding:18px 20px 6px}body.playing #result .result-banner h2{font-size:38px}#result .result-stats{gap:8px;margin-bottom:16px}}
@media(max-width:700px){#result .result-content{padding:16px 12px 6px}#result .result-actions{padding:10px;gap:6px}body.playing #result .result-actions button{flex:1 1 40%;white-space:normal;font-size:12px}}

#result #resultPlayers{width:100%;max-width:100%;padding:0;list-style:none}
#result:after{display:none}

#codexDialog .codex-items-pager button:disabled{opacity:.4}

/* The run may already be active when reconnecting; loading and escape controls remain visible. */
body.in-room.world-loading-active .world-backdrop{display:block!important;background:#070b0ede;z-index:9}
body.in-room.world-loading-active #realmWindow{display:block;position:fixed;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:0;overflow:auto;z-index:20;pointer-events:auto;background:linear-gradient(145deg,#20241c,#111510);border:1px solid #8b7845;border-radius:12px;box-shadow:0 24px 90px #000b;color:var(--text-clear)}
body.in-room.world-loading-active #realmWindow:before,body.in-room.world-loading-active #realmWindow:after{display:none}
body.in-room.world-loading-active #realmWindow>.window-title,body.in-room.world-loading-active .party-section>.section-heading,body.in-room.world-loading-active :is(#party,#focusStatus,#combatCodex,#combatLogButton){display:none!important}
body.in-room.world-loading-active #roomPanel .party-layout{display:block!important;padding:24px 24px 12px}
body.in-room.world-loading-active #loadingProgress{display:block!important;margin:0;padding:0;border:0;background:none;box-shadow:none}
body.in-room.world-loading-active #loadingProgress .world-loading-heading{align-items:flex-start;gap:16px;margin-bottom:18px}
body.in-room.world-loading-active #loading{font:600 21px/1.4 var(--readable);color:#f5df9f}
body.in-room.world-loading-active #loadingPercent{font:600 15px/1.6 var(--readable);color:var(--text-clear)}
body.in-room.world-loading-active #loadingProgress .world-loading-meta{display:flex;flex-direction:column;gap:8px;margin-top:16px;font:14px/1.5 var(--readable)}
body.in-room.world-loading-active #loadingAssets{font:13px/1.5 var(--readable);color:var(--text-muted)}
body.in-room.world-loading-active #retryWorld:not([hidden]){display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;margin-top:20px;padding:10px 20px}
body.in-room.world-loading-active #roomPanel .room-actions{display:flex!important;padding:12px 24px 20px;border:0;background:none}
body.in-room.world-loading-active #leave{min-height:40px;padding:8px 18px}
body.in-room.world-loading-active :is(#runBar,#bossFrame,#bossMechanic,#survivalBar,#defenseFrame,#activeBuffs,#damageMeter,#rewardPanel,#downedNotice,#runHint,#starterNotice,#objectivePanel,#sharedLootPanel){display:none!important}
@media(max-width:600px){body.in-room.world-loading-active #roomPanel .party-layout{padding:20px 16px 10px}body.in-room.world-loading-active #roomPanel .room-actions{padding:10px 16px 16px}body.in-room.world-loading-active #loading{font-size:18px}}

@media(min-width:801px) and (max-height:650px){
 body #heroCard{max-height:calc(100dvh - 84px)}
 body #heroCard .hero-vendor{margin:7px 0 0}
 body #heroCard .hero-card-actions button{min-height:32px;font-size:14px}
 body #heroCard .gear-currencies{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
 body #heroCard .gear-currency{grid-column:span 2;padding:3px 2px;font-size:10px;white-space:nowrap;justify-content:center;gap:3px}
 body #heroCard .gear-currency:nth-child(n+4){grid-column:span 3}
 body #heroCard .gear-currency-icon{width:12px;height:12px}
 body #heroCard .gear-status{margin:4px 0}
}