:root {
  color-scheme: dark;
  --ink: #effaff;
  --muted: #7c9bb2;
  --cyan: #37e6ff;
  --blue: #2478ff;
  --orange: #ff8a3d;
  --panel: #090f25;
  --edge: rgba(83, 211, 255, 0.28);
  --game-display-width: 1280px;
  --game-display-height: 720px;
  --game-ui-scale: 1;
  --shell-gap: clamp(8px, 2vh, 24px);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overscroll-behavior: none;
}

body {
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(36, 120, 255, 0.16), transparent 29%),
    radial-gradient(circle at 88% 82%, rgba(109, 44, 255, 0.14), transparent 31%),
    #02040c;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.19;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle, black, transparent 82%);
}

.game-shell {
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--shell-gap));
  padding-right: calc(env(safe-area-inset-right, 0px) + var(--shell-gap));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--shell-gap));
  padding-left: calc(env(safe-area-inset-left, 0px) + var(--shell-gap));
}

.cabinet {
  width: min(100%, var(--game-display-width));
  filter: drop-shadow(0 28px 80px rgba(0, 0, 0, 0.65));
}

.brandline, .control-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
  color: #6f9eb7;
  font: 700 clamp(8px, 0.68vw, 11px)/1.1 "Segoe UI", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.status-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #54f1a7;
  box-shadow: 0 0 12px #54f1a7;
}

