/* ====== PVP ARENA - REDMATCH 2 THEME ====== */
:root {
  --bg: #0a0a0d;
  --bg2: #14151a;
  --card: #1a1c22;
  --card-border: #2a2d36;
  --red: #e6392f;
  --red-hover: #ff3b30;
  --red-glow: rgba(230,57,47,.4);
  --text: #f0f0f3;
  --muted: #8a8d96;
  --blue: #4f7cff;
  font-family: 'Rajdhani', system-ui, -apple-system, sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=JetBrains+Mono:wght@500&display=swap');

* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -10%, #1e1a1a 0%, var(--bg) 55%),
            linear-gradient(180deg, #0f0f12 0%, var(--bg) 100%);
  color: var(--text);
  min-height: 100vh;
}

/* Topbar */
#topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,13,.92);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(6px);
}
.topbar-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 24px;
}
.logo { font-weight: 800; letter-spacing: 2px; font-size: 18px; }
.logo span { color: var(--red); }
#server-status { display:flex; align-items:center; gap:8px; font-size:13px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; border: 1px solid #000; }
.dot.offline { background:#555; box-shadow: 0 0 6px #000; }
.dot.connecting { background:#ffbd3d; box-shadow: 0 0 8px #ffbd3d; animation: pulse 1s infinite; }
.dot.online { background:#43d17c; box-shadow: 0 0 8px #43d17c; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.hud-btn { background: transparent; border: 1px solid var(--card-border); color: var(--muted); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:2px; cursor:pointer; font-size:14px; }
.hud-btn:hover { color: var(--text); border-color: var(--text); }

.container { max-width: 960px; margin: 0 auto; padding: 18px 24px 40px; }

/* Status bar */
.status {
  background: #0e0e12; border: 1px solid var(--card-border);
  padding: 10px 14px; border-left: 3px solid var(--red);
  font-family: 'JetBrains Mono', monospace; font-size:13px; color: var(--muted);
  margin-bottom: 18px;
}

/* Screens */
.screen { animation: fadeIn .25s ease; }
@keyframes fadeIn { from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none} }
.hidden { display: none !important; }

/* Hero Main Menu */
.hero { text-align:center; padding: 28px 0 18px; }
.title { margin:0; font-size: 56px; letter-spacing: 6px; font-weight: 800; line-height:1; }
.title .accent { color: var(--red); text-shadow: 0 0 18px var(--red-glow); }
.subtitle { color: var(--muted); letter-spacing:1px; font-size:14px; margin: 8px 0 0; text-transform: uppercase; }
.title-underline { width: 120px; height:3px; background: var(--red); margin: 16px auto 0; box-shadow: 0 0 10px var(--red-glow); }

.main-nav { display:flex; flex-direction: column; gap:12px; max-width: 380px; margin: 28px auto; }
.btn-large { padding:16px 20px; font-size:16px; letter-spacing:1.5px; font-weight:700; text-transform: uppercase; }

/* Buttons */
button {
  padding: 10px 18px; border-radius: 2px; border: 1px solid transparent;
  cursor:pointer; font-weight:700; letter-spacing:.5px; font-family: inherit;
  transition: all .15s; text-transform: uppercase; font-size:13px;
}
.btn-primary { background: var(--red); color:#fff; border-color: var(--red); box-shadow: 0 0 12px var(--red-glow); }
.btn-primary:hover { background: var(--red-hover); transform: translateY(-1px); box-shadow: 0 4px 16px var(--red-glow); }
.btn-secondary { background: var(--card); color:var(--text); border-color: var(--card-border); }
.btn-secondary:hover { background:#23252e; border-color:#3a3d4a; }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--card-border); }
.btn-ghost:hover { color: var(--text); border-color: var(--text); }
button.small { padding: 4px 10px; font-size:11px; }
button:disabled { opacity:.45; cursor:not-allowed; transform:none !important; }
button:active { transform: translateY(1px); }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--card-border);
  padding: 16px; margin: 14px 0; position:relative;
}
.card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background: var(--red); opacity:.0;
}
.card:hover::before { opacity: .7; }
.card h2, .card h3 { margin:0 0 10px; letter-spacing:1px; text-transform: uppercase; font-size:14px; color: var(--muted); }
.card h2 { font-size:16px; color: var(--text); }

label { display:block; margin:10px 0; font-size:13px; color:var(--muted); text-transform: uppercase; letter-spacing:.5px; }
label .val { float:right; color: var(--red); font-family:'JetBrains Mono', monospace; }
input[type="text"] { width:100%; padding:11px 12px; background:#0e0e12; border:1px solid var(--card-border); color:#fff; margin-top:6px; font-family:'JetBrains Mono', monospace; }
input[type="text"]:focus { outline:none; border-color: var(--red); box-shadow: 0 0 0 2px var(--red-glow); }
input[type="range"], select { width:100%; accent-color: var(--red); margin-top:8px; }
select { background:#0e0e12; color:#fff; border:1px solid var(--card-border); padding:8px; font-family:'JetBrains Mono', monospace; }
.check { display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; }
.check input { width:16px; height:16px; accent-color: var(--red); }

.row { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.play-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width:680px){ .play-grid{grid-template-columns:1fr} .title{font-size:38px} }
.play-card { text-align:center; }
.play-card h3 { font-size:15px; color: var(--text); }

.code-box {
  font-family:'JetBrains Mono', monospace; font-size:26px; letter-spacing:6px;
  background:#0e0e12; padding:14px; text-align:center; border:1px solid var(--card-border);
}
#player-list { list-style:none; padding:0; }
#player-list li { padding:8px 12px; background:#0e0e12; border:1px solid var(--card-border); margin:6px 0; font-family:'JetBrains Mono', monospace; font-size:13px; border-left:2px solid var(--red); }
.chat #chat-log { height:130px; overflow-y:auto; background:#0e0e12; border:1px solid var(--card-border); padding:10px; margin-bottom:10px; font-size:13px; font-family:'JetBrains Mono', monospace; }

/* Game arena — normal + fullscreen systematic */
#stage { position:relative; border:1px solid var(--card-border); background:#000; }
#stage:fullscreen { background:#0b0f18; border:0; }
#stage:fullscreen #arena3d { width:100vw; height:100vh; border:0; border-radius:0; }
#arena3d { width:100%; height:480px; display:block; background:#0b0f18; cursor:crosshair; }
#crosshair { position:absolute !important; inset:0 !important; transform:none !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:inherit !important; color:inherit !important; text-shadow:none !important; }
#crouch-badge { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); background:var(--red); padding:5px 16px; font-size:12px; font-weight:800; letter-spacing:1px; pointer-events:none; box-shadow:0 0 10px var(--red-glow); }
#hud { position:absolute; top:10px; right:10px; background:rgba(10,10,13,.88); border:1px solid var(--card-border); padding:10px 12px; min-width:190px; border-left:2px solid var(--red); }
#hp-wrap { display:flex; align-items:center; gap:8px; }
#hp-heart { font-size:18px; color: var(--red); text-shadow:0 0 6px var(--red-glow); }
#hp-bar { flex:1; height:14px; background:linear-gradient(90deg, #1a0a0a, #2a0a0a); border-radius:4px; overflow:hidden; border:1px solid #3a1a1a; box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
#hp-fill { height:100%; width:100%; background:linear-gradient(90deg, #43d17c, #2ecc71); transition: width .25s, background .25s; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); border-radius:4px; }
#hp-num { font-weight:bold; min-width:30px; text-align:right; font-family:'JetBrains Mono', monospace; }
#armor-wrap { display:flex; align-items:center; gap:8px; margin-top:6px; }
#armor-icon { font-size:16px; color:#60a5fa; }
#armor-bar { flex:1; height:12px; background:linear-gradient(90deg, #0f1f3a, #1a2a4a); border-radius:4px; overflow:hidden; border:1px solid #1e3a5f; box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
#armor-fill { height:100%; width:100%; background:linear-gradient(90deg, #60a5fa, #3b82f6); transition: width .25s; box-shadow:inset 0 1px 0 rgba(255,255,255,.22); border-radius:4px; }
#armor-num { font-weight:bold; min-width:30px; text-align:right; font-family:'JetBrains Mono', monospace; color:#93c5fd; }
#ammo-wrap { display:flex; align-items:center; gap:8px; margin-top:8px; }
#ammo-num { font-weight:bold; font-size:16px; font-family:'JetBrains Mono', monospace; }
#score-wrap { margin-top:6px; color:var(--muted); font-size:12px; font-family:'JetBrains Mono', monospace; }
#killfeed { position:relative !important; top:auto !important; left:auto !important; transform:none !important; max-width:none !important; display:flex; flex-direction:column; gap:6px; }
#killfeed div, .kill-feed-entry { background:rgba(10,5,5,0.65) !important; border:1px solid rgba(255,255,255,0.08) !important; border-left:2px solid var(--red) !important; padding:6px 10px !important; font-size:11px !important; font-family:'Rajdhani',sans-serif !important; border-radius:6px !important; backdrop-filter:blur(10px); }
.hud-badge #fps-counter, .hud-badge #ping-hud { position:static !important; background:none !important; border:none !important; padding:0 !important; font:inherit !important; color:inherit !important; }
#respawn-msg { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); background:rgba(180,20,20,.92); padding:16px 26px; font-size:20px; font-weight:800; letter-spacing:1px; box-shadow:0 0 20px rgba(255,0,0,.5); }

/* FPS counter + Ping HUD - désormais gérés par .hud-badge, anciens pos désactivés */
#fps-counter, #ping-hud { position:static !important; background:none !important; border:none !important; padding:0 !important; font:inherit !important; color:inherit !important; }
.hud-badge { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px; background:rgba(5,10,8,0.75) !important; backdrop-filter:blur(10px); border:1px solid rgba(74,222,128,0.25) !important; box-shadow:0 0 12px rgba(74,222,128,0.15); }
.hud-label { font-family:'Rajdhani',sans-serif; font-size:0.65rem; font-weight:700; letter-spacing:0.14em; color:rgba(255,255,255,0.35) !important; text-transform:uppercase; }
.hud-value { font-family:'Orbitron',sans-serif; font-size:0.75rem; font-weight:700; color:#4ade80 !important; text-shadow:0 0 8px rgba(74,222,128,0.7), 0 0 16px rgba(74,222,128,0.4) !important; }
.key-capture { background:#0e0e12; border:1px solid var(--card-border); color:#fff; padding:6px 8px; font:12px 'JetBrains Mono', monospace; cursor:pointer; text-align:center; min-width:60px; }
.key-capture.capturing { border-color:var(--red); box-shadow:0 0 0 2px var(--red-glow); }

/* Event log désactivé (équipements) */
#event-log { display:none !important; }
/* Scoreboard TAB */
#scoreboard { position:absolute; inset:0; background:rgba(0,0,0,.78); display:flex; align-items:center; justify-content:center; z-index:20; backdrop-filter: blur(2px); }
/* Résultats fin de match solo : même overlay que le scoreboard, au-dessus */
#solo-results { position:absolute; inset:0; background:rgba(0,0,0,.82); display:flex; align-items:center; justify-content:center; z-index:30; backdrop-filter: blur(2px); }
/* Résultats fin de match multi : overlay plein écran (majorité de l'écran) */
#mp-results { position:absolute; inset:0; background:rgba(4,4,10,.88); display:flex; align-items:center; justify-content:center; z-index:40; backdrop-filter: blur(6px); }
.mp-results-inner { background:linear-gradient(180deg, rgba(22,14,16,.98), rgba(12,10,16,.98)); border:1px solid rgba(229,48,48,.35); border-radius:16px; padding:22px; width:min(780px,93%); max-height:90%; overflow-y:auto; box-shadow:0 24px 80px rgba(0,0,0,.7), 0 0 40px rgba(229,48,48,.15); }
.mp-results-inner h2 { text-align:center; color:#fff; margin:0; font-family:'Bungee',sans-serif; font-size:1.15rem; letter-spacing:.04em; }
.mp-sub { text-align:center; color:rgba(255,255,255,.6); font-family:'Rajdhani',sans-serif; font-size:.85rem; margin:6px 0 14px; }
.mp-podium { display:flex; align-items:flex-end; justify-content:center; gap:10px; margin:6px 0 14px; }
.mp-pode { flex:1; max-width:200px; border-radius:12px; padding:12px 10px 14px; text-align:center; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); }
.mp-pode .mp-medal { font-size:1.6rem; }
.mp-pode .mp-pseudo { font-family:'Rajdhani',sans-serif; font-weight:800; color:#fff; font-size:.95rem; margin-top:4px; word-break:break-word; }
.mp-pode .mp-kd { font-family:'Orbitron',sans-serif; font-size:.75rem; color:rgba(255,255,255,.75); margin-top:4px; }
.mp-pode.mp-1 { border-color:rgba(255,210,50,.7); background:linear-gradient(180deg, rgba(255,210,50,.18), rgba(255,210,50,.05)); box-shadow:0 0 24px rgba(255,210,50,.25); min-height:150px; order:2; }
.mp-pode.mp-2 { border-color:rgba(180,190,220,.5); background:linear-gradient(180deg, rgba(180,190,220,.14), rgba(180,190,220,.04)); min-height:126px; order:1; }
.mp-pode.mp-3 { border-color:rgba(205,127,50,.6); background:linear-gradient(180deg, rgba(205,127,50,.16), rgba(205,127,50,.05)); min-height:112px; order:3; }
.mp-pode.me { outline:2px solid #e53030; outline-offset:2px; }
.mp-table { width:100%; border-collapse:collapse; font-family:'JetBrains Mono',monospace; font-size:12px; }
.mp-table th { color:var(--muted); text-align:left; border-bottom:1px solid var(--card-border); padding:6px 8px; font-size:11px; text-transform:uppercase; }
.mp-table td { padding:7px 8px; border-bottom:1px solid #1f2330; color:#fff; }
.mp-table tr.me td { background:rgba(230,57,47,.12); font-weight:700; }
.mp-actions { display:flex; gap:12px; justify-content:center; margin-top:14px; }
@media (max-width:560px){ .mp-podium{ gap:6px; } .mp-pode{ padding:8px 6px 10px; } .mp-results-inner{ padding:14px; } }
.scoreboard-inner { background: var(--card); border: 1px solid var(--card-border); padding:18px; min-width: 520px; max-width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.scoreboard-inner h2 { text-align:center; color: var(--text); margin:0 0 12px; font-size:15px; letter-spacing:1px; }
.scoreboard-inner table { width:100%; border-collapse:collapse; font-family:'JetBrains Mono', monospace; font-size:13px; }
.scoreboard-inner th { color: var(--muted); text-align:left; border-bottom:1px solid var(--card-border); padding:6px 8px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.scoreboard-inner td { padding:7px 8px; border-bottom:1px solid #1f2330; }
.scoreboard-inner tr.me td { background: rgba(230,57,47,.08); color:#fff; font-weight:700; }
.scoreboard-footer { display:flex; justify-content:space-between; margin-top:10px; font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--muted); }
/* Loadout overlay */
#loadout { position:absolute; left:10px; bottom:10px; display:flex; flex-direction:column; gap:6px; z-index:6; }
#loadout .slot { background:rgba(10,10,13,.82); border:1px solid var(--card-border); padding:6px 10px; font:11px 'JetBrains Mono', monospace; display:flex; align-items:center; gap:8px; min-width:180px; }
#loadout .slot.active { border-color:var(--red); box-shadow:0 0 8px var(--red-glow); }
#loadout .slot .key { background:var(--red); color:#fff; padding:2px 6px; font-size:10px; min-width:18px; text-align:center; }
#loadout .slot .mode { background:#2a2d36; color:var(--red); padding:2px 6px; font-weight:800; }
/* Pause menu */
#pause-menu { position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:25; }
.pause-inner { background:var(--card); border:1px solid var(--card-border); padding:20px; min-width:340px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.6); }
.pause-inner h2 { margin:0 0 12px; color:var(--text); }
/* Stats */
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-family:'JetBrains Mono', monospace; font-size:13px; }
.card.danger { border-color: var(--red); background: #1a0e0e; }

/* Game active fullscreen systematic */
body.game-active { overflow:hidden; }
body.game-active #topbar, body.game-active .container { display:none !important; }
body.game-active #game { display:block !important; position:fixed; inset:0; z-index:100; margin:0; border:none; border-radius:0; background:#000; }
body.game-active #stage { height:100vh; height:100dvh; border:none; }
body.game-active #arena3d { height:100vh; height:100dvh; }
#game-pause-hint { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font:11px 'JetBrains Mono', monospace; color: rgba(255,255,255,.5); pointer-events:none; }

/* Mobile */
#stage { touch-action:none; }
#touch-ui { position:absolute; inset:0; pointer-events:none; z-index:30; }
#joystick { position:absolute; left:14px; bottom:14px; width:124px; height:124px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--card-border); pointer-events:auto; touch-action:none; }
#stick { position:absolute; left:37px; top:37px; width:50px; height:50px; border-radius:50%; background:rgba(230,57,47,.65); box-shadow:0 0 10px var(--red-glow); }
#touch-buttons { position:absolute; right:14px; bottom:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; pointer-events:auto; }
#touch-buttons button { width:62px; height:62px; border-radius:50%; font-size:22px; padding:0; background:rgba(26,28,34,.9); border:1px solid var(--card-border); }
#touch-buttons button:active { background: var(--red); }
#t-fire { background:rgba(180,30,30,.85) !important; border-color:var(--red) !important; }
/* Bouton plein écran (Paramètres) : cible tactile 44px mini */
#btn-fullscreen-settings { min-height:44px; touch-action:manipulation; }
#fullscreen-state { min-height:44px; display:flex; align-items:center; justify-content:center; }
/* ===== Responsive téléphone : le HUD ne doit jamais recouvrir les contrôles tactiles ===== */
/* Cockpit tactile : joystick bas-gauche + boutons bas-droite restent cliquables et visibles.
   Les panneaux HUD bas (armes / vie-armure-munitions) remontent au-dessus, compacts. */
@media (pointer: coarse), (max-width: 820px) {
  body.game-active #stage { height:100dvh; }
  body.game-active #arena3d { height:100dvh; }
  /* Les contrôles tactiles passent DEVANT tous les HUD */
  #touch-ui { z-index:40; }
  #joystick {
    left:calc(12px + env(safe-area-inset-left, 0px));
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    width:118px; height:118px;
  }
  #stick { left:34px; top:34px; }
  #touch-buttons {
    right:calc(12px + env(safe-area-inset-right, 0px));
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    gap:10px;
  }
  #touch-buttons button { width:64px; height:64px; font-size:22px; }
  /* HUD haut compact : safe-area + petites polices, killfeed limité */
  #hud-top-left { top:calc(8px + env(safe-area-inset-top, 0px)) !important; left:calc(8px + env(safe-area-inset-left, 0px)) !important; gap:4px !important; }
  #hud-top-left .hud-badge { padding:4px 8px !important; }
  #hud-top-left .hud-label { font-size:0.55rem !important; }
  #hud-top-left .hud-value { font-size:0.65rem !important; }
  #hud-timer { top:calc(8px + env(safe-area-inset-top, 0px)) !important; }
  #hud-timer .glass-dark { padding:6px 14px !important; min-width:92px !important; }
  #game-timer { font-size:1.25rem !important; }
  #hud-top-right { top:calc(8px + env(safe-area-inset-top, 0px)) !important; right:calc(8px + env(safe-area-inset-right, 0px)) !important; max-width:42vw !important; gap:6px !important; }
  #hud-top-right .glass-dark { padding:6px 10px !important; }
  #killfeed { max-height:22vh; overflow:hidden; }
  #killfeed div, .kill-feed-entry { font-size:10px !important; padding:4px 8px !important; }
  /* Panneau armes : remonte AU-DESSUS du joystick, compact, ne bloque plus le tactile */
  #loadout {
    left:calc(8px + env(safe-area-inset-left, 0px)) !important;
    bottom:calc(142px + env(safe-area-inset-bottom, 0px)) !important;
    min-width:0 !important; width:148px !important; gap:4px !important; z-index:20 !important;
  }
  #loadout .weapon-row { padding:5px 8px !important; gap:6px !important; }
  #loadout .weapon-key { width:16px !important; height:16px !important; font-size:0.5rem !important; }
  #loadout .weapon-name { font-size:0.68rem !important; }
  #loadout .weapon-ammo { font-size:0.65rem !important; }
  #loadout .mode { display:none !important; }
  /* Panneau vie/armure/munitions : remonte AU-DESSUS des boutons tactiles, compact */
  #hud-status {
    right:calc(8px + env(safe-area-inset-right, 0px)) !important;
    bottom:calc(158px + env(safe-area-inset-bottom, 0px)) !important;
    min-width:0 !important; width:168px !important; gap:6px !important; z-index:20 !important;
    pointer-events:none !important;
  }
  #hud-status .glass-dark { padding:8px 12px !important; width:100% !important; }
  #ammo-big { padding:8px 12px !important; }
  #ammo-num { font-size:1.4rem !important; }
  /* Badges centraux remontés pour ne pas être sous les pouces */
  #crouch-badge { bottom:44% !important; font-size:0.65rem !important; }
  #respawn-msg { font-size:1rem !important; padding:12px 18px !important; width:max-content; max-width:86vw; text-align:center; }
  #scoreboard { z-index:50 !important; }
  #solo-results { z-index:50 !important; padding:12px; }
  #mp-results { z-index:55 !important; padding:12px; }
  .scoreboard-inner { min-width:auto !important; width:94vw !important; max-height:86dvh; overflow-y:auto; padding:14px !important; }
  #pause-menu { z-index:50 !important; padding:12px; }
  .pause-inner { min-width:0 !important; width:min(92vw, 360px) !important; }
  .pause-inner .menu-btn { min-height:48px; }
}
/* Téléphone paysage (hauteur faible) : encore plus compact pour libérer la visée */
@media (max-height: 500px) and (pointer: coarse), (max-height: 500px) and (max-width: 900px) {
  #game-timer { font-size:1rem !important; }
  #hud-timer .glass-dark { padding:4px 10px !important; min-width:76px !important; }
  #loadout { width:132px !important; bottom:calc(132px + env(safe-area-inset-bottom, 0px)) !important; }
  #loadout .weapon-row:nth-child(n+3) { display:none !important; } /* AK + pistolet seulement en paysage */
  #loadout .weapon-row.active-force { display:flex !important; }
  #hud-status { width:150px !important; bottom:calc(132px + env(safe-area-inset-bottom, 0px)) !important; }
  #killfeed { display:none !important; } /* killfeed masqué en paysage : garde la visée dégagée */
  #joystick { width:104px; height:104px; }
  #stick { left:27px; top:27px; }
  #touch-buttons button { width:56px; height:56px; font-size:19px; }
}
@media (pointer: coarse) {
  .container{padding:12px}
  #arena3d{height:58vh}
  #hud{min-width:150px; padding:8px}
}

kbd { background:#1e1e24; padding:2px 6px; border:1px solid var(--card-border); border-bottom-width:2px; font-family:'JetBrains Mono', monospace; font-size:11px; }
.hint { color:var(--muted); font-size:12px; font-family:'JetBrains Mono', monospace; }
.hint.center { text-align:center; }
pre { background:#0e0e12; padding:10px; border:1px solid var(--card-border); max-height:200px; overflow:auto; font-size:11px; font-family:'JetBrains Mono', monospace; }
details { margin-top:18px; }
summary { cursor:pointer; color:var(--muted); font-size:13px; }

/* ===== Petit mobile (<=480px) : HUD ultra-compact, contrôles tactiles prioritaires =====
   Constat (screenshot) : panneaux 200-220px + 4 lignes d'armes + ammo/santé/armure
   recouvrent l'écran et les pouces. On réduit tout et on garantit que
   joystick + boutons restent cliquables (z-index + pointer-events). */
@media (max-width: 480px), (max-width: 640px) and (pointer: coarse) {
  /* Les conteneurs HUD ne captent plus les touchés -> visée canvas accessible.
     Seules les lignes d'armes restent cliquables. */
  #hud-top-left, #hud-timer, #hud-top-right, #hud-status { pointer-events: none !important; }
  #loadout { pointer-events: none !important; }
  #loadout .weapon-row { pointer-events: auto !important; }
  #touch-ui { z-index: 60 !important; }
  #joystick, #touch-buttons { pointer-events: auto !important; }

  /* Haut : badges mini */
  #hud-top-left .hud-badge { padding: 3px 6px !important; gap: 5px !important; }
  #hud-top-left .hud-label { font-size: 0.5rem !important; }
  #hud-top-left .hud-value { font-size: 0.6rem !important; }
  #hud-timer .glass-dark { padding: 4px 10px !important; min-width: 0 !important; border-radius: 8px !important; }
  #game-timer { font-size: 1rem !important; }
  #hud-top-right { max-width: 36vw !important; }
  #hud-top-right .glass-dark { padding: 4px 8px !important; gap: 6px !important; border-radius: 6px !important; }
  #score-num { font-size: 0.85rem !important; }
  #killfeed { max-height: 14vh !important; }
  #killfeed div, .kill-feed-entry { font-size: 9px !important; padding: 3px 6px !important; }

  /* Crosshair réduit */
  #crosshair > div { width: 20px !important; height: 20px !important; }

  /* Armes bas-gauche : mini, au-dessus du joystick, zone tactile 36px mini */
  #loadout {
    width: 124px !important;
    bottom: calc(138px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 3px !important;
  }
  #loadout .weapon-row {
    padding: 4px 6px !important; gap: 5px !important; border-radius: 6px !important;
    min-height: 36px !important;
  }
  #loadout .weapon-key { width: 14px !important; height: 14px !important; font-size: 0.45rem !important; }
  #loadout .weapon-name { font-size: 0.6rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #loadout .weapon-ammo { font-size: 0.6rem !important; }
  #loadout .mode { display: none !important; }

  /* Statut bas-droit : mini, au-dessus des boutons, doublon grenade masqué */
  #hud-status {
    width: 132px !important;
    bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 4px !important;
  }
  #ammo-big { padding: 6px 10px !important; border-radius: 8px !important; gap: 6px !important; }
  #ammo-num { font-size: 1.1rem !important; }
  #ammo-weapon-name { display: none !important; }
  #hud-status .glass-dark:nth-child(2) { display: none !important; }
  #hud-status .glass-dark { padding: 6px 10px !important; border-radius: 6px !important; }
  #hp-num, #armor-num { font-size: 0.7rem !important; }

  /* Contrôles tactiles : jamais sous le HUD */
  #touch-buttons { gap: 8px !important; }
  #touch-buttons button { width: 56px !important; height: 56px !important; font-size: 19px !important; }
  #joystick { width: 112px !important; height: 112px !important; }
  #stick { width: 46px !important; height: 46px !important; }

  #respawn-msg { font-size: 0.9rem !important; padding: 10px 14px !important; max-width: 88vw; }
  #crouch-badge { bottom: 46% !important; }
}
/* Fallback JS : game.js ajoute body.is-touch même sans pointer:coarse */
body.is-touch #hud-top-left, body.is-touch #hud-timer,
body.is-touch #hud-top-right, body.is-touch #hud-status { pointer-events: none !important; }
body.is-touch #loadout { pointer-events: none !important; }
body.is-touch #loadout .weapon-row { pointer-events: auto !important; }
body.is-touch #touch-ui { z-index: 60 !important; }

/* ============ VOIX (chat vocal) ============ */
#voice-hud { pointer-events: auto !important; }
#voice-mic-btn {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(74,222,128,0.35);
  background: rgba(10,25,15,0.8); color: #4ade80; font-size: 0.85rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
#voice-mic-btn:hover { background: rgba(20,45,28,0.9); }
#voice-mic-btn.muted { border-color: rgba(229,48,48,0.5); background: rgba(40,8,8,0.8); color: #ff7b7b; }
#voice-mic-btn.suspended { border-color: rgba(255,255,255,0.25); background: rgba(30,30,35,0.8); color: rgba(255,255,255,0.5); }
#voice-mic-btn.speaking { box-shadow: 0 0 10px rgba(74,222,128,0.8); border-color: #4ade80; }
#voice-state { font-family: 'Rajdhani', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); white-space: nowrap; }
.voice-speaker {
  font-family: 'Rajdhani', sans-serif; font-size: 0.72rem; font-weight: 600; color: #4ade80;
  background: rgba(10,30,18,0.8); border: 1px solid rgba(74,222,128,0.3); border-radius: 6px;
  padding: 2px 8px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
  animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
#voice-test-level { transition: width 0.09s linear; }
#t-ptt { border-color: rgba(74,222,128,0.4) !important; }
#t-ptt.active { background: rgba(20,80,40,0.85) !important; box-shadow: 0 0 12px rgba(74,222,128,0.6); }

/* ============================================================
   REWORK UI 2026 — Bungee (titres) + Nunito (textes)
   ============================================================ */
:root {
  --font-title: 'Bungee', 'Orbitron', sans-serif;
  --font-body: 'Nunito', 'Rajdhani', system-ui, sans-serif;
}
body { font-family: var(--font-body); }
h1, h2, .menu-tile-title, #game-timer, #ammo-num, .scoreboard-inner h2,
#screen-settings h2, #screen-stats h2, #screen-shop h2, #screen-lootbox h2, #screen-cosmetics h2 {
  font-family: var(--font-title) !important;
  letter-spacing: 0.04em !important;
}
button, input, select, .menu-btn, .ward-card, .hint, label, p, span, div {
  font-family: var(--font-body);
}
.hint { font-family: var(--font-body) !important; }
code, kbd, pre, .code-box, #chat-input { font-family: var(--font-body) !important; }

/* ---------- Custom checkbox → toggle switch ---------- */
label.check { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
label.check input[type="checkbox"] {
  appearance:none; -webkit-appearance:none; flex:none;
  width:46px; height:26px; border-radius:999px; margin:0;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.22);
  position:relative; cursor:pointer; transition:background .2s, border-color .2s, box-shadow .2s;
  outline:none;
}
label.check input[type="checkbox"]::after {
  content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.5); transition:transform .2s;
}
label.check input[type="checkbox"]:checked {
  background:linear-gradient(135deg,#e53030,#ff6b6b); border-color:rgba(229,48,48,0.8);
  box-shadow:0 0 12px rgba(229,48,48,0.45);
}
label.check input[type="checkbox"]:checked::after { transform:translateX(20px); }
label.check input[type="checkbox"]:focus-visible { box-shadow:0 0 0 3px rgba(229,48,48,0.4); }

/* ---------- Custom range sliders ---------- */
#screen-settings input[type="range"] {
  appearance:none; -webkit-appearance:none; width:100%; height:26px; background:transparent; cursor:pointer;
}
#screen-settings input[type="range"]::-webkit-slider-runnable-track {
  height:8px; border-radius:999px;
  background:linear-gradient(90deg, #e53030 var(--fill,50%), rgba(255,255,255,0.12) var(--fill,50%));
  border:1px solid rgba(255,255,255,0.12);
}
#screen-settings input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffb4b4, #e53030 65%);
  border:2px solid #fff; box-shadow:0 0 10px rgba(229,48,48,0.7);
}
#screen-settings input[type="range"]::-moz-range-track {
  height:8px; border-radius:999px; background:rgba(255,255,255,0.12);
}
#screen-settings input[type="range"]::-moz-range-progress { height:8px; border-radius:999px; background:#e53030; }
#screen-settings input[type="range"]::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%; background:#e53030; border:2px solid #fff;
  box-shadow:0 0 10px rgba(229,48,48,0.7);
}

/* ---------- Custom select ---------- */
#screen-settings select, #map-select {
  appearance:none; -webkit-appearance:none;
  background:rgba(0,0,0,0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e53030' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid rgba(255,255,255,0.16); border-radius:8px; padding:10px 34px 10px 12px;
  font-family:var(--font-body); font-weight:700; cursor:pointer;
}
#screen-settings select:hover, #map-select:hover { border-color:rgba(229,48,48,0.6); }
#screen-settings select:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(229,48,48,0.35); }

/* ============================================================
   SETTINGS — 4 onglets
   ============================================================ */
.settings-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.settings-tab {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 8px; border-radius:10px; border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.65);
  font-weight:800; font-size:0.8rem; letter-spacing:0.04em; cursor:pointer;
  transition:transform .15s, border-color .15s, background .15s;
}
.settings-tab i { font-size:1rem; }
.settings-tab:hover { transform:translateY(-2px); border-color:rgba(229,48,48,0.5); color:#fff; }
.settings-tab.active {
  background:linear-gradient(135deg, rgba(229,48,48,0.9), rgba(150,20,20,0.9));
  border-color:rgba(255,255,255,0.3); color:#fff; box-shadow:0 6px 20px rgba(229,48,48,0.35);
}
.settings-panel { display:none; flex-direction:column; gap:20px; }
.settings-panel.active { display:flex; animation:fadeIn .25s ease; }
@media (max-width:640px) { .settings-tabs { grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   SHOP — onglets + cards visuelles
   ============================================================ */
.shop-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.shop-tab {
  display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 6px;
  border-radius:10px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.65); font-weight:800; font-size:0.78rem; cursor:pointer; transition:all .15s;
}
.shop-tab i { font-size:1rem; }
.shop-tab:hover { transform:translateY(-2px); color:#fff; border-color:rgba(96,165,250,0.6); }
.shop-tab.active { background:linear-gradient(135deg, rgba(37,64,130,0.95), rgba(15,25,55,0.95)); border-color:rgba(147,197,253,0.6); color:#fff; box-shadow:0 6px 20px rgba(96,165,250,0.3); }
.shop-panel { display:none; flex-direction:column; gap:14px; }
.shop-panel.active { display:flex; animation:fadeIn .25s ease; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.shop-card {
  border-radius:12px; overflow:hidden; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1); transition:transform .18s, box-shadow .18s, border-color .18s;
}
.shop-card:hover { transform:translateY(-3px); border-color:rgba(147,197,253,0.6); box-shadow:0 12px 28px rgba(0,0,0,0.45); }
.shop-card .shop-visual { height:110px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 30%, rgba(255,255,255,0.1), transparent 65%), rgba(0,0,0,0.35); }
.shop-card .shop-visual img { height:84px; width:auto; filter:drop-shadow(0 8px 10px rgba(0,0,0,0.5)); }
.shop-card .shop-visual i { font-size:2.6rem; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
.shop-card .shop-body { padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.shop-card .shop-title { font-weight:800; color:#fff; font-size:0.9rem; }
.shop-card .shop-sub { font-size:0.75rem; color:rgba(255,255,255,0.55); }
.shop-tag { display:inline-block; padding:2px 8px; border-radius:999px; font-size:0.68rem; font-weight:800; background:rgba(74,222,128,0.15); border:1px solid rgba(74,222,128,0.4); color:#4ade80; }
.shop-price { font-weight:800; color:rgba(147,197,253,0.95); }
@media (max-width:640px) { .shop-tabs { grid-template-columns:repeat(2,1fr); } .shop-grid { grid-template-columns:repeat(2,1fr); } }

/* Cosmetique preview visuelle */
.ward-card .ward-visual { width:44px; height:44px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.12); }
.ward-card { transition:transform .15s, border-color .15s, box-shadow .15s; }
.ward-card:hover { transform:translateY(-2px); }

/* ============================================================
   LOOTBOX — roulette animée
   ============================================================ */
.loot-roulette-wrap { position:relative; overflow:hidden; border-radius:12px; border:1px solid rgba(233,160,255,0.35); background:rgba(0,0,0,0.5); padding:14px 0; }
.loot-roulette-wrap::before, .loot-roulette-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:56px; z-index:2; pointer-events:none;
}
.loot-roulette-wrap::before { left:0; background:linear-gradient(90deg, rgba(0,0,0,0.85), transparent); }
.loot-roulette-wrap::after { right:0; background:linear-gradient(-90deg, rgba(0,0,0,0.85), transparent); }
.loot-roulette-cursor { position:absolute; left:50%; top:6px; bottom:6px; width:3px; background:#ffd23d; box-shadow:0 0 12px rgba(255,210,50,0.9); z-index:3; transform:translateX(-50%); border-radius:2px; }
.loot-roulette { display:flex; gap:8px; will-change:transform; padding:0 50%; width:max-content; }
.loot-cell {
  width:110px; flex:none; border-radius:10px; padding:10px 6px; text-align:center;
  background:rgba(255,255,255,0.05); border:2px solid rgba(255,255,255,0.12);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.loot-cell i { font-size:1.6rem; }
.loot-cell b { font-size:0.68rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.loot-cell small { font-size:0.62rem; font-weight:800; }
.loot-cell.winner { animation:winnerPop .5s ease; }
@keyframes winnerPop { 0% { transform:scale(0.85); } 60% { transform:scale(1.08); } 100% { transform:scale(1); } }
@media (prefers-reduced-motion: reduce) { .loot-roulette { transition:none !important; } }

/* ============================================================
   COSPREVIEW — modal aperçu 3D des cosmétiques
   ============================================================ */
#cospreview-modal { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:18px; }
#cospreview-modal.hidden { display:none; }
#cospreview-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); }
#cospreview-card { position:relative; width:100%; max-width:420px; border-radius:14px; padding:18px;
  background:rgba(10,12,20,0.97); border:1px solid rgba(233,160,255,0.3);
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(233,160,255,0.08);
  display:flex; flex-direction:column; gap:10px; max-height:92dvh; overflow-y:auto; }
#cospreview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
#cospreview-head h3 { margin:0; font-size:1.05rem; color:#fff; }
#cospreview-sub { margin:2px 0 0; font-size:0.8rem; color:rgba(255,255,255,0.6); }
#cospreview-close { width:30px; height:30px; flex:none; border-radius:8px; border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06); color:#fff; cursor:pointer; font-size:0.9rem; }
#cospreview-close:hover { border-color:rgba(229,48,48,0.6); }
#cospreview-view { height:320px; border-radius:10px; background:radial-gradient(circle at 50% 30%, rgba(233,160,255,0.1), transparent 65%), rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.1); overflow:hidden; cursor:grab; }
#cospreview-view:active { cursor:grabbing; }
#cospreview-view canvas { width:100% !important; height:100% !important; display:block; }
#cospreview-hint { margin:0; font-size:0.75rem; color:rgba(255,255,255,0.5); text-align:center; }
/* Bouton 3D sur les cartes garde-robe */
.ward-item { position:relative; }
.ward-prev3d { position:absolute; top:5px; right:5px; z-index:2; width:28px; height:28px; border-radius:8px;
  border:1px solid rgba(147,197,253,0.45); background:rgba(10,20,40,0.85); color:#93c5fd;
  font-size:0.7rem; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ward-prev3d:hover { background:rgba(37,64,130,0.95); color:#fff; }

/* Bouton pause tactile : ouvre le menu pause (quitter) — zone libre sous les badges FPS/Ping.
   Visible uniquement avec #touch-ui (jeu tactile actif). */
#t-pause {
  position:absolute; left:calc(10px + env(safe-area-inset-left, 0px)); top:calc(118px + env(safe-area-inset-top, 0px));
  width:52px; height:52px; border-radius:50%; pointer-events:auto; z-index:61;
  background:rgba(10,10,15,0.85); border:1px solid rgba(255,255,255,0.25); color:#fff; font-size:18px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.5);
}
#t-pause:active { background:var(--red); border-color:var(--red); }
/* ---------- Promo & disponibilité limitée ---------- */
.shop-price-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:0.82rem; }
.promo-badge { display:inline-block; padding:2px 10px; border-radius:999px; font-weight:800; font-size:0.72rem; color:#fff;
  background:linear-gradient(135deg,#e53030,#ff7b54); box-shadow:0 0 12px rgba(229,48,48,0.7);
  animation:promoPulse 1.6s ease-in-out infinite; }
@keyframes promoPulse { 0%,100% { transform:scale(1); box-shadow:0 0 8px rgba(229,48,48,0.5); } 50% { transform:scale(1.07); box-shadow:0 0 18px rgba(229,48,48,0.9); } }
.old-price { color:rgba(255,255,255,0.4); font-weight:600; }
.promo-price { color:#ffd23d; font-weight:800; }
.promo-card { border-color:rgba(229,48,48,0.55) !important; box-shadow:0 0 18px rgba(229,48,48,0.25); }
.avail-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:0.7rem; font-weight:800;
  background:rgba(147,197,253,0.1); border:1px solid rgba(147,197,253,0.4); color:#bfdbfe; }
.avail-chip.avail-soon { background:rgba(255,140,40,0.12); border-color:rgba(255,140,40,0.5); color:#fdba74; }

/* ============================================================
   LOOTBOX — modal fonds insuffisants (centré, shake + glow rouge)
   ============================================================ */
#nocash-modal { position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; padding:18px; }
#nocash-modal.hidden { display:none; }
#nocash-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(4px); }
#nocash-card { position:relative; width:100%; max-width:360px; border-radius:14px; padding:22px 20px;
  background:rgba(12,8,10,0.97); border:1px solid rgba(229,48,48,0.55);
  box-shadow:0 20px 60px rgba(0,0,0,0.65), 0 0 28px rgba(229,48,48,0.35), inset 0 0 24px rgba(229,48,48,0.06);
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
#nocash-card.shake { animation:lootNocashShake 0.45s ease; }
@keyframes lootNocashShake {
  0%,100% { transform:translateX(0); }
  15% { transform:translateX(-12px); }
  30% { transform:translateX(10px); }
  45% { transform:translateX(-7px); }
  60% { transform:translateX(5px); }
  75% { transform:translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) { #nocash-card.shake { animation:none; } }
#nocash-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; color:#ff8080; background:rgba(229,48,48,0.12); border:1px solid rgba(229,48,48,0.6);
  box-shadow:0 0 22px rgba(229,48,48,0.55); }
#nocash-card h3 { margin:0; font-family:'Orbitron',sans-serif; font-size:0.85rem; letter-spacing:0.14em; color:#ffb4b4; }
#nocash-amounts { display:flex; flex-direction:column; gap:4px; font-family:'Rajdhani',sans-serif; font-size:0.95rem; color:rgba(255,255,255,0.85); }
#nocash-amounts b { color:#ffd23d; }
#nocash-amounts .missing { color:#ff8080; font-weight:700; }
#nocash-hint { margin:0; font-size:0.78rem; color:rgba(255,255,255,0.55); }
@media (prefers-reduced-motion: reduce) { .promo-badge { animation:none; } }

/* ============================================================
   MOBILE — contrôles tactiles agrandis (2026)
   ============================================================ */
@media (pointer: coarse), (max-width: 820px) {
  #touch-buttons button { width:78px !important; height:78px !important; font-size:26px !important; }
  #t-fire { width:88px !important; height:88px !important; font-size:30px !important; }
  #joystick { width:140px !important; height:140px !important; }
  #stick { width:58px !important; height:58px !important; left:41px !important; top:41px !important; }
  #touch-buttons { gap:12px !important; }
}
@media (max-width: 480px), (max-width: 640px) and (pointer: coarse) {
  #touch-buttons button { width:72px !important; height:72px !important; font-size:24px !important; }
  #t-fire { width:84px !important; height:84px !important; }
  #joystick { width:132px !important; height:132px !important; }
  #stick { width:54px !important; height:54px !important; }
}
@media (max-height: 500px) and (pointer: coarse), (max-height: 500px) and (max-width: 900px) {
  #touch-buttons button { width:68px !important; height:68px !important; }
  #joystick { width:120px !important; height:120px !important; }
  #stick { left:31px !important; top:31px !important; }
}

/* ============================================================
   WIDGET SUPPORT — bouton flottant + panneau latéral (menu principal)
   ============================================================ */
#feedback-fab {
  position:fixed; right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:60; display:inline-flex; align-items:center; gap:9px;
  padding:11px 16px; border-radius:999px; cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-size:.82rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:linear-gradient(135deg, rgba(229,48,48,.92), rgba(120,14,14,.95));
  border:1px solid rgba(255,120,120,.55);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 22px rgba(229,48,48,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#feedback-fab:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 30px rgba(229,48,48,.55); }
#feedback-fab:focus-visible { outline:2px solid #fff; outline-offset:3px; }
#feedback-fab i { font-size:1rem; }
#feedback-fab.hidden { display:none !important; }
body.game-active #feedback-fab { display:none !important; }
body.feedback-open { overflow:hidden !important; }

#feedback-overlay { position:fixed; inset:0; z-index:9600; }
#feedback-overlay.hidden { display:none !important; }
#feedback-backdrop {
  position:absolute; inset:0; background:rgba(0,0,0,.58);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .22s ease;
}
#feedback-panel {
  position:absolute; top:0; right:0; height:100%; height:100dvh;
  width:min(520px, 100vw);
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(165deg, rgba(20,10,11,.985), rgba(7,6,9,.995));
  border-left:1px solid rgba(229,48,48,.35);
  box-shadow:-24px 0 70px rgba(0,0,0,.6), inset 1px 0 0 rgba(255,255,255,.04);
  transform:translateX(102%);
  transition:transform .32s cubic-bezier(.22,.8,.24,1);
}
#feedback-overlay.open #feedback-backdrop { opacity:1; }
#feedback-overlay.open #feedback-panel { transform:translateX(0); }

.feedback-head {
  flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:20px 20px 14px; border-bottom:1px solid rgba(255,255,255,.08);
  background:radial-gradient(ellipse 80% 120% at 0% 0%, rgba(229,48,48,.16), transparent 70%);
}
.feedback-kicker {
  display:block; font-family:'Orbitron',sans-serif; font-size:.58rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(229,80,80,.9);
}
.feedback-head h2 { margin:4px 0 0; font-family:'Orbitron',sans-serif; font-size:1.15rem; letter-spacing:.06em; color:#fff; }
.feedback-head p { margin:6px 0 0; font-size:.82rem; color:rgba(255,255,255,.55); }
#feedback-close {
  /* button { padding:10px 18px } global écrasait la boîte 34x34 : l'icône
     débordait vers le bas-droite. On recentre explicitement. */
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:8px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  color:#fff; font-size:.95rem; line-height:1;
  transition:border-color .18s, background .18s;
}
#feedback-close i { display:block; line-height:1; margin:0; }
#feedback-close:hover { border-color:rgba(229,48,48,.7); background:rgba(229,48,48,.16); }

#feedback-form, #feedback-gate, #feedback-success {
  flex:1; min-height:0; overflow-y:auto; padding:20px;
}
#feedback-form.hidden, #feedback-gate.hidden, #feedback-success.hidden { display:none !important; }
.feedback-user {
  margin:0 0 14px; padding:8px 10px; border-radius:8px;
  border:1px solid rgba(74,222,128,.22); background:rgba(74,222,128,.06);
  font-size:.78rem; font-weight:600; color:rgba(255,255,255,.68);
}
.feedback-user:empty { display:none; }

.feedback-types { border:0; padding:0; margin:0 0 16px; min-width:0; }
.feedback-types legend, .feedback-label {
  padding:0; margin:0 0 6px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:'Rajdhani',sans-serif; font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.feedback-label span { font-size:.68rem; font-weight:600; letter-spacing:0; text-transform:none; color:rgba(255,255,255,.35); }
.feedback-type-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px; }
.feedback-type {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:74px; padding:10px 6px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.7); font-family:'Rajdhani',sans-serif;
  font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transition:border-color .18s, background .18s, color .18s, box-shadow .18s;
}
.feedback-type i { font-size:1.05rem; }
.feedback-type:hover { border-color:rgba(229,48,48,.5); color:#fff; background:rgba(229,48,48,.08); }
.feedback-type.active { border-color:rgba(255,90,90,.85); color:#fff; background:linear-gradient(145deg, rgba(229,48,48,.28), rgba(229,48,48,.08)); box-shadow:0 0 18px rgba(229,48,48,.25), inset 0 0 12px rgba(229,48,48,.08); }
.feedback-type[data-type="suggestion"].active { border-color:rgba(244,189,47,.85); background:linear-gradient(145deg, rgba(244,189,47,.24), rgba(244,189,47,.06)); box-shadow:0 0 18px rgba(244,189,47,.2); }
.feedback-type[data-type="contact"].active { border-color:rgba(96,165,250,.85); background:linear-gradient(145deg, rgba(96,165,250,.24), rgba(96,165,250,.06)); box-shadow:0 0 18px rgba(96,165,250,.2); }
.feedback-type:focus-visible { outline:2px solid #fff; outline-offset:2px; }

#feedback-message, #feedback-email {
  width:100%; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.38); color:#fff; padding:11px 13px;
  font-family:'Rajdhani',sans-serif; font-size:.95rem; font-weight:600; outline:none;
  transition:border-color .18s, box-shadow .18s;
}
#feedback-message { min-height:130px; max-height:300px; resize:vertical; line-height:1.45; }
#feedback-email { margin-bottom:14px; }
#feedback-message::placeholder, #feedback-email::placeholder { color:rgba(255,255,255,.3); }
#feedback-message:focus, #feedback-email:focus {
  border-color:rgba(229,48,48,.8);
  box-shadow:0 0 0 3px rgba(229,48,48,.18), 0 0 18px rgba(229,48,48,.15);
}
.feedback-meta {
  display:flex; justify-content:space-between; gap:10px; margin:6px 2px 14px;
  font-size:.68rem; font-weight:600; color:rgba(255,255,255,.35);
}
.feedback-meta .over { color:#ff8080; }
.feedback-hp {
  position:absolute !important; left:-9999px !important;
  width:1px !important; height:1px !important; opacity:0; pointer-events:none;
}
.feedback-error {
  margin:0 0 12px; padding:10px 12px; border-radius:8px;
  border:1px solid rgba(255,90,90,.5); background:rgba(229,48,48,.12);
  color:#ffb4b4; font-size:.82rem; font-weight:600;
}
.feedback-error.hidden { display:none !important; }
#feedback-submit { margin-top:2px; }
#feedback-submit:disabled { opacity:.62; cursor:wait; transform:none; }
.feedback-privacy {
  display:flex; gap:7px; align-items:flex-start; margin:10px 0 0;
  font-size:.68rem; line-height:1.4; color:rgba(255,255,255,.35);
}
.feedback-privacy i { margin-top:2px; color:rgba(147,197,253,.6); }

#feedback-gate, #feedback-success {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px;
}
.feedback-gate-icon, .feedback-success-icon {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
}
.feedback-gate-icon {
  color:#ffb4b4; background:rgba(229,48,48,.12);
  border:1px solid rgba(229,48,48,.55); box-shadow:0 0 24px rgba(229,48,48,.3);
}
.feedback-success-icon {
  color:#4ade80; background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.5); box-shadow:0 0 24px rgba(74,222,128,.25);
}
#feedback-gate h3, #feedback-success h3 {
  margin:4px 0 0; font-family:'Orbitron',sans-serif; font-size:.95rem;
  letter-spacing:.06em; color:#fff;
}
#feedback-gate p, #feedback-success p {
  margin:0; max-width:330px; font-size:.84rem; line-height:1.5; color:rgba(255,255,255,.6);
}
#feedback-gate .menu-btn, #feedback-success .menu-btn {
  width:auto; min-width:210px; margin-top:6px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
}
.feedback-note {
  padding:9px 11px; border-radius:8px; border:1px solid rgba(244,189,47,.35);
  background:rgba(244,189,47,.08); color:rgba(255,220,130,.9) !important; font-size:.75rem !important;
}
.feedback-note.hidden { display:none !important; }

@media (max-width:640px) {
  #feedback-fab {
    right:14px; bottom:max(14px, env(safe-area-inset-bottom));
    width:52px; height:52px; padding:0; justify-content:center;
  }
  .feedback-fab-label { display:none; }
  #feedback-panel { width:100%; border-left:0; }
  .feedback-head { padding:16px 16px 12px; padding-top:calc(16px + env(safe-area-inset-top, 0px)); }
  #feedback-form, #feedback-gate, #feedback-success {
    padding:16px; padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .feedback-type { min-height:68px; }
}
@media (prefers-reduced-motion: reduce) {
  #feedback-fab, #feedback-panel, #feedback-backdrop { transition:none !important; }
}

/* ============ Annonces & informations (menu principal) ============ */
#screen-main .home-layout {
  min-height:calc(100vh - 140px);
  /* Menu seul dans le flux, centré EXACTEMENT comme avant. */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px 0; width:100%;
}
#screen-main .home-news {
  width:min(720px, 100%);
  margin:18px auto 0;
  border-radius:16px; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  max-height:min(70vh, 640px);
}
/* Assez large : le panneau est ancré au bord droit, HORS flux (position fixe),
   donc il ne peut pas réduire la place du menu : le menu reste centré. */
@media (min-width:1400px) {
  #screen-main .home-news {
    position:fixed; right:16px; top:84px;
    width:clamp(320px, 30vw, 440px);
    max-width:calc(50vw - 392px);
    max-height:calc(100vh - 104px);
    margin:0; z-index:20;
  }
}
.home-news-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.home-news-head h2 {
  margin:0; font-family:'Orbitron',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85);
  display:flex; align-items:center; gap:8px;
}
.home-news-head h2 i { color:#ffd24d; }
#btn-news-manage { width:auto; padding:5px 10px; font-size:.68rem; }
.home-news-list {
  display:flex; flex-direction:column; gap:12px;
  overflow-y:auto; flex:1 1 auto; padding-right:4px; scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
}
.home-news-empty { margin:8px 2px; font-size:.8rem; color:rgba(255,255,255,.4); }
.news-card {
  position:relative; border-radius:10px; padding:12px 12px 10px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.news-card-pinned { border-color:rgba(255,210,77,.45); box-shadow:0 0 18px rgba(255,210,77,.12); }
.news-pin { position:absolute; top:10px; right:10px; color:#ffd24d; font-size:.7rem; transform:rotate(35deg); }
.news-card-title {
  margin:0 18px 4px 0; font-family:'Rajdhani',sans-serif; font-weight:800;
  font-size:.9rem; color:#fff; line-height:1.25;
}
.news-card-date {
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.38); margin-bottom:6px;
}
.news-card-body {
  font-size:.86rem; line-height:1.6; color:rgba(255,255,255,.82); word-break:break-word;
}
.news-card-body > :first-child { margin-top:0; }
.news-card-body > :last-child { margin-bottom:0; }
.news-card-body p { margin:.5em 0; }
.news-card-body a { color:#93c5fd; text-decoration:underline; }
.news-card-body img { max-width:100%; height:auto; border-radius:8px; margin:.3em 0; }
.news-card-body ul, .news-card-body ol { margin:.5em 0; padding-left:1.35em; }
.news-card-body li { margin:.2em 0; }
.news-card-body h1, .news-card-body h2, .news-card-body h3, .news-card-body h4 {
  margin:.6em 0 .3em; color:#fff; line-height:1.25;
}
.news-card-body h1 { font-size:1.4em; }
.news-card-body h2 { font-size:1.25em; }
.news-card-body h3 { font-size:1.1em; }
.news-card-body h4 { font-size:1em; }
.news-card-body blockquote {
  margin:.5em 0; padding:6px 0 6px 12px; border-left:3px solid rgba(229,48,48,.7);
  color:rgba(255,255,255,.7); background:rgba(229,48,48,.06); border-radius:0 6px 6px 0;
}
.news-card-body hr { border:0; border-top:1px solid rgba(255,255,255,.18); margin:.8em 0; }
.news-card-body code {
  font-family:'JetBrains Mono',monospace; font-size:.85em;
  background:rgba(255,255,255,.08); padding:1px 5px; border-radius:4px;
}
.news-card-body pre {
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:10px 12px; overflow:auto; font-size:.82em;
}
.news-card-body table { border-collapse:collapse; width:100%; margin:.5em 0; }
.news-card-body th, .news-card-body td { border:1px solid rgba(255,255,255,.18); padding:5px 8px; }
.news-card-body th { background:rgba(255,255,255,.06); }
.news-card-body mark { background:rgba(255,210,77,.35); color:#fff; border-radius:3px; padding:0 3px; }
.news-card-body small { color:rgba(255,255,255,.6); }

/* Overlay éditeur admin */
#news-overlay { position:fixed; inset:0; z-index:9700; display:flex; align-items:center; justify-content:center; padding:18px; }
#news-overlay.hidden { display:none !important; }
#news-backdrop { position:absolute; inset:0; background:rgba(3,4,10,.72); backdrop-filter:blur(3px); }
#news-panel {
  position:relative; z-index:1; width:min(980px,96vw); max-height:92vh;
  display:flex; flex-direction:column; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(18,18,26,.98), rgba(10,10,16,.98));
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.news-admin-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.1);
}
.news-admin-head h2 {
  margin:0; font-family:'Orbitron',sans-serif; font-size:.9rem; letter-spacing:.08em;
  color:#fff; display:flex; align-items:center; gap:8px;
}
#news-admin-close {
  /* button { padding:10px 18px } global écrasait la boîte 34x34 : l'icône
     débordait vers le bas-droite. On recentre explicitement. */
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:8px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  color:#fff; font-size:.95rem; line-height:1;
  transition:border-color .18s, background .18s;
}
#news-admin-close i { display:block; line-height:1; margin:0; }
#news-admin-close:hover { background:rgba(229,48,48,.2); border-color:rgba(229,48,48,.5); }
.news-admin-body { display:flex; min-height:0; flex:1 1 auto; }
.news-admin-side {
  width:250px; flex:0 0 250px; padding:14px; display:flex; flex-direction:column; gap:10px;
  border-right:1px solid rgba(255,255,255,.1); min-height:0;
}
#news-admin-list { display:flex; flex-direction:column; gap:6px; overflow-y:auto; min-height:0; }
.news-admin-item {
  display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left;
  padding:9px 10px; border-radius:8px; cursor:pointer; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font-family:'Rajdhani',sans-serif;
}
.news-admin-item:hover { border-color:rgba(255,255,255,.25); }
.news-admin-item.active { border-color:rgba(229,48,48,.6); background:rgba(229,48,48,.12); }
.news-admin-item-title { font-weight:700; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.news-admin-item-badges { display:flex; gap:6px; color:rgba(255,210,77,.85); font-size:.72rem; flex:0 0 auto; }
.news-admin-empty { margin:6px 2px; font-size:.78rem; color:rgba(255,255,255,.4); }
.news-admin-editor {
  flex:1 1 auto; padding:16px 18px; display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; min-height:0;
}
.news-admin-label {
  font-family:'Rajdhani',sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
#news-admin-title-input {
  width:100%; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.16);
  color:#fff; border-radius:8px; padding:9px 11px; font-family:'Rajdhani',sans-serif; font-size:.9rem;
}
.news-admin-flags { display:flex; gap:18px; margin-top:4px; font-size:.8rem; color:rgba(255,255,255,.8); }
.news-admin-flags label { display:flex; align-items:center; gap:7px; cursor:pointer; }
.news-admin-actions { display:flex; gap:10px; margin-top:2px; flex-wrap:wrap; }
.news-admin-actions .menu-btn { width:auto; }
.news-admin-msg { min-height:1.1em; margin:2px 0; font-size:.76rem; color:rgba(255,255,255,.5); }
.news-admin-msg.ok { color:#4ade80; }
.news-admin-msg.err { color:#ff8080; }
.news-admin-maint {
  margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; gap:8px;
}
.news-admin-maint-title {
  font-family:'Rajdhani',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:7px;
}
.news-admin-maint-title i { color:rgba(147,197,253,.8); }
.news-admin-maint-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:.8rem; color:rgba(255,255,255,.8);
}
/* Zone d'édition : textarea de repli si SunEditor n'est pas chargé. */
.news-editor-area {
  width:100%; min-height:220px; resize:vertical;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.16);
  color:#fff; border-radius:8px; padding:10px 12px;
  font-family:'Rajdhani',monospace; font-size:.85rem; line-height:1.5;
}
.news-editor-wrap { width:100%; }
.news-preview {
  border:1px dashed rgba(255,255,255,.22); border-radius:8px; padding:12px 14px;
  min-height:160px; background:rgba(0,0,0,.2);
}
.news-preview .news-card { border:1px solid rgba(255,255,255,.1); }
.news-preview-empty { margin:0; color:rgba(255,255,255,.4); font-size:.85rem; }
#news-editor-wrap .sun-editor { border-radius:8px; overflow:hidden; width:100%; }
#news-editor-wrap .sun-editor .se-wrapper .se-wrapper-inner { min-height:220px; }
@media (max-width:720px) {
  #news-overlay { padding:0; }
  #news-panel { width:100%; max-height:100vh; height:100vh; border-radius:0; border:0; }
  .news-admin-body { flex-direction:column; }
  .news-admin-side { width:100%; flex:0 0 auto; max-height:32vh; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
}