/* =====================================================================
   SUPPLY DROP — thème "largage tactique" pour TV plein écran (1920×1080)
   Palette : olive drab / sable / jaune danger / rouge alerte / phosphore
   ===================================================================== */

:root {
  --night:      #10120b;   /* fond nuit olive */
  --night-2:    #171a0f;
  --od-green:   #4b5320;   /* olive drab */
  --od-line:    #6a7330;
  --sand:       #c2b280;   /* sable / khaki */
  --sand-dim:   #8f855f;
  --hazard:     #f2c200;   /* jaune danger (signature) */
  --alert:      #d1471f;   /* rouge alerte */
  --phosphor:   #8fff5a;   /* vert HUD */
  --ink:        #e8e6d9;   /* blanc cassé stencil */
  --ink-dim:    #a9a794;

  --team-blue:  #4f7fd6;
  --team-red:   #d64f4f;
  --team-green: #57b84a;
  --team-yellow:#e2c22e;
  --team-purple:#a15fd0;
  --team-orange:#e08a2e;
  --team-gray:  #9a9a8c;
  --team-white: #dcdccb;

  --f-display: 'Black Ops One', 'Impact', sans-serif;
  --f-label:   'Oswald', 'Arial Narrow', sans-serif;
  --f-mono:    'Share Tech Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: var(--f-label);
  cursor: none; /* écran kiosk : pas de curseur */
}

body {
  /* Texture de fond : dégradé olive + fines lignes de grille tactique */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(75,83,32,.35), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(75,83,32,.25), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(106,115,48,.05) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(106,115,48,.05) 46px 47px),
    var(--night);
}

.hidden { display: none !important; }

/* ------------------------------- HUD chrome ------------------------------ */
.hud-frame { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

.bracket {
  position: absolute; width: 54px; height: 54px;
  border: 4px solid var(--hazard);
  filter: drop-shadow(0 0 6px rgba(242,194,0,.4));
}
.bracket.tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.bracket.tr { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
.bracket.bl { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
.bracket.br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }

.scanline {
  position: absolute; left: 0; right: 0; height: 140px;
  background: linear-gradient(180deg, transparent, rgba(143,255,90,.06), transparent);
  animation: scan 7s linear infinite;
}
@keyframes scan { 0% { top: -140px; } 100% { top: 100%; } }

.grain {
  position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.6) .5px, transparent .5px);
  background-size: 3px 3px;
}

/* Bandes danger jaune/noir (signature visuelle) */
.hazard-bar {
  position: fixed; left: 0; right: 0; height: 12px; z-index: 30;
  background: repeating-linear-gradient(-45deg,
    var(--hazard) 0 24px, #14140a 24px 48px);
  opacity: .92;
}
.hazard-bar.top { top: 64px; }
.hazard-bar.bottom { bottom: 0; }

/* ------------------------------- Topbar --------------------------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 35;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: linear-gradient(180deg, rgba(23,26,15,.96), rgba(16,18,11,.9));
  border-bottom: 1px solid var(--od-line);
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.chevrons { color: var(--hazard); font-family: var(--f-mono); font-size: 20px; letter-spacing: 2px; }
.facility {
  font-family: var(--f-label); font-weight: 600; letter-spacing: 4px;
  font-size: 20px; color: var(--sand);
}
.topbar-right { display: flex; align-items: center; gap: 18px; font-family: var(--f-mono); }
.led {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--alert); box-shadow: 0 0 10px var(--alert);
  animation: pulse 1.4s ease-in-out infinite;
}
.led.ok { background: var(--phosphor); box-shadow: 0 0 10px var(--phosphor); animation: none; }
@keyframes pulse { 50% { opacity: .35; } }
.link-label { font-size: 14px; letter-spacing: 2px; color: var(--ink-dim); }
.clock { font-size: 18px; letter-spacing: 2px; color: var(--phosphor); min-width: 108px; text-align: right; }

/* -------------------------------- Views --------------------------------- */
.view {
  position: fixed; inset: 0;
  padding: 96px 60px 40px;
  display: flex; flex-direction: column;
}

/* ============================ ROSTER (repos) ============================= */
.roster-head { text-align: center; margin-bottom: 10px; }
.roster-title {
  margin: 0; font-family: var(--f-display); font-size: clamp(32px, 4.4vw, 60px);
  letter-spacing: 6px; color: var(--ink);
  text-shadow: 0 0 24px rgba(242,194,0,.25), 3px 3px 0 rgba(0,0,0,.6);
}
.roster-sub { margin: 2px 0 0; font-family: var(--f-mono); letter-spacing: 6px; color: var(--hazard); font-size: 15px; }

.roster-columns, .roster-row {
  display: grid;
  grid-template-columns: 72px 1fr 150px 120px 120px 130px 150px;
  align-items: center; gap: 8px;
}
.roster-columns {
  padding: 6px 18px; margin: 8px 0 4px;
  font-family: var(--f-label); font-weight: 600; letter-spacing: 3px;
  font-size: 15px; color: var(--sand-dim);
  border-bottom: 1px solid var(--od-line);
}
.roster-columns .kdr, .roster-columns .hits, .roster-columns .streak, .roster-columns .score { text-align: right; }

.roster-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px; }

