/* ARCADE JOUET — mort (2026-10-18, refonte 2026-10-19). Scopée html body.ui-arcade, chargée après
   css/accueil-arcade.css. Réutilise les jetons --ar-* posés par css/accueil-arcade.css (body.ui-arcade). */
/* =====================================================================================
   ÉCRAN DE MORT « ARCADE JOUET » — REFONTE 2026-10-19 (Simon : « il faut l'afficher en grand par
   défaut, pas en minifié, et la refaire plus légère, plus pleine largeur aussi »).
   Fini la petite carte de 420 px : un BANDEAU crème PLEINE LARGEUR, centré verticalement, sans
   cadre épais ni ombre portée, sur un voile léger (la mer et le vainqueur restent visibles au-dessus
   et en dessous). Contenu centré (≤ 980 px) : titre, « Coulé par X », 4 chiffres en ligne (2×2 sur
   téléphone), REJOUER en grand + Accueil. Tout le bilan historique (revanche, pub, clip/défi,
   quêtes, réserve) reste dans le DOM et sa logique tourne : il se déplie sous « Plus » (classe
   .da-open sur #death-box, posée par UI.toggleArcadeDeathMore) — c'est le moyen de « réduire ».
   ===================================================================================== */

/* Bloc arcade : invisible hors style Arcade. */
#death-arcade { display: none; }

/* ---------- 1. LE VOILE ET LE BANDEAU ---------- */
html body.ui-arcade #death-screen.death-lite {
  background: rgba(16, 44, 64, .38) !important; background-image: none !important; backdrop-filter: none !important;
  display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important;
  padding: 0 !important; overflow: hidden !important;
}
html body.ui-arcade #death-screen.death-lite.hidden { display: none !important; }
html body.ui-arcade #death-screen #death-box {
  position: relative !important; box-sizing: border-box !important;
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  max-height: 100vh !important; max-height: 100dvh !important; overflow-y: auto !important; overscroll-behavior: contain !important;
  margin: 0 !important;
  padding: 26px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px)) !important;
  background: rgba(58, 40, 23, .9) !important; background-image: none !important; color: var(--gc-text) !important;
  border: 0 !important; border-top: 4px solid var(--ar-ink) !important; border-bottom: 4px solid var(--ar-ink) !important;
  border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important;
  text-align: center !important; animation: daIn .22s ease-out !important;
}
@keyframes daIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html body.ui-arcade #death-screen #death-box > * { width: 100% !important; max-width: 980px !important; }
html body.ui-arcade #death-screen #death-box.da-open { justify-content: flex-start !important; }
html body.ui-arcade #death-screen #death-box::before,
html body.ui-arcade #death-screen #death-box::after { display: none !important; }
html body.ui-arcade #death-screen, html body.ui-arcade #death-screen * { font-family: var(--ar-font) !important; }

/* ---------- 2. CE QUI QUITTE L'ÉCRAN (replié derrière « Plus ») ---------- */
html body.ui-arcade #death-screen #death-x,
html body.ui-arcade #death-screen #death-stats,
html body.ui-arcade #death-screen #death-box:not(.da-open) .death-grid,
html body.ui-arcade #death-screen #death-box:not(.da-open) .death-footer,
html body.ui-arcade #death-screen #death-box.da-open #death-statgrid,
html body.ui-arcade #death-screen #death-box.da-open #btn-replay,
html body.ui-arcade #death-screen #death-box.da-open #btn-death-menu,
html body.ui-arcade #death-screen #death-box.da-open .death-hint { display: none !important; }

