.game-wrap{position:fixed;inset:0;overflow:hidden}

#scene{position:absolute;inset:0;display:block;width:100%;height:100%}

/* faction select overlay */
.select{
  position:fixed;inset:0;z-index:200;background:rgba(8,8,9,.96);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;
}
.select h2{font-family:var(--display);font-size:clamp(28px,5vw,56px);margin-bottom:8px}
.select p{opacity:.75;margin-bottom:30px;max-width:480px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%;max-width:680px}
.choice{border:1px solid var(--line);border-radius:8px;padding:30px 22px;cursor:pointer;background:var(--ink);transition:transform .15s,box-shadow .2s;text-align:left}
.choice:hover{transform:translateY(-3px)}
.choice.green:hover{box-shadow:inset 0 0 80px rgba(47,174,94,.2),0 8px 30px rgba(0,0,0,.5)}
.choice.gold:hover{box-shadow:inset 0 0 80px rgba(232,169,42,.2),0 8px 30px rgba(0,0,0,.5)}
.choice h3{font-family:var(--display);font-size:28px;margin-bottom:6px}
.choice.green h3{color:var(--green)} .choice.gold h3{color:var(--gold)}
.choice .role{font-family:var(--mono);font-size:11px;letter-spacing:2px;opacity:.6;margin-bottom:14px}
.choice .perk{font-size:14px;opacity:.85}
@media(max-width:600px){.choices{grid-template-columns:1fr}}

.hud{
  position:fixed;top:92px;left:0;right:0;z-index:50;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:10px 4vw;pointer-events:none;
}
.hud .who{display:flex;align-items:center;gap:12px;background:rgba(12,12,12,.7);backdrop-filter:blur(8px);padding:8px 14px;border-radius:8px;border:1px solid var(--line)}
.hud .who img{width:40px;height:40px;border-radius:50%;background:#fff}
.hud .who .name{font-family:var(--display);font-size:17px;line-height:1}
.hud .who .name small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:2px;opacity:.6;margin-top:3px;font-weight:400}
.hud .who.green .name{color:var(--green)} .hud .who.gold .name{color:var(--gold)}
.stats{display:flex;gap:10px;font-family:var(--mono)}
.stat{background:rgba(12,12,12,.7);backdrop-filter:blur(8px);padding:8px 14px;border-radius:8px;border:1px solid var(--line)}
.stat .lbl{font-size:10px;letter-spacing:2px;opacity:.55;text-transform:uppercase}
.stat .val{font-size:18px;font-weight:700;margin-top:2px}
.stat .val.cash{color:var(--green)} .stat .val.val{color:var(--gold)}

.progress{position:fixed;top:152px;left:4vw;right:4vw;z-index:50;height:8px;background:rgba(28,27,33,.8);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .3s}

.buildbar{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;gap:8px;padding:10px;border-radius:12px;
  background:rgba(12,12,12,.8);backdrop-filter:blur(10px);border:1px solid var(--line);
  max-width:94vw;overflow-x:auto;
}
.tool{background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:78px;transition:.15s;font-family:var(--head)}
.tool:hover{border-color:var(--white)}
.tool.active{border-color:var(--gold);box-shadow:inset 0 0 26px rgba(232,169,42,.2)}
.tool .ico{font-size:20px}
.tool .nm{font-weight:700;font-size:12px}
.tool .ct{font-family:var(--mono);font-size:10px;opacity:.7}
.tool:disabled{opacity:.4;cursor:not-allowed}
.tool.bulldoze.active{border-color:#e2554a;box-shadow:inset 0 0 26px rgba(226,85,74,.22)}

.btn{background:rgba(12,12,12,.8);backdrop-filter:blur(8px);border:1px solid var(--line);color:var(--white);padding:9px 16px;border-radius:6px;font-family:var(--display);font-size:13px;letter-spacing:1px;cursor:pointer;transition:.15s;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--white)}
.btn.primary{background:var(--white);color:var(--black)}

.minictl{position:fixed;bottom:18px;right:18px;z-index:50;display:flex;flex-direction:column;gap:8px}
.topctl{position:fixed;top:92px;right:4vw;z-index:51;display:flex;flex-direction:column;gap:8px;align-items:flex-end}