.roster-row {
  /* flex:1 1 0 => les lignes se partagent la hauteur dispo : tiennent toujours,
     quel que soit le nombre de joueurs (2 ou 34), sans déborder. */
  flex: 1 1 0; min-height: 0; max-height: 46px;
  padding: 0 18px;
  display: grid; align-items: center;
  background: linear-gradient(90deg, rgba(75,83,32,.16), rgba(75,83,32,.04));
  border-left: 4px solid var(--tc, var(--team-gray));
  font-family: var(--f-label); font-size: clamp(13px, 1.7vh, 22px);
}
.roster-row .rank { font-family: var(--f-mono); color: var(--sand-dim); font-size: .9em; }
.roster-row .name { font-weight: 600; letter-spacing: 1px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-row .kdr, .roster-row .hits, .roster-row .streak, .roster-row .score {
  text-align: right; font-family: var(--f-mono); }
.roster-row .score { color: var(--hazard); font-weight: 700; }
.roster-row .streak { color: var(--phosphor); }

/* Podium : accent sur les 3 premiers */
.roster-row.top1 { background: linear-gradient(90deg, rgba(242,194,0,.22), rgba(242,194,0,.04)); }
.roster-row.top1 .rank::before { content: '★ '; color: var(--hazard); }

/* Couleurs d'équipe : `--tc` est reprise par la bordure de ligne, les pastilles
   et le bandeau de fin de partie (voir teams.js). */
.team-blue   { --tc: var(--team-blue); }
.team-red    { --tc: var(--team-red); }
.team-green  { --tc: var(--team-green); }
.team-yellow { --tc: var(--team-yellow); }
.team-purple { --tc: var(--team-purple); }
.team-orange { --tc: var(--team-orange); }
.team-gray   { --tc: var(--team-gray); }
.team-white  { --tc: var(--team-white); }

/* Pastille d'équipe : point + nom de la couleur (+ effectif dans le bandeau). */
.roster-row .team { min-width: 0; display: flex; align-items: center; }
.team-pill {
  display: inline-flex; align-items: center; gap: .45em; max-width: 100%;
  padding: .14em .7em .14em .5em;
  border: 1px solid var(--tc, var(--team-gray)); border-radius: 999px;
  background: rgba(0,0,0,.4);
  font-family: var(--f-label); font-weight: 600; font-size: .72em;
  letter-spacing: 1.5px; line-height: 1.2; white-space: nowrap;
  color: var(--tc, var(--team-gray));
}
.team-pill::before {
  content: ''; flex: none; width: .72em; height: .72em; border-radius: 50%;
  background: var(--tc, var(--team-gray));
  box-shadow: 0 0 8px var(--tc, var(--team-gray));
}
.team-pill .tp-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.team-pill .tp-count { font-family: var(--f-mono); color: var(--ink-dim); }

/* Bandeau de fin de partie : vainqueur annoncé par iCOMBAT + répartition des
   équipes. Hauteur fixe : le tableau des scores la déduit de ses lignes. */
.match-banner {
  flex: none; height: 48px; margin: 0 0 6px;
  display: flex; justify-content: center; align-items: center; gap: 22px;
  overflow: hidden;
}
.mb-victory {
  display: inline-flex; align-items: center; gap: 14px; height: 44px;
  padding: 0 24px;
  border: 2px solid var(--tc, var(--hazard)); border-radius: 3px;
  background: rgba(0,0,0,.45);
  box-shadow: 0 0 24px -6px var(--tc, var(--hazard));
}
.mb-eyebrow { font-family: var(--f-mono); font-size: 15px; letter-spacing: 4px; color: var(--hazard); }
.mb-title {
  font-family: var(--f-display); font-size: 28px; letter-spacing: 4px;
  color: var(--tc, var(--ink)); white-space: nowrap;
  text-shadow: 0 0 18px rgba(0,0,0,.6), 2px 2px 0 rgba(0,0,0,.6);
}
.mb-teams { display: flex; align-items: center; gap: 10px; }
.match-banner .team-pill { font-size: 18px; padding: 5px 14px 5px 11px; }
.match-banner .team-pill.is-winner { background: rgba(242,194,0,.12); box-shadow: 0 0 14px -4px var(--tc); }
.match-banner .team-pill.is-winner .tp-label::before { content: '★ '; color: var(--hazard); }
/* Blocs à taille fixe (mesurés par fitBanner) + paliers de resserrement quand
   le bandeau ne tient pas : sans effectifs, puis points seuls, puis vainqueur seul. */
.match-banner > * { flex: none; }
.match-banner.fit-1 .tp-count { display: none; }
.match-banner.fit-2 .mb-teams .tp-label { display: none; }
.match-banner.fit-2 .mb-teams .team-pill { padding: 6px 9px; }
.match-banner.fit-3 .mb-teams { display: none; }

.roster-foot {
  text-align: center; font-family: var(--f-mono); letter-spacing: 5px;
  color: var(--ink-dim); font-size: 14px; margin: 6px 0 0;
  animation: blink 2.4s steps(2) infinite;
}
@keyframes blink { 50% { opacity: .3; } }

/* ============================ DRAMA (séquence) ========================== */
#drama-view {
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(30,34,16,.6), rgba(16,18,11,.96) 70%);
}
#drama-view .phase {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 100px 60px;
}
#drama-view .phase.active { display: flex; }

