/* DUELBORN V4.0 — cohesive dark-fantasy direction. No external requests. */
:root{
  --bg:#07080c;--panel:#11141c;--panel-2:#1a1b25;
  --gold:#d9b383;--gold-2:#f4d8a8;--ink:#d8d9e2;
  --scarlet:#d25e66;--violet:#8977bc;--teal:#81cfc5;
}
html{color-scheme:dark}
body{background:radial-gradient(ellipse 70% 48% at 50% -14%,#4e363234,transparent 78%),#07080b}
.app{max-width:1024px;padding-bottom:125px}
.topbar{height:100px;padding-top:8px}
.topbar:after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:linear-gradient(90deg,transparent,#a08a6a66 35%,#a08a6a66 65%,transparent)}
.brand h1{font-size:clamp(18px,2.8vw,28px);letter-spacing:2.1px;color:#f0e3ce}
.eyebrow{font-size:10px;color:#cda980;letter-spacing:2.4px}
.brand-icon{width:61px;height:61px;background:radial-gradient(circle at 49% 48%,#93694b67,transparent 64%),linear-gradient(155deg,#27272c,#12131a 72%);border:1px solid #8c765b;box-shadow:inset 0 0 16px #e6a96c1b,0 7px 22px #0008}
.summary-stat{border:1px solid #77747a55;border-radius:13px;background:linear-gradient(140deg,#20212d 0%,#141620 43%,#11141a 100%);position:relative;overflow:hidden}
.summary-stat:after{content:'';pointer-events:none;position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,#ecbd8f78,transparent)}
.summary-stat small{font-size:10px;letter-spacing:1.7px;color:#a9a2ab}
.summary-stat strong{font-size:clamp(21px,3.5vw,31px);color:#f0dfcd;font-weight:850;letter-spacing:.4px}
.summary-stat:nth-child(2) strong{color:#efc07e}.summary-stat:nth-child(3) strong{color:#b89ee4}
.arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:660px;border-radius:20px;border:1px solid #ac8b6859;box-shadow:0 0 0 1px #463b3c8c,0 30px 80px #000b,inset 0 0 30px #0005;background-position:center center}
.arena:before{background:linear-gradient(180deg,#03050dbd 0%,#05050c36 23%,#0a091211 60%,#030406ce 100%),radial-gradient(ellipse 84% 70% at 50% 45%,transparent 37%,#0202078c 100%)}
.arena:after{box-shadow:inset 0 0 0 1px #c8a58230,inset 0 -43px 66px #04070dc2,inset 0 0 82px #01020658}
.arena-top{top:24px;left:28px;right:28px;display:flex;align-items:start;justify-content:space-between}
.location-eyebrow{font-size:10px;color:#e2b995;letter-spacing:2.9px}
.arena h2{font-size:clamp(23px,3.1vw,34px);max-width:340px;color:#faefe1;letter-spacing:.3px;text-shadow:0 3px 16px #000,0 5px 28px #000}
.stage-pill{font-size:11px;min-width:94px;text-align:center;padding:14px 10px;letter-spacing:1.5px;border-radius:8px;color:#f6d5b4;background:#0c111ae8;border-color:#ad927958}
.scene-mode,.camera-mode,.quality-mode{top:130px;height:38px;border-radius:8px;transition:background .2s,transform .2s;letter-spacing:1px;font-size:10px;z-index:25}
.scene-mode:active,.camera-mode:active,.quality-mode:active{transform:scale(.97)}
.scene-mode{left:25px;width:143px;background:#3a291fe9;color:#f1cf9f;border-color:#a67d52}
.camera-mode{left:calc(50% - 69px);width:138px;background:#201c31e8;color:#e1d5fa;border-color:#7d7194}
.quality-mode{right:25px;width:123px;background:#14302ded;color:#b6e9e0;border-color:#5e958c}
.arena .battle-scene{inset:180px 17px 38px}
#arena3d{filter:drop-shadow(0 13px 11px #030307c0) saturate(1.06) contrast(1.08)}
.combatant-name,.arena-3d-active .combatant-name{bottom:96px;min-height:36px;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:1.1px;color:#fff2df;text-shadow:0 2px 4px #000;background:linear-gradient(90deg,transparent,#101016c0 18%,#17131bdf 50%,#101016c0 82%,transparent)}
.combatant-name small{font-size:9px;color:#c8b8c4}
.health-track{height:13px;border-radius:5px;background:#080a0fda;border-color:#77695d77}
.hero-health{background:linear-gradient(90deg,#2c897c,#9ae5c2)}.enemy-health{background:linear-gradient(90deg,#732e47,#f17a79)}
.health-number{font-size:12px;font-weight:700;color:#f2e8dc}
.combat-feed{min-height:54px;background:linear-gradient(90deg,#0a0a11f4,#1c1b25f0,#0a0a11f4);color:#eed8bf;border-top-color:#ab906755;font-size:12px}
#rigStatus{bottom:57px;left:18px;font-size:9px;background:#0b181bf0;border-color:#508a7b77}
.battle-director{display:grid;grid-template-columns:1.0fr 2fr 1fr;gap:14px;align-items:center;padding:16px 20px;margin:14px 0 4px;border:1px solid #7e6d6470;background:linear-gradient(125deg,#171922f0,#10121af2 53%,#1a171ef0);box-shadow:0 12px 30px #0006,inset 0 1px #ffe2ad13;border-radius:14px}
.director-label{display:flex;flex-direction:column;gap:5px}
.director-label small,.director-right small{font-size:9px;letter-spacing:1.5px;color:#ab97a0;font-weight:750}
.director-label strong{color:#e7c298;font-size:13px;letter-spacing:1.2px}
.director-rhythm{display:flex;flex-direction:column;gap:9px;min-width:0}
.director-rhythm .rhythm-meta{display:flex;justify-content:space-between;gap:6px;font-size:10px;letter-spacing:1.1px;color:#d6d5d9}
.director-rhythm .rhythm-meta #duelCue{color:#eed4b8;font-weight:800}
.rhythm-track{height:6px;background:#3b3a43;border-radius:99px;overflow:hidden;border:1px solid #68636c66}
.rhythm-track:before{content:'';display:block;width:var(--beat,0%);height:100%;background:linear-gradient(90deg,#7e6061,#e5bf8d);box-shadow:0 0 12px #c28f64a1;transition:width .14s linear}
.director-right{display:flex;align-items:center;justify-content:end;flex-direction:column;gap:6px;text-align:right}
.director-right strong{font-family:Georgia,serif;font-size:18px;color:#a7dfcf}
.progress-card,.world-banner,.navtabs,.tabpanel,.daily-card,.stats-card{border-radius:15px;border-color:#75696b73;background:linear-gradient(150deg,#181a25,#10121a 68%)}
.progress-card{margin-top:18px;padding:21px 24px 24px;box-shadow:0 17px 40px #0006}
.progress-head .card-eyebrow{color:#bd9d91}.progress-head strong{font-size:16px;color:#f0e8dd}
.progress-track,.xp-track{background:#373640;border-color:#6a576450;height:8px}
.progress-fill{background:linear-gradient(90deg,#9e5a56,#efb67e)}
.xp-fill{background:linear-gradient(90deg,#7561a6,#c3a1e8)}
.fight-actions{display:grid;grid-template-columns:2.1fr 1fr;gap:12px}
.skill-button,.auto-button{border-radius:12px;min-height:58px}
.skill-button{background:linear-gradient(130deg,#783c35,#492728 70%);border-color:#ad7060}
.auto-button{background:#252331;border:1px solid #61596e;color:#d7cedd}
.navtabs{padding:6px;gap:4px;border:1px solid #625c6777;background:#0d1018d9}
.navtab{border-radius:9px;min-height:49px;transition:background .2s}
.navtab.active{background:#574038;color:#f7e2c9}
.upgrade-row,.evo-card,.equipment-slot{background:linear-gradient(135deg,#27212a,#1a1c26);border:1px solid #665f68a1;border-radius:12px}
.upgrade-row:hover,.evo-card:hover{border-color:#b89675}
.quickdock{max-width:min(740px,calc(100vw - 22px));bottom:max(10px,env(safe-area-inset-bottom));padding:6px;gap:6px;border-radius:16px;border:1px solid #796a718a;background:#090c14f5}
.quickdock button{border-radius:11px;min-height:52px;font-size:13px}
.quickdock button:first-child{background:linear-gradient(145deg,#703b35,#4b2d2c)}
.game-motto{color:#d2b59e9a;margin:16px 0;letter-spacing:2.1px;font-size:11px}
.footer,.app footer{color:#9b8e8b}
/* Mobile: maintain readable faces and HUD, keep buttons away from title. */
@media(max-width:640px){
 .app{padding-left:10px;padding-right:10px}
 .topbar{height:82px}.brand-icon{width:50px;height:50px}
 .brand h1{font-size:19px;letter-spacing:1.2px}
 .eyebrow{font-size:8px;letter-spacing:1.7px}
 .summary-stat{border-radius:9px}
 .arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:566px;border-radius:15px}
 .arena-top{left:16px;right:14px;top:16px}
 .arena h2{font-size:23px;max-width:205px}
 .location-eyebrow{font-size:8px;letter-spacing:1.7px}
 .stage-pill{padding:10px 7px;min-width:68px;font-size:9px}
 .scene-mode,.camera-mode,.quality-mode{top:119px;height:32px;font-size:9px;letter-spacing:.2px}
 .scene-mode{left:10px;width:105px}
 .camera-mode{width:105px;left:calc(50% - 52.5px)}
 .quality-mode{right:10px;width:91px}
 .arena .battle-scene{inset:159px 8px 38px}
 .combatant-name,.arena-3d-active .combatant-name{bottom:91px;font-size:9px;min-height:33px;letter-spacing:.1px}
 .combatant-name small{font-size:8px}
 .combat-feed{font-size:10px;min-height:47px}
 #rigStatus{bottom:51px;left:8px;font-size:8px}
 .battle-director{grid-template-columns:1fr 1.5fr;gap:8px;padding:12px 13px;border-radius:11px;margin:9px 0}
 .director-label small{font-size:8px}.director-label strong{font-size:10px}
 .director-right{display:none}
 .director-rhythm .rhythm-meta{font-size:8px;letter-spacing:.1px}
 .progress-card{padding:16px 14px 20px}
 .quickdock button{font-size:11px;min-height:50px}
}
@media(max-width:365px){.arena,.arena.zone-1,.arena.zone-2,.arena.zone-3,.arena.zone-4{height:526px}.arena h2{font-size:20px;max-width:177px}.scene-mode,.camera-mode,.quality-mode{top:112px;font-size:8px}.scene-mode{width:95px}.quality-mode{width:84px}.camera-mode{width:93px;left:calc(50% - 46px)}.arena .battle-scene{inset:150px 7px 38px}}
@media(prefers-reduced-motion:reduce){.rhythm-track:before{transition:none}.scene-mode,.camera-mode,.quality-mode{transition:none}}