:root {
  --glass: linear-gradient(180deg, rgba(30, 26, 22, 0.88), rgba(14, 12, 10, 0.88));
  --glass-solid: linear-gradient(180deg, #2a241e, #15120f);
  --line: rgba(255, 221, 150, 0.16);
  --line-strong: rgba(255, 214, 120, 0.45);
  --gold: #f2c14e;
  --gold2: #b8862a;
  --text: #f4eee3;
  --muted: #b3a690;
  --dim: #7d7262;
  --blue: #3d8bff;
  --red: #ef4136;
  --green: #5ee08f;
  --r: 12px;
  --ui: "Nunito", "Segoe UI", system-ui, sans-serif;
  --title: "Cinzel", Georgia, serif;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0d0b0a;
  color: var(--text);
  font-family: var(--ui);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; }
svg { fill: currentColor; }

kbd {
  display: inline-block; min-width: 1.6em; padding: 0 0.4em; border-radius: 5px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); border-bottom-width: 2px;
  font: 800 0.72em/1.55 var(--ui); text-align: center; color: var(--text); letter-spacing: 0;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
}

.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--red); color: #fff; font-size: 12px; font-weight: 900; font-style: normal;
}
.badge.zero { background: rgba(255, 255, 255, 0.18); }

/* ===================== HUD ===================== */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud .glass, #hud button, #hud canvas, #hud .tip-box, #hud .popover { pointer-events: auto; }

#vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s; }
#vignette.ctrl { opacity: 1; background: radial-gradient(ellipse at 50% 62%, rgba(0, 0, 0, 0) 55%, rgba(30, 18, 0, 0.42) 100%); }
#vignette.hurt { opacity: 1; transition: none; background: radial-gradient(ellipse at 50% 60%, rgba(0, 0, 0, 0) 45%, rgba(170, 0, 0, 0.5) 100%); }