/* --- Phase A : MISSION COMPLETE --- */
.mc-stamp {
  font-family: var(--f-display); font-size: clamp(60px, 11vw, 168px);
  line-height: .92; letter-spacing: 8px; color: var(--ink);
  border: 8px solid var(--alert); padding: 30px 56px; border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(16,18,11,.9), 0 0 60px rgba(209,71,31,.35);
  text-shadow: 4px 4px 0 rgba(0,0,0,.6);
  animation: stampSlam .5s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes stampSlam {
  0% { transform: scale(2.4) rotate(-8deg); opacity: 0; filter: blur(6px); }
  60% { transform: scale(.92) rotate(-3deg); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(-3deg); opacity: 1; }
}

/* --- Phase B : SEARCHING --- */
.radar {
  width: 320px; height: 320px; border-radius: 50%;
  border: 2px solid var(--od-line); position: relative; overflow: hidden;
  background:
    repeating-radial-gradient(circle, transparent 0 38px, rgba(106,115,48,.25) 38px 39px),
    radial-gradient(circle, rgba(143,255,90,.06), transparent 70%);
}
.radar::before, .radar::after {
  content: ''; position: absolute; background: rgba(106,115,48,.35);
}
.radar::before { left: 50%; top: 0; width: 1px; height: 100%; }
.radar::after { top: 50%; left: 0; height: 1px; width: 100%; }
.sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(143,255,90,.55), transparent 60deg);
  animation: sweep 1.6s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.ping {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--phosphor); top: 34%; left: 62%;
  box-shadow: 0 0 12px var(--phosphor);
  animation: ping 1.6s ease-out infinite;
}
@keyframes ping { 0%,60% { transform: scale(.4); opacity: 0; } 75% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }

