/* =====================================================================
   SCRAP ARENA — game-client stylesheet (werkt in browser én in de APK)
   ===================================================================== */
:root {
  --bg: #05070a; --panel: rgba(18,22,28,.92); --line: #2c323c;
  --text: #e8ecf1; --muted: #98a2b3; --accent: #ff6a1f; --accent2: #ffb300;
  --gold: #ffc63f; --gem: #7ee8fa; --green: #4ade80; --red: #f2545b;
}
* { 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: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; user-select: none; }
#app { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center;
  justify-content: center; gap: 14px; padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.65), transparent); }
.hud-score { font-size: 1.4rem; font-weight: 900; letter-spacing: .05em; text-shadow: 0 2px 6px #000; }
.hud-timer { font-size: 1.1rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.hud-btn { pointer-events: auto; position: absolute; right: 12px; top: max(8px, env(safe-area-inset-top));
  background: rgba(0,0,0,.5); border: 1px solid var(--line); color: #fff; border-radius: 8px;
  width: 34px; height: 34px; font-size: 1rem; }

#killfeed { position: absolute; top: 54px; right: 12px; width: 46vw; max-width: 320px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kf { background: rgba(0,0,0,.55); border-radius: 6px; padding: 3px 8px; font-size: .78rem;
  animation: fade 5s forwards; }
.kf b { color: #fff; } .kf .w { color: var(--accent2); }
@keyframes fade { 0%,80% { opacity: 1 } 100% { opacity: 0 } }

#centerMsg { position: absolute; top: 32%; left: 0; right: 0; text-align: center;
  font-size: 2rem; font-weight: 900; text-shadow: 0 3px 12px #000; pointer-events: none; }

#minimap { position: absolute; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  width: 120px; height: 120px; border-radius: 10px; background: rgba(0,0,0,.45);
  border: 1px solid var(--line); }

#bottomleft { position: absolute; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: 40vw; max-width: 260px; }
.statline { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .75rem; font-weight: 700; }
.statline .lbl { width: 38px; color: var(--muted); }
.bar { flex: 1; height: 8px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
.bar > span { display: block; height: 100%; width: 100%; transition: width .12s linear; }
.bar.hp > span { background: linear-gradient(90deg, #ff5a5a, #ffb300); }
.bar.ammo > span { background: linear-gradient(90deg, #7ee8fa, #4c8dff); }
#reloadMsg { color: var(--accent2); font-weight: 900; font-size: .8rem; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .35 } }

#boostRing { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  color: var(--gem); font-weight: 900; letter-spacing: .1em; text-shadow: 0 0 12px var(--gem); }

#respawnOverlay { position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  background: rgba(0,0,0,.45); }
#respawnOverlay .big { font-size: 5rem; font-weight: 900; color: var(--accent); }
#respawnOverlay .sub { color: var(--muted); }

/* ---------- Touch-besturing ---------- */
#touch { position: absolute; inset: 0; pointer-events: none; }
#stickZone { position: absolute; left: 0; bottom: 0; width: 45%; height: 60%; pointer-events: auto; }
#stickBase { position: absolute; left: 26px; bottom: 26px; width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.18); opacity: .55; }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: rgba(255,106,31,.75); border: 2px solid #fff; }
#aimZone { position: absolute; right: 0; bottom: 0; width: 55%; height: 60%; pointer-events: auto; }
.tbtn { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.35);
  color: #fff; font-size: 1.5rem; background: rgba(0,0,0,.4); }
.tbtn.fire { right: 24px; bottom: 96px; width: 96px; height: 96px; background: rgba(255,106,31,.35); }
.tbtn.ability { right: 132px; bottom: 40px; width: 68px; height: 68px; background: rgba(126,232,250,.28); }
.tbtn:active { filter: brightness(1.5); }

/* ---------- Schermen ---------- */
#screens { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.screen { min-height: 100%; padding: 20px 16px 40px; background: linear-gradient(180deg, #0b0e13, #05070a); }
.screen.center { display: grid; place-content: center; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  max-width: 420px; width: 100%; margin: 0 auto; }
.card h1 { margin: 0 0 6px; font-size: 1.6rem; }
.card h2 { margin: 0 0 10px; font-size: 1.15rem; }
.muted { color: var(--muted); } .small { font-size: .82rem; }
input, select { width: 100%; background: #0d1117; color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; font-size: 1rem; margin-bottom: 10px; font-family: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: #1b2029; color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 16px; font-size: 1rem; font-weight: 800; cursor: pointer; margin-bottom: 10px;
  font-family: inherit; }
.btn:active { filter: brightness(1.3); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #e14e00); border-color: #ff7a34; }
.btn.gold { background: linear-gradient(135deg, var(--gold), #d99a00); color: #2b1d00; }
.btn.gem { background: linear-gradient(135deg, var(--gem), #2f9fd0); color: #00222c; }
.btn.ghost { background: transparent; }
.btn.small { width: auto; padding: 8px 12px; font-size: .85rem; margin: 0; }
.row { display: flex; gap: 10px; align-items: center; }
.row.tight { gap: 6px; }
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: 1fr 1fr; }
.gauto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.chip { display: inline-flex; align-items: center; gap: 5px; background: #1b2029; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: .85rem; }
.chip.gold { color: var(--gold); } .chip.gem { color: var(--gem); }
.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.tabs button { flex: 0 0 auto; background: #1b2029; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: .85rem; font-family: inherit; }
.tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.item { background: #141920; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.item.owned { border-color: #2f6b45; } .item.equipped { border-color: var(--accent); }
.item .nm { font-weight: 800; } .item .st { font-size: .78rem; color: var(--muted); }
.bar2 { height: 6px; background: #23282f; border-radius: 3px; overflow: hidden; margin-top: 6px; }
.bar2 > span { display: block; height: 100%; background: var(--accent); }

/* Resultaten / standings */
.standings { width: 100%; font-size: .85rem; border-collapse: collapse; }
.standings td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.07); }
.standings tr.me { background: rgba(255,106,31,.15); font-weight: 800; }
.standings .r { color: var(--muted); width: 24px; }

/* Toasts */
#toasts { position: absolute; top: 12px; left: 0; right: 0; display: flex; flex-direction: column;
  align-items: center; gap: 6px; pointer-events: none; z-index: 99; }
.toast { background: rgba(0,0,0,.85); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 14px; font-size: .88rem; font-weight: 700; animation: fade 3.2s forwards; }
.toast.good { border-color: var(--green); color: #b6f7cd; }
.toast.bad { border-color: var(--red); color: #ffb0b4; }

/* Loader */
#loader { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: #05070a; z-index: 100; }
.spinner { width: 42px; height: 42px; border: 4px solid #22272f; border-top-color: var(--accent);
  border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

/* Banners in menu's */
.hero-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hero-mini .logo { font-weight: 900; font-size: 1.3rem; }
.kv { display: flex; justify-content: space-between; font-size: .85rem; padding: 3px 0; }
.kv b { color: #fff; }