.canvas-frame {
  position: relative;
  width: var(--game-display-width);
  height: var(--game-display-height);
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: clamp(6px, 1vw, 14px);
  background: #030611;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), inset 0 0 50px rgba(20, 96, 180, 0.12), 0 0 0 5px rgba(5, 10, 25, 0.9);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: crosshair;
  image-rendering: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.settings-touch-navigation {
  position: absolute;
  z-index: 6;
  left: 25%;
  right: 4.0625%;
  bottom: 17.5%;
  height: max(44px, 12.64%);
  display: grid;
  grid-template-columns: minmax(0, 330fr) minmax(58px, 248fr) minmax(0, 330fr);
  align-items: stretch;
  gap: 0;
  pointer-events: auto;
}

.settings-touch-navigation[hidden] { display: none; }

.settings-touch-help {
  position: absolute;
  z-index: 6;
  top: 9.7%;
  left: 25%;
  right: 2.2%;
  min-height: 12.7%;
  box-sizing: border-box;
  padding: clamp(4px, 0.7vw, 8px) clamp(7px, 1vw, 12px);
  overflow: hidden;
  color: #9fd8e4;
  border-bottom: 1px solid rgba(65, 233, 255, 0.36);
  background: rgba(3, 11, 27, 0.97);
  pointer-events: none;
}

.settings-touch-help[hidden] { display: none; }

.settings-touch-help-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.settings-touch-help-heading strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #41e9ff;
  font: 800 clamp(9px, 1.35vw, 12px)/1.1 "Segoe UI", sans-serif;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-touch-help-heading span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #ff9e62;
  font: 700 clamp(7px, 1vw, 9px)/1.1 "Segoe UI", sans-serif;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-touch-help p {
  margin: 2px 0 0;
  overflow: hidden;
  font: 600 clamp(7px, 1.05vw, 9px)/1.15 "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-touch-help p:last-child {
  display: -webkit-box;
  color: #d7f6ff;
  font-size: clamp(8px, 1.2vw, 10px);
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.settings-touch-navigation button {
  min-width: 0;
  min-height: 44px;
  padding: 0 clamp(8px, 1.5vw, 18px);
  touch-action: manipulation;
  color: #c9f8ff;
  border: 1px solid rgba(65, 233, 255, 0.52);
  border-radius: 8px;
  background: rgb(5, 24, 48);
  box-shadow: inset 0 0 18px rgba(65, 233, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.38);
  font: 800 clamp(8px, 1.2vw, 12px)/1.1 "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.settings-touch-navigation button:active {
  color: #fff;
  border-color: #fff;
  background: rgba(23, 104, 139, 0.94);
}

.settings-touch-navigation button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.settings-touch-navigation button:disabled {
  opacity: 0.38;
}

.settings-touch-navigation output {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 58px;
  background: rgb(3, 11, 27);
  color: #effaff;
  font: 800 clamp(9px, 1.25vw, 12px)/1 "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}

.canvas-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #b9efff 4px);
  mix-blend-mode: screen;
}

.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: radial-gradient(circle at 50% 35%, #102350 0, #050918 35%, #02040c 76%);
  transition: opacity 360ms ease, visibility 360ms ease;
}

.loading-screen.hidden { opacity: 0; visibility: hidden; }

.loading-mark {
  color: #ecfbff;
  font: 900 clamp(42px, 7vw, 92px)/0.9 "Segoe UI", sans-serif;
  letter-spacing: -0.08em;
  text-shadow: 0 0 30px rgba(55, 230, 255, 0.42);
}

.loading-mark span { color: var(--orange); font-size: 0.5em; letter-spacing: -0.04em; }
.loading-title { color: var(--cyan); font-size: clamp(9px, 1vw, 13px); letter-spacing: 0.28em; }
.loading-track { width: min(52vw, 520px); height: 4px; overflow: hidden; background: #17213c; }
.loading-bar { width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan), #fff); box-shadow: 0 0 18px var(--cyan); transition: width 150ms ease; }
.loading-text { color: var(--muted); font-size: 11px; letter-spacing: 0.12em; }

.mobile-controls {
  --mobile-button-opacity: 1;
  --mobile-system-control-size: clamp(46px, 7vw, 62px);
  --mobile-primary-control-size: clamp(62px, 9vw, 82px);
  --mobile-secondary-control-size: clamp(48px, 7.5vw, 68px);
  --mobile-control-gap: clamp(8px, 1.25vw, 14px);
  --mobile-control-edge: clamp(10px, 2%, 24px);
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  pointer-events: none;
}

.touch-enabled .mobile-controls.active { display: block; }

.mobile-system-controls,
.mobile-action-controls {
  position: absolute;
  display: flex;
  gap: var(--mobile-control-gap);
  pointer-events: none;
}

.mobile-system-controls {
  top: max(14%, 10px);
  right: var(--mobile-control-edge);
  align-items: flex-start;
}

.mobile-action-controls {
  right: var(--mobile-control-edge);
  bottom: clamp(12px, 3.5%, 30px);
  flex-direction: row-reverse;
  align-items: flex-end;
}

.mobile-controls[data-mobile-button-side="LEFT"] .mobile-system-controls {
  right: auto;
  left: var(--mobile-control-edge);
  flex-direction: row-reverse;
}

.mobile-controls[data-mobile-button-side="LEFT"] .mobile-action-controls {
  right: auto;
  left: var(--mobile-control-edge);
  flex-direction: row;
}

.mobile-controls[data-mobile-button-size="COMPACT"] {
  --mobile-system-control-size: 44px;
  --mobile-primary-control-size: clamp(56px, 8vw, 72px);
  --mobile-secondary-control-size: clamp(44px, 6.5vw, 58px);
  --mobile-control-gap: clamp(6px, 1vw, 10px);
}

.mobile-controls[data-mobile-button-size="LARGE"] {
  --mobile-system-control-size: clamp(52px, 8vw, 70px);
  --mobile-primary-control-size: clamp(70px, 10vw, 92px);
  --mobile-secondary-control-size: clamp(54px, 8vw, 74px);
  --mobile-control-gap: clamp(8px, 1.35vw, 16px);
}

.mobile-control {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  color: #effcff;
  border: 1px solid rgba(137, 238, 255, 0.72);
  background: rgba(5, 20, 40, 0.7);
  box-shadow: inset 0 0 18px rgba(55, 230, 255, 0.11), 0 0 18px rgba(1, 9, 24, 0.42);
  opacity: var(--mobile-button-opacity, 1);
  font: 800 clamp(11px, 1.7vw, 17px)/1 "Segoe UI", sans-serif;
  letter-spacing: 0.1em;
  -webkit-tap-highlight-color: transparent;
}

.mobile-control:active {
  transform: scale(0.94);
  border-color: #fff;
  background: rgba(27, 112, 148, 0.78);
}

.mobile-control:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.mobile-system-control {
  width: var(--mobile-system-control-size);
  height: var(--mobile-system-control-size);
  border-radius: 12px;
}

.mobile-pause {
  font-size: clamp(17px, 2.5vw, 23px);
  letter-spacing: 0;
}

.mobile-fullscreen {
  font-size: clamp(20px, 2.8vw, 26px);
  letter-spacing: 0;
}

.mobile-fullscreen[hidden] { display: none; }

.mobile-ability {
  border-radius: 50%;
  color: #d9fbff;
  border-color: rgba(101, 247, 255, 0.68);
  background: radial-gradient(circle, rgba(22, 84, 120, 0.82), rgba(4, 16, 36, 0.76));
  font-size: clamp(9px, 1.5vw, 13px);
  letter-spacing: 0.04em;
}

.mobile-ability[disabled] {
  opacity: 0.32;
  filter: grayscale(0.75);
  pointer-events: none;
}

.mobile-primary-action {
  width: var(--mobile-primary-control-size);
  height: var(--mobile-primary-control-size);
}

.mobile-secondary-action {
  width: var(--mobile-secondary-control-size);
  height: var(--mobile-secondary-control-size);
}

.mobile-signature {
  color: #fff1bc;
  border-color: rgba(255, 210, 102, 0.82);
  background: radial-gradient(circle, rgba(158, 91, 20, 0.86), rgba(31, 13, 7, 0.78));
}

.mobile-fire {
  color: #eafff4;
  border-color: rgba(94, 255, 179, 0.88);
  background: radial-gradient(circle, rgba(19, 139, 91, 0.9), rgba(3, 38, 31, 0.82));
  box-shadow: inset 0 0 22px rgba(94, 255, 179, 0.15), 0 0 20px rgba(2, 24, 20, 0.5);
}

.mobile-fire[aria-pressed="true"] {
  transform: scale(0.94);
  color: #fff;
  border-color: #fff;
  background: radial-gradient(circle, rgba(33, 190, 124, 0.96), rgba(4, 66, 50, 0.9));
}

.rotate-hint {
  position: absolute;
  z-index: 5;
  top: max(calc(env(safe-area-inset-top) + 10px), 2%);
  left: 50%;
  display: none;
  transform: translateX(-50%);
  width: max-content;
  max-width: 78%;
  padding: 7px 12px;
  pointer-events: none;
  border: 1px solid rgba(55, 230, 255, 0.38);
  border-radius: 999px;
  color: #d9f9ff;
  background: rgba(3, 12, 29, 0.78);
  font: 800 clamp(8px, 2.2vw, 11px)/1 "Segoe UI", sans-serif;
  letter-spacing: 0.12em;
  text-align: center;
}

.control-strip {
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 32px);
  min-height: 34px;
  letter-spacing: 0.1em;
}

kbd {
  padding: 2px 5px;
  border: 1px solid #284d69;
  border-bottom-color: #122b3d;
  border-radius: 3px;
  color: #bfefff;
  background: #0a1724;
  font: inherit;
}

.touch-enabled .brandline,
.touch-enabled .control-strip { display: none; }

html[data-render-quality="LOW"] .canvas-frame::after { display: none; }
html[data-render-quality="MEDIUM"] .canvas-frame::after { opacity: 0.045; }

@media (orientation: portrait) {
  .touch-enabled .rotate-hint { display: block; }
  .touch-enabled .mobile-system-controls { top: max(22%, 40px); }
}

@media (max-height: 560px), (max-width: 700px) {
  :root { --shell-gap: 0px; }
  .cabinet { width: 100%; }
  .brandline, .control-strip { display: none; }
  .canvas-frame { border-radius: 0; border: 0; }
}

.network-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 36px);
  background: rgba(1, 4, 14, 0.88);
  backdrop-filter: blur(10px);
}

