/* ========= Base ========= */
:root{
  --bg:#0d1b2a; --panel:#0b1320; --border:#18283f; --text:#e6f1ff;
  --muted:#9fb3c8; --accent:#8bd3ff; --btn:#1b263b; --btn-border:#415a77;
  --ok:#6eff6e; --bad:#ff7b7b;
}

*{box-sizing:border-box}
html,body{height:100%}

/* === Style commun === */
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); }
.wrap { max-width: 1100px; margin: 40px auto; padding: 0 16px; }
h1 { margin-top:0; }
.btn { background:var(--btn); color:var(--text); border:1px solid var(--btn-border); padding:10px 14px; border-radius:10px; cursor:pointer; margin:4px; }
.btn:hover { filter:brightness(1.1); }
.row { display:flex; align-items:center; gap:8px; margin:12px 0; flex-wrap:wrap; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px; min-height:60px; }
input { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px; }
.actions { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }

/* ========= Layout commun ========= */
header, footer{ background:var(--panel); border-bottom:1px solid var(--border); padding:10px 14px; }
footer{ border-top:1px solid var(--border); border-bottom:none; }

.container{ max-width:1200px; margin:0 auto; padding:0 16px; }
.col{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; }
.grow{ flex:1 1 auto }
.nowrap{ flex-wrap:nowrap }

/* ========= Typo ========= */
h2,h3{ margin:0 0 8px 0 }
.small{ font-size:12px; opacity:.85; color:var(--muted) }

/* ========= Boutons & Inputs ========= */
button{ font:inherit }
button[disabled]{ opacity:.55; cursor:not-allowed }
select, textarea{ background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px; font:inherit; }

/* Petites pilules/étiquettes */
.pill{ display:inline-block; border:1px solid var(--btn-border); border-radius:999px; padding:3px 8px; font-size:12px; opacity:.9 }
.badge{ background:#12213a; border:1px solid var(--border); border-radius:999px; padding:4px 8px; font-size:12px }
.success{ color:var(--ok) }
.error{ color:var(--bad) }

/* ========= Listes / Cartes ========= */
.list{ display:flex; flex-direction:column; gap:8px }
.card{ background:#0f1a2c; border:1px solid #1a2a45; border-radius:10px; padding:10px }

/* ========= Avatars & Drapeaux ========= */
.avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; background:#233 }
.avatar.sm{ width:24px; height:24px; border-radius:50%; object-fit:cover; }

/* ========= Canvas Jeu ========= */
html, body { height:100%; }
body.playing { overflow:hidden; }

#arena{
  width:100vw; height:100vh; display:block;
  background:#000; /* extérieur arène = noir */
}

/* ========= Countdown + Killfeed ========= */
#prestart {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  font-size: 14vw; font-weight: 900; color: var(--accent);
  text-shadow: 0 8px 40px rgba(0,0,0,.6);
  z-index: 30;
}
#feed {
  position: fixed; right: 14px; bottom: 74px; width: 320px; max-width: calc(100vw - 28px);
  display: flex; flex-direction: column; gap: 6px; z-index: 21;
}
.feedline {
  background: rgba(11,19,32,.85); border:1px solid var(--border); color:var(--text);
  border-radius: 8px; padding: 8px 10px; font-size:13px; line-height:1.2; transition: opacity .6s ease;
}
.feedline.hot { border-color:#ff7aa2; box-shadow: 0 0 20px rgba(255,122,162,.25) inset; }

/* ========= HUD bas ========= */
.hud {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 28px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(5,10,18,0) 0%, rgba(5,10,18,0.55) 30%, rgba(5,10,18,0.75) 100%);
  border-top: 1px solid var(--border);
  z-index: 20;
  user-select: none;
}
.hud .pill {
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  border-radius: 999px; padding: 6px 12px; font-weight:600; font-size:14px; min-width: 86px; text-align:center;
}

/* ========= HUD haut (scorebar) ========= */
.hud-top{
  top:0; bottom:auto;
  background: linear-gradient(0deg, rgba(5,10,18,0) 0%, rgba(5,10,18,0.55) 30%, rgba(5,10,18,0.75) 100%);
  border-bottom: 1px solid var(--border);
  padding-top: 12px; padding-bottom: 12px;
  justify-content: center;
  z-index: 19; /* sous le bouton quitter */
}
.scorebar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center;
  max-width: 96vw;
}
.score-pill{
  display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:999px; padding:6px 10px; font-size:13px; font-weight:600;
}
.score-pill .kills{
  background:#16243a; border:1px solid #223652; border-radius:999px; padding:2px 8px; font-size:12px;
}

/* Petites animations HUD */
@keyframes value-pop { 0%{ transform:scale(1.0)} 50%{ transform:scale(1.06)} 100%{ transform:scale(1.0)} }
.hud .changed { animation: value-pop .25s ease; }

/* ========= Bouton Quitter seul (flottant) ========= */
.quit-fab{
  position: fixed; top: 10px; left: 10px; z-index: 50;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(11,19,32,.92);
  border: 1px solid var(--border);
}

/* ========= Tables / utilitaires ========= */
.grid{ display:grid; gap:12px }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (max-width: 900px){ .grid.cols-2{ grid-template-columns: 1fr } }

.mt0{ margin-top:0 } .mb0{ margin-bottom:0 }
.mt8{ margin-top:8px } .mb8{ margin-bottom:8px }
.hide{ display:none !important }

