/* ASHBOUND V8 • ASHEN FRAME. Mobile-first combat readability, premium quiet HUD. */
:root{--v8-gold:#eac09a;--v8-stone:#25262d;--v8-ash:#c8bac0;--v8-panel:#11141bd9;--v8-blood:#c45e56}
body{background:radial-gradient(ellipse 85% 500px at 50% 0,#281d1c,#090b10 80%);color:#f5ebe2}
.app{max-width:1240px}
.topbar{border-bottom:1px solid #a1806063;background:linear-gradient(90deg,#0a0d12,#19151a,#0a0d12);height:76px}
.topbar .eyebrow{color:#f1ba86}
.hero-summary{gap:10px;margin:10px 0 12px}
.summary-stat{border:1px solid #8c766c5c;border-radius:4px;box-shadow:inset 0 1px #e3bd9330,0 5px 20px #0004;background:linear-gradient(125deg,#1a1b23,#0d1015);min-height:74px}
.summary-stat strong{color:#f8e8d7}
.arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:min(760px,65vw);min-height:545px;max-height:760px;border:1px solid #a37e6079;border-radius:7px;box-shadow:0 0 0 2px #050606,0 18px 70px #000e,0 0 40px #49271a29;background-color:#101017}
.arena:before{filter:none;background:linear-gradient(180deg,#06070cf0,transparent 30%,transparent 63%,#05070b88 100%),radial-gradient(ellipse at 50% 63%,transparent 16%,#05060a60 85%)}
.arena:after{box-shadow:inset 0 0 0 1px #c49d7652,inset 0 -25px 32px #000b;border:none}
.arena-top{top:19px;left:20px;right:20px;display:flex;gap:16px;align-items:flex-start;justify-content:space-between;z-index:23}
.arena-top h2{font-size:clamp(24px,3.2vw,42px);line-height:1.02;max-width:390px;text-shadow:0 3px 19px #000f}
.location-eyebrow{letter-spacing:3px;color:#ddae87}
.stage-pill{background:linear-gradient(140deg,#292025f2,#0b1017f2);border:1px solid #b18a6d9c;color:#fbe1c1;padding:12px 15px;border-radius:3px;font-weight:800;letter-spacing:1.5px}
#arena3d{filter:contrast(1.07) saturate(.92) drop-shadow(0 18px 11px #0009)!important}
.arena-3d-active #arena3d{filter:contrast(1.12) saturate(1.01)!important}
.arena-3d-active .arena-glow{opacity:.76;background:radial-gradient(ellipse 38% 17% at 50% 80%,#c6684d52,transparent 90%)}
#rigStatus{left:14px;right:auto;bottom:67px;max-width:240px;padding:6px 9px;background:#071314dc;color:#aad6c7;border-radius:3px;border:1px solid #4e89775a;font:800 9px system-ui,sans-serif;letter-spacing:1.1px;z-index:21}
.display-mode,.scene-mode,.camera-mode,.quality-mode{z-index:25!important;background:linear-gradient(145deg,#29242aef,#0e141bf0);border:1px solid #b0947a99;border-radius:3px;color:#f3d9b9;box-shadow:0 4px 19px #000b;min-height:35px;font-size:10px;letter-spacing:.4px;transition:background .12s,filter .12s}
.display-mode:hover,.scene-mode:hover,.camera-mode:hover,.quality-mode:hover{filter:brightness(1.18)}
.display-mode{left:20px;top:145px}.scene-mode{left:166px;right:auto;top:145px}.camera-mode{left:calc(50% - 47px);right:auto;top:145px}.quality-mode{right:20px;top:145px}
.motion-ribbon{bottom:64px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;border-radius:2px;text-align:center;background:#10131b8c;color:#f7ccad;opacity:.8}
.battle-scene{inset:84px 9px 40px}
.combatant-name{background:linear-gradient(90deg,#101018d4,#141019ab,#101018d4);padding:7px 5px;border:1px solid #a67d5155;border-radius:2px;font-size:clamp(9px,.85vw,13px);letter-spacing:1px}
.health-track{height:12px;border-radius:2px;border:1px solid #ad8a7a79;background:#080b0f;box-shadow:inset 0 1px 6px #000b}
.health-fill{box-shadow:inset 0 1px 1px #fff4,0 0 14px #c6725560}
.health-number{color:#f9e4d4;font-size:clamp(10px,1.3vw,15px)}
.combat-feed{min-height:55px;background:linear-gradient(90deg,#070b12f4,#20151bf1,#070b12f4);font:700 clamp(11px,1.2vw,14px) Georgia,serif;color:#ffe4c3;border-top:1px solid #a57c645c}
.battle-director{margin:14px 0 10px;min-height:79px;border:1px solid #98775d82;background:linear-gradient(100deg,#17151e,#0c1017 60%,#1b151a);border-radius:4px;box-shadow:inset 0 1px #fff1;gap:14px}
.director-label strong{color:#efc89b}.director-label small{color:#a59ba0}
.combat-tactics{border:1px solid #ad866a88;background:linear-gradient(110deg,#1c1921,#0d111a 60%,#1e161b);box-shadow:inset 0 1px #f6ce8930,0 10px 40px #0009;border-radius:4px}
.tactic-intent strong{color:#e9d1b9}
.parry-button,.dodge-button,#ultimateButton{border-radius:3px;touch-action:manipulation}
.parry-button,.dodge-button{box-shadow:inset 0 1px #fff2,0 5px 16px #0007}
#ultimateButton:not(:disabled){box-shadow:0 0 21px #a74c3675,inset 0 1px #ffdfad46}
.progress-card,.world-banner{border:1px solid #896d586f;background:linear-gradient(#16171e,#0f141c);border-radius:4px}
.navtabs{border-radius:3px!important;background:linear-gradient(#1c1a21,#0d1117)}
/* Fixed dock never covers combat controls on desktop. Desktop has full in-page navigation. */
@media(min-width:851px){.quickdock{display:none!important}.app{padding-bottom:32px}}
@media(max-width:850px){
 .quickdock{max-width:min(440px,calc(100vw - 16px));min-height:56px;padding:5px;border-radius:8px;background:#0b0d13f6;border-color:#a18b78a8;transition:opacity .12s,transform .12s;transform:translateX(-50%)}
 .quickdock.v8-hide-dock{opacity:0;pointer-events:none;transform:translate(-50%,110%)}
 .quickdock button{min-height:45px;border-radius:4px;background:#27232b;color:#f2ddcb}
 .app{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}
@media(max-width:680px){
 .topbar{height:68px}.hero-summary{gap:5px;margin:6px 0 8px}.summary-stat{min-height:64px;padding:9px}
 .summary-stat strong{font-size:23px}
 .arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:575px;min-height:0;max-height:none}
 .arena-top{left:12px;right:12px;top:13px}.arena-top h2{font-size:clamp(22px,6vw,28px);max-width:225px}
 .location-eyebrow{font-size:8px;letter-spacing:2px}
 .stage-pill{font-size:10px;padding:10px 9px}
 .display-mode,.scene-mode,.camera-mode,.quality-mode{top:112px!important;min-height:32px;padding:4px 6px;letter-spacing:0;font-size:8px;max-width:25%;overflow:hidden;text-overflow:ellipsis}
 .display-mode{left:8px}.scene-mode{left:28%}.camera-mode{left:52%}.quality-mode{left:auto;right:8px}
 #rigStatus{bottom:68px;left:8px;font-size:8px;max-width:175px}
 .motion-ribbon{bottom:67px;left:auto;right:10px;transform:none;max-width:46%;font-size:7px;letter-spacing:.4px}
 .combat-feed{min-height:49px;font-size:11px;padding:9px}
 .combatant-name{font-size:9px;letter-spacing:.3px;padding:4px 1px}
 .health-number{font-size:11px}
 .battle-director{min-height:64px;margin:8px 0;padding:9px;gap:5px}
 .combat-tactics{margin:9px 0 10px;gap:7px;padding:9px}
 .parry-button,.dodge-button{min-height:54px}
 .quickdock{bottom:calc(6px + env(safe-area-inset-bottom))}
}
@media(max-width:365px){
 .arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:535px}
 .arena-top h2{font-size:21px;max-width:185px}
 .display-mode,.scene-mode,.camera-mode,.quality-mode{top:106px!important;font-size:7px}
 .motion-ribbon{display:none}
 #rigStatus{bottom:60px}
 .quickdock{width:calc(100vw - 10px);gap:3px}
 .quickdock button{font-size:9px!important;padding:4px}
}
@media(prefers-reduced-motion:reduce){.quickdock{transition:none}}
/* The V5 art-mode switch inherited both left and right; stop its desktop-width stretch. */
html.cinema-art-mode #displayMode{left:20px!important;right:auto!important;width:auto!important;min-width:143px;max-width:190px;top:145px!important;display:inline-flex;align-items:center;justify-content:center}
html:not(.cinema-art-mode) #displayMode{top:145px!important;left:20px;right:auto;width:151px;max-width:170px;padding:5px}
html:not(.cinema-art-mode) #sceneMode{top:145px!important;left:184px;right:auto;width:135px;max-width:140px}
html:not(.cinema-art-mode) #cameraMode{top:145px!important;left:calc(50% - 48px);width:104px}
html:not(.cinema-art-mode) #qualityMode{top:145px!important;right:20px;width:106px}
@media(max-width:680px){
 html.cinema-art-mode #displayMode{top:113px!important;left:8px!important;min-width:0;width:145px!important;max-width:155px}
 html:not(.cinema-art-mode) #displayMode{top:112px!important;left:8px;width:26%;max-width:none;min-width:0;font-size:8px}
 html:not(.cinema-art-mode) #sceneMode{top:112px!important;left:28%;right:auto;width:21%;max-width:none;min-width:0;font-size:8px}
 html:not(.cinema-art-mode) #cameraMode{top:112px!important;left:50%;width:23%;max-width:none;min-width:0;font-size:8px}
 html:not(.cinema-art-mode) #qualityMode{top:112px!important;left:auto;right:8px;width:24%;max-width:none;min-width:0;font-size:8px}
}
@media(max-width:365px){html.cinema-art-mode #displayMode{top:107px!important;width:117px!important;font-size:8px}}