.search-txt {
  font-family: var(--f-label); font-weight: 600; letter-spacing: 6px;
  font-size: clamp(28px, 3.4vw, 48px); color: var(--sand);
}
.dots::after { content: ''; animation: dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.progress {
  width: min(60vw, 720px); height: 20px; border: 2px solid var(--od-line);
  background: rgba(0,0,0,.4); overflow: hidden; position: relative;
}
.progress-fill {
  display: block; height: 100%; width: 0%;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, #b89400 14px 28px);
  box-shadow: 0 0 16px rgba(242,194,0,.5);
  transition: width linear;
}
.coords { font-family: var(--f-mono); color: var(--phosphor); letter-spacing: 3px; font-size: 18px; }

/* --- Phase C : SUPPLY DROP FOUND --- */
.drop-scene { position: relative; height: 46vh; width: 100%; }
.parachute {
  position: absolute; left: 50%; top: 6vh; transform: translateX(-50%);
  animation: sway 2.4s ease-in-out infinite;
}
/* la descente ne se joue qu'à l'activation de la phase (voir bloc plus bas) */
.phase.active .parachute {
  animation: descend 1.9s cubic-bezier(.3,.7,.5,1) both, sway 2.4s ease-in-out infinite;
}
@keyframes descend { 0% { top: -46vh; } 100% { top: 6vh; } }
@keyframes sway { 0%,100% { margin-left: -14px; } 50% { margin-left: 14px; } }
/* Parachute dessiné en SVG (cordes reliées avec précision à la caisse). */
.parachute svg {
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.found-txt {
  position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%);
  font-family: var(--f-display); font-size: clamp(40px, 6vw, 92px);
  letter-spacing: 5px; color: var(--hazard);
  text-shadow: 0 0 30px rgba(242,194,0,.5), 3px 3px 0 rgba(0,0,0,.6);
  animation: foundPop .5s .9s both cubic-bezier(.2,1.5,.3,1);
  opacity: 0;
}
@keyframes foundPop { to { opacity: 1; transform: translateX(-50%) scale(1); } from { transform: translateX(-50%) scale(.6); } }

/* --- Phase D : défilement callsigns --- */
.roll-label { font-family: var(--f-label); font-weight: 600; letter-spacing: 6px; color: var(--sand-dim); font-size: 26px; }
.roll-window {
  width: min(72vw, 900px); padding: 30px 40px;
  border: 3px solid var(--od-line); background: rgba(0,0,0,.45);
  box-shadow: inset 0 0 40px rgba(143,255,90,.06), 0 0 30px rgba(0,0,0,.5);
  position: relative; overflow: hidden;
}
.roll-window::before, .roll-window::after {
  content: ''; position: absolute; left: 0; right: 0; height: 40px; pointer-events: none;
}
.roll-window::before { top: 0; background: linear-gradient(180deg, rgba(16,18,11,.95), transparent); }
.roll-window::after { bottom: 0; background: linear-gradient(0deg, rgba(16,18,11,.95), transparent); }
.roll-name {
  font-family: var(--f-mono); font-size: clamp(40px, 6vw, 88px);
  color: var(--phosphor); letter-spacing: 3px; line-height: 1;
  text-shadow: 0 0 24px rgba(143,255,90,.4);
}
.roll-count { font-family: var(--f-mono); color: var(--ink-dim); letter-spacing: 3px; font-size: 18px; }

/* --- Phase E : reveal gagnant --- */
.winner-eyebrow { font-family: var(--f-label); font-weight: 600; letter-spacing: 8px; color: var(--hazard); font-size: 28px; }
.winner-name {
  font-family: var(--f-display); font-size: clamp(52px, 9vw, 148px);
  letter-spacing: 4px; color: var(--ink); line-height: 1;
  text-shadow: 0 0 40px rgba(143,255,90,.35), 4px 4px 0 rgba(0,0,0,.6);
  animation: winnerIn .6s cubic-bezier(.2,1.3,.3,1) both;
  max-width: 92vw; word-break: break-word;
}
@keyframes winnerIn { from { transform: scale(.4); opacity: 0; filter: blur(8px); } to { transform: scale(1); opacity: 1; filter: blur(0); } }
.locked-stamp {
  font-family: var(--f-display); font-size: clamp(30px, 4vw, 56px);
  color: var(--alert); border: 6px solid var(--alert); padding: 8px 32px;
  letter-spacing: 10px; transform: rotate(-6deg);
  box-shadow: 0 0 30px rgba(209,71,31,.3);
  animation: stampSlam .45s .4s both cubic-bezier(.2,1.4,.3,1); opacity: 0;
}

/* --- Phase F : reveal du lot (caisse qui s'ouvre) --- */
.prize-crate {
  --accent: var(--hazard);
  width: min(70vw, 780px); position: relative; padding-top: 40px;
}
.crate-lid {
  height: 46px; margin: 0 auto; width: 86%;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 18px, #14140a 18px 36px);
  border: 4px solid #14140a; border-radius: 6px 6px 0 0;
  transform-origin: bottom center;
  animation: lidOpen .7s .2s both cubic-bezier(.3,1.2,.4,1);
}
@keyframes lidOpen { from { transform: rotateX(0) translateY(0); } to { transform: rotateX(-105deg) translateY(-14px); } }
.crate-body {
  border: 5px solid var(--accent); border-top: 0; background: rgba(0,0,0,.5);
  padding: 40px 30px 46px; border-radius: 0 0 8px 8px;
  box-shadow: 0 0 50px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.5);
  animation: crateGlow 2.2s ease-in-out infinite alternate;
}
@keyframes crateGlow { to { box-shadow: 0 0 70px var(--accent), inset 0 0 40px rgba(0,0,0,.5); } }
.prize-eyebrow { font-family: var(--f-mono); letter-spacing: 6px; color: var(--sand-dim); font-size: 18px; margin-bottom: 14px; }
.prize-label {
  font-family: var(--f-display); font-size: clamp(40px, 6.4vw, 104px);
  letter-spacing: 3px; color: var(--accent); line-height: 1;
  text-shadow: 0 0 40px currentColor, 3px 3px 0 rgba(0,0,0,.6);
  animation: prizeIn .6s .5s both cubic-bezier(.2,1.3,.3,1); opacity: 0;
}
@keyframes prizeIn { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Variante "rien gagné" : plus sobre */
.prize-crate.nothing .crate-body { animation: none; box-shadow: 0 0 30px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.5); }