.msg{position:fixed;bottom:104px;left:50%;transform:translateX(-50%);z-index:50;text-align:center;font-family:var(--mono);font-size:13px;background:rgba(12,12,12,.7);padding:6px 14px;border-radius:6px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.msg.show{opacity:.9}

.hint{position:fixed;top:172px;left:50%;transform:translateX(-50%);z-index:50;font-family:var(--mono);font-size:12px;opacity:.5;text-align:center;pointer-events:none;white-space:nowrap}

.win{position:fixed;inset:0;z-index:210;background:rgba(8,8,9,.97);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.win.show{display:flex}
.win .big{font-family:var(--display);font-size:clamp(34px,7vw,90px);line-height:.95;margin-bottom:14px}
.win p{opacity:.8;margin-bottom:26px;max-width:460px}

.loading{position:fixed;inset:0;z-index:190;background:var(--black);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px}
.loading.hide{display:none}
.loading .spin{width:46px;height:46px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin360 .9s linear infinite}
@keyframes spin360{to{transform:rotate(360deg)}}
.loading p{font-family:var(--mono);font-size:12px;letter-spacing:2px;opacity:.6}

/* ---------- in-game chat ---------- */
.chat{
  position:fixed;left:18px;bottom:64px;z-index:55;width:300px;max-width:80vw;
  background:rgba(12,12,12,.82);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;font-family:var(--head);
  box-shadow:0 10px 40px rgba(0,0,0,.5);transition:transform .2s;
}
.chat-head{
  display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  padding:9px 12px;font-family:var(--mono);font-size:11px;letter-spacing:2px;
  background:rgba(255,255,255,.04);border-bottom:1px solid var(--line);
}
.chat-head .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.chat-head .chev{margin-left:auto;opacity:.7;transition:transform .2s}
.chat.collapsed .chat-log,.chat.collapsed .chat-input{display:none}
.chat.collapsed .chat-head .chev{transform:rotate(180deg)}

.chat-log{
  height:200px;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;
  scrollbar-width:thin;scrollbar-color:rgba(244,241,234,.25) transparent;
}
.chat-log::-webkit-scrollbar{width:6px}
.chat-log::-webkit-scrollbar-thumb{background:rgba(244,241,234,.2);border-radius:3px}

.cmsg{font-size:13px;line-height:1.45;display:flex;flex-direction:column;gap:2px}
.cmsg .tag{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;opacity:.8}
.cmsg .body{opacity:.92}
.cmsg.me{align-items:flex-end;text-align:right}
.cmsg.me .tag{color:var(--white)}
.cmsg.me .body{background:rgba(244,241,234,.12);padding:6px 10px;border-radius:10px 10px 2px 10px;max-width:90%}
.cmsg.berni .tag{color:var(--green)}
.cmsg.berni .body{background:rgba(47,174,94,.14);padding:6px 10px;border-radius:10px 10px 10px 2px;max-width:90%}
.cmsg.elon .tag{color:var(--gold)}
.cmsg.elon .body{background:rgba(232,169,42,.14);padding:6px 10px;border-radius:10px 10px 10px 2px;max-width:90%}
.cmsg.city .tag{color:#9fb6d9}
.cmsg.city .body{opacity:.7;font-style:italic}

.chat-input{display:flex;gap:6px;padding:9px;border-top:1px solid var(--line)}
.chat-input input{
  flex:1;background:var(--ink);border:1px solid var(--line);color:var(--white);
  border-radius:6px;padding:8px 10px;font-family:var(--head);font-size:13px;outline:none;
}
.chat-input input:focus{border-color:var(--gold)}
.chat-input button{
  background:var(--white);color:var(--black);border:none;border-radius:6px;
  padding:0 14px;font-family:var(--display);font-size:12px;letter-spacing:1px;cursor:pointer;
}
.chat-input button:hover{background:var(--gold)}

@media(max-width:600px){
  .chat{left:10px;right:10px;width:auto;bottom:96px}
  .chat-log{height:150px}
  .minictl{display:none}
}

/* ---------- in-game social buttons ---------- */
.game-social{display:flex;gap:8px;justify-content:flex-end}
.game-social .gs{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(12,12,12,.8);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:6px;
  padding:8px 12px;text-decoration:none;color:var(--white);
  font-family:var(--display);font-size:12px;letter-spacing:.5px;transition:.18s;
}
.game-social .gs:hover{border-color:var(--white)}
.game-social .gs.coin{color:#5fe39a;border-color:rgba(95,227,154,.45)}
.game-social .gs.coin:hover{background:#5fe39a;color:var(--black)}
.game-social .gs.coin:hover rect{fill:var(--black)}
.game-social .gs.x{padding:8px 10px}