:root {
      color-scheme: dark;
      --bg-1: #050d18;
      --bg-2: #122542;
      --bg-3: #1e3558;
      --player: #59efce;
      --enemy: #ff936d;
      --neutral: #f4ce74;
      --line: rgba(218, 231, 255, 0.16);
      --grid: rgba(158, 186, 239, 0.08);
      --panel: rgba(6, 13, 24, 0.62);
      --panel-border: rgba(195, 215, 255, 0.12);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 18%, rgba(89, 239, 206, 0.18), transparent 24%),
        radial-gradient(circle at 82% 22%, rgba(255, 147, 109, 0.18), transparent 24%),
        radial-gradient(circle at 50% 78%, rgba(244, 206, 116, 0.12), transparent 28%),
        linear-gradient(160deg, var(--bg-1), var(--bg-2) 52%, var(--bg-3));
      font-family: Arial, sans-serif;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
    }

    body::before {
      background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
      background-size: 42px 42px;
      -webkit-mask-image: radial-gradient(circle at center, black, transparent 88%);
      mask-image: radial-gradient(circle at center, black, transparent 88%);
    }

    body::after {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.02));
      mix-blend-mode: screen;
      opacity: 0.65;
    }

    .arena-shell {
      position: relative;
      width: 100vw;
      height: 100vh;
      padding: 12px;
      z-index: 1;
    }

    .map-card {
      --node-size: 112px;
      --node-core-inset: 20px;
      --node-font-size: 2rem;
      --level-glow: rgba(89, 239, 206, 0);
      --level-flare: rgba(244, 206, 116, 0);
      --stage-aura-1: rgba(89, 239, 206, 0.16);
      --stage-aura-2: rgba(255, 147, 109, 0.16);
      --stage-aura-3: rgba(244, 206, 116, 0.1);
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03), transparent 58%),
        linear-gradient(180deg, rgba(19, 35, 61, 0.86), rgba(6, 13, 24, 0.92));
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 24px 80px rgba(0, 0, 0, 0.38),
        0 0 60px var(--level-glow);
      touch-action: none;
    }

    .map-card::before,
    .map-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .map-card::before {
      background:
        radial-gradient(circle at 15% 74%, var(--stage-aura-1), transparent 18%),
        radial-gradient(circle at 77% 24%, var(--stage-aura-2), transparent 20%),
        radial-gradient(circle at 43% 32%, var(--stage-aura-3), transparent 18%),
        radial-gradient(circle at 50% 50%, var(--level-flare), transparent 36%);
    }

    .map-card.stage-frost {
      background:
        radial-gradient(circle at 24% 72%, rgba(157, 224, 255, 0.08), transparent 30%),
        linear-gradient(150deg, rgba(9, 25, 42, 0.94), rgba(16, 38, 62, 0.92));
    }

    .map-card.stage-ember {
      background:
        radial-gradient(circle at 80% 18%, rgba(255, 120, 77, 0.12), transparent 28%),
        linear-gradient(165deg, rgba(29, 12, 18, 0.94), rgba(55, 26, 20, 0.92));
    }

    .map-card.stage-verdant {
      background:
        radial-gradient(circle at 18% 30%, rgba(91, 255, 174, 0.1), transparent 30%),
        linear-gradient(155deg, rgba(7, 27, 28, 0.94), rgba(20, 48, 34, 0.92));
    }

    .map-card.stage-storm {
      background:
        radial-gradient(circle at 50% 20%, rgba(202, 170, 255, 0.1), transparent 28%),
        linear-gradient(155deg, rgba(17, 14, 38, 0.94), rgba(25, 31, 62, 0.92));
    }

    .map-card::after {
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
      background-size: 64px 64px;
      opacity: 0.32;
      -webkit-mask-image: radial-gradient(circle at center, black, transparent 88%);
      mask-image: radial-gradient(circle at center, black, transparent 88%);
    }

    .map-card.win {
      box-shadow: inset 0 0 0 1px rgba(89, 239, 206, 0.35), 0 0 70px rgba(89, 239, 206, 0.2);
    }

    .map-card.loss {
      box-shadow: inset 0 0 0 1px rgba(255, 147, 109, 0.35), 0 0 70px rgba(255, 147, 109, 0.2);
    }

    .restart-button {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 7;
      width: 48px;
      height: 48px;
      border: 1px solid var(--panel-border);
      border-radius: 999px;
      background: var(--panel);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
      cursor: pointer;
    }

    .restart-button::before,
    .restart-button::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
    }

    .restart-button::before {
      width: 18px;
      height: 18px;
      border: 3px solid rgba(243, 248, 255, 0.92);
      border-right-color: transparent;
      border-radius: 50%;
      transform: rotate(-36deg);
    }

    .restart-button::after {
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 7px solid rgba(243, 248, 255, 0.92);
      transform: translate(9px, -7px) rotate(-28deg);
    }

    .restart-button:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.86);
      outline-offset: 4px;
    }

    .level-badge {
      position: absolute;
      top: 18px;
      left: 18px;
      z-index: 7;
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--panel);
      border: 1px solid var(--panel-border);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      color: rgba(245, 249, 255, 0.98);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
    }

    .menu-overlay {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(4, 9, 21, 0.58);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      transition: opacity 180ms ease, visibility 180ms ease;
    }

    .menu-overlay.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .menu-card {
      width: min(560px, 100%);
      border-radius: 28px;
      padding: 28px;
      background: linear-gradient(180deg, rgba(11, 20, 34, 0.96), rgba(6, 13, 24, 0.98));
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    }

    .menu-label,
    .menu-chip,
    .level-chip {
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .menu-label {
      display: inline-block;
      margin-bottom: 12px;
      color: rgba(89, 239, 206, 0.92);
      font-size: 0.72rem;
      font-weight: 800;
    }

    .menu-title {
      margin: 0;
      color: rgba(244, 248, 255, 0.98);
      font-size: clamp(2rem, 6vw, 3.2rem);
      line-height: 0.95;
    }

    .menu-copy {
      margin: 14px 0 0;
      color: rgba(202, 216, 242, 0.82);
      line-height: 1.55;
      font-size: 1rem;
    }

    .menu-grid {
      margin-top: 22px;
      display: grid;
      gap: 16px;
    }

    .menu-panel {
      padding: 16px 18px;
      border-radius: 18px;
      background: rgba(4, 10, 19, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .menu-chip {
      display: inline-block;
      margin-bottom: 10px;
      color: rgba(168, 186, 221, 0.88);
      font-size: 0.68rem;
      font-weight: 800;
    }

    .menu-level {
      color: #ffffff;
      font-size: 1.8rem;
      font-weight: 800;
    }

    .menu-actions {
      margin-top: 20px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .menu-button {
      border: 0;
      border-radius: 16px;
      padding: 14px 18px;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
    }

    .menu-button.primary {
      background: linear-gradient(135deg, #1dceb3, #0f7e72);
      color: #04101d;
      box-shadow: 0 18px 32px rgba(29, 206, 179, 0.2);
    }

    .menu-button.secondary {
      background: rgba(4, 10, 19, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #ffffff;
    }

    .completed-list {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      min-height: 36px;
    }

    .completed-empty {
      color: rgba(170, 184, 212, 0.72);
      font-size: 0.94rem;
    }

    .level-chip {
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      padding: 8px 12px;
      background: rgba(4, 10, 19, 0.88);
      color: #ffffff;
      font-size: 0.72rem;
      font-weight: 800;
      cursor: pointer;
    }

    .level-chip.current {
      border-color: rgba(244, 206, 116, 0.5);
      color: rgba(255, 232, 177, 0.98);
      box-shadow: 0 0 0 4px rgba(244, 206, 116, 0.08);
    }

    .network,
    .route-layer,
    .drag-layer,
    .troops,
    .nodes-layer {
      position: absolute;
      inset: 0;
    }

    .network,
    .route-layer,
    .drag-layer {
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    .network line {
      stroke: var(--line);
      stroke-width: 3;
      transition: stroke 160ms ease, opacity 160ms ease;
    }

    .network line.player-link {
      stroke: rgba(89, 239, 206, 0.28);
    }

    .network line.enemy-link {
      stroke: rgba(255, 147, 109, 0.28);
    }

    .network line.selected-link {
      stroke: rgba(244, 206, 116, 0.82);
      stroke-dasharray: 10 8;
      animation: lane-flow 0.9s linear infinite;
    }

    .route-layer {
      z-index: 2;
    }

    .route-layer line {
      stroke: rgba(244, 206, 116, 0.92);
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-dasharray: 6 6;
      animation: route-flow 1.1s linear infinite;
      filter: drop-shadow(0 0 12px rgba(244, 206, 116, 0.36));
    }

    .network line.removing-link {
      stroke: rgba(255, 147, 109, 0.88);
      stroke-dasharray: 6 7;
      animation: lane-flow 0.55s linear infinite;
    }

    .drag-line {
      display: none;
      stroke-width: 4;
      stroke-linecap: round;
      stroke: rgba(244, 206, 116, 0.78);
      filter: drop-shadow(0 0 12px rgba(244, 206, 116, 0.4));
    }

    .drag-line.invalid {
      stroke: rgba(255, 147, 109, 0.72);
      stroke-dasharray: 10 8;
      filter: drop-shadow(0 0 12px rgba(255, 147, 109, 0.34));
    }

    .drag-line.removing {
      stroke: rgba(255, 147, 109, 0.92);
      stroke-dasharray: 5 6;
      filter: drop-shadow(0 0 14px rgba(255, 147, 109, 0.5));
    }

    .drag-orb {
      display: none;
      r: 6;
      fill: rgba(244, 206, 116, 0.95);
      filter: drop-shadow(0 0 10px rgba(244, 206, 116, 0.42));
    }

    .drag-orb.invalid {
      fill: rgba(255, 147, 109, 0.95);
      filter: drop-shadow(0 0 10px rgba(255, 147, 109, 0.36));
    }

    .drag-orb.removing {
      fill: rgba(255, 147, 109, 0.92);
      filter: drop-shadow(0 0 14px rgba(255, 147, 109, 0.5));
    }

    .route-delete-layer {
      position: absolute;
      inset: 0;
      z-index: 6;
      pointer-events: none;
    }

    .route-delete {
      position: absolute;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255, 147, 109, 0.5);
      border-radius: 50%;
      background: rgba(7, 12, 22, 0.9);
      color: rgba(255, 214, 197, 0.96);
      font-size: 1rem;
      font-weight: 900;
      display: grid;
      place-items: center;
      transform: translate(-50%, -50%) scale(0.84);
      opacity: 0;
      pointer-events: auto;
      cursor: pointer;
      transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.36), 0 0 18px rgba(255, 147, 109, 0.16);
    }

    .route-delete::before {
      content: "";
      position: absolute;
      width: 70px;
      height: 52px;
      border-radius: 999px;
    }

    .route-delete:hover,
    .route-delete:focus-visible {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      border-color: rgba(255, 147, 109, 0.9);
      outline: none;
    }

    .route-delete-layer:has(.route-delete:hover) .route-delete,
    .route-delete-layer:has(.route-delete:focus-visible) .route-delete {
      opacity: 0.34;
    }

    .route-delete-layer:has(.route-delete:hover) .route-delete:hover,
    .route-delete-layer:has(.route-delete:focus-visible) .route-delete:focus-visible {
      opacity: 1;
    }

    .effects {
      z-index: 4;
      pointer-events: none;
    }

    .nodes-layer {
      z-index: 3;
    }

    .troops {
      z-index: 5;
      pointer-events: none;
    }

    .node {
      position: absolute;
      width: var(--node-size);
      height: var(--node-size);
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      transform: translate(-50%, -50%);
      transition: transform 160ms ease, filter 160ms ease;
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .node:hover,
    .node.active,
    .node.route-source,
    .node.route-target {
      transform: translate(-50%, -50%) scale(1.04);
    }

    .node:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.85);
      outline-offset: 6px;
      border-radius: 50%;
    }

    .node-shell {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      display: grid;
      place-items: center;
      isolation: isolate;
    }

    .node-shell::before,
    .node-shell::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
    }

    .node-shell::before {
      background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.38), transparent 35%), currentColor;
      opacity: 0.17;
      filter: blur(3px);
    }

    .node-shell::after {
      inset: 7px;
      border: 2px solid rgba(255, 255, 255, 0.16);
      opacity: 0.9;
    }

    .node-core {
      position: absolute;
      inset: var(--node-core-inset);
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.3), transparent 38%), rgba(5, 11, 20, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.04);
    }

    .node-ring {
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      border: 2px solid currentColor;
      opacity: 0.28;
    }

    .node.owner-player { color: var(--player); }
    .node.owner-enemy { color: var(--enemy); }
    .node.owner-neutral { color: var(--neutral); }

    .node.owner-player .node-shell { filter: drop-shadow(0 0 20px rgba(89, 239, 206, 0.34)); }
    .node.owner-enemy .node-shell { filter: drop-shadow(0 0 20px rgba(255, 147, 109, 0.28)); }
    .node.owner-neutral .node-shell { filter: drop-shadow(0 0 20px rgba(244, 206, 116, 0.24)); }

    .node.generator .node-shell::after {
      inset: 1px;
      border: 2px solid rgba(255, 255, 255, 0.28);
      box-shadow: 0 0 0 6px rgba(244, 206, 116, 0.16);
    }

    .node.generator .node-core {
      box-shadow:
        inset 0 0 24px rgba(255, 255, 255, 0.05),
        0 0 24px rgba(244, 206, 116, 0.18);
    }

    .node-generator-badge {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(6, 13, 24, 0.88);
      border: 1px solid rgba(244, 206, 116, 0.55);
      color: rgba(255, 232, 177, 0.96);
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      box-shadow: 0 0 16px rgba(244, 206, 116, 0.2);
    }

    .node-role-badge {
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(6, 13, 24, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.14);
      color: rgba(230, 239, 255, 0.92);
      font-size: 0.58rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .node.role-fortress .node-role-badge {
      border-color: rgba(142, 210, 255, 0.38);
      color: rgba(198, 232, 255, 0.96);
    }

    .node.role-relay .node-role-badge {
      border-color: rgba(89, 239, 206, 0.35);
      color: rgba(188, 255, 240, 0.96);
    }

    .node.role-assault .node-role-badge {
      border-color: rgba(255, 147, 109, 0.4);
      color: rgba(255, 214, 197, 0.96);
    }

    .node.active .node-ring,
    .node.route-source .node-ring,
    .node.route-target .node-ring {
      opacity: 0.76;
    }

    .node.removing-route {
      transform: translate(-50%, -50%) scale(1.1);
    }

    .node.removing-route .node-ring {
      border-color: rgba(255, 147, 109, 0.92);
      opacity: 1;
      box-shadow: 0 0 24px rgba(255, 147, 109, 0.36);
    }

    .node-value {
      font-size: var(--node-font-size);
      font-weight: 800;
      line-height: 1;
      color: rgba(245, 249, 255, 0.96);
      text-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
    }

    .troop {
      position: absolute;
      width: 18px;
      height: 18px;
      margin: -9px 0 0 -9px;
      border-radius: 50%;
      box-shadow: 0 0 18px currentColor;
    }

    .troop.player { color: var(--player); background: var(--player); }
    .troop.enemy { color: var(--enemy); background: var(--enemy); }

    .impact {
      position: absolute;
      width: 30px;
      height: 30px;
      margin: -15px 0 0 -15px;
      border-radius: 50%;
      border: 2px solid currentColor;
      opacity: 0;
      animation: impact-burst 420ms ease-out forwards;
      mix-blend-mode: screen;
    }

    .impact::before,
    .impact::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
    }

    .impact::before {
      background: radial-gradient(circle, currentColor 0%, rgba(255, 255, 255, 0.12) 35%, transparent 70%);
      opacity: 0.3;
      transform: scale(0.55);
    }

    .impact::after {
      inset: -8px;
      border: 1px solid currentColor;
      opacity: 0.5;
    }

    .impact.player { color: var(--player); }
    .impact.enemy { color: var(--enemy); }

    .impact.captured {
      width: 44px;
      height: 44px;
      margin: -22px 0 0 -22px;
      animation-duration: 560ms;
    }

    @keyframes lane-flow {
      to {
        stroke-dashoffset: -18;
      }
    }

    @keyframes route-flow {
      to {
        stroke-dashoffset: -12;
      }
    }

    @keyframes impact-burst {
      0% {
        opacity: 0.9;
        transform: scale(0.25);
      }

      55% {
        opacity: 0.6;
        transform: scale(1.15);
      }

      100% {
        opacity: 0;
        transform: scale(1.55);
      }
    }

    @media (max-width: 780px) {
      .arena-shell {
        padding: 8px;
      }

      .map-card {
        border-radius: 22px;
      }

      .node {
        width: calc(var(--node-size) * 0.79);
        height: calc(var(--node-size) * 0.79);
      }

      .node-core {
        inset: calc(var(--node-core-inset) * 0.8);
      }

      .node-value {
        font-size: calc(var(--node-font-size) * 0.78);
      }

      .restart-button {
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
      }

      .level-badge {
        top: 16px;
        left: 16px;
        padding: 8px 12px;
      }
    }