.hud-top { position: absolute; top: 10px; left: 10px; right: 10px; display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: start; gap: 10px; }
.hud-top > .hud-res { justify-self: start; }
.hud-top > .hud-sys { justify-self: end; }
.hud-res { display: flex; align-items: center; gap: 18px; padding: 8px 16px; height: 52px; }
.res { display: flex; align-items: center; gap: 8px; }
.res b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
.res-sub { font-size: 12px; color: var(--muted); font-weight: 700; margin-left: 2px; }
.coin {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 34% 30%, #fff5b8 0 14%, #f6cb45 30%, #c48e14 72%, #7d5406 100%);
  box-shadow: 0 0 10px rgba(255, 200, 60, 0.45), inset 0 -2px 2px rgba(0, 0, 0, 0.25);
}
.res .ico { width: 22px; height: 22px; color: #e6dccb; }
.pop-col { display: flex; flex-direction: column; gap: 3px; }
.pop-col b { font-size: 18px; }
.pop-bar { width: 64px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.pop-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7fb6ff, #3d8bff); transition: width 0.3s; }
.res-pop.full b { color: #ff7a6b; }
.res-pop.full .pop-bar i { background: linear-gradient(90deg, #ff9a7a, #ef4136); }
.res-gold.flash b { animation: flashRed 0.5s; }
.res-gold.gain b { animation: gain 0.45s; }
@keyframes flashRed { 40% { color: #ff5a4a; transform: scale(1.15); } }
@keyframes gain { 40% { color: #ffe27a; transform: scale(1.08); } }

.hud-center { width: min(470px, 42vw); display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 240px; }
.versus { display: flex; align-items: center; gap: 8px; padding: 7px 10px; height: 52px; }
.vs-side { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
.crest { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
.crest svg { width: 17px; height: 17px; color: #fff; }
.crest.blue { background: linear-gradient(160deg, #5aa1ff, #1c56c4); box-shadow: 0 0 10px rgba(61, 139, 255, 0.45); }
.crest.red { background: linear-gradient(160deg, #ff6b5e, #b51e15); box-shadow: 0 0 10px rgba(239, 65, 54, 0.45); }
.vs-bar { position: relative; flex: 1; height: 11px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); }
.vs-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 6px; }
.vs-bar .ghost { background: rgba(255, 240, 200, 0.75); transition: width 0.9s 0.25s; }
.vs-bar .fill { transition: width 0.2s; }
.vs-bar.blue .fill { background: linear-gradient(180deg, #8cc0ff, #2f74e8); }
.vs-bar.red { transform: scaleX(-1); }
.vs-bar.red .fill { background: linear-gradient(180deg, #ff9b92, #d5281f); }
.vs-mid { flex: 0 0 auto; min-width: 138px; text-align: center; line-height: 1.15; }
.vs-obj { font-size: 12.5px; font-weight: 900; color: var(--gold); white-space: nowrap; text-shadow: 0 1px 2px #000; }
.vs-time { font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.mm-wrap { flex: 1 1 auto; max-width: 440px; min-width: 120px; align-self: flex-start; pointer-events: none; }
#minimap { width: 100%; height: 34px; border-radius: 10px; cursor: pointer; display: block; border: 1px solid var(--line); box-shadow: var(--shadow); pointer-events: auto; }

.hud-sys { display: flex; gap: 6px; }
.ibtn {
  height: 44px; min-width: 44px; padding: 0 10px; border-radius: 11px; border: 1px solid var(--line); cursor: pointer;
  background: var(--glass); display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 900; font-size: 13px;
  box-shadow: var(--shadow); transition: border-color 0.15s, transform 0.08s;
}
.ibtn svg { width: 19px; height: 19px; }
.ibtn:hover { border-color: var(--line-strong); }
.ibtn:active { transform: scale(0.94); }
.ibtn.on { color: var(--gold); border-color: var(--gold2); }
.ibtn.off { color: var(--dim); }

.hud-cmd { position: absolute; top: 72px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.dock { display: flex; align-items: stretch; gap: 6px; padding: 6px; }
.unit-bar { display: flex; gap: 6px; }
.dock-sep { width: 1px; background: var(--line); margin: 4px 2px; }

.ucard {
  position: relative; width: 62px; height: 74px; border-radius: 10px; cursor: pointer; overflow: hidden; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(ellipse at 50% 100%, rgba(61, 139, 255, 0.28), rgba(61, 139, 255, 0) 70%), linear-gradient(180deg, #3a332c, #1e1a16);
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
}
.ucard:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); }
.ucard:active { transform: translateY(1px) scale(0.97); }
.ucard canvas { position: absolute; left: 3px; top: 2px; width: 56px; height: 54px; pointer-events: none; }
.ucard .hk { position: absolute; left: 4px; top: 4px; font-size: 10px; }
.ucard .qn {
  position: absolute; right: 4px; top: 4px; min-width: 19px; height: 19px; border-radius: 10px; padding: 0 5px;
  background: linear-gradient(180deg, #5aa1ff, #1c56c4); font-size: 11px; font-weight: 900; line-height: 19px; text-align: center; box-shadow: 0 0 8px rgba(61, 139, 255, 0.6);
}
.ucard .cost {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px;
  padding: 1px 7px 1px 4px; border-radius: 9px; background: rgba(0, 0, 0, 0.55); font-size: 11.5px; font-weight: 900; color: var(--gold); white-space: nowrap;
}
.ucard .cost .coin { width: 11px; height: 11px; box-shadow: none; }
.ucard .prog { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: linear-gradient(0deg, rgba(90, 160, 255, 0.45), rgba(90, 160, 255, 0.08)); pointer-events: none; }
.ucard .prog::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #9fd0ff; box-shadow: 0 0 8px #6fb2ff; }
.ucard.busy { border-color: rgba(120, 180, 255, 0.7); }
.ucard.poor .cost { color: #ff8577; }
.ucard.poor canvas { opacity: 0.55; filter: saturate(0.6); }
.ucard.locked { cursor: not-allowed; }
.ucard.locked canvas { opacity: 0.18; filter: grayscale(1); }
.ucard.locked .cost { display: none; }
.ucard .lock { display: none; position: absolute; inset: 0; place-items: center; color: rgba(255, 255, 255, 0.4); }
.ucard .lock svg { width: 20px; height: 20px; }
.ucard.locked .lock { display: grid; }
.ucard.denied { animation: shake 0.35s; }
.ucount {
  position: absolute; right: 4px; bottom: 24px; min-width: 22px; height: 17px; padding: 0 5px; border-radius: 9px; pointer-events: none;
  background: rgba(12, 9, 6, 0.8); border: 1px solid rgba(255, 255, 255, 0.24); color: #fff; font-size: 11px; font-weight: 900; line-height: 15px;
  text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); transition: opacity 0.2s, transform 0.2s;
}
.ucount.off { opacity: 0; transform: scale(0.5); }
.ucount.up { animation: cntUp 0.55s ease-out; }
.ucount.down { animation: cntDown 0.5s ease-out; }
@keyframes cntUp { 0% { transform: scale(1.7); background: #2a9d5e; border-color: #8ff0b0; box-shadow: 0 0 14px rgba(94, 224, 143, 0.95); } 100% { transform: scale(1); } }
@keyframes cntDown { 0% { background: #c42a20; border-color: #ff8a7a; box-shadow: 0 0 12px rgba(239, 65, 54, 0.95); } 25% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-1px); } 100% { transform: none; } }

@keyframes shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }

.research-btn {
  position: relative; width: 66px; border-radius: 10px; border: 1px solid rgba(160, 200, 255, 0.25); cursor: pointer; overflow: hidden;
  background: radial-gradient(ellipse at 50% 100%, rgba(140, 120, 255, 0.28), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #2e3142, #1a1c26);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 900;
}
.research-btn svg { width: 24px; height: 24px; color: #b7c6ff; }
.research-btn:hover, .research-btn.open { border-color: #a9c0ff; }
.research-btn .badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; font-size: 10px; background: #6c5cff; }
.rprog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #9fb5ff; box-shadow: 0 0 6px #9fb5ff; }

.stances { display: flex; gap: 5px; padding: 6px; }
.stance {
  width: 70px; height: 74px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer;
  background: linear-gradient(180deg, #3a332c, #1e1a16); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11.5px; font-weight: 900; transition: border-color 0.15s, transform 0.08s;
}
.stance svg { width: 24px; height: 24px; color: #e6dccb; }
.stance kbd { font-size: 9px; }
.stance:hover { border-color: var(--line-strong); }
.stance:active { transform: scale(0.96); }
.stance.active { border-color: var(--gold); background: linear-gradient(180deg, #7a5d1c, #3d2e10); box-shadow: inset 0 0 14px rgba(242, 193, 78, 0.35), 0 0 12px rgba(242, 193, 78, 0.2); }
.stance.active svg { color: #ffe08a; }

.popover { position: absolute; top: 158px; width: 340px; padding: 10px; z-index: 5; animation: popIn 0.18s ease-out; }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px); } }
.pop-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.pop-head b { font-family: var(--title); color: var(--gold); font-size: 15px; }
.pop-head span { font-size: 11.5px; color: var(--muted); }
.rrow { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 9px; }
.rrow + .rrow { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.rrow canvas { width: 38px; height: 40px; flex: 0 0 auto; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.rrow .ri { flex: 1; min-width: 0; }
.rrow .rn { font-weight: 900; font-size: 13.5px; }
.rrow .rd { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.rrow .rbar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); margin-top: 5px; overflow: hidden; }
.rrow .rbar i { display: block; height: 100%; width: 0; background: #9fb5ff; }
.rrow .rbuy {
  flex: 0 0 auto; min-width: 70px; height: 32px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer;
  background: linear-gradient(180deg, #4b8f55, #2a5a31); font-weight: 900; font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 4px;
}
.rrow .rbuy .coin { width: 12px; height: 12px; box-shadow: none; }
.rrow .rbuy:disabled { background: rgba(255, 255, 255, 0.06); color: var(--dim); cursor: not-allowed; }
.rrow.done .rbuy { background: none; border-color: rgba(94, 224, 143, 0.5); color: var(--green); }
.rrow.locked { opacity: 0.45; }

.tooltip {
  position: fixed; z-index: 50; max-width: 280px; padding: 10px 12px; pointer-events: none; border-radius: 11px;
  background: linear-gradient(180deg, rgba(36, 31, 26, 0.97), rgba(18, 15, 12, 0.97)); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  font-size: 12.5px; line-height: 1.45; color: var(--text);
}
.tooltip .tt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.tooltip .tt-title { font-family: var(--title); font-weight: 900; font-size: 14.5px; color: var(--gold); }
.tooltip .tt-desc { color: #e4dccd; }
.tooltip .tt-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 3px 14px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.tooltip .tt-stat { display: flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 700; font-size: 12px; white-space: nowrap; }
.tooltip .tt-stat svg { width: 13px; height: 13px; color: #d9cdb8; }
.tooltip .tt-stat b { color: var(--text); }
.tooltip .tt-army { margin-top: 6px; color: var(--muted); font-weight: 700; font-size: 12px; }
.tooltip .tt-army b { color: var(--text); }
.tooltip .tt-ok { margin-top: 6px; color: #8ff0b0; font-weight: 800; }
.tooltip .tt-run { margin-top: 6px; color: var(--gold); font-weight: 800; }
.tooltip .tt-warn { margin-top: 6px; color: #ff8a7a; font-weight: 800; }

.ctrl { position: absolute; top: 160px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-color: rgba(242, 193, 78, 0.5); animation: ctrlIn 0.2s ease-out; max-width: 94vw; }
@keyframes ctrlIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ctrl-portrait { position: relative; width: 52px; height: 52px; flex: 0 0 auto; }
.ctrl-portrait canvas { position: absolute; inset: 5px; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 50% 70%, rgba(61, 139, 255, 0.35), rgba(20, 18, 16, 0.9)); }
.ctrl-portrait .ring { position: absolute; inset: 0; width: 52px; height: 52px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 3.5; }
.ring-fg { fill: none; stroke: var(--green); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 122.5; stroke-dashoffset: 0; transition: stroke-dashoffset 0.2s, stroke 0.3s; }
.ctrl-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ctrl-head { display: flex; align-items: baseline; gap: 10px; }
.ctrl-head b { font-family: var(--title); font-size: 15px; color: var(--gold); white-space: nowrap; }
.ctrl-head span { font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.abilities { display: flex; gap: 6px; }
.ab { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ab .cd { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.ab.ready { border-color: rgba(242, 193, 78, 0.45); }
.ab.off { opacity: 0.45; }
.ctrl-exit { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); cursor: pointer; font-size: 11px; font-weight: 800; color: var(--muted); }
.ctrl-exit:hover { border-color: var(--line-strong); color: var(--text); }

.tip-box {
  position: absolute; right: 10px; top: 160px; width: 330px; max-width: calc(100vw - 20px); padding: 12px 14px;
  background: linear-gradient(180deg, rgba(44, 36, 22, 0.96), rgba(24, 20, 14, 0.96)); border: 1px solid rgba(242, 193, 78, 0.55); border-radius: 13px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); animation: slideIn 0.35s ease-out;
}
.tip-head { display: flex; align-items: center; gap: 9px; }
.tip-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #2b1d05; font-weight: 900; flex: 0 0 auto; }
.tip-head b { font-family: var(--title); color: var(--gold); font-size: 15px; flex: 1; }
.tip-step { font-size: 11px; color: var(--muted); font-weight: 800; }
.tip-box p { margin: 8px 0 10px; font-size: 13.5px; line-height: 1.5; color: #efe6d6; }
.tip-foot { display: flex; justify-content: space-between; align-items: center; }
.link { background: none; border: none; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } }

#toasts { position: absolute; top: 162px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border-radius: 20px; font-size: 13px; font-weight: 800;
  background: rgba(18, 15, 12, 0.92); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); animation: toastIn 0.25s ease-out; white-space: nowrap;
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.toast.alert { border-color: rgba(239, 65, 54, 0.5); }
.toast.alert::before { background: var(--red); box-shadow: 0 0 8px var(--red); }
.toast.good::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.toast.out { opacity: 0; transform: translateY(-6px); transition: all 0.4s; }
@keyframes toastIn { from { transform: translateY(-8px); opacity: 0; } }

#announce { position: absolute; left: 0; right: 0; top: 32%; text-align: center; pointer-events: none; opacity: 0; }
#announce span {
  display: inline-block; padding: 6px 34px; font-family: var(--title); font-weight: 900; font-size: clamp(26px, 5vw, 56px); letter-spacing: 4px; color: #fff3d6;
  text-shadow: 0 0 22px rgba(255, 150, 60, 0.75), 0 3px 0 #000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55) 20%, rgba(0, 0, 0, 0.55) 80%, rgba(0, 0, 0, 0));
  border-top: 1px solid rgba(242, 193, 78, 0.6); border-bottom: 1px solid rgba(242, 193, 78, 0.6);
}
#announce.show { animation: announce 2.8s ease-out forwards; }
@keyframes announce { 0% { opacity: 0; transform: scale(1.25); letter-spacing: 14px; } 14% { opacity: 1; transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }

.touch-pad { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: space-between; padding: 0 14px; pointer-events: none; }
.touch-pad .dpad { position: relative; width: 150px; height: 150px; pointer-events: auto; }
.touch-pad button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(20, 18, 15, 0.55); color: #fff; font-size: 18px; font-weight: 900; }
.touch-pad .up { left: 49px; top: 0; }
.touch-pad .down { left: 49px; bottom: 0; }
.touch-pad .left { left: 0; top: 49px; }
.touch-pad .right { right: 0; top: 49px; }
.touch-pad .actions { position: relative; display: grid; grid-template-columns: repeat(2, 70px); gap: 10px; pointer-events: auto; align-self: flex-end; }
.touch-pad .actions button { position: static; width: 70px; height: 56px; border-radius: 14px; font-size: 13px; }
.touch-pad .actions .act-main { background: rgba(190, 60, 40, 0.7); }
.touch-pad button.held { background: rgba(242, 193, 78, 0.55); }

/* ===================== Screens ===================== */
#screens { position: absolute; inset: 0; pointer-events: none; }
.screen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(8, 6, 4, 0.45), rgba(8, 6, 4, 0.82)); animation: fadeIn 0.25s ease-out;
}
#scr-main { justify-content: flex-start; padding-left: max(18px, 6vw); background: linear-gradient(90deg, rgba(8, 6, 4, 0.88), rgba(8, 6, 4, 0.45) 45%, rgba(8, 6, 4, 0) 75%); }
@keyframes fadeIn { from { opacity: 0; } }
#fader { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.35s; z-index: 100; }
#fader.on { opacity: 1; }

.panel {
  width: min(580px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 20px 24px;
  background: linear-gradient(180deg, rgba(38, 32, 26, 0.97), rgba(20, 17, 14, 0.97)); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05); animation: rise 0.3s ease-out;
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
.panel.wide { width: min(1000px, 100%); }
.panel.narrow { width: min(420px, 100%); }
.panel.center { text-align: center; }
.panel h2 { margin: 0; font-family: var(--title); font-size: 26px; color: var(--gold); letter-spacing: 1px; }
.panel h3 { margin: 0 0 6px; font-family: var(--title); color: var(--gold); font-size: 16px; }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h2 { flex: 1; }
.panel-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.panel-foot .btn:first-child:not(:last-child) { margin-right: auto; }
.back-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); font-size: 22px; font-weight: 900; cursor: pointer; line-height: 1; padding-bottom: 3px; }
.back-btn:hover { border-color: var(--line-strong); }
.hint { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; }
.sec-title { margin: 18px 0 8px !important; }

.btn {
  padding: 11px 20px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; font-size: 15px; font-weight: 900;
  background: linear-gradient(180deg, #4a4036, #2c2620); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.08s, filter 0.15s; letter-spacing: 0.2px;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.btn.primary { background: linear-gradient(180deg, #e04a33, #962216); border-color: rgba(255, 160, 130, 0.35); }
.btn.gold { background: linear-gradient(180deg, #d7a530, #7d5c10); color: #fff8e0; }
.btn.danger { background: linear-gradient(180deg, #6d2a25, #3d1714); }
.btn.big { font-size: 17px; padding: 13px 24px; }
.btn.small { padding: 6px 13px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); }
.menu-stack { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.mrow { display: flex; gap: 9px; }
.mrow > * { flex: 1; }

/* main menu */
.main-menu { width: min(470px, 100%); animation: rise 0.5s ease-out; }
.logo-units { display: flex; gap: 2px; height: 76px; margin-bottom: 4px; }
.logo-units canvas { width: 60px; height: 76px; }
.logo { margin: 0 0 22px; line-height: 0.9; font-family: var(--title); }
.logo .l1 { display: block; font-size: clamp(26px, 4.4vw, 40px); letter-spacing: 7px; color: #efe7d8; text-transform: uppercase; text-shadow: 0 3px 0 #000; }
.logo .l2 {
  display: block; font-size: clamp(42px, 7.6vw, 80px); letter-spacing: 2px; text-transform: uppercase; line-height: 1.12; padding-top: 0.08em; margin-top: -0.12em;
  background: linear-gradient(180deg, #fff1b8 0%, #f2c14e 45%, #b47a1c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #2a1a04) drop-shadow(0 0 22px rgba(242, 193, 78, 0.25));
}
.logo .l3 { display: block; margin-top: 10px; font-family: var(--ui); font-size: 15px; font-weight: 900; color: #ff9a76; letter-spacing: 9px; text-transform: uppercase; }
.menu-list { display: flex; flex-direction: column; gap: 10px; }
.mcard {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: var(--glass); box-shadow: var(--shadow); transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.mcard svg { width: 30px; height: 30px; color: #e9dcc4; flex: 0 0 auto; }
.mcard b { display: block; font-size: 18px; font-weight: 900; }
.mcard em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.mcard:hover { transform: translateX(6px); border-color: var(--line-strong); }
.mcard.primary { background: linear-gradient(100deg, rgba(200, 60, 40, 0.95), rgba(120, 30, 18, 0.92)); border-color: rgba(255, 170, 140, 0.35); }
.mcard.primary em { color: #ffd0c0; }
.mcard.small { justify-content: center; padding: 10px; }
.mcard.small b { font-size: 14.5px; }
.foot { color: var(--dim); font-size: 12px; margin-top: 22px; }

/* campaign */
.campaign { display: flex; gap: 14px; width: min(1180px, 100%); height: min(640px, calc(100vh - 36px)); animation: rise 0.3s ease-out; }
.camp-map { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; width: auto; max-height: none; }
.map-wrap {
  position: relative; flex: 1; min-height: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(120, 90, 50, 0.6);
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 245, 210, 0.95), rgba(222, 196, 146, 0.95) 60%, rgba(176, 140, 88, 0.95)), #d9c093;
  box-shadow: inset 0 0 40px rgba(90, 60, 20, 0.45);
}
.map-svg { width: 100%; height: 100%; display: block; }
.map-svg .terrain { opacity: 0.55; }
.map-svg .route { fill: none; stroke: #6b4a22; stroke-width: 3.5; stroke-dasharray: 2 10; stroke-linecap: round; opacity: 0.7; }
.map-svg .route.done { stroke: #a23a1c; opacity: 0.9; stroke-dasharray: none; stroke-width: 4; }
.map-svg .node { cursor: pointer; }
.map-svg .node circle.base { stroke: #3b2610; stroke-width: 3; }
.map-svg .node text { font-family: var(--title); font-weight: 900; text-anchor: middle; pointer-events: none; }
.map-svg .node .num { font-size: 20px; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.45); stroke-width: 3px; }
.map-svg .node .lbl { font-family: var(--ui); font-size: 13px; fill: #3b2610; font-weight: 900; }
.map-svg .node .st { font-size: 13px; fill: #c9a24a; }
.map-svg .node .st.on { fill: #e2a91a; }
.map-svg .node.locked { cursor: not-allowed; }
.map-svg .node.locked circle.base { fill: #8d8274 !important; }
.map-svg .node.locked .lbl { fill: #7a6a55; }
.map-svg .node .sel { fill: none; stroke: #c4241a; stroke-width: 3; opacity: 0; }
.map-svg .node.selected .sel { opacity: 1; }
.map-svg .node.current .pulse { animation: pulse 1.6s infinite; transform-origin: center; transform-box: fill-box; }
.map-svg .node:hover circle.base { filter: brightness(1.15); }
@keyframes pulse { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.camp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.stars-total { color: var(--muted); font-weight: 800; font-size: 14px; }
.stars-total b { color: var(--gold); }
.camp-detail { width: 360px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; max-height: none; overflow: auto; }
.cd-top { display: flex; align-items: center; gap: 12px; }
.cd-top h3 { margin: 0; font-size: 21px; }
.cd-type { font-size: 11px; font-weight: 900; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.lvl-num { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; background: linear-gradient(180deg, #ffd56a, #c48b18); color: #2b1d05; font-family: var(--title); font-weight: 900; font-size: 19px; flex: 0 0 auto; box-shadow: 0 0 14px rgba(242, 193, 78, 0.35); }
.story { font-size: 14px; line-height: 1.6; color: #e9e0cf; margin: 0; }
.objective-box { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px; background: rgba(242, 193, 78, 0.1); border: 1px solid rgba(242, 193, 78, 0.35); font-size: 14px; font-weight: 800; }
.objective-box svg { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; }
.unlock-box { padding: 10px 12px; border-radius: 10px; background: rgba(61, 139, 255, 0.12); border: 1px solid rgba(61, 139, 255, 0.4); font-size: 13px; line-height: 1.5; }
.unlock-box b { color: #9cc4ff; }
.cd-section { display: flex; flex-direction: column; gap: 6px; }
.cd-label { font-size: 11px; font-weight: 900; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.mini-units { display: flex; gap: 5px; flex-wrap: wrap; }
.mini-units canvas { width: 44px; height: 48px; border-radius: 9px; background: radial-gradient(ellipse at 50% 100%, rgba(61, 139, 255, 0.25), rgba(255, 255, 255, 0.03) 70%); border: 1px solid rgba(255, 255, 255, 0.08); }
.mini-units.enemy canvas { background: radial-gradient(ellipse at 50% 100%, rgba(239, 65, 54, 0.25), rgba(255, 255, 255, 0.03) 70%); }
.cd-stars { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: auto; }
.cd-stars div { display: flex; align-items: center; gap: 7px; }
.cd-stars svg { width: 15px; height: 15px; color: rgba(255, 255, 255, 0.2); }
.cd-stars .on svg { color: var(--gold); }

.seg { display: inline-flex; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.25); }
.seg button { padding: 7px 14px; background: transparent; border: none; cursor: pointer; font-weight: 900; font-size: 13px; color: var(--muted); }
.seg button + button { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.seg button:hover { color: var(--text); }
.seg button.on { background: linear-gradient(180deg, #d7a530, #7d5c10); color: #fff; }

.points-pill { padding: 6px 14px; border-radius: 20px; background: rgba(242, 193, 78, 0.12); border: 1px solid rgba(242, 193, 78, 0.4); font-weight: 800; color: var(--muted); }
.points-pill b { color: var(--gold); font-size: 20px; margin-left: 4px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.shop-group { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 10px 12px; background: rgba(0, 0, 0, 0.22); }
.shop-group header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-family: var(--title); font-weight: 900; color: var(--gold); font-size: 15px; }
.shop-body { display: flex; gap: 10px; align-items: stretch; }
.shop-prev { width: 104px; height: 128px; flex: 0 0 auto; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.25)); border: 1px solid rgba(255, 255, 255, 0.08); align-self: center; }
.shop-rows { flex: 1; min-width: 0; }
.shop-rows .upg:first-child { border-top: none; }
.pips i.new { animation: pipPop 0.5s ease-out; }
@keyframes pipPop { 0% { transform: scale(2.2); box-shadow: 0 0 14px #ffd56a; } 100% { transform: scale(1); } }
.upg { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.upg .info { flex: 1; min-width: 0; }
.upg .nm { font-weight: 900; font-size: 14px; }
.upg .ds { font-size: 12px; color: var(--muted); }
.pips { display: flex; gap: 4px; margin-top: 4px; }
.pips i { width: 16px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.pips i.on { background: linear-gradient(90deg, #ffd56a, #e0a52a); box-shadow: 0 0 6px rgba(242, 193, 78, 0.5); }
.upg button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.22); background: linear-gradient(180deg, #4b9a58, #275c30); color: #fff; font-size: 21px; font-weight: 900; cursor: pointer; }
.upg button:disabled { background: rgba(255, 255, 255, 0.06); color: #666; cursor: not-allowed; }
.upg.maxed .nm::after { content: " ✓"; color: var(--green); }

.form { display: flex; flex-direction: column; gap: 13px; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14.5px; font-weight: 800; }
.field.col { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
.field input[type=range] { width: 210px; accent-color: var(--gold); }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-auto-rows: 58px; align-content: start; gap: 8px; }
.theme-sw { position: relative; height: 58px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; overflow: hidden; display: flex; align-items: flex-end; padding: 0; }
.theme-sw span { position: relative; width: 100%; padding: 3px 6px; font-size: 11px; font-weight: 900; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); text-align: left; }
.theme-sw.on { border-color: var(--gold); box-shadow: 0 0 12px rgba(242, 193, 78, 0.4); }
.switch { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.switch input { display: none; }
.switch i { position: relative; width: 42px; height: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.15); transition: background 0.2s; flex: 0 0 auto; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #e9e1d2; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.switch input:checked + i { background: linear-gradient(90deg, #d7a530, #a07418); }
.switch input:checked + i::after { transform: translateX(18px); }
.record { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; background: rgba(242, 193, 78, 0.1); border: 1px solid rgba(242, 193, 78, 0.35); color: var(--muted); font-weight: 800; }
.record svg { width: 20px; height: 20px; color: var(--gold); }
.record b { font-family: var(--title); font-size: 24px; color: var(--gold); }

/* training */
.train-sec { margin-bottom: 4px; }
.ts-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ts-head h3 { margin: 0 0 2px; font-family: var(--title); color: var(--gold); font-size: 20px; letter-spacing: 1px; }
.ts-head p { margin: 0; color: var(--muted); font-size: 13px; }
.ts-prog { flex: 0 0 auto; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--gold); font-weight: 900; font-size: 13px; background: rgba(242, 193, 78, 0.08); }
.train-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.tcard {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.25)); border: 1px solid rgba(255, 255, 255, 0.09);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tcard:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(242, 193, 78, 0.15) inset; }
.tcard canvas { width: 76px; height: 92px; flex: 0 0 auto; border-radius: 10px; background: radial-gradient(circle at 50% 85%, rgba(61, 139, 255, 0.18), rgba(0, 0, 0, 0.25) 70%); }
.tc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tc-info b { font-family: var(--title); color: var(--text); font-size: 16px; }
.tc-info span { font-size: 12px; color: var(--gold); font-weight: 800; }
.tc-info em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.tc-go { flex: 0 0 auto; padding: 7px 12px; border-radius: 10px; font-weight: 900; font-size: 13px; color: #241703; background: linear-gradient(180deg, #ffe08a, #e0a52c); box-shadow: 0 2px 0 #7a5410; }
.tcard.done .tc-go { color: #d8f5e2; background: linear-gradient(180deg, rgba(94, 224, 143, 0.28), rgba(40, 120, 70, 0.35)); box-shadow: none; border: 1px solid rgba(94, 224, 143, 0.45); }
.train { padding: 9px 12px 10px; display: flex; flex-direction: column; gap: 6px; animation: rise 0.3s ease-out; }
.tr-head { display: flex; align-items: center; gap: 8px; }
.tr-badge { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #241703; background: var(--gold); }
.tr-head b { font-family: var(--title); font-size: 15px; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-count { font-size: 12px; font-weight: 900; color: var(--muted); }
.tr-exit { padding: 3px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.25); font-size: 12px; font-weight: 800; cursor: pointer; }
.tr-exit:hover { border-color: var(--line-strong); }
.tr-cur b { display: block; color: var(--gold); font-size: 14px; font-weight: 900; }
.tr-cur p { margin: 2px 0 6px; font-size: 13px; line-height: 1.45; color: #ece3d2; }
.tr-bar { position: relative; height: 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; }
.tr-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #e0a52c, #ffe08a); transition: width 0.25s ease-out; }
.tr-bar span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 15px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; }
.tr-dots { display: flex; gap: 5px; justify-content: center; }
.tr-dots i { width: 22px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); transition: background 0.3s; }
.tr-dots i.done { background: var(--green); }
.tr-dots i.cur { background: var(--gold); box-shadow: 0 0 8px rgba(242, 193, 78, 0.6); }
#hud.training .ctrl { top: auto; bottom: 12px; }
#hud.training .versus, #hud.training .hud-cmd, #hud.training #b-speed, #hud.training .res-pop, #hud.training #cc-exit { display: none !important; }
.train.pulse { animation: trPulse 0.6s ease-out; }
@keyframes trPulse { 0% { box-shadow: 0 0 0 0 rgba(94, 224, 143, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(94, 224, 143, 0); } }

.howto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.how-card { padding: 12px 14px; border-radius: 13px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.08); }
.how-card p, .how-card li { font-size: 13.5px; line-height: 1.6; color: #e5dccb; margin: 0; }
.how-card ul { padding-left: 18px; margin: 4px 0 0; }
.howto-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.hu { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.08); }
.hu canvas { width: 50px; height: 54px; flex: 0 0 auto; }
.hu b { font-family: var(--title); color: var(--gold); }
.hu p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.hu .cst { font-size: 12px; color: #e9e0cf; font-weight: 700; }

.result { padding-top: 0; overflow: visible; }
.result-ribbon { margin: 0 -24px 10px; padding: 18px 10px 14px; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, rgba(242, 193, 78, 0.28), rgba(242, 193, 78, 0)); border-bottom: 1px solid rgba(242, 193, 78, 0.3); }
.result-ribbon.lose { background: linear-gradient(180deg, rgba(239, 65, 54, 0.3), rgba(239, 65, 54, 0)); border-bottom-color: rgba(239, 65, 54, 0.35); }
.result h2 { font-size: 40px; text-shadow: 0 0 20px rgba(242, 193, 78, 0.4); }
.result-ribbon.lose h2 { color: #ff7466; text-shadow: 0 0 20px rgba(239, 65, 54, 0.4); }
.stars { display: flex; justify-content: center; gap: 8px; margin-bottom: 6px; }
.stars svg { width: 46px; height: 46px; color: rgba(255, 255, 255, 0.14); }
.stars .on svg { color: var(--gold); filter: drop-shadow(0 0 10px rgba(242, 193, 78, 0.7)); animation: starPop 0.5s backwards; }
.stars span:nth-child(2) svg { width: 56px; height: 56px; margin-top: -8px; }
@keyframes starPop { from { transform: scale(2.4) rotate(-40deg); opacity: 0; } }
.r-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; line-height: 1.5; }
.r-stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; text-align: left; font-size: 14px; margin: 0 auto 14px; max-width: 290px; font-weight: 700; color: var(--muted); }
.r-stats b { text-align: right; color: var(--text); font-weight: 900; }
.r-points { margin: 0 0 6px; padding: 9px; border-radius: 10px; background: rgba(94, 224, 143, 0.12); border: 1px solid rgba(94, 224, 143, 0.4); color: #a7f3c0; font-weight: 900; }

.panel.reward { width: min(860px, 100%); }
.reward h2 { margin: 2px 0 4px; font-size: 32px; text-shadow: 0 0 20px rgba(242, 193, 78, 0.4); }
.rw-wave { display: block; color: var(--gold); font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; }
.rw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.rw-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 12px; border-radius: 14px; cursor: pointer;
  color: var(--text); font: inherit; text-align: center; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(64, 52, 36, 0.95), rgba(26, 22, 17, 0.98)); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; animation: rwIn 0.45s backwards;
}
.rw-card:nth-child(2) { animation-delay: 0.08s; }
.rw-card:nth-child(3) { animation-delay: 0.16s; }
@keyframes rwIn { from { transform: translateY(26px) rotate(-3deg); opacity: 0; } }
.rw-card:hover, .rw-card:focus-visible { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 10px 0 rgba(0, 0, 0, 0.45), 0 0 26px rgba(242, 193, 78, 0.35); outline: none; }
.rw-card:active { transform: translateY(0); }
.rw-card kbd { position: absolute; top: 8px; left: 8px; }
.rw-tag { font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; padding: 2px 9px; border-radius: 99px; background: rgba(242, 193, 78, 0.16); color: var(--gold); }
.rw-art { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(242, 193, 78, 0.22), rgba(0, 0, 0, 0) 70%); }
.rw-art canvas { width: 96px; height: 96px; }
.rw-art svg { width: 54px; height: 54px; color: var(--gold); filter: drop-shadow(0 0 10px rgba(242, 193, 78, 0.5)); }
.rw-title { font-family: var(--title); font-size: 17px; font-weight: 900; line-height: 1.2; }
.rw-sub { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.rw-stat { font-size: 14px; font-weight: 900; color: #a7f3c0; }
.rw-card.t-repair .rw-art svg { color: var(--green); filter: drop-shadow(0 0 10px rgba(94, 224, 143, 0.5)); }
.rw-card.t-repair .rw-tag { background: rgba(94, 224, 143, 0.16); color: var(--green); }
.rw-card.tier-4 { border-color: rgba(120, 230, 255, 0.7); }
.rw-card.tier-4 .rw-title { color: #9eeaff; }
.rw-card.tier-3 .rw-title { color: #ffd76a; }
@media (max-width: 640px) {
  .rw-cards { grid-template-columns: 1fr; gap: 9px; }
  .rw-card { flex-direction: row; text-align: left; gap: 10px; padding: 26px 12px 10px 12px; }
  .rw-tag { position: absolute; top: 7px; right: 10px; font-size: 10px; }
  .rw-art, .rw-art canvas { width: 58px; height: 58px; }
  .rw-art svg { width: 34px; height: 34px; }
  .rw-card .rw-txt { flex: 1; min-width: 0; }
}
@media (max-height: 520px) {
  .reward h2 { font-size: 24px; }
  .rw-art, .rw-art canvas { width: 64px; height: 64px; }
}

.rotate-hint { display: none; }

/* ===================== Responsive ===================== */
@media (max-width: 1180px) {
  .ucard { width: 56px; height: 68px; }
  .ucard canvas { width: 50px; height: 48px; }
  .stance { width: 62px; height: 68px; }
  .research-btn { width: 58px; }
  .camp-detail { width: 320px; }
}

@media (max-height: 600px), (max-width: 900px) {
  .hud-top { top: 5px; left: 5px; right: 5px; gap: 6px; }
  .hud-res { height: 40px; gap: 10px; padding: 4px 10px; }
  .res b { font-size: 16px; }
  .pop-col b { font-size: 14px; }
  .res-sub { display: none; }
  .pop-col .res-sub { display: inline; }
  .pop-bar { width: 44px; }
  .coin { width: 16px; height: 16px; }
  .res .ico { width: 17px; height: 17px; }
  .versus { height: 40px; padding: 4px 8px; }
  .crest { width: 22px; height: 22px; }
  .crest svg { width: 13px; height: 13px; }
  .vs-mid { min-width: 100px; }
  .vs-obj { font-size: 11px; }
  .vs-time { font-size: 10.5px; }
  .hud-center { min-width: 200px; gap: 4px; }
  #minimap { height: 24px; }
  .mm-wrap { min-width: 70px; }
  .ibtn { height: 34px; min-width: 34px; padding: 0 7px; }
  .ibtn svg { width: 15px; height: 15px; }
  .hud-cmd { top: 52px; left: 5px; right: 5px; }
  .dock, .stances { padding: 4px; gap: 4px; }
  .unit-bar { gap: 4px; }
  .ucard { width: 44px; height: 54px; border-radius: 8px; }
  .ucard canvas { left: 2px; top: 1px; width: 40px; height: 38px; }
  .ucard .hk { display: none; }
  .ucard .cost { font-size: 9.5px; padding: 0 5px 0 3px; bottom: 2px; }
  .ucard .cost .coin { width: 8px; height: 8px; }
  .ucard .qn { min-width: 15px; height: 15px; line-height: 15px; font-size: 9.5px; top: 2px; right: 2px; }
  .ucard .ucount { min-width: 16px; height: 14px; line-height: 12px; font-size: 9.5px; padding: 0 3px; right: 2px; bottom: 17px; }
  .research-btn { width: 44px; }
  .research-btn span { display: none; }
  .research-btn svg { width: 20px; height: 20px; }
  .stance { width: 46px; height: 54px; font-size: 9px; }
  .stance svg { width: 18px; height: 18px; }
  .stance kbd { display: none; }
  .popover { top: 112px; width: 300px; }
  .ctrl { top: 114px; padding: 5px 8px 5px 5px; gap: 8px; }
  .ctrl-portrait { width: 40px; height: 40px; }
  .ctrl-portrait canvas { inset: 4px; width: 32px; height: 32px; }
  .ctrl-portrait .ring { width: 40px; height: 40px; }
  .ab { font-size: 10.5px; padding: 3px 7px 3px 4px; }
  .ab kbd { font-size: 9px; }
  .ctrl-exit { padding: 4px 6px; }
  .tip-box { top: 114px; width: 270px; padding: 9px 11px; }
  .tip-box p { font-size: 12px; margin: 5px 0 7px; }
  #toasts { top: 116px; }
  .toast { font-size: 11.5px; padding: 5px 11px 5px 8px; }
  .panel { padding: 14px 16px; max-height: calc(100vh - 16px); }
  .panel h2 { font-size: 21px; }
  .screen { padding: 8px; }
  .logo { margin-bottom: 12px; }
  .logo-units { height: 50px; }
  .logo-units canvas { width: 40px; height: 50px; }
  .menu-list { gap: 7px; }
  .mcard { padding: 8px 14px; }
  .mcard b { font-size: 15px; }
  .mcard em { font-size: 11px; }
  .mcard svg { width: 22px; height: 22px; }
  .campaign { height: calc(100vh - 16px); gap: 8px; }
  .camp-map { padding: 10px 12px; }
  .camp-detail { width: 280px; padding: 12px 14px; gap: 8px; }
  .story { font-size: 12.5px; }
  .howto { grid-template-columns: 1fr; }
  .touch-pad .dpad { width: 124px; height: 124px; }
  .touch-pad button { width: 44px; height: 44px; font-size: 15px; }
  .touch-pad .up, .touch-pad .down { left: 40px; }
  .touch-pad .left, .touch-pad .right { top: 40px; }
  .touch-pad .actions { grid-template-columns: repeat(2, 60px); gap: 7px; }
  .touch-pad .actions button { width: 60px; height: 46px; font-size: 12px; }
}

@media (max-width: 680px) {
  .stance span { display: none; }
  .stance { width: 36px; }
  .ucard { width: 38px; }
  .ucard canvas { width: 34px; }
  .vs-mid { min-width: 70px; }
  .vs-obj { display: none; }
  .campaign { flex-direction: column; height: auto; max-height: calc(100vh - 16px); overflow: auto; }
  .camp-map { min-height: 300px; }
  .camp-detail { width: 100%; }
}

@media (orientation: portrait) and (max-width: 700px) {
  .rotate-hint {
    display: block; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 8px 14px; border-radius: 20px;
    background: rgba(0, 0, 0, 0.7); font-size: 13px; color: var(--muted); pointer-events: none; white-space: nowrap;
  }
}

/* loader */
.loader { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #2a2017 0%, #0d0b0a 70%); transition: opacity 0.5s ease; }
.loader.out { opacity: 0; pointer-events: none; }
.ld-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ld-emblem { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #241703; background: linear-gradient(180deg, #ffe08a, #c58a1e); box-shadow: 0 0 0 4px rgba(242, 193, 78, 0.18), 0 0 40px rgba(242, 193, 78, 0.35); animation: ldPulse 1.6s ease-in-out infinite; }
.ld-emblem svg { width: 34px; height: 34px; }
.ld-name { font-family: var(--title); font-weight: 900; font-size: 30px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.ld-bar { width: 220px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: linear-gradient(90deg, #b8862a, #ffe08a); animation: ldSlide 1.2s ease-in-out infinite; }
.ld-tip { color: var(--muted); font-size: 13px; font-weight: 700; }
@keyframes ldPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ldSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

/* credits */
.credits { text-align: center; padding: 6px 4px 2px; }
.cr-logo { font-family: var(--title); font-weight: 900; font-size: 30px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.cr-ver { color: var(--muted); font-size: 13px; font-weight: 800; margin: 2px 0 16px; }
.cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.cr-grid div { padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.08); }
.cr-grid b { display: block; color: var(--gold); font-size: 13px; margin-bottom: 2px; }
.cr-grid span { color: #e5dccb; font-size: 13px; line-height: 1.45; }
.cr-note { color: var(--muted); font-size: 12.5px; margin: 14px 0 0; }
.save-row { display: flex; gap: 8px; flex-wrap: wrap; }
.menu-list .mrow .mcard.small { flex: 1; }

/* accessibility */
#hud { width: calc(100% / var(--ui-scale, 1)); height: calc(100% / var(--ui-scale, 1)); right: auto; bottom: auto; zoom: var(--ui-scale, 1); }
body.cb .vs-bar.red .fill { background: linear-gradient(180deg, #ffd08a, #e07a12); }
body.cb .crest.red { background: linear-gradient(160deg, #ffb45e, #c06a10); box-shadow: 0 0 10px rgba(255, 160, 50, 0.45); }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
@media (max-width: 680px) { .cr-grid { grid-template-columns: 1fr; } }


/* responsive menus */
.screen { overflow-y: auto; overflow-x: hidden; align-items: flex-start; }
.screen > * { margin: auto; flex-shrink: 0; }
#scr-main > .main-menu { margin: auto 0; }
.panel { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.main-menu { width: min(1080px, 100%); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(270px, 430px); column-gap: clamp(20px, 5vw, 80px); align-items: center; }
.main-menu .logo-units, .main-menu .logo, .main-menu .foot { grid-column: 1; }
.main-menu .menu-list { grid-column: 2; grid-row: 1 / span 3; }
.logo-units { height: clamp(40px, 10vh, 80px); margin-bottom: clamp(0px, 0.6vh, 6px); }
.logo-units canvas { height: 100%; width: clamp(32px, 7.9vh, 63px); }
.logo { margin: 0 0 clamp(4px, 1.6vh, 18px); }
.logo .l2 { font-size: clamp(28px, min(6.4vw, 10.5vh), 96px); }
.logo .l3 { margin-top: clamp(4px, 1.2vh, 10px); font-size: clamp(10px, min(1.4vw, 2.1vh), 16px); letter-spacing: clamp(2px, 0.7vw, 9px); }
.menu-list { gap: clamp(5px, 1.2vh, 10px); }
.mcard { padding: clamp(6px, 1.5vh, 13px) clamp(12px, 1.4vw, 18px); gap: clamp(8px, 1.2vw, 14px); }
.mcard b { font-size: clamp(14px, 2.4vh, 18px); }
.mcard em { font-size: clamp(10.5px, 1.6vh, 12.5px); }
.mcard svg { width: clamp(20px, 3.6vh, 30px); height: clamp(20px, 3.6vh, 30px); }
.mcard.small { padding: clamp(6px, 1.3vh, 10px) 8px; }
.mcard.small b { font-size: clamp(12px, 2vh, 14.5px); }
.foot { margin-top: clamp(6px, 2vh, 22px); }
@media (max-aspect-ratio: 5/4), (max-width: 760px) {
  .main-menu { display: flex; flex-direction: column; width: min(470px, 100%); }
  #scr-main { justify-content: center; padding-left: 18px; background: radial-gradient(ellipse at center, rgba(8, 6, 4, 0.55), rgba(8, 6, 4, 0.85)); }
  #scr-main > .main-menu { margin: auto; }
  .logo .l2 { font-size: clamp(28px, min(11vw, 7.5vh), 72px); }
}
@media (max-height: 470px) {
  .mcard em, .logo-units, .foot { display: none; }
}
@media (max-height: 340px) {
  .logo .l3 { display: none; }
}
@media (min-width: 1900px) and (min-height: 1050px) {
  .main-menu { zoom: 1.3; }
}
:root { --scr-pad: 18px; }
@media (max-height: 600px), (max-width: 900px) { :root { --scr-pad: 8px; } }
.screen { padding: var(--scr-pad); }
#scr-main { padding-left: max(var(--scr-pad), 6vw); }
.panel { max-height: calc(100vh - 2 * var(--scr-pad)); max-height: calc(100dvh - 2 * var(--scr-pad)); }
.campaign { height: min(640px, calc(100vh - 2 * var(--scr-pad))); height: min(640px, calc(100dvh - 2 * var(--scr-pad))); }
@media (max-width: 680px) { .campaign { height: auto; max-height: calc(100dvh - 2 * var(--scr-pad)); } }
@media (max-aspect-ratio: 5/4), (max-width: 760px) { #scr-main { padding-left: var(--scr-pad); } }

/* versus */
#vs-tabs { margin-left: auto; }
.txt { width: min(260px, 100%); padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.35); color: var(--text); font: 800 14px var(--ui); outline: none; user-select: text; -webkit-user-select: text; }
.txt:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.15); }
.txt.code { width: 110px; text-align: center; letter-spacing: 6px; font-size: 18px; text-transform: uppercase; }
.keys2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 10px; }
.kp { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border-radius: 13px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; color: #e5dccb; }
.kp.blue { border-left: 4px solid var(--blue); }
.kp.red { border-left: 4px solid var(--red); }
.kp b { font-family: var(--title); color: var(--gold); font-size: 15px; }
.kp kbd { margin-right: 3px; }
.online-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 10px; }
.og-card { padding: 14px; border-radius: 13px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.og-card b { font-family: var(--title); color: var(--gold); font-size: 16px; }
.og-card p { margin: 0; color: var(--muted); font-size: 13px; }
.join-row { display: flex; gap: 8px; }
.vs-status { margin: 4px 0 12px; padding: 10px 14px; border-radius: 11px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px; font-weight: 700; color: #ece3d2; }
.vs-status.ok { border-color: rgba(94, 224, 143, 0.45); }
.vs-status.bad { border-color: rgba(239, 65, 54, 0.55); color: #ffc9c2; }
.room-code { display: inline-block; margin: 0 6px; padding: 2px 10px; border-radius: 8px; background: var(--gold); color: #241703; font-weight: 900; letter-spacing: 4px; font-size: 18px; }
.vs-cols { display: inline-flex; gap: 14px; }
.vs-cols .blue { color: #8cb8ff; font-style: normal; }
.vs-cols .red { color: #ff9b92; font-style: normal; }
#hud.online #b-speed { display: none; }
.vs-hud { position: absolute; inset: 0; pointer-events: none; }
.vs-hud button { pointer-events: auto; }
.vsp { position: absolute; left: 8px; display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); pointer-events: auto; max-width: calc(100% - 110px); }
#vsp0 { top: 8px; }
#vsp1 { top: calc(50% + 8px); }
.vsp-top { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.vsp-top .crest { width: 24px; height: 24px; }
.vsp-top .crest svg { width: 14px; height: 14px; }
.vsp-name { font-family: var(--title); font-size: 14px; }
.vsp.blue .vsp-name { color: #9cc6ff; }
.vsp.red .vsp-name { color: #ffb0a6; }
.vsp-gold, .vsp-pop { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; }
.vsp-gold b { color: var(--gold); min-width: 36px; }
.vsp-pop svg { width: 15px; height: 15px; color: #d8cdb8; }
.vsp-pop { color: var(--muted); font-size: 12px; }
.vsp-pop b { color: var(--text); font-size: 14px; }
.vsp-hp { width: 90px; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.vsp-hp i { display: block; height: 100%; background: linear-gradient(90deg, #5ee08f, #b6f5c9); transition: width 0.3s; }
.vsp-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vsp-row .sep { width: 1px; height: 30px; background: rgba(255, 255, 255, 0.12); margin: 0 3px; }
.vu, .vst, .vr { position: relative; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); border-radius: 8px; cursor: pointer; padding: 0; overflow: hidden; }
.vu { width: 40px; height: 46px; }
.vu canvas { position: absolute; left: 3px; top: 1px; width: 34px; height: 32px; }
.vu kbd { position: absolute; left: 2px; top: 2px; font-size: 9px; padding: 0 3px; min-width: 0; }
.vu .c { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-size: 10px; font-weight: 900; color: var(--gold); }
.vu .prog { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: rgba(242, 193, 78, 0.25); pointer-events: none; }
.vu .qn { position: absolute; right: 2px; top: 2px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--gold); color: #241703; font-size: 10px; font-weight: 900; line-height: 15px; text-align: center; }
.vu.poor { opacity: 0.55; }
.vu.poor .c { color: #ff8b80; }
.vu.denied { animation: shakeX 0.3s; }
.vu .ucount { right: 1px; bottom: 12px; min-width: 16px; height: 13px; line-height: 11px; font-size: 9px; padding: 0 3px; border-radius: 7px; }
.vst { width: 34px; height: 34px; display: grid; place-items: center; color: #e9dcc4; }
.vst svg { width: 17px; height: 17px; }
.vst kbd { position: absolute; right: 1px; bottom: 1px; font-size: 8px; padding: 0 2px; min-width: 0; }
.vst.active { background: linear-gradient(180deg, rgba(242, 193, 78, 0.45), rgba(150, 100, 20, 0.45)); border-color: var(--line-strong); color: #fff3cc; }
.vr-head {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 40px; height: 46px; padding: 0 4px;
  border-radius: 8px; border: 1px dashed rgba(94, 224, 143, 0.4); background: linear-gradient(180deg, rgba(94, 224, 143, 0.16), rgba(94, 224, 143, 0.03)); color: #a9ebc0;
}
.vr-head svg { width: 18px; height: 18px; }
.vr-head span { font-size: 7.5px; font-weight: 900; letter-spacing: 0.3px; text-transform: uppercase; }
.vr { width: 40px; height: 46px; transition: border-color 0.2s, background 0.2s, opacity 0.2s; }
.vr canvas { position: absolute; left: 3px; top: 1px; width: 34px; height: 32px; }
.vr kbd { position: absolute; left: 2px; top: 2px; font-size: 9px; padding: 0 3px; min-width: 0; }
.vr .c { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-size: 10px; font-weight: 900; color: var(--gold); }
.vr .prog { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: linear-gradient(0deg, rgba(94, 224, 143, 0.5), rgba(94, 224, 143, 0.12)); pointer-events: none; }
.vr.busy .prog::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #8ff0b0; box-shadow: 0 0 6px #5ee08f; }
.vr.busy { border-color: rgba(94, 224, 143, 0.85); animation: vrBusy 1.4s ease-in-out infinite; }
.vr.busy .c { color: #eafff1; }
.vr.poor canvas { opacity: 0.55; filter: saturate(0.6); }
.vr.poor .c { color: #ff8b80; }
.vr.wait { opacity: 0.45; }
.vr.done { border-color: rgba(94, 224, 143, 0.8); background: linear-gradient(180deg, rgba(94, 224, 143, 0.26), rgba(94, 224, 143, 0.06)); cursor: default; }
.vr.done .c { color: #8ff0b0; font-size: 12px; }
.vr.denied { animation: shakeX 0.3s; }
@keyframes vrBusy { 50% { box-shadow: 0 0 10px rgba(94, 224, 143, 0.65); } }
.vs-sys { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.vs-announce { display: none; }
@keyframes shakeX { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (max-height: 560px) {
  .vu { width: 32px; height: 36px; }
  .vu canvas { width: 28px; height: 24px; left: 2px; }
  .vu .c { font-size: 8.5px; }
  .vst { width: 28px; height: 28px; }
  .vr { width: 32px; height: 36px; }
  .vr canvas { width: 28px; height: 24px; left: 2px; }
  .vr .c { font-size: 8.5px; }
  .vr-head { min-width: 30px; height: 36px; }
  .vr-head span { display: none; }
  .vsp { padding: 4px 6px; gap: 3px; }
  .vsp-top { font-size: 12px; gap: 7px; }
  .vsp-name { display: none; }
}
@media (max-width: 760px) {
  .keys2, .online-grid { grid-template-columns: 1fr; }
  .vsp-hp { width: 54px; }
}
#hud.split .hud-top, #hud.split .hud-cmd, #hud.split .ctrl, #hud.split .tip-box, #hud.split #touch-pad, #hud.split .popover, #hud.split .train { display: none !important; }
#hud.split #announce { top: calc(50% - 34px); }
@media (max-aspect-ratio: 5/4), (max-width: 760px) {
  .main-menu { align-items: center; text-align: center; }
  .main-menu .logo-units { justify-content: center; }
  .main-menu .menu-list { width: 100%; text-align: left; }
}

/* shop gear */
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.shop-group { display: flex; flex-direction: column; }
.shop-group .shop-prev { width: 100%; height: clamp(150px, 26vh, 210px); align-self: stretch; margin: 2px 0 4px; }
.shop-hint { font-size: 11.5px; color: var(--dim); margin-bottom: 4px; }
.upg { cursor: pointer; border-radius: 10px; padding: 8px 6px; transition: background 0.15s; }
.upg:hover, .upg.peek { background: rgba(242, 193, 78, 0.08); }
.upg.peek { box-shadow: inset 3px 0 0 var(--gold); }
.upg .nm { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.upg .nm .lv { font-size: 11px; font-weight: 900; color: var(--muted); padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.upg .nm .leg { font-size: 10.5px; font-weight: 900; letter-spacing: 1px; color: #062433; padding: 1px 7px; border-radius: 6px; background: linear-gradient(90deg, #bff4ff, #4cc9f0); box-shadow: 0 0 10px rgba(80, 215, 255, 0.55); }
.upg.maxed .nm::after { content: none; }
.upg .cur { font-size: 12.5px; font-weight: 800; color: #e9dcc4; margin-top: 1px; }
.upg .st { font-size: 12.5px; color: #d6cdbb; margin-top: 2px; }
.upg .st .sl { color: var(--muted); }
.upg .st b { color: #fff; }
.upg .st b.up { color: #8ff0b0; }
.upg .st .arr { color: var(--gold); font-style: normal; font-weight: 900; }
.upg .st em { color: #8ff0b0; font-style: normal; font-weight: 800; font-size: 11.5px; }
.upg .nx { font-size: 12px; color: var(--muted); margin-top: 2px; }
.upg .nx b { color: var(--gold); }
.pips i.on.p-wood { background: linear-gradient(90deg, #d39a5b, #7a4a1c); box-shadow: none; }
.pips i.on.p-iron { background: linear-gradient(90deg, #f1f4f7, #6b7178); box-shadow: none; }
.pips i.on.p-gold { background: linear-gradient(90deg, #fff4b8, #c28a12); box-shadow: 0 0 6px rgba(242, 193, 78, 0.5); }
.pips i.on.p-legend { background: linear-gradient(90deg, #f4feff, #14a6d8); box-shadow: 0 0 8px rgba(80, 215, 255, 0.7); }
.upg .nm .leg.usta { color: #2a1c00; background: linear-gradient(90deg, #fff4b8, #e0a52c); box-shadow: 0 0 8px rgba(242, 193, 78, 0.5); }