.shop-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vw, 24px);
  background: rgba(1, 4, 14, 0.94);
  backdrop-filter: blur(12px);
}

.shop-overlay[hidden] { display: none !important; }

.shop-panel {
  width: min(1180px, 100%);
  max-height: min(820px, calc(100vh - 16px));
  overflow: auto;
  padding: clamp(18px, 2.5vw, 34px);
  color: #ecfbff;
  border: 1px solid rgba(73, 230, 255, 0.48);
  border-radius: 14px;
  background:
    radial-gradient(circle at 80% 20%, rgba(53, 109, 230, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(7, 20, 42, 0.99), rgba(3, 8, 24, 0.99));
  box-shadow: 0 0 70px rgba(42, 210, 255, 0.18), inset 0 0 42px rgba(67, 139, 255, 0.06);
}

.shop-header,
.shop-mode-group,
.shop-review-actions,
.shop-item-status,
.shop-price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shop-header h2 { margin: 0; font-size: clamp(21px, 3.2vw, 32px); letter-spacing: 0.1em; }
.shop-mode-badge {
  padding: 7px 10px;
  color: #ffe59a;
  border: 1px solid rgba(255, 207, 85, 0.42);
  border-radius: 999px;
  background: rgba(255, 185, 48, 0.09);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.shop-mode-badge.live { color: #ff9aab; border-color: rgba(255, 90, 120, 0.48); }
.shop-mode-badge.sandbox { color: #91dcff; border-color: rgba(72, 187, 255, 0.46); }

.shop-categories {
  display: flex;
  gap: 7px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.shop-category {
  flex: 0 0 auto;
  padding: 9px 13px;
  color: #7597aa;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 6px;
  background: rgba(255,255,255,0.025);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  cursor: pointer;
}
.shop-category.active { color: #01151c; border-color: #65efff; background: #65efff; }

.shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
  gap: 18px;
}
.shop-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  max-height: 560px;
  overflow: auto;
  padding-right: 5px;
}
.shop-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  min-height: 105px;
  padding: 12px;
  color: #d8eef5;
  border: 1px solid rgba(78, 202, 235, 0.16);
  border-radius: 8px;
  background: rgba(18, 41, 70, 0.38);
  text-align: left;
  cursor: pointer;
}
.shop-card:hover, .shop-card.selected { border-color: rgba(92, 233, 255, 0.67); background: rgba(38, 98, 132, 0.29); }
.shop-card.locked { opacity: 0.66; }
.shop-card img, .shop-detail-image {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(80, 226, 255, 0.32));
}
.shop-card-copy { min-width: 0; }
.shop-card h3 { margin: 1px 0 6px; color: #f4fdff; font-size: 13px; letter-spacing: 0.04em; }
.shop-card p { margin: 0; color: #7598aa; font-size: 10px; line-height: 1.35; }
.shop-item-status { margin-top: 10px; color: #6deac7; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; }
.shop-item-status .price { color: #ffd978; font-size: 12px; }

.shop-detail {
  min-height: 420px;
  padding: 22px;
  border: 1px solid rgba(77, 220, 255, 0.2);
  border-radius: 9px;
  background: rgba(1, 8, 23, 0.72);
}
.shop-detail-hero { display: flex; align-items: center; gap: 16px; }
.shop-detail h3 { margin: 0; font-size: 22px; }
.shop-detail-tier { color: #66eaff; font-size: 10px; font-weight: 900; letter-spacing: 0.14em; }
.shop-detail-description { min-height: 56px; color: #9ab8c6; line-height: 1.55; }
.shop-bonus-list { display: grid; gap: 7px; margin: 18px 0; padding: 0; list-style: none; }
.shop-bonus-list li { padding: 9px 11px; color: #81ffd0; background: rgba(71, 255, 190, 0.055); font-size: 12px; }
.shop-requirement { color: #ffbd79; font-size: 11px; line-height: 1.45; }
.shop-price-line { margin-top: 22px; }
.shop-price { color: #ffe080; font-size: 24px; font-weight: 900; }
.shop-detail button { width: 100%; margin-top: 13px; }

.shop-login-panel, .shop-review {
  max-width: 620px;
  margin: 45px auto;
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(83, 224, 255, 0.24);
  background: rgba(39, 112, 148, 0.08);
}
.shop-login-panel p { color: #8eafbe; }
.shop-review h3 { margin: 4px 0 18px; font-size: 23px; letter-spacing: 0.08em; }
.shop-review-card { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 16px; text-align: left; }
.shop-review-card img { width: 86px; height: 86px; object-fit: contain; }
.shop-review-card strong { display: block; color: #fff; font-size: 18px; }
.shop-review-card span { color: #ffe080; font-weight: 900; }
.shop-simulation-notice { padding: 10px; color: #ffe395; border: 1px solid rgba(255, 212, 96, 0.3); background: rgba(255, 187, 55, 0.06); font-size: 10px; font-weight: 900; letter-spacing: 0.09em; }
.shop-review-actions { margin-top: 18px; }
.shop-review-actions button { flex: 1; }

@media (max-width: 850px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-catalog { max-height: 280px; }
  .shop-detail { min-height: 0; }
}

@media (max-width: 570px) {
  .shop-panel { border-radius: 0; }
  .shop-header { align-items: flex-start; }
  .shop-mode-group { flex-direction: column-reverse; align-items: flex-end; }
  .shop-mode-badge { white-space: normal; text-align: center; }
  .shop-catalog { grid-template-columns: 1fr; }
  .shop-review-card { grid-template-columns: 62px 1fr; }
  .shop-review-card img { width: 62px; height: 62px; }
}

.network-overlay[hidden],
.network-view[hidden],
.network-form[hidden],
[hidden] { display: none !important; }

.network-panel {
  width: min(920px, 100%);
  max-height: min(760px, calc(100vh - 24px));
  overflow: auto;
  box-sizing: border-box;
  padding: clamp(20px, 3.2vw, 38px);
  color: #ecfbff;
  border: 1px solid rgba(73, 230, 255, 0.48);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(7, 20, 42, 0.98), rgba(3, 8, 24, 0.98));
  box-shadow: 0 0 60px rgba(42, 210, 255, 0.17), inset 0 0 42px rgba(67, 139, 255, 0.06);
  font-family: "Segoe UI", system-ui, sans-serif;
}

.network-header,
.leaderboard-summary,
.network-actions,
.leaderboard-pagination,
.leaderboard-personal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.network-kicker {
  margin: 0 0 5px;
  color: #5eeaff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
}

.network-header h2 {
  margin: 0;
  font-size: clamp(22px, 4vw, 32px);
  letter-spacing: 0.12em;
}

.network-icon-button {
  width: 42px;
  height: 42px;
  color: #dffaff;
  border: 1px solid rgba(255,255,255,0.17);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  font-size: 27px;
  cursor: pointer;
}

.network-message {
  min-height: 24px;
  margin: 18px 0;
  color: #8daec1;
}

.network-message.error { color: #ff7f9b; }
.network-message.success { color: #68ffc3; }

.network-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.network-tab {
  padding: 13px;
  color: #7896aa;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.16em;
  cursor: pointer;
}

.network-tab.active { color: #65efff; border-bottom-color: #65efff; }

.network-form {
  display: grid;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto;
}

.network-form label {
  display: grid;
  gap: 7px;
  color: #9fbac9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.network-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  color: #f5fdff;
  border: 1px solid rgba(84, 224, 255, 0.28);
  border-radius: 7px;
  outline: none;
  background: rgba(1, 6, 18, 0.82);
  font: inherit;
}

.network-form input:focus { border-color: #61ebff; box-shadow: 0 0 0 3px rgba(68, 224, 255, 0.1); }
.network-form small, .network-privacy { color: #69899d; line-height: 1.5; }
.network-privacy { max-width: 560px; margin: 22px auto 0; font-size: 12px; }

.network-primary-button,
.network-secondary-button {
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.network-primary-button {
  color: #00151d;
  border: 1px solid #70f3ff;
  background: linear-gradient(90deg, #58ddff, #65ffc4);
}

.network-secondary-button {
  color: #cceef5;
  border: 1px solid rgba(98, 222, 255, 0.3);
  background: rgba(50, 177, 218, 0.08);
}

.network-secondary-button.danger { color: #ff8ca4; border-color: rgba(255, 92, 127, 0.38); }
button:disabled { opacity: 0.38; cursor: not-allowed; }

.pilot-card {
  display: grid;
  gap: 5px;
  padding: 20px;
  border-left: 3px solid #65f2ff;
  background: rgba(85, 226, 255, 0.06);
}

.pilot-card span, .account-stats span { color: #7797aa; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; }
.pilot-card strong { color: #fff; font-size: 27px; }
.pilot-card small { color: #62e8ff; }

.account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.account-stats div { display: grid; gap: 8px; padding: 17px; background: rgba(255,255,255,0.035); }
.account-stats strong { color: #effcff; font-size: 20px; }
.submission-status { min-height: 22px; color: #8caec0; }

.leaderboard-summary { margin-bottom: 14px; color: #82a6b9; font-size: 11px; letter-spacing: 0.08em; }
.leaderboard-summary span:first-child { color: #65efff; font-weight: 900; }
.leaderboard-table-wrap { min-height: 320px; overflow-x: auto; border: 1px solid rgba(255,255,255,0.08); }
.leaderboard-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.leaderboard-table th { padding: 11px 13px; color: #698da1; background: rgba(255,255,255,0.035); font-size: 10px; letter-spacing: 0.13em; text-align: left; }
.leaderboard-table td { padding: 11px 13px; border-top: 1px solid rgba(255,255,255,0.055); color: #d7edf3; }
.leaderboard-table th:nth-child(1), .leaderboard-table td:nth-child(1),
.leaderboard-table th:nth-child(n+3), .leaderboard-table td:nth-child(n+3) { text-align: right; }
.leaderboard-table tr.current-player { background: rgba(89, 238, 255, 0.1); box-shadow: inset 3px 0 #62efff; }
.leaderboard-table .pilot-name { color: #fff; font-weight: 800; }
.leaderboard-table .pilot-handle { color: #698da1; font-size: 11px; margin-left: 7px; }
.leaderboard-empty { padding: 80px 20px; color: #789bad; text-align: center; }
.leaderboard-personal { margin: 14px 0; padding: 13px 16px; color: #8cabbd; background: rgba(87, 229, 255, 0.06); }
.leaderboard-personal strong { color: #65f0ff; margin-left: 6px; }

@media (max-width: 700px) {
  .network-panel { padding: 18px; }
  .account-stats { grid-template-columns: 1fr; }
  .network-actions, .leaderboard-pagination { flex-wrap: wrap; }
  .network-actions button, .leaderboard-pagination button { flex: 1 1 140px; }
  .leaderboard-table th:last-child, .leaderboard-table td:last-child { display: none; }
  .leaderboard-personal { align-items: flex-start; flex-direction: column; }
}