/* --- Phase G : collecte --- */
.collect-name { font-family: var(--f-display); font-size: clamp(34px, 4.6vw, 72px); letter-spacing: 3px; color: var(--ink); }
.collect-prize { font-family: var(--f-display); font-size: clamp(40px, 6vw, 96px); letter-spacing: 3px; color: var(--hazard); text-shadow: 0 0 30px rgba(242,194,0,.4); }
.collect-cta {
  margin-top: 18px; font-family: var(--f-label); font-weight: 700; letter-spacing: 6px;
  font-size: clamp(22px, 2.6vw, 40px); color: var(--night);
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 22px, #d9ae00 22px 44px);
  padding: 16px 44px; border-radius: 4px;
  box-shadow: 0 0 30px rgba(242,194,0,.4);
  animation: ctaPulse 1.4s ease-in-out infinite;
}
@keyframes ctaPulse { 50% { transform: scale(1.04); } }

/* ---------------------------------------------------------------------------
   Rejouer les animations d'ENTRÉE à chaque activation de phase.
   (Sans ça, une animation déclarée sur un élément statique ne se joue qu'une
   fois au chargement de la page, et pas quand la phase réapparaît.)
   On neutralise l'animation au repos, on la (re)déclenche via .phase.active.
   --------------------------------------------------------------------------- */
.mc-stamp, .found-txt, .winner-name, .locked-stamp, .crate-lid, .prize-label { animation: none; }
.phase.active .mc-stamp    { animation: stampSlam .5s cubic-bezier(.2,1.4,.3,1) both; }
.phase.active .found-txt   { animation: foundPop .5s .9s both cubic-bezier(.2,1.5,.3,1); }
.phase.active .winner-name { animation: winnerIn .6s cubic-bezier(.2,1.3,.3,1) both; }
.phase.active .locked-stamp{ animation: stampSlam .45s .4s both cubic-bezier(.2,1.4,.3,1); }
.phase.active .crate-lid   { animation: lidOpen .7s .2s both cubic-bezier(.3,1.2,.4,1); }
.phase.active .prize-label { animation: prizeIn .6s .5s both cubic-bezier(.2,1.3,.3,1); }

/* --------------------------- Accessibilité ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .parachute { animation: none; top: 6vh; }
}