:root {
  --glass: rgba(7, 11, 18, 0.68);
  --glass-soft: rgba(7, 11, 18, 0.45);
  --border: rgba(255,255,255,.13);
  --text: #eef4ff;
  --muted: #94a3b8;
  --accent: #79d7ff;
  --good: #80e6ae;
  --bad: #ff8c8c;
  --shadow: 0 16px 45px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#05080d; color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { color:var(--text); border:1px solid var(--border); background:rgba(255,255,255,.05); border-radius:12px; cursor:pointer; }
button:active { transform:translateY(1px); }
.hidden { display:none !important; }
.boot, .loading { position:fixed; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 50% 30%, rgba(79,147,180,.18), transparent 45%), #060a10; z-index:20; }
.boot-card, .loading-card, .pause-card { width:min(92vw, 620px); padding:34px; border:1px solid var(--border); border-radius:24px; background:var(--glass); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.eyebrow { font-size:11px; letter-spacing:.18em; color:var(--accent); font-weight:700; }
h1 { font-size:clamp(36px, 7vw, 72px); line-height:.94; margin:12px 0; letter-spacing:-.045em; }
h2 { font-size:32px; margin:8px 0 22px; }
.muted { color:var(--muted); }
.field-label { display:block; margin-top:22px; margin-bottom:8px; color:#c6d0df; font-size:13px; }
.text-input, #chat-input { width:100%; border:1px solid var(--border); border-radius:12px; padding:13px 14px; background:rgba(0,0,0,.2); color:var(--text); outline:none; }
.text-input:focus, #chat-input:focus { border-color:rgba(121,215,255,.55); }
.menu-row, .pause-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.primary-btn, .secondary-btn { padding:12px 18px; }
.primary-btn { background:rgba(121,215,255,.15); border-color:rgba(121,215,255,.35); }
.server-panel { display:grid; grid-template-columns:1fr 1fr 1fr; margin-top:24px; gap:10px; }
.server-panel > div, .chip { padding:10px 12px; border-radius:12px; background:var(--glass-soft); border:1px solid var(--border); }
.server-panel span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.server-panel b { display:block; margin-top:3px; font-size:12px; word-break:break-all; }
.error-text { margin-top:15px; color:var(--bad); font-size:13px; }
.game-shell { position:fixed; inset:0; }
#game-canvas { width:100%; height:100%; display:block; touch-action:none; }
.hud { position:fixed; inset:0; pointer-events:none; }
.hud > * { pointer-events:auto; }
.hud-top-left, .hud-top-right { position:absolute; top:14px; display:flex; gap:8px; align-items:center; }
.hud-top-left { left:14px; flex-direction:column; align-items:flex-start; }
.hud-top-right { right:14px; }
.stat { display:flex; align-items:center; gap:7px; font-size:10px; color:#d7e0ec; }
.stat > span { width:26px; }
.meter { width:118px; height:7px; overflow:hidden; border-radius:999px; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.08); }
.meter i { display:block; height:100%; width:100%; border-radius:inherit; background:linear-gradient(90deg,#70d6a4,#aeeef1); }
.chip { font-size:12px; backdrop-filter:blur(12px); }
.interaction { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:9px 12px; border-radius:10px; background:var(--glass); border:1px solid var(--border); font-size:12px; }
.vehicle-speed { position:absolute; right:20px; bottom:22px; font-size:38px; font-weight:700; letter-spacing:-.03em; text-shadow:0 4px 20px rgba(0,0,0,.6); }
.mouse-mode { position:absolute; right:14px; top:56px; font-size:10px; color:#c8d4e3; padding:6px 9px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); border-radius:9px; }
.debug-panel { position:absolute; top:86px; left:14px; width:260px; padding:10px; border-radius:10px; font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; background:rgba(0,0,0,.48); }
.connection-badge { position:absolute; left:14px; bottom:16px; padding:7px 10px; border-radius:10px; font-size:10px; background:rgba(0,0,0,.34); border:1px solid rgba(128,230,174,.22); color:var(--good); }
#minimap { position:absolute; right:14px; bottom:14px; width:180px; height:180px; border-radius:14px; border:1px solid var(--border); background:rgba(4,7,11,.62); box-shadow:var(--shadow); }
.chat-panel { position:absolute; left:14px; bottom:48px; width:min(360px, 46vw); padding:9px; border-radius:14px; background:var(--glass); border:1px solid var(--border); backdrop-filter:blur(12px); }
.chat-messages { height:150px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; font-size:12px; }
.chat-line { line-height:1.25; padding:2px 3px; overflow-wrap:anywhere; }
.chat-line .time { color:#718096; margin-right:4px; }
.chat-line .name { font-weight:700; }
.chat-line.global .channel { color:var(--accent); margin-right:4px; }
.chat-line.proximity .channel { color:#f3c27b; margin-right:4px; }
.chat-line.system { color:#b1c3d8; font-style:italic; }
.chat-input-row { display:grid; grid-template-columns:1fr auto; gap:7px; margin-top:8px; }
.chat-send { padding:9px 12px; }
.chat-footer { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:8px; font-size:10px; color:#b6c2d3; }
.chat-mini-btn { padding:6px 9px; }
.chat-toggle { display:flex; gap:4px; align-items:center; }
.opacity-wrap { display:flex; align-items:center; gap:4px; }
.opacity-wrap input { width:75px; }
.pause-menu { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.35); backdrop-filter:blur(4px); }
.progress-track { height:9px; border-radius:99px; background:rgba(0,0,0,.32); border:1px solid var(--border); overflow:hidden; margin-top:14px; }
.progress-fill { width:0; height:100%; background:linear-gradient(90deg,#79d7ff,#9ef0c6); transition:width .2s ease; }
.mobile-controls { position:absolute; inset:0; }
.stick { position:absolute; left:20px; bottom:74px; width:132px; height:132px; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); touch-action:none; }
.camera-stick { left:auto; right:20px; }
.stick-knob { position:absolute; width:54px; height:54px; left:39px; top:39px; border-radius:50%; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.2); }
.action-grid { position:absolute; right:18px; bottom:205px; width:175px; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.action-grid button, .mobile-toolbar button { padding:11px 9px; background:rgba(0,0,0,.28); backdrop-filter:blur(8px); }
.mobile-toolbar { position:absolute; right:18px; top:18px; display:flex; gap:7px; }
@media (max-width: 800px) {
  .boot-card { padding:22px; }
  .server-panel { grid-template-columns:1fr; }
  .chat-panel { width:min(92vw, 360px); left:10px; bottom:62px; }
  #minimap { width:145px; height:145px; }
  .hud-top-right { top:10px; right:10px; }
  .hud-top-left { top:70px; left:10px; }
  .mouse-mode { display:none; }
}

.shop-panel { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.28); }
.shop-card { width:min(92vw,520px); padding:24px; border-radius:20px; background:var(--glass); border:1px solid var(--border); backdrop-filter:blur(18px); box-shadow:var(--shadow); }
.shop-card h3 { margin:7px 0 16px; font-size:26px; }
.shop-items { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:15px; }
.shop-item { padding:14px; border-radius:13px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.shop-item h4 { margin:0 0 5px; }
.shop-item p { margin:0 0 10px; font-size:12px; color:var(--muted); min-height:30px; }
.shop-item button { padding:8px 10px; width:100%; }
@media (max-width:600px) { .shop-items { grid-template-columns:1fr; } .shop-card { padding:18px; } }