/* EPS1 — habillage des 8 écrans hors match choisis par Pierre.
   Direction : "tournoi bleu + charbon nuit — moderne, volume doux".
   Même principe que le HUD : tout est en classes + variables CSS, les pièces du
   screens-kit sont importées en webp (alpha conservé) / avif (fonds opaques) et
   les cadres sont posés en 9-slice via border-image (marges mesurées sur les
   masters, cf. web-game/assets/screens/screens-kit-web.json).

   Remarque de Pierre : "des boutons/texte collés au bord de certaines fenêtres".
   Règle appliquée ici : marge intérieure minimale entre tout texte/bouton/icône
   et le bord de son panneau — au moins --eps-pad-pc (>=12px) sur PC,
   --eps-pad-mob (>=10px) sur téléphone, PLUS les zones sûres (encoches) en paysage.
   Cibles tactiles >= 44px. Ces marges viennent en plus de l'épaisseur du cadre
   9-slice (border), donc le contenu ne touche jamais le cadre. */

:root {
  --eps-bg: #070c13; --eps-panel: #111c28; --eps-panel2: #192838; --eps-edge: #334b62;
  --eps-blue: #2287e8; --eps-cyan: #81d5ff; --eps-soft: #b6c7d9; --eps-text: #f1f6fb;
  --eps-green: #65d5b0; --eps-red: #da8491; --eps-ink-on-blue: #04121f;
  --eps-pad-pc: 16px;      /* inner content margin PC  (>= 12) */
  --eps-pad-mob: 12px;     /* inner content margin phone (>= 10) */
  --eps-frame: 22px;       /* 9-slice border thickness for glass panels */
  --eps-frame-sm: 14px;    /* 9-slice border thickness for rows / matches */
  --eps-radius: 18px;
  --eps-shadow: 0 22px 58px rgba(0,0,0,.55);
  /* safe-area (notches) — added to screen padding, esp. in landscape */
  --eps-safe-l: env(safe-area-inset-left, 0px);
  --eps-safe-r: env(safe-area-inset-right, 0px);
  --eps-safe-t: env(safe-area-inset-top, 0px);
  --eps-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- screen root: arena background + safe insets ---------- */
.eps-screen {
  position: relative; min-height: 100%;
  padding: calc(var(--eps-pad-pc) + var(--eps-safe-t)) calc(var(--eps-pad-pc) + var(--eps-safe-r))
           calc(var(--eps-pad-pc) + var(--eps-safe-b)) calc(var(--eps-pad-pc) + var(--eps-safe-l));
  color: var(--eps-text);
  font-family: var(--ep-font, Inter, "Segoe UI", system-ui, sans-serif);
  border-radius: var(--eps-radius); overflow: clip;
}
/* The arena photo is drawn on ::before with a legibility veil on ::after so text
   stays readable over any part of the picture (the picture itself is untouched). */
.eps-screen::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-image: var(--eps-arena);
}
.eps-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(7,12,19,.78), rgba(7,12,19,.58) 45%, rgba(7,12,19,.82));
  pointer-events: none;
}
.eps-screen > * { position: relative; z-index: 1; }
.eps-bg-a { --eps-arena: image-set(url("/assets/screens/backgrounds/arena-a-1536.avif") type("image/avif"), url("/assets/screens/backgrounds/arena-a-1536.webp") type("image/webp")); }
.eps-bg-b { --eps-arena: image-set(url("/assets/screens/backgrounds/arena-b-1536.avif") type("image/avif"), url("/assets/screens/backgrounds/arena-b-1536.webp") type("image/webp")); }
.eps-bg-c { --eps-arena: image-set(url("/assets/screens/backgrounds/arena-c-1536.avif") type("image/avif"), url("/assets/screens/backgrounds/arena-c-1536.webp") type("image/webp")); }
/* Non image-set fallback (older engines): plain webp url. */
.eps-bg-a { --eps-arena: url("/assets/screens/backgrounds/arena-a-1536.webp"); }
.eps-bg-b { --eps-arena: url("/assets/screens/backgrounds/arena-b-1536.webp"); }
.eps-bg-c { --eps-arena: url("/assets/screens/backgrounds/arena-c-1536.webp"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .eps-bg-a { --eps-arena: image-set(url("/assets/screens/backgrounds/arena-a-1536.avif") type("image/avif"), url("/assets/screens/backgrounds/arena-a-1536.webp") type("image/webp")); }
  .eps-bg-b { --eps-arena: image-set(url("/assets/screens/backgrounds/arena-b-1536.avif") type("image/avif"), url("/assets/screens/backgrounds/arena-b-1536.webp") type("image/webp")); }
  .eps-bg-c { --eps-arena: image-set(url("/assets/screens/backgrounds/arena-c-1536.avif") type("image/avif"), url("/assets/screens/backgrounds/arena-c-1536.webp") type("image/webp")); }
}

.eps-brand { font-weight: 850; letter-spacing: .14em; font-size: 15px; color: #e3f1ff;
  text-transform: uppercase; text-shadow: 0 3px 16px rgba(84,170,255,.4); margin: 0 0 10px; }
.eps-brand b { color: var(--eps-cyan); font-weight: 850; }

/* ---------- glass panels (9-slice border-image) ---------- */
.eps-surface {
  position: relative; display: block;
  border: var(--eps-frame) solid transparent;
  border-image: url("/assets/screens/panels/glass-panel-a-768.webp") 32 fill stretch;
  padding: var(--eps-pad-pc);
  color: var(--eps-text);
  /* fallback tint if the frame image is unavailable, so text keeps contrast */
  background-clip: padding-box;
}
.eps-surface-b { border-image: url("/assets/screens/panels/glass-panel-b-768.webp") 15 fill stretch; }
.eps-surface-c { border-image: url("/assets/screens/panels/glass-panel-c-768.webp") 45 fill stretch; border-width: 26px; }

.eps-headline { margin: 0 0 8px; font-size: clamp(24px, 3.4vw, 36px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.04; text-shadow: 0 6px 26px rgba(0,0,0,.5); }
.eps-sub { margin: 0; color: var(--eps-soft); font-size: clamp(13px, 1.4vw, 16px); line-height: 1.4; }
.eps-micro { margin: 0 0 6px; color: #9db5cc; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; }
.eps-h2 { margin: 0 0 8px; font-size: clamp(18px, 2vw, 22px); font-weight: 800; }

.eps-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px;
  padding: 6px 13px; border: 1px solid rgba(151,199,230,.28); border-radius: 999px;
  background: linear-gradient(#203348, #121f2b); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.3);
  color: #e2f2ff; font-size: 13px; font-weight: 600; }
.eps-pill.up { border-color: rgba(101,213,176,.55); color: var(--eps-green); }
.eps-pill.down { border-color: rgba(218,132,145,.55); color: var(--eps-red); }

.eps-avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 20px; color: #f4fbff;
  border: 2px solid rgba(169,221,255,.6);
  background: radial-gradient(circle at 35% 28%, #86b8d5, #31526b 43%, #101a24 76%);
  box-shadow: inset 0 3px 10px rgba(255,255,255,.22), 0 7px 22px rgba(0,0,0,.5);
  overflow: hidden; }
.eps-avatar img { width: 100%; height: 100%; object-fit: cover; }

.eps-stat { padding: 14px 16px; border: 1px solid rgba(255,255,255,.10); border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
  box-shadow: inset 0 1px rgba(255,255,255,.1); }
.eps-stat b { display: block; font-size: clamp(20px, 2.4vw, 26px); font-weight: 850; color: var(--eps-cyan); }
.eps-stat span { color: var(--eps-soft); font-size: 12px; }

/* ---------- buttons (>=44px targets) ---------- */
.eps-primary, .eps-secondary {
  min-height: 46px; padding: 0 20px; border-radius: 12px; font-size: 15px; font-weight: 750;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; text-align: center; line-height: 1.1;
}
.eps-primary { color: #fff; border: 1px solid rgba(145,211,255,.7);
  background: linear-gradient(155deg, #3ba7f5, #15579b);
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 8px 20px rgba(0,91,171,.44), 0 2px 0 #071c32; }
.eps-primary:hover { filter: brightness(1.06); }
.eps-secondary { color: var(--eps-text); border: 1px solid rgba(179,215,240,.3);
  background: linear-gradient(145deg, #25384a, #131f2b); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 7px 18px rgba(0,0,0,.38); }
.eps-secondary:hover { border-color: rgba(129,213,255,.5); }
.eps-danger { color: var(--eps-red); border-color: rgba(218,132,145,.55); }
.eps-danger:hover { background: rgba(218,132,145,.12); }
.eps-primary:focus-visible, .eps-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(129,213,255,.5); }

/* ---------- 1. home = A : sélecteur centré ---------- */
.eps-home { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(240px, 1fr); gap: 16px;
  align-items: start; max-width: 1180px; margin: 0 auto; }
.eps-tile-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0; }
.eps-mode-tile { flex: 1 1 220px; min-height: 150px; padding: 18px; border-radius: 16px;
  border: 1px solid rgba(142,183,210,.22); background: linear-gradient(150deg, rgba(28,45,62,.9), rgba(16,25,35,.92));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 10px 26px rgba(0,0,0,.35); color: inherit;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; text-align: left; cursor: pointer; }
.eps-mode-tile strong { font-size: 20px; font-weight: 800; }
.eps-mode-tile span { color: var(--eps-soft); font-size: 13px; }
.eps-mode-tile.active { border-color: #54b9ff; box-shadow: inset 0 0 0 1px rgba(84,185,255,.5), 0 18px 42px rgba(3,124,229,.3); }
.eps-side { display: grid; gap: 14px; }
.eps-idcard { display: flex; align-items: center; gap: 12px; }
.eps-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- 2. result = C : résultat compact ---------- */
.eps-result { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;
  max-width: 1040px; margin: 0 auto; }
.eps-banner { text-align: center; color: var(--eps-text);
  border: 20px solid transparent; padding: 14px 22px;
  border-image: url("/assets/screens/banners/victory-768.webp") 93 fill stretch; }
.eps-banner.lose { border-image: url("/assets/screens/banners/defeat-768.webp") 75 fill stretch; }
.eps-score-row { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 18px 0; }
.eps-score { font-weight: 850; font-size: clamp(34px, 5vw, 52px); letter-spacing: .02em; }
.eps-score.muted { color: #9fb2c4; }
.eps-divider { width: 1px; height: 44px; background: linear-gradient(transparent, rgba(169,206,232,.7), transparent); }
.eps-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }

/* ---------- 3. division = B : progression verticale ---------- */
.eps-division { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center;
  max-width: 980px; margin: 0 auto; }
.eps-division .side-l { text-align: center; }
.eps-medal { width: clamp(100px, 14vw, 140px); margin: 18px auto; }
.eps-medal img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.6)); display: block; }
/* vertical progression meter (B) */
.eps-vmeter { display: flex; align-items: flex-end; gap: 14px; }
.eps-vmeter .track { width: 16px; height: 180px; border-radius: 10px; background: var(--eps-edge);
  overflow: hidden; display: flex; align-items: flex-end; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.eps-vmeter .track > i { display: block; width: 100%; background: linear-gradient(#65d5b0, #2287e8);
  transition: height 1100ms cubic-bezier(.2,.8,.2,1); }
.eps-vmeter.demotion .track > i { background: linear-gradient(#da8491, #a23f52); }
.eps-vmeter .cap { color: var(--eps-soft); font-size: 13px; }

/* ---------- 4. profile = C : fiche de club ---------- */
.eps-profile { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 18px;
  align-items: stretch; max-width: 1120px; margin: 0 auto; }
.eps-profile .col { display: grid; gap: 12px; align-content: start; }
.eps-playercard { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.eps-statgrid.two { grid-template-columns: repeat(2, 1fr); }

/* ---------- 5. leaderboard = A : liste dense ---------- */
.eps-leaderboard { display: grid; grid-template-columns: minmax(260px, 330px) 1fr; gap: 18px;
  align-items: start; max-width: 1140px; margin: 0 auto; }
.eps-progressbar { height: 12px; border-radius: 9px; overflow: hidden; margin: 12px 0 6px;
  background: linear-gradient(90deg, var(--eps-green) 0 var(--eps-fill, 60%), #4d6477 var(--eps-fill, 60%));
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.eps-rows { display: grid; gap: 6px; }
.eps-row { display: grid; grid-template-columns: 46px 44px 1fr auto; align-items: center; gap: 12px;
  border: var(--eps-frame-sm) solid transparent; padding: 4px 12px; min-height: 60px;
  border-image: url("/assets/screens/rows/row-normal-768.webp") 20 fill stretch; color: var(--eps-text); }
.eps-row.current { border-image: url("/assets/screens/rows/row-current-768.webp") 17 fill stretch; }
.eps-row.up { border-image: url("/assets/screens/rows/row-promotion-768.webp") 14 fill stretch; }
.eps-row.down { border-image: url("/assets/screens/rows/row-demotion-768.webp") 22 fill stretch; }
.eps-row .rank { font-weight: 850; font-size: 17px; color: var(--eps-cyan); }
.eps-row .who { min-width: 0; }
.eps-row .who b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eps-row .who small { color: var(--eps-soft); font-size: 12px; }
.eps-row .pts { font-weight: 800; font-size: 15px; white-space: nowrap; }
.eps-row .eps-avatar { width: 40px; height: 40px; font-size: 15px; }

/* ---------- 6. online = C : recherche immersive ---------- */
.eps-online { position: relative; }
.eps-online-search { display: grid; place-items: center; gap: 16px; text-align: center; padding: 8px 0 4px; }
.eps-search-ring { width: clamp(120px, 20vw, 168px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(58,161,237,.45); display: grid; place-items: center;
  box-shadow: 0 0 0 14px rgba(35,131,197,.08), 0 0 45px rgba(24,141,245,.24), inset 0 0 28px rgba(24,141,245,.24);
  color: var(--eps-cyan); font-size: clamp(26px, 4vw, 38px); font-weight: 800;
  animation: eps-ring 2.4s ease-in-out infinite; }
@keyframes eps-ring { 50% { box-shadow: 0 0 0 20px rgba(35,131,197,.05), 0 0 60px rgba(24,141,245,.34), inset 0 0 28px rgba(24,141,245,.3); } }
.eps-online-fields { display: grid; gap: 10px; margin-top: 12px; }
.eps-online-fields label { color: var(--eps-soft); font-size: 12px; margin-bottom: -4px; }
.eps-online-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

/* ---------- 7. tournament = A : arbre classique ---------- */
.eps-bracket-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; }
.eps-bracket { display: flex; align-items: center; gap: clamp(16px, 3vw, 38px); overflow-x: auto; padding: 4px; }
.eps-round { display: grid; gap: clamp(12px, 3vh, 30px); flex: 0 0 auto; }
.eps-match { width: clamp(200px, 20vw, 265px); padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(142,183,210,.22); background: linear-gradient(145deg, rgba(28,45,62,.9), rgba(16,25,35,.95));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 9px 20px rgba(0,0,0,.4); }
.eps-match.active { border-color: #69c3ff; background: linear-gradient(145deg, #225785, #122b42);
  box-shadow: 0 0 26px rgba(22,142,232,.3), inset 0 1px rgba(255,255,255,.24); }
.eps-scoreline { display: flex; justify-content: space-between; gap: 10px; color: #c9daea; padding: 4px 0; font-size: 14px; }
.eps-scoreline + .eps-scoreline { border-top: 1px solid rgba(255,255,255,.08); }
.eps-match-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--eps-cyan); }

/* ---------- 8. pause = C : pause compacte ---------- */
.eps-pause { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: center;
  width: min(920px, 96vw); }
.eps-pause-menu { display: grid; gap: 12px; margin-top: 14px; }
.eps-pause-menu .eps-primary, .eps-pause-menu .eps-secondary { width: 100%; }
.eps-audiobar { height: 8px; border-radius: 99px; margin: 6px 0 14px;
  background: linear-gradient(90deg, #268fe4 var(--eps-fill, 78%), #30404e var(--eps-fill, 78%)); box-shadow: 0 2px 8px rgba(0,0,0,.55); }
.eps-setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 4px 0; min-height: 44px; color: var(--eps-text); cursor: pointer; }
.eps-setrow input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--eps-blue); flex: 0 0 auto; }
.eps-setrow input[type="range"] { accent-color: var(--eps-blue); min-height: 24px; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  :root { --eps-pad-pc: var(--eps-pad-mob); --eps-frame: 16px; --eps-frame-sm: 12px; }
  .eps-home, .eps-result, .eps-division, .eps-profile, .eps-leaderboard, .eps-pause { grid-template-columns: 1fr; gap: 14px; }
  .eps-headline { font-size: clamp(22px, 6vw, 30px); }
}
/* landscape phone (P10 844x390 / 740x360): tighter but safe, keep 10px + notch. */
@media (orientation: landscape) and (max-height: 460px) {
  :root { --eps-frame: 14px; --eps-frame-sm: 11px; }
  /* EPD1 — a landscape phone can be WIDE in CSS px (e.g. Samsung A14: 785x303)
     yet is still a phone: keep the multi-column screens single-column here, or the
     side-by-side leaderboard crushes the player-name column to a few px. The
     width-based (max-width:760) rule misses these wide-but-short phones. */
  .eps-home, .eps-result, .eps-division, .eps-profile, .eps-leaderboard, .eps-pause { grid-template-columns: 1fr; gap: 12px; }
  .eps-screen { padding: calc(10px + var(--eps-safe-t)) calc(10px + var(--eps-safe-r)) calc(10px + var(--eps-safe-b)) calc(10px + var(--eps-safe-l)); }
  .eps-medal { width: clamp(74px, 12vw, 104px); margin: 8px auto; }
  .eps-vmeter .track { height: 120px; }
  .eps-score-row { gap: 14px; margin: 10px 0; }
}