/* Illustrated action-game interface. Element colors indicate identity, not rarity. */
.hud-left,.hud-right,.progress-block{background:linear-gradient(150deg,#172c3bf2,#0b1723ed);border:1px solid #7f9a9b;border-radius:5px;box-shadow:inset 0 1px #ffffff24,0 3px 12px #0006}
.hud-left{min-width:195px;padding:10px 12px}.hud .eyebrow{color:#cedde0;font-size:9px;letter-spacing:.08em}.hud-right{min-width:112px;padding:8px 15px}.hud-right strong{font-variant-numeric:tabular-nums;color:#fff;font-size:30px;line-height:1.15}.hud-right>span{color:#b7cbcd;font-size:8px}
.track{height:10px;border:1px solid #08121e;border-radius:2px;background:#080f19;box-shadow:0 1px #ffffff22}.track i{background:linear-gradient(#a9f49a,#53ba69);box-shadow:0 0 6px #8cfa6b40}.health-icon{color:#9eea9c}.health-info b{color:#fff}
.progress-block{width:252px;padding:10px 12px}.xp-track{height:7px;border-color:#0c1723;background:#091421;border-radius:2px}.xp-track i{background:linear-gradient(#a2e9ff,#3fa4e5);box-shadow:0 0 7px #47bbff70}.level-info{color:#b9dfea}.build-label{color:#a3bec7;font-size:8px;letter-spacing:.06em}.kills{color:#d5e2de}.kills b{color:#fff}
.build{gap:5px}.build-chip{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid #8aa6ad;border-radius:5px;background:#101e2a;box-shadow:0 2px 3px #0006;position:relative;overflow:visible}.build-chip small{z-index:1;right:-3px;bottom:-3px;background:#e3f0ed;color:#142533;border:1px solid #1b3343;border-radius:3px;font-size:9px;min-width:13px;text-shadow:none}
.core-art{display:block;position:relative;overflow:hidden;flex:none;width:100%;height:100%;background:#102331 url('./assets/core-skills-v1.png') var(--icon-x) var(--icon-y)/400% 300% no-repeat;border-radius:inherit}.core-art>span{position:absolute;left:6%;bottom:3%;font:900 12px/1 system-ui;color:#fff;text-shadow:0 1px 3px #000,0 0 4px #000}
.modal-overlay{background:#050d18bd;backdrop-filter:blur(5px)}.modal{background:linear-gradient(155deg,#243a4c,#111e2c 68%);border:1px solid #637e89;border-radius:10px;box-shadow:0 20px 70px #000c,inset 0 1px #d9effc33;padding:34px 38px;color:#f2f6ef}.modal h2{font-family:Forest,system-ui,sans-serif;font-size:32px;line-height:1.15;text-transform:uppercase;text-shadow:0 3px #0a1522;letter-spacing:.02em}.modal h2 em{color:#ffe29b}.modal p{color:#b9cad4}.overline{color:#89c9df;letter-spacing:.17em}.modal-count{background:#10202e;border:1px solid #496673;border-radius:4px;padding:7px 9px;color:#e2f4fc}.modal-foot{color:#a6becb;font-size:9px}.controls-help{border-color:#496673;background:#0b1b29;color:#c1d5de}.controls-help b{color:#9fdbec}
.upgrade-card{width:min(850px,100%)}.upgrade-card .modal-top{align-items:center}.choices{gap:15px;margin-top:22px;align-items:stretch}
.choice{--core-color:#ffd477;display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:310px;padding:0 0 15px;overflow:hidden;border:2px solid #5b788c;border-radius:8px;background:linear-gradient(160deg,#2a455b,#162b3b 70%);box-shadow:inset 0 -3px #091523,0 6px 0 #070f19,0 10px 20px #0005;text-align:center;text-shadow:0 2px #0a1825;transition:transform .15s,border-color .15s}
.choice:hover,.choice:focus-visible{background:linear-gradient(160deg,#355870,#1b354a);border-color:var(--core-color);transform:translateY(-4px);box-shadow:0 0 18px color-mix(in srgb,var(--core-color) 25%,transparent),0 6px 0 #070f19}
.choice-top{display:flex;position:relative;align-items:center;justify-content:center;width:100%;padding:14px 0 12px;background:radial-gradient(ellipse at 50% 40%,#7293b52b,#08131f99);border-bottom:1px solid #7592a944}.choice .icon{width:108px;height:108px;background:#0d1d2b;border:1px solid var(--core-color);border-radius:9px;box-shadow:0 0 18px #0008,0 0 10px color-mix(in srgb,var(--core-color) 20%,transparent);overflow:hidden;display:block;font-size:0}.choice .rank{position:absolute;right:8px;top:8px;color:#eaf4ff;background:#091826db;padding:4px 7px;border-radius:3px;border:1px solid #718995;font-size:10px;text-shadow:none}.choice .type{margin:13px 12px 4px;color:var(--core-color);font-size:8px;letter-spacing:.12em}.choice b{margin:0 12px 8px;color:#fff;font-size:19px;line-height:1.2}.choice small{margin:0 14px;color:#d4e1eb;font-size:12px;line-height:1.5}.choice .synergy{margin:12px 10px 0;padding-top:9px;border-top:1px solid #9db6c229;color:#ffe095;font-size:10px;line-height:1.45}.choice .synergy:empty{display:none}
.icon-button{border:1px solid #8ca4ac;border-radius:6px;background:linear-gradient(#354c5c,#172a3a);color:#f3f8ef;box-shadow:inset 0 1px #e3faff36,0 3px 0 #091521}.primary{border-color:#fff1b1;border-radius:6px;background:linear-gradient(#ffe594,#e8b644 50%,#c28a24);color:#3a2c15;box-shadow:inset 0 2px #fff7ce,0 4px 0 #77501d,0 8px 15px #0007}.guide-link{background:linear-gradient(#354e60,#172a3c);border-color:#819b9f;border-radius:6px}.secondary,.guide-mini{color:#add9e7}.joystick-base{border-color:#b8d3dd;background:#12263880;box-shadow:inset 0 0 0 4px #314d6255}.joystick-stick{background:linear-gradient(#dcebee,#839fa9);border-color:#ebf7f4;box-shadow:0 3px #405d6a}
.notice-stack .notice{border-radius:4px;border-width:1px;box-shadow:0 3px 12px #0008;font-size:11px}.notice-danger{border-color:#ffb187;background:#632e26ef;color:#fff2df}.notice-result{background:#132f45ed;border-color:#85bfca;color:#e4f9ff}
@media(max-width:700px){.hud-left{min-width:0;padding:7px 9px}.hud-right{min-width:76px;padding:7px 8px}.hud-right strong{font-size:23px}.progress-block{width:192px;padding:8px}.build-chip{width:29px;height:29px}.build{gap:4px}.core-art>span{font-size:9px}.modal{padding:24px 18px}.modal h2{font-size:26px}.choice{min-height:260px}.choice .icon{width:84px;height:84px}.choice b{font-size:16px}.choice small{font-size:11px}.modal-foot{font-size:8px}.choices{gap:10px;margin-top:14px}}
@media(max-width:480px){.upgrade-card .choices{grid-template-columns:1fr;gap:10px}.choice{position:relative;display:grid;grid-template-columns:78px 1fr;text-align:left;min-height:104px;padding:10px;column-gap:12px;align-content:center}.choice-top{grid-row:1/5;grid-column:1;padding:0;border:0;background:none;align-self:center}.choice .icon{width:76px;height:76px;border-radius:6px}.choice .rank{top:auto;bottom:-3px;right:-3px;font-size:9px;padding:2px 5px}.choice .type,.choice b,.choice small,.choice .synergy{grid-column:2;margin-left:0;margin-right:0}.choice .type{margin-top:0;font-size:7px}.choice b{margin-bottom:4px;font-size:17px}.choice small{font-size:11px;line-height:1.35}.choice .synergy{margin-top:7px;padding-top:5px;font-size:9px}.modal{max-height:calc(100svh - 24px)}.upgrade-card .modal-foot{align-items:flex-start;gap:7px}.upgrade-card .controls-help{font-size:10px}}
@media(max-height:480px) and (min-width:481px){.upgrade-card{padding:16px 24px}.upgrade-card h2{font-size:22px}.upgrade-card .modal-top p{margin:6px 0}.upgrade-card .choices{grid-template-columns:repeat(3,1fr);margin-top:9px}.upgrade-card .choice{min-height:178px;padding-bottom:9px}.upgrade-card .choice-top{padding:6px}.upgrade-card .choice .icon{width:55px;height:55px}.upgrade-card .choice .type{margin-top:7px}.upgrade-card .choice b{font-size:15px;margin-bottom:5px}.upgrade-card .choice small{font-size:10px}.upgrade-card .choice .synergy{font-size:9px;margin-top:5px;padding-top:4px}.upgrade-card .controls-help{font-size:9px;padding:4px 8px;margin-bottom:5px}.upgrade-card .modal-foot{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.choice{transition:none}.choice:hover{transform:none}}

/* Keep a full endless build square and visible, including forge-level badges. */
.build{display:grid;grid-template-columns:repeat(5,38px);gap:5px;align-items:start}
.build-chip{flex:none;aspect-ratio:1}.build-chip small{width:auto;min-width:13px;padding:0 2px;box-sizing:border-box;white-space:nowrap;line-height:13px}
.end-build{flex-wrap:wrap;gap:8px}.empty-build{grid-column:1/-1}
.hud-left{position:relative}.track{position:relative}.track #hpBar{position:relative;z-index:1;transition:none}.track i.health-trail{position:absolute;inset:0 auto 0 0;background:#ffd276;z-index:0;box-shadow:none;transition:none}
.health-loss{position:absolute;left:39px;top:calc(100% + 5px);color:#ffd4b8;font:900 18px/1 Forest,system-ui,sans-serif;text-shadow:-1px -1px #3d1e1b,1px -1px #3d1e1b,-1px 1px #3d1e1b,1px 1px #3d1e1b,0 2px 5px #000;pointer-events:none}
.health-loss[hidden]{display:none}
@media(max-width:700px){.build{grid-template-columns:repeat(5,29px);gap:4px}.health-loss{left:29px;font-size:16px}.build-chip small{font-size:8px;line-height:12px}}
@media(max-width:700px){
 .route-hud,.landmark-status{left:10px;right:118px;max-width:none;width:auto;transform:none;text-align:left}
 .landmark-status{bottom:calc(var(--build-panel-height,170px) + 24px)}
 .route-hud{bottom:calc(var(--build-panel-height,170px) + 80px)}
}
@media(max-width:350px){
 .hud{right:96px;gap:7px}.hud-left{padding:7px}.hud .eyebrow{font-size:8px;white-space:nowrap}.hud-role,.hud-slash{display:none}
 .health-box{width:77px;flex:none}.health-info>span{display:none}.health-info b{white-space:nowrap;font-size:9px}.health-info{justify-content:flex-end}
 .health-icon{font-size:14px}.status{gap:5px;margin-top:5px}.hud-right{min-width:66px;padding:6px}.hud-right>span{font-size:6px;white-space:nowrap}.hud-right strong{font-size:20px}
}

/* Reference-led battle layout: XP across the top; combat space stays open. */
.topbar{left:12px;right:auto;top:27px}.top-actions{gap:0}
.action-hud .hud{left:0;right:0;top:26px;pointer-events:none;height:70px;display:block}
.action-hud .hud-right{position:absolute;right:12px;top:0;min-width:0;padding:0;border:0;background:none;box-shadow:none;text-align:right}
.action-hud .hud-right>span{font-size:7px;color:#d5e9ea;letter-spacing:.1em}
.run-counters{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.action-hud .hud-right strong{font-size:26px;line-height:1;font-weight:900;letter-spacing:0;color:#fff;text-shadow:0 2px 3px #07121c,-1px -1px #07121c}
.run-counters .kills{display:flex;align-items:center;gap:4px;margin:0;font-size:7px;letter-spacing:0;color:#d6e7e8}.run-counters .kills>span{font-size:18px;color:#d5e5e9}.run-counters .kills b{font-size:18px;color:#fff}
.action-hud .hud-left{position:absolute;right:12px;top:44px;min-width:0;width:143px;padding:0;background:none;border:0;box-shadow:none}
.action-hud .status{margin:0;gap:5px;justify-content:flex-end}.action-hud .health-box{width:119px;flex:none}.action-hud .health-info{justify-content:flex-end}.action-hud .health-info>span{display:none}.action-hud .health-info b{font-size:9px;white-space:nowrap}.action-hud .health-icon{font-size:16px;color:#ff8b78}.action-hud .track{height:7px;margin-top:3px;border-color:#07131c}.action-hud .track #hpBar{background:linear-gradient(#ffab96,#e85f57)}
.action-hud .health-loss{left:auto;right:0;top:calc(100% + 3px);font-size:16px}
.action-hud .hud>.eyebrow{position:absolute;left:60px;top:12px;white-space:nowrap;font-size:9px;letter-spacing:.04em;color:#edf7f5;text-shadow:0 2px 4px #07121c}.action-hud .hud-role,.action-hud .hud-slash,.action-hud .live-dot{display:none}
.run-xp{position:absolute;inset:0 0 auto;height:25px;z-index:6;pointer-events:none}.run-xp .xp-track{position:absolute;left:0;right:50px;top:0;margin:0;height:18px;border:0;border-radius:0;background:#0a1724bc}.run-xp .xp-track i{height:100%;background:linear-gradient(#b4f4ff 0,#56d2fa 45%,#1592d4 100%);box-shadow:inset 0 -3px 0 #0b6aa060,0 0 9px #4cc8ff80}.run-xp .level-info{position:absolute;inset:0;font-size:8px;letter-spacing:0}.run-xp #levelText{position:absolute;right:0;top:0;display:grid;place-items:center;width:50px;height:28px;font-size:10px;font-weight:900;background:linear-gradient(#53c6ee,#1579b2);border:1px solid #98e8ff;color:#fff;clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%)}.run-xp #xpText{position:absolute;top:0;left:calc(50% - 25px);transform:translateX(-50%);color:#f5ffff;font-size:11px;font-weight:900;line-height:18px;text-shadow:0 1px 3px #06354b}
.run-xp .level-info{z-index:1}
.action-hud:not(.is-playing) .hud,.action-hud:not(.is-playing)>.run-xp{visibility:hidden}
.action-hud .boss-hud{top:106px;width:min(360px,calc(100% - 24px));padding:6px 10px;border:1px solid #bb8e66;border-radius:5px;background:#251e1bea;font-size:8px;pointer-events:none}.action-hud .boss-hud>div{height:6px;margin-top:4px}
.action-hud .notice-stack{top:150px;left:12px;right:12px;width:auto;transform:none;align-items:center}.action-hud .notice-stack .notice{max-width:min(620px,100%);font-size:9px;padding:7px 10px;text-align:center}
.action-hud .endless-map,.action-hud .mock-map{top:auto!important;bottom:12px;right:12px;width:86px!important;height:75px!important;border-radius:5px;pointer-events:none}
.action-hud .route-open{top:auto;bottom:94px;right:12px;width:86px;min-height:40px;font-size:9px;border-radius:5px;background:#132a3ae8;border-color:#759aa8}
.action-hud .route-hud,.action-hud .landmark-status{left:12px;right:auto;transform:none;width:max-content;max-width:min(340px,calc(100% - 122px));text-align:left;font-size:9px;border-radius:4px;padding:6px 8px;background:#102737c9}
.action-hud .route-hud{bottom:106px}.action-hud .landmark-status{bottom:150px}
.action-hud>.path-seal-hud{position:absolute;left:12px;bottom:12px;width:170px;max-width:calc(100% - 120px);margin:0;padding:5px 7px;border:0;border-radius:4px;background:#102737aa;pointer-events:none}.action-hud>.path-seal-hud b{font-size:10px}.action-hud>.path-seal-hud small{max-width:none;font-size:8px;line-height:1.3}.action-hud .seal-track{height:3px;margin:3px 0}
.action-hud>#joystick{position:absolute;left:0;top:0;bottom:auto;right:auto;width:100px;height:100px;transform:translate(-50%,-50%);pointer-events:none;visibility:hidden;z-index:8;opacity:0;transition:opacity .08s}.action-hud>#joystick.active{visibility:visible;opacity:.86}.action-hud>#joystick>span{display:none}.action-hud>#joystick .joystick-base{width:86px;height:86px;background:#152b3b55;border:2px solid #daf5f8aa;box-shadow:inset 0 0 0 3px #2f526755}.action-hud>#joystick .joystick-stick{width:34px;height:34px;background:#d1edf0bb;border:1px solid #f5ffff}
.action-hud .hud,.action-hud .boss-hud,.action-hud .game-bottom{pointer-events:none}
.action-hud #pause .modal{max-height:calc(100svh - 24px);overflow-y:auto}.pause-build{margin:12px 0;padding:10px 0;border-block:1px solid #708d9e55;text-align:left}.pause-build .build-label{margin:0 0 9px;font-size:9px}.pause-build .build{justify-content:center}.pause-settings{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid #708d9e55;font-size:9px;color:#bbd4de}.pause-settings .icon-button{width:36px;height:36px;font-size:16px}
@media(max-width:700px){.action-hud .hud-right strong{font-size:24px}.action-hud .hud-right{right:12px}.action-hud .hud-left{right:12px}.action-hud .run-counters{gap:9px}.action-hud .hud>.eyebrow{left:57px;top:11px;font-size:8px}.action-hud .run-counters .kills b{font-size:16px}.action-hud .run-counters .kills>span{font-size:16px}.action-hud .run-counters .kills{font-size:6px}.action-hud .hud-right>span{font-size:6px}.action-hud .notice-stack{top:150px}}
@media(max-height:450px){.action-hud .hud{top:22px}.topbar{top:23px}.action-hud .boss-hud{top:93px}.action-hud .notice-stack{top:132px}.action-hud .route-hud{bottom:92px}.action-hud .landmark-status{bottom:132px}}