:root {
  color-scheme: dark;
  --bg: #070912;
  --panel: rgba(12, 15, 28, .92);
  --ink: #f4f7ff;
  --muted: #8b93ad;
  --cyan: #62f2ff;
  --violet: #9d72ff;
  --pink: #ff4f8b;
  --amber: #ffca62;
  --line: rgba(139, 147, 173, .22);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
#game-shell { position: fixed; inset: 0 0 auto; width: 100vw; height: var(--app-height,100vh); min-height: 100vh; min-height: 100dvh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 45%, #111632 0, var(--bg) 62%); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
#game-shell * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.panel-screen { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 45%, rgba(25,31,67,.48), rgba(7,9,18,.86) 60%); }
.panel-screen.active { display: flex; }
.panel-screen::before { content:""; position: absolute; inset: 0; pointer-events: none; opacity: .17; background-image: linear-gradient(rgba(98,242,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(98,242,255,.14) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle, #000, transparent 68%); }
.brand { position: relative; margin-bottom: clamp(22px, 3.5vh, 42px); }
.eyebrow, .modal-kicker { color: var(--cyan); font-size:12px; font-weight: 800; letter-spacing: .24em; }
h1 { margin: 10px 0 8px; font-size: clamp(47px, 9vw, 104px); line-height: .9; letter-spacing: -.08em; font-weight: 900; text-shadow: 0 0 36px rgba(98,242,255,.18); }
h1 span { color: var(--cyan); font-weight: 300; }
.brand p { margin: 0; color: var(--muted); font-size: clamp(14px, 2vw, 18px); letter-spacing: .03em; }
.menu-actions { position: relative; width: min(720px, 94vw); display: grid; gap: 10px; }
.stage-browser { display: grid; gap: 7px; min-width: 0; }
.stage-summary { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-height: 62px; padding: 8px 12px; border: 1px solid rgba(139,147,173,.18); border-radius: 5px; background: linear-gradient(90deg,color-mix(in srgb,var(--stage) 8%,rgba(9,13,25,.9)),rgba(9,13,25,.82)); text-align: left; }
.stage-summary > i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--stage); border-radius: 50%; color: var(--stage); font-style: normal; }
.stage-summary b,.stage-summary small { display: block; }
.stage-summary b { margin-bottom: 2px; font-size:12px; letter-spacing: .09em; }
.stage-summary small { color: var(--muted); font-size:12px; }
.stage-summary mark { display: block; margin-top: 3px; padding: 0; background: transparent; color: var(--stage); font-size:12px; font-weight: 900; letter-spacing: .08em; }
.stage-summary .mission-rule { margin-top: 3px; color: #edf5ff; font-weight: 800; letter-spacing: .04em; }
.stage-summary .sector-loadout { margin-top: 3px; color: var(--sector-rule); font-size:12px; line-height: 1.35; }
.stage-summary em { color: var(--stage); font-size:12px; font-style: normal; font-weight: 900; letter-spacing: .1em; }
.stage-select { position: relative; height: 190px; margin-bottom: 2px; overflow-x: auto; overflow-y: hidden; border: 1px solid rgba(98,242,255,.16); border-radius: 6px; background: linear-gradient(rgba(98,242,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(98,242,255,.025) 1px,transparent 1px),#080c18; background-size: 24px 24px; overscroll-behavior-x: contain; scrollbar-color: rgba(98,242,255,.35) transparent; scrollbar-width: thin; cursor: grab; touch-action: pan-x; }
.stage-select.dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.stage-select::after { content: attr(data-hint); position: sticky; left: 10px; bottom: 6px; z-index: 8; display: block; width: max-content; padding: 4px 7px; border: 1px solid rgba(98,242,255,.14); border-radius: 3px; background: rgba(5,9,18,.76); color: #59647e; font-size:12px; font-weight: 800; letter-spacing: .13em; pointer-events: none; }
.campaign-world { position: relative; width: 1800px; height: 174px; overflow: hidden; }
.campaign-sector { position: absolute; top: 0; bottom: 0; width: 450px; overflow: hidden; border-right: 1px solid rgba(139,147,173,.12); pointer-events: none; }
.campaign-sector::before { content:""; position: absolute; inset: 28px 12px 8px; opacity: .32; background: radial-gradient(ellipse at 20% 90%,color-mix(in srgb,var(--sector) 20%,transparent),transparent 44%),repeating-linear-gradient(155deg,transparent 0 18px,color-mix(in srgb,var(--sector) 7%,transparent) 19px 20px); clip-path: polygon(0 72%,8% 45%,18% 60%,27% 28%,39% 61%,50% 39%,61% 73%,75% 25%,88% 60%,100% 42%,100% 100%,0 100%); }
.campaign-sector span { position: absolute; left: 14px; top: 9px; color: color-mix(in srgb,var(--sector) 62%,#7d87a3); font-size:12px; font-weight: 900; letter-spacing: .18em; }
.campaign-sector small { position: absolute; right: 12px; top: 9px; color: #404960; font-size:12px; letter-spacing: .12em; }
.campaign-route { position: absolute; inset: 0; width: 1800px; height: 174px; overflow: visible; pointer-events: none; }
.route-underlay { fill: none; stroke: rgba(112,124,153,.18); stroke-width: 8; stroke-linecap: round; }
.route-segment { fill: none; stroke: #30394f; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 7; }
.route-segment.powered { stroke: var(--stage); stroke-width: 3; stroke-dasharray: 1; filter: drop-shadow(0 0 5px var(--stage)); animation: route-power .7s both; }
.route-segment.frontier { stroke: var(--stage); stroke-dasharray: 4 7; filter: drop-shadow(0 0 4px var(--stage)); animation: frontier-pulse 1.5s ease-in-out infinite; }
@keyframes route-power { from { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes frontier-pulse { 50% { opacity: .38; stroke-dashoffset: -18; } }
.stage-card { position: absolute; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 1px solid color-mix(in srgb,var(--stage) 50%,#59627a); border-radius: 50%; background: radial-gradient(circle,rgba(24,33,54,.98),rgba(8,12,24,.96)); color: var(--stage); box-shadow: inset 0 0 13px color-mix(in srgb,var(--stage) 8%,transparent),0 0 12px rgba(0,0,0,.34); transform: translate(-50%,-50%); letter-spacing: normal; }
.stage-card::before { content:""; position: absolute; inset: -6px; border: 1px dashed color-mix(in srgb,var(--stage) 26%,transparent); border-radius: 50%; }
.stage-card:hover { transform: translate(-50%,-50%) scale(1.08); }
.stage-card.active { border-color: #fff; background: radial-gradient(circle,color-mix(in srgb,var(--stage) 24%,#142039),#080d1b 72%); box-shadow: inset 0 0 16px color-mix(in srgb,var(--stage) 18%,transparent),0 0 19px color-mix(in srgb,var(--stage) 48%,transparent); }
.stage-card.active::before { border-style: solid; animation: node-spin 7s linear infinite; }
.stage-card.cleared::after { content:"✓"; position: absolute; right: -7px; top: -7px; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #50e3b1; border-radius: 50%; background: #08141a; color: #50e3b1; font-size:12px; }
.stage-card.boss-node { width: 58px; height: 58px; border-radius: 10px; transform: translate(-50%,-50%) rotate(45deg); }
.stage-card.boss-node > i,.stage-card.boss-node > b { transform: rotate(-45deg); }
.stage-card.boss-node::before { border-radius: 13px; }
.stage-card.boss-node:hover { transform: translate(-50%,-50%) rotate(45deg) scale(1.07); }
.stage-card.boss-node.active { transform: translate(-50%,-50%) rotate(45deg); }
.stage-card:disabled { opacity: .34; cursor: not-allowed; filter: grayscale(.7); }
.stage-card:disabled:hover { transform: translate(-50%,-50%); }
.stage-card.boss-node:disabled:hover { transform: translate(-50%,-50%) rotate(45deg); }
.stage-card > i { display: block; color: var(--stage); font-style: normal; font-size:15px; text-shadow: 0 0 8px var(--stage); }
.stage-card > b { position: absolute; top: calc(100% + 8px); left: 50%; width: 92px; overflow: hidden; color: #aeb8d1; transform: translateX(-50%); font-size:12px; line-height: 1.15; letter-spacing: .07em; text-overflow: ellipsis; white-space: nowrap; }
.stage-card.concealed > b { color: #555e75; letter-spacing: .18em; }
.stage-card > small { position: absolute; left: 50%; bottom: calc(100% + 5px); color: #56617a; transform: translateX(-50%); font-size:12px; }
@keyframes node-spin { to { transform: rotate(360deg); } }
button { min-height: 52px; padding: 0 20px; border: 1px solid var(--line); border-radius: 5px; background: rgba(18,22,40,.76); cursor: pointer; touch-action: manipulation; transition: transform .13s, background .13s, border-color .13s; font-size:14px; font-weight: 800; letter-spacing: .1em; }
button:hover { transform: translateY(-2px); background: rgba(30,36,62,.94); border-color: rgba(98,242,255,.5); }
button:active { transform: translateY(0) scale(.99); }
button.primary { color: #061014; background: linear-gradient(115deg, var(--cyan), #9df8d3); border: 0; box-shadow: 0 8px 32px rgba(98,242,255,.16); }
button.primary:hover { background: linear-gradient(115deg, #9af7ff, #bdffe5); }
#start-btn { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding-inline: 26px; font-size:16px; }
.enemy-info-btn { display: flex; align-items: center; justify-content: space-between; min-height: 40px; color: #c9d1e8; }
.enemy-info-btn em { display: grid; place-items: center; min-width: 25px; height: 21px; padding: 0 6px; border: 1px solid rgba(255,79,139,.35); border-radius: 11px; color: var(--pink); font-size:12px; font-style: normal; }
.intel-row .enemy-info-btn { justify-content: space-between; }
kbd { padding: 5px 8px; border: 1px solid rgba(6,16,20,.28); border-radius: 3px; font: 700 12px/1 system-ui; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.button-row button { display: flex; align-items: center; justify-content: center; gap: 10px; }
.button-row em { color: var(--amber); font-style: normal; font-size:12px; }
.button-row.compact button { min-height: 38px; color: var(--muted); font-size:12px; }
.pvp-armory-btn { display:flex;align-items:center;justify-content:space-between;border-color:rgba(255,109,136,.34);background:linear-gradient(110deg,rgba(50,157,255,.08),rgba(255,73,101,.09));color:#edf5ff; }
.pvp-armory-btn em { color:#ff9daf;font-size:11px;font-style:normal;letter-spacing:.08em; }
.pvp-role-btn { display:flex;align-items:center;justify-content:space-between;border-color:rgba(184,142,255,.42);background:linear-gradient(110deg,rgba(92,73,184,.15),rgba(60,226,255,.07));color:#f5eeff; }
.pvp-role-btn em { color:#cfb4ff;font-size:11px;font-style:normal;letter-spacing:.06em;text-align:right; }
.pvp-role-card { width:min(1080px,94vw);max-height:90vh;overflow-y:auto;overscroll-behavior:contain; }
.pvp-role-balance { color:#aebbd1;letter-spacing:.08em; }
.pvp-role-balance b { color:#ffca62;margin-left:8px; }
.pvp-role-rule { color:#aebbd1;line-height:1.6; }
.pvp-role-tabs { display:grid;grid-template-columns:repeat(7,minmax(100px,1fr));gap:8px;margin:18px 0;position:sticky;top:-1px;z-index:3;padding:8px;background:rgba(5,9,18,.94);backdrop-filter:blur(12px); }
.pvp-role-tabs button { min-height:58px;border-color:color-mix(in srgb,var(--role-color) 45%,transparent);background:rgba(11,17,30,.9);color:#dbe5f5; }
.pvp-role-tabs button b,.pvp-role-tabs button small { display:block; }
.pvp-role-tabs button small { color:#8291aa;margin-top:4px; }
.pvp-role-tabs button.active { color:#fff;border-color:var(--role-color);box-shadow:inset 0 -3px 0 var(--role-color),0 0 18px color-mix(in srgb,var(--role-color) 25%,transparent); }
.pvp-role-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.pvp-role-entry { display:grid;grid-template-columns:104px 1fr;gap:14px;padding:16px;border:1px solid color-mix(in srgb,var(--role-color) 34%,rgba(255,255,255,.08));background:linear-gradient(135deg,color-mix(in srgb,var(--role-color) 7%,rgba(8,13,24,.96)),rgba(7,11,21,.94));position:relative;overflow:hidden; }
.pvp-role-entry.selected { border-color:var(--role-color);box-shadow:inset 0 0 30px color-mix(in srgb,var(--role-color) 13%,transparent); }
.pvp-role-preview { width:96px;height:96px;position:relative;display:grid;place-items:center; }
.pvp-role-preview svg { width:92px;height:92px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--role-color) 45%,transparent)); }
.pvp-role-preview span { position:absolute;font-size:24px;color:#fff;text-shadow:0 0 12px var(--role-color); }
.pvp-role-copy h3 { margin:0 0 8px;font-size:16px;color:#eef5ff; }
.pvp-role-copy mark { margin-left:7px;padding:2px 6px;background:color-mix(in srgb,var(--role-color) 18%,transparent);color:var(--role-color);font-size:10px; }
.pvp-role-copy p { margin:0 0 8px;color:#afbdd0;line-height:1.55; }
.pvp-role-copy strong,.pvp-role-copy small { display:block;color:var(--role-color);line-height:1.55; }
.pvp-role-copy small { color:#8796ac;margin-top:4px; }
.pvp-role-passive { margin:9px 0;padding:7px 9px;border:1px solid color-mix(in srgb,var(--role-color) 32%,transparent);background:color-mix(in srgb,var(--role-color) 8%,rgba(5,10,19,.85));color:#dcecff!important;font-size:11px; }
.pvp-role-ability-list { display:grid;gap:6px;margin:9px 0;padding:8px;border-left:2px solid color-mix(in srgb,var(--role-color) 55%,transparent);background:color-mix(in srgb,var(--role-color) 5%,transparent); }
.pvp-role-ability-list strong { font-size:12px; }
.pvp-role-ability-list strong i { color:var(--role-color);font-style:normal; }
.pvp-role-ability-list strong small { margin-top:1px;color:#a9b7cb;font-size:11px;font-weight:700; }
.pvp-role-actions { grid-column:1/-1;display:flex;justify-content:flex-end; }
.pvp-role-actions button { min-width:160px;border-color:var(--role-color); }
.training-selected-role { display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:14px;padding:12px;border:1px solid color-mix(in srgb,var(--role-color) 40%,transparent);background:color-mix(in srgb,var(--role-color) 7%,rgba(4,9,18,.92)); }
.training-selected-role svg { width:64px;height:64px; }
.training-selected-role b,.training-selected-role small { display:block; }
.training-selected-role b { color:#f5fbff;font-size:16px; }
.training-selected-role small { color:#9dacbf;margin-top:5px;line-height:1.4; }
.training-selected-role button { border-color:var(--role-color); }
@media (max-width:900px){
  .pvp-role-tabs { grid-template-columns:repeat(4,minmax(80px,1fr)); }
  .pvp-role-grid { grid-template-columns:1fr; }
}
@media (max-width:600px){
  .pvp-role-tabs { grid-template-columns:repeat(2,minmax(90px,1fr)); }
  .pvp-role-entry { grid-template-columns:78px 1fr;padding:12px; }
  .pvp-role-preview { width:70px;height:70px; }
  .pvp-role-preview svg { width:68px;height:68px; }
  .training-selected-role { grid-template-columns:56px 1fr; }
  .training-selected-role button { grid-column:1/-1; }
}
.pvp-online-btn { position:relative;display:flex;align-items:center;justify-content:space-between;overflow:hidden;border-color:rgba(255,82,109,.58);background:linear-gradient(110deg,rgba(35,132,255,.2),rgba(255,59,91,.2));color:#f7fbff;box-shadow:inset 0 0 22px rgba(99,139,255,.06),0 0 18px rgba(255,73,101,.06); }
.pvp-online-btn::before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.075),transparent);transform:translateX(-100%);animation:pvp-entry-scan 3.2s ease-in-out infinite; }
.pvp-online-btn span,.pvp-online-btn em { position:relative;z-index:1; }
.pvp-online-btn span { color:#fff;font-weight:900; }
.pvp-online-btn em { color:#ff9caf;font-size:11px;font-style:normal;letter-spacing:.08em; }
.pvp-online-btn:hover { border-color:#ff6b83;background:linear-gradient(110deg,rgba(42,145,255,.27),rgba(255,67,99,.28)); }
.ai-battle-btn { display:flex;align-items:center;justify-content:space-between;border-color:rgba(255,178,84,.48);background:linear-gradient(110deg,rgba(255,178,84,.12),rgba(255,76,112,.09));color:#fff1d2; }
.ai-battle-btn span { font-weight:950;letter-spacing:.04em; }
.ai-battle-btn em { color:#ffbc73;font-size:10px;font-style:normal;letter-spacing:.08em; }
.ai-battle-btn:hover { border-color:#ffc06b;background:linear-gradient(110deg,rgba(255,178,84,.19),rgba(255,76,112,.14)); }
@keyframes pvp-entry-scan { 0%,56% { transform:translateX(-100%); } 82%,100% { transform:translateX(100%); } }
.pvp-watch-panel { margin:12px 0;padding:12px;border:1px solid rgba(255,91,116,.28);border-radius:5px;background:linear-gradient(110deg,rgba(50,157,255,.065),rgba(255,73,101,.07));text-align:left; }
.pvp-watch-head { display:flex;align-items:center;justify-content:space-between;gap:12px;color:#f4f8ff;font-size:12px;font-weight:900;letter-spacing:.1em; }
.pvp-watch-head em { min-width:30px;padding:3px 8px;border:1px solid rgba(255,91,116,.38);border-radius:12px;color:#ff9caf;font-style:normal;text-align:center; }
.pvp-watch-panel>p { margin:7px 0 9px;color:#7f8ca5;font-size:11px;line-height:1.45; }
.pvp-watch-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
.pvp-watch-entry { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:7px 10px;border-color:rgba(98,242,255,.22);color:#dfeeff;text-align:left; }
.pvp-watch-entry span,.pvp-watch-entry small { display:block; }
.pvp-watch-entry span { min-width:0;overflow:hidden;font-size:12px; }
.pvp-watch-entry b,.pvp-watch-entry small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.pvp-watch-entry small { margin-top:3px;color:#6f7b94;font-size:10px;letter-spacing:.04em; }
.pvp-watch-entry em { flex:0 0 auto;color:#7ff3c3;font-size:10px;font-style:normal;letter-spacing:.08em; }
.pvp-watch-empty { grid-column:1/-1;margin:0;padding:10px;border:1px dashed rgba(139,147,173,.17);color:#69758c;font-size:11px;text-align:center; }
footer { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); color: #646c85; font-size:12px; letter-spacing: .16em; }
footer b { color: #aeb5ca; } footer i { margin: 0 10px; font-style: normal; }
.hidden { display: none !important; }

#hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: max(15px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(15px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
#hud.story-cinematic-hidden { opacity:0; transition:opacity .32s ease; }
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 18px; }
.hud-block { width: min(260px, 28vw); color: var(--muted); font-size:12px; font-weight: 800; letter-spacing: .12em; }
.hud-block b { display: block; margin-top: 4px; color: var(--ink); font-size:15px; }
.gear-status { display: block; min-height: 10px; margin-top: 3px; color: var(--amber); font-size:12px; letter-spacing: .06em; }
.score-block { justify-self: end; text-align: right; }
.score-block > b { margin: -2px 0 0; font-size:26px; letter-spacing: -.04em; }
.score-block small { color: var(--muted); } .score-block i { color: var(--amber); font-style: normal; }
.meter { height: 5px; margin-top: 6px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.1); }
.meter i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--pink), #ff8f8f); box-shadow: 0 0 12px var(--pink); transform-origin: left; }
.timer-wrap { text-align: center; }
.timer-wrap small { display: block; color: var(--muted); font-size:12px; font-weight: 800; letter-spacing: .14em; }
.timer-wrap b { font-size:26px; letter-spacing: .05em; }
.xp-row { display: flex; align-items: center; gap: 10px; width: min(560px, 60vw); margin: 10px auto; color: var(--cyan); font-size:12px; font-weight: 900; }
.xp-meter { flex: 1; margin: 0; }
.xp-meter i { background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px var(--cyan); }
.heat-wrap { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); width: min(300px, 35vw); transform: translateX(-50%); transition: width .28s ease; }
.heat-wrap.has-cryo { width: min(420px,49vw); }
.heat-label { display: flex; justify-content: space-between; color: var(--muted); font-size:12px; font-weight: 800; letter-spacing: .12em; }
.heat-label b { color: var(--cyan); }
.heat-meter { position: relative; height: 7px; overflow: hidden; }
.heat-meter i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg,#39a9ff,var(--cyan)); box-shadow: 0 0 12px var(--cyan); transition: width .12s linear; }
#heat-reserve-fill { display: none; width: 0; background: linear-gradient(90deg,#ffca62,#ff9f43); box-shadow: 0 0 13px var(--amber); }
.heat-wrap.has-cryo #heat-reserve-fill { display: block; }
.icon-btn { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: none; width: 42px; min-height: 42px; padding: 0; pointer-events: auto; }
#overclock-btn { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: none; width: 74px; height: 74px; min-height: 0; padding: 0; border: 1px solid rgba(98,242,255,.45); border-radius: 50%; background: rgba(10,18,31,.76); pointer-events: auto; touch-action: none; box-shadow: inset 0 0 25px rgba(98,242,255,.08), 0 0 20px rgba(98,242,255,.1); }
#overclock-btn span { display: block; color: var(--muted); font-size:12px; letter-spacing: .13em; }
#overclock-btn b { color: var(--cyan); font-size:26px; }
#overclock-btn.active { background: rgba(45,29,53,.9); border-color: var(--pink); box-shadow: 0 0 24px rgba(255,79,139,.34); }
#use-gear-btn { position: absolute; left: max(22px,env(safe-area-inset-left)); bottom: max(22px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 2px 8px; width: 116px; min-height: 54px; padding: 8px 11px; border-color: rgba(255,202,98,.42); background: rgba(18,17,31,.86); pointer-events: auto; color: var(--amber); text-align: left; box-shadow: inset 0 0 22px rgba(255,202,98,.05),0 0 18px rgba(255,202,98,.08); }
#use-gear-btn span { grid-column: 1; color: #aeb5ca; font-size:12px; letter-spacing: .1em; }
#use-gear-btn b { grid-column: 2; grid-row: 1/3; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(255,202,98,.42); border-radius: 4px; font-size:12px; }
#use-gear-btn em { grid-column: 1; color: var(--amber); font-size:12px; font-style: normal; }
#use-gear-btn:disabled { opacity: .42; cursor: default; transform: none; }
#use-gear-btn.spent { border-color: rgba(139,147,173,.18); color: #707993; box-shadow: none; }
.npc-interact-btn { position:absolute;left:50%;bottom:max(72px,calc(env(safe-area-inset-bottom) + 72px));z-index:9;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;width:170px;min-height:48px;padding:8px 12px;border-color:rgba(98,242,255,.55);background:linear-gradient(90deg,rgba(16,38,52,.94),rgba(14,18,37,.94));color:#dffcff;pointer-events:auto;transform:translateX(-50%);box-shadow:0 0 24px rgba(98,242,255,.18),inset 0 0 20px rgba(98,242,255,.06);animation:npc-interact-pulse 1.2s ease-in-out infinite; }
.npc-interact-btn b { color:var(--npc-color,#62f2ff);font-size:20px;text-shadow:0 0 12px var(--npc-color,#62f2ff); }
.npc-interact-btn span { font-size:13px;font-weight:900;letter-spacing:.08em; }
.npc-interact-btn kbd { border-color:rgba(98,242,255,.28);background:rgba(3,8,17,.62); }
@keyframes npc-interact-pulse { 50% { border-color:#d9fdff;box-shadow:0 0 34px rgba(98,242,255,.3),inset 0 0 25px rgba(98,242,255,.1); } }
.deck-lift-btn { position:absolute;left:50%;bottom:max(72px,calc(env(safe-area-inset-bottom) + 72px));z-index:9;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;width:190px;min-height:50px;padding:8px 12px;border-color:rgba(118,255,186,.62);background:linear-gradient(90deg,rgba(11,44,39,.95),rgba(8,20,31,.95));color:#e9fff7;pointer-events:auto;transform:translateX(-50%);box-shadow:0 0 25px rgba(98,230,166,.2),inset 0 0 20px rgba(98,230,166,.08);animation:deck-lift-pulse 1s ease-in-out infinite; }
.deck-lift-btn b { color:#62e6a6;font-size:22px;text-shadow:0 0 14px #62e6a6; }
.deck-lift-btn span { font-size:13px;font-weight:900;letter-spacing:.08em; }
.deck-lift-btn kbd { border-color:rgba(98,230,166,.34);background:rgba(3,13,15,.7); }
@keyframes deck-lift-pulse { 50% { border-color:#e7fff5;box-shadow:0 0 36px rgba(98,230,166,.35),inset 0 0 25px rgba(98,230,166,.12); } }
.story-weapon-controls { position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:10;display:none;align-items:end;gap:9px;pointer-events:auto; }
.story-weapon-controls button { width:68px;min-height:58px;padding:7px 5px;border-color:rgba(115,210,230,.38);background:rgba(4,13,22,.88);color:#dffcff;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; }
.story-weapon-controls button b,.story-weapon-controls button span { display:block; }
.story-weapon-controls button b { color:#62f2ff;font-size:20px;line-height:1; }
.story-weapon-controls button span { margin-top:5px;font-size:11px;font-weight:900; }
.story-weapon-controls #story-fire-btn { width:82px;min-height:82px;border-radius:50%;border-color:rgba(255,95,143,.65);background:radial-gradient(circle,rgba(255,95,143,.24),rgba(20,7,18,.92) 68%); }
.story-weapon-controls #story-fire-btn b { color:#ff6b9b;font-size:25px;text-shadow:0 0 14px #ff5f8f; }
.story-weapon-controls #story-melee-btn { width:76px;min-height:76px;border-radius:18px 4px 18px 4px;border-color:rgba(98,242,255,.7);background:linear-gradient(145deg,rgba(20,67,77,.92),rgba(3,13,22,.94));box-shadow:inset 0 0 22px rgba(98,242,255,.09),0 0 18px rgba(98,242,255,.1); }
.story-weapon-controls #story-melee-btn b { color:#dfffff;font-size:27px;text-shadow:0 0 14px #62f2ff;transform:rotate(18deg); }
.story-weapon-controls #story-melee-btn.ready { border-color:#e9ffff;box-shadow:inset 0 0 26px rgba(98,242,255,.18),0 0 24px rgba(98,242,255,.24); }
.story-weapon-controls button:disabled { opacity:.32; }
#team-teleport-btn { position:absolute;left:max(150px,calc(env(safe-area-inset-left) + 150px));bottom:max(22px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 9px;width:132px;min-height:54px;padding:8px 11px;border-color:rgba(98,230,166,.42);background:rgba(10,25,27,.86);pointer-events:auto;color:#62e6a6;text-align:left; }
#team-teleport-btn span { font-size:12px;line-height:1.2;letter-spacing:.05em; }
#team-teleport-btn b { grid-column:2;grid-row:1/3;display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(98,230,166,.42);border-radius:4px; }
#team-teleport-btn em { color:#a9f4d0;font-size:12px;font-style:normal; }
#team-teleport-btn:disabled { opacity:.45; }
.team-warning { position:absolute;left:50%;top:145px;z-index:8;min-width:300px;padding:12px 16px;border:1px solid rgba(255,79,139,.58);background:rgba(30,5,15,.92);color:#ff9ab8;transform:translateX(-50%);text-align:center;font-size:15px;font-weight:900;line-height:1.35;letter-spacing:.05em;box-shadow:0 0 24px rgba(255,79,139,.18); }
.coop-actions { position:absolute;left:50%;bottom:max(54px,calc(env(safe-area-inset-bottom) + 54px));z-index:7;width:min(520px,calc(100vw - 330px));transform:translateX(-50%);pointer-events:auto; }
.coop-link-status { width:max-content;max-width:100%;margin:0 auto 7px;padding:6px 11px;border:1px solid rgba(98,230,166,.28);border-radius:14px;background:rgba(6,17,23,.84);color:#a9f4d0;font-size:12px;font-weight:900;letter-spacing:.06em;white-space:nowrap;box-shadow:0 0 18px rgba(98,230,166,.08); }
.coop-link-status.linked { border-color:rgba(98,242,255,.55);color:#c7fbff;box-shadow:0 0 20px rgba(98,242,255,.16); }
.coop-action-row { display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:6px; }
.coop-action-row button { min-width:0;min-height:48px;padding:6px 8px;border-color:rgba(98,242,255,.28);background:rgba(8,15,29,.88);font-size:12px;letter-spacing:.04em; }
.coop-action-row button b,.coop-action-row button span { display:block; }
.coop-action-row button b { margin-bottom:2px;color:#62f2ff;font-size:18px;line-height:1; }
.coop-action-row button span { font-size:12px;line-height:1.1; }
.coop-action-row .danger b { color:#ff708f; }
.coop-action-row .thanks b { color:#ffca62; }
.coop-support { position:relative;color:#a9f4d0; }
.coop-support kbd { position:absolute;right:5px;top:5px;padding:2px 4px;border-color:rgba(98,230,166,.3);font-size:12px; }
.coop-support em { display:block;color:#73ddad;font-size:12px;font-style:normal;line-height:1; }
.coop-support:disabled { opacity:.42; }
.coop-actions.pvp-actions .coop-support { display:none; }
.coop-actions.pvp-actions .coop-action-row { grid-template-columns:repeat(3,1fr); }
#move-joystick { position: absolute; left: max(22px,env(safe-area-inset-left)); bottom: max(22px,env(safe-area-inset-bottom)); display: none; place-items: center; width: 116px; height: 116px; border: 1px solid rgba(98,242,255,.3); border-radius: 50%; background: radial-gradient(circle,rgba(98,242,255,.1),rgba(8,13,25,.72) 68%); pointer-events: auto; touch-action: none; box-shadow: inset 0 0 30px rgba(98,242,255,.07),0 0 22px rgba(98,242,255,.09); }
#move-joystick::before { content:""; position: absolute; inset: 17px; border: 1px dashed rgba(98,242,255,.2); border-radius: 50%; background: linear-gradient(90deg,transparent calc(50% - .5px),rgba(98,242,255,.13) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),rgba(98,242,255,.13) 50%,transparent calc(50% + .5px)); pointer-events: none; }
#move-stick { position: relative; display: block; width: 48px; height: 48px; border: 1px solid rgba(98,242,255,.68); border-radius: 50%; background: radial-gradient(circle at 38% 35%,rgba(180,250,255,.35),rgba(31,67,87,.94)); box-shadow: inset 0 0 16px rgba(98,242,255,.14),0 0 16px rgba(98,242,255,.2); transform: translate3d(0,0,0); transition: transform .08s ease-out; pointer-events: none; }
#move-joystick.active { border-color: rgba(98,242,255,.58); box-shadow: inset 0 0 32px rgba(98,242,255,.11),0 0 26px rgba(98,242,255,.18); }
#move-joystick.active #move-stick { transition: none; box-shadow: inset 0 0 18px rgba(98,242,255,.24),0 0 22px rgba(98,242,255,.35); }

.tutorial-guide { position:absolute;inset:0;z-index:30;overflow:hidden;pointer-events:none; }
.tutorial-guide.block-input { pointer-events:auto; }
.tutorial-spotlight { position:absolute;z-index:1;border:2px solid #ffca62;border-radius:12px;background:rgba(255,202,98,.035);box-shadow:0 0 0 200vmax rgba(2,4,12,.82),0 0 30px rgba(255,202,98,.5),inset 0 0 22px rgba(255,202,98,.12);transition:left .28s ease,top .28s ease,width .28s ease,height .28s ease;animation:tutorial-spotlight 1.15s ease-in-out infinite; }
.tutorial-arrow { position:absolute;z-index:3;color:#ffca62;font-size:34px;line-height:1;text-shadow:0 0 16px rgba(255,202,98,.9);transform:rotate(var(--arrow-angle,0deg));transform-origin:center;animation:tutorial-arrow .72s ease-in-out infinite alternate; }
.tutorial-guide-card { position:absolute;z-index:4;width:min(390px,calc(100vw - 32px));padding:22px 24px;border:1px solid rgba(255,202,98,.56);border-radius:8px;background:linear-gradient(145deg,rgba(20,24,42,.98),rgba(8,11,21,.98));box-shadow:0 20px 70px rgba(0,0,0,.62),inset 0 0 32px rgba(255,202,98,.035);pointer-events:auto;text-align:left; }
.tutorial-guide-card small { color:#ffca62;font-size:12px;font-weight:900;letter-spacing:.2em; }
.tutorial-guide-card h2 { margin:8px 0 8px;color:#f4f7ff;font-size:25px;line-height:1.05;letter-spacing:-.025em; }
.tutorial-guide-card p { margin:0;color:#aeb7ce;font-size:12px;line-height:1.65;letter-spacing:.015em; }
.tutorial-guide-card button { width:100%;min-height:44px;margin-top:17px;font-size:12px; }
.tutorial-guide-card button.action-wait { border:1px solid rgba(255,202,98,.35);background:rgba(255,202,98,.07);color:#ffca62;cursor:default; }
.tutorial-focus { animation:tutorial-target 1s ease-in-out infinite !important; }
#game-shell.tutorial-show-overclock #overclock-btn { display:block;z-index:5; }
@keyframes tutorial-spotlight { 50% { border-color:#fff0b7;box-shadow:0 0 0 200vmax rgba(2,4,12,.82),0 0 46px rgba(255,202,98,.76),inset 0 0 28px rgba(255,202,98,.2); } }
@keyframes tutorial-arrow { to { translate:8px 0; } }
@keyframes tutorial-target { 50% { filter:brightness(1.42);box-shadow:0 0 30px rgba(255,202,98,.62); } }
@media(max-width:700px){.tutorial-guide-card{padding:18px 19px}.tutorial-guide-card h2{font-size:21px}.tutorial-guide-card p{font-size:12px}.tutorial-arrow{font-size:28px}}

.npc-dialogue { position:absolute;inset:0;z-index:36;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 42%,rgba(25,36,62,.34),rgba(2,4,11,.88) 72%);backdrop-filter:blur(5px);pointer-events:auto; }
.npc-dialogue-stage { position:relative;width:min(920px,96vw);height:min(610px,88dvh);min-height:440px;border:1px solid rgba(98,242,255,.2);border-radius:12px;background:linear-gradient(180deg,rgba(9,14,28,.9),rgba(4,7,16,.96));box-shadow:0 28px 100px rgba(0,0,0,.62),inset 0 0 80px rgba(98,242,255,.025);overflow:hidden; }
.npc-dialogue-stage::before { content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(98,242,255,.035),transparent 38%,transparent 62%,rgba(180,124,255,.035)),repeating-linear-gradient(0deg,transparent 0 47px,rgba(98,242,255,.025) 48px);pointer-events:none; }
.dialogue-portrait { position:absolute;top:54px;width:230px;text-align:center;transition:opacity .24s ease,filter .24s ease,transform .24s ease; }
.player-portrait { left:36px;--portrait:#62f2ff; }
.npc-portrait { right:36px;--portrait:#b47cff; }
.dialogue-portrait:not(.active) { opacity:.5;filter:saturate(.55);transform:scale(.94); }
.portrait-core { position:relative;width:150px;height:150px;margin:0 auto 17px;filter:drop-shadow(0 0 20px var(--portrait)); }
.portrait-core::before,.portrait-core::after { content:"";position:absolute;inset:24px;clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%);border:2px solid var(--portrait);background:color-mix(in srgb,var(--portrait) 12%,transparent);box-shadow:inset 0 0 22px color-mix(in srgb,var(--portrait) 22%,transparent); }
.portrait-core::after { inset:53px;background:var(--portrait);opacity:.7;animation:portrait-core-spin 4s linear infinite; }
.portrait-core i { position:absolute;left:50%;top:50%;width:128px;height:128px;border:1px solid color-mix(in srgb,var(--portrait) 45%,transparent);border-radius:50%;transform:translate(-50%,-50%); }
.portrait-core i:nth-child(2) { width:104px;height:104px;border-style:dashed;animation:portrait-ring 6s linear infinite reverse; }
.portrait-core i:nth-child(3) { width:68px;height:68px;border-radius:18%;transform:translate(-50%,-50%) rotate(45deg);animation:portrait-ring 3.8s linear infinite; }
.npc-portrait .portrait-core::before { clip-path:var(--npc-shape,polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%)); }
.dialogue-portrait strong { color:#edf6ff;font-size:15px;letter-spacing:.12em;text-shadow:0 0 10px var(--portrait); }
@keyframes portrait-ring { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes portrait-core-spin { to { transform:rotate(360deg); } }
.dialogue-box { position:absolute;left:290px;right:290px;min-height:120px;padding:20px 22px;border:1px solid rgba(139,147,173,.2);background:rgba(7,11,23,.92);text-align:left;transition:border-color .2s ease,opacity .2s ease,transform .2s ease; }
.npc-box { top:66px;border-left:3px solid var(--npc-color,#b47cff); }
.player-box { bottom:88px;border-left:3px solid #62f2ff; }
.dialogue-box:not(.active) { opacity:.34;transform:scale(.985); }
.dialogue-box small { display:block;margin-bottom:10px;color:#8390aa;font-size:11px;font-weight:900;letter-spacing:.16em; }
.dialogue-box.active small { color:#e8f8ff; }
.dialogue-box p { margin:0;color:#dce6f7;font-size:16px;font-weight:650;line-height:1.7;letter-spacing:.02em; }
#dialogue-next { position:absolute;right:290px;bottom:25px;width:145px;min-height:42px;font-size:12px; }
#dialogue-progress { position:absolute;left:290px;bottom:38px;color:#73809a;font-size:11px;font-style:normal;font-weight:900;letter-spacing:.12em; }
@media(max-width:760px){
  .npc-dialogue-stage { height:min(720px,94dvh); }
  .dialogue-portrait { top:28px;width:130px; }
  .player-portrait { left:16px; }
  .npc-portrait { right:16px; }
  .portrait-core { width:92px;height:92px;margin-bottom:8px; }
  .portrait-core::before { inset:14px; }
  .portrait-core::after { inset:34px; }
  .portrait-core i { width:82px;height:82px; }
  .portrait-core i:nth-child(2) { width:64px;height:64px; }
  .portrait-core i:nth-child(3) { width:42px;height:42px; }
  .dialogue-portrait strong { font-size:11px; }
  .dialogue-box { left:20px;right:20px;min-height:116px;padding:16px 17px; }
  .npc-box { top:154px; }
  .player-box { bottom:88px; }
  .dialogue-box p { font-size:14px;line-height:1.55; }
  #dialogue-next { right:20px;bottom:24px;width:128px; }
  #dialogue-progress { left:20px;bottom:36px; }
  .npc-interact-btn { bottom:max(145px,calc(env(safe-area-inset-bottom) + 145px));width:150px; }
  .deck-lift-btn { bottom:max(145px,calc(env(safe-area-inset-bottom) + 145px));width:168px; }
}

.modal { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: rgba(3,5,12,.74); backdrop-filter: blur(10px); }
.modal-card { position: relative; width: min(430px, 94vw); max-height: 92dvh; overflow: auto; padding: 34px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(155deg, rgba(20,25,46,.98), rgba(9,12,23,.98)); box-shadow: 0 24px 80px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.03); text-align: center; }
.modal-card.wide { width: min(910px, 96vw); }
.modal-card h2 { margin: 8px 0 26px; font-size: clamp(24px, 5vw, 40px); letter-spacing: -.04em; }
.modal-card > button:not(.close-btn) { width: 100%; margin-top: 9px; }
.story-pack-card { text-align:left; }
.story-pack-card h2 { margin-bottom:14px; }
.story-archive-open { width:100%;margin:0 0 12px;border-color:rgba(98,242,255,.36);background:linear-gradient(90deg,rgba(98,242,255,.09),rgba(180,124,255,.07));color:#dffcff; }
.story-pack-wallet { display:flex;flex-wrap:wrap;gap:9px;margin:0 0 12px; }
.story-pack-wallet span { padding:9px 12px;border:1px solid rgba(98,242,255,.18);border-radius:5px;background:rgba(5,10,20,.65);color:#b9c4d8;font-size:13px;font-weight:850; }
.story-pack-wallet b { color:#ffca62;font-size:16px; }
.story-pack-grid,.story-upgrade-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.story-item,.story-upgrade { min-height:116px;padding:13px;border:1px solid rgba(98,242,255,.17);border-radius:6px;background:rgba(7,12,24,.8); }
.story-item header,.story-upgrade header { display:flex;align-items:center;gap:9px;margin-bottom:8px; }
.story-item header b,.story-upgrade header b { display:grid;place-items:center;width:32px;height:32px;border:1px solid currentColor;border-radius:50%;color:#62f2ff;font-size:17px; }
.story-item h3,.story-upgrade h3 { margin:0;font-size:13px; }
.story-item p,.story-upgrade p { margin:5px 0;color:#8f9ab2;font-size:11px;line-height:1.45; }
.story-item button,.story-upgrade button { width:100%;min-height:35px;padding:6px 9px;margin-top:7px;font-size:11px; }
.story-item.quest { border-color:rgba(255,202,98,.28); }
.story-item.quest header b { color:#ffca62; }
.story-station-panel { margin-top:18px;padding-top:16px;border-top:1px solid rgba(98,242,255,.18); }
.story-station-panel > div:first-child { display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px; }
.story-station-panel small { color:#62f2ff;font-weight:900;letter-spacing:.12em; }
.story-station-panel h3 { margin:0;font-size:16px; }
@media(max-width:720px){.story-pack-grid,.story-upgrade-grid{grid-template-columns:1fr 1fr}.story-pack-card{padding:22px 16px}.story-item,.story-upgrade{min-height:104px}}
@media(max-width:430px){.story-pack-grid,.story-upgrade-grid{grid-template-columns:1fr}}
.danger { color: #ff8bac; }
.close-btn { position: absolute; top: 12px; right: 12px; width: 38px !important; min-height: 38px; padding: 0; color: var(--muted); font-size:24px; }
.upgrade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.upgrade-card { min-height: 226px; padding: 22px 18px; text-align: left; }
.upgrade-card .icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 30px; border: 1px solid currentColor; border-radius: 50%; color: var(--cyan); font-size:24px; box-shadow: 0 0 20px rgba(98,242,255,.08); }
.upgrade-card h3 { margin: 0 0 7px; font-size:16px; letter-spacing: .04em; }
.upgrade-card p { margin: 0; color: var(--muted); font-size:12px; font-weight: 500; line-height: 1.5; letter-spacing: normal; }
.upgrade-card small { position: absolute; right: 15px; top: 15px; color: #6f7891; font-size:12px; }
.spark-wallet { display: inline-flex; gap: 10px; align-items: center; margin: -12px 0 18px; padding: 8px 13px; border: 1px solid rgba(255,202,98,.2); border-radius: 20px; background: rgba(255,202,98,.05); color: var(--muted); font-size:12px; font-weight: 800; letter-spacing: .14em; }
.spark-wallet b { color: var(--amber); font-size:14px; }
.skill-tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.skill-branch { position: relative; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 7px; background: rgba(8,12,24,.64); overflow: visible; }
.branch-title { position: relative; display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: var(--branch); font-size:12px; font-weight: 900; letter-spacing: .16em; }
.branch-title i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
button.skill-node { position: relative; display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; width: 100%; min-height: 68px; margin-top: 8px; padding: 10px; border-color: rgba(139,147,173,.2); background: rgba(15,19,35,.96); text-align: left; letter-spacing: normal; }
.skill-node .node-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--branch); border-radius: 50%; color: var(--branch); font-size:17px; background: #0c1020; z-index: 1; }
.skill-node h3 { margin: 0 0 3px; font-size:12px; letter-spacing: .05em; }
.skill-node p { margin: 0; color: var(--muted); font-size:12px; font-weight: 500; line-height: 1.35; }
.skill-node p strong { display:block; margin-top:5px; color:#ffca62; font-size:11px; letter-spacing:.05em; }
.skill-node.campaign-locked { opacity:.48; filter:saturate(.35); border-style:dashed; }
.skill-node.campaign-locked .rank { color:#ffca62; }
.skill-node .rank { align-self: start; color: #687089; font-size:12px; font-weight: 900; }
.skill-node.available { border-color: var(--branch); box-shadow: inset 0 0 18px rgba(98,242,255,.05); }
.skill-node.maxed { border-color: rgba(98,242,255,.38); }
.skill-node.locked { opacity: .38; filter: grayscale(.7); }
.skill-node:disabled { cursor: not-allowed; }
.skill-node:disabled:hover { transform: none; background: rgba(15,19,35,.96); }
.systems-card { width: calc(100vw - 24px); height: calc(100vh - 24px); height: calc(100dvh - 24px); max-height: none; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; padding: 0; background: #080b16; text-align: left; }
.systems-card .close-btn { z-index: 8; top: 10px; right: 10px; background: rgba(11,15,29,.86); }
.systems-head { position: relative; z-index: 5; min-height: 92px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 22px; padding: 14px 66px 12px 22px; border-bottom: 1px solid var(--line); background: rgba(11,14,27,.94); box-shadow: 0 10px 35px rgba(0,0,0,.25); }
.systems-head h2 { margin: 2px 0 0; font-size:28px; }
.systems-head .wallet { margin: 0; border: 1px solid rgba(255,202,98,.16); border-radius: 5px; }
.systems-head .tree-note { margin: 0; text-align: right; }
.meta-viewport { position: relative; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; background-color: #060913; background-image: radial-gradient(circle at 50% 50%, rgba(157,114,255,.08), transparent 38%), radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 1.5px); background-size: 100% 100%, 42px 42px; }
.meta-viewport.dragging { cursor: grabbing; }
.meta-viewport::after { content:""; position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 100px #03050b; }
.meta-viewport.dragging::after { box-shadow:none; }
.talent-world { position: absolute; left: 0; top: 0; width: 10800px; height: 10800px; contain:layout style; transform-origin: 0 0; will-change: transform; backface-visibility:hidden; background-color: #060913; background-image: radial-gradient(circle at 50% 50%, rgba(157,114,255,.12) 0 2%, transparent 7%), linear-gradient(rgba(98,242,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(98,242,255,.025) 1px, transparent 1px), repeating-radial-gradient(circle at 50% 50%, transparent 0 159px, rgba(139,147,173,.025) 160px, transparent 161px); background-size: 100% 100%, 80px 80px, 80px 80px, 100% 100%; }
.talent-world.camera-anim { transition: transform .72s cubic-bezier(.22,.82,.21,1); }
.meta-viewport.dragging .talent-world { transition:none!important; }
.meta-viewport.dragging .circuit-trace,.meta-viewport.dragging .circuit-via { filter:none; }
.meta-viewport.dragging .matrix-root,.meta-viewport.dragging .talent-node button.skill-node { box-shadow:none; }
html.mobile-performance .talent-world { background-image:linear-gradient(rgba(98,242,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(98,242,255,.018) 1px,transparent 1px);background-size:120px 120px; }
html.mobile-performance .circuit-trace,html.mobile-performance .circuit-via { filter:none; }
html.mobile-performance .talent-node button.skill-node { box-shadow:0 0 0 4px rgba(5,8,17,.9),0 0 13px rgba(0,0,0,.34); }
html.reduced-effects .panel-screen::before { display:none; }
html.reduced-effects .pvp-online-btn::before { display:none; }
.talent-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.talent-links path { fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.circuit-underlay { stroke: var(--branch); stroke-width: 9; opacity: .055; }
.circuit-trace { stroke: var(--branch); stroke-width: 2.2; opacity: .68; filter: drop-shadow(0 0 7px var(--branch)); }
.circuit-trace.newly-powered { stroke-width: 3.2; opacity: 1; }
.circuit-trace.trace-grow,.circuit-underlay.underlay-grow { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lineGrow var(--grow) var(--delay) linear forwards; }
.circuit-via { fill: #080c18; stroke: var(--branch); stroke-width: 2; opacity: .76; filter: drop-shadow(0 0 5px var(--branch)); }
.circuit-via.via-grow { opacity: 0; animation: viaPower .22s var(--via-delay) ease-out forwards; }
.world-ring { fill: none; stroke: rgba(157,114,255,.12); stroke-width: 1.5; stroke-dasharray: 3 13; }
.world-ring.outer { stroke: rgba(255,202,98,.08); stroke-dasharray: 2 18; }
.matrix-root { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 164px; height: 164px; padding: 18px; border: 1px solid rgba(205,186,255,.66); border-radius: 50%; background: radial-gradient(circle,#1b2042,#0c1020 72%); color: #e3d9ff; transform: translate(-50%,-50%); font-size:12px; font-weight: 900; letter-spacing: .12em; text-align: center; box-shadow: 0 0 0 18px rgba(157,114,255,.035),0 0 65px rgba(157,114,255,.28); }
.matrix-root i { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; color: var(--amber); font-style: normal; font-size:22px; }
.matrix-root small { color: #737c97; font-size:12px; }
.sector-label { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: grid; justify-items: center; gap: 5px; color: var(--branch); transform: translate(-50%,-50%); font-size:12px; font-weight: 900; letter-spacing: .16em; text-shadow: 0 0 14px var(--branch); }
.sector-label i { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; background: #090d1a; }
.talent-node { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 218px; transform: translate(-50%,-50%); }
.talent-node button.skill-node { min-height: 84px; margin: 0; border-color: color-mix(in srgb,var(--branch) 45%,transparent); background: rgba(10,14,28,.96); box-shadow: 0 0 0 5px rgba(5,8,17,.88),0 0 28px rgba(0,0,0,.5); }
.talent-node .skill-node.available { box-shadow: 0 0 0 5px rgba(5,8,17,.88),0 0 24px color-mix(in srgb,var(--branch) 24%,transparent),inset 0 0 22px color-mix(in srgb,var(--branch) 7%,transparent); }
.talent-node .skill-node.maxed { border-color: var(--branch); }
.talent-node.node-reveal { opacity: 0; animation: nodeBloom .72s var(--node-delay,.48s) cubic-bezier(.17,.84,.28,1.25) forwards; }
.unlock-flare { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 38px; height: 38px; border: 2px solid var(--branch); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; animation: unlockFlare 1.1s ease-out forwards; box-shadow: 0 0 22px var(--branch); }
.unlock-burst { position: absolute; left: var(--x); top: var(--y); z-index: 7; width: 1px; height: 1px; pointer-events: none; }
.unlock-burst i { position: absolute; width: 5px; height: 5px; border-radius: 50%; opacity: 0; background: var(--branch); box-shadow: 0 0 10px var(--branch); transform: rotate(var(--a)) translateX(0); animation: sparkBurst .9s var(--delay) cubic-bezier(.15,.65,.25,1) forwards; }
.systems-tools { position: relative; z-index: 6; min-height: 48px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; padding: 6px 12px 6px 18px; border-top: 1px solid var(--line); background: rgba(10,13,25,.96); color: #68718a; font-size:12px; font-weight: 800; letter-spacing: .12em; }
.systems-tools button { width: auto !important; min-height: 34px !important; margin: 0 !important; padding: 0 13px; font-size:12px; }
#tree-progress { color: var(--cyan); }
#tree-drag-hint::before { content:"✥"; margin-right: 8px; color: var(--violet); }
@keyframes lineGrow { to { stroke-dashoffset: 0; } }
@keyframes viaPower { 0% { opacity:0;r:1px } 70% { opacity:1;r:8px } 100% { opacity:.76;r:5px } }
@keyframes nodeBloom { 0% { opacity:0; transform:translate(-50%,-50%) scale(.3);filter:blur(8px) } 65% { opacity:1;transform:translate(-50%,-50%) scale(1.09);filter:blur(0) } 100% { opacity:1;transform:translate(-50%,-50%) scale(1) } }
@keyframes unlockFlare { 0% { opacity:1;transform:translate(-50%,-50%) scale(.4) } 100% { opacity:0;transform:translate(-50%,-50%) scale(8) } }
@keyframes sparkBurst { 0% { opacity:0;transform:rotate(var(--a)) translateX(0) scale(1.8) } 20% { opacity:1 } 100% { opacity:0;transform:rotate(var(--a)) translateX(var(--r)) scale(.2) } }
.result-score { padding: 18px; border-block: 1px solid var(--line); }
.result-stage { margin: -18px 0 16px; color: var(--cyan); font-size:12px; font-weight: 900; letter-spacing: .18em; }
.result-score span { display: block; color: var(--muted); font-size:12px; letter-spacing: .18em; }
.result-score b { display: block; font-size:48px; letter-spacing: -.04em; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 14px 0; background: var(--line); }
.result-grid div { padding: 14px; background: #0d1120; }
.result-grid span { display: block; color: var(--muted); font-size:12px; letter-spacing: .14em; }
.result-grid b { font-size:18px; }
.manual-grid { display: grid; gap: 12px; text-align: left; }
.manual-grid div { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; padding: 13px; border: 1px solid var(--line); }
.manual-grid b { color: var(--cyan); font-size:12px; }
.manual-grid p { margin: 0; color: #bec5d8; font-size:14px; line-height: 1.5; }
.enemy-info-card { width: min(980px,96vw); }
.enemy-info-card h2 { margin-bottom: 18px; }
.enemy-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; text-align: left; }
.enemy-entry { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 10px; min-height: 105px; padding: 12px; border: 1px solid rgba(139,147,173,.18); border-radius: 5px; background: rgba(8,12,24,.78); overflow: hidden; }
.enemy-entry::after { content:""; position: absolute; inset: auto 0 0; height: 1px; opacity: .7; background: var(--enemy); box-shadow: 0 0 12px var(--enemy); }
.enemy-entry > i { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--enemy); border-radius: 50%; color: var(--enemy); font-style: normal; font-size:17px; box-shadow: inset 0 0 12px color-mix(in srgb,var(--enemy) 9%,transparent); }
.enemy-entry h3 { margin: 1px 0 3px; font-size:12px; letter-spacing: .06em; }
.enemy-entry p { margin: 0; color: var(--muted); font-size:12px; line-height: 1.42; }
.enemy-entry footer { position: static; display: flex; justify-content: space-between; margin-top: 7px; color: #68718a; font-size:12px; letter-spacing: .08em; }
.enemy-entry footer b { color: var(--enemy); font-size:12px; }
.enemy-unknown { --enemy:#3f465b; min-height: 105px; opacity: .52; background: repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 6px,transparent 6px 12px),rgba(8,12,24,.78); }
.enemy-unknown > i { border-style: dashed; color: #778099; font-size:20px; box-shadow: none; }
.enemy-unknown h3 { margin-top: 8px; color: #8b93ad; letter-spacing: .18em; }
.enemy-unknown p { color: #4f576e; letter-spacing: .16em; }
.strategy-btn { display:flex;align-items:center;justify-content:space-between;border-color:rgba(255,202,98,.34);background:linear-gradient(110deg,rgba(255,202,98,.08),rgba(255,95,143,.07));color:#fff0bd; }
.strategy-btn em { color:var(--amber);font-size:12px;font-style:normal;letter-spacing:.1em; }
.strategy-card { width:min(1040px,96vw); }
.strategy-card h2 { margin-bottom:8px; }
.strategy-balance { margin:0 0 8px;color:var(--muted);font-size:12px;letter-spacing:.12em; }
.strategy-balance b { margin-left:8px;color:var(--amber);font-size:16px; }
.strategy-status { margin:0 0 12px;color:#8892ac;font-size:12px;line-height:1.5; }
.strategy-tabs { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px; }
.strategy-tabs button { min-height:40px;color:#778099;font-size:12px;letter-spacing:.1em; }
.strategy-tabs button.active { border-color:var(--amber);background:rgba(255,202,98,.1);color:#fff0bd;box-shadow:inset 0 0 18px rgba(255,202,98,.06); }
.strategy-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:9px;text-align:left; }
.strategy-entry { --strategy:#ffca62;display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:start;min-height:132px;padding:13px;border:1px solid color-mix(in srgb,var(--strategy) 28%,rgba(139,147,173,.16));border-radius:5px;background:linear-gradient(120deg,color-mix(in srgb,var(--strategy) 5%,rgba(8,12,24,.88)),rgba(8,12,24,.88)); }
.strategy-entry > i { display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--strategy);border-radius:50%;color:var(--strategy);font-size:18px;font-style:normal;box-shadow:inset 0 0 14px color-mix(in srgb,var(--strategy) 12%,transparent); }
.strategy-entry h3 { margin:1px 0 6px;font-size:13px;letter-spacing:.06em; }
.strategy-entry h3 mark { display:inline-block;margin-left:5px;padding:2px 5px;border:1px solid color-mix(in srgb,var(--strategy) 55%,transparent);border-radius:3px;background:transparent;color:var(--strategy);font-size:9px; }
.strategy-entry p { margin:0 0 7px;color:#aeb6cb;font-size:12px;line-height:1.5; }
.strategy-entry p b { display:block;margin-bottom:2px;color:var(--strategy);font-size:10px;letter-spacing:.1em; }
.strategy-entry small { display:block;color:#707993;font-size:11px;line-height:1.42; }
.strategy-entry > button { align-self:center;min-width:102px;min-height:38px;padding:0 10px;color:var(--amber);font-size:12px; }
.strategy-entry > button:disabled { opacity:.34;cursor:not-allowed; }
.strategy-entry.owned { border-color:color-mix(in srgb,var(--strategy) 52%,transparent); }
.strategy-owned { align-self:center;padding:6px 8px;border:1px solid color-mix(in srgb,var(--strategy) 45%,transparent);border-radius:3px;color:var(--strategy);font-size:10px;letter-spacing:.08em; }
.strategy-locked { --strategy:#3f465b;min-height:110px;opacity:.5;background:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 6px,transparent 6px 12px),rgba(8,12,24,.8); }
.strategy-locked h3 { margin-top:8px;color:#8b93ad;letter-spacing:.18em; }
.consumable-card { width: min(960px,96vw); }
.consumable-card h2 { margin-bottom: 10px; }
.pvp-armory-card { width:min(1080px,96vw);max-height:94dvh;overflow:auto; }
.pvp-armory-card h2 { margin-bottom:8px; }
.pvp-armory-balance { margin:0 0 8px;color:var(--muted);font-size:12px;letter-spacing:.1em; }
.pvp-armory-balance b { margin-left:8px;color:var(--amber);font-size:15px; }
.pvp-armory-rule { margin:0 0 12px;color:#7f8ca5;font-size:12px;line-height:1.5; }
.pvp-loadout-summary { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;padding:10px;border:1px solid rgba(98,242,255,.16);background:rgba(3,9,18,.72); }
.pvp-loadout-summary span { padding:6px 9px;border:1px solid rgba(255,255,255,.1);border-radius:3px;color:#aebbd1;font-size:11px;letter-spacing:.04em; }
.pvp-loadout-summary span.ready { border-color:rgba(98,230,166,.45);color:#9ff2c8; }
.pvp-loadout-summary span.warning { border-color:rgba(255,91,116,.44);color:#ff9caf; }
.pvp-armory-section { margin-top:13px;text-align:left; }
.pvp-armory-section>header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;color:#dceafa;font-size:12px;letter-spacing:.08em; }
.pvp-armory-section>header small { color:#69758c;font-size:10px;letter-spacing:.03em; }
.pvp-armory-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.pvp-armory-entry { --pvp-item:#62f2ff;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;min-height:118px;padding:11px;border:1px solid rgba(139,147,173,.2);border-radius:5px;background:rgba(7,12,23,.86); }
.pvp-armory-entry.equipped { border-color:var(--pvp-item);box-shadow:inset 0 0 22px color-mix(in srgb,var(--pvp-item) 9%,transparent); }
.pvp-armory-entry>i { display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--pvp-item);border-radius:8px;color:var(--pvp-item);font-size:19px;font-style:normal;box-shadow:inset 0 0 14px color-mix(in srgb,var(--pvp-item) 8%,transparent); }
.pvp-armory-entry h3 { margin:0 0 4px;color:#e6f2ff;font-size:12px;letter-spacing:.06em; }
.pvp-armory-entry h3 mark { margin-left:5px;padding:2px 5px;border:1px solid var(--pvp-item);border-radius:3px;background:transparent;color:var(--pvp-item);font-size:9px; }
.pvp-armory-entry p { margin:0;color:#8f9bb1;font-size:11px;line-height:1.45; }
.pvp-armory-entry strong { display:inline-block;margin-top:6px;padding:2px 6px;border-left:2px solid var(--pvp-item);background:color-mix(in srgb,var(--pvp-item) 7%,transparent);color:var(--pvp-item);font-size:9px;line-height:1.45;letter-spacing:.055em; }
.pvp-armory-entry small { display:block;margin-top:5px;color:#68758d;font-size:10px;line-height:1.4; }
.pvp-armory-actions { display:grid;gap:5px;min-width:106px; }
.pvp-armory-actions button { min-height:31px;padding:5px 8px;color:var(--pvp-item);font-size:10px;line-height:1.2;letter-spacing:.03em; }
.pvp-armory-actions button:disabled { opacity:.38;cursor:not-allowed; }
.gear-balance { margin: 0 0 14px; color: var(--muted); font-size:12px; letter-spacing: .12em; }
.gear-balance b { margin-left: 8px; color: var(--amber); font-size:15px; }
.gear-rule { margin: -5px 0 14px; color: #7f88a3; font-size:12px; line-height: 1.45; letter-spacing: .06em; }
.run-gear-card { width: min(900px,96vw); }
.run-gear-card h2 { margin-bottom: 12px; }
.consumable-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; text-align: left; }
.gear-entry { --gear:#62f2ff; display: grid; grid-template-columns: 45px 1fr auto; gap: 10px; align-items: center; min-height: 112px; padding: 12px; border: 1px solid rgba(139,147,173,.2); border-radius: 5px; background: rgba(8,12,24,.82); }
.gear-entry.equipped { border-color: var(--gear); box-shadow: inset 0 0 24px color-mix(in srgb,var(--gear) 8%,transparent),0 0 14px color-mix(in srgb,var(--gear) 10%,transparent); }
.gear-entry > i { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--gear); border-radius: 50%; color: var(--gear); font-style: normal; font-size:19px; }
.gear-entry h3 { margin: 0 0 4px; font-size:12px; letter-spacing: .06em; }
.gear-entry h3 mark { display:inline-block; margin-left:5px; padding:2px 5px; border:1px solid var(--gear); border-radius:3px; background:color-mix(in srgb,var(--gear) 10%,transparent); color:var(--gear); font-size:9px; }
.gear-entry.gear-locked { opacity:.58; }
.gear-entry p { margin: 0; color: var(--muted); font-size:12px; line-height: 1.4; }
.gear-entry small { display: block; margin-top: 6px; color: #707993; font-size:12px; }
.gear-actions { display: grid; gap: 5px; min-width: 84px; }
.gear-actions button { min-height: 30px; padding: 0 8px; color: var(--gear); font-size:12px; letter-spacing: .06em; }
.gear-actions button:disabled { opacity: .4; cursor: default; transform: none; }
.run-gear-card .gear-entry { min-height: 94px; }
.run-gear-card .gear-actions button { min-width: 92px; color: #081016; background: linear-gradient(115deg,var(--gear),#d8ffe9); border: 0; }
.wallet { padding: 12px; background: rgba(255,202,98,.06); color: var(--muted); font-size:12px; letter-spacing: .14em; }
.wallet b { margin-left: 8px; color: var(--amber); font-size:16px; }
.tree-note { margin: -4px 0 14px; color: var(--muted); font-size:12px; }
.meta-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-top: 9px; padding: 14px; border: 1px solid var(--line); text-align: left; }
.meta-row h3 { margin: 0 0 4px; font-size:14px; }
.meta-row p { margin: 0; color: var(--muted); font-size:12px; line-height: 1.4; }
.meta-row button { min-width: 108px; min-height: 42px; padding: 0 12px; color: var(--amber); font-size:12px; }
.meta-row button:disabled { opacity: .38; cursor: not-allowed; }
.text-btn { min-height: 32px !important; border: 0; background: transparent; color: #646c85; font-size:12px; }
.online-btn { display:flex;align-items:center;justify-content:space-between;border-color:rgba(98,242,255,.34);background:linear-gradient(110deg,rgba(98,242,255,.08),rgba(157,114,255,.08));color:#c8fbff; }
.online-btn em { padding:5px 8px;border:1px solid rgba(139,147,173,.24);border-radius:12px;color:#727c96;font-size:12px;font-style:normal;letter-spacing:.1em; }
.online-btn.connected { border-color:#62e6a6;box-shadow:inset 0 0 22px rgba(98,230,166,.06),0 0 16px rgba(98,230,166,.08); }
.online-btn.connected em { border-color:rgba(98,230,166,.45);color:#62e6a6; }
.ranking-btn { display:flex;align-items:center;justify-content:space-between;min-height:40px;border-color:rgba(255,202,98,.3);background:linear-gradient(110deg,rgba(255,202,98,.07),rgba(157,114,255,.07));color:#ffe7a6; }
.ranking-btn em { color:#9da7c1;font-size:12px;font-style:normal;letter-spacing:.08em; }
.profile-card { width:min(480px,94vw);border-color:rgba(98,242,255,.42);box-shadow:0 24px 100px rgba(0,0,0,.72),0 0 50px rgba(98,242,255,.08); }
#profile-modal { z-index:50;background:rgba(2,4,10,.9); }
.profile-note { margin:-12px auto 20px;color:var(--muted);font-size:12px;line-height:1.6; }
#profile-form { display:grid;gap:10px; }
.recovery-login { display:grid;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(98,242,255,.16);color:#8d99b2;font-size:12px;line-height:1.45; }
.recovery-login>div,.recovery-tool { display:grid;grid-template-columns:1fr auto;gap:7px; }
.recovery-login input,.recovery-tool input { min-width:0;height:46px;padding:0 11px;border:1px solid var(--line);border-radius:4px;outline:0;background:#080c18;color:#eaffff;font:800 14px/1 system-ui; }
.recovery-login input:focus,.recovery-tool input:focus { border-color:var(--cyan); }
.recovery-login button,.recovery-tool button { min-height:46px;padding:8px 12px;font-size:12px;white-space:nowrap; }
.recovery-status { color:#71809d;line-height:1.45; }
#profile-name,#admin-key { width:100%;height:52px;padding:0 15px;border:1px solid var(--line);border-radius:4px;outline:0;background:#080c18;color:#eaffff;text-align:center;font:900 18px/1 system-ui;letter-spacing:.06em; }
#profile-name:focus,#admin-key:focus { border-color:var(--cyan);box-shadow:0 0 18px rgba(98,242,255,.12); }
.profile-error { min-height:18px;margin:13px 0 0;color:#7f89a4;font-size:12px;line-height:1.45; }
.profile-error.error { color:#ff7fa8; }
.profile-error.ready { color:#62e6a6; }
.leaderboard-card { width:min(980px,96vw)!important;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable; }
.leaderboard-card h2 { margin-bottom:10px; }
.my-ranking { margin:0 0 14px;color:var(--amber);font-size:12px;font-weight:900;letter-spacing:.1em; }
.profile-tools { display:grid;gap:8px;margin:0 0 13px;padding:11px;border:1px solid rgba(98,242,255,.18);border-radius:5px;background:rgba(5,10,20,.55); }
.profile-tool-head { display:flex;align-items:center;justify-content:space-between;color:#7d88a2;font-size:12px;font-weight:900;letter-spacing:.12em; }
.profile-tool-head em { color:#ffca62;font-style:normal; }
.rename-tool { display:grid;grid-template-columns:1fr auto;gap:7px; }
.gift-tool { display:grid;grid-template-columns:minmax(120px,1fr) 110px auto;gap:7px; }
.rename-tool input,.gift-tool input,.gift-tool select { min-width:0;height:46px;padding:0 11px;border:1px solid var(--line);border-radius:4px;outline:0;background:#080c18;color:#eaffff;font:800 14px/1 system-ui; }
.gift-tool select { appearance:auto; }
.rename-tool input:focus,.gift-tool input:focus,.gift-tool select:focus { border-color:var(--cyan); }
.rename-tool button,.gift-tool button { min-height:38px;padding:8px 12px;font-size:12px;white-space:nowrap; }
.profile-tool-status { min-height:12px;margin:0;color:#8d99b2;font-size:12px;line-height:1.45; }
.ranking-head,.ranking-row { display:grid;grid-template-columns:42px minmax(130px,1fr) 130px 100px 130px;gap:8px;align-items:center;text-align:left; }
.ranking-head { padding:7px 12px;color:#65708a;font-size:12px;font-weight:900;letter-spacing:.13em; }
.leaderboard-list { overflow:visible;border:1px solid rgba(139,147,173,.16);border-radius:5px;background:rgba(5,8,17,.55); }
.ranking-row { min-height:46px;padding:8px 12px;border-bottom:1px solid rgba(139,147,173,.1);color:#aab3ca;font-size:12px; }
.ranking-row:last-child { border-bottom:0; }
.ranking-row.me { background:linear-gradient(90deg,rgba(255,202,98,.12),transparent);color:#fff0bd; }
.ranking-row .rank { color:#65708a;font-weight:900; }
.ranking-row .pilot { color:#e8f6ff;font-weight:900;letter-spacing:.06em; }
.ranking-row .score { color:var(--amber);font-weight:900; }
.ranking-row .online-dot::before { content:'●';margin-right:6px;color:#62e6a6;font-size:12px; }
.admin-console { margin-top:14px;padding:11px;border:1px solid rgba(255,79,139,.16);border-radius:5px;background:rgba(20,5,14,.25);text-align:left; }
.admin-console summary { cursor:pointer;color:#ff8bac;font-size:12px;font-weight:900;letter-spacing:.13em; }
.admin-console > p { color:#737c96;font-size:12px;line-height:1.5; }
.admin-login { display:grid;grid-template-columns:1fr auto;gap:8px; }
.admin-login.owner-login { display:block; }
.admin-login.owner-login button { width:100%; }
.admin-login input { height:40px;text-align:left;font-size:12px; }
.admin-login button { min-height:40px; }
.admin-status { min-height:14px;color:#ff8bac;font-size:12px; }
.owner-setup { margin:10px 0;padding:11px;border:1px solid rgba(255,202,98,.32);background:rgba(255,202,98,.06); }
.owner-setup p { margin:0 0 9px;color:#c7af76;font-size:12px;line-height:1.5; }
.owner-setup input { width:100%;height:48px;margin:0 0 8px;padding:0 12px;border:1px solid rgba(255,202,98,.28);border-radius:4px;outline:0;background:#080c18;color:#fff0bd;text-align:center;font:900 15px/1 system-ui;letter-spacing:.06em; }
.owner-setup input:focus { border-color:#ffca62;box-shadow:0 0 16px rgba(255,202,98,.1); }
.owner-setup button { width:100%; }
.admin-player-list { display:grid;gap:8px;margin-top:10px;overflow:visible; }
.admin-player { padding:12px;border:1px solid rgba(139,147,173,.18);border-radius:4px;background:#080c18; }
.admin-player.banned { border-color:rgba(255,79,139,.42);background:rgba(34,7,19,.5); }
.admin-player.owner { border-color:rgba(255,202,98,.38);box-shadow:inset 0 0 22px rgba(255,202,98,.035); }
.admin-player header { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:9px;color:#eaf9ff;font-size:12px;font-weight:900; }
.admin-player-identity { display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;text-align:left; }
.admin-player-name { min-width:0;overflow-wrap:anywhere;color:#eaf9ff;font-size:12px;letter-spacing:.04em; }
.admin-player-rating { flex:0 0 auto;color:var(--amber);white-space:nowrap; }
.admin-role,.admin-activity { display:inline-flex;align-items:center;min-height:20px;padding:3px 7px;border:1px solid rgba(139,147,173,.2);border-radius:10px;color:#818ba4;background:rgba(139,147,173,.05);font-size:12px;font-weight:900;line-height:1.25;letter-spacing:.06em;white-space:normal; }
.admin-role.owner-role { border-color:rgba(255,202,98,.35);color:#ffca62;background:rgba(255,202,98,.07); }
.admin-role.banned-role { border-color:rgba(255,79,139,.35);color:#ff8bac;background:rgba(255,79,139,.07); }
.admin-activity.live { border-color:rgba(98,230,166,.38);color:#62e6a6;background:rgba(98,230,166,.07); }
.admin-activity.idle { color:#7e89a4; }
.admin-activity.offline { color:#59637b;opacity:.82; }
.admin-player dl { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0; }
.admin-player dl div { padding:7px;background:rgba(255,255,255,.025); }
.admin-player dt { color:#606a82;font-size:12px;letter-spacing:.1em; }
.admin-player dd { margin:4px 0 0;color:#bac4da;font-size:12px;word-break:break-word; }
.admin-player .private-json { grid-column:1/-1;color:#9ba6bd;font:12px/1.55 ui-monospace,monospace;white-space:normal;overflow-wrap:anywhere; }
.ban-record { margin:9px 0 0;color:#ff8bac;font-size:12px; }
.moderation-controls { position:static;bottom:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(139,147,173,.12);color:inherit;font-size:inherit;letter-spacing:normal; }
.moderation-controls button { width:100%;min-width:0;min-height:38px;padding:8px 10px;font-size:12px;line-height:1.35;white-space:normal;overflow-wrap:anywhere; }
.moderation-controls .inspect-button { border-color:rgba(98,242,255,.35);color:#9df8ff;background:rgba(98,242,255,.055); }
.moderation-controls .watch-button { border-color:rgba(98,230,166,.38);color:#73e9ad;background:rgba(98,230,166,.06); }
.moderation-controls .watch-button:disabled { border-color:rgba(139,147,173,.16);color:#59637b;background:transparent; }
.moderation-controls button.unban { border-color:rgba(98,230,166,.35);color:#62e6a6; }
.owner-protected,.moderation-locked { display:grid;place-items:center;min-height:38px;padding:8px 10px;border:1px solid rgba(139,147,173,.14);border-radius:4px;text-align:center;line-height:1.35;white-space:normal; }
.owner-protected { border-color:rgba(255,202,98,.22);color:#ffca62;font-size:12px;font-weight:900;letter-spacing:.08em; }
.moderation-locked { color:#68718a;font-size:12px;letter-spacing:.07em; }
.admin-talent-card { z-index:1; }
.admin-talent-map .talent-node.locked-node { opacity:.3;filter:grayscale(.7); }
.admin-talent-map .talent-node.unlocked-node .skill-node { border-color:var(--branch);box-shadow:0 0 0 5px rgba(5,8,17,.88),0 0 24px color-mix(in srgb,var(--branch) 30%,transparent),inset 0 0 22px color-mix(in srgb,var(--branch) 10%,transparent); }
.admin-talent-map .skill-node { pointer-events:none; }
.admin-talent-tools { grid-template-columns:auto 1fr auto auto; }
.spectator-card { display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:calc(100vw - 16px)!important;height:calc(100vh - 16px);height:calc(100dvh - 16px);max-width:1440px!important;max-height:900px!important;padding:0!important;overflow:hidden;background:#050812;text-align:left; }
.spectator-head { display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px;padding:13px 64px 11px 18px;border-bottom:1px solid var(--line);background:rgba(10,14,27,.96); }
.spectator-head h2 { margin:2px 0 0;font-size:24px; }
.spectator-live { padding:7px 10px;border:1px solid rgba(98,230,166,.35);border-radius:3px;color:#62e6a6;background:rgba(98,230,166,.07);font-size:12px;font-weight:900;letter-spacing:.13em; }
.spectator-live::before { content:'●';margin-right:7px; }
.spectator-live.waiting { border-color:rgba(255,202,98,.3);color:#ffca62;background:rgba(255,202,98,.06); }
.spectator-live.offline { border-color:rgba(255,79,139,.3);color:#ff7ca6;background:rgba(255,79,139,.06); }
.spectator-screen { position:relative;width:100%;height:auto;min-height:0;overflow:hidden;background:#03060d; }
#spectator-canvas { display:block;width:100%;height:100%; }
.spectator-empty { position:absolute;inset:0;display:grid;place-items:center;padding:30px;color:#78839e;background:radial-gradient(circle at center,rgba(98,242,255,.04),transparent 52%);font-size:12px;font-weight:800;letter-spacing:.14em;text-align:center; }
.spectator-empty.hidden { display:none; }
.spectator-stats { display:grid;grid-template-columns:repeat(6,1fr);min-height:58px;border-top:1px solid var(--line);background:#090d18; }
.spectator-stats span { display:grid;align-content:center;gap:5px;padding:8px 12px;border-right:1px solid rgba(139,147,173,.12);color:#68738d;font-size:12px;font-weight:900;letter-spacing:.12em; }
.spectator-stats span:last-child { border-right:0; }
.spectator-stats b { overflow:hidden;color:#dff9ff;font-size:12px;letter-spacing:.03em;text-overflow:ellipsis;white-space:nowrap; }
.online-card { width:min(620px,94vw); }
.training-btn { border-color:rgba(98,230,166,.34);background:linear-gradient(90deg,rgba(98,230,166,.08),rgba(98,242,255,.045)); }
.training-btn span,.training-btn em { display:block; }
.training-btn em { color:#70dcb3;font-size:10px;font-style:normal;letter-spacing:.08em; }
.training-card { width:min(720px,94vw); }
.training-card h2 { margin-bottom:8px; }
.training-note,.training-rules { color:#8e9bb2;font-size:13px;line-height:1.55; }
.training-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 12px; }
.training-options label { display:grid;gap:6px;color:#9eabc1;font-size:11px;font-weight:900;letter-spacing:.1em; }
.training-options .training-difficulty { grid-column:1/-1; }
.training-options select { min-height:44px;padding:9px 12px;border:1px solid rgba(98,242,255,.23);border-radius:3px;color:#eafcff;background:#090f1c;font:800 13px system-ui; }
.training-summary { min-height:48px;padding:10px 12px;border:1px solid rgba(98,230,166,.2);background:rgba(98,230,166,.055);color:#bdfbe0;font-size:12px;font-weight:800;line-height:1.55; }
.training-role-label { margin-top:12px;color:#9eabc1;font-size:11px;font-weight:950;letter-spacing:.12em;text-align:left; }
.training-unit-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:10px 0; }
.training-unit-grid button { display:grid;gap:3px;min-width:0;min-height:60px;padding:9px 10px;border:1px solid rgba(98,242,255,.14);border-radius:2px;background:rgba(5,12,22,.72);text-align:left;transition:border-color .16s,background .16s,box-shadow .16s,transform .16s; }
.training-unit-grid button:hover { border-color:rgba(98,242,255,.42);transform:translateY(-1px); }
.training-unit-grid button.active { border-color:#62f2ff;background:linear-gradient(135deg,rgba(98,242,255,.17),rgba(98,230,166,.07));box-shadow:inset 0 0 20px rgba(98,242,255,.07),0 0 12px rgba(98,242,255,.08); }
.training-unit-grid b { overflow:hidden;color:#dffcff;font-size:11px;letter-spacing:.06em;text-overflow:ellipsis;white-space:nowrap; }
.training-unit-grid small { color:#78869e;font-size:10px;line-height:1.35; }
.training-unit-grid button.active small { color:#b9e9e9; }
.training-card #start-training { width:100%;margin-top:12px;border-color:rgba(98,230,166,.48); }
@media(max-width:560px){.training-options{grid-template-columns:1fr}.training-unit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.training-card{padding:30px 14px!important}}
.training-exit-btn { position:fixed;z-index:19;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;min-width:148px;min-height:45px;padding:7px 10px;border:1px solid rgba(255,98,120,.48);border-radius:4px;background:rgba(22,7,14,.9);color:#ff8295;box-shadow:inset 0 0 18px rgba(255,73,101,.07),0 0 16px rgba(0,0,0,.24);pointer-events:auto;touch-action:manipulation; }
.training-exit-btn.hidden { display:none; }
.training-exit-btn b { display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(255,130,149,.48);border-radius:50%;font-size:20px;line-height:1; }
.training-exit-btn span { color:#ffd9df;font-size:11px;font-weight:950;letter-spacing:.06em; }
.training-exit-btn em { color:#9e6670;font-size:9px;font-style:normal;font-weight:900; }
.training-exit-btn:hover,.training-exit-btn:focus-visible { border-color:#ff9bab;background:rgba(40,8,17,.95);box-shadow:0 0 18px rgba(255,73,101,.2); }
@media(max-width:620px){.training-exit-btn{right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));min-width:0;padding:7px}.training-exit-btn span{font-size:10px}.training-exit-btn em{display:none}}
.online-note { margin:-12px auto 20px;max-width:380px;color:var(--muted);font-size:12px;line-height:1.55; }
.global-online-count { display:flex;align-items:center;justify-content:center;gap:9px;margin:-8px 0 14px;color:#7f89a4;font-size:12px;font-weight:900;letter-spacing:.13em; }
.global-online-count b { min-width:38px;padding:5px 8px;border:1px solid rgba(98,230,166,.28);border-radius:3px;background:rgba(98,230,166,.07);color:#62e6a6;font-size:12px;letter-spacing:.06em; }
.social-hub { display:grid;gap:9px;margin-bottom:12px;padding:12px;border:1px solid rgba(157,114,255,.24);background:linear-gradient(145deg,rgba(157,114,255,.07),rgba(5,10,20,.65));text-align:left; }
.social-head { display:flex;align-items:center;justify-content:space-between;gap:12px;color:#d9d2ff;font-size:13px;font-weight:950;letter-spacing:.1em; }
.social-head em { color:#aa9ae8;font-size:12px;font-style:normal;letter-spacing:.05em; }
.social-tabs { display:grid;grid-template-columns:repeat(4,1fr);gap:5px; }
.social-tabs button { min-height:38px;padding:6px;border-color:rgba(157,114,255,.18);color:#8790ab;background:#090d19;font-size:12px;letter-spacing:.03em; }
.social-tabs button.active { border-color:#a985ff;color:#efe9ff;background:rgba(157,114,255,.14);box-shadow:inset 0 0 16px rgba(157,114,255,.08); }
.social-tabs b { display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:4px;padding:0 5px;border-radius:10px;background:rgba(98,242,255,.12);color:#62f2ff;font-size:12px; }
.social-tabs b:empty { display:none; }
.friend-search-row { display:grid;grid-template-columns:1fr auto;gap:6px; }
.friend-search-row input { min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:4px;outline:0;background:#070b16;color:#effcff;font:800 14px/1 system-ui; }
.friend-search-row input:focus { border-color:#a985ff;box-shadow:0 0 16px rgba(157,114,255,.13); }
.friend-search-row button { min-width:76px; }
.social-status { min-height:0;margin:0;color:#8c95ad;font-size:12px;line-height:1.45; }
.social-status:empty { display:none; }
.social-list { display:grid;gap:6px;max-height:236px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; }
.social-player { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;min-height:54px;padding:8px 9px;border:1px solid rgba(139,147,173,.16);border-radius:4px;background:#080d18; }
.social-player-main { display:grid;grid-template-columns:8px minmax(0,1fr);gap:8px;align-items:center;min-width:0; }
.social-player-main > i { width:7px;height:7px;border-radius:50%;background:#4b5368;box-shadow:none; }
.social-player.online .social-player-main > i { background:#62e6a6;box-shadow:0 0 9px rgba(98,230,166,.75); }
.social-player-copy { min-width:0; }
.social-player-copy b,.social-player-copy small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.social-player-copy b { color:#e3f5fb;font-size:13px;letter-spacing:.02em; }
.social-player-copy small { margin-top:4px;color:#69748d;font-size:12px; }
.social-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:245px; }
.social-actions button { min-height:34px;padding:5px 8px;font-size:12px;letter-spacing:.03em;white-space:nowrap; }
.social-actions .social-primary { border-color:rgba(98,242,255,.45);color:#bdf9ff;background:rgba(98,242,255,.08); }
.social-actions .social-accept { border-color:rgba(98,230,166,.46);color:#8dffc5;background:rgba(98,230,166,.08); }
.social-actions .social-danger { border-color:rgba(255,79,139,.28);color:#db7897;background:rgba(255,79,139,.04); }
.social-empty { margin:12px 5px;color:#66718a;font-size:12px;line-height:1.55;text-align:center; }
.player-search-panel { display:grid;gap:9px;padding:12px;border:1px solid rgba(98,242,255,.18);background:rgba(5,10,20,.58); }
.player-search { display:grid;gap:6px;text-align:left;color:#75809a;font-size:12px;font-weight:900;letter-spacing:.12em; }
.player-search input { width:100%;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:4px;outline:0;background:#080c18;color:#eaffff;font:800 15px/1 system-ui;letter-spacing:.03em; }
.player-search input:focus { border-color:var(--cyan);box-shadow:0 0 16px rgba(98,242,255,.1); }
.player-search-head { display:flex;align-items:center;justify-content:space-between;color:#8c96ae;font-size:12px;font-weight:900;letter-spacing:.12em; }
.player-search-head em { color:var(--cyan);font-style:normal; }
.online-player-list { display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:190px;overflow:auto; }
.online-player { display:flex;align-items:center;justify-content:space-between;min-height:43px;padding:8px 10px;border-color:rgba(98,242,255,.16);background:#080d18;text-align:left; }
.online-player span { display:flex;align-items:center;min-width:0;color:#d9eff7;font-size:12px;font-weight:900; }
.online-player span i { flex:0 0 auto;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#62e6a6;box-shadow:0 0 8px rgba(98,230,166,.7); }
.online-player em { flex:0 0 auto;margin-left:8px;color:#66718a;font-size:12px;font-style:normal;letter-spacing:.06em; }
.online-player.selected { border-color:#62f2ff;background:rgba(98,242,255,.1);box-shadow:inset 0 0 18px rgba(98,242,255,.06); }
.online-player.selected:after { content:'✓';margin-left:7px;color:#62f2ff;font-size:12px; }
.online-player.unavailable { opacity:.48; }
.empty-online { grid-column:1/-1;margin:16px 5px;color:#66718a;font-size:12px;line-height:1.5; }
#invite-selected { width:100%; }
.coop-invite { margin:0 0 10px;padding:12px;border:1px solid rgba(255,202,98,.44);background:rgba(255,202,98,.08);box-shadow:0 0 22px rgba(255,202,98,.08); }
.coop-invite p { margin:0 0 10px;color:#ffe6a6;font-size:12px;font-weight:900;line-height:1.45; }
.coop-invite div { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.coop-invite button { width:100%; }
.protocol-card { width:min(880px,95vw); }
.protocol-note { margin:-10px auto 18px;max-width:560px;color:var(--muted);font-size:12px;line-height:1.55; }
.protocol-choices { display:grid;grid-template-columns:repeat(5,1fr);gap:9px; }
.protocol-choice { position:relative;min-height:166px;padding:15px 12px;border-color:color-mix(in srgb,var(--protocol) 40%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--protocol) 8%,#0b0f1c),#090d18);text-align:left; }
.protocol-choice i { display:grid;place-items:center;width:34px;height:34px;margin-bottom:14px;border:1px solid var(--protocol);border-radius:50%;color:var(--protocol);font-size:19px;font-style:normal;box-shadow:0 0 16px color-mix(in srgb,var(--protocol) 18%,transparent); }
.protocol-choice b,.protocol-choice small,.protocol-choice em { display:block; }
.protocol-choice b { color:#e9f7ff;font-size:12px;letter-spacing:.08em; }
.protocol-choice small { margin-top:8px;color:#929cb4;font-size:12px;line-height:1.5; }
.protocol-choice em { position:absolute;left:12px;right:12px;bottom:12px;color:var(--protocol);font-size:12px;font-style:normal;font-weight:900;letter-spacing:.1em; }
.protocol-choice:hover { border-color:var(--protocol);transform:translateY(-2px); }
@media(max-width:760px){.protocol-choices{grid-template-columns:repeat(2,1fr);max-height:62vh;overflow:auto}.protocol-choice{min-height:142px}.protocol-choice:last-child{grid-column:1/-1}}
.online-status { min-height:18px;margin:14px 0 0;color:#9ca6bd;font-size:12px;line-height:1.55; }
.online-status.ready { color:#62e6a6; }
.room-player-count { margin:-9px 0 11px;color:#62e6a6;font-size:12px;font-weight:900;letter-spacing:.1em; }
.room-roster { display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:-5px 0 11px; }
.room-roster span { padding:5px 8px;border:1px solid rgba(98,242,255,.18);border-radius:11px;color:#aebbd2;font-size:12px;letter-spacing:.03em; }
.room-roster span.host { border-color:rgba(255,202,98,.35);color:#ffda7d; }
.coop-missions { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:15px 0 10px;padding:12px;border:1px solid rgba(98,242,255,.18);background:rgba(5,10,20,.56); }
.coop-mission-head { grid-column:1/-1;display:flex;justify-content:space-between;color:#9ca6c1;font-size:12px;font-weight:900;letter-spacing:.12em; }
.coop-mission-head em { color:#62f2ff;font-style:normal; }
.coop-missions > button:not(#start-coop) { min-height:74px;padding:9px;color:#a6aec4;text-align:left;font-size:12px;letter-spacing:.03em; }
.coop-missions > button b,.coop-missions > button small { display:block; }
.coop-missions > button small { margin-top:5px;color:#68718a;font-size:12px;line-height:1.35; }
.coop-missions > button.active { border-color:#62f2ff;color:#d8fbff;box-shadow:inset 0 0 16px rgba(98,242,255,.08); }
.pvp-mode-card { grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;margin-top:5px;padding:12px;border:1px solid rgba(255,85,112,.35);background:linear-gradient(90deg,rgba(38,137,255,.09),rgba(255,64,91,.09)); }
.online-ai-card { grid-column:1/-1;display:grid;gap:10px;margin-top:8px;padding:14px;border:1px solid rgba(88,218,255,.42);background:linear-gradient(125deg,rgba(21,112,187,.16),rgba(4,13,26,.88) 55%,rgba(255,63,82,.09));box-shadow:inset 0 0 28px rgba(55,190,255,.06); }
.online-ai-card header { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.online-ai-card header div { display:grid;gap:3px; }
.online-ai-card header b { color:#e8fbff;font-size:15px;letter-spacing:.08em; }
.online-ai-card header small,.online-ai-card header em,.online-ai-status { color:#91a6bf;font-size:12px;font-style:normal; }
.online-ai-card header em { color:#69deff;white-space:nowrap;font-weight:900; }
.online-ai-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.online-ai-options label { display:grid;gap:5px;color:#9eb0c6;font-size:11px;font-weight:900;letter-spacing:.08em; }
.online-ai-options .online-ai-role { grid-column:1/-1; }
.online-ai-options select { min-height:42px;padding:8px 10px;border:1px solid rgba(94,225,255,.25);border-radius:3px;color:#eefcff;background:#08121e;font:800 13px system-ui; }
.online-ai-status { min-height:18px;margin:0;line-height:1.45; }
.online-ai-card > #start-online-ai { width:100%;border-color:rgba(90,221,255,.55); }
.pvp-mode-card > b { color:#eef7ff;font-size:14px;letter-spacing:.1em; }
.pvp-mode-card > small { grid-column:1;color:#8791aa;font-size:12px; }
.pvp-mode-card > #start-pvp { grid-column:2;grid-row:1/11;min-width:160px;border-color:rgba(255,91,116,.55); }
.pvp-map-choice,.pvp-rule-choice { grid-column:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:8px; }
.pvp-map-choice button,.pvp-rule-choice button { position:relative;min-height:46px;padding:7px 34px 7px 9px;color:#8d98ae;text-align:left;letter-spacing:.04em; }
.pvp-map-choice button b,.pvp-map-choice button small,.pvp-rule-choice button b,.pvp-rule-choice button small { display:block; }
.pvp-map-choice button b,.pvp-rule-choice button b { color:#c7d5e8;font-size:11px; }
.pvp-map-choice button small,.pvp-rule-choice button small { margin-top:3px;color:#69758c;font-size:10px;line-height:1.2; }
.pvp-map-choice button em,.pvp-rule-choice button em { position:absolute;right:8px;top:50%;min-width:20px;padding:3px 5px;border:1px solid rgba(255,255,255,.1);border-radius:9px;color:#8fa1ba;font-size:10px;font-style:normal;text-align:center;transform:translateY(-50%); }
.pvp-map-choice button.active,.pvp-rule-choice button.active { border-color:#d7e6ff;background:rgba(220,235,255,.08); }
.pvp-map-choice button.winning,.pvp-rule-choice button.winning { box-shadow:inset 0 0 18px rgba(98,242,255,.08); }
.pvp-map-choice button.winning b,.pvp-rule-choice button.winning b { color:#9af5ff; }
.pvp-map-status,.pvp-rule-status { grid-column:1;color:#79dce8;font-size:11px;font-weight:800;letter-spacing:.04em; }
.pvp-team-choice { grid-column:1;display:flex;gap:5px;margin-top:7px; }
.pvp-team-choice button { min-height:34px;padding:6px 11px;color:#8d98ae;font-size:11px;font-weight:900;letter-spacing:.06em; }
.pvp-team-choice button[data-pvp-team="blue"].active { border-color:#329dff;color:#9ed5ff;background:rgba(50,157,255,.14); }
.pvp-team-choice button[data-pvp-team="red"].active { border-color:#ff4965;color:#ff9aab;background:rgba(255,73,101,.14); }
.pvp-team-choice button[data-pvp-team="yellow"].active { border-color:#ffc83d;color:#ffe69a;background:rgba(255,200,61,.14); }
.pvp-team-choice button[data-pvp-team="green"].active { border-color:#45db8b;color:#9bffc9;background:rgba(69,219,139,.14); }
.pvp-team-choice button[data-pvp-team="auto"].active { border-color:#d7e6ff;color:#fff;background:rgba(220,235,255,.1); }
.pvp-team-status { grid-column:1;color:#91a0ba;font-size:11px;font-weight:800;letter-spacing:.04em; }
.pvp-ready-row { grid-column:1;display:flex;align-items:center;gap:9px;margin-top:4px; }
.pvp-ready-row button { min-height:34px;padding:6px 16px;color:#a8b4c8;font-size:11px;font-weight:900;letter-spacing:.08em; }
.pvp-ready-row button.active { border-color:#62e6a6;color:#baffdb;background:rgba(98,230,166,.13);box-shadow:inset 0 0 14px rgba(98,230,166,.08); }
.pvp-ready-row span { color:#7f8ca5;font-size:11px;font-weight:800; }
#lobby-pvp-armory { grid-column:1;min-height:35px;margin-top:4px;border-color:rgba(255,202,98,.3);color:#ffda84;font-size:11px;font-weight:900;letter-spacing:.07em; }
.pvp-scoreboard { position:fixed;z-index:16;left:50%;top:max(82px,calc(env(safe-area-inset-top) + 82px));transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,22px);min-width:310px;max-width:calc(100vw - 86px);padding:7px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(3,7,16,.82);backdrop-filter:blur(10px);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%); }
.pvp-scoreboard.hidden { display:none; }
.pvp-scoreboard { pointer-events:auto;cursor:pointer;user-select:none;-webkit-user-select:none; }
.pvp-scoreboard span { display:flex;align-items:center;gap:10px;font-size:12px;font-weight:900;letter-spacing:.1em; }
.pvp-scoreboard .pvp-green,.pvp-scoreboard .pvp-red { justify-content:flex-end; }
.pvp-scoreboard b { font-size:22px; }
.pvp-scoreboard em { color:#e8f2ff;font-size:15px;font-style:normal;font-weight:900;letter-spacing:.08em; }
.pvp-blue { color:#42a7ff; }.pvp-red { color:#ff526d; }.pvp-yellow { color:#ffd04e; }.pvp-green { color:#51e69a; }
@media(max-width:620px){.pvp-scoreboard{gap:6px;padding:7px 9px}.pvp-scoreboard span{gap:3px;font-size:9px;letter-spacing:.04em}.pvp-scoreboard b{font-size:17px}.pvp-scoreboard em{font-size:12px}}
.pvp-countdown { position:fixed;z-index:18;left:50%;top:48%;transform:translate(-50%,-50%);text-align:center;color:#eaf8ff;text-shadow:0 0 24px #62f2ff;pointer-events:none; }
.pvp-countdown b,.pvp-countdown span { display:block; }
.pvp-countdown b { font-size:clamp(72px,13vw,150px);line-height:.85;font-weight:950; }
.pvp-countdown span { margin-top:16px;font-size:15px;font-weight:900;letter-spacing:.28em; }
.pvp-kill-feed { position:fixed;z-index:17;right:max(20px,env(safe-area-inset-right));top:max(116px,calc(env(safe-area-inset-top) + 116px));display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none; }
.pvp-kill-feed.hidden { display:none; }
.pvp-kill-entry { padding:5px 9px;border-right:2px solid var(--kill-color);background:rgba(3,7,16,.72);color:#cbd7ea;font-size:12px;font-weight:800;letter-spacing:.03em;animation:pvpKillIn .22s ease-out; }
.pvp-kill-entry b { color:var(--kill-color); }.pvp-kill-entry em { margin:0 7px;color:#fff;font-style:normal; }
@keyframes pvpKillIn { from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none} }
.pvp-match-board { position:fixed;z-index:24;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,calc(100vw - 34px));max-height:calc(100dvh - 44px);padding:18px;border:1px solid rgba(155,184,224,.26);background:rgba(2,6,14,.93);box-shadow:0 20px 80px rgba(0,0,0,.58);backdrop-filter:blur(16px);overflow:auto;overscroll-behavior:contain;pointer-events:auto; }
.pvp-board-close { position:sticky;z-index:3;top:0;float:right;display:grid;place-items:center;width:42px;height:42px;margin:-6px -6px 4px 12px;padding:0;border-color:rgba(255,255,255,.3);border-radius:50%;background:rgba(7,13,25,.96);color:#fff;font-size:27px;line-height:1;box-shadow:0 5px 20px rgba(0,0,0,.45);touch-action:manipulation; }
.pvp-board-close:hover,.pvp-board-close:focus-visible { border-color:#ff7085;color:#ffb8c3;box-shadow:0 0 18px rgba(255,73,101,.22); }
.pvp-match-board>header { display:flex;justify-content:space-between;gap:18px;margin-bottom:14px;color:#eef8ff;font-size:14px;letter-spacing:.12em; }
.pvp-match-board>header span { color:#73809a;font-size:11px; }
.pvp-board-teams { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.pvp-board-teams>div { min-height:120px;padding:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025); }
.pvp-board-teams .pvp-blue-panel h3 { color:#42a7ff; }.pvp-board-teams .pvp-red-panel h3 { color:#ff526d; }.pvp-board-teams .pvp-yellow-panel h3 { color:#ffd04e; }.pvp-board-teams .pvp-green-panel h3 { color:#51e69a; }
.pvp-board-teams h3 { display:flex;justify-content:space-between;align-items:center;margin:0 0 7px;font-size:13px;letter-spacing:.14em; }
.pvp-board-teams h3 small { color:#69758c;font-size:9px;letter-spacing:.08em; }
.pvp-player-row { display:grid;grid-template-columns:1fr 42px 42px 42px;gap:5px;padding:7px 5px;border-top:1px solid rgba(255,255,255,.055);color:#dbe8f7;font-size:13px; }
.pvp-player-row:first-child { border-top:0; }.pvp-player-row.local b:after { content:' · YOU';color:#ffca62;font-size:10px; }.pvp-player-row.offline { opacity:.38; }
.pvp-player-row span { color:#8490a7;text-align:right; }.pvp-player-row span:before { color:#59657a;font-size:9px; }.pvp-player-row span:nth-child(2):before { content:'K '; }.pvp-player-row span:nth-child(3):before { content:'D '; }.pvp-player-row span:nth-child(4):before { content:'A '; }
.room-roster .pvp-blue { border-color:rgba(50,157,255,.42);color:#8dceff; }
.room-roster .pvp-red { border-color:rgba(255,73,101,.42);color:#ff9bac; }
.room-roster .pvp-yellow { border-color:rgba(255,200,61,.42);color:#ffe28a; }
.room-roster .pvp-green { border-color:rgba(69,219,139,.42);color:#91f5bd; }
#pvp-fire-btn { position:fixed;z-index:17;right:max(24px,env(safe-area-inset-right));bottom:max(30px,calc(env(safe-area-inset-bottom) + 30px));width:112px;height:112px;border-radius:50%;border:1px solid rgba(98,242,255,.48);background:radial-gradient(circle,rgba(98,242,255,.18),rgba(5,10,22,.76) 68%);color:#dffcff;touch-action:none;user-select:none;-webkit-user-select:none; }
#pvp-fire-btn.hidden { display:none; }
#pvp-fire-btn b,#pvp-fire-btn span { display:block;pointer-events:none; }
#pvp-fire-btn b { font-size:30px;line-height:1; }
#pvp-fire-btn span { margin-top:6px;font-size:11px;font-weight:900;letter-spacing:.08em; }
#pvp-fire-btn.active { border-color:#fff;box-shadow:0 0 24px rgba(98,242,255,.35),inset 0 0 20px rgba(98,242,255,.16); }
@media(pointer:fine){#pvp-fire-btn{display:none!important}}
#pvp-light-btn { position:fixed;z-index:17;right:max(150px,calc(env(safe-area-inset-right) + 150px));bottom:max(44px,calc(env(safe-area-inset-bottom) + 44px));width:104px;min-height:82px;border-color:rgba(255,223,137,.5);background:radial-gradient(circle,rgba(255,226,143,.16),rgba(7,12,22,.9) 72%);color:#fff0bd;touch-action:none;user-select:none;-webkit-user-select:none; }
#pvp-light-btn.hidden { display:none; }
#pvp-light-btn b,#pvp-light-btn span,#pvp-light-btn em,#pvp-light-btn i,#pvp-light-btn u { display:block;pointer-events:none; }
#pvp-light-btn b { font-size:23px;text-shadow:0 0 15px #ffe08a; }
#pvp-light-btn span { margin-top:4px;font-size:10px;font-weight:900;letter-spacing:.04em; }
#pvp-light-btn em { margin-top:3px;color:#a99d78;font-size:10px;font-style:normal; }
#pvp-light-btn .pvp-light-meter { width:72px;height:6px;margin:5px auto 0;border:1px solid rgba(255,231,161,.35);border-radius:4px;background:rgba(1,5,12,.78);overflow:hidden; }
#pvp-light-fill { width:100%;height:100%;border-radius:3px;background:linear-gradient(90deg,#ff9b58 0%,#ffe189 38%,#fff8c7 100%);box-shadow:0 0 8px rgba(255,225,137,.85);transition:width .08s linear,background-color .15s; }
#pvp-light-btn.active { border-color:#fff5cf;box-shadow:0 0 30px rgba(255,225,139,.28),inset 0 0 24px rgba(255,225,139,.12); }
#pvp-light-btn.depleted { border-color:rgba(255,105,93,.68);color:#ff9b91;box-shadow:inset 0 0 18px rgba(255,73,82,.12); }
#pvp-light-btn:disabled { opacity:.42; }
#pvp-reload-btn { position:fixed;z-index:17;right:max(150px,calc(env(safe-area-inset-right) + 150px));bottom:max(126px,calc(env(safe-area-inset-bottom) + 126px));width:94px;min-height:64px;border-color:rgba(98,242,255,.42);background:rgba(5,12,22,.88);color:#bffaff;touch-action:manipulation; }
#pvp-reload-btn.hidden { display:none; }
#pvp-reload-btn b,#pvp-reload-btn span,#pvp-reload-btn em { display:block;pointer-events:none; }
#pvp-reload-btn b { font-size:20px; }
#pvp-reload-btn span { margin-top:3px;font-size:10px;font-weight:900;letter-spacing:.05em; }
#pvp-reload-btn em { margin-top:2px;color:#718ca0;font-size:10px;font-style:normal; }
#pvp-reload-btn.active { border-color:#fff;box-shadow:0 0 22px rgba(98,242,255,.22); }
#pvp-reload-btn:disabled { opacity:.36; }
#pvp-switch-btn { position:fixed;z-index:17;right:max(28px,calc(env(safe-area-inset-right) + 28px));bottom:max(156px,calc(env(safe-area-inset-bottom) + 156px));width:108px;min-height:62px;border-color:rgba(111,247,255,.45);background:rgba(5,12,22,.9);color:#c9fbff;touch-action:manipulation; }
#pvp-switch-btn.hidden { display:none; }
#pvp-switch-btn b,#pvp-switch-btn span,#pvp-switch-btn em { display:block;pointer-events:none; }
#pvp-switch-btn b { font-size:19px; }
#pvp-switch-btn span { margin-top:2px;font-size:10px;font-weight:900;letter-spacing:.05em; }
#pvp-switch-btn em { margin-top:2px;color:#78a5b1;font-size:10px;font-style:normal; }
#pvp-switch-btn:disabled { opacity:.36; }
.pvp-role-skills { position:fixed;z-index:17;right:max(24px,env(safe-area-inset-right));bottom:max(238px,calc(env(safe-area-inset-bottom) + 238px));display:grid;grid-template-columns:repeat(2,minmax(0,108px));gap:7px;pointer-events:auto; }
.pvp-role-skills.hidden { display:none; }
.pvp-role-skills button { min-height:66px;padding:7px 8px;border:1px solid color-mix(in srgb,var(--skill-color,#62f2ff) 54%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--skill-color,#62f2ff) 12%,rgba(4,9,18,.94)),rgba(4,9,18,.94));color:var(--skill-color,#dffcff);box-shadow:inset 0 0 18px color-mix(in srgb,var(--skill-color,#62f2ff) 8%,transparent);touch-action:manipulation;user-select:none;-webkit-user-select:none; }
.pvp-role-skills button b,.pvp-role-skills button span,.pvp-role-skills button em { display:block;pointer-events:none; }
.pvp-role-skills button b { font-size:18px;line-height:1; }
.pvp-role-skills button span { margin-top:4px;color:#eaf7ff;font-size:10px;font-weight:950;letter-spacing:.04em; }
.pvp-role-skills button em { margin-top:3px;color:var(--skill-color,#62f2ff);font-size:10px;font-style:normal;font-weight:900; }
.pvp-role-skills button.ready { animation:pvpSkillReady 1.5s ease-in-out infinite; }
.pvp-role-skills button.charging { border-color:#fff;box-shadow:inset 0 0 28px color-mix(in srgb,var(--skill-color,#d8a7ff) 28%,transparent),0 0 22px color-mix(in srgb,var(--skill-color,#d8a7ff) 35%,transparent);transform:scale(1.035); }
.pvp-role-skills button:disabled { opacity:.42;filter:saturate(.45);animation:none; }
@keyframes pvpSkillReady { 50%{box-shadow:inset 0 0 22px color-mix(in srgb,var(--skill-color,#62f2ff) 17%,transparent),0 0 13px color-mix(in srgb,var(--skill-color,#62f2ff) 17%,transparent)} }
.pvp-weapon-slots { position:fixed;z-index:17;left:50%;bottom:max(14px,calc(env(safe-area-inset-bottom) + 14px));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;width:min(430px,calc(100vw - 330px));transform:translateX(-50%);pointer-events:auto; }
.pvp-weapon-slots.hidden { display:none; }
.pvp-weapon-slots button { display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:5px;min-width:0;min-height:48px;padding:5px 7px;border:1px solid rgba(255,255,255,.12);background:rgba(4,9,18,.88);color:#8190a8;touch-action:manipulation; }
.pvp-weapon-slots button b { color:#657086;font-size:10px; }
.pvp-weapon-slots button i { color:var(--slot-color);font-size:17px;font-style:normal;text-shadow:0 0 9px var(--slot-color); }
.pvp-weapon-slots button span { overflow:hidden;color:#b8c5d8;font-size:9px;font-weight:900;text-overflow:ellipsis;white-space:nowrap; }
.pvp-weapon-slots button em { grid-column:1/-1;color:#65758c;font-size:9px;font-style:normal; }
.pvp-weapon-slots button.active { border-color:var(--slot-color);box-shadow:inset 0 0 16px color-mix(in srgb,var(--slot-color) 14%,transparent),0 0 12px color-mix(in srgb,var(--slot-color) 15%,transparent); }
.pvp-weapon-slots button.specialized { border-top-color:#fff1a8; }
.pvp-weapon-slots button.specialized em { color:#ffe28a; }
.pvp-weapon-slots button.active b,.pvp-weapon-slots button.active em { color:#e5fbff; }
@media(pointer:fine){#pvp-switch-btn{display:none!important}}
@media(max-width:620px){.pvp-role-skills{right:max(18px,env(safe-area-inset-right));bottom:max(226px,calc(env(safe-area-inset-bottom) + 226px));grid-template-columns:repeat(2,minmax(0,94px));gap:5px}.pvp-role-skills button{min-height:59px;padding:5px}.pvp-role-skills button span{font-size:9px}}
#start-coop { grid-column:1/-1;margin-top:3px; }
@media(max-width:620px){.coop-missions{grid-template-columns:1fr}.coop-missions > button:not(#start-coop){min-height:48px}.online-ai-card header{display:grid}.online-ai-card header em{white-space:normal}.online-ai-options{grid-template-columns:1fr}.online-ai-options .online-ai-role{grid-column:1}.pvp-mode-card{grid-template-columns:1fr}.pvp-mode-card>#start-pvp{grid-column:1;grid-row:auto;width:100%;margin-top:5px}.pvp-map-choice,.pvp-rule-choice{grid-template-columns:1fr}.pvp-team-choice{flex-wrap:wrap}.pvp-team-choice button{flex:1;min-width:88px}.pvp-scoreboard{top:max(104px,calc(env(safe-area-inset-top) + 104px));min-width:min(300px,calc(100vw - 96px));padding:6px 10px}.pvp-kill-feed{top:max(150px,calc(env(safe-area-inset-top) + 150px));max-width:74vw}.pvp-board-teams{grid-template-columns:1fr}.pvp-match-board>header{display:block}.pvp-match-board>header span{display:block;margin-top:6px}.team-warning{top:158px;min-width:min(330px,calc(100vw - 24px))}#team-teleport-btn{left:auto;right:max(22px,env(safe-area-inset-right));bottom:max(108px,calc(env(safe-area-inset-bottom) + 108px));}.coop-actions{bottom:max(176px,calc(env(safe-area-inset-bottom) + 176px));width:min(430px,calc(100vw - 28px))}.coop-action-row{grid-template-columns:repeat(4,1fr)}.coop-action-row button{min-height:56px;padding:6px 3px}.coop-action-row button span{font-size:12px}.coop-support kbd{display:none}.coop-link-status{font-size:12px}}
@media(max-width:520px){.online-player-list{grid-template-columns:1fr;max-height:220px}.online-card{padding:28px 12px!important}.social-tabs{grid-template-columns:1fr 1fr}.social-player{grid-template-columns:1fr}.social-actions{justify-content:flex-start;max-width:none}.social-list{max-height:260px}.friend-search-row button{min-width:68px;padding:6px}}
@media(max-width:620px){.pvp-armory-grid{grid-template-columns:1fr}.pvp-armory-section>header{display:block}.pvp-armory-section>header small{display:block;margin-top:4px}.pvp-armory-entry{grid-template-columns:40px 1fr}.pvp-armory-entry>i{width:38px;height:38px}.pvp-armory-actions{grid-column:2;grid-template-columns:1fr 1fr;min-width:0}}
html.wechat-mini .online-card { width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 12px);padding-top:max(28px,env(safe-area-inset-top))!important;padding-bottom:max(18px,env(safe-area-inset-bottom))!important; }
html.wechat-mini .social-tabs button,html.wechat-mini .social-actions button,html.wechat-mini .friend-search-row button { min-height:44px;touch-action:manipulation; }
@media(max-width:700px){.ranking-head,.ranking-row{grid-template-columns:32px minmax(95px,1fr) 88px 62px}.ranking-head>*:last-child,.ranking-row>*:last-child{display:none}.admin-player dl{grid-template-columns:repeat(2,1fr)}.leaderboard-card{padding:28px 12px!important}.profile-card{padding:28px 20px}.gift-tool{grid-template-columns:1fr 86px}.gift-tool button{grid-column:1/-1}.rename-tool,.recovery-tool,.recovery-login>div{grid-template-columns:1fr}.rename-tool button,.recovery-tool button,.recovery-login button{width:100%}.moderation-controls{grid-template-columns:1fr}.spectator-stats{grid-template-columns:repeat(3,1fr)}.admin-talent-tools{grid-template-columns:1fr 1fr}.admin-talent-tools span:nth-child(2){display:none}}
@media(max-width:700px){.pvp-watch-list{grid-template-columns:1fr}}
#toast { position: absolute; left: 50%; bottom: 13%; z-index: 20; padding: 10px 16px; border: 1px solid rgba(98,242,255,.35); border-radius: 4px; opacity: 0; background: rgba(8,12,23,.9); color: var(--cyan); transform: translate(-50%, 12px); transition: .2s; pointer-events: none; font-size:12px; font-weight: 800; letter-spacing: .12em; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#rotate-hint { display: none; }

@media (pointer: coarse), (max-width: 850px) {
  #overclock-btn, .icon-btn { display: block; }
  .score-block { margin-right: 42px; }
  .heat-wrap { bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  #move-joystick { display: grid; }
  #use-gear-btn { bottom: max(150px,calc(env(safe-area-inset-bottom) + 150px)); }
  .coop-actions { bottom: max(176px,calc(env(safe-area-inset-bottom) + 176px)); }
  .pvp-weapon-slots { width:min(244px,calc(100vw - 278px));gap:3px; }
  .pvp-weapon-slots button { grid-template-columns:1fr;gap:1px;min-height:54px;padding:4px 2px; }
  .pvp-weapon-slots button b { display:none; }
  .pvp-weapon-slots button i { font-size:19px; }
  .pvp-weapon-slots button span { display:none; }
  .pvp-weapon-slots button em { grid-column:1;font-size:9px; }
  .meta-viewport.dragging .talent-world { background-image:linear-gradient(rgba(98,242,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(98,242,255,.018) 1px,transparent 1px);background-size:96px 96px; }
}
html.touch-preview #move-joystick { display: grid; }
@media(pointer:coarse){.story-weapon-controls:not(.hidden){display:flex}}
html.touch-preview .story-weapon-controls:not(.hidden){display:flex}
html.touch-preview #use-gear-btn { bottom: max(150px,calc(env(safe-area-inset-bottom) + 150px)); }
html.touch-preview #overclock-btn,html.touch-preview .icon-btn { display: block; }
@media (max-width: 640px) {
  .panel-screen { justify-content: space-between; padding: 4vh 12px 3vh; overflow-y: auto; }
  .brand { margin: 0; }
  h1 { font-size: clamp(43px, 16vw, 68px); }
  .brand p { font-size:14px; }
  .menu-actions { width: min(430px, 96vw); }
  .stage-select { height: 176px; }
  .stage-summary { min-height: 44px; }
  footer { display: none; }
  .hud-top { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .hud-block { width: 26vw; }
  .score-block > b { font-size:19px; }
  .timer-wrap b { font-size:20px; }
  .xp-row { width: 78vw; }
  .heat-wrap { width: 42vw; left: 26%; }
  .upgrade-grid { grid-template-columns: 1fr; }
  .upgrade-card { min-height: 100px; padding: 15px 15px 15px 76px; }
  .upgrade-card .icon { position: absolute; left: 14px; top: 22px; margin: 0; }
  .skill-tree { grid-template-columns: repeat(3, 230px); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .skill-branch { scroll-snap-align: center; }
  .modal-card.wide { max-height: 96dvh; padding: 24px 16px; }
  .modal-card.wide h2 { margin-bottom: 12px; }
  .enemy-grid { grid-template-columns: 1fr; }
  .strategy-grid { grid-template-columns:1fr; }
  .strategy-entry { grid-template-columns:42px 1fr;min-height:128px; }
  .strategy-entry > button,.strategy-owned { grid-column:2;justify-self:stretch;text-align:center; }
  .enemy-entry { min-height: 88px; }
  .consumable-grid { grid-template-columns: 1fr; }
  .gear-entry { min-height: 100px; }
  .systems-card { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
  .systems-head { min-height: 72px; grid-template-columns: 1fr auto; gap: 8px; padding: 9px 54px 8px 12px; }
  .systems-head h2 { font-size:21px; }
  .systems-head .tree-note { display: none; }
  .systems-head .wallet { padding: 8px; font-size:12px; }
  .systems-tools { grid-template-columns: auto 1fr auto; gap: 8px; padding-left: 10px; }
  #tree-drag-hint { display: none; }
  #reset-save { display: none; }
}
@media (orientation: portrait) and (max-width: 480px) {
  #rotate-hint { position: absolute; left: 50%; bottom: 7px; z-index: 7; display: flex; gap: 6px; align-items: center; color: #545d76; transform: translateX(-50%); font-size:12px; letter-spacing: .1em; pointer-events: none; }
}

/* Readability pass: keep every interface legible without clipping larger text. */
.panel-screen { justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding-top:clamp(28px,5vh,56px);padding-bottom:48px; }
.panel-screen .brand,.panel-screen .menu-actions { flex:0 0 auto; }
.stage-summary { min-height:78px; }
.stage-card > b { width:122px;line-height:1.28; }
.button-row.compact button,.text-btn { min-height:44px!important; }
.tutorial-guide-card { max-height:calc(100dvh - 24px);overflow:auto; }
.upgrade-card { min-height:250px; }
button.skill-node { min-height:88px; }
.talent-node button.skill-node { min-height:104px; }
.enemy-entry { min-height:138px; }
.gear-entry { min-height:142px; }
.run-gear-card .gear-entry { min-height:122px; }
.meta-row { min-height:78px; }
.profile-tools,.admin-console,.admin-player { padding:15px; }
.rename-tool button,.gift-tool button { min-height:46px; }
.ranking-head { min-height:40px; }
.ranking-row { min-height:58px; }
.admin-login input,.admin-login button { min-height:48px; }
.admin-status { min-height:20px;line-height:1.5; }
.admin-role,.admin-activity { min-height:29px;padding:5px 9px; }
.admin-player dl div { min-height:58px;padding:9px; }
.moderation-controls button,.owner-protected,.moderation-locked { min-height:50px; }
.spectator-head { min-height:90px; }
.spectator-stats { min-height:72px; }
.online-player-list { max-height:250px; }
.online-player { min-height:56px; }
.coop-missions > button:not(#start-coop) { min-height:92px; }
.protocol-choice { min-height:200px; }
#toast { max-width:min(680px,calc(100vw - 28px));line-height:1.45;text-align:center; }
@media(max-width:700px){
  .leaderboard-card,.online-card,.profile-card { padding:34px 16px!important; }
  .ranking-head,.ranking-row { grid-template-columns:34px minmax(110px,1fr) 92px 70px; }
  .admin-player dl { grid-template-columns:1fr 1fr; }
  .admin-player header { flex-wrap:wrap; }
  .protocol-choice { min-height:182px; }
}
@media(max-width:640px){
  .stage-summary { min-height:68px; }
  .upgrade-card { min-height:132px; }
  .enemy-entry,.gear-entry { min-height:128px; }
  .systems-head { min-height:86px; }
  .systems-tools { min-height:62px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

/* Career, daily missions, achievements, and system options */
.adventure-btn { display:flex;align-items:center;justify-content:space-between;border-color:rgba(180,124,255,.34);background:linear-gradient(110deg,rgba(180,124,255,.1),rgba(255,95,143,.07));color:#e6d7ff; }
.adventure-btn em { color:#bd9aff;font-size:12px;font-style:normal;letter-spacing:.08em; }
.adventure-card { width:min(1040px,96vw)!important;max-height:92dvh;overflow-y:auto;text-align:left; }
.adventure-tabs { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0 10px; }
.adventure-tabs button { min-height:42px;color:#7f89a4;font-size:12px; }
.adventure-tabs button.active { border-color:#b47cff;color:#e8dcff;background:rgba(180,124,255,.1);box-shadow:inset 0 0 24px rgba(180,124,255,.06); }
.adventure-note { min-height:34px;margin:0 0 12px;color:#8590a9;font-size:12px;line-height:1.5; }
.adventure-layout { display:grid;grid-template-columns:minmax(300px,.92fr) minmax(360px,1.08fr);gap:12px;min-height:480px; }
.adventure-list { display:grid;align-content:start;gap:7px;max-height:58vh;overflow-y:auto;padding-right:3px; }
.adventure-node { display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;min-height:68px;padding:9px 11px;border:1px solid rgba(139,147,173,.14);background:rgba(7,10,21,.72);text-align:left; }
.adventure-node > i { display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--adventure,#b47cff);border-radius:50%;color:var(--adventure,#b47cff);font-size:18px;font-style:normal;box-shadow:0 0 16px color-mix(in srgb,var(--adventure,#b47cff) 18%,transparent); }
.adventure-node b,.adventure-node small { display:block; }
.adventure-node b { color:#e9efff;font-size:12px;letter-spacing:.05em; }
.adventure-node small { margin-top:4px;color:#707b96;font-size:10px;line-height:1.35; }
.adventure-node em { color:#65708b;font-size:11px;font-style:normal;font-weight:900;white-space:nowrap; }
.adventure-node.active { border-color:var(--adventure,#b47cff);background:color-mix(in srgb,var(--adventure,#b47cff) 8%,#080b16); }
.adventure-node.cleared em { color:#62e6a6; }
.adventure-node.locked { opacity:.55; }
.adventure-detail { position:relative;min-height:480px;padding:26px;border:1px solid rgba(180,124,255,.2);background:radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--adventure,#b47cff) 14%,transparent),transparent 42%),rgba(7,10,21,.82);overflow:hidden; }
.adventure-detail::before { content:attr(data-icon);position:absolute;right:26px;top:20px;color:var(--adventure,#b47cff);font-size:76px;line-height:1;opacity:.12;text-shadow:0 0 24px var(--adventure,#b47cff); }
.adventure-detail .chapter { color:var(--adventure,#b47cff);font-size:11px;font-weight:900;letter-spacing:.16em; }
.adventure-detail h3 { max-width:78%;margin:8px 0 7px;color:#f1f5ff;font-size:25px;letter-spacing:.02em; }
.adventure-detail .premise { margin:0 0 16px;color:#9ba7c1;font-size:12px;line-height:1.65; }
.adventure-rule { margin:12px 0;padding:13px;border-left:3px solid var(--adventure,#b47cff);background:rgba(255,255,255,.025); }
.adventure-rule b,.adventure-rule span { display:block; }
.adventure-rule b { color:#dce5f5;font-size:12px; }
.adventure-rule span { margin-top:5px;color:#8793ad;font-size:11px;line-height:1.5; }
.adventure-dialogue-preview { display:grid;gap:7px;margin:15px 0; }
.adventure-dialogue-preview p { margin:0;padding:8px 10px;border:1px solid rgba(139,147,173,.1);color:#9ca8c0;font-size:11px;line-height:1.45; }
.adventure-detail footer { position:static;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;letter-spacing:normal; }
.adventure-detail footer span { color:#ffca62;font-size:12px;font-weight:900; }
.adventure-detail footer button { min-width:150px; }
.adventure-detail footer > div { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px; }
.story-archive-card { width:min(1060px,96vw);max-height:90vh;overflow-y:auto;text-align:left;background:radial-gradient(circle at 50% 0,rgba(98,242,255,.09),transparent 40%),linear-gradient(155deg,rgba(13,20,34,.99),rgba(5,8,17,.99)); }
.story-archive-card h2 { margin:9px 0 8px; }
.story-cinematic-play-all { width:100%;min-height:44px;margin:6px 0 2px;border-color:rgba(98,242,255,.44);background:linear-gradient(90deg,rgba(98,242,255,.13),rgba(180,124,255,.1));color:#e9fdff;font-weight:900;letter-spacing:.08em; }
.story-archive-columns { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px; }
.story-archive-columns > section { min-width:0;padding:13px;border:1px solid rgba(98,242,255,.15);background:rgba(3,8,16,.55); }
.story-archive-columns > section > header { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#dffcff;font-size:13px;letter-spacing:.05em; }
.story-archive-columns > section > header small { color:#ffca62;font-weight:900; }
.story-record-list { display:grid;gap:8px;max-height:54vh;overflow-y:auto;padding-right:3px; }
.story-record { display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:66px;padding:9px;border:1px solid rgba(139,147,173,.14);border-radius:10px;background:rgba(10,15,27,.76); }
.story-record.active { border-color:rgba(255,202,98,.5);box-shadow:inset 0 0 20px rgba(255,202,98,.06); }
.story-record.locked { opacity:.42; }
.story-record > i { display:grid;place-items:center;width:34px;height:34px;border:1px solid #62f2ff;border-radius:50%;color:#62f2ff;font-style:normal;box-shadow:0 0 12px rgba(98,242,255,.16); }
.story-record b,.story-record small { display:block; }
.story-record b { color:#eefaff;font-size:12px; }
.story-record small { margin-top:4px;color:#76829b;font-size:10px; }
.story-record button { min-width:78px;min-height:34px;padding:7px 10px;font-size:10px; }
.story-record-empty { margin:0;padding:18px;color:#737f99;font-size:11px;text-align:center; }
.story-scene-card { width:min(640px,94vw);border-color:rgba(180,124,255,.42);background:radial-gradient(circle at 50% 0,rgba(180,124,255,.14),transparent 45%),linear-gradient(155deg,rgba(18,21,41,.99),rgba(7,9,19,.99));text-align:left; }
.story-scene-card h2 { margin:12px 0 18px;color:#f3eeff;font-size:27px; }
.story-scene-lines { display:grid;gap:10px;margin-bottom:20px; }
.story-scene-lines p { margin:0;padding:11px 13px;border-left:2px solid #b47cff;background:rgba(180,124,255,.045);color:#aeb8ce;font-size:12px;line-height:1.65;animation:story-line-in .45s both;animation-delay:var(--delay); }
.story-scene-lines p b { color:#d8c5ff; }
.story-scene-card .primary { width:100%; }
@keyframes story-line-in { from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none} }
.career-card { width:min(980px,96vw);max-height:min(900px,92vh);overflow-y:auto;text-align:left; }
.career-stats { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:16px 0 22px; }
.career-stat { min-width:0;padding:12px 10px;border:1px solid rgba(98,242,255,.16);background:linear-gradient(145deg,rgba(98,242,255,.07),rgba(11,15,30,.76)); }
.career-stat span { display:block;color:#7f8aa5;font-size:10px;font-weight:900;letter-spacing:.08em; }
.career-stat b { display:block;margin-top:5px;color:#eafaff;font-size:clamp(16px,2vw,23px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.career-section-head { display:flex;align-items:end;justify-content:space-between;gap:12px;margin:20px 0 9px;padding-bottom:8px;border-bottom:1px solid rgba(139,147,173,.16); }
.career-section-head div { display:flex;flex-direction:column;gap:3px; }
.career-section-head b { color:#dce4f7;font-size:13px;letter-spacing:.12em; }
.career-section-head small { color:#737e99;font-size:11px; }
.career-section-head em { color:var(--amber);font-size:12px;font-style:normal;font-weight:900; }
.career-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.daily-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.career-entry { position:relative;min-height:116px;padding:14px 14px 13px 52px;border:1px solid rgba(139,147,173,.14);background:rgba(7,10,21,.7);overflow:hidden; }
.career-entry::before { content:attr(data-icon);position:absolute;left:14px;top:14px;color:var(--career,#62f2ff);font-size:24px;text-shadow:0 0 12px var(--career,#62f2ff); }
.career-entry.complete { border-color:color-mix(in srgb,var(--career,#62f2ff) 45%,transparent);box-shadow:inset 0 0 28px color-mix(in srgb,var(--career,#62f2ff) 8%,transparent); }
.career-entry.claimed { opacity:.6; }
.career-entry h3 { margin:0 0 5px;color:#eef6ff;font-size:13px;letter-spacing:.05em; }
.career-entry p { min-height:30px;margin:0 0 9px;color:#8e99b2;font-size:11px;line-height:1.4; }
.career-entry footer { position:static;bottom:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;letter-spacing:normal; }
.career-entry footer span { color:#7e89a3;font-size:10px;font-weight:800; }
.career-entry footer b { color:var(--amber);font-size:11px;white-space:nowrap; }
.career-entry button { min-height:32px;padding:6px 10px;font-size:10px; }
.career-progress { height:4px;margin:6px 0 9px;background:rgba(255,255,255,.08);overflow:hidden; }
.career-progress i { display:block;height:100%;width:var(--progress);background:var(--career,#62f2ff);box-shadow:0 0 9px var(--career,#62f2ff);transition:width .35s ease; }
.settings-card { width:min(520px,94vw);text-align:left; }
.settings-list { display:grid;gap:9px;margin:18px 0; }
.settings-list label { display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:52px;padding:10px 14px;border:1px solid rgba(139,147,173,.16);background:rgba(7,10,21,.7);color:#dce4f7;font-size:12px;font-weight:900;letter-spacing:.07em; }
.settings-list select { min-width:128px;padding:9px;border:1px solid rgba(98,242,255,.3);background:#090e1d;color:#dffcff;font:800 11px system-ui; }
.settings-list input[type="checkbox"] { width:25px;height:25px;accent-color:#62f2ff; }
.settings-device-note { display:block;margin-top:12px;color:#76819b;font-size:11px;line-height:1.5;text-align:center; }
.result-grade { display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;margin:12px 0;padding:10px 14px;border:1px solid rgba(255,202,98,.24);background:linear-gradient(90deg,rgba(255,202,98,.08),transparent);text-align:left; }
.result-grade span { color:#8994ac;font-size:11px;font-weight:900;letter-spacing:.12em; }
.result-grade b { grid-row:1/3;grid-column:2;color:var(--amber);font-size:40px;line-height:1;text-shadow:0 0 18px rgba(255,202,98,.45); }
.result-grade small { color:#c3ccdd;font-size:10px; }

@media(max-width:760px){
  .adventure-layout { grid-template-columns:1fr; }
  .adventure-list { max-height:250px; }
  .adventure-detail { min-height:420px;padding:20px; }
  .career-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .daily-grid,.career-grid { grid-template-columns:1fr; }
  .career-entry { min-height:104px; }
  .story-archive-columns { grid-template-columns:1fr; }
  .story-record-list { max-height:32vh; }
}
@media(max-width:430px){
  .career-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-list label { font-size:11px; }
}