/* ── DEEP SPACE OPS ── */
  #dso-wrapper { min-height: 560px; }

  /* faction select */
  #dso-select { padding: 10px 0 30px; }
  .dso-title-wrap { text-align:center; margin-bottom: 36px; }
  .dso-pre {
    font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:6px;
    color: var(--neon-cyan); opacity:0.7; margin-bottom:8px;
  }
  .dso-title {
    font-family:'Orbitron',sans-serif; font-size:38px; font-weight:900; letter-spacing:8px;
    background: linear-gradient(90deg,#cc00ff,#0088ff,#00ffcc);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    margin-bottom:10px;
  }
  .dso-sub { font-size:14px; letter-spacing:2px; color:var(--text-dim); }

  /* mode tabs — AI / PVP / TRAINING */
  .dso-mode-tabs { display:flex; gap:8px; justify-content:center; margin-top:22px; }
  .dso-mode-tab {
    font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px;
    padding:9px 22px; background:rgba(5,15,30,0.9);
    border:1px solid rgba(100,120,160,0.25); color:var(--text-dim);
    cursor:pointer; transition:all 0.25s ease;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  }
  .dso-mode-tab:hover { border-color:rgba(0,245,255,0.4); color:var(--text-bright); }
  .dso-mode-tab.active {
    color:var(--neon-cyan); border-color:rgba(0,245,255,0.6);
    background:rgba(0,245,255,0.08); box-shadow:0 0 16px rgba(0,245,255,0.15);
  }
  .dso-mode-desc {
    text-align:center; font-size:11px; letter-spacing:1px; color:var(--text-dim);
    margin-top:12px;
  }
  .dso-training-banner {
    max-width:640px; margin:20px auto 0; padding:12px 20px;
    background:rgba(0,245,255,0.06); border:1px solid rgba(0,245,255,0.25);
    text-align:center; font-size:12px; line-height:1.6; letter-spacing:0.5px; color:var(--text-bright);
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  }
  .dso-training-banner-icon { margin-right:6px; }

  .faction-cards {
    display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  }
  .faction-card {
    background: rgba(5,15,30,0.9);
    border: 1px solid rgba(100,120,160,0.2);
    width: 220px;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    padding-bottom: 20px;
  }
  .faction-card::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
    pointer-events:none; z-index:1;
  }
  .faction-card:hover { transform: translateY(-6px) scale(1.02); }
  #fc-shadow:hover  { border-color:rgba(136,0,255,0.6); box-shadow:0 0 30px rgba(136,0,255,0.2); }
  #fc-prism:hover   { border-color:rgba(0,245,255,0.6); box-shadow:0 0 30px rgba(0,245,255,0.2); }
  #fc-roboto:hover  { border-color:rgba(255,136,0,0.6); box-shadow:0 0 30px rgba(255,136,0,0.2); }

  .fc-canvas { display:block; position:relative; z-index:2; }
  .fc-name {
    font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px;
    margin: 8px 0 6px; text-align:center; position:relative; z-index:2;
  }
  #fc-shadow .fc-name  { color:#bb44ff; }
  #fc-prism .fc-name   { color:#00f5ff; }
  #fc-roboto .fc-name  { color:#ff8800; }

  .fc-desc {
    font-size:11px; line-height:1.6; letter-spacing:0.5px; color:var(--text-dim);
    text-align:center; padding:0 14px; margin-bottom:14px; position:relative; z-index:2;
  }
  .fc-stats { width:100%; padding:0 16px; margin-bottom:14px; position:relative; z-index:2; }
  .fc-stat { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
  .fc-stat-label {
    font-family:'Orbitron',sans-serif; font-size:8px; letter-spacing:2px;
    color:var(--text-dim); width:28px; flex-shrink:0;
  }
  .fc-bar {
    flex:1; height:4px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden;
  }
  .fc-fill { height:100%; border-radius:2px; transition:width 0.8s ease; box-shadow:0 0 6px currentColor; }
  .fc-btn {
    font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:4px;
    padding:8px 22px; border:1px solid rgba(255,255,255,0.15);
    color:rgba(255,255,255,0.5); position:relative; z-index:2;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
    transition:all 0.2s;
  }
  #fc-shadow:hover .fc-btn { border-color:#8800ff; color:#bb44ff; background:rgba(136,0,255,0.1); }
  #fc-prism:hover  .fc-btn { border-color:#00f5ff; color:#00f5ff; background:rgba(0,245,255,0.1); }
  #fc-roboto:hover .fc-btn { border-color:#ff8800; color:#ff8800; background:rgba(255,136,0,0.1); }

  /* skins tab */
  #tab-skins { padding: 10px 0 30px; }

  /* list + detail layout — pick a unit's name on the left, see its
     default (and alternate, when it has one) skin on the right */
  .skins-layout { display: flex; gap: 36px; align-items: flex-start; }
  .skins-list-col { flex: 0 0 240px; }
  .skins-detail-col { flex: 1 1 auto; min-width: 0; }

  .skins-list-section-label {
    font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:4px;
    color: var(--neon-cyan); opacity:0.7; margin: 22px 0 8px;
  }
  .skins-list-section-label:first-child { margin-top: 0; }
  .skins-list { list-style: none; margin: 0 0 4px; padding: 0; }
  .skins-list-item {
    cursor: pointer;
    font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:1.5px;
    color: var(--text-dim);
    padding: 9px 12px;
    border: 1px solid transparent; border-left: 2px solid transparent;
    border-radius: 2px;
    transition: all 0.2s ease;
  }
  .skins-list-item:hover { color:#fff; background: rgba(0,245,255,0.06); border-left-color: rgba(0,245,255,0.4); }
  .skins-list-item.selected {
    color:#00f5ff; background: rgba(0,245,255,0.1);
    border-color: rgba(0,245,255,0.25); border-left-color:#00f5ff;
  }
  .skins-list-item[data-faction="shadow"].selected { color:#cc66ff; background: rgba(170,0,255,0.1); border-left-color:#cc66ff; }
  .skins-list-item[data-faction="roboto"].selected { color:#ffaa33; background: rgba(255,136,0,0.1); border-left-color:#ffaa33; }

  .skin-detail[hidden] { display: none; }

  .skins-gallery {
    display: flex; gap: 36px; justify-content: center; flex-wrap: wrap; align-items: flex-start;
  }

  @media (max-width: 760px) {
    .skins-layout { flex-direction: column; }
    .skins-list-col { flex-basis: auto; width: 100%; }
  }

  /* .skin-option is the clickable/selectable unit — one option can bundle several
     .skin-card previews (e.g. attacking + phasing) because they're skins on the
     same unit and must be picked and light up together as a single choice. */
  .skin-option {
    cursor: pointer;
    border: 2px solid rgba(100,120,160,0.2);
    border-radius: 4px;
    padding: 16px 16px 14px;
    background: rgba(5,10,20,0.5);
    transition: all 0.3s ease;
    display: flex; flex-direction: column; align-items: center;
    max-width: 860px;
  }
  .skin-option:hover { transform: translateY(-4px); border-color: rgba(0,245,255,0.45); }
  .skin-option.selected {
    border-color: #00f5ff;
    animation: skinGlowPulse 2.4s ease-in-out infinite;
  }
  @keyframes skinGlowPulse {
    0%,100% { box-shadow: 0 0 18px rgba(0,245,255,0.3), inset 0 0 16px rgba(0,245,255,0.06); }
    50% { box-shadow: 0 0 38px rgba(0,245,255,0.65), inset 0 0 22px rgba(0,245,255,0.12); }
  }

  .skin-option-cards {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  }
  .skin-card {
    background: rgba(5,15,30,0.9);
    border: 1px solid rgba(0,245,255,0.2);
    width: 380px;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    transition: border-color 0.3s ease;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    padding-bottom: 16px;
  }
  .skin-card::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%);
    pointer-events:none; z-index:1;
  }
  .skin-option.selected .skin-card { border-color: rgba(0,245,255,0.6); }
  .skin-canvas { display:block; position:relative; z-index:2; width:100%; height:auto; }
  .skin-name {
    font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700; letter-spacing:2px;
    margin: 12px 0 4px; text-align:center; position:relative; z-index:2; color:#00f5ff;
  }
  .skin-mode {
    font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:3px;
    text-align:center; position:relative; z-index:2; color:#aaffff; opacity:0.85;
  }
  .skin-desc {
    font-size:11px; line-height:1.6; letter-spacing:0.5px; color:var(--text-dim);
    text-align:center; padding: 14px 18px 0; max-width:640px;
  }
  .skin-price {
    margin-top: 12px;
    font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:2px;
    color:#ffd700;
  }
  .skin-equip-badge {
    display: none;
    margin-top: 12px;
    font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700; letter-spacing:3px;
    color:#0a1520; background:#00f5ff; padding:6px 18px; border-radius:2px;
  }
  .skin-option.selected .skin-equip-badge { display: block; }
  .skin-option.selected .skin-price,
  .skin-option.owned .skin-price { display: none; }

  /* Unpurchased alt skins — the price doubles as the buy button; a lock icon
     and pointer cursor signal that a click opens Polar checkout rather than
     equipping for free. */
  .skin-option:not(.owned):not(.selected) .skin-price {
    cursor: pointer;
  }
  .skin-option:not(.owned):not(.selected) .skin-price::before {
    content: '🔒 ';
  }
  .skin-option:not(.owned):not(.selected):hover .skin-price {
    color: #fff2a8;
    text-shadow: 0 0 8px rgba(255,215,0,0.6);
  }
  .skin-option.skin-purchasing {
    opacity: 0.65;
    pointer-events: none;
  }
  .skin-option.skin-purchasing .skin-price {
    cursor: default;
  }
  .skin-option.skin-purchasing .skin-price::before {
    content: none;
  }

  /* warrior/hero portrait cards — accent color follows each unit's faction,
     at any nesting depth (they now sit inside a .skin-option like the
     flagships' cards do, once every standard-issue unit became equippable) */
  .skins-gallery .skin-card:hover { transform: translateY(-6px); border-color:rgba(0,245,255,0.6); box-shadow:0 0 30px rgba(0,245,255,0.2); }
  .skin-card[data-faction="shadow"] .skin-name,
  .skin-card[data-faction="shadow"] .skin-mode { color:#cc66ff; }
  .skin-card[data-faction="shadow"]:hover { border-color:rgba(170,0,255,0.6); box-shadow:0 0 30px rgba(170,0,255,0.2); }
  .skin-card[data-faction="roboto"] .skin-name,
  .skin-card[data-faction="roboto"] .skin-mode { color:#ffaa33; }
  .skin-card[data-faction="roboto"]:hover { border-color:rgba(255,136,0,0.6); box-shadow:0 0 30px rgba(255,136,0,0.2); }

  /* reveal screen */
  #dso-reveal { padding: 10px 0; }
  @keyframes fadeSlideDown {
    from { opacity:0; transform:translateY(-14px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .reveal-header { text-align:center; margin-bottom:16px; }
  .reveal-armada {
    font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:6px;
    color:var(--text-dim); margin-bottom:6px;
    animation: fadeSlideDown 0.6s ease forwards;
  }
  .reveal-champion {
    font-family:'Orbitron',sans-serif; font-size:36px; font-weight:900; letter-spacing:8px;
    animation: fadeSlideDown 0.8s ease 0.1s forwards; opacity:0;
  }
  #rv-armada.shadow  { color:#bb44ff; }
  #rv-armada.prism   { color:#00f5ff; }
  #rv-armada.roboto  { color:#ff8800; }
  #rv-champion.shadow { background:linear-gradient(90deg,#8800ff,#cc44ff,#ffffff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  #rv-champion.prism  { background:linear-gradient(90deg,#00ccff,#ffffff,#ccffff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  #rv-champion.roboto { background:linear-gradient(90deg,#ff8800,#ffcc44,#ffffff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

  .reveal-stage {
    position:relative; display:flex; justify-content:center;
    margin: 0 auto 16px; max-width:900px;
  }
  #rv-canvas { display:block; border:1px solid rgba(100,130,180,0.15); }
  .reveal-vignette {
    position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, rgba(2,8,16,0.7) 100%);
  }
  .reveal-lore {
    font-family:'Rajdhani',sans-serif; font-size:16px; letter-spacing:3px;
    color:var(--text-dim); text-align:center; font-style:italic;
    margin-bottom:20px;
    animation: fadeSlideDown 1s ease 0.5s forwards; opacity:0;
  }
  .reveal-fc-stats {
    max-width:340px; margin:0 auto 22px; padding:0;
    animation: fadeSlideDown 1s ease 0.6s forwards; opacity:0;
  }
  .reveal-btns { display:flex; justify-content:center; gap:16px; }
  .rv-btn {
    font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:4px;
    padding:13px 30px; cursor:pointer; transition:all 0.2s;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  }
  .rv-back { background:transparent; border:1px solid rgba(255,255,255,0.15); color:var(--text-dim); }
  .rv-back:hover { border-color:rgba(255,255,255,0.4); color:var(--text-bright); }
  .rv-play { background:linear-gradient(135deg,rgba(0,245,255,0.1),rgba(0,136,255,0.2)); border:1px solid var(--neon-cyan); color:var(--neon-cyan); }
  .rv-play:hover { background:linear-gradient(135deg,rgba(0,245,255,0.2),rgba(0,136,255,0.3)); box-shadow:0 0 25px rgba(0,245,255,0.3); }

  /* ── RTS GAME ── */
  #dso-game {
    position:relative;
    flex-direction:column;
  }
  .rts-hud {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:6px 10px;
    background:rgba(2,8,16,0.95);
    border:1px solid rgba(0,245,255,0.15);
    border-top:none;
    order:3;
  }
  .rts-hud-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
  .rts-hud-left,.rts-hud-right { display:flex; flex-direction:column; gap:2px; min-width:160px; }
  .rts-hud-right { align-items:flex-end; }
  .rts-faction-badge {
    font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:2px;
    padding:2px 8px; border:1px solid rgba(0,245,255,0.3);
    color:var(--neon-cyan);
    clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  }
  .rts-faction-champion {
    font-family:'Orbitron',sans-serif; font-size:8px; letter-spacing:1.5px;
    color:var(--text-dim); margin-top:2px;
  }
  .rts-faction-stats { max-width:150px; padding:0; margin:4px 0 2px; }
  .rts-faction-stats .fc-stat { margin-bottom:3px; }
  .rts-faction-stats .fc-stat-label { width:22px; font-size:7px; }
  .rts-faction-stats .fc-bar { height:3px; }
  .rts-resource { font-size:10px; letter-spacing:1px; color:var(--text-dim); }
  .rts-res-icon { color:gold; }
  /* Bottom row: minimap + the permanent worker-actions/build panel + army controls */
  .rts-hud-bottom { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
  .rts-hud-minimap { flex:0 0 auto; display:flex; }
  .rts-hud-army { flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:140px; }
  .rts-build-btn {
    background:rgba(0,20,40,0.8); border:1px solid rgba(0,245,255,0.2);
    color:var(--text-bright); font-family:'Orbitron',sans-serif; font-size:8px; letter-spacing:1px;
    padding:4px 10px; cursor:pointer; transition:all 0.2s; text-align:center;
    clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  }
  .rts-build-btn:hover { border-color:var(--neon-cyan); background:rgba(0,245,255,0.08); box-shadow:0 0 12px rgba(0,245,255,0.15); }
  .rts-build-btn:disabled { opacity:0.35; cursor:not-allowed; }
  .rts-build-icon { font-size:13px; display:block; margin-bottom:1px; }
  .rts-cost { font-size:8px; color:gold; letter-spacing:1px; }
  .rts-speed-btns { display:flex; gap:4px; }
  .rts-speed-btns .speed-btn { padding:4px 8px; font-size:9px; }
  /* ── PLAYER STATS ── */
  .dso-stats {
    max-width:740px; margin:28px auto 0; padding:16px 20px 12px;
    background:rgba(2,10,22,0.85);
    border:1px solid rgba(0,245,255,0.15);
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  }
  .dso-stats-title {
    font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:4px;
    color:rgba(0,245,255,0.45); margin-bottom:10px; text-align:center;
  }
  .dso-stats-row {
    display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:10px;
  }
  .dso-stat-box { text-align:center; min-width:70px; }
  .dso-stat-label {
    font-family:'Orbitron',sans-serif; font-size:7px; letter-spacing:2px;
    color:var(--text-dim); margin-bottom:3px;
  }
  .dso-stat-val {
    font-family:'Orbitron',sans-serif; font-size:16px; font-weight:700;
    color:var(--text-bright); letter-spacing:1px;
  }
  .dso-stat-val.cyan { color:var(--neon-cyan); }
  .dso-rating-graph {
    display:block; width:100%; max-width:700px; height:120px; margin:0 auto;
    border:1px solid rgba(0,245,255,0.08);
  }
  /* compact variant — embedded in the in-game HUD, no title/graph, tighter boxes */
  .dso-stats-compact {
    max-width:none; margin:2px 0 0; padding:4px 8px;
  }
  .dso-stats-compact .dso-stats-row { gap:10px; margin-bottom:0; justify-content:flex-end; }
  .dso-stats-compact .dso-stat-box { min-width:44px; }
  .dso-stats-compact .dso-stat-val { font-size:12px; }
  /* ── MULTIPLAYER ── */
  .mp-controls { text-align:center; margin-top:30px; }
  .mp-divider {
    font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:4px;
    color:var(--text-dim); margin-bottom:16px;
  }
  .mp-buttons { display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; }
  .mp-join-row { display:flex; gap:8px; align-items:center; }
  .mp-input {
    background:rgba(0,20,40,0.8); border:1px solid rgba(0,245,255,0.3);
    color:var(--neon-cyan); font-family:'Orbitron',sans-serif; font-size:12px;
    letter-spacing:3px; padding:10px 14px; width:180px; text-align:center;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  }
  .mp-input::placeholder { color:var(--text-dim); letter-spacing:2px; font-size:10px; }
  .mp-input:focus { outline:none; border-color:var(--neon-cyan); box-shadow:0 0 15px rgba(0,245,255,0.2); }
  .mp-status {
    margin-top:12px; font-size:12px; letter-spacing:2px; color:var(--neon-cyan); min-height:20px;
  }
  .mp-status.error { color:var(--neon-pink); }
  .mp-status.waiting { color:var(--neon-green); animation:pulse 2s ease-in-out infinite; }
  .mp-code {
    font-family:'Orbitron',sans-serif; font-size:24px; letter-spacing:6px;
    color:var(--neon-green); cursor:pointer;
  }
  .mp-code:hover { text-shadow:0 0 15px rgba(0,255,136,0.5); }
  .mp-faction-pick {
    font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:3px;
    color:var(--neon-cyan); margin-top:8px;
  }

  .rts-retreat-btn {
    font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:2px;
    background:transparent; border:1px solid rgba(255,255,255,0.12);
    color:var(--text-dim); padding:5px 10px; cursor:pointer; transition:all 0.2s;
  }
  .rts-retreat-btn:hover { border-color:rgba(255,100,100,0.5); color:#ff8888; }
  #dso-game { position:relative; user-select:none; }
  #rts-viewport-wrap {
    position:relative;
    /* Height is never set directly — it's derived from width via
       aspect-ratio, so the canvas can never be stretched off-ratio.
       The height budget is expressed as an equivalent max-width instead
       (target-height * 1200/580) so a vh-based cap still works. */
    width:100%;
    max-width: min(1200px, calc(52vh / var(--ui-zoom) * 1200 / 580));
    aspect-ratio: 1200 / 580;
    margin: 0 auto;
    overflow:hidden;
    border:1px solid rgba(0,245,255,0.2);
    box-shadow:0 0 30px rgba(0,245,255,0.06);
    cursor:grab;
    display:block;
    order:1;
  }
  #rts-viewport-wrap:active { cursor:grabbing; }
  /* A red crosshair confirms that the next click issues an attack-move order. */
  #rts-viewport-wrap.rts-attack-move-armed,
  #rts-viewport-wrap.rts-attack-move-armed:active {
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 2v8M16 22v8M2 16h8M22 16h8M16 10a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z' fill='none' stroke='%23ff3030' stroke-width='2.5'/%3E%3C/svg%3E") 16 16, crosshair;
  }
  #rts-canvas {
    display:block;
    width:100%; height:100%;
    position:absolute; top:0; left:0;
  }
  #rts-minimap {
    display:block;
    width:160px; height:65px;
    border:1px solid rgba(0,245,255,0.35);
    background:rgba(2,8,16,0.9);
    box-shadow:0 0 10px rgba(0,245,255,0.15);
  }
  #rts-scroll-hint {
    position:absolute; top:8px; left:50%; transform:translateX(-50%);
    font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:3px;
    color:rgba(0,245,255,0.4); pointer-events:none; z-index:10;
    background:rgba(2,8,16,0.7); padding:4px 10px;
    animation: fadeOut 5s ease 2s forwards;
  }
  .rts-map-name { color:#9eeeff; text-shadow:0 0 8px rgba(0,200,255,.35); }
  @keyframes fadeOut { to { opacity:0; } }
  /* ── TRAINING GUIDE — lives in the build menu panel, not over the game screen ── */
  .training-guide {
    margin-top:8px;
    background:rgba(2,10,22,0.92); border:1px solid rgba(0,245,255,0.35);
    box-shadow:0 0 24px rgba(0,245,255,0.12);
    padding:10px 14px 12px;
    display:flex; flex-direction:column; gap:8px;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  }
  .training-guide-header { display:flex; align-items:center; gap:6px; }
  .training-guide-icon { font-size:13px; }
  .training-guide-label {
    font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:3px;
    color:var(--neon-cyan); flex:1;
  }
  .training-guide-close {
    background:transparent; border:none; color:var(--text-dim); cursor:pointer;
    font-size:12px; padding:0 2px; transition:color 0.2s;
  }
  .training-guide-close:hover { color:#ff8888; }
  .training-guide-text { font-size:12px; line-height:1.6; letter-spacing:0.3px; color:var(--text-bright); }
  .training-guide-next {
    align-self:flex-end;
    font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:2px;
    padding:6px 14px; background:rgba(0,245,255,0.08);
    border:1px solid rgba(0,245,255,0.4); color:var(--neon-cyan); cursor:pointer;
    transition:all 0.2s;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  }
  .training-guide-next:hover { background:rgba(0,245,255,0.18); box-shadow:0 0 12px rgba(0,245,255,0.2); }
  .rts-log-bar {
    background:rgba(2,8,16,0.9); border:1px solid rgba(0,245,255,0.1); border-top:none;
    padding:5px 14px; font-size:11px; letter-spacing:1px; color:var(--text-dim);
    min-height:24px;
    order:2;
  }
  .rts-over-overlay {
    position:absolute; top:36px; left:0; right:0; bottom:0;
    background:rgba(2,8,16,0.92);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:18px; z-index:50;
  }
  .rts-over-title {
    font-family:'Orbitron',sans-serif; font-size:48px; font-weight:900; letter-spacing:8px;
  }
  .rts-over-title.win  { color:var(--neon-green); text-shadow:0 0 40px rgba(0,255,136,0.5); }
  .rts-over-title.lose { color:var(--neon-pink);  text-shadow:0 0 40px rgba(255,0,136,0.5); }
  .rts-over-rating {
    font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:3px;
    color:var(--text-dim); margin-top:-6px;
  }
  .rts-diff-val { color:var(--neon-cyan); font-weight:700; }
  .rts-diff-max { color:var(--text-dim); font-size:10px; opacity:0.6; }
  /* ── WORKER ACTIONS / BUILD PANEL — permanent part of the bottom HUD ── */
  .rts-action-panel {
    flex:1 1 320px;
    min-width:0;
    display:flex;
    flex-direction:column;
    background:rgba(2,10,22,0.97);
    border:1px solid rgba(0,245,255,0.35);
    box-shadow:0 0 24px rgba(0,245,255,0.08);
    padding:8px 12px 10px;
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  }
  .rbp-header {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin-bottom:8px; padding-bottom:6px;
    border-bottom:1px solid rgba(0,245,255,0.15);
  }
  .rbp-title {
    font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:4px;
    color:var(--neon-cyan);
  }
  .rbp-options {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:6px;
    max-height:112px;
    overflow-y:auto;
  }
  .rbp-idle-hint {
    grid-column:1 / -1;
    font-size:11px; letter-spacing:1px; color:var(--text-dim);
    padding:6px 2px;
  }
  .rbp-option {
    display:flex; align-items:center; gap:10px;
    background:rgba(0,20,40,0.7);
    border:1px solid rgba(0,245,255,0.15);
    padding:6px 10px; cursor:pointer; transition:all 0.18s;
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  }
  .rbp-option:hover:not(:disabled) {
    border-color:var(--neon-cyan);
    background:rgba(0,245,255,0.08);
    box-shadow:0 0 12px rgba(0,245,255,0.12);
  }
  .rbp-option:disabled { opacity:0.35; cursor:not-allowed; }
  .rbp-opt-icon { font-size:20px; flex-shrink:0; }
  .rbp-opt-info { display:flex; flex-direction:column; flex:1; min-width:0; }
  .rbp-opt-name {
    font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:2px;
    color:var(--text-bright); margin-bottom:2px;
  }
  .rbp-opt-desc {
    font-size:10px; color:var(--text-dim); letter-spacing:0.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .rbp-opt-cost {
    font-family:'Orbitron',sans-serif; font-size:11px;
    color:gold; flex-shrink:0;
  }
  .rbp-close {
    flex-shrink:0; background:transparent;
    border:1px solid rgba(255,255,255,0.1); color:var(--text-dim);
    font-family:'Orbitron',sans-serif; font-size:11px;
    width:20px; height:20px; line-height:1; cursor:pointer; transition:all 0.15s;
  }
  .rbp-close:hover { border-color:rgba(255,100,100,0.4); color:#ff8888; }
  .rts-army-btn {
    color:#9fffe0;
    background:rgba(0,80,56,0.28);
  }
  .rts-army-btn:hover {
    border-color:#37ffc6; color:#c8fff0;
    background:rgba(30,220,160,0.16);
    box-shadow:0 0 16px rgba(55,255,198,0.28);
  }

  /* ── RTS RESPONSIVE ── */
  @media (max-height: 850px) {
    #dso-wrapper { min-height: 0; }
    #rts-viewport-wrap { max-width: min(951.7px, calc(42vh / var(--ui-zoom) * 1200 / 580)); }
    .rts-hud { padding: 5px 10px; gap: 4px; }
    .rts-hud-top { gap: 6px; }
    .rbp-options { max-height: 84px; }
  }
  @media (max-width: 900px) {
    .dso-title { font-size: 24px; letter-spacing: 4px; }
    .dso-pre { font-size: 9px; letter-spacing: 4px; }
    .faction-cards { gap: 12px; }
    .faction-card { width: 180px; }
    .skins-gallery { gap: 16px; }
    .skin-option { padding: 12px 10px; }
    .skin-card { width: min(380px, 84vw); }
    .rts-hud { padding: 6px 10px; }
    .rts-hud-left, .rts-hud-right { min-width: 120px; }
    #rts-minimap { width: 130px; height: 53px; }
    .rts-action-panel { flex-basis: 100%; order: -1; }
    #rts-viewport-wrap { max-width: min(1200px, calc(70vh / var(--ui-zoom) * 1200 / 580)); }
    #rv-canvas { width: 100%; height: auto; }
    .reveal-champion { font-size: 24px; letter-spacing: 4px; }
    .mp-code { font-size: 18px; letter-spacing: 4px; }
  }
  @media (max-width: 600px) {
    .dso-title { font-size: 18px; letter-spacing: 2px; }
    .faction-cards { flex-direction: column; align-items: center; }
    .faction-card { width: 90%; max-width: 280px; }
    .skins-gallery { flex-direction: column; align-items: center; }
    .skin-option { width: 92%; }
    .skin-card { width: 100%; max-width: 320px; }
    .rts-hud-top { flex-direction:column; align-items:stretch; }
    .rts-hud-bottom { flex-direction:column; align-items:stretch; }
    .rts-hud-minimap { justify-content:center; }
    .rts-action-panel { order:-1; }
    .rbp-options { grid-template-columns:minmax(0,1fr); }
    .rts-hud-army { flex-direction:row; }
    .rts-speed-btns { flex:1; justify-content:flex-end; }
    .rts-hud-right { align-items:flex-start; }
    .rts-build-btn { padding: 5px 10px; font-size: 8px; }
    .reveal-btns { flex-direction: column; gap: 10px; }
    .mp-buttons { flex-direction: column; gap: 10px; }
    .mp-join-row { justify-content: center; }
    #rts-viewport-wrap { max-width: calc(70vh / var(--ui-zoom) * 1200 / 580); }
  }
  /* Landscape mobile: constrain to viewport height */
  @media (max-height: 500px) and (orientation: landscape) {
    /* That min-height reserves room for the faction-select cards; once a
       match is running it just pads the bottom of a too-short viewport. */
    #dso-wrapper { min-height: 0; }
    #rts-viewport-wrap { max-width: calc(48vh / var(--ui-zoom) * 1200 / 580); }
    .rts-hud { padding: 3px 10px; gap: 3px; }
    .rts-hud-top { gap: 4px; }
    /* Flow the resource readouts in a row instead of stacking them —
       landscape has width to spare, not height. */
    .rts-hud-left, .rts-hud-right { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
    .rts-hud-right { justify-content: flex-end; }
    /* Plenty of width in landscape — keep the bottom bar on one row instead
       of the narrow-viewport stack, so it doesn't double its height. */
    .rts-hud-bottom { gap: 6px; flex-wrap: nowrap; }
    .rts-action-panel { flex-basis: 260px; order: 0; }
    .rts-faction-badge { font-size: 8px; padding: 1px 6px; }
    .rts-resource { font-size: 9px; }
    .rts-log-bar { padding: 2px 10px; font-size: 9px; min-height: 14px; }
    #rts-minimap { width: 90px; height: 37px; }
    .rts-action-panel { padding: 3px 8px 4px; }
    .rbp-header { margin-bottom: 3px; padding-bottom: 3px; }
    .rbp-title { font-size: 9px; letter-spacing: 2px; }
    .rbp-idle-hint { font-size: 9px; padding: 2px; }
    .rbp-options { max-height: 40px; gap: 3px; }
    .rbp-option { padding: 3px 6px; }
    .rts-build-btn { padding: 3px 8px; font-size: 7px; }
    .rts-build-icon { font-size: 12px; }
    .rts-hud-army { min-width: 0; gap: 3px; }
  }