:root {
  --sc-bg: #050b10;
  --sc-panel: rgba(7, 18, 26, 0.96);
  --sc-panel-soft: rgba(10, 26, 36, 0.90);
  --sc-card: rgba(14, 34, 46, 0.92);
  --sc-line: rgba(112, 188, 218, 0.24);
  --sc-line-strong: rgba(255, 178, 69, 0.62);
  --sc-text: #eef8fc;
  --sc-muted: #8fa9b6;
  --sc-accent: #ffb347;
  --sc-accent-2: #ff7a45;
  --sc-cyan: #53d4ec;
  --sc-green: #45dc98;
  --sc-danger: #ff6b6b;
  --sc-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
  --sc-app-width: 100vw;
  --sc-app-height: 100dvh;
  --sc-safe-top: env(safe-area-inset-top, 0px);
  --sc-safe-right: env(safe-area-inset-right, 0px);
  --sc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sc-safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overscroll-behavior: none; }
body { background: var(--sc-bg); }
body.sc-drawer-open { overflow: hidden !important; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
canvas, #renderCanvas { touch-action: none !important; -webkit-user-select: none; user-select: none; }

#reactStrikeUiRoot {
  position: relative;
  z-index: 1500;
  color: var(--sc-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#reactStrikeUiRoot button { font: inherit; }
.sc-ui-fragment { color: var(--sc-text); }

/* Loading and error guard: prevents a white frame while the legacy arena boots. */
.sc-loading-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: max(20px, var(--sc-safe-top)) max(20px, var(--sc-safe-right)) max(20px, var(--sc-safe-bottom)) max(20px, var(--sc-safe-left));
  background: radial-gradient(circle at 50% 30%, #102631 0, #071018 38%, #03070a 100%);
}
.sc-loading-card {
  width: min(430px, 92vw);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--sc-line);
  border-radius: 22px;
  background: rgba(5, 16, 23, 0.94);
  box-shadow: var(--sc-shadow);
}
.sc-loading-logo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--sc-accent), var(--sc-accent-2));
  color: #11171b;
  font-weight: 950;
  font-size: 22px;
}
.sc-loading-copy span, .sc-loading-copy small { display: block; color: var(--sc-muted); }
.sc-loading-copy span { font-size: 10px; letter-spacing: .18em; }
.sc-loading-copy strong { display: block; margin-top: 4px; font-size: 17px; }
.sc-loading-copy small { margin-top: 4px; font-size: 11px; line-height: 1.45; }
.sc-loading-progress { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.sc-loading-progress i { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sc-cyan), var(--sc-accent)); animation: sc-loading-slide 1.2s ease-in-out infinite alternate; }
.sc-loading-card > button { grid-column: 1 / -1; min-height: 48px; border: 0; border-radius: 14px; background: linear-gradient(145deg, var(--sc-accent), var(--sc-accent-2)); color: #111; font-weight: 900; }
@keyframes sc-loading-slide { to { transform: translateX(138%); } }

/* Keep the legacy arena visible until it is actually ready. */
body.react-ui-main-active #app > .topbar,
body.react-ui-battle-active #app > .topbar { display: none !important; }
body.react-ui-main-active #app {
  padding: calc(84px + var(--sc-safe-top)) calc(292px + var(--sc-safe-right)) calc(18px + var(--sc-safe-bottom)) calc(92px + var(--sc-safe-left)) !important;
  min-height: var(--sc-app-height);
  transition: padding .18s ease;
}
body.react-ui-main-active #app > .game-layout { min-height: calc(var(--sc-app-height) - 104px); }
body.react-ui-main-active #app .game-console { width: 100%; max-width: none !important; }
body.react-ui-main-active #app .game-frame { min-height: calc(var(--sc-app-height) - 122px); border-radius: 22px !important; }
body.sc-focus-mode.react-ui-main-active #app { padding: calc(8px + var(--sc-safe-top)) calc(8px + var(--sc-safe-right)) calc(8px + var(--sc-safe-bottom)) calc(8px + var(--sc-safe-left)) !important; }
body.sc-focus-mode .sc-nav-rail,
body.sc-focus-mode .sc-topbar,
body.sc-focus-mode .sc-mission-panel { opacity: 0; pointer-events: none; transform: translateY(-8px); }

/* Shared UI primitives */
.sc-brand { display: flex; align-items: center; gap: 11px; min-width: max-content; }
.sc-brand.compact { justify-content: center; }
.sc-brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--sc-accent), var(--sc-accent-2));
  color: #10161a;
  font-weight: 950;
  letter-spacing: -.06em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), 0 8px 20px rgba(255,132,55,.14);
}
.sc-brand-mark i { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border: 2px solid var(--sc-panel); border-radius: 50%; background: var(--sc-green); }
.sc-brand-copy strong { display: block; font-size: 15px; letter-spacing: .11em; line-height: 1.1; }
.sc-brand-copy span { display: block; margin-top: 4px; color: var(--sc-muted); font-size: 9px; letter-spacing: .14em; }
.sc-brand.compact .sc-brand-copy { display: none; }