a.btn-link{
  background:transparent; border:1px solid var(--btn-border);
  padding:8px 12px; border-radius:10px; color:var(--accent); text-decoration:none
}
a.btn-link:hover{ filter:brightness(1.15) }

.table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#0f1a2c; border:1px solid #1a2a45; border-radius:10px; overflow:hidden
}
.table th, .table td{ padding:10px 12px; text-align:left; border-bottom:1px solid #1a2a45 }
.table tr:last-child td{ border-bottom:none }
.table th{ color:var(--muted); font-weight:600; background:#0b1526 }

/* === AJOUTS ARCADE (sûrs, sans override agressif) === */

/* fond quadrillé doux */
body {
  background-image:
    radial-gradient(rgba(139,211,255,0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(6,12,22,0) 0%, rgba(6,12,22,0.6) 60%, rgba(6,12,22,0.85) 100%);
  background-size: 22px 22px, auto;
  background-position: 0 0, 0 0;
}

/* boutons arcade */
.btn-arcade{
  background: linear-gradient(180deg,#153055,#0f2542);
  border:1px solid #224468;
  color:#e6f1ff;
  padding:10px 16px;
  border-radius:12px;
  box-shadow: 0 6px 0 #091527;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.btn-arcade:hover{ filter:brightness(1.08) }
.btn-arcade:active{ transform: translateY(2px); box-shadow: 0 4px 0 #091527; }
.btn-arcade.alt{
  background: linear-gradient(180deg,#331a3d,#22122b);
  border-color:#55316a;
  box-shadow:0 6px 0 #140a1a;
}
.btn-arcade.slim{ padding:8px 12px; border-radius:10px; box-shadow:0 4px 0 rgba(0,0,0,.35) }

/* badge perles dans header/shop modal (réutilisé) */
.header-pearl{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--btn-border); border-radius:999px; background:#0b1320; }
.header-pearl .pearl-dot{ width:10px; height:10px; border-radius:50%; background:#c7a8ff; box-shadow: 0 0 12px rgba(199,168,255,.6) inset; }

/* neon logo-ish */
.neon{
  text-shadow: 0 0 16px rgba(139,211,255,.35), 0 0 32px rgba(139,211,255,.2);
  color:#8bd3ff;
}

/* room card pour aperçu */
.room-card{
  background:#0f1a2c; border:1px solid #1a2a45; border-radius:12px; padding:10px;
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0;
}
.room-head{ display:flex; gap:10px; align-items:center }
.room-title{ font-weight:800 }
.room-sub{ font-size:12px; color:var(--muted) }

/* MODALS ARCADE */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:1000; }
.modal-arcade{
  width:min(960px,96vw); max-height:90vh; overflow:auto;
  background: linear-gradient(180deg, rgba(15,26,44,0.92) 0%, rgba(11,19,32,0.97) 100%);
  border:1px solid #1a2a45; border-radius:14px; box-shadow: 0 12px 50px rgba(0,0,0,.5);
}
.modal-head{ position:sticky; top:0; display:flex; align-items:center; gap:10px; padding:12px; background:#0b1320; border-bottom:1px solid #18283f }
.modal-head h3{ margin:0 }
.modal-body{ padding:12px }

/* Shop grid (réutilise ton shop.js) */
.shop-grid{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width: 900px){ .shop-grid{ grid-template-columns: 1fr 1fr } }
@media (max-width: 560px){ .shop-grid{ grid-template-columns: 1fr } }
.shop-card{ background:#0f1a2c; border:1px solid #1a2a45; border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:10px; }
.shop-card img{ width:100%; height:180px; object-fit:cover; border-radius:8px; background:#12213a }
.shop-title{ font-weight:700; }
.shop-meta{ display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:13px }
.pill-pearl{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--btn-border); border-radius:999px; padding:4px 8px; font-size:12px; background:#0b1320 }
.pearl-dot{ width:12px; height:12px; border-radius:50%; background:#c7a8ff; box-shadow: 0 0 12px rgba(199,168,255,.6) inset; }
.shop-actions{ display:flex; gap:8px }

/* === ARCADE – compléments pour leaderboard vertical & profil === */

/* Leaderboard vertical */
.leader-list{ display:flex; flex-direction:column; gap:10px }
.leader-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#0f1a2c; border:1px solid #1a2a45; border-radius:12px; padding:10px 12px;
  box-shadow: 0 0 0 1px rgba(139,211,255,.06) inset;
}
.leader-item .rank{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background: linear-gradient(180deg,#153055,#0f2542);
  border:1px solid #224468; font-weight:900; color:#8bd3ff;
  box-shadow: 0 4px 0 #091527;
}
.leader-item .who{ flex:1 1 auto }
.leader-item .who .name{ font-weight:800 }
.leader-item .who .meta{ font-size:12px; color:var(--muted) }
.leader-item .kills{
  background:#16243a; border:1px solid #223652; border-radius:999px;
  padding:4px 10px; font-weight:800; display:inline-flex; align-items:center; gap:6px;
}
.leader-item .kills span{ opacity:.85 }

/* Inputs modaux profil */
#modalProfile input, #modalProfile select {
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:8px;
}

/* Petits utilitaires si absents */
.grow{ flex:1 1 auto }
.mb8{ margin-bottom:8px }