/* Content-first archive and play surfaces. Scoped away from quiz and timeline. */
html body.ui-refined {background:#10151d;color:#ecedf0;font-family:Inter,system-ui,sans-serif;line-height:1.55;margin:0;--panel:#19212c;--line:#344151;--muted:#aebbc9;--gold:#edc768}
html body.ui-refined *,html body.ui-refined *::before,html body.ui-refined *::after {box-sizing:border-box}
html body.ui-refined :is(.container,.page){max-width:1120px;margin:auto;padding:24px}
html body.ui-refined :is(.hero,.bat-header){background:none;border:0;box-shadow:none;border-radius:0;padding:12px 0 22px;margin:0;min-height:0;text-align:left}
html body.ui-refined :is(.hero,.bat-header)::before,html body.ui-refined :is(.hero,.bat-header)::after{display:none}
html body.ui-refined h1{font:700 clamp(2rem,5vw,3.4rem)/1.08 Inter,system-ui,sans-serif;letter-spacing:-.04em;text-transform:none;color:#f3f4f6;margin:8px 0 12px;text-shadow:none}
html body.ui-refined :is(h2,h3,h4){font-family:Inter,system-ui,sans-serif;text-transform:none;letter-spacing:-.02em;color:#f3f4f6;margin:0 0 8px}
html body.ui-refined :is(p,.subtitle){color:var(--muted);max-width:70ch;margin:8px 0;font-size:15px;line-height:1.55}
html body.ui-refined :is(.hero-kicker,.eyebrow,.hero-eyebrow,.bat-kicker,.section-title,.battle-kicker){font:600 11px/1.4 Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:var(--gold)}
html body.ui-refined :is(.hero-meta,.topbar){display:none}
html body.ui-refined :is(button,input,select){font:inherit}
html body.ui-refined :is(button,.btn,summary){min-height:44px;cursor:pointer}
html body.ui-refined :is(button,.btn){border:1px solid var(--line);border-radius:9px;background:#253141;color:#edf0f5;padding:10px 14px;font-size:14px;font-weight:600;box-shadow:none;text-shadow:none;line-height:1.35;white-space:normal}
html body.ui-refined :is(button,.btn):disabled{opacity:.45;cursor:default}
html body.ui-refined :is(button,.btn):hover:not(:disabled){background:#34445b}
html body.ui-refined :is(.primary,.vote-button,#startBtn,#nextBtn){background:var(--gold);color:#171c24;border-color:var(--gold)}
html body.ui-refined :focus-visible{outline:3px solid #8bd3ff;outline-offset:3px}
html body.ui-refined :is(input[type=text],select){background:#101821;border:1px solid #56677b;color:#f3f5f9;border-radius:8px;padding:10px 12px;min-height:44px;width:100%;max-width:100%}
html body.ui-refined input::placeholder{color:#9aaabd}
html body.ui-refined summary{display:flex;align-items:center;gap:10px;padding:9px 0;color:var(--gold);font-size:14px;font-weight:600;list-style:none}
html body.ui-refined summary::before{content:'+';font-size:20px;line-height:1}
html body.ui-refined details[open]>summary::before{content:'−'}
html body.ui-refined :is(.panel,.battle-card,.results-card,.villain-card,.daily-panel,.filters,.session-summary){background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;margin:0 0 18px;box-shadow:none}
html body.ui-refined :is(.action-row,.controls){display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
html body.ui-refined :is(.chip,.traits span,.vehicle-features span){display:inline-block;border:1px solid #405064;background:#202c3b;color:#c2cfdd;border-radius:5px;font:500 11px/1.5 Inter,sans-serif;padding:3px 7px;margin:3px 4px 3px 0}
html body.ui-refined .battle-header{display:flex;justify-content:space-between;gap:15px;margin-bottom:16px}
html body.ui-refined .battle-subtitle{font-size:13px;color:var(--muted)}
html body.ui-refined .pulse{font-size:12px;color:var(--gold)}
html body.ui-refined .battle-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
html body.ui-refined .fighter{background:#101821;border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;min-width:0}
html body.ui-refined .fighter-top{display:flex;align-items:center;gap:12px}
html body.ui-refined .image-placeholder{background:none;border:0;width:36px;flex:0 0 36px;min-height:0;box-shadow:none}
html body.ui-refined .image-symbol{font-size:24px;line-height:1}
html body.ui-refined .image-label{display:none}
html body.ui-refined .fighter-name{font-size:21px;line-height:1.2;margin:0}
html body.ui-refined .fighter-era{font-size:11px;line-height:1.4}
html body.ui-refined .fighter-desc{font-size:13px;margin:12px 0}
html body.ui-refined .vote-button{margin-top:auto;width:100%}
html body.ui-refined .traits{margin-bottom:14px}
html body.ui-refined .results-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
html body.ui-refined .result-label-row{display:flex;justify-content:space-between;font-size:14px;margin:12px 0}
html body.ui-refined .bar-track{height:8px;background:#0e141c;border-radius:8px;overflow:hidden}
html body.ui-refined .bar-fill{height:100%;background:var(--gold);transition:width .25s}
html body.ui-refined .filter-row{display:grid;grid-template-columns:1fr;gap:8px}
html body.ui-refined .filter label{display:block;color:var(--muted);font-size:12px;margin-bottom:7px}
html body.ui-refined .advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:10px}
html body.ui-refined .advanced-grid>.filter:last-child{grid-column:1/-1}
html body.ui-refined .media-checks{display:flex;gap:8px;flex-wrap:wrap}
html body.ui-refined .media-checks label{display:flex;gap:6px;align-items:center;min-height:44px;padding:6px 10px;background:#101821;border-radius:6px}
html body.ui-refined .filter-inline-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
html body.ui-refined #searchInputHint{font-size:12px}
html body.ui-refined .results-bar{margin:10px 0 16px;font-size:12px;color:var(--muted)}
html body.ui-refined .villain-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
html body.ui-refined .villain-card{margin:0}
html body.ui-refined .card-head{display:flex;justify-content:space-between;gap:8px;align-items:start}
html body.ui-refined .card-head h3{font-size:23px}
html body.ui-refined .appearance{font-size:12px;color:var(--muted)}
html body.ui-refined .shortline{font-size:14px;margin:14px 0}
html body.ui-refined .villain-detail{display:none;background:none;color:inherit;border:0;padding:18px 0 0;margin:16px 0 0;border-top:1px solid var(--line)}
html body.ui-refined .villain-detail.open{display:block}
html body.ui-refined .detail-grid{display:block}
html body.ui-refined .detail-grid :is(p,li,dd){font-size:14px;color:var(--muted)}
html body.ui-refined .detail-grid dt{font-size:12px;font-weight:700;margin-top:12px}
html body.ui-refined .detail-grid dd{margin:4px 0 12px}
html body.ui-refined .detail-grid h4{font-size:15px;margin-top:18px}
html body.ui-refined .expand-btn{margin-top:12px;width:100%}
html body.ui-refined .daily-panel{margin-top:24px}
html body.ui-refined .seo-zone{margin:24px 0}
html body.ui-refined .seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
html body.ui-refined .ranking-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:18px;align-items:start}
html body.ui-refined .panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:16px}
html body.ui-refined .panel-head h2{font-size:21px}
html body.ui-refined .panel-note{font-size:11px;color:var(--muted)}
html body.ui-refined .ranking-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
html body.ui-refined .ranking-item{display:grid;grid-template-columns:24px minmax(0,1fr) 44px;gap:10px;padding:14px;background:#101821;border:1px solid var(--line);border-radius:9px;align-items:start}
html body.ui-refined .rank-pill{color:var(--gold);font-size:20px;font-weight:700}
html body.ui-refined .vehicle-image{display:none}
html body.ui-refined .vehicle-content{min-width:0}
html body.ui-refined .vehicle-content h3{font-size:17px;line-height:1.3}
html body.ui-refined :is(.vehicle-year,.vehicle-era,.community-delta){font-size:11px;margin:3px 0}
html body.ui-refined .vehicle-year{display:none}
html body.ui-refined .vehicle-description{font-size:13px}
html body.ui-refined .actions{display:grid;gap:5px}
html body.ui-refined .actions button{width:44px;height:44px;padding:0;font-size:20px}
html body.ui-refined .drag-handle{touch-action:none}
html body.ui-refined .copy-line{font-size:11px;overflow-wrap:anywhere}
html body.ui-refined .community-list{padding-left:20px;font-size:13px}
html body.ui-refined .community-list li{margin:12px 0}
html body.ui-refined .layout-grid{display:block}
html body.ui-refined .difficulty-row{display:flex;gap:10px;margin:16px 0}
html body.ui-refined .difficulty-row label{flex:1;background:#101821;padding:12px 8px;border:1px solid var(--line);border-radius:8px;cursor:pointer;text-align:center;font-size:14px}
html body.ui-refined .difficulty-row label:has(:checked){border-color:var(--gold);color:var(--gold)}
html body.ui-refined .meta-row{font-size:12px;color:var(--muted);margin:10px 0;display:block}
html body.ui-refined .meta-row span{display:block}
html body.ui-refined #shuffleBtn{background:#253141}
html body.ui-refined .hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
html body.ui-refined .stat-card{background:#101821;border:0;border-radius:7px;padding:10px;text-align:center}
html body.ui-refined .stat-label{font-size:10px;letter-spacing:.07em;text-transform:uppercase;margin:0}
html body.ui-refined .stat-value{font-size:22px;color:#f1f3f6;margin:2px 0 0;font-weight:700}
html body.ui-refined .game-card{display:none}
html body.ui-refined .game-card.active{display:block}
html body.ui-refined .question-text{font-size:21px;color:#f2f3f6;font-weight:600;line-height:1.4;margin:16px 0}
html body.ui-refined .options{display:grid;gap:9px}
html body.ui-refined .option-btn{text-align:left;width:100%;padding:13px 15px;background:#101821}
html body.ui-refined .option-btn.correct{background:#163e32;border-color:#64cba2;opacity:1}
html body.ui-refined .option-btn.wrong{background:#49252c;border-color:#e98b9c;opacity:1}
html body.ui-refined .feedback{display:none}
html body.ui-refined .feedback.show{display:block;border-left:3px solid var(--gold);padding-left:12px;margin-top:16px}
html body.ui-refined .feedback p{font-size:13px}
html body.ui-refined .leaderboard-item{border-bottom:1px solid var(--line);padding:12px}
html body.ui-refined.trivia-playing .setup-panel,html body.ui-refined.trivia-playing .bat-header{display:none}
html body.ui-refined.trivia-playing #quizPanel{margin-top:4px}
html body.ui-refined.trivia-playing #progressHint{display:none}
html body.ui-refined .session-summary[hidden]{display:none}
html body.ui-refined.page-home .hero-gotham-feed{padding:30px 0;border:0}
html body.ui-refined.page-home .hero-actions .btn{max-width:100%;width:auto}
html body.ui-refined.page-home .hero h1{font-family:Cinzel,serif;font-size:clamp(2.6rem,6vw,5rem);color:#f3dc90}
html body.ui-refined.page-home .casefile-section{margin-top:30px}
html body.ui-refined footer{margin:32px 0;color:var(--muted);font-size:12px}
@media(max-width:650px){
 html body.ui-refined :is(.container,.page){padding:16px}
 html body.ui-refined :is(.panel,.battle-card,.results-card,.filters,.villain-card,.daily-panel){padding:16px}
 html body.ui-refined :is(.villain-grid,.ranking-layout,.seo-grid){grid-template-columns:1fr}
 html body.ui-refined .battle-grid{gap:9px}
 html body.ui-refined .fighter{padding:12px}
 html body.ui-refined .fighter-top{display:block}
 html body.ui-refined .image-placeholder{display:none}
 html body.ui-refined .fighter-name{font-size:18px}
 html body.ui-refined .fighter-desc{font-size:12px;line-height:1.5}
 html body.ui-refined .traits{display:none}
 html body.ui-refined .battle-header{display:block;margin-bottom:12px}
 html body.ui-refined .battle-subtitle{display:none}
 html body.ui-refined .vote-button{font-size:12px;padding:11px 6px}
 html body.ui-refined .battle-card>.action-row{margin-bottom:0}
 html body.ui-refined .battle-card>.action-row button{flex:1}
 html body.ui-refined .results-grid{grid-template-columns:1fr;gap:4px}
 html body.ui-refined .controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px}
 html body.ui-refined .ranking-item{padding:12px;gap:8px}
 html body.ui-refined .panel-head{display:block}
 html body.ui-refined.page-trivia h1{font-size:29px}
 html body.ui-refined.page-trivia .question-text{font-size:18px}
 html body.ui-refined.page-trivia #startBtn{width:100%}
 html body.ui-refined.page-trivia .setup-panel>.layout-grid>.action-row{margin:0}
 html body.ui-refined.page-home .hero-grid{display:block}
 html body.ui-refined.page-home .hero-actions{display:block}
 html body.ui-refined.page-home .hero-actions a{display:block;width:100%;margin:14px 0}
 html body.ui-refined.page-home .hero-roster{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){html body.ui-refined *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
html body.ui-refined :is(.battle-card,.battle-header,.pulse,.fighter,.filters,.panel)::before,html body.ui-refined :is(.battle-card,.battle-header,.pulse,.fighter,.filters,.panel)::after{display:none}
html body.ui-refined.page-home main{max-width:1120px;padding:0 22px;margin:auto}
html body.ui-refined.page-home .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
html body.ui-refined.page-home .hero-actions a.ghost-button{background:none;border:0;box-shadow:none;font-size:13px;padding:10px 8px;min-height:44px;width:auto;margin:0}
html body.ui-refined.page-home .hero-actions a.cta-button{flex-basis:100%;max-width:100%;margin:8px 0 0;text-align:center}
html body.ui-refined.page-home .gotham-rain{opacity:.2}
html body.ui-refined.page-home .features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
html body.ui-refined.page-home .feature-card{background:var(--panel);border:1px solid var(--line);padding:22px;border-radius:12px;box-shadow:none}
html body.ui-refined.page-home .feature-card::before,html body.ui-refined.page-home .feature-card::after{display:none}
html body.ui-refined.page-home .feature-card p{font-size:14px}
html body.ui-refined.page-home .feature-link{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);font-weight:600}
@media(max-width:650px){
 html body.ui-refined.page-home .features{grid-template-columns:1fr}
 html body.ui-refined.page-home .batman-arc{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px}
 html body.ui-refined.page-home .batman-card{min-width:0}
 html body.ui-refined.trivia-playing :is(.container,.page){padding:10px 14px}
 html body.ui-refined.trivia-playing .hud{margin:8px 0;gap:6px}
 html body.ui-refined.trivia-playing .stat-card{padding:4px}
 html body.ui-refined.trivia-playing .stat-value{font-size:18px}
 html body.ui-refined.trivia-playing .question-text{margin:10px 0;font-size:17px}
 html body.ui-refined.trivia-playing .options{gap:7px}
 html body.ui-refined.trivia-playing .option-btn{padding:10px 12px;font-size:14px}
 html body.ui-refined.trivia-playing #quizPanel .action-row{gap:6px}
 html body.ui-refined.trivia-playing #quizPanel .action-row button{font-size:12px;padding:10px}
}
@media(max-width:650px){
 html body.ui-refined.page-battles .container{padding:12px 16px}
 html body.ui-refined.page-battles .hero{padding:0 0 12px}
 html body.ui-refined.page-battles .hero h1{font-size:30px;margin:5px 0 7px}
 html body.ui-refined.page-battles .hero p{font-size:13px;line-height:1.45;margin:5px 0}
 html body.ui-refined.page-battles .battle-kicker{display:none}
 html body.ui-refined.page-battles .battle-card{padding:12px}
 html body.ui-refined.page-battles .battle-header{margin-bottom:8px}
 html body.ui-refined.page-battles .fighter-desc{margin:9px 0}
}
html body.ui-refined :is(.image-placeholder,.image-symbol)::before,html body.ui-refined :is(.image-placeholder,.image-symbol)::after{display:none}
html body.ui-refined :is(.vote-button,.fighter,.image-placeholder){transform:none;clip-path:none}
html body.ui-refined :is(.result-name,.result-value){color:#dce5ef}
html body.ui-refined.page-home .hero-actions a.ghost-button{display:inline-flex;flex:1;justify-content:center}