/* ---------- 3. TITRE, TUEUR, CHIFFRES ---------- */
html body.ui-arcade #death-screen .death-head { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body.ui-arcade #death-screen .death-head h2 {
  margin: 0 !important; padding: 0 !important; color: var(--ar-red) !important; background: none !important;
  font-size: clamp(30px, 5vw, 46px) !important; font-weight: 900 !important; letter-spacing: .03em !important; line-height: 1.05 !important;
  text-transform: uppercase !important;
  -webkit-text-stroke: 1.5px var(--ar-ink) !important; paint-order: stroke fill !important; text-shadow: 0 3px 0 var(--ar-ink) !important;
  -webkit-text-fill-color: var(--ar-red) !important;
}
html body.ui-arcade #death-screen #death-arcade { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; }
html body.ui-arcade #death-screen #da-killer {
  margin: 6px 0 0 !important; font-size: clamp(16px, 2.2vw, 20px) !important; font-weight: 800 !important; color: var(--gc-text) !important; opacity: .8 !important;
  line-height: 1.3 !important; overflow-wrap: anywhere !important;
}
html body.ui-arcade #death-screen #da-killer:empty { display: none !important; }
html body.ui-arcade #death-screen #da-stats {
  display: flex !important; justify-content: center !important; align-items: stretch !important; flex-wrap: nowrap !important;
  width: 100% !important; margin: 18px 0 20px !important; padding: 0 !important; gap: 0 !important;
}
html body.ui-arcade #death-screen .da-stat {
  flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: flex-start !important; gap: 2px !important; padding: 4px 10px !important;
  border-left: 2px solid rgba(26, 61, 85, .15) !important;
}
html body.ui-arcade #death-screen .da-stat:first-child { border-left: 0 !important; }
html body.ui-arcade #death-screen .da-label {
  margin: 0 !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; color: var(--ar-blue-d) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important;
}
html body.ui-arcade #death-screen .da-val {
  display: block !important; font-size: clamp(30px, 4.4vw, 44px) !important; font-weight: 900 !important; line-height: 1.05 !important;
  color: var(--gc-text) !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important;
}
html body.ui-arcade #death-screen .da-stat--score .da-val { font-size: clamp(36px, 5.6vw, 56px) !important; color: var(--ar-orange-d) !important; }
html body.ui-arcade #death-screen #da-hull { font-size: 13px !important; font-weight: 800 !important; color: var(--gc-text) !important; opacity: .65 !important; }
html body.ui-arcade #death-screen #da-hull:empty { display: none !important; }

