:root{
    --panel:#0b1020; --panel2:#111832; --border:#2a3663;
    --gold:#e8c165; --text:#dfe6ff; --dim:#8e9ac0; --good:#5fd18a; --bad:#e8617a; --fuel:#5be0c9;
  }
  *{box-sizing:border-box;}
  body{margin:0; font-family:'Segoe UI',Arial,sans-serif; background:radial-gradient(ellipse at 50% 0%,#0d1230,#020309 70%); color:var(--text); min-height:100vh;}
  #app{display:flex; gap:14px; padding:14px; max-width:1560px; margin:0 auto; align-items:flex-start; flex-wrap:wrap;}
  #boardOuter{width:660px; max-width:96vw; height:660px; overflow:hidden; position:relative; border:3px solid var(--border); border-radius:12px;
    background:#050813; box-shadow:0 0 60px rgba(80,110,255,0.12) inset; flex:0 0 auto; touch-action:none; cursor:grab;}
  #boardOuter.dragging{cursor:grabbing;}
  #zoomCtrls{position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:6px; z-index:10;}
  #zoomCtrls button{width:36px; height:36px; padding:0; font-size:17px; line-height:1;}
  #sidebar{flex:1 1 380px; min-width:340px; max-width:470px; display:flex; flex-direction:column; gap:10px;}
  .panel{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px;}
  .panel h2{margin:0 0 8px 0; font-size:13px; letter-spacing:1px; color:var(--gold); text-transform:uppercase;}
  .playerRow{display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:8px; margin-bottom:5px; background:var(--panel2); border:1px solid #202a52; flex-wrap:wrap;}
  .playerRow.active{border-color:var(--gold); box-shadow:0 0 8px rgba(232,193,101,0.35);}
  .playerRow .dot{width:12px; height:12px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 5px #000;}
  .playerRow .pname{font-weight:600; flex:1 1 auto; font-size:13px;}
  .playerRow .pcash{color:var(--good); font-variant-numeric:tabular-nums; font-size:12px;}
  .playerRow .pfuel{color:var(--fuel); font-size:11px;}
  .playerRow .pfuel.low{color:var(--bad); font-weight:700;}
  .playerRow .pstations{color:var(--dim); font-size:11px;}
  .playerRow.bankrupt{opacity:0.4; text-decoration:line-through;}
  #log{height:170px; overflow-y:auto; font-size:12px; line-height:1.5; color:var(--dim); background:#060914; border-radius:6px; padding:8px; border:1px solid #1a2040;}
  #log div.turn{color:var(--gold); font-weight:600; margin-top:4px;}
  #log div.buy{color:#8fd0ff;}
  #log div.rent{color:var(--bad);}
  #log div.event{color:#c9a9ff;}
  #log div.money{color:var(--good);}
  #log div.laser{color:#ff7a7a; font-weight:600;}
  #log div.fuel{color:var(--fuel);}
  button{background:linear-gradient(180deg,#2a3568,#1a2246); color:var(--text); border:1px solid #3a4890; border-radius:7px;
    padding:8px 12px; font-size:12.5px; cursor:pointer; font-weight:600;}
  button:hover:not(:disabled){filter:brightness(1.25);}
  button:disabled{opacity:0.35; cursor:not-allowed;}
  button.gold{background:linear-gradient(180deg,#e8c165,#b8912f); color:#1a1200; border-color:#8a6a1f;}
  button.danger{background:linear-gradient(180deg,#e8617a,#a83550); color:#fff; border-color:#7a2035;}
  #controls{display:flex; gap:6px; flex-wrap:wrap;}
  #actionList{display:flex; flex-direction:column; gap:5px; max-height:260px; overflow-y:auto;}
  .actionBtn{display:flex; align-items:center; gap:8px; text-align:left; width:100%; padding:9px 12px;}
  .actionBtn .aicon{font-size:15px; flex:0 0 auto;}
  .actionBtn .atext{flex:1;}
  .actionBtn .asub{display:block; font-size:10.5px; color:var(--dim); font-weight:400;}
  .actionBtn.primary{background:linear-gradient(180deg,#e8c165,#b8912f); color:#1a1200; border-color:#8a6a1f;}
  .actionBtn.primary .asub{color:#4a3a10;}
  .actionBtn.danger{background:linear-gradient(180deg,#e8617a,#a83550); color:#fff; border-color:#7a2035;}
  .actionBtn.danger .asub{color:#ffd4dd;}
  .actionHint{font-size:11px; color:var(--dim); padding:4px 2px;}
  #diceArea{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
  .die{width:36px; height:36px; background:#fff; color:#111; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px;}
  #ownedList{font-size:11.5px; color:var(--dim); max-height:130px; overflow-y:auto;}
  #modalBg{position:fixed; inset:0; background:rgba(0,0,0,0.65); display:none; align-items:center; justify-content:center; z-index:50; padding:14px;}
  #modal{background:#0d1230; border:1px solid var(--border); border-radius:12px; padding:20px; max-width:440px; max-height:82vh; overflow-y:auto; text-align:center;}
  #modal h3{margin-top:0; color:var(--gold);}
  #modal .mbtns{display:flex; gap:8px; justify-content:center; margin-top:14px; flex-wrap:wrap;}
  .badge{font-size:9px; padding:1px 6px; border-radius:10px; background:#1e2850; color:var(--dim); margin-left:4px;}
  #setupBg{position:fixed; inset:0; background:rgba(2,3,9,0.94); display:flex; align-items:center; justify-content:center; z-index:60;}
  #setupCard{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:26px; width:460px; max-width:92vw; max-height:92vh; overflow-y:auto;}
  #setupCard h1{color:var(--gold); text-align:center; letter-spacing:2px; margin-top:0;}
  .setupRow{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
  .setupRow input[type=text]{flex:1; background:#060914; border:1px solid #2a3663; color:var(--text); padding:7px; border-radius:6px; min-width:0;}
  .setupRow select{background:#060914; border:1px solid #2a3663; color:var(--text); padding:7px; border-radius:6px;}
  .swatch{width:18px; height:18px; border-radius:50%; border:2px solid #fff; flex:0 0 auto;}
  ::-webkit-scrollbar{width:7px; height:7px;} ::-webkit-scrollbar-thumb{background:#2a3663; border-radius:4px;}
  .legend{display:flex; flex-wrap:wrap; gap:3px 10px; font-size:10px; color:var(--dim); margin-top:6px;}
  .legend span{display:inline-flex; align-items:center; gap:3px;}
  .legend i{width:9px; height:9px; border-radius:50%; display:inline-block;}
  .rulesNote{font-size:11px; color:var(--dim); line-height:1.5; margin-top:8px;}