.sc-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--sc-line);
  border-radius: 13px;
  background: rgba(14,34,45,.84);
  color: var(--sc-text);
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.sc-icon-button:active { transform: scale(.96); }
.sc-icon-button:hover, .sc-icon-button:focus-visible { border-color: var(--sc-line-strong); background: rgba(255,179,71,.13); outline: none; }
.sc-icon-button.active { border-color: rgba(255,179,71,.72); background: rgba(255,179,71,.18); }
.sc-icon-button.danger { color: #ffdada; border-color: rgba(255,107,107,.35); }
.sc-icon-button > span { font-size: 17px; line-height: 1; }
.sc-icon-button > b { font-size: 11px; white-space: nowrap; }

/* Desktop navigation */
.sc-nav-rail {
  position: fixed;
  z-index: 1510;
  top: calc(12px + var(--sc-safe-top));
  bottom: calc(12px + var(--sc-safe-bottom));
  left: calc(12px + var(--sc-safe-left));
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 11px 8px;
  border: 1px solid var(--sc-line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(7,19,28,.98), rgba(4,12,18,.98));
  box-shadow: var(--sc-shadow);
  transition: opacity .18s ease, transform .18s ease;
}
.sc-nav-rail .sc-brand-mark { width: 44px; height: 44px; border-radius: 13px; }
.sc-rail-main, .sc-rail-bottom { display: grid; width: 100%; gap: 6px; }
.sc-rail-main { margin-top: 20px; }
.sc-rail-bottom { margin-top: auto; }
.sc-nav-rail .sc-icon-button { min-height: 54px; padding: 5px 2px; flex-direction: column; gap: 3px; border-color: transparent; background: transparent; color: var(--sc-muted); }
.sc-nav-rail .sc-icon-button > span { font-size: 19px; }
.sc-nav-rail .sc-icon-button > b { font-size: 8px; letter-spacing: .04em; }
.sc-nav-rail .sc-icon-button:hover, .sc-nav-rail .sc-icon-button.active { border-color: var(--sc-line); background: rgba(255,179,71,.1); color: var(--sc-text); }

.sc-topbar {
  position: fixed;
  z-index: 1505;
  top: calc(12px + var(--sc-safe-top));
  left: calc(92px + var(--sc-safe-left));
  right: calc(292px + var(--sc-safe-right));
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(220px,1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 9px 12px 9px 16px;
  border: 1px solid var(--sc-line);
  border-radius: 18px;
  background: rgba(6,18,26,.96);
  box-shadow: var(--sc-shadow);
  transition: opacity .18s ease, transform .18s ease;
}
.sc-context-title > span, .sc-context-title > small { display: block; color: var(--sc-muted); }
.sc-context-title > span { font-size: 8px; letter-spacing: .18em; }
.sc-context-title > strong { display: block; margin-top: 2px; font-size: 14px; }
.sc-context-title > small { margin-top: 2px; max-width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
.sc-topbar-center { display: flex; align-items: center; gap: 12px; padding: 6px 13px; border: 1px solid rgba(83,212,236,.16); border-radius: 13px; background: rgba(10,29,39,.68); }
.sc-topbar-center > div { text-align: center; }
.sc-topbar-center span { display: block; color: var(--sc-muted); font-size: 7px; letter-spacing: .15em; }
.sc-topbar-center strong { display: block; margin-top: 2px; color: #dffaff; font-size: 11px; }
.sc-topbar-center > i { width: 1px; height: 22px; background: var(--sc-line); }
.sc-top-actions { display: flex; align-items: center; gap: 6px; }
.sc-wallet { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px; border: 1px solid var(--sc-line); border-radius: 13px; background: rgba(14,34,45,.84); color: var(--sc-text); cursor: pointer; }
.sc-wallet b { font-size: 11px; }
.sc-wallet.gem { border-color: rgba(116,134,255,.28); }

.sc-mission-panel {
  position: fixed;
  z-index: 1504;
  top: calc(12px + var(--sc-safe-top));
  right: calc(12px + var(--sc-safe-right));
  bottom: calc(12px + var(--sc-safe-bottom));
  width: 264px;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid var(--sc-line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(7,20,29,.98), rgba(5,14,21,.98));
  box-shadow: var(--sc-shadow);
  transition: opacity .18s ease, transform .18s ease;
}
.sc-panel-title span, .sc-panel-title strong { display: block; }
.sc-panel-title span { color: var(--sc-cyan); font-size: 8px; letter-spacing: .17em; }
.sc-panel-title strong { margin-top: 4px; font-size: 15px; }
.sc-mission-stage { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: center; margin-top: 18px; padding: 12px; border: 1px solid rgba(255,179,71,.25); border-radius: 16px; background: rgba(255,179,71,.08); }
.sc-mission-stage > div { display: grid; place-items: center; min-height: 56px; border-radius: 13px; background: linear-gradient(145deg,var(--sc-accent),var(--sc-accent-2)); color: #121619; }
.sc-mission-stage span { font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.sc-mission-stage strong { font-size: 24px; }
.sc-mission-stage p { margin: 0; color: #eaf4f8; font-size: 11px; line-height: 1.5; }
.sc-metric-list { display: grid; gap: 8px; margin-top: 13px; }
.sc-metric-list > div { display: grid; grid-template-columns: 1fr auto; gap: 5px; padding: 10px 11px; border: 1px solid rgba(112,188,218,.14); border-radius: 13px; background: rgba(12,30,41,.72); }
.sc-metric-list span { color: var(--sc-muted); font-size: 9px; }
.sc-metric-list strong { font-size: 11px; }
.sc-metric-list i { grid-column: 1/-1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.sc-metric-list i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--sc-green),var(--sc-accent)); }
.sc-primary-action { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 58px; margin-top: 14px; padding: 12px; border: 0; border-radius: 15px; background: linear-gradient(145deg,var(--sc-accent),var(--sc-accent-2)); color: #11171b; text-align: left; cursor: pointer; }
.sc-primary-action > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.32); }
.sc-primary-action strong, .sc-primary-action small { display: block; }
.sc-primary-action strong { font-size: 11px; }
.sc-primary-action small { margin-top: 2px; font-size: 8px; }
.sc-panel-shortcuts { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: auto; }
.sc-panel-shortcuts button { min-height: 62px; padding: 7px 4px; border: 1px solid var(--sc-line); border-radius: 13px; background: rgba(12,30,41,.76); color: var(--sc-text); cursor: pointer; }
.sc-panel-shortcuts button span { display: block; margin-top: 4px; color: var(--sc-muted); font-size: 7px; }

/* Arena frame: decorative only, very light on mobile GPUs. */
.sc-enhanced-game-frame { position: relative !important; isolation: isolate; border: 1px solid rgba(105,190,220,.30) !important; box-shadow: 0 16px 46px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.03) !important; overflow: hidden !important; background: #050b10 !important; }
.sc-frame-react-host, .sc-frame-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.sc-frame-overlay { border-radius: inherit; }
.sc-frame-corner { position: absolute; width: 52px; height: 52px; border-color: rgba(255,179,71,.74); }
.sc-frame-corner.tl { top: 9px; left: 9px; border-top: 2px solid; border-left: 2px solid; border-radius: 10px 0 0 0; }
.sc-frame-corner.tr { top: 9px; right: 9px; border-top: 2px solid; border-right: 2px solid; border-radius: 0 10px 0 0; }
.sc-frame-corner.bl { bottom: 9px; left: 9px; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 10px; }
.sc-frame-corner.br { bottom: 9px; right: 9px; border-bottom: 2px solid; border-right: 2px solid; border-radius: 0 0 10px 0; }
.sc-frame-scanline { position: absolute; left: 0; right: 0; top: -3px; height: 2px; background: linear-gradient(90deg,transparent,var(--sc-cyan),transparent); opacity: .16; animation: sc-scan 9s linear infinite; }
@keyframes sc-scan { to { transform: translateY(calc(var(--sc-app-height) - 30px)); } }
.sc-frame-status { position: absolute; top: 14px; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(112,188,218,.23); border-radius: 10px; background: rgba(5,16,23,.80); }
.sc-frame-status.left { left: 70px; }
.sc-frame-status.right { right: 70px; }
.sc-frame-status span { color: var(--sc-muted); font-size: 7px; letter-spacing: .12em; }
.sc-frame-status strong { font-size: 8px; color: #e9fbff; }

/* Drawer */
.sc-command-drawer { position: fixed; inset: 0; z-index: 1700; pointer-events: none; visibility: hidden; }
.sc-command-drawer.open { pointer-events: auto; visibility: visible; }
.sc-drawer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(1,6,10,.72); opacity: 0; transition: opacity .18s; }
.sc-command-drawer.open .sc-drawer-backdrop { opacity: 1; }
.sc-drawer-panel { position: absolute; top: calc(12px + var(--sc-safe-top)); right: calc(12px + var(--sc-safe-right)); bottom: calc(12px + var(--sc-safe-bottom)); width: min(430px, calc(100vw - 24px)); padding: 16px; border: 1px solid var(--sc-line); border-radius: 22px; background: rgba(6,18,27,.99); box-shadow: var(--sc-shadow); transform: translateX(108%); transition: transform .2s ease; overflow-y: auto; }
.sc-command-drawer.open .sc-drawer-panel { transform: translateX(0); }
.sc-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.sc-drawer-head span, .sc-drawer-head strong { display: block; }
.sc-drawer-head span { color: var(--sc-cyan); font-size: 8px; letter-spacing: .16em; }
.sc-drawer-head strong { margin-top: 4px; font-size: 17px; }
.sc-drawer-head > button { width: 46px; height: 46px; border: 1px solid var(--sc-line); border-radius: 13px; background: var(--sc-card); color: var(--sc-text); }
.sc-command-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.sc-command-grid > button { display: grid; grid-template-columns: 42px 1fr auto; gap: 9px; align-items: center; min-height: 76px; padding: 10px; border: 1px solid var(--sc-line); border-radius: 15px; background: rgba(13,32,43,.84); color: var(--sc-text); text-align: left; }
.sc-command-grid > button > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(83,212,236,.08); font-size: 19px; }
.sc-command-grid strong, .sc-command-grid small { display: block; }
.sc-command-grid strong { font-size: 11px; }
.sc-command-grid small { margin-top: 3px; color: var(--sc-muted); font-size: 8px; line-height: 1.35; }
.sc-command-grid i { color: var(--sc-accent); font-style: normal; font-size: 22px; }

.sc-mobile-topbar, .sc-mobile-nav { display: none; }

/* Battle mode */
.sc-battle-command-bar { position: fixed; z-index: 1520; top: calc(10px + var(--sc-safe-top)); left: calc(10px + var(--sc-safe-left)); right: calc(10px + var(--sc-safe-right)); display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 9px 12px; border: 1px solid var(--sc-line); border-radius: 18px; background: rgba(5,16,23,.96); box-shadow: var(--sc-shadow); }
.sc-battle-command-bar nav { display: flex; gap: 6px; }
.sc-battle-status { display: flex; align-items: center; justify-content: center; gap: 11px; flex: 1; }
.sc-battle-status span, .sc-battle-status small { color: var(--sc-muted); font-size: 9px; }
.sc-battle-status strong { color: var(--sc-accent); font-size: 11px; }

body.online-arena-only { overflow: hidden; background: #020609; }
body.online-arena-only #app { position: fixed; inset: 0; padding: 0 !important; width: var(--sc-app-width); height: var(--sc-app-height); }
body.online-arena-only .battle-layout, body.online-arena-only .battle-console { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; }
body.online-arena-only .game-frame { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: #020609 !important; }
body.online-arena-only #renderCanvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; }
body.online-arena-only .battle-react-bar,
body.online-arena-only .battle-hud-scoreboard,
body.online-arena-only .wind-hud,
body.online-arena-only .map-hud,
body.online-arena-only .impact-hud,
body.online-arena-only .battle-control-dock,
body.online-arena-only .battle-info-drawer,
body.online-arena-only .hud-info-toggle { display: none !important; }

.sc-online-arena-ui { position: fixed; inset: 0; z-index: 1510; pointer-events: none; padding: max(10px,var(--sc-safe-top)) max(12px,var(--sc-safe-right)) max(10px,var(--sc-safe-bottom)) max(12px,var(--sc-safe-left)); display: flex; flex-direction: column; justify-content: space-between; }
.sc-arena-top { display: grid; grid-template-columns: minmax(190px,1fr) 136px minmax(190px,1fr); gap: 8px; align-items: start; }
.sc-side-card, .sc-round-card, .sc-network-chip, .sc-battle-telemetry { border: 1px solid var(--sc-line); background: rgba(4,14,20,.88); box-shadow: 0 9px 26px rgba(0,0,0,.22); }
.sc-side-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 10px; border-radius: 14px; }
.sc-side-card.enemy { text-align: right; }
.sc-player-ident span, .sc-player-ident small { display: block; color: var(--sc-muted); font-size: 7px; }
.sc-player-ident strong { display: block; margin: 2px 0; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }
.sc-destruction b, .sc-destruction span { display: block; }
.sc-destruction b { color: var(--sc-accent); font-size: 12px; }
.sc-destruction span { color: var(--sc-muted); font-size: 6px; }
.sc-side-card > i { grid-column: 1/-1; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.sc-side-card > i em { display: block; height: 100%; background: linear-gradient(90deg,var(--sc-green),var(--sc-accent)); }
.sc-side-card.enemy > i em { margin-left: auto; background: linear-gradient(90deg,var(--sc-accent),var(--sc-danger)); }
.sc-round-card { padding: 7px; border-radius: 14px; text-align: center; }
.sc-round-card small, .sc-round-card span { display: block; color: var(--sc-muted); font-size: 7px; }
.sc-round-card strong { display: block; margin: 3px 0; color: var(--sc-accent); font-size: 10px; }
.sc-battle-telemetry { position: absolute; top: max(74px, calc(62px + var(--sc-safe-top))); right: max(12px,var(--sc-safe-right)); display: flex; border-radius: 13px; overflow: hidden; }
.sc-battle-telemetry > div { min-width: 62px; padding: 6px 8px; border-left: 1px solid var(--sc-line); text-align: center; }
.sc-battle-telemetry > div:first-child { border-left: 0; }
.sc-battle-telemetry span, .sc-battle-telemetry strong { display: block; }
.sc-battle-telemetry span { color: var(--sc-muted); font-size: 6px; }
.sc-battle-telemetry strong { margin-top: 2px; font-size: 8px; }
.sc-network-chip { position: absolute; top: max(74px, calc(62px + var(--sc-safe-top))); left: max(12px,var(--sc-safe-left)); display: grid; grid-template-columns: 9px auto; column-gap: 6px; align-items: center; padding: 7px 9px; border-radius: 13px; }
.sc-network-chip strong { font-size: 8px; }
.sc-network-chip small { grid-column: 2; color: var(--sc-muted); font-size: 6px; }
.sc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-green); }
.sc-deck-toggle { position: fixed; left: 50%; bottom: calc(184px + var(--sc-safe-bottom)); z-index: 1520; transform: translateX(-50%); min-height: 36px; padding: 0 13px; border: 1px solid var(--sc-line); border-radius: 11px; background: rgba(4,15,21,.92); color: var(--sc-muted); font-size: 8px; font-weight: 900; pointer-events: auto; }
.sc-arena-bottom { display: grid; grid-template-columns: 160px minmax(320px,560px) 210px; align-items: end; justify-content: center; gap: 8px; pointer-events: auto; transition: opacity .15s ease, transform .15s ease; }
.deck-collapsed .sc-arena-bottom { opacity: 0; pointer-events: none; transform: translateY(18px); }
.deck-collapsed .sc-deck-toggle { bottom: calc(10px + var(--sc-safe-bottom)); }
.sc-battle-shortcuts { display: grid; gap: 6px; padding: 7px; border: 1px solid var(--sc-line); border-radius: 15px; background: rgba(4,15,21,.92); }
.sc-battle-shortcuts .sc-icon-button { justify-content: flex-start; }
.sc-aim-host { width: 100%; min-height: 72px; }
.sc-control-wait { display: grid; place-items: center; min-height: 72px; border: 1px solid var(--sc-line); border-radius: 16px; background: rgba(4,15,21,.88); color: var(--sc-muted); font-size: 10px; }
.sc-aim-host.ready .sc-control-wait { display: none; }
.sc-aim-host .battle-missile-control-center { position: relative !important; inset: auto !important; transform: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; border-color: var(--sc-line) !important; border-radius: 16px !important; background: rgba(4,15,21,.94) !important; box-shadow: none !important; }
.sc-aim-host .battle-direct-fire { display: none !important; }
.sc-fire-stack { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 7px; border: 1px solid var(--sc-line); border-radius: 16px; background: rgba(4,15,21,.94); }
.sc-salvo-control { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 38px 42px 38px; align-items: center; gap: 5px; }
.sc-salvo-control span { font-size: 7px; color: var(--sc-muted); letter-spacing: .12em; }
.sc-salvo-control button { min-width: 38px; min-height: 38px; border: 1px solid var(--sc-line); border-radius: 10px; background: rgba(21,43,54,.94); color: #fff; font-size: 18px; }
.sc-salvo-control strong { text-align: center; }
.sc-fire-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; border: 0; border-radius: 13px; background: linear-gradient(145deg,var(--sc-accent),var(--sc-accent-2)); color: #111; cursor: pointer; }
.sc-fire-button:active { transform: scale(.97); }
.sc-fire-button > span { font-size: 21px; }
.sc-fire-button strong, .sc-fire-button small { display: block; }
.sc-fire-button strong { font-size: 13px; }
.sc-fire-button small { font-size: 7px; }
.sc-fire-actions { display: grid; gap: 5px; }
.sc-fire-actions .sc-icon-button { width: 42px; min-width: 42px; min-height: 30px; padding: 0; border-radius: 8px; }
.sc-fire-actions .sc-icon-button > span { font-size: 13px; }

/* Tablet */
@media (max-width: 1180px) {
  body.react-ui-main-active #app { padding-right: calc(14px + var(--sc-safe-right)) !important; }
  .sc-topbar { right: calc(14px + var(--sc-safe-right)); }
  .sc-mission-panel { display: none; }
}

/* Android/iOS phone and compact tablet */
@media (max-width: 900px), (pointer: coarse) and (max-height: 700px) {
  body.react-ui-main-active #app { padding: calc(68px + var(--sc-safe-top)) calc(7px + var(--sc-safe-right)) calc(70px + var(--sc-safe-bottom)) calc(7px + var(--sc-safe-left)) !important; }
  body.react-ui-main-active #app > .game-layout { min-height: calc(var(--sc-app-height) - 138px); }
  body.react-ui-main-active #app .game-frame { min-height: calc(var(--sc-app-height) - 145px); border-radius: 16px !important; }
  .sc-nav-rail, .sc-topbar, .sc-mission-panel { display: none; }
  .sc-mobile-topbar { position: fixed; z-index: 1530; top: max(6px,var(--sc-safe-top)); left: max(6px,var(--sc-safe-left)); right: max(6px,var(--sc-safe-right)); display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 6px 8px; border: 1px solid var(--sc-line); border-radius: 16px; background: rgba(5,16,23,.97); box-shadow: 0 8px 24px rgba(0,0,0,.26); }
  .sc-mobile-topbar .sc-brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .sc-mobile-topbar > div { display: flex; gap: 5px; }
  .sc-mobile-topbar button { min-width: 44px; min-height: 42px; padding: 0 10px; border: 1px solid var(--sc-line); border-radius: 11px; background: var(--sc-card); color: var(--sc-text); }
  .sc-mobile-nav { position: fixed; z-index: 1530; left: max(6px,var(--sc-safe-left)); right: max(6px,var(--sc-safe-right)); bottom: max(6px,var(--sc-safe-bottom)); display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; padding: 5px; border: 1px solid var(--sc-line); border-radius: 16px; background: rgba(5,16,23,.98); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
  .sc-mobile-nav button { min-height: 48px; border: 0; border-radius: 11px; background: transparent; color: var(--sc-muted); }
  .sc-mobile-nav button span, .sc-mobile-nav button b { display: block; }
  .sc-mobile-nav button span { font-size: 17px; }
  .sc-mobile-nav button b { margin-top: 2px; font-size: 8px; }
  .sc-mobile-nav button.active { color: var(--sc-text); background: rgba(83,212,236,.08); }
  .sc-mobile-nav button.primary { background: linear-gradient(145deg,var(--sc-accent),var(--sc-accent-2)); color: #111; }
  .sc-frame-status { display: none; }
  .sc-frame-corner { width: 34px; height: 34px; }
  .sc-battle-command-bar { display: none; }
  .sc-arena-top { grid-template-columns: 1fr 88px 1fr; }
  .sc-side-card { padding: 6px 7px; }
  .sc-player-ident strong { max-width: 126px; font-size: 9px; }
  .sc-round-card { padding: 5px; }
  .sc-network-chip { top: max(52px, calc(44px + var(--sc-safe-top))); }
  .sc-battle-telemetry { top: max(52px, calc(44px + var(--sc-safe-top))); right: max(6px,var(--sc-safe-right)); }
  .sc-battle-telemetry > div:nth-child(n+4) { display: none; }
  .sc-arena-bottom { grid-template-columns: 112px minmax(270px,1fr) 172px; gap: 5px; }
  .sc-battle-shortcuts .sc-icon-button b { display: none; }
  .sc-battle-shortcuts .sc-icon-button { justify-content: center; }
  .sc-deck-toggle { bottom: calc(198px + var(--sc-safe-bottom)); }
}

/* Small phones in landscape or portrait */
@media (max-width: 680px), (max-height: 480px) {
  .sc-command-grid { grid-template-columns: 1fr; }
  .sc-drawer-panel { top: max(6px,var(--sc-safe-top)); right: max(6px,var(--sc-safe-right)); bottom: max(6px,var(--sc-safe-bottom)); width: calc(100vw - max(12px, var(--sc-safe-left) + var(--sc-safe-right))); border-radius: 17px; }
  .sc-online-arena-ui { padding: max(5px,var(--sc-safe-top)) max(5px,var(--sc-safe-right)) max(5px,var(--sc-safe-bottom)) max(5px,var(--sc-safe-left)); }
  .sc-arena-top { grid-template-columns: 1fr 72px 1fr; gap: 4px; }
  .sc-side-card { grid-template-columns: 1fr; padding: 5px 6px; }
  .sc-destruction { display: none; }
  .sc-player-ident span { font-size: 6px; }
  .sc-player-ident strong { font-size: 8px; max-width: 96px; }
  .sc-player-ident small { display: none; }
  .sc-round-card strong { font-size: 8px; }
  .sc-network-chip { top: max(43px, calc(37px + var(--sc-safe-top))); }
  .sc-network-chip small { display: none; }
  .sc-battle-telemetry { top: max(43px, calc(37px + var(--sc-safe-top))); }
  .sc-battle-telemetry > div { min-width: 46px; padding: 4px; }
  .sc-battle-telemetry > div:nth-child(n+3) { display: none; }
  .sc-arena-bottom { display: flex; flex-direction: column; align-items: stretch; max-height: 48vh; }
  .sc-battle-shortcuts { display: grid; grid-template-columns: repeat(3,1fr); order: 2; padding: 4px; }
  .sc-battle-shortcuts .sc-icon-button { min-height: 38px; }
  .sc-aim-host { order: 1; min-height: 58px; }
  .sc-fire-stack { order: 3; grid-template-columns: 1fr 1.2fr auto; padding: 5px; }
  .sc-salvo-control { grid-column: auto; grid-template-columns: 30px 34px 30px; }
  .sc-salvo-control span { display: none; }
  .sc-salvo-control button { min-width: 30px; min-height: 42px; }
  .sc-fire-button { min-height: 48px; }
  .sc-fire-actions { grid-template-columns: repeat(2,1fr); }
  .sc-deck-toggle { bottom: calc(202px + var(--sc-safe-bottom)); min-height: 34px; }
  .deck-collapsed .sc-deck-toggle { bottom: calc(6px + var(--sc-safe-bottom)); }
  .sc-aim-host .battle-missile-control-center { transform: scale(.90) !important; transform-origin: bottom center !important; margin-bottom: -7px !important; }
}

@media (orientation: portrait) and (max-width: 900px) {
  body.react-ui-main-active #app .game-frame { min-height: calc(var(--sc-app-height) - 148px); }
  .sc-online-arena-ui { justify-content: space-between; }
  .sc-arena-bottom { max-height: 42vh; }
}

/* Low-end Android/iOS optimization */
body.sc-low-power .sc-frame-scanline { display: none !important; }
body.sc-low-power .sc-nav-rail,
body.sc-low-power .sc-topbar,
body.sc-low-power .sc-mission-panel,
body.sc-low-power .sc-mobile-topbar,
body.sc-low-power .sc-mobile-nav,
body.sc-low-power .sc-side-card,
body.sc-low-power .sc-round-card,
body.sc-low-power .sc-network-chip,
body.sc-low-power .sc-battle-telemetry,
body.sc-low-power .sc-battle-shortcuts,
body.sc-low-power .sc-fire-stack { backdrop-filter: none !important; box-shadow: none !important; }
body.sc-low-power .sc-enhanced-game-frame { box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* v23.7.31 — Compact frame / zoom-out pass.
   The arena gets more room while controls remain touch-safe. */
:root {
  --sc-frame-density: .88;
}

@media (min-width: 901px) {
  body.react-ui-main-active #app {
    padding: calc(72px + var(--sc-safe-top)) calc(244px + var(--sc-safe-right)) calc(12px + var(--sc-safe-bottom)) calc(78px + var(--sc-safe-left)) !important;
  }
  body.react-ui-main-active #app > .game-layout { min-height: calc(var(--sc-app-height) - 84px); }
  body.react-ui-main-active #app .game-frame { min-height: calc(var(--sc-app-height) - 88px); border-radius: 17px !important; }

  .sc-nav-rail {
    top: calc(8px + var(--sc-safe-top));
    bottom: calc(8px + var(--sc-safe-bottom));
    left: calc(8px + var(--sc-safe-left));
    width: 58px;
    padding: 8px 6px;
    border-radius: 18px;
  }
  .sc-nav-rail .sc-brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .sc-rail-main { margin-top: 12px; }
  .sc-nav-rail .sc-icon-button { min-height: 46px; gap: 2px; }
  .sc-nav-rail .sc-icon-button > span { font-size: 17px; }
  .sc-nav-rail .sc-icon-button > b { font-size: 7px; }

  .sc-topbar {
    top: calc(8px + var(--sc-safe-top));
    left: calc(78px + var(--sc-safe-left));
    right: calc(244px + var(--sc-safe-right));
    min-height: 54px;
    gap: 9px;
    padding: 6px 9px 6px 12px;
    border-radius: 15px;
  }
  .sc-context-title > strong { font-size: 12px; }
  .sc-context-title > small { font-size: 8px; }
  .sc-topbar-center { gap: 8px; padding: 4px 9px; }
  .sc-topbar-center > i { height: 18px; }
  .sc-wallet { min-height: 38px; padding: 0 9px; border-radius: 11px; }
  .sc-icon-button { min-width: 39px; min-height: 39px; padding: 0 9px; border-radius: 11px; }

  .sc-mission-panel {
    top: calc(8px + var(--sc-safe-top));
    right: calc(8px + var(--sc-safe-right));
    bottom: calc(8px + var(--sc-safe-bottom));
    width: 226px;
    padding: 12px;
    border-radius: 18px;
  }

  .sc-frame-corner { width: 42px; height: 42px; }
  .sc-frame-status { top: 10px; padding: 4px 7px; }
  .sc-frame-status.left { left: 56px; }
  .sc-frame-status.right { right: 56px; }
}

/* More arena space on Android/iOS and small tablets. */
@media (max-width: 900px), (pointer: coarse) and (max-height: 700px) {
  body.react-ui-main-active #app {
    padding: calc(56px + var(--sc-safe-top)) calc(4px + var(--sc-safe-right)) calc(57px + var(--sc-safe-bottom)) calc(4px + var(--sc-safe-left)) !important;
  }
  body.react-ui-main-active #app > .game-layout { min-height: calc(var(--sc-app-height) - 116px); }
  body.react-ui-main-active #app .game-frame { min-height: calc(var(--sc-app-height) - 120px); border-radius: 12px !important; }

  .sc-mobile-topbar {
    top: max(3px,var(--sc-safe-top));
    left: max(3px,var(--sc-safe-left));
    right: max(3px,var(--sc-safe-right));
    min-height: 46px;
    padding: 4px 6px;
    border-radius: 13px;
  }
  .sc-mobile-topbar .sc-brand-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
  .sc-mobile-topbar button { min-width: 40px; min-height: 38px; padding: 0 8px; border-radius: 9px; }

  .sc-mobile-nav {
    left: max(3px,var(--sc-safe-left));
    right: max(3px,var(--sc-safe-right));
    bottom: max(3px,var(--sc-safe-bottom));
    gap: 2px;
    padding: 3px;
    border-radius: 13px;
  }
  .sc-mobile-nav button { min-height: 42px; border-radius: 9px; }
  .sc-mobile-nav button span { font-size: 15px; }
  .sc-mobile-nav button b { font-size: 7px; }

  /* Compact online battle overlay. Transform only visual groups, not the canvas. */
  .sc-arena-top { transform: scale(.88); transform-origin: top center; width: 113.64%; margin-left: -6.82%; }
  .sc-network-chip { transform: scale(.88); transform-origin: top left; }
  .sc-battle-telemetry { transform: scale(.86); transform-origin: top right; }
  .sc-arena-bottom { transform: scale(.86); transform-origin: bottom center; width: 116.28%; margin-left: -8.14%; margin-bottom: -12px; }
  .sc-deck-toggle { transform: translateX(-50%) scale(.88); transform-origin: bottom center; }
  .deck-collapsed .sc-deck-toggle { transform: translateX(-50%) scale(.88); }
  .sc-frame-corner { width: 27px; height: 27px; }
}

@media (max-width: 680px), (max-height: 480px) {
  :root { --sc-frame-density: .82; }
  body.react-ui-main-active #app {
    padding-top: calc(51px + var(--sc-safe-top)) !important;
    padding-bottom: calc(51px + var(--sc-safe-bottom)) !important;
  }
  .sc-arena-top { transform: scale(.82); width: 121.95%; margin-left: -10.98%; }
  .sc-arena-bottom { transform: scale(.80); width: 125%; margin-left: -12.5%; margin-bottom: -22px; }
  .sc-battle-telemetry, .sc-network-chip { transform: scale(.80); }
  .sc-aim-host .battle-missile-control-center { transform: scale(.82) !important; margin-bottom: -12px !important; }
}

/* v23.7.32 — Center every menu inside the usable game frame.
   Desktop dialogs are centered between the left navigation rail and the
   right mission panel. Tablet/mobile dialogs return to the full safe area. */
:root {
  --sc-modal-top-desktop: calc(72px + var(--sc-safe-top));
  --sc-modal-left-desktop: calc(78px + var(--sc-safe-left));
  --sc-modal-right-desktop: calc(244px + var(--sc-safe-right));
  --sc-modal-bottom-desktop: calc(12px + var(--sc-safe-bottom));
}

/* Remove accidental visual tilt/offset from every legacy menu card. */
body.react-ui-main-active .modal-dialog,
body.react-ui-main-active .overlay-card,
body.react-ui-battle-active .modal-dialog,
body.react-ui-battle-active .overlay-card {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin-inline: auto !important;
  translate: none !important;
  rotate: 0deg !important;
  transform: none !important;
  transform-origin: center center !important;
}

/* Large desktop: center inside the actual gameplay frame, not the viewport. */
@media (min-width: 1181px) {
  body.react-ui-main-active .modal {
    align-items: center !important;
    justify-content: center !important;
    padding-top: var(--sc-modal-top-desktop) !important;
    padding-right: var(--sc-modal-right-desktop) !important;
    padding-bottom: var(--sc-modal-bottom-desktop) !important;
    padding-left: var(--sc-modal-left-desktop) !important;
  }
  body.react-ui-main-active .modal-dialog {
    max-width: 100% !important;
    max-height: calc(100dvh - var(--sc-modal-top-desktop) - var(--sc-modal-bottom-desktop)) !important;
  }
  body.react-ui-main-active .progression-dialog { width: min(980px, 100%) !important; }
  body.react-ui-main-active .store-dialog { width: min(980px, 100%) !important; }
  body.react-ui-main-active .account-profile-dialog { width: min(760px, 100%) !important; }
}

/* Tablet: the mission panel is hidden, so center between the rail and right edge. */
@media (min-width: 901px) and (max-width: 1180px) {
  body.react-ui-main-active .modal {
    align-items: center !important;
    justify-content: center !important;
    padding-top: calc(72px + var(--sc-safe-top)) !important;
    padding-right: calc(14px + var(--sc-safe-right)) !important;
    padding-bottom: calc(12px + var(--sc-safe-bottom)) !important;
    padding-left: calc(78px + var(--sc-safe-left)) !important;
  }
  body.react-ui-main-active .modal-dialog {
    max-width: 100% !important;
    max-height: calc(100dvh - 86px - var(--sc-safe-top) - var(--sc-safe-bottom)) !important;
  }
}

/* Focus mode has no side rails; restore true viewport centering. */
body.sc-focus-mode.react-ui-main-active .modal {
  padding-top: calc(8px + var(--sc-safe-top)) !important;
  padding-right: calc(8px + var(--sc-safe-right)) !important;
  padding-bottom: calc(8px + var(--sc-safe-bottom)) !important;
  padding-left: calc(8px + var(--sc-safe-left)) !important;
}

/* Phone, compact tablet and landscape devices: center in the safe viewport. */
@media (max-width: 900px), (pointer: coarse) and (max-height: 700px) {
  body.react-ui-main-active .modal,
  body.react-ui-battle-active .modal {
    align-items: center !important;
    justify-content: center !important;
    padding-top: calc(58px + var(--sc-safe-top)) !important;
    padding-right: calc(6px + var(--sc-safe-right)) !important;
    padding-bottom: calc(58px + var(--sc-safe-bottom)) !important;
    padding-left: calc(6px + var(--sc-safe-left)) !important;
  }
  body.react-ui-main-active .modal-dialog,
  body.react-ui-battle-active .modal-dialog {
    width: min(100%, 980px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 116px - var(--sc-safe-top) - var(--sc-safe-bottom)) !important;
    margin: auto !important;
  }
}

/* Short landscape phones: keep the card centered and fully scrollable. */
@media (max-height: 480px) {
  body.react-ui-main-active .modal,
  body.react-ui-battle-active .modal {
    align-items: center !important;
    padding-top: calc(4px + var(--sc-safe-top)) !important;
    padding-bottom: calc(4px + var(--sc-safe-bottom)) !important;
  }
  body.react-ui-main-active .modal-dialog,
  body.react-ui-battle-active .modal-dialog {
    max-height: calc(100dvh - 8px - var(--sc-safe-top) - var(--sc-safe-bottom)) !important;
    overflow: auto !important;
  }
}

/* Nusantara Strike v23.7.36: Clan center and Battle hero picker */
.battle-hero-picker{margin:14px 0;padding:14px;border:1px solid rgba(77,190,221,.32);border-radius:16px;background:rgba(4,18,27,.86)}
.battle-hero-picker-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.battle-hero-picker-head span{font-weight:800;color:#ffb347;letter-spacing:.08em}.battle-hero-picker-head small,.battle-hero-picker>small{color:#8faeba}
.battle-hero-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.battle-hero-picker label{display:grid;gap:6px;color:#dceaf0;font-size:.84rem}.battle-hero-picker select{width:100%;min-height:42px;border:1px solid #24485a;border-radius:11px;background:#071722;color:#f3f7f8;padding:8px 10px}
@media(max-width:720px){.battle-hero-picker-grid{grid-template-columns:1fr}.battle-hero-picker{padding:11px}.battle-hero-picker-head{align-items:flex-start;flex-direction:column}}
.campaign-clan-modal{z-index:15000}.campaign-clan-dialog{width:min(980px,calc(100vw - 28px));max-height:min(820px,calc(100dvh - 30px));overflow:auto}.campaign-clan-content{padding:16px;display:grid;gap:14px}.campaign-clan-onboarding{display:grid;grid-template-columns:1fr 1fr;gap:14px}.campaign-clan-onboarding section,.campaign-clan-war,.campaign-clan-members,.campaign-clan-leaderboard,.campaign-clan-hero{border:1px solid rgba(87,188,216,.28);border-radius:16px;background:rgba(5,20,29,.92);padding:16px}.campaign-clan-onboarding label{display:grid;gap:6px;margin:10px 0;color:#a7c0cb}.campaign-clan-onboarding input{min-height:42px;border:1px solid #285064;border-radius:10px;background:#071722;color:#fff;padding:8px 10px}.campaign-clan-content button{min-height:42px;border:0;border-radius:10px;background:linear-gradient(135deg,#ffbd45,#ff7747);font-weight:800;padding:9px 15px}.campaign-clan-hero{display:flex;justify-content:space-between;align-items:center}.campaign-clan-hero h3{margin:4px 0}.campaign-clan-hero>div:last-child{text-align:right}.campaign-clan-hero>div:last-child strong{display:block;font-size:1.6rem;color:#ffbd45}.campaign-clan-members>div,.campaign-clan-leaderboard>div{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}.campaign-war-score{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;text-align:center;font-size:1.2rem}.campaign-war-score b{font-size:2rem;color:#ffbd45}.campaign-clan-error{color:#ff8d7a}.campaign-clan-leave{background:#5a2528!important;color:#fff}
@media(max-width:700px){.campaign-clan-onboarding{grid-template-columns:1fr}.campaign-clan-hero{align-items:flex-start;gap:10px}.campaign-clan-members>div,.campaign-clan-leaderboard>div{grid-template-columns:1fr auto}.campaign-clan-members b,.campaign-clan-leaderboard span{grid-column:1/-1}}

/* v23.7.40 — total Hero Power in lobby header */
.sc-wallet.hero-power{border-color:rgba(255,186,70,.38);background:linear-gradient(145deg,rgba(255,186,70,.11),rgba(14,34,45,.84));}
.sc-wallet.hero-power small{color:var(--sc-accent);font-size:7px;font-weight:950;letter-spacing:.08em;}
.sc-wallet.hero-power b{font-variant-numeric:tabular-nums;}
@media(max-width:1120px){.sc-wallet.hero-power small{display:none;}}
@media(max-width:720px){.sc-wallet.hero-power span{display:none;}.sc-wallet.hero-power{padding-inline:8px;}}

/* v23.7.40 — total Hero Power in lobby header */
.sc-wallet.hero-power{border-color:rgba(255,186,70,.38);background:linear-gradient(145deg,rgba(255,186,70,.11),rgba(14,34,45,.84));}
.sc-wallet.hero-power small{color:var(--sc-accent);font-size:7px;font-weight:950;letter-spacing:.08em;}
.sc-wallet.hero-power b{font-variant-numeric:tabular-nums;}
@media(max-width:1120px){.sc-wallet.hero-power small{display:none;}}
@media(max-width:720px){.sc-wallet.hero-power span{display:none;}.sc-wallet.hero-power{padding-inline:8px;}}

.campaign-clan-modal.active,.campaign-clan-modal.open{display:flex}

/* v23.7.56 — military rank and clan command */
.sc-wallet.military-rank,.wallet-chip.military-rank{border-color:rgba(255,190,72,.42);min-width:112px}.sc-wallet.military-rank img,.wallet-chip.military-rank img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.sc-wallet.military-rank b,.wallet-chip.military-rank b{color:#ffd76a}.sc-wallet.military-rank small,.wallet-chip.military-rank small{color:#9fb6c2}
.campaign-clan-hero{gap:14px}.campaign-clan-ident{display:flex;align-items:center;gap:14px;min-width:0}.campaign-clan-logo{width:74px;height:74px;object-fit:contain;border:1px solid rgba(255,197,78,.38);border-radius:16px;background:#07131b;padding:7px}.campaign-clan-code{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}.campaign-clan-code code{padding:5px 8px;border:1px dashed rgba(87,188,216,.35);border-radius:8px;background:#061119;color:#a9edff}.campaign-clan-code button{min-height:30px;padding:4px 9px;font-size:.72rem}.campaign-clan-description{margin:8px 0 0;color:#a7c0cb}.campaign-clan-admin{border:1px solid rgba(255,190,72,.30);border-radius:16px;background:rgba(17,20,17,.94);padding:16px}.campaign-clan-admin textarea{width:100%;min-height:74px;resize:vertical;border:1px solid #285064;border-radius:10px;background:#071722;color:#fff;padding:10px}.campaign-clan-logo-grid{display:grid;grid-template-columns:repeat(10,minmax(52px,1fr));gap:8px;margin:10px 0 14px}.campaign-clan-logo-option{min-height:64px!important;padding:5px!important;border:1px solid rgba(87,188,216,.25)!important;background:#071722!important}.campaign-clan-logo-option.active{border-color:#ffbe48!important;background:rgba(255,190,72,.12)!important}.campaign-clan-logo-option img{width:46px;height:46px;object-fit:contain}.campaign-clan-member-row{display:grid!important;grid-template-columns:minmax(140px,1fr) auto auto!important;align-items:center;gap:10px}.campaign-member-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.campaign-member-actions button{min-height:30px;padding:5px 9px;font-size:.7rem}.campaign-member-actions .danger{background:#6f292c;color:#fff}.campaign-member-actions .secondary{background:#153445;color:#d9f7ff}.campaign-member-role{color:#8fe2ff;text-transform:uppercase;font-size:.72rem}.campaign-clan-leaderboard-logo{width:34px;height:34px;object-fit:contain}.campaign-clan-leaderboard>div{align-items:center;grid-template-columns:auto auto 1fr auto}.campaign-clan-onboarding .campaign-clan-logo-grid{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.campaign-clan-logo-grid{grid-template-columns:repeat(5,1fr)}.campaign-clan-member-row{grid-template-columns:1fr auto!important}.campaign-member-actions{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:560px){.sc-wallet.military-rank{min-width:0}.sc-wallet.military-rank small{display:none}.campaign-clan-ident{align-items:flex-start}.campaign-clan-logo{width:58px;height:58px}.campaign-clan-logo-grid{grid-template-columns:repeat(5,1fr)}.campaign-clan-leaderboard>div{grid-template-columns:auto 1fr auto}.campaign-clan-leaderboard-logo{display:none}}