/* NOUVEAU RECORD : badge doré sous le chiffre battu (classe .is-record posée par UI.fillArcadeDeath) */
html body.ui-arcade #death-screen .da-rec { display: none !important; }
html body.ui-arcade #death-screen .da-stat.is-record .da-rec {
  display: inline-block !important; margin: 4px 0 0 !important; padding: 2px 10px !important; border-radius: 999px !important;
  font-size: 12px !important; font-weight: 900 !important; letter-spacing: .04em !important; text-transform: uppercase !important; white-space: nowrap !important;
  color: var(--ar-ink-2) !important; background: var(--ar-yellow) !important; border: 2px solid var(--ar-ink-2) !important;
  animation: daRec 1.4s ease-in-out infinite !important;
}
@keyframes daRec { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---------- 4. LES BOUTONS : REJOUER (grand) + Accueil ---------- */
html body.ui-arcade #death-screen .da-btns {
  display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important;
  flex-wrap: wrap !important; gap: 14px 16px !important; margin: 0 0 4px !important;
}
html body.ui-arcade #death-screen #da-replay,
html body.ui-arcade #death-screen #da-menu {
  margin: 0 !important; padding: 0 24px !important; cursor: pointer !important;
  color: #fff !important; background-image: none !important; border-radius: 20px !important;
  font-weight: 900 !important; letter-spacing: .05em !important; text-transform: uppercase !important;
  paint-order: stroke fill !important; text-shadow: none !important; touch-action: manipulation !important;
  transition: transform .08s ease, box-shadow .08s ease !important;
}
html body.ui-arcade #death-screen #da-replay {
  flex: 0 1 380px !important; min-width: 240px !important; height: 72px !important; font-size: 30px !important; background: var(--ar-orange) !important;
  border: 5px solid var(--ar-orange-d) !important; box-shadow: 0 7px 0 var(--ar-orange-d) !important;
  -webkit-text-stroke: 1.5px var(--ar-orange-d) !important;
}
html body.ui-arcade #death-screen #da-menu {
  flex: 0 1 220px !important; min-width: 160px !important; height: 58px !important; font-size: 20px !important; background: var(--ar-blue) !important;
  border: 4px solid var(--ar-blue-d) !important; box-shadow: 0 5px 0 var(--ar-blue-d) !important;
  -webkit-text-stroke: 1px var(--ar-blue-d) !important;
}
/* touche [Entrée] affichée sur Rejouer (clavier seulement : masquée au doigt) */
html body.ui-arcade #death-screen #da-replay { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; }
html body.ui-arcade #death-screen #da-replay .da-replay-txt { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body.ui-arcade #death-screen #da-replay .da-kbd {
  display: inline-block !important; padding: 2px 8px !important; border-radius: 8px !important;
  font-size: 13px !important; font-weight: 900 !important; letter-spacing: .04em !important; line-height: 1.3 !important;
  color: var(--ar-orange-d) !important; background: rgba(255, 255, 255, .85) !important; border: 2px solid var(--ar-orange-d) !important;
  -webkit-text-stroke: 0 !important; text-transform: none !important;
}
@media (hover: none), (pointer: coarse) { html body.ui-arcade #death-screen #da-replay .da-kbd { display: none !important; } }
html body.vtouch.ui-arcade #death-screen #da-replay .da-kbd { display: none !important; }
@media (hover: hover) { html body.ui-arcade #death-screen #da-replay:hover, html body.ui-arcade #death-screen #da-menu:hover { filter: brightness(1.06) !important; } }
html body.ui-arcade #death-screen #da-replay:active { transform: translateY(5px) !important; box-shadow: 0 2px 0 var(--ar-orange-d) !important; }
html body.ui-arcade #death-screen #da-menu:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 var(--ar-blue-d) !important; }
html body.ui-arcade #death-screen #da-replay:focus-visible,
html body.ui-arcade #death-screen #da-menu:focus-visible,
html body.ui-arcade #death-screen #da-more:focus-visible { outline: 4px solid var(--ar-yellow) !important; outline-offset: 3px !important; }

/* ---------- 5. « PLUS » + DÉCOMPTE (discrets, sur une ligne) ---------- */
html body.ui-arcade #death-screen #da-more {
  width: auto !important; align-self: center !important; margin: 10px 0 0 !important; padding: 6px 14px !important; min-height: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; cursor: pointer !important;
  color: var(--ar-blue-d) !important; font-size: 15px !important; font-weight: 800 !important;
  text-decoration: underline !important; text-underline-offset: 3px !important;
}
html body.ui-arcade #death-screen #da-auto { margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; color: var(--gc-text) !important; opacity: .55 !important; }
html body.ui-arcade #death-screen #da-auto:empty { display: none !important; }

/* Bilan déplié : on garde le rendu historique, juste séparé du haut du bandeau. */
html body.ui-arcade #death-screen #death-box.da-open .death-grid { margin-top: 14px !important; padding-top: 14px !important; border-top: 3px dashed rgba(26, 61, 85, .25) !important; text-align: left !important; }
html body.ui-arcade #death-screen #death-box.da-open .death-footer { margin-top: 10px !important; }

/* ---------- 6. TOTEM DE RÉSURRECTION : même gabarit ---------- */
html body.ui-arcade #totem-prompt {
  background: rgba(16, 44, 64, .45) !important; background-image: none !important; backdrop-filter: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important;
}
html body.ui-arcade #totem-prompt.hidden { display: none !important; }
html body.ui-arcade #totem-prompt, html body.ui-arcade #totem-prompt * { font-family: var(--ar-font) !important; }
html body.ui-arcade #totem-prompt #totem-prompt-box {
  position: relative !important; width: min(420px, 100%) !important; max-width: 420px !important; min-width: 0 !important;
  margin: 0 auto !important; padding: 22px 22px 18px !important;
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 5px solid var(--ar-ink) !important; border-radius: 26px !important; box-shadow: 0 10px 0 var(--ar-ink) !important;
  text-align: center !important; animation: none !important; backdrop-filter: none !important;
}
html body.ui-arcade #totem-prompt .totem-halo,
html body.ui-arcade #totem-prompt #totem-prompt-box::before,
html body.ui-arcade #totem-prompt #totem-prompt-box::after { display: none !important; }
html body.ui-arcade #totem-prompt .totem-ico { font-size: 44px !important; line-height: 1 !important; margin: 0 0 6px !important; animation: none !important; filter: none !important; }
html body.ui-arcade #totem-prompt h2 {
  margin: 0 0 8px !important; font-size: 26px !important; font-weight: 900 !important; line-height: 1.15 !important;
  color: var(--ar-ink) !important; -webkit-text-fill-color: var(--ar-ink) !important; background: none !important; text-shadow: none !important;
}
html body.ui-arcade #totem-prompt .totem-sub { margin: 0 0 16px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--ar-ink) !important; opacity: .85 !important; line-height: 1.4 !important; }
html body.ui-arcade #totem-prompt .totem-sub b { color: var(--ar-green-d) !important; }
html body.ui-arcade #totem-prompt .totem-actions { display: flex !important; flex-direction: column !important; gap: 14px !important; margin: 0 !important; }
html body.ui-arcade #totem-prompt .totem-accept,
html body.ui-arcade #totem-prompt .totem-decline {
  width: 100% !important; margin: 0 !important; padding: 0 16px !important; cursor: pointer !important;
  color: #fff !important; background-image: none !important; border-radius: 20px !important; text-shadow: none !important;
  font-weight: 900 !important; letter-spacing: .04em !important; paint-order: stroke fill !important; animation: none !important;
  transition: transform .08s ease, box-shadow .08s ease !important;
}
html body.ui-arcade #totem-prompt .totem-accept {
  height: 66px !important; font-size: 26px !important; text-transform: uppercase !important; background: var(--ar-green) !important;
  border: 5px solid var(--ar-green-d) !important; box-shadow: 0 8px 0 var(--ar-green-d) !important; -webkit-text-stroke: 1.5px var(--ar-green-d) !important;
}
html body.ui-arcade #totem-prompt .totem-decline {
  height: 50px !important; font-size: 18px !important; background: var(--ar-blue) !important;
  border: 4px solid var(--ar-blue-d) !important; box-shadow: 0 6px 0 var(--ar-blue-d) !important; -webkit-text-stroke: 1px var(--ar-blue-d) !important;
}
html body.ui-arcade #totem-prompt .totem-accept:active { transform: translateY(6px) !important; box-shadow: 0 2px 0 var(--ar-green-d) !important; }
html body.ui-arcade #totem-prompt .totem-decline:active { transform: translateY(4px) !important; box-shadow: 0 2px 0 var(--ar-blue-d) !important; }
html body.ui-arcade #totem-prompt .totem-accept:disabled { filter: grayscale(.3) !important; cursor: default !important; }
html body.ui-arcade #totem-prompt .totem-count { margin: 14px 0 0 !important; font-size: 15px !important; font-weight: 700 !important; color: var(--ar-ink) !important; opacity: .8 !important; }
html body.ui-arcade #totem-prompt #totem-prompt-cd {
  display: inline-block !important; min-width: 1.6em !important; font-size: 26px !important; font-weight: 900 !important;
  color: var(--ar-red) !important; vertical-align: -3px !important; font-variant-numeric: tabular-nums !important;
}

