/* ===================== Libertas City RP — Styles ===================== */
:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --line:#2a3340;
  --text:#e6edf3; --muted:#8b97a6; --accent:#4cc2ff; --accent2:#3fb950;
  --danger:#f85149; --warn:#e3b341; --money:#3fb950; --gold:#e3b341;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
.hidden{display:none !important}
canvas#game{position:fixed;inset:0;width:100vw;height:100vh;display:block;background:#11161d;image-rendering:pixelated}

/* ---------- Start screen ---------- */
.overlay-screen{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 800px at 50% -10%,#1b2740,#0d1117 60%);padding:20px}
.start-card{width:min(440px,94vw);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);text-align:center}
.start-card h1{margin:0;font-size:34px;letter-spacing:2px;font-weight:800}
.start-card h1 span{display:block;font-size:15px;letter-spacing:8px;color:var(--accent);margin-top:2px}
.tagline{color:var(--muted);margin:6px 0 22px;font-size:13px}
.field{display:block;text-align:left;margin-bottom:16px}
.field span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.field input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#0e131a;color:var(--text);font-size:16px}
.btn-primary{width:100%;padding:14px;border:0;border-radius:10px;background:linear-gradient(180deg,#58c4ff,#2f9fe0);
  color:#04121d;font-weight:800;font-size:16px;cursor:pointer;margin-bottom:10px}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--text);
  cursor:pointer;margin-bottom:8px;font-size:13px}
.btn-ghost.danger{color:var(--danger);border-color:#3a2326}
.start-hints{margin-top:14px;font-size:11px;line-height:1.7;color:var(--muted);text-align:left;
  background:#0e131a;border:1px solid var(--line);border-radius:10px;padding:10px 12px}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;font-size:13px}
#hud .muted{color:var(--muted)}
#hudTopLeft{position:absolute;top:10px;left:10px;background:rgba(13,17,23,.72);border:1px solid var(--line);
  border-radius:12px;padding:8px 12px;backdrop-filter:blur(6px);line-height:1.55}
.hud-name{font-weight:700;font-size:14px}
.hud-money{color:var(--money);font-weight:700;font-variant-numeric:tabular-nums}
#hudTopRight{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#hudClock{background:rgba(13,17,23,.72);border:1px solid var(--line);border-radius:10px;padding:4px 10px;font-variant-numeric:tabular-nums;font-weight:700}
#minimap{background:#0a0e13;border:1px solid var(--line);border-radius:12px}
#hudWanted{background:rgba(248,81,73,.18);border:1px solid var(--danger);color:#ffb3ae;border-radius:10px;padding:3px 9px;font-weight:800;letter-spacing:1px}
#hudWanted #wantedStars{color:var(--warn)}

#hudBars{position:absolute;left:10px;bottom:calc(12px + var(--safe-b));display:flex;flex-direction:column;gap:6px}
.bar{display:flex;align-items:center;gap:6px}
.bar-ico{width:18px;text-align:center}
.bar-bg{width:150px;height:12px;background:#0a0e13;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.bar-fill{height:100%;width:100%;transition:width .25s}
.bar-fill.hp{background:linear-gradient(90deg,#f85149,#ff8b85)}
.bar-fill.food{background:linear-gradient(90deg,#e3b341,#ffd873)}
.bar-fill.fuel{background:linear-gradient(90deg,#4cc2ff,#9bdcff)}

#interactPrompt{position:absolute;left:50%;top:62%;transform:translateX(-50%);background:rgba(13,17,23,.85);
  border:1px solid var(--accent);border-radius:10px;padding:8px 14px;font-weight:600;text-align:center;max-width:80vw}
#interactPrompt b{color:var(--accent)}

/* chat */
#chatLog{position:absolute;left:10px;bottom:calc(86px + var(--safe-b));width:min(46vw,520px);max-height:34vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;font-size:13px;line-height:1.4;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%)}
#chatLog .line{background:rgba(13,17,23,.55);padding:2px 8px;border-radius:6px;width:fit-content;max-width:100%;word-wrap:break-word}
#chatLog .me{color:#c8b6ff;font-style:italic}
#chatLog .do{color:#9ad1ff;font-style:italic}
#chatLog .ooc{color:#8b97a6}
#chatLog .sys{color:#7ee787}
#chatLog .warn{color:#ffd873}
#chatLog .err{color:#ff9d96}
#chatLog .radio{color:#7ee7d6}
#chatLog .shout{color:#fff;font-weight:700}
#chatLog .money{color:#7ee787}
#chatForm{position:absolute;left:10px;bottom:calc(48px + var(--safe-b));width:min(70vw,640px);pointer-events:auto}
#chatInput{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--accent);background:rgba(13,17,23,.92);color:var(--text);font-size:15px}

/* quick bar */
#quickBar{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto}
.qbtn{background:rgba(13,17,23,.72);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:7px 12px;font-size:13px;cursor:pointer}
.qbtn:active{transform:translateY(1px)}

/* ---------- touch ---------- */
#touchControls{position:absolute;inset:0;pointer-events:none}
#joystick{position:absolute;left:24px;bottom:calc(28px + var(--safe-b));width:130px;height:130px;border-radius:50%;
  background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.18);pointer-events:auto;touch-action:none}
#joyKnob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:rgba(76,194,255,.5);border:2px solid rgba(255,255,255,.5)}
#touchButtons{position:absolute;right:18px;bottom:calc(24px + var(--safe-b));display:grid;grid-template-columns:64px 64px;gap:12px;pointer-events:auto}
.tbtn{width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:rgba(13,17,23,.66);
  color:var(--text);font-size:20px;cursor:pointer}
.tbtn.big{width:74px;height:74px;font-size:26px}
.tbtn:active{background:rgba(76,194,255,.3)}

/* ---------- panels ---------- */
#panelBackdrop{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:auto}
#panel{width:min(560px,96vw);max-height:88vh;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
#panelHead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px}
#panelClose{background:transparent;border:0;color:var(--muted);font-size:20px;cursor:pointer}
#panelBody{padding:14px 16px;overflow:auto}
.p-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:8px;background:var(--panel2)}
.p-row .meta{font-size:12px;color:var(--muted)}
.p-row .title{font-weight:700}
.p-btn{background:linear-gradient(180deg,#58c4ff,#2f9fe0);color:#04121d;border:0;border-radius:9px;padding:8px 14px;font-weight:700;cursor:pointer;white-space:nowrap}
.p-btn.alt{background:var(--panel);color:var(--text);border:1px solid var(--line)}
.p-btn.danger{background:#3a2326;color:#ff9d96;border:1px solid #5a2d30}
.p-btn:disabled{opacity:.4;cursor:not-allowed}
.p-section{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:14px 0 8px}
.p-note{font-size:12px;color:var(--muted);line-height:1.6;margin:4px 0 12px}
.p-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px}
.kv:last-child{border:0}
.quiz-q{font-weight:600;margin:10px 0 6px}
.quiz-opt{display:block;width:100%;text-align:left;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);margin-bottom:6px;cursor:pointer}
.quiz-opt:active{border-color:var(--accent)}

/* toast */
#toastWrap{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(13,17,23,.94);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;
  padding:10px 16px;font-size:13px;box-shadow:var(--shadow);animation:toastIn .25s ease;max-width:90vw}
.toast.good{border-left-color:var(--accent2)}
.toast.bad{border-left-color:var(--danger)}
.toast.warn{border-left-color:var(--warn)}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* desktop hides touch; small screens hide some text */
@media (max-width:640px){
  #chatLog{width:64vw}
  #minimap{width:120px;height:120px}
  .hud-license{display:none}
}