:root{
    color-scheme:dark;
    --bg:#070912;
    --panel:rgba(12,16,30,.72);
    --border:rgba(255,255,255,.12);
    --text:#eef3ff;
    --muted:#91a0bf;
  }
  *{box-sizing:border-box}
  html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);touch-action:none}
  canvas{
    display:block;position:fixed;top:0;left:268px;
    width:calc(100% - 268px);height:100%;
    cursor:crosshair;transition:left .18s ease,width .18s ease
  }
  body.panel-collapsed canvas{left:0;width:100%}
  #hud{
    position:fixed;left:312px;top:14px;z-index:5;
    display:flex;gap:8px;align-items:center;flex-wrap:wrap;
    padding:9px 10px;border:1px solid var(--border);border-radius:14px;
    background:var(--panel);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.25);
    user-select:none
  }
  .brand{font-weight:800;letter-spacing:.04em;margin-right:5px}
  button{
    appearance:none;border:1px solid var(--border);background:rgba(255,255,255,.06);
    color:var(--text);border-radius:10px;padding:7px 10px;font:inherit;font-size:13px;cursor:pointer
  }
  button:hover{background:rgba(255,255,255,.11)}
  button.active{background:#2563eb;border-color:#4f83ff}
  #sendControl{
    display:flex;align-items:center;gap:8px;padding:4px 8px 4px 9px;
    border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.045)
  }
  .send-label{font-size:12px;color:var(--muted)}
  #sendValue{
    min-width:38px;text-align:right;font-size:12px;font-weight:800;color:var(--text)
  }
  #sendRange{
    appearance:none;-webkit-appearance:none;width:120px;height:7px;border-radius:999px;
    outline:none;cursor:pointer;
    background:linear-gradient(to right,#57a6ff 0%,#57a6ff var(--send-pct,50%),rgba(255,255,255,.12) var(--send-pct,50%),rgba(255,255,255,.12) 100%)
  }
  #sendRange::-webkit-slider-thumb{
    appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
    background:#fff;border:3px solid #57a6ff;box-shadow:0 0 0 3px rgba(87,166,255,.16)
  }
  #sendRange::-moz-range-thumb{
    width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #57a6ff;
    box-shadow:0 0 0 3px rgba(87,166,255,.16)
  }

  #help{
    position:fixed;left:282px;bottom:14px;z-index:5;max-width:min(620px,calc(100vw - 296px));
    padding:10px 42px 10px 12px;border:1px solid var(--border);border-radius:14px;
    background:var(--panel);backdrop-filter:blur(10px);color:var(--muted);font-size:12px;line-height:1.45;
    user-select:none;transition:all .18s ease
  }
  #helpToggle{
    position:absolute;right:8px;top:8px;width:26px;height:26px;padding:0;
    border-radius:8px;font-size:15px;line-height:1
  }
  #help.collapsed{
    width:auto;max-width:none;padding:6px;border-radius:12px
  }
  #help.collapsed #helpContent{display:none}
  #help.collapsed #helpToggle{
    position:static;width:auto;height:auto;padding:6px 10px;
    border-radius:8px;font-size:12px
  }

  #stats{
    position:fixed;right:14px;top:14px;z-index:5;padding:9px 11px;
    border:1px solid var(--border);border-radius:14px;background:var(--panel);
    backdrop-filter:blur(10px);font-size:12px;color:var(--muted);user-select:none
  }
  b{color:var(--text)}

  #researchPanel{
    position:fixed;left:0;top:0;bottom:0;width:268px;z-index:8;
    border-right:1px solid var(--border);background:rgba(10,14,26,.97);
    backdrop-filter:blur(12px);box-shadow:12px 0 28px rgba(0,0,0,.22);
    overflow:auto;padding:12px;user-select:none;transition:transform .18s ease;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin
  }

  #panelToggle{
    position:fixed;left:268px;top:14px;z-index:12;
    width:30px;height:42px;padding:0;border-radius:0 10px 10px 0;
    border-left:0;background:rgba(12,16,30,.94);
    transition:left .18s ease
  }
  body.panel-collapsed #researchPanel{transform:translateX(-268px)}
  body.panel-collapsed #panelToggle{left:0}
  body.panel-collapsed #hud{left:44px}
  body.panel-collapsed #help{left:14px;max-width:min(620px,calc(100vw - 28px))}
  body.panel-collapsed #help.collapsed{max-width:none}

  #researchPanel h2{font-size:14px;margin:0 0 8px;letter-spacing:.04em}
  .rpbox{
    padding:10px;border:1px solid rgba(120,170,255,.22);border-radius:12px;
    background:rgba(55,105,190,.10);margin-bottom:12px
  }
  .rpbig{font-size:21px;font-weight:850}
  .rpsmall{font-size:11px;color:var(--muted);margin-top:2px}
  .sectionTitle{
    margin:14px 0 7px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;
    color:#8492ad;font-weight:800
  }
  .tech{
    padding:9px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.035);
    margin-bottom:7px
  }
  .techHead{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
  .techName{font-size:12px;font-weight:800}
  .techDesc{font-size:10px;color:var(--muted);line-height:1.35;margin:4px 0 7px}

  .loreIntro{
    font-size:10px;line-height:1.45;color:#8290aa;font-style:italic;
    padding:0 2px 10px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:10px
  }
  .techCategory{
    margin:14px 0 7px;padding:6px 8px;border-left:2px solid rgba(105,195,255,.55);
    background:rgba(105,195,255,.045);font-size:9px;font-weight:900;
    letter-spacing:.12em;text-transform:uppercase;color:#a7b8d7
  }
  .techLore{
    font-size:10px;line-height:1.38;color:#7d8ca8;font-style:italic;margin:5px 0
  }
  .techEffect{
    font-size:10px;line-height:1.35;color:#b8c9e8;margin:5px 0 7px
  }
  .techTag{
    display:inline-block;font-size:8px;font-weight:900;letter-spacing:.08em;
    text-transform:uppercase;padding:3px 5px;border-radius:6px;margin-bottom:4px;
    color:#a9d7ff;background:rgba(87,166,255,.10);border:1px solid rgba(87,166,255,.16)
  }

  .tech button{width:100%;padding:6px 8px;font-size:11px}
  .tech button:disabled{opacity:.38;cursor:not-allowed}
  .tech.unlocked{
    border-color:rgba(54,145,93,.42);
    background:rgba(24,72,43,.38)
  }
  #selectedPlanetEmpty{font-size:11px;color:var(--muted);line-height:1.4;padding:6px 2px}
  #planetInfo{display:none}
  .planetLine{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin:4px 0}
  .planetLine span:first-child{color:var(--muted)}
  .trait{
    display:inline-flex;align-items:center;gap:5px;font-size:10px;padding:4px 6px;border-radius:8px;
    background:rgba(255,255,255,.055);border:1px solid var(--border);margin-top:4px
  }
  .researchHint{font-size:10px;color:#7886a0;line-height:1.35;margin-top:10px}
  .transferBox{
    margin-top:8px;padding:9px;border:1px solid rgba(112,180,255,.20);
    border-radius:11px;background:rgba(70,120,200,.07)
  }
  .transferBox label{display:block;font-size:10px;color:var(--muted);margin:7px 0 4px}
  .transferBox select,.transferBox input[type="range"]{width:100%}
  .transferBox select{
    background:#111827;color:var(--text);border:1px solid var(--border);border-radius:8px;
    padding:6px;font-size:11px
  }
  .transferRow{display:flex;justify-content:space-between;align-items:center;font-size:11px}
  .transferPct{font-weight:800;color:#a9d2ff}

  .selectionSummary{
    font-size:10px;color:#8fa2c3;margin:0 0 7px;line-height:1.35
  }
  .worldSummaryGrid{
    display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px
  }
  .worldSummaryGrid>div{
    padding:6px 7px;border:1px solid rgba(255,255,255,.07);
    border-radius:8px;background:rgba(255,255,255,.025);
    display:flex;flex-direction:column;gap:2px;min-width:0
  }
  .worldSummaryGrid .wide{grid-column:1/-1}
  .worldSummaryGrid span{font-size:9px;color:#71809b;text-transform:uppercase;letter-spacing:.07em}
  .worldSummaryGrid b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .horizonHome{display:grid;gap:7px;margin-top:8px}
  .horizonEntry{
    width:100%;text-align:left;padding:10px 10px;border-radius:11px;
    border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);
    color:var(--text);cursor:pointer;display:grid;grid-template-columns:34px 1fr auto;
    gap:8px;align-items:center
  }
  .horizonEntry:hover{background:rgba(255,255,255,.07);border-color:rgba(126,211,255,.25)}
  .horizonIcon{
    width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
    background:rgba(105,195,255,.08);border:1px solid rgba(105,195,255,.12);
    font-size:16px
  }
  .horizonEntryTitle{font-size:12px;font-weight:850}
  .horizonEntrySub{font-size:9px;color:#7f8ca5;line-height:1.3;margin-top:2px}
  .horizonEntryState{font-size:9px;color:#9eb4d5;text-align:right;max-width:70px}
  .horizonArrow{opacity:.55;font-size:16px}

  .sectionHeader{
    display:flex;align-items:center;gap:8px;margin:8px 0 10px;
    padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07)
  }
  .navBack{
    width:auto!important;padding:6px 8px!important;flex:0 0 auto;
    font-size:11px!important
  }
  .sectionHeaderText{min-width:0}
  .sectionHeaderTitle{font-size:13px;font-weight:900}
  .sectionHeaderSub{font-size:9px;color:#7f8ca5;margin-top:2px}

  .miniGroup{
    margin:10px 0 6px;font-size:9px;text-transform:uppercase;letter-spacing:.12em;
    color:#8191ad;font-weight:900
  }
  .compactTech{
    padding:9px;border:1px solid var(--border);border-radius:11px;
    background:rgba(255,255,255,.035);margin-bottom:7px
  }
  .compactTech .techLore{margin-bottom:5px}
  .compactTech .techEffect{margin-bottom:7px}
  .intelBadge{
    display:inline-block;padding:3px 6px;border-radius:7px;font-size:9px;font-weight:800;
    background:rgba(155,130,255,.10);border:1px solid rgba(155,130,255,.18);
    color:#c7bbff
  }


  @media (max-width:700px){
    #researchPanel{width:268px}
    #hud{left:44px;right:14px}
    .brand{width:100%}
    #sendRange{width:105px}
    #help{font-size:11px}
  }


  /* Clearly unavailable actions: deliberately muted and non-interactive. */
  .compactTech button:disabled,
  .tech button:disabled{
    opacity:.30;
    filter:grayscale(.75) saturate(.30);
    color:#727b8f;
    background:rgba(255,255,255,.025);
    border-color:rgba(255,255,255,.07);
    cursor:not-allowed;
    pointer-events:none;
  }

  .multiSelectionLock{
    margin-top:10px;
    padding:14px 12px;
    border:1px solid rgba(126,211,255,.14);
    border-radius:12px;
    background:rgba(126,211,255,.035);
  }
  .multiSelectionCount{
    font-size:13px;
    font-weight:900;
    color:#cfe7ff;
    margin-bottom:6px;
  }
  .multiSelectionText{
    font-size:10px;
    line-height:1.45;
    color:#8495b3;
  }
  .intelContactRule{
    padding-top:6px;
    border-top:1px solid rgba(255,255,255,.06);
    color:#9aa9c4;
  }

  .compactTech.unlocked{
    border-color:rgba(54,145,93,.42);
    background:rgba(24,72,43,.38)
  }

  .tech.unlocked .techName,
  .compactTech.unlocked .techName{
    color:#b8f3cd
  }

  .tech.unlocked button:disabled,
  .compactTech.unlocked button:disabled{
    opacity:1;
    color:#c7f7d7;
    background:rgba(35,104,61,.48);
    border-color:rgba(87,178,118,.38)
  }



  #languageSelect{
    appearance:none;
    border:1px solid var(--border);
    background:rgba(255,255,255,.06);
    color:var(--text);
    border-radius:10px;
    padding:7px 24px 7px 9px;
    font:inherit;
    font-size:12px;
    cursor:pointer;
  }
  #languageSelect option{
    background:#111827;
    color:#eef3ff;
  }


  .gameDialog{
    width:min(480px,calc(100% - 32px));
    border:1px solid rgba(140,175,225,.22);
    border-radius:18px;
    padding:22px;
    color:var(--text);
    background:rgba(10,17,31,.97);
    box-shadow:0 28px 80px rgba(0,0,0,.55);
  }
  .gameDialog::backdrop{
    background:rgba(3,7,15,.78);
    backdrop-filter:blur(5px);
  }
  .gameDialog h1{margin:4px 0 7px;font-size:25px;line-height:1.05}
  .gameDialog p{margin:0 0 18px;color:#94a4c1;font-size:12px;line-height:1.5}
  .dialogEyebrow{font-size:9px;letter-spacing:.18em;font-weight:900;color:#7ed3ff}
  .gameSetupGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:15px 0 12px
  }
  .gameSetupGrid label{display:flex;flex-direction:column;gap:6px;color:#97a8c6;font-size:10px;font-weight:800}
  .gameSetupGrid select{
    width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
    background:#121c2e;color:#eef4ff;font:inherit;font-size:13px
  }
  .dialogNote{
    margin:8px 0 16px;padding:9px 10px;border-radius:10px;
    border:1px solid rgba(126,211,255,.10);background:rgba(126,211,255,.035);
    color:#8294b2;font-size:10px;line-height:1.45
  }
  .dialogPrimary{
    width:100%;padding:11px 14px;border-radius:11px;border:1px solid rgba(91,174,255,.5);
    background:rgba(55,135,220,.34);color:#eaf5ff;font-weight:900;font-size:12px;cursor:pointer
  }
  .dialogPrimary:hover{background:rgba(55,135,220,.48)}
  .endGameDialog.victory{border-color:rgba(82,190,125,.38)}
  .endGameDialog.victory .dialogEyebrow,.endGameDialog.victory h1{color:#9aefb8}
  .endGameDialog.defeat{border-color:rgba(225,95,112,.38)}
  .endGameDialog.defeat .dialogEyebrow,.endGameDialog.defeat h1{color:#ff98a7}
  @media(max-width:520px){.gameSetupGrid{grid-template-columns:1fr}}

  @media (max-width:620px){
    .gameSetupGrid{grid-template-columns:1fr}
  }


  .gameSetupTop{
    display:grid;
    grid-template-columns:minmax(0,180px);
    gap:10px;
    margin:15px 0 16px
  }
  .gameSetupTop label{
    display:flex;
    flex-direction:column;
    gap:6px;
    color:#97a8c6;
    font-size:10px;
    font-weight:800
  }
  .gameSetupTop select,
  .aiSetupRow select{
    width:100%;
    padding:10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.1);
    background:#121c2e;
    color:#eef4ff;
    font:inherit;
    font-size:13px
  }
  .aiSetupHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:4px 0 8px
  }
  .aiSetupTitle{
    font-size:12px;
    font-weight:900;
    color:#dbeaff
  }
  .aiSetupSub{
    margin-top:2px;
    font-size:9px;
    color:#7f90ad
  }
  .aiSetupList{
    display:grid;
    gap:7px;
    margin-bottom:12px
  }
  .aiSetupRow{
    display:grid;
    grid-template-columns:minmax(95px,.8fr) minmax(150px,1.25fr) 34px;
    align-items:center;
    gap:8px;
    padding:8px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    background:rgba(255,255,255,.025)
  }
  .aiSetupIdentity{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0
  }
  .aiSetupSwatch{
    width:10px;
    height:10px;
    flex:0 0 auto;
    border-radius:50%;
    box-shadow:0 0 8px currentColor
  }
  .aiSetupName{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    font-weight:900;
    color:#d7e4f9
  }
  .aiRemoveBtn,
  .dialogSecondary{
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.045);
    color:#b7c5dc;
    cursor:pointer
  }
  .dialogSecondary{
    padding:7px 9px;
    border-radius:9px;
    font-size:10px;
    font-weight:850
  }
  .dialogSecondary:disabled{
    opacity:.3;
    cursor:not-allowed
  }
  .aiRemoveBtn{
    width:34px;
    height:34px;
    padding:0;
    border-radius:9px;
    font-size:17px;
    line-height:1
  }
  .aiRemoveBtn:hover,
  .dialogSecondary:hover:not(:disabled){
    background:rgba(255,255,255,.085)
  }
  @media(max-width:520px){
    .aiSetupHeader{align-items:flex-end}
    .aiSetupRow{grid-template-columns:1fr 1.15fr 34px}
  }


  .compactTech button.is-disabled,
  .tech button.is-disabled{
    opacity:.30;
    filter:grayscale(.75) saturate(.30);
    color:#727b8f;
    background:rgba(255,255,255,.025);
    border-color:rgba(255,255,255,.07);
    cursor:not-allowed;
    pointer-events:none;
  }


  .rangeOverlayControl{
    position:relative;
    flex:0 0 auto;
  }
  #rangeOverlayToggle{
    min-height:32px;
    padding:6px 10px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.045);
    color:#c7d4e9;
    font:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
  }
  #rangeOverlayToggle.active{
    border-color:rgba(126,211,255,.30);
    background:rgba(80,155,220,.13);
    color:#e5f5ff;
  }
  .rangeOverlayMenu{
    position:absolute;
    z-index:30;
    right:0;
    top:calc(100% + 7px);
    width:160px;
    padding:7px;
    border:1px solid rgba(150,180,225,.18);
    border-radius:11px;
    background:rgba(10,17,31,.97);
    box-shadow:0 12px 30px rgba(0,0,0,.38);
  }
  .rangeOverlayMenu[hidden]{display:none}
  .rangeOverlayMenu label{
    min-height:31px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 6px;
    border-radius:7px;
    color:#b9c7dc;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
  }
  .rangeOverlayMenu label:hover{
    background:rgba(255,255,255,.045);
  }
  .rangeOverlayMenu input{
    margin:0;
    accent-color:#7ed3ff;
  }
  .rangeOverlayAll{
    margin-bottom:3px;
    padding-bottom:7px !important;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .rangeDot{
    width:8px;
    height:8px;
    border-radius:50%;
    flex:0 0 auto;
  }
  .rangeDot.argus{background:#a48cff}
  .rangeDot.aegis{background:#57a6ff}
  .rangeDot.helios{background:#ffd37a}

  @media(max-width:620px){
    .rangeOverlayMenu{
      right:auto;
      left:0;
    }
  }

/* ===== V19 multiplayer shell ===== */
[hidden]{display:none!important}
body{overflow:hidden}
.connectionState{position:fixed;right:10px;bottom:8px;z-index:200;color:#73839f;font:700 9px system-ui;pointer-events:none}
.browserScreen{min-height:100vh;box-sizing:border-box;padding:clamp(20px,4vw,54px);background:radial-gradient(circle at 35% 20%,#111a30,#080c16 58%,#04050a);color:#eef4ff;overflow:auto}
.browserHeader{max-width:1100px;margin:0 auto 22px;display:flex;justify-content:space-between;gap:20px;align-items:flex-end}.browserHeader h1{margin:4px 0 5px;font:900 clamp(28px,4vw,48px)/1 system-ui}.browserHeader p{margin:0;color:#91a0bc}.eyebrow{font:900 9px/1 system-ui;letter-spacing:.19em;color:#7ed3ff}.browserActions{display:flex;gap:8px;align-items:center}.browserActions select,.browserActions button,.primary,.waitingActions button,.dialogActions button,.aiSetupHeader button{border:1px solid rgba(255,255,255,.11);background:#121c2e;color:#eef4ff;border-radius:10px;padding:9px 12px;font:800 11px system-ui;cursor:pointer}.primary{border-color:rgba(91,174,255,.5)!important;background:rgba(55,135,220,.34)!important}.identityBar{max-width:1100px;margin:0 auto 16px;color:#7f90ad;font:700 11px system-ui}.gamesList{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.gameCard{border:1px solid rgba(150,180,225,.14);background:rgba(16,24,42,.82);border-radius:15px;padding:15px}.gameCard h3{margin:0 0 8px;font:900 16px system-ui}.gameMeta{display:flex;gap:7px;flex-wrap:wrap;color:#91a0bc;font:700 10px system-ui}.pill{padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}.gameCardActions{margin-top:14px;display:flex;justify-content:flex-end}.gameCardActions button{border:1px solid rgba(126,211,255,.25);background:rgba(70,135,200,.14);color:#dff4ff;border-radius:9px;padding:8px 10px;font:800 10px system-ui;cursor:pointer}.emptyGames{grid-column:1/-1;padding:40px;text-align:center;color:#73839f;border:1px dashed rgba(255,255,255,.1);border-radius:15px}
.waitingScreen{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 30%,#111a30,#050812 68%);display:grid;place-items:center;padding:20px}.waitingCard{width:min(620px,100%);border:1px solid rgba(150,180,225,.18);border-radius:18px;padding:22px;background:rgba(10,17,31,.97);color:#eef4ff}.waitingCard h2{font:900 28px system-ui;margin:5px 0 5px}.waitingMeta{color:#8191ae;font:700 10px system-ui;margin-bottom:14px}.waitingPlayers{display:grid;gap:7px}.waitingPlayer{display:flex;justify-content:space-between;gap:12px;padding:10px;border-radius:10px;background:rgba(255,255,255,.035);font:800 11px system-ui}.waitingActions{margin-top:18px;display:flex;justify-content:flex-end;gap:8px}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.formGrid label{display:flex;flex-direction:column;gap:5px;color:#91a0bc;font:800 10px system-ui}.formGrid label:first-child{grid-column:1/-1}.formGrid input,.formGrid select,.gameDialog>input{width:100%;box-sizing:border-box;padding:10px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:#121c2e;color:#eef4ff;font:inherit}.aiSetupHeader{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:13px 0 7px}.aiSetupHeader small{display:block;color:#73839f;margin-top:3px}.aiSetupList{display:grid;gap:6px}.aiRow{display:grid;grid-template-columns:1fr 1.2fr 34px;gap:7px;align-items:center;padding:7px;border:1px solid rgba(255,255,255,.07);border-radius:10px}.aiRow select{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#121c2e;color:#eef4ff}.aiRemove{height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#aebbd1;cursor:pointer}.dialogActions{display:flex;justify-content:flex-end;gap:8px;margin-top:17px}
.gameScreen{position:fixed;inset:0}.gameScreen canvas{position:absolute;inset:0;width:100%;height:100%}
.panelHead h2{margin-bottom:9px}.selectionInfo{margin:8px 0 12px;padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:9px;color:#8da0be;font-size:10px}.techSection{display:grid;gap:7px}.techNav{display:grid;gap:6px}.techNav button,.techCard button,.backTech{width:100%;text-align:left;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.025);color:#d8e4f8;border-radius:9px;padding:9px;font:800 10px system-ui;cursor:pointer}.techNav button{display:flex;justify-content:space-between}.techCard{padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.018)}.techCardHead{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px}.techCardHead b{font-size:10px}.techCard p{margin:0 0 7px;color:#8192af;font-size:9px;line-height:1.35}.techCard button{text-align:center}.techCard button:disabled{opacity:.32;cursor:not-allowed}.techUnlocked{color:#89e2aa!important;border-color:rgba(80,180,115,.24)!important;background:rgba(35,104,61,.18)!important}
.toast{position:fixed;left:50%;bottom:42px;transform:translateX(-50%);z-index:150;background:rgba(10,16,28,.96);border:1px solid rgba(255,120,120,.25);color:#ffd7dc;padding:8px 12px;border-radius:9px;font:800 10px system-ui}.rangeOverlayControl{position:relative}.rangeOverlayMenu{position:absolute;right:0;top:calc(100% + 7px);width:150px;padding:6px;background:rgba(10,17,31,.98);border:1px solid rgba(255,255,255,.1);border-radius:10px}.rangeOverlayMenu label{display:flex;align-items:center;gap:7px;padding:6px;color:#b9c7dc;font:800 10px system-ui}.rangeOverlayMenu .dot{width:7px;height:7px;border-radius:50%}.dot.argus{background:#a48cff}.dot.aegis{background:#57a6ff}.dot.helios{background:#ffd37a}
body:not(.mode-playing) #researchPanel,body:not(.mode-playing) #hud,body:not(.mode-playing) #stats,body:not(.mode-playing) #panelToggle{display:none!important}
@media(max-width:620px){.browserHeader{align-items:flex-start;flex-direction:column}.formGrid{grid-template-columns:1fr}.formGrid label:first-child{grid-column:auto}.aiRow{grid-template-columns:.8fr 1fr 34px}}

.nickLanguage{display:flex;flex-direction:column;gap:5px;margin:10px 0;color:#91a0bc;font:800 10px system-ui}.nickLanguage select{padding:9px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:#121c2e;color:#eef4ff}


/* V19.1 — richer Horizon presentation */
.programLore{
  margin:-2px 0 11px;
  color:#7e8fab;
  font-size:9px;
  line-height:1.45;
  font-style:italic;
}
.techNav button{
  align-items:center;
  gap:8px;
}
.techNavMain{min-width:0;text-align:left}
.techNavTitle{font-size:10px;font-weight:900;color:#dbe8fb}
.techNavSub{margin-top:2px;font-size:8px;font-weight:650;color:#788ba8;line-height:1.3}
.techNavState{margin-left:auto;font-size:8px;color:#91a6c5;white-space:nowrap}
.sectionHeader{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:10px;
}
.sectionHeader .backTech{
  width:auto;
  min-width:58px;
  flex:0 0 auto;
}
.sectionHeaderText{min-width:0}
.sectionHeaderTitle{font-size:12px;font-weight:950;color:#e1edff}
.sectionHeaderSub{margin-top:2px;font-size:9px;color:#7f91ad;line-height:1.35}
.miniGroup{
  margin:8px 2px 2px;
  color:#7286a5;
  font-size:8px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.techLore{
  margin:5px 0 6px;
  color:#8192af;
  font-size:9px;
  line-height:1.42;
}
.techEffect{
  margin:0 0 7px;
  color:#a9bad3;
  font-size:9px;
  line-height:1.42;
}
.techStatus{
  margin:0 0 7px;
  padding:6px 7px;
  border-radius:7px;
  background:rgba(126,211,255,.035);
  color:#94aac9;
  font-size:8.5px;
  line-height:1.4;
}
.techCard.unlocked{
  border-color:rgba(79,178,113,.18);
}
.intelBadge{
  display:inline-block;
  padding:3px 6px;
  border-radius:999px;
  border:1px solid rgba(164,140,255,.25);
  color:#bcaeff;
  font-size:7.5px;
  font-weight:950;
  letter-spacing:.08em;
}
.routeInfo{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:4px 0;
  color:#8fa2bf;
  font-size:8.5px;
  border-bottom:1px solid rgba(255,255,255,.04);
}


/* V19.2 — creator stop action */
button.dangerGhost{
  border-color:rgba(255,105,122,.28);
  background:rgba(135,38,54,.12);
  color:#ff9cab;
}
button.dangerGhost:hover{
  border-color:rgba(255,105,122,.46);
  background:rgba(150,42,59,.22);
}
button.danger{
  border-color:rgba(255,96,116,.55);
  background:rgba(165,42,59,.36);
  color:#ffe8ec;
  font-weight:900;
}
button.danger:hover{
  background:rgba(185,48,67,.52);
}


/* V19.3 — visual parity with the pre-server battlefield */
body.mode-playing .gameScreen{
  position:fixed;inset:0;overflow:hidden;
}
body.mode-playing .gameScreen canvas{
  display:block;position:absolute;top:0;left:268px;
  width:calc(100% - 268px);height:100%;cursor:crosshair;
  transition:left .18s ease,width .18s ease;
}
body.mode-playing.panel-collapsed .gameScreen canvas{left:0;width:100%}
body.mode-playing #researchPanel{
  background:rgba(10,14,26,.965);
  box-shadow:12px 0 28px rgba(0,0,0,.28);
}
body.mode-playing #hud,
body.mode-playing #stats,
body.mode-playing #help{
  background:rgba(12,16,30,.74);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
body.mode-playing #hud{left:312px}
body.mode-playing.panel-collapsed #hud{left:44px}
body:not(.mode-playing) #help{display:none!important}
#help{
  position:fixed;left:282px;bottom:14px;z-index:5;
  max-width:min(660px,calc(100vw - 296px));
  padding:10px 42px 10px 12px;border:1px solid var(--border);
  border-radius:14px;color:var(--muted);font-size:11px;line-height:1.45;
  user-select:none;transition:all .18s ease;
}
body.panel-collapsed #help{left:14px;max-width:min(660px,calc(100vw - 28px))}
#helpToggle{
  position:absolute;right:8px;top:8px;width:26px;height:26px;padding:0;
  border-radius:8px;font-size:13px;line-height:1;
}
#helpContent{display:grid;gap:3px}
#helpContent b{margin-bottom:2px;font-size:9px;letter-spacing:.12em;color:#b9cae6}
#help.collapsed{width:auto;max-width:none;padding:6px}
#help.collapsed #helpContent{display:none}
#help.collapsed #helpToggle{position:static;width:30px;height:30px}
.techCard{
  padding:9px;border:1px solid var(--border);border-radius:11px;
  background:rgba(255,255,255,.035);margin-bottom:7px;
}
.techCard.unlocked{
  border-color:rgba(54,145,93,.42);background:rgba(24,72,43,.30);
}
.techCard.unlocked .techCardHead b{color:#b8f3cd}
.techCard button{width:100%;padding:6px 8px;border-radius:9px;font-size:11px}
.techCard button:disabled{
  opacity:.30;filter:grayscale(.75) saturate(.30);color:#727b8f;
  background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.07);
  cursor:not-allowed;pointer-events:none;
}
.techCard.unlocked button:disabled{
  opacity:1;color:#c7f7d7;background:rgba(35,104,61,.48);
  border-color:rgba(87,178,118,.38);
}
.techNav button{border-radius:11px;padding:10px;background:rgba(255,255,255,.035)}
.techNav button:hover{background:rgba(255,255,255,.07);border-color:rgba(126,211,255,.25)}
.techNavTitle{font-size:12px}
.techNavSub{font-size:9px}
.techNavState{font-size:9px;max-width:78px;text-align:right}
.selectionInfo{background:rgba(255,255,255,.025);border-radius:9px;line-height:1.45}
.rangeOverlayMenu{box-shadow:0 12px 30px rgba(0,0,0,.42)}
@media(max-width:700px){
  body.mode-playing .gameScreen canvas{left:0;width:100%}
  body.mode-playing #hud{left:44px;right:14px}
  #help{font-size:10px}
}


/* V19.4 — send slider: wheel/input progress always matches the real value */
#sendRange{
  --send-pct:50%;
  appearance:none;
  -webkit-appearance:none;
  width:120px;
  height:18px;
  padding:0;
  margin:0;
  border:0;
  border-radius:999px;
  outline:none;
  background:transparent;
  cursor:pointer;
  vertical-align:middle;
}
#sendRange::-webkit-slider-runnable-track{
  height:7px;
  border:0;
  border-radius:999px;
  background:linear-gradient(
    to right,
    #57a6ff 0%,
    #57a6ff var(--send-pct),
    rgba(255,255,255,.12) var(--send-pct),
    rgba(255,255,255,.12) 100%
  );
}
#sendRange::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  margin-top:-4.5px;
  border-radius:50%;
  border:3px solid #57a6ff;
  background:#fff;
  box-shadow:0 0 0 3px rgba(87,166,255,.16);
}
#sendRange::-moz-range-track{
  height:7px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}
#sendRange::-moz-range-progress{
  height:7px;
  border:0;
  border-radius:999px;
  background:#57a6ff;
}
#sendRange::-moz-range-thumb{
  width:10px;
  height:10px;
  border-radius:50%;
  border:3px solid #57a6ff;
  background:#fff;
  box-shadow:0 0 0 3px rgba(87,166,255,.16);
}
#sendRange:focus-visible{
  box-shadow:0 0 0 3px rgba(87,166,255,.18);
}


/* V19.4.3 — restore the pre-server HORIZON hierarchy */
#researchRoot{
  min-width:0;
}
.horizonHome{
  display:grid;
  gap:7px;
  margin-top:8px;
}
.horizonEntry{
  width:100%;
  min-width:0;
  text-align:left;
  padding:10px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  color:var(--text);
  cursor:pointer;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) minmax(62px,78px);
  gap:8px;
  align-items:center;
  overflow:hidden;
}
.horizonEntry:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(126,211,255,.25);
}
.horizonIcon{
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:rgba(105,195,255,.08);
  border:1px solid rgba(105,195,255,.12);
  font-size:16px;
  color:#e6f5ff;
}
.horizonEntryMain{
  display:block;
  min-width:0;
}
.horizonEntryTitle{
  display:block;
  min-width:0;
  font-size:12px;
  font-weight:850;
  line-height:1.2;
  color:#e7edf8;
  overflow-wrap:anywhere;
}
.horizonEntrySub{
  display:block;
  min-width:0;
  margin-top:2px;
  color:#7f8ca5;
  font-size:9px;
  font-weight:500;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.horizonEntryAside{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 12px;
  gap:4px;
  align-items:center;
}
.horizonEntryState{
  min-width:0;
  color:#9eb4d5;
  font-size:8px;
  font-weight:650;
  line-height:1.22;
  text-align:right;
  white-space:normal;
  overflow-wrap:anywhere;
}
.horizonArrow{
  opacity:.55;
  font-size:16px;
  line-height:1;
  text-align:right;
}
.horizonFoot{
  margin:10px 1px 0;
  color:#65748e;
  font-size:8px;
  line-height:1.45;
}
.sectionHeader{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.navBack{
  width:auto!important;
  min-width:0!important;
  flex:0 0 auto;
  padding:6px 8px!important;
  font-size:11px!important;
  text-align:center!important;
}
.sectionHeaderText{
  min-width:0;
}
.sectionHeaderTitle{
  font-size:13px;
  font-weight:900;
  line-height:1.2;
}
.sectionHeaderSub{
  margin-top:2px;
  color:#7f8ca5;
  font-size:9px;
  line-height:1.3;
}
.techSection{
  display:grid;
  gap:7px;
}
.compactTech{
  min-width:0;
  padding:9px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(255,255,255,.018);
}
.commandModeCard{
  margin-top:8px;
}
.intelRuleCard .techEffect{
  margin-top:7px;
}
.miniGroup{
  margin:8px 2px 0;
}
.techCard,
.compactTech{
  overflow:hidden;
}
.techCardHead,
.techHead{
  min-width:0;
}
.techCardHead > b,
.techHead .techName{
  min-width:0;
  overflow-wrap:anywhere;
}
.techCardHead > span,
.techHead > b{
  flex:0 0 auto;
}

/* The V19 techNav rules are obsolete after restoring horizonHome. */
.techNav{
  display:none!important;
}

@media(max-width:420px){
  .horizonEntry{
    grid-template-columns:32px minmax(0,1fr) minmax(54px,68px);
    gap:7px;
    padding:9px 8px;
  }
  .horizonIcon{
    width:32px;
    height:32px;
  }
  .horizonEntryState{
    font-size:7.5px;
  }
}


/* V19.4.4 — optional AI lobby */
.aiEmpty{
  padding:10px 12px;
  border:1px dashed rgba(255,255,255,.09);
  border-radius:9px;
  color:#7f8ca5;
  font-size:9px;
  line-height:1.4;
  text-align:center;
}


/* V19.4.6 — map camera interaction */
body.mode-playing .gameScreen canvas{
  touch-action:none;
}