/* ---------- 7. PETITS ÉCRANS ---------- */
/* téléphone (portrait) : chiffres en 2×2, boutons empilés pleine largeur */
@media (max-width: 600px) {
  html body.ui-arcade #death-screen #death-box { padding: 22px 14px 14px !important; }
  html body.ui-arcade #death-screen #da-stats { flex-wrap: wrap !important; margin: 14px 0 16px !important; row-gap: 12px !important; }
  html body.ui-arcade #death-screen .da-stat { flex: 1 1 50% !important; border-left: 0 !important; }
  html body.ui-arcade #death-screen .da-stat:nth-child(even) { border-left: 2px solid rgba(26, 61, 85, .15) !important; }
  html body.ui-arcade #death-screen .da-label { font-size: 12px !important; letter-spacing: .06em !important; }
  html body.ui-arcade #death-screen .da-btns { flex-direction: column !important; align-items: stretch !important; }
  html body.ui-arcade #death-screen #da-replay, html body.ui-arcade #death-screen #da-menu { flex: 0 0 auto !important; min-width: 0 !important; width: 100% !important; }
  html body.ui-arcade #death-screen #da-replay { height: 66px !important; font-size: 26px !important; }
  html body.ui-arcade #death-screen #da-menu { height: 52px !important; font-size: 18px !important; }
}
/* paysage bas (téléphone couché) : tout tient sans défiler */
@media (max-height: 560px) {
  html body.ui-arcade #death-screen #death-box { padding: 12px 16px 8px !important; }
  html body.ui-arcade #death-screen .death-head h2 { font-size: 28px !important; }
  html body.ui-arcade #death-screen #da-killer { margin-top: 2px !important; font-size: 15px !important; }
  html body.ui-arcade #death-screen #da-stats { margin: 8px 0 10px !important; flex-wrap: nowrap !important; }
  html body.ui-arcade #death-screen .da-stat { flex: 1 1 0 !important; }
  html body.ui-arcade #death-screen .da-val { font-size: 28px !important; }
  html body.ui-arcade #death-screen .da-stat--score .da-val { font-size: 32px !important; }
  html body.ui-arcade #death-screen .da-btns { flex-direction: row !important; }
  html body.ui-arcade #death-screen #da-replay { height: 54px !important; font-size: 22px !important; }
  html body.ui-arcade #death-screen #da-menu { height: 46px !important; font-size: 17px !important; }
  html body.ui-arcade #death-screen #da-more { margin-top: 4px !important; padding: 4px 12px !important; }
  html body.ui-arcade #totem-prompt #totem-prompt-box { padding: 14px 18px 10px !important; }
  html body.ui-arcade #totem-prompt .totem-ico { display: none !important; }
}

