:root { color-scheme:dark; --bg:#08131e; --panel:#101f2e; --line:#2a3d50; --text:#edf5ff; --muted:#95abc1; --accent:#66e8db; --danger:#ff8b68; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(ellipse at 85% 0,#243139,transparent 45%),var(--bg); color:var(--text); font-family:Inter,"Noto Sans KR",system-ui,sans-serif; }
button,input,a { font:inherit; -webkit-tap-highlight-color:transparent; } a { text-decoration:none; color:inherit; }button {cursor:pointer;}button:disabled { opacity:.4;cursor:not-allowed; }button:focus-visible,a:focus-visible,input:focus-visible,.canvas-host:focus-visible { outline:3px solid var(--accent);outline-offset:3px; }[hidden] { display:none!important; }
.page { max-width:1430px; margin:auto; padding:30px; }.game-header { display:flex;gap:30px;align-items:center;margin-bottom:28px; }.back-link { border:1px solid var(--line);border-radius:9px;padding:12px 15px;font-size:12px;font-weight:750;color:#afc0d3;letter-spacing:.08em;white-space:nowrap; }.back-link:hover { color:var(--accent); }.eyebrow { font-size:10px;letter-spacing:.17em;color:var(--accent);font-weight:750;margin:0 0 10px; }h1 { font-size:clamp(32px,4vw,46px);letter-spacing:-.065em;margin:0;line-height:1; }h1 span { color:var(--accent); }.header-badge { margin-left:auto;border:1px solid #376062;color:#8cced1;border-radius:99px;padding:10px 13px;font-size:9px;letter-spacing:.12em; }
.game-layout { display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start; }.arena-wrap { position:relative;height:clamp(640px,67vw,850px);border:1px solid #3c546a;border-radius:19px;overflow:hidden;background:#081321;box-shadow:0 25px 80px #0004; }.canvas-host { position:absolute;inset:0;touch-action:none; }.canvas-host canvas { width:100%;height:100%;display:block;touch-action:none; }
.stage-hud { position:absolute;left:22px;right:22px;top:20px;display:flex;justify-content:space-between;gap:18px;align-items:flex-start;pointer-events:none;z-index:4; }.hud-stat { display:flex;flex-direction:column;gap:6px; }.hud-stat>span {font-size:8px;letter-spacing:.15em;color:#9fb7cc;}.hud-stat strong {font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;}.hud-stat:last-child {text-align:right;}.phase-clock {display:flex;flex-direction:column;align-items:center;gap:5px;min-width:160px;}.phase-clock>span {font-size:9px;font-weight:750;letter-spacing:.1em;color:var(--accent);}.phase-clock strong {font-size:30px;font-variant-numeric:tabular-nums;font-weight:850;color:#e3fffd;line-height:1.15;}.clock-bar {width:135px;height:3px;background:#335065;border-radius:4px;overflow:hidden;}.clock-bar i {display:block;height:100%;background:var(--accent);width:100%;}.arena-wrap.combat .phase-clock>span {color:var(--danger);}.arena-wrap.combat .clock-bar i {background:var(--danger);}
.view-controls {position:absolute;top:103px;right:18px;display:flex;gap:7px;z-index:12;}.view-controls button {padding:8px 12px;border:1px solid #466075;border-radius:8px;background:#112539de;color:#d4e7f7;font-size:11px;backdrop-filter:blur(9px);}.health-hud {position:absolute;top:106px;left:20px;width:180px;background:#0e2132cf;padding:9px 12px;border:1px solid #34536b;border-radius:9px;z-index:4;pointer-events:none;}.health-hud>div:first-child {display:flex;justify-content:space-between;gap:8px;margin-bottom:7px;}.health-hud strong {font-size:10px;color:#d8eafb;}.health-hud span {font-size:9px;color:#9ec4d8;font-variant-numeric:tabular-nums;}.health-track {height:4px;background:#293f52;border-radius:4px;overflow:hidden;}.health-track i {display:block;background:#66e8ba;height:100%;width:100%;transition:width .12s;}.health-hud.danger .health-track i {background:#ff7765;}
.pickup-toast {position:absolute;bottom:194px;left:50%;transform:translateX(-50%);padding:11px 16px;border:1px solid #51a0a2;border-radius:11px;background:#123b42e8;color:#b1fff2;font-size:12px;font-weight:650;white-space:nowrap;z-index:6;pointer-events:none;max-width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis;}.aim-reticle {position:absolute;width:20px;height:20px;border:1px solid #ffc9a7;border-radius:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;}.aim-reticle:before,.aim-reticle:after {content:'';position:absolute;background:#ffd5ba;}.aim-reticle:before {height:1px;width:26px;top:9px;left:-4px;}.aim-reticle:after {width:1px;height:26px;left:9px;top:-4px;}
.touch-pad {position:absolute;left:17px;bottom:49px;display:grid;grid-template-columns:repeat(3,43px);grid-template-rows:repeat(2,40px);gap:4px;z-index:5;user-select:none;}.touch-pad .up {grid-column:2;}.touch-pad .left {grid-column:1;grid-row:2;}.touch-pad .down {grid-column:2;grid-row:2;}.touch-pad .right {grid-column:3;grid-row:2;}.touch-pad button {border:1px solid #50627a;background:#11253bd4;color:#b9d3e5;border-radius:8px;touch-action:none;font-size:13px;}.touch-pad button.pressed {background:#256d72;border-color:#6fe2db;color:#d7fffb;}.fire-button {position:absolute;right:19px;bottom:55px;width:76px;height:65px;border-radius:14px;border:1px solid #e8956a;background:#783822ce;color:#ffdbbd;font-size:12px;font-weight:850;letter-spacing:.13em;z-index:5;touch-action:none;user-select:none;}.fire-button.pressed {background:#b66132;}.arena-footer {position:absolute;left:20px;right:20px;bottom:15px;display:flex;justify-content:space-between;gap:12px;z-index:4;font-size:10px;color:#a4bed3;pointer-events:none;}.arena-footer span:last-child {color:#87f3df;font-weight:750;text-align:right;}
.game-overlay {position:absolute;inset:0;display:grid;place-items:center;z-index:10;background:radial-gradient(ellipse at 50% 50%,#0c1d33ed,#071728aa 80%);backdrop-filter:blur(6px);padding:26px;}.overlay-card {width:100%;max-width:525px;padding:35px 32px;border:1px solid #496878;border-radius:22px;background:linear-gradient(135deg,#1a3145f5,#192634f5);box-shadow:0 25px 90px #0006;text-align:center;}.overlay-card h2 {font-size:clamp(25px,3vw,37px);line-height:1.35;letter-spacing:-.055em;font-weight:800;margin:18px 0;}.overlay-card h2 span {color:var(--accent);}.overlay-card p {font-size:13px;line-height:1.9;color:#b2c9dc;}.overlay-card .eyebrow {font-size:10px;color:var(--accent);letter-spacing:.14em;}.stage-flow {display:flex;justify-content:center;gap:12px;margin:25px 0;font-size:10px;color:#b0c4d4;}.stage-flow span {padding:8px;border:1px solid #3e556b;border-radius:7px;background:#142b3f;}.stage-flow b {color:#6ceadb;margin-right:4px;}.primary-button {min-width:210px;background:var(--accent);color:#083e3c;border:1px solid var(--accent);padding:14px 23px;border-radius:10px;font-size:13px;font-weight:750;}.primary-button:hover {background:#9cfff0;}#overlay-hint {font-size:10px;color:#8faec5;margin:18px 0 0;}
.side-panel {display:flex;flex-direction:column;gap:15px;}.panel {border:1px solid var(--line);border-radius:15px;padding:20px;background:#0f2030e8;}.panel h2 {font-size:15px;letter-spacing:-.04em;margin:0 0 13px;}.panel-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px;}.panel-heading h2 {margin:0;}.panel-heading>span {font-size:8px;color:#839fb8;letter-spacing:.07em;}.hero-list {display:grid;grid-template-columns:1fr 1fr;gap:8px;}.hero-button {padding:12px 9px;text-align:left;background:#142738;color:#d2e7f7;border:1px solid #344d64;border-radius:9px;}.hero-button strong {display:block;font-size:12px;margin-bottom:5px;}.hero-button span {display:block;font-size:9px;color:#91adc5;}.hero-button[aria-pressed="true"] {border-color:var(--accent);background:#164449;}.hero-button[aria-pressed="true"] strong {color:#a1fff0;}.hero-description {font-size:11px;color:#9fb8cc;line-height:1.9;margin:15px 0 14px;}.hero-stats {display:grid;gap:10px;}.hero-stat {display:grid;grid-template-columns:52px 1fr 42px;align-items:center;gap:8px;font-size:10px;}.hero-stat span {color:#afc4d4;}.hero-stat strong {font-weight:650;text-align:right;color:#9cebdc;}.stat-track {height:4px;border-radius:4px;background:#294356;overflow:hidden;}.stat-track i {height:100%;display:block;background:var(--accent);}
.weapon-list {display:grid;gap:9px;}.weapon-slot {border:1px solid #35536a;background:#122b3d;color:#d4eafa;border-radius:10px;padding:11px;display:grid;grid-template-columns:22px 1fr;gap:5px 9px;text-align:left;}.weapon-slot b {grid-row:1/3;align-self:center;display:grid;place-items:center;height:24px;border:1px solid #4e6b81;border-radius:5px;color:#9fbbd0;font-size:10px;}.weapon-slot strong {font-size:12px;}.weapon-slot small {font-size:9px;color:#95b8cc;line-height:1.5;}.weapon-slot[aria-pressed="true"] {border-color:#f3b471;background:#3c302a;}.weapon-slot[aria-pressed="true"] strong {color:#ffcb9a;}.weapon-slot.empty {opacity:.6;}.loadout-note {font-size:10px;color:#829eb6;line-height:1.9;margin:14px 0 0;}.mission-panel {background:linear-gradient(135deg,#1b3442,#162b37);border-color:#345c68;}.mission-panel h2 {font-size:19px;line-height:1.5;margin:10px 0;}.mission-panel>p:not(.eyebrow) {font-size:11px;color:#a9c2d4;line-height:1.9;margin:0;}.nearest-pickup {margin-top:15px;padding:9px 10px;border-radius:8px;border:1px solid #3b666d;background:#153239;color:#9bf7e6;font-size:10px;}.control-panel>label {display:flex;gap:8px;align-items:center;font-size:11px;color:#b2c6d8;margin:13px 0;}.control-panel input {accent-color:var(--accent);}.control-panel p {font-size:10px;color:#8faaC2;line-height:2.4;margin:17px 0;}.control-panel kbd {font:inherit;border:1px solid #416077;background:#183649;border-radius:4px;padding:2px 4px;color:#c9e8f8;}.secondary-button {width:100%;border:1px solid #46617a;border-radius:8px;background:#21394c;color:#c2dcec;padding:11px;font-size:11px;}.page-note {color:#7695b0;font-size:11px;line-height:1.9;margin-top:21px;}
.arena-wrap.is-fullscreen {position:fixed;inset:0;height:100vh;height:100dvh;width:100vw;border:0;border-radius:0;z-index:3000;}.arena-wrap:fullscreen {width:100%;height:100%;border:0;border-radius:0;}.arena-wrap.is-fullscreen .view-controls {top:max(15px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));}.arena-wrap.is-fullscreen .stage-hud {top:65px;}.arena-wrap.is-fullscreen .health-hud {top:150px;}
@media(max-width:1080px) {.page {padding:22px;}.game-layout {grid-template-columns:minmax(0,1fr) 275px;gap:16px;}.panel {padding:16px;}.stage-hud {gap:13px;}.phase-clock {min-width:125px;}.phase-clock strong {font-size:27px;}.health-hud {width:155px;}.game-header {gap:20px;}}
@media(max-width:800px) {.game-layout {grid-template-columns:1fr;}.arena-wrap {height:78dvh;min-height:550px;max-height:850px;}.side-panel {display:grid;grid-template-columns:1fr 1fr;}.roster-panel {grid-row:1/3;}.control-panel {grid-column:1/-1;}.game-header {gap:14px;}.back-link {font-size:10px;padding:10px;}.header-badge {font-size:8px;padding:9px;}}
@media(max-width:480px) {.page {padding:14px;}.game-header {flex-wrap:wrap;gap:15px;}.back-link {margin-right:auto;}.title-copy {order:3;width:100%;}.header-badge {margin-left:0;}.side-panel {gap:11px;}.panel {padding:15px;}.roster-panel,.loadout-panel,.mission-panel {grid-column:1/-1;grid-row:auto;}.arena-wrap {min-height:520px;border-radius:14px;}.stage-hud {left:14px;right:14px;gap:10px;}.hud-stat strong {font-size:20px;}.phase-clock {min-width:118px;}.phase-clock strong {font-size:25px;}.phase-clock>span {font-size:8px;}.clock-bar {width:115px;}.health-hud {left:13px;top:111px;width:145px;padding:8px;}.view-controls {right:11px;top:112px;gap:4px;}.view-controls button {font-size:9px;padding:7px;}.overlay-card {padding:25px 19px;}.game-overlay {padding:15px;}.overlay-card h2 {font-size:27px;}.overlay-card p {font-size:11px;}.stage-flow {gap:6px;font-size:9px;}.stage-flow span {padding:7px;}.primary-button {font-size:12px;}.touch-pad {left:13px;bottom:55px;grid-template-columns:repeat(3,37px);grid-template-rows:repeat(2,36px);}.fire-button {right:13px;width:62px;height:59px;}.arena-footer {left:13px;right:13px;font-size:8px;}.pickup-toast {font-size:10px;}}
@media(max-height:540px) {.arena-wrap.is-fullscreen .stage-hud {top:51px;}.arena-wrap.is-fullscreen .phase-clock strong {font-size:22px;}.arena-wrap.is-fullscreen .health-hud {top:117px;}.arena-wrap.is-fullscreen .overlay-card {padding:18px;}.arena-wrap.is-fullscreen .overlay-card h2 {font-size:23px;margin:9px 0;}.arena-wrap.is-fullscreen .stage-flow {margin:13px 0;}.arena-wrap.is-fullscreen .game-overlay {overflow:auto;padding:13px;}}
@media(prefers-reduced-motion:reduce) {*{transition:none!important;}}

.quick-weapons {position:absolute;bottom:151px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:5;padding:5px;background:#0a1e2cd9;border:1px solid #3a5467;border-radius:10px;}
.quick-weapons button {display:flex;align-items:center;gap:7px;border:1px solid #3d5b70;border-radius:6px;padding:9px 10px;min-width:58px;background:#153149;color:#b2d9eb;font-size:10px;}.quick-weapons b {font-size:9px;color:#8dadc5;}.quick-weapons button[aria-pressed="true"] {border-color:#eaa26e;background:#643f2a;color:#ffe2b6;}