/* =====================================================================================
   8. REFONTE 2026-10-20 (Simon : « popup de mort = au-dessus de tout, pleine largeur, jeu en pause,
   tout visible SANS défiler »). Chargée EN DERNIER parmi les feuilles qui stylent #death-screen
   (style.css, charte-*.css, glass-ui.css, sunset-arcade.css, arcade-mort.css) → ces règles gagnent.
   body.death-open est posée par UI.showDeath (js/ui.js) ; le rendu du monde est figé par GAME.render.
   ===================================================================================== */

/* 8.a  AU-DESSUS : plus haut que tout le HUD / les toasts (≤ 125). Reste SOUS le studio de clip (130),
   le paiement Stripe (99999) et l'écran de chargement (9000), ouverts depuis ou par-dessus. */
html body #death-screen.overlay.death-lite { z-index: 128; }

/* 8.b  Notifications de jeu : cachées tant que l'écran de mort est ouvert (rien ne passe devant). Les files
   (UI.centerHold → 'modal') gardent les cartes d'événement / annonces en attente : rien n'est perdu. */
body.death-open #killfeed, body.death-open #boss-banner, body.death-open #heli-notice,
body.death-open #quest-toast, body.death-open #gps-toasts, body.death-open #shop-toast,
body.death-open #event-card, body.death-open #flash-mission, body.death-open #big-announce,
body.death-open #pq-quests, body.death-open #sound-prompt, body.death-open #privacy-notice,
body.death-open #ob-spotlight, body.death-open #ob-arrow, body.death-open #ob-got-it, body.death-open #ob-shield-frame,
body.death-open #chest-reward, body.death-open .dov-cap-killclip, body.death-open #dov-cap-toast,
body.death-open #oog-hud, body.death-open #eg-hud, body.death-open #gift-card, body.death-open #gift-tip,
body.death-open .feed-msg { display: none !important; }

/* 8.c  JEU EN PAUSE (visuel) : le monde est figé par GAME.render (dernier plan conservé) ; on l'assombrit et
   on le floute — sur un canvas IMMOBILE le filtre n'est calculé qu'une fois (pas de coût par frame). */
body.death-open #game {
  filter: blur(3px) brightness(.62) saturate(.8);
}
html body.ui-arcade #death-screen.death-lite {
  background: rgba(8, 22, 34, .52) !important; pointer-events: auto !important; /* le jeu derrière n'est plus cliquable */
}

/* 8.d  PLEINE LARGEUR : le bandeau et son contenu occupent toute la largeur utile (plus de colonne 980 px). */
html body.ui-arcade #death-screen #death-box {
  padding-left: max(16px, 3vw) !important; padding-right: max(16px, 3vw) !important; padding-top: 18px !important; padding-bottom: 12px !important;
}
html body.ui-arcade #death-screen #death-box > * { max-width: none !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) #da-stats { max-width: 1100px !important; align-self: center !important; }

/* 8.e  DÉPLIÉ (« Plus ») : tout tient dans la hauteur de l'écran — bande du haut compacte, bilan | rejouer
   en 2 colonnes, cartes de revanche côte à côte et compactes, pied sur une ligne. Défilement = SECOURS
   seulement (téléphone, très petite hauteur). */
html body.ui-arcade #death-screen #death-box.da-open { padding-top: 10px !important; padding-bottom: 8px !important; justify-content: flex-start !important; }
html body.ui-arcade #death-screen #death-box.da-open .death-head h2 { font-size: clamp(24px, 3vw, 32px) !important; text-shadow: 0 2px 0 var(--ar-ink) !important; }
html body.ui-arcade #death-screen #death-box.da-open #da-killer { margin: 0 !important; font-size: 15px !important; }
html body.ui-arcade #death-screen #death-box.da-open #da-stats { margin: 6px 0 8px !important; }
html body.ui-arcade #death-screen #death-box.da-open .da-stat { padding: 0 10px !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: baseline !important; gap: 2px 10px !important; }
html body.ui-arcade #death-screen #death-box.da-open .da-label { font-size: 11px !important; }
html body.ui-arcade #death-screen #death-box.da-open .da-val { font-size: clamp(22px, 2.6vw, 30px) !important; }
html body.ui-arcade #death-screen #death-box.da-open .da-stat--score .da-val { font-size: clamp(24px, 3vw, 34px) !important; }
html body.ui-arcade #death-screen #death-box.da-open #da-hull { font-size: 11px !important; }
html body.ui-arcade #death-screen #death-box.da-open .da-stat.is-record .da-rec { margin: 0 !important; padding: 0 8px !important; font-size: 10px !important; }
html body.ui-arcade #death-screen #death-box.da-open .da-btns { flex-wrap: nowrap !important; gap: 12px !important; margin: 0 !important; }
html body.ui-arcade #death-screen #death-box.da-open #da-replay { height: 48px !important; font-size: 21px !important; border-width: 4px !important; box-shadow: 0 4px 0 var(--ar-orange-d) !important; flex: 0 1 360px !important; min-width: 300px !important; white-space: nowrap !important; }
html body.ui-arcade #death-screen #death-box.da-open #da-menu { height: 40px !important; font-size: 15px !important; border-width: 3px !important; box-shadow: 0 4px 0 var(--ar-blue-d) !important; flex: 0 1 170px !important; min-width: 120px !important; }
html body.ui-arcade #death-screen #death-box.da-open #da-more { margin: 2px 0 0 !important; padding: 2px 12px !important; font-size: 14px !important; }
html body.ui-arcade #death-screen #death-box.da-open #da-auto { font-size: 12px !important; }

html body.ui-arcade #death-screen #death-box.da-open .death-grid {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: minmax(0, auto) !important;
  align-items: start !important; gap: 8px clamp(14px, 2.4vw, 32px) !important; width: 100% !important;
  flex: 1 1 auto !important; min-height: 0 !important; margin-top: 8px !important; padding-top: 8px !important; border-top-width: 2px !important;
}
html body.ui-arcade #death-screen #death-box.da-open .death-recap,
html body.ui-arcade #death-screen #death-box.da-open .death-actions { gap: 6px !important; overflow: visible !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html body.ui-arcade #death-screen #death-box.da-open .death-col-head { font-size: 12px !important; margin: 0 0 2px !important; padding-bottom: 3px !important; }
html body.ui-arcade #death-screen #death-box.da-open #death-revenge { gap: 6px !important; margin-top: 0 !important; }
html body.ui-arcade #death-screen #death-box.da-open #death-revenge .death-revenge-btns { gap: 8px !important; }
html body.ui-arcade #death-screen #death-box.da-open #death-revenge .revenge-card { padding: 6px 8px !important; gap: 2px !important; }
html body.ui-arcade #death-screen #death-box.da-open #death-revenge .rc-ship { max-width: 64px !important; }
html body.ui-arcade #death-screen #death-box.da-open #death-revenge .rc-chips { display: none !important; }
html body.ui-arcade #death-screen #death-box.da-open #death-revenge-taunt { display: none !important; }
html body.ui-arcade #death-screen #death-box.da-open #death-revenge .rc-cta { padding: 4px 8px !important; font-size: 12px !important; }
html body.ui-arcade #death-screen #death-box.da-open #death-xp,
html body.ui-arcade #death-screen #death-box.da-open #death-reserve { margin: 0 !important; }
html body.ui-arcade #death-screen #death-box.da-open .death-footer { margin-top: 6px !important; padding-top: 6px !important; gap: 8px !important; }
html body.ui-arcade #death-screen #death-box.da-open .death-footer > button { padding-top: 6px !important; padding-bottom: 6px !important; font-size: 13px !important; min-height: 0 !important; }

/* 8.f  Écrans étroits (≤ 760 px) : une colonne ; le défilement du bandeau sert de secours. */
@media (max-width: 760px) {
  html body.ui-arcade #death-screen #death-box.da-open .death-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body.ui-arcade #death-screen #death-box.da-open .da-stat { flex-direction: column !important; }
}
@media (prefers-reduced-motion: reduce) { html body.ui-arcade #death-screen #death-box { animation: none !important; } }

/* =====================================================================================
   9. REFONTE PLEINE LARGEUR 2026-10-21 (« refaire cela en pleine largeur et… »). État REPLIÉ (hors .da-open) :
   le panneau occupe TOUT le viewport (plus de bandeau centré de 1 100 px) et répartit son contenu sur la
   largeur — paysage ≥ 720 px : colonne gauche (titre, tueur, Rejouer / Accueil) + colonne droite (4 chiffres
   en cartes marine 2×2, même famille que les notifications) ; portrait : une colonne qui remplit la hauteur.
   Aucun défilement : tout tient dans 100dvh. #death-arcade passe en `display: contents` : ses enfants
   (#da-killer, #da-stats, .da-btns, #da-more, #da-auto) deviennent des cellules de la grille de #death-box.
   Tous les IDs et la logique JS (UI.fillArcadeDeath, toggleArcadeDeathMore, décompte) sont inchangés.
   ===================================================================================== */
html body.ui-arcade #death-screen #death-box:not(.da-open) {
  height: 100vh !important; height: 100dvh !important; max-height: none !important; overflow: hidden !important;
  border-top: 0 !important; border-bottom: 0 !important;
  background: rgba(58, 40, 23, .9) !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: auto !important;
  grid-template-areas: "head" "killer" "stats" "btns" "more" "auto" !important;
  align-content: center !important; justify-items: stretch !important; row-gap: clamp(6px, 1.6vh, 16px) !important; column-gap: 0 !important;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(18px, 4vw, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(18px, 4vw, env(safe-area-inset-left, 0px)) !important;
}
html body.ui-arcade #death-screen #death-box:not(.da-open) > * { width: auto !important; max-width: none !important; min-width: 0 !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) #death-arcade { display: contents !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) .death-head { grid-area: head !important; text-align: center !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) #da-killer { grid-area: killer !important; margin: 0 !important; text-align: center !important; opacity: 1 !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) #da-stats { grid-area: stats !important; max-width: none !important; margin: clamp(4px, 1.4vh, 14px) 0 !important; align-self: auto !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) .da-btns { grid-area: btns !important; width: 100% !important; margin: 0 !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) #da-more { grid-area: more !important; justify-self: center !important; margin: 0 !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) #da-auto { grid-area: auto !important; justify-self: center !important; opacity: 1 !important; color: #3b5870 !important; }
/* boutons : Rejouer prend la largeur disponible (jusqu'à 640 px), Accueil la suit */
html body.ui-arcade #death-screen #death-box:not(.da-open) #da-replay { flex: 2 1 320px !important; max-width: 640px !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) #da-menu { flex: 1 1 200px !important; max-width: 320px !important; color: #0b1c2c !important; -webkit-text-stroke: 0 !important; }
/* focus clavier bien visible sur crème ET sur les boutons colorés (anneau encre + liseré blanc) */
html body.ui-arcade #death-screen #da-replay:focus-visible,
html body.ui-arcade #death-screen #da-menu:focus-visible,
html body.ui-arcade #death-screen #da-more:focus-visible {
  outline: 4px solid var(--ar-ink) !important; outline-offset: 4px !important; box-shadow: 0 0 0 4px #fff !important;
}
html body.ui-arcade #death-screen #da-more { color: #0f4a6e !important; }

/* chiffres = cartes de la famille « notifications » (marine, trait d'encre, texte clair) */
html body.ui-arcade #death-screen #death-box:not(.da-open) .da-stat {
  background: rgba(9, 22, 36, .94) !important; border: 2px solid var(--ar-ink) !important; border-radius: 14px !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25) !important; padding: clamp(6px, 1.6vh, 14px) 10px !important; margin: 0 5px !important;
}
html body.ui-arcade #death-screen #death-box:not(.da-open) .da-stat:nth-child(even) { border-left: 2px solid var(--ar-ink) !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) #da-stats { margin-left: -5px !important; margin-right: -5px !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) .da-label { color: #aacde1 !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) .da-val { color: #f4f8fb !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) .da-stat--score .da-val { color: #ffe36b !important; }
html body.ui-arcade #death-screen #death-box:not(.da-open) #da-hull { color: #f4f8fb !important; opacity: .8 !important; }

/* PAYSAGE (≥ 720 px) : deux colonnes sur toute la largeur — identité + actions | chiffres 2×2 */
@media (min-width: 720px) and (orientation: landscape) {
  html body.ui-arcade #death-screen #death-box:not(.da-open) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important;
    grid-template-areas: "head stats" "killer stats" "btns stats" "more stats" "auto stats" !important;
    column-gap: clamp(24px, 5vw, 80px) !important; justify-items: stretch !important;
  }
  html body.ui-arcade #death-screen #death-box:not(.da-open) .death-head,
  html body.ui-arcade #death-screen #death-box:not(.da-open) .death-head h2,
  html body.ui-arcade #death-screen #death-box:not(.da-open) #da-killer { text-align: left !important; }
  html body.ui-arcade #death-screen #death-box:not(.da-open) #da-more { margin-left: -14px !important; }
  html body.ui-arcade #death-screen #death-box:not(.da-open) #da-more,
  html body.ui-arcade #death-screen #death-box:not(.da-open) #da-auto { justify-self: start !important; }
  html body.ui-arcade #death-screen #death-box:not(.da-open) #da-stats {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 1fr !important;
    gap: clamp(8px, 2vh, 18px) clamp(8px, 1.6vw, 18px) !important; margin: 0 !important; align-self: center !important; align-content: center !important;
  }
  html body.ui-arcade #death-screen #death-box:not(.da-open) .da-stat { margin: 0 !important; justify-content: center !important; border-radius: 18px !important; }
  html body.ui-arcade #death-screen #death-box:not(.da-open) .da-btns { justify-content: flex-start !important; }
  html body.ui-arcade #death-screen #death-box:not(.da-open) .da-val { font-size: clamp(30px, 6vh, 56px) !important; }
  html body.ui-arcade #death-screen #death-box:not(.da-open) .da-stat--score .da-val { font-size: clamp(34px, 7vh, 66px) !important; }
}
/* PORTRAIT : cartes en 2×2 sur toute la largeur, boutons empilés pleine largeur (règles ≤ 600 px conservées) */
@media (max-width: 600px) {
  html body.ui-arcade #death-screen #death-box:not(.da-open) #da-stats { gap: 10px 0 !important; }
  html body.ui-arcade #death-screen #death-box:not(.da-open) .da-stat { flex: 1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  html body.ui-arcade #death-screen #death-box:not(.da-open) #da-replay,
  html body.ui-arcade #death-screen #death-box:not(.da-open) #da-menu { max-width: none !important; flex: 0 0 auto !important; }
}
/* paysage bas : boutons plus bas pour laisser de l'air */
@media (max-height: 560px) and (orientation: landscape) {
  html body.ui-arcade #death-screen #death-box:not(.da-open) .da-btns { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  html body.ui-arcade #death-screen #death-box:not(.da-open) #da-replay,
  html body.ui-arcade #death-screen #death-box:not(.da-open) #da-menu { flex: 0 0 auto !important; max-width: none !important; width: 100% !important; }
  html body.ui-arcade #death-screen #death-box:not(.da-open) .death-head h2 { font-size: 30px !important; }
}