/* ════════════════════════════════════════════════
   PENALTY SHOOTERS (Tirs au But) — jeu DOM portrait
   Tout le jeu vit dans #ps-stage (container-type: size) : les unités du
   prototype (vw/vh) ont été converties en cqw/cqh, donc le jeu se
   dimensionne sur son conteneur — cadre bureau, gp-zone ou plein écran.
   ════════════════════════════════════════════════ */

.jeu-v-wrap { max-width: 480px; margin: 0 auto; }
#game-content { overflow: hidden; }

#ps-gp-zone {
  position: relative;
  padding: 0;
  overflow: hidden;
  height: min(72vh, 660px);
  min-height: 420px;
  background: #0A1710;
}

#ps-stage {
  position: absolute; inset: 0; overflow: hidden;
  container-type: size;
  background: #0A1710;
}
#ps-stage *, #ps-stage *::before, #ps-stage *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

@keyframes fbPop {
  0% { transform: translate(-50%, -50%) scale(0.35); opacity: 0; }
  55% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes markPop {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  45% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
}
@keyframes sway {
  0%, 100% { transform: translateX(-4%) rotate(-1.5deg); }
  50% { transform: translateX(4%) rotate(1.5deg); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5%); }
}
@keyframes kick {
  0% { transform: translate(-50%, -100%) rotate(0deg); }
  30% { transform: translate(-28%, -100%) rotate(7deg); }
  55% { transform: translate(-78%, -99%) rotate(-8deg); }
  100% { transform: translate(-50%, -100%) rotate(0deg); }
}
@keyframes kickLeg {
  0% { transform: rotate(4deg); }
  30% { transform: rotate(42deg); }
  55% { transform: rotate(-55deg); }
  80% { transform: rotate(-18deg); }
  100% { transform: rotate(4deg); }
}
@keyframes confFall {
  0% { transform: translateY(-8cqh) rotate(0deg); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(108cqh) rotate(560deg); opacity: 0; }
}
@keyframes riseFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes hintRise {
  0% { opacity: 0; transform: translateX(-50%) translateY(0) rotate(-45deg); }
  30% { opacity: 0.85; }
  70% { opacity: 0.6; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-44px) rotate(-45deg); }
}
@keyframes ringPulse {
  0% { transform: translate(-50%, -50%) scale(0.55); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
@keyframes netHit {
  0% { transform: scaleY(1) scaleX(1); }
  30% { transform: scaleY(1.05) scaleX(1.025); }
  60% { transform: scaleY(0.985) scaleX(0.995); }
  100% { transform: scaleY(1) scaleX(1); }
}
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(1px); }
}
@keyframes crowdShimmer {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

.tab-root {
  height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: #0A1710; color: #F4F8F2; font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  user-select: none; -webkit-user-select: none;
}

a { color: #7FA6E8; }
a:hover { color: #A9C4F2; }

/* ===== Tableau de score ===== */
.tab-header { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.2cqh, 10px); padding: max(clamp(10px, 2cqh, 20px), env(safe-area-inset-top)) 16px 0; }
.tab-header-label { font-size: 11px; font-weight: 700; letter-spacing: 0.34em; color: rgba(244, 248, 242, 0.5); }
.tab-score-row { display: flex; align-items: center; gap: clamp(10px, 2.6cqw, 18px); }
.tab-score-you { font-size: clamp(11px, 2cqw, 14px); font-weight: 800; letter-spacing: 0.18em; color: #F2C64B; }
.tab-score-num { font-size: clamp(28px, 6cqw, 42px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.tab-score-dash { font-size: clamp(18px, 4cqw, 26px); font-weight: 600; line-height: 1; color: rgba(244, 248, 242, 0.4); }
.tab-score-ai { font-size: clamp(11px, 2cqw, 14px); font-weight: 800; letter-spacing: 0.18em; color: #7FA6E8; }
.tab-dots-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3cqw, 20px); flex-wrap: wrap; }
.tab-dots-group { display: flex; align-items: center; gap: 5px; }
.tab-dot { width: clamp(8px, 1.9cqw, 10px); height: clamp(8px, 1.9cqw, 10px); border-radius: 50%; display: block; transition: background 0.3s, border-color 0.3s; border-width: 1.5px; border-style: solid; }
.tab-round-label { font-size: clamp(10px, 2cqw, 12px); font-weight: 700; letter-spacing: 0.12em; color: rgba(244, 248, 242, 0.75); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }

/* ===== Indicateur de phase ===== */
.tab-phase-wrap { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: clamp(8px, 1.6cqh, 16px) 16px clamp(8px, 1.6cqh, 14px); }
.tab-phase-pill { border: 1.5px solid var(--phase-bd, rgba(255,255,255,0.3)); color: var(--phase-color, #fff); background: rgba(9, 20, 14, 0.6); padding: clamp(8px, 1.3cqh, 12px) clamp(18px, 4cqw, 28px); border-radius: 999px; font-size: clamp(14px, 3cqw, 19px); font-weight: 800; font-style: italic; letter-spacing: 0.1em; transition: color 0.3s, border-color 0.3s; }
.tab-phase-sub { font-size: clamp(11px, 2.4cqw, 13px); font-weight: 500; letter-spacing: 0.02em; color: rgba(244, 248, 242, 0.6); min-height: 1.2em; text-align: center; }

/* ===== Scène ===== */
.tab-scene { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; min-height: 0; overflow: hidden; }

.tab-stands { position: absolute; top: 0; left: 0; right: 0; height: calc(clamp(6px, 1.5cqh, 16px) + min(92cqw, 600px, calc(111cqh - 245px)) * 0.58); overflow: hidden; background: linear-gradient(180deg, #020805 0%, #081810 20%, #0E2116 42%, #142A1B 66%, #1A331F 100%); }
.tab-stands-tint { position: absolute; inset: 0; background: radial-gradient(58% 130% at 18% 42%, rgba(255, 214, 180, 0.1) 0%, transparent 58%), radial-gradient(58% 130% at 82% 42%, rgba(255, 200, 170, 0.1) 0%, transparent 58%), radial-gradient(46% 120% at 50% 22%, rgba(240, 240, 240, 0.05) 0%, transparent 60%); }

.tab-tier-far { position: absolute; left: 0; right: 0; top: 9%; height: 25%; background-image: radial-gradient(ellipse 42% 26% at 50% 24%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 72%), radial-gradient(ellipse 58% 66% at 50% 42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 34%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.5) 74%, rgba(0, 0, 0, 0.72) 100%), linear-gradient(180deg, rgba(168, 52, 60, 0.22) 0%, rgba(120, 32, 40, 0.26) 100%); background-size: 6px 5px, 6px 5px, 100% 100%; }
.tab-tier-far-fade { position: absolute; left: 0; right: 0; top: 7%; height: 30%; background: linear-gradient(180deg, rgba(3, 8, 6, 0.52) 0%, rgba(5, 13, 9, 0.2) 66%, transparent 100%); pointer-events: none; }

.tab-crowd-item { position: absolute; transform: translate(-50%, -50%); border-radius: 42% 42% 32% 32%; pointer-events: none; }
.tab-crowd-far { filter: brightness(0.66) saturate(0.6) blur(0.5px); }
.tab-crowd-near { box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.25); }
.tab-crowd-near::after { content: ''; position: absolute; left: 50%; top: -58%; width: 26%; height: 58%; background: var(--flag-color, transparent); opacity: var(--flag-op, 0); transform: translateX(-50%) rotate(-15deg); border-radius: 1px; }

.tab-concourse { position: absolute; left: 0; right: 0; top: 34%; height: 7%; background: linear-gradient(180deg, rgba(2, 6, 4, 0.94) 0%, rgba(5, 13, 9, 0.72) 100%); border-top: 1px solid rgba(255, 255, 255, 0.16); border-bottom: 1px solid rgba(0, 0, 0, 0.55); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); overflow: hidden; }
.tab-concourse-noise { position: absolute; inset: 2px 0; background: repeating-linear-gradient(90deg, rgba(120, 170, 255, 0.16) 0px, rgba(120, 170, 255, 0.16) 26px, rgba(245, 200, 76, 0.14) 26px, rgba(245, 200, 76, 0.14) 52px); }
.tab-scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: clamp(4px, 1cqw, 8px); padding: 2px clamp(6px, 1.6cqw, 12px); background: #04090D; border: 1px solid rgba(130, 175, 255, 0.4); border-radius: 3px; box-shadow: 0 0 14px rgba(120, 170, 255, 0.4), 0 0 4px rgba(120, 170, 255, 0.5); white-space: nowrap; }
.tab-scoreboard span { font-family: 'Courier New', monospace; font-size: clamp(7px, 1.3cqw, 10px); font-weight: 700; }
.tab-scoreboard .you { color: #F2C64B; }
.tab-scoreboard .dash { color: rgba(255, 255, 255, 0.55); }
.tab-scoreboard .ai { color: #7FA6E8; }

.tab-tier-band-a { position: absolute; left: 0; right: 0; top: 41%; height: 15%; background-image: radial-gradient(ellipse 44% 28% at 50% 24%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 72%), radial-gradient(ellipse 60% 66% at 50% 42%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 34%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.52) 73%, rgba(0, 0, 0, 0.76) 100%), linear-gradient(180deg, rgba(172, 54, 62, 0.26) 0%, rgba(122, 32, 40, 0.3) 100%); background-size: 9px 6px, 9px 6px, 100% 100%; }
.tab-tier-band-b { position: absolute; left: 0; right: 0; top: 56%; height: 19%; background-image: radial-gradient(ellipse 46% 30% at 50% 24%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 72%), radial-gradient(ellipse 60% 66% at 50% 43%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 34%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.54) 73%, rgba(0, 0, 0, 0.78) 100%), linear-gradient(180deg, rgba(176, 56, 64, 0.3) 0%, rgba(124, 34, 42, 0.34) 100%); background-size: 12px 9px, 12px 9px, 100% 100%; }
.tab-tier-band-c { position: absolute; left: 0; right: 0; top: 75%; height: 25%; background-image: radial-gradient(ellipse 48% 32% at 50% 25%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 72%), radial-gradient(ellipse 60% 66% at 50% 44%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 34%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.56) 73%, rgba(0, 0, 0, 0.8) 100%), linear-gradient(180deg, rgba(182, 60, 68, 0.34) 0%, rgba(128, 36, 44, 0.4) 100%); background-size: 17px 13px, 17px 13px, 100% 100%; }

.tab-camera-flashes { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.92) 1px, transparent 1.6px); background-size: 47px 31px; background-position: 12px 7px; animation: crowdShimmer 3.1s ease-in-out infinite; mix-blend-mode: screen; }

.tab-banner-left { position: absolute; left: 10%; top: 42.5%; width: 22%; height: 4%; border-radius: 2px; background: linear-gradient(90deg, rgba(242, 198, 75, 0.62), rgba(242, 198, 75, 0.26)); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); }
.tab-banner-right { position: absolute; right: 11%; top: 42.5%; width: 20%; height: 4%; border-radius: 2px; background: linear-gradient(90deg, rgba(96, 146, 232, 0.3), rgba(96, 146, 232, 0.62)); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); }
.tab-parapet { position: absolute; left: 0; right: 0; top: 41%; height: 1.4%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(0, 0, 0, 0.32) 100%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }

.tab-ad-strip { position: absolute; left: 0; right: 0; bottom: calc(clamp(6px, 1.3cqh, 11px) + clamp(9px, 1.8cqh, 16px)); height: 6%; display: flex; box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.22); overflow: hidden; }
.tab-ad-panel { flex: 1 1 0; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-right: 1px solid rgba(0, 0, 0, 0.4); }
.tab-ad-panel span { font-family: 'Courier New', monospace; font-size: clamp(5px, 0.85cqw, 8px); font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; }

.tab-bowl-l { position: absolute; left: 0; top: 0; bottom: 0; width: 22%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, transparent 100%); pointer-events: none; }
.tab-bowl-r { position: absolute; right: 0; top: 0; bottom: 0; width: 22%; background: linear-gradient(-90deg, rgba(0, 0, 0, 0.55) 0%, transparent 100%); pointer-events: none; }

.tab-flood-wash { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 248, 220, 0.16) 0%, transparent 45%), linear-gradient(-105deg, rgba(255, 248, 220, 0.16) 0%, transparent 45%), radial-gradient(38% 120% at 10% -10%, rgba(255, 249, 224, 0.28) 0%, transparent 62%), radial-gradient(38% 120% at 90% -10%, rgba(255, 249, 224, 0.28) 0%, transparent 62%); }
.tab-flood-bar-l { position: absolute; left: 7%; top: 7.6%; width: 11%; height: 1.4%; border-radius: 2px; background: linear-gradient(90deg, transparent, #FFF6D8 40%, #FFF6D8 60%, transparent); box-shadow: 0 0 16px 5px rgba(255, 246, 216, 0.5), 0 6px 20px 4px rgba(255, 246, 216, 0.22); pointer-events: none; }
.tab-flood-bar-r { position: absolute; right: 7%; top: 7.6%; width: 11%; height: 1.4%; border-radius: 2px; background: linear-gradient(90deg, transparent, #FFF6D8 40%, #FFF6D8 60%, transparent); box-shadow: 0 0 16px 5px rgba(255, 246, 216, 0.5), 0 6px 20px 4px rgba(255, 246, 216, 0.22); pointer-events: none; }

.tab-roof { position: absolute; top: 0; left: 0; right: 0; height: 9%; background: linear-gradient(180deg, #020604 0%, #061009 100%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(130, 170, 220, 0.14); }
.tab-roof-truss { position: absolute; top: 9%; left: 0; right: 0; height: 12%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0px, rgba(0, 0, 0, 0.3) 3px, transparent 3px, transparent 38px), linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%); pointer-events: none; }

.tab-led-strip { position: absolute; bottom: clamp(6px, 1.3cqh, 11px); left: 0; right: 0; height: clamp(9px, 1.8cqh, 16px); background: repeating-linear-gradient(90deg, #0C1826 0px, #0C1826 60px, #14273F 60px, #14273F 120px, #1B3A5C 120px, #1B3A5C 150px); border-top: 1px solid rgba(255, 255, 255, 0.26); box-shadow: 0 0 22px rgba(130, 185, 255, 0.16); overflow: hidden; }
.tab-led-strip-shine { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 45%); }

.tab-service-aisle { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(6px, 1.3cqh, 11px); background: linear-gradient(180deg, #2A241D 0%, #1B160F 100%); border-top: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
.tab-service-aisle-pattern { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0px, rgba(255, 255, 255, 0.14) 10px, transparent 10px, transparent 34px); }

/* ===== Pelouse ===== */
.tab-pitch { position: absolute; top: calc(clamp(6px, 1.5cqh, 16px) + min(92cqw, 600px, calc(111cqh - 245px)) * 0.58); left: 0; right: 0; bottom: 0; border-top: 3px solid rgba(255, 255, 255, 0.8); background: radial-gradient(55% 26% at 50% 1%, rgba(168, 148, 92, 0.2) 0%, transparent 70%), radial-gradient(130% 90% at 50% 8%, rgba(255, 255, 240, 0.13) 0%, transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.06) 7%, rgba(2, 34, 14, 0.08) 7%, rgba(2, 34, 14, 0.08) 16%, rgba(255, 255, 255, 0.06) 16%, rgba(255, 255, 255, 0.06) 27%, rgba(2, 34, 14, 0.08) 27%, rgba(2, 34, 14, 0.08) 40%, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.06) 56%, rgba(2, 34, 14, 0.08) 56%, rgba(2, 34, 14, 0.08) 74%, rgba(255, 255, 255, 0.06) 74%, rgba(255, 255, 255, 0.06) 100%), linear-gradient(180deg, #2F7A45 0%, #2A6E3E 45%, #1E5530 100%); }
.tab-pitch-diagonal { position: absolute; inset: 0; background: linear-gradient(102deg, transparent 26%, rgba(255, 252, 230, 0.07) 34%, transparent 43%), linear-gradient(-102deg, transparent 26%, rgba(255, 252, 230, 0.07) 34%, transparent 43%); }
.tab-pitch-texture { position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1.4px); background-size: 5px 4px; }

.tab-ambient-vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(125% 105% at 50% 32%, transparent 58%, rgba(0, 0, 0, 0.36) 100%); }

/* ===== Aire de jeu ===== */
.tab-play-area { position: relative; z-index: 2; width: min(92cqw, 600px, calc(111cqh - 245px)); aspect-ratio: 100 / 78; margin-top: calc(clamp(6px, 1.5cqh, 16px) + min(92cqw, 600px, calc(111cqh - 245px)) * 0.0964); touch-action: none; }

.tab-box { position: absolute; left: -14%; right: -14%; top: 62%; height: 36%; transform-origin: 50% 0%; transform: perspective(300px) rotateX(38deg); border-left: 3px solid rgba(255, 255, 255, 0.55); border-right: 3px solid rgba(255, 255, 255, 0.55); border-bottom: 3px solid rgba(255, 255, 255, 0.55); pointer-events: none; }
.tab-circle { position: absolute; left: 34%; width: 32%; top: 82%; height: 16%; border: 3px solid rgba(255, 255, 255, 0.5); border-radius: 50%; clip-path: inset(52% 0 0 0); pointer-events: none; }
.tab-spot-grass { position: absolute; left: 50%; top: 87%; width: 22%; height: 7%; transform: translate(-50%, -50%); background: radial-gradient(50% 50% at 50% 50%, rgba(150, 128, 74, 0.3) 0%, transparent 70%); pointer-events: none; }
.tab-spot { position: absolute; left: 50%; top: 86.5%; width: clamp(6px, 1.6%, 10px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.85); pointer-events: none; }
.tab-goal-shadow { position: absolute; left: 2%; right: 2%; top: 60%; height: 9%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.3) 0%, transparent 70%); pointer-events: none; }

.tab-goal { position: absolute; left: 6%; top: 4%; width: 88%; height: 58%; z-index: 2; border: clamp(4px, 1.2cqw, 8px) solid #F7FAF7; border-bottom: none; border-radius: 6px 6px 0 0; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(0, 0, 0, 0.08); pointer-events: none; }
.tab-net { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 100%; }
.tab-net-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 16, 11, 0.55) 0%, rgba(8, 20, 14, 0.42) 30%, rgba(8, 20, 14, 0.6) 100%); }
.tab-net-mesh { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0px, rgba(255, 255, 255, 0.14) 1px, transparent 1px, transparent 9px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0px, rgba(255, 255, 255, 0.14) 1px, transparent 1px, transparent 9px); }
.tab-net-mesh-diag { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 9px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 9px); }
.tab-net-side-l { position: absolute; left: 0; top: 0; bottom: 0; width: 13%; transform: skewY(16deg); transform-origin: 0 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0px, rgba(255, 255, 255, 0.13) 1px, transparent 1px, transparent 5px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.11) 0px, rgba(255, 255, 255, 0.11) 1px, transparent 1px, transparent 7px), linear-gradient(90deg, rgba(4, 11, 7, 0.6) 0%, rgba(4, 11, 7, 0.08) 100%); }
.tab-net-side-r { position: absolute; right: 0; top: 0; bottom: 0; width: 13%; transform: skewY(-16deg); transform-origin: 100% 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0px, rgba(255, 255, 255, 0.13) 1px, transparent 1px, transparent 5px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.11) 0px, rgba(255, 255, 255, 0.11) 1px, transparent 1px, transparent 7px), linear-gradient(-90deg, rgba(4, 11, 7, 0.6) 0%, rgba(4, 11, 7, 0.08) 100%); }
.tab-net-top { position: absolute; left: 0; right: 0; top: 0; height: 18%; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 3.5px), linear-gradient(180deg, rgba(3, 9, 6, 0.55) 0%, transparent 100%); }
.tab-net-frame-inner { position: absolute; left: 9%; right: 9%; top: 16%; bottom: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-bottom: none; background: rgba(4, 12, 8, 0.22); }

/* ===== Figurants (photographes / stewards) ===== */
.tab-photog-l { position: absolute; left: 1.2%; top: 61.8%; width: 6.3%; height: 10.5%; transform: translate(-50%, -100%); pointer-events: none; z-index: 1; }
.tab-photog-l-shadow { position: absolute; left: 50%; bottom: -8%; width: 140%; height: 20%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.4) 0%, transparent 72%); }
.tab-photog-l-body { position: absolute; left: 8%; bottom: 0; width: 82%; height: 60%; border-radius: 46% 46% 28% 55%; background: linear-gradient(180deg, #3C434B 0%, #23272D 100%); }
.tab-photog-l-head { position: absolute; left: 27%; bottom: 54%; width: 38%; aspect-ratio: 1 / 1; border-radius: 50%; background: #C68F5E; }
.tab-photog-l-hood { position: absolute; left: 22%; bottom: 74%; width: 48%; height: 22%; border-radius: 50% 50% 8% 8%; background: #1B1E23; }
.tab-photog-l-camera { position: absolute; left: 58%; bottom: 32%; width: 52%; height: 17%; border-radius: 3px; background: linear-gradient(180deg, #DADCDE 0%, #A7ACB1 55%, #888E94 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.tab-photog-l-lens { position: absolute; left: 104%; bottom: 31%; width: 9%; height: 19%; border-radius: 2px; background: #24272B; }
.tab-photog-l-bag { position: absolute; left: 42%; bottom: 30%; width: 24%; height: 22%; border-radius: 3px; background: #1C1F23; }

.tab-photog-r { position: absolute; left: 99%; top: 61.8%; width: 6.3%; height: 10.5%; transform: translate(-50%, -100%) scaleX(-1); pointer-events: none; z-index: 1; }
.tab-photog-r-shadow { position: absolute; left: 50%; bottom: -8%; width: 140%; height: 20%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.4) 0%, transparent 72%); }
.tab-photog-r-body { position: absolute; left: 8%; bottom: 0; width: 82%; height: 60%; border-radius: 46% 46% 28% 55%; background: linear-gradient(180deg, #343B42 0%, #1D2024 100%); }
.tab-photog-r-head { position: absolute; left: 27%; bottom: 54%; width: 38%; aspect-ratio: 1 / 1; border-radius: 50%; background: #B97A4E; }
.tab-photog-r-hood { position: absolute; left: 22%; bottom: 74%; width: 48%; height: 22%; border-radius: 50% 50% 8% 8%; background: #16181C; }
.tab-photog-r-camera { position: absolute; left: 58%; bottom: 32%; width: 52%; height: 17%; border-radius: 3px; background: linear-gradient(180deg, #CDD0D2 0%, #999FA4 55%, #7A8086 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.tab-photog-r-lens { position: absolute; left: 104%; bottom: 31%; width: 9%; height: 19%; border-radius: 2px; background: #1E2125; }
.tab-photog-r-bag { position: absolute; left: 42%; bottom: 30%; width: 24%; height: 22%; border-radius: 3px; background: #17191D; }

.tab-photog-crouch-l { position: absolute; left: 6%; top: 61.8%; width: 5%; height: 7.5%; transform: translate(-50%, -100%); pointer-events: none; z-index: 1; }
.tab-photog-crouch-l-shadow { position: absolute; left: 50%; bottom: -7%; width: 150%; height: 22%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.38) 0%, transparent 72%); }
.tab-photog-crouch-l-body { position: absolute; left: 6%; bottom: 0; width: 88%; height: 66%; border-radius: 50% 44% 40% 46%; background: linear-gradient(180deg, #2E4B3A 0%, #1B2E23 100%); }
.tab-photog-crouch-l-head { position: absolute; left: 24%; bottom: 60%; width: 40%; aspect-ratio: 1 / 1; border-radius: 50%; background: #E8B98A; }
.tab-photog-crouch-l-hood { position: absolute; left: 19%; bottom: 82%; width: 50%; height: 20%; border-radius: 50% 50% 10% 10%; background: #22262B; }
.tab-photog-crouch-l-camera { position: absolute; left: 60%; bottom: 40%; width: 56%; height: 18%; border-radius: 3px; background: linear-gradient(180deg, #D5D8DA 0%, #9CA2A7 60%, #7E848A 100%); }
.tab-photog-crouch-l-lens { position: absolute; left: 112%; bottom: 39%; width: 10%; height: 20%; border-radius: 2px; background: #202327; }

.tab-steward-r { position: absolute; left: 95%; top: 61.8%; width: 4.2%; height: 9.5%; transform: translate(-50%, -100%); pointer-events: none; z-index: 1; }
.tab-steward-r-shadow { position: absolute; left: 50%; bottom: -6%; width: 150%; height: 18%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.36) 0%, transparent 72%); }
.tab-steward-r-leg-l { position: absolute; left: 26%; bottom: 0; width: 20%; height: 34%; background: #191B1F; border-radius: 999px; }
.tab-steward-r-leg-r { position: absolute; left: 54%; bottom: 0; width: 20%; height: 34%; background: #191B1F; border-radius: 999px; }
.tab-steward-r-vest { position: absolute; left: 14%; bottom: 30%; width: 72%; height: 46%; border-radius: 34% 34% 20% 20%; background: linear-gradient(180deg, #FFE24E 0%, #F2C614 100%); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.2); }
.tab-steward-r-stripe { position: absolute; left: 0; right: 0; top: 38%; height: 20%; background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 5px rgba(255, 255, 255, 0.6); }
.tab-steward-r-head { position: absolute; left: 31%; bottom: 74%; width: 38%; aspect-ratio: 1 / 1; border-radius: 50%; background: #C68F5E; }
.tab-steward-r-hair { position: absolute; left: 27%; bottom: 92%; width: 46%; height: 12%; border-radius: 50% 50% 12% 12%; background: #2E3238; }

/* ===== Gardien ===== */
.tab-keeper-shadow { position: absolute; left: 50%; top: 62.6%; width: 15%; height: 2.6%; transform: translate(-50%, -50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.32) 0%, transparent 70%); pointer-events: none; z-index: 5; }
.tab-keeper { position: absolute; width: 13%; height: 34%; z-index: 6; transform-origin: 50% 88%; pointer-events: none; }
.tab-keeper-inner { position: relative; width: 100%; height: 100%; }
.tab-keeper-hair { position: absolute; left: 50%; top: -2.5%; width: 35%; aspect-ratio: 1 / 1; transform: translateX(-50%); border-radius: 50%; background: #2E2119; }
.tab-keeper-head { position: absolute; left: 50%; top: 1.5%; width: 31%; aspect-ratio: 1 / 1; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(145deg, #F0C295 0%, #DEA873 100%); }
.tab-keeper-eye-l { position: absolute; left: 22%; top: 42%; width: 13%; aspect-ratio: 1 / 1; border-radius: 50%; background: #2A1E14; }
.tab-keeper-eye-r { position: absolute; right: 22%; top: 42%; width: 13%; aspect-ratio: 1 / 1; border-radius: 50%; background: #2A1E14; }
.tab-keeper-arm-l { position: absolute; left: -15%; top: 21%; width: 15%; height: 42%; border-radius: 999px; background: linear-gradient(180deg, var(--kit-light) 0%, var(--kit) 70%); transform-origin: 50% 10%; }
.tab-keeper-arm-r { position: absolute; right: -15%; top: 21%; width: 15%; height: 42%; border-radius: 999px; background: linear-gradient(180deg, var(--kit-light) 0%, var(--kit) 70%); transform-origin: 50% 10%; }
.tab-keeper-glove-l { position: absolute; left: 50%; bottom: -12%; width: 125%; aspect-ratio: 1 / 1; transform: translateX(-50%); border-radius: 46%; background: #F7F7F4; box-shadow: inset -1px -2px 3px rgba(0, 0, 0, 0.2); }
.tab-keeper-glove-r { position: absolute; left: 50%; bottom: -12%; width: 125%; aspect-ratio: 1 / 1; transform: translateX(-50%); border-radius: 46%; background: #F7F7F4; box-shadow: inset 1px -2px 3px rgba(0, 0, 0, 0.2); }
.tab-keeper-torso { position: absolute; left: 50%; top: 17.5%; width: 64%; height: 37%; transform: translateX(-50%); border-radius: 30% 30% 22% 22%; background: linear-gradient(180deg, var(--kit-light) 0%, var(--kit) 62%); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.15); }
.tab-keeper-torso-stripe { position: absolute; left: 0; right: 0; top: 36%; height: 15%; background: rgba(255, 255, 255, 0.24); }
.tab-keeper-num { position: absolute; left: 50%; top: 52%; transform: translateX(-50%); font-size: clamp(8px, 1.8cqw, 13px); font-weight: 900; font-style: italic; line-height: 1; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.tab-keeper-shorts { position: absolute; left: 50%; top: 51.5%; width: 48%; height: 13%; transform: translateX(-50%); border-radius: 5px; background: linear-gradient(180deg, var(--shorts-light) 0%, var(--shorts) 80%); }
.tab-keeper-leg-l { position: absolute; left: 24%; top: 62%; width: 14%; height: 26%; border-radius: 999px; background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)), var(--kit); transform: rotate(9deg); }
.tab-keeper-leg-r { position: absolute; right: 24%; top: 62%; width: 14%; height: 26%; border-radius: 999px; background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)), var(--kit); transform: rotate(-9deg); }
.tab-keeper-shoe-l { position: absolute; left: 17%; bottom: 5%; width: 17%; height: 6.5%; border-radius: 60% 40% 40% 50%; background: #17171B; }
.tab-keeper-shoe-r { position: absolute; right: 17%; bottom: 5%; width: 17%; height: 6.5%; border-radius: 40% 60% 50% 40%; background: #17171B; }

/* ===== Tireur ===== */
.tab-shooter-shadow { position: absolute; left: 30%; top: 108%; width: 25%; height: 3.4%; transform: translate(-50%, -50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.38) 0%, transparent 70%); pointer-events: none; z-index: 5; }
.tab-shooter { position: absolute; left: 30%; top: 109%; width: 25%; height: 55%; z-index: 8; transform: translate(-50%, -100%); pointer-events: none; }
.tab-shooter-inner { position: relative; width: 100%; height: 100%; animation: bob 2.6s ease-in-out infinite; }
.tab-shooter-neck { position: absolute; left: 50%; top: 14%; width: 13%; height: 7%; transform: translateX(-50%); border-radius: 3px; background: #C9905E; }
.tab-shooter-head { position: absolute; left: 50%; top: -1%; width: 34%; aspect-ratio: 1 / 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 34%, #46331F 0%, #2B1F13 60%, #1D140C 100%); }
.tab-shooter-arm-l { position: absolute; left: 0%; top: 20%; width: 13%; height: 34%; border-radius: 999px; background: linear-gradient(180deg, var(--s-kit-light) 0%, var(--s-kit) 82%); transform: rotate(9deg); transform-origin: 50% 8%; }
.tab-shooter-arm-r { position: absolute; right: 0%; top: 20%; width: 13%; height: 34%; border-radius: 999px; background: linear-gradient(180deg, var(--s-kit-light) 0%, var(--s-kit) 82%); transform: rotate(-9deg); transform-origin: 50% 8%; }
.tab-shooter-hand-l { position: absolute; left: -3%; top: 51%; width: 10%; aspect-ratio: 1 / 1; border-radius: 50%; background: #D19A67; }
.tab-shooter-hand-r { position: absolute; right: -3%; top: 51%; width: 10%; aspect-ratio: 1 / 1; border-radius: 50%; background: #D19A67; }
.tab-shooter-torso { position: absolute; left: 50%; top: 18%; width: 60%; height: 37%; transform: translateX(-50%); border-radius: 26% 26% 18% 18%; background: linear-gradient(180deg, var(--s-kit-light) 0%, var(--s-kit) 74%); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.18); overflow: hidden; }
.tab-shooter-torso-shade { position: absolute; left: 0; right: 0; top: 0; height: 15%; background: rgba(0, 0, 0, 0.14); }
.tab-shooter-torso-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 8%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.09); }
.tab-shooter-num { position: absolute; left: 50%; top: 29%; transform: translateX(-50%); font-size: clamp(9px, 2.4cqw, 17px); font-weight: 900; font-style: italic; line-height: 1; color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.tab-shooter-shorts { position: absolute; left: 50%; top: 52%; width: 46%; height: 13%; transform: translateX(-50%); border-radius: 5px; background: linear-gradient(180deg, var(--s-shorts-light) 0%, var(--s-shorts) 88%); overflow: hidden; }
.tab-shooter-shorts-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 7%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.16); }
.tab-shooter-leg-l { position: absolute; left: 25%; top: 63%; width: 13%; height: 20%; background: linear-gradient(180deg, #D9A373 0%, #C68F5E 100%); border-radius: 999px; }
.tab-shooter-sock-l { position: absolute; left: 25%; top: 79%; width: 13%; height: 15%; border-radius: 999px 999px 45% 45%; background: linear-gradient(rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.26)), var(--s-kit); }
.tab-shooter-shoe-l { position: absolute; left: 23%; bottom: 0; width: 15%; height: 5.5%; border-radius: 45% 45% 55% 55%; background: linear-gradient(180deg, #26262C 0%, #131317 100%); }
.tab-shooter-leg-r-group { position: absolute; right: 24%; top: 62%; width: 14%; height: 38%; transform-origin: 50% 6%; }
.tab-shooter-leg-r { position: absolute; left: 4%; top: 0; width: 92%; height: 55%; background: linear-gradient(180deg, #D9A373 0%, #C68F5E 100%); border-radius: 999px; }
.tab-shooter-sock-r { position: absolute; left: 4%; top: 44%; width: 92%; height: 42%; border-radius: 999px 999px 45% 45%; background: linear-gradient(rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.26)), var(--s-kit); }
.tab-shooter-shoe-r { position: absolute; left: -6%; bottom: 0; width: 108%; height: 15%; border-radius: 45% 45% 55% 55%; background: linear-gradient(180deg, #26262C 0%, #131317 100%); }

/* ===== Ballon ===== */
.tab-ball-shadow { position: absolute; left: 50%; top: 89.8%; width: 11%; height: 2.6%; transform: translate(-50%, -50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.35) 0%, transparent 70%); transition: opacity 0.3s; pointer-events: none; }
.tab-ball { position: absolute; width: 9%; aspect-ratio: 1 / 1; z-index: 7; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #F4F6F2 40%, #CBD1C8 76%, #A8B0A6 100%); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.38), inset -2px -4px 7px rgba(0, 0, 0, 0.14); pointer-events: none; }
.tab-ball-pattern { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #39413E 0%, #39413E 12%, transparent 12.5%), radial-gradient(circle at 19% 64%, #39413E 0%, #39413E 8.5%, transparent 9%), radial-gradient(circle at 81% 64%, #39413E 0%, #39413E 8.5%, transparent 9%), radial-gradient(circle at 50% 94%, #39413E 0%, #39413E 8%, transparent 8.5%), radial-gradient(circle at 26% 16%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.85) 9%, transparent 10%); }

/* ===== Aides visuelles ===== */
.tab-hint { z-index: 8; }
.tab-hint-ring { position: absolute; left: 50%; top: 86.5%; width: clamp(44px, 13%, 74px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border: 2px solid rgba(242, 198, 75, 0.8); border-radius: 50%; animation: ringPulse 1.7s ease-out infinite; pointer-events: none; z-index: 8; }
.tab-hint-chevrons { position: absolute; left: 50%; top: 72%; width: 0; height: 0; pointer-events: none; z-index: 8; }
.tab-hint-chevron { position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-top: 3px solid rgba(242, 198, 75, 0.9); border-right: 3px solid rgba(242, 198, 75, 0.9); animation: hintRise 1.7s ease-out infinite; }
.tab-hint-chevron:nth-child(2) { animation-delay: 0.32s; }
.tab-hint-chevron:nth-child(3) { animation-delay: 0.64s; }

.tab-trace-dot { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 12px rgba(255, 224, 130, 0.55); pointer-events: none; z-index: 9; }
.tab-head-ring { position: absolute; width: 30px; height: 30px; transform: translate(-50%, -50%); border: 2.5px solid rgba(255, 255, 255, 0.95); border-radius: 50%; box-shadow: 0 0 16px rgba(255, 224, 130, 0.7), inset 0 0 8px rgba(255, 224, 130, 0.4); pointer-events: none; z-index: 9; }

.tab-aim-reach { position: absolute; transform: translate(-50%, -50%); border: 2px dashed rgba(127, 166, 232, 0.72); border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(127, 166, 232, 0.18) 0%, transparent 72%); box-shadow: 0 0 24px rgba(127, 166, 232, 0.3); pointer-events: none; z-index: 8; }
.tab-aim-reticle { position: absolute; width: 28px; height: 28px; transform: translate(-50%, -50%); pointer-events: none; z-index: 9; }
.tab-aim-ring { position: absolute; inset: 0; border: 2.5px solid rgba(127, 166, 232, 0.95); border-radius: 50%; box-shadow: 0 0 14px rgba(127, 166, 232, 0.6); }
.tab-aim-tick-top { position: absolute; left: 50%; top: -34%; width: 2px; height: 30%; transform: translateX(-50%); background: rgba(127, 166, 232, 0.85); }
.tab-aim-tick-bottom { position: absolute; left: 50%; bottom: -34%; width: 2px; height: 30%; transform: translateX(-50%); background: rgba(127, 166, 232, 0.85); }
.tab-aim-tick-left { position: absolute; top: 50%; left: -34%; height: 2px; width: 30%; transform: translateY(-50%); background: rgba(127, 166, 232, 0.85); }
.tab-aim-tick-right { position: absolute; top: 50%; right: -34%; height: 2px; width: 30%; transform: translateY(-50%); background: rgba(127, 166, 232, 0.85); }
.tab-aim-dot { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: #EAF1FF; }

.tab-tap-marker { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%); border: 3px solid rgba(127, 166, 232, 0.95); border-radius: 50%; box-shadow: 0 0 18px rgba(127, 166, 232, 0.6); pointer-events: none; z-index: 9; }

.tab-feedback { position: absolute; left: 50%; top: 30%; z-index: 20; transform: translate(-50%, -50%); text-align: center; pointer-events: none; width: 100%; }
.tab-feedback-text { font-size: clamp(38px, 11cqw, 68px); font-weight: 900; font-style: italic; letter-spacing: 0.04em; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 0 38px var(--fb-glow, transparent); color: var(--fb-color, #fff); }
.tab-feedback-sub { margin-top: 6px; font-size: clamp(11px, 2.6cqw, 16px); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }

/* ===== Écran de fin ===== */
.tab-over { position: absolute; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(7, 17, 12, 0.72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); overflow: hidden; }
.tab-over.tab-over-visible { display: flex; animation: riseFade 0.35s ease-out both; }
.tab-confetti { position: absolute; top: -6%; width: 9px; height: 15px; border-radius: 2px; z-index: 1; }
.tab-over-card { position: relative; z-index: 2; background: linear-gradient(180deg, #142A1D 0%, #0F2117 100%); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; padding: clamp(26px, 5cqh, 44px) clamp(28px, 7cqw, 58px); text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); max-width: 92cqw; }
.tab-over-meta { font-size: 11px; font-weight: 700; letter-spacing: 0.28em; color: rgba(244, 248, 242, 0.5); }
.tab-over-title { margin-top: 10px; font-size: clamp(40px, 9cqw, 66px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: 0.02em; color: var(--over-color, #fff); text-shadow: 0 0 44px var(--over-glow, transparent); }
.tab-over-score-row { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.tab-over-you { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: #F2C64B; }
.tab-over-num { font-size: clamp(26px, 5cqw, 36px); font-weight: 900; line-height: 1; }
.tab-over-dash { font-size: 18px; color: rgba(244, 248, 242, 0.4); }
.tab-over-ai { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: #7FA6E8; }
.tab-over-sub { margin-top: 10px; font-size: clamp(13px, 2.6cqw, 15px); font-weight: 500; color: rgba(244, 248, 242, 0.7); }
.tab-replay-btn { appearance: none; -webkit-appearance: none; margin: 26px auto 0; display: block; border: none; cursor: pointer; background: #F2C64B; color: #201A08; font-family: inherit; font-size: clamp(15px, 3cqw, 18px); font-weight: 800; letter-spacing: 0.14em; font-style: italic; padding: 15px 44px; border-radius: 999px; box-shadow: 0 8px 24px rgba(242, 198, 75, 0.3); transition: filter 0.15s, transform 0.1s; outline: none; }
.tab-replay-btn:hover { filter: brightness(1.08); }
.tab-replay-btn:active { transform: scale(0.96); }

/* ════════════════════════════════════════════════
   BOUTON QUITTER ✕ (créé par le JS mobile)
   Visible en portrait ET en paysage (bloc mobile combiné).
   ════════════════════════════════════════════════ */
.jvps-exit-mob {
  display: none;
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 300;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(9, 20, 14, .72); /* opaque, sans backdrop-filter (perf en jeu) */
  border: 1.5px solid rgba(255, 255, 255, .25);
  color: rgba(244, 248, 242, .9);
  font-size: 17px; line-height: 1; font-weight: 700;
  font-family: 'Archivo', Arial, sans-serif;
  align-items: center; justify-content: center; padding: 0;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.jvps-exit-mob:active { transform: scale(.94); }

/* ════════════════════════════════════════════════
   DESKTOP GOLDEN HOUR (≥ 641px, body.jvps-gh posé par le JS)
   ════════════════════════════════════════════════ */
@media (min-width: 641px) {
  body.jvps-gh #topbar { display: none !important; }
  body.jvps-gh .jeu-v-wrap { display: none !important; }

  #jvps-gh {
    position: fixed; inset: 0; z-index: 200;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #16141f;
  }
  .jvps-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(245, 200, 76, .16) 0%, transparent 55%),
      linear-gradient(180deg, #081810 0%, #0E2116 34%, #142A1B 62%, #1E5530 100%);
  }

  #jvps-header {
    position: absolute; top: 22px; left: 30px; right: 30px; z-index: 8;
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid rgba(20,20,40,.07); border-radius: 16px;
    padding: 12px 20px; box-shadow: 0 10px 30px rgba(20,20,40,.18);
  }
  .jvps-logo-box {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, #F5C84C, #E0AF35);
    display: flex; align-items: center; justify-content: center;
    color: #201A08; font: 800 12px 'Space Grotesk', sans-serif;
    box-shadow: 0 3px 8px rgba(224,175,53,.35); flex-shrink: 0;
  }
  .jvps-btn-gold {
    background: linear-gradient(135deg, #F5C84C, #E0AF35); color: #201A08;
    border: none; border-radius: 10px; padding: 9px 16px;
    font: 700 13.5px 'Space Grotesk', sans-serif; cursor: pointer;
    box-shadow: 0 4px 12px rgba(224,175,53,.32); transition: filter .15s;
  }
  .jvps-btn-gold:hover { filter: brightness(1.06); }
  .jvps-float-btn {
    display: flex; align-items: center; gap: 7px;
    background: rgba(9, 20, 14, .66);
    color: #F4F8F2; border: 1px solid rgba(255,255,255,.22); border-radius: 11px;
    padding: 10px 16px; font: 700 13px 'Space Grotesk', sans-serif; cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,.3); transition: filter .15s;
  }
  .jvps-float-btn:hover { filter: brightness(1.2); }

  .jvps-screen {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: scale(1.02);
    transition: opacity .45s ease, transform .45s ease;
  }
  .jvps-screen.jvps-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

  /* Cadre de jeu : colonne portrait (jeu vertical) */
  .jvps-game-frame {
    position: relative;
    height: min(calc(100vh - 136px), 780px);
    aspect-ratio: 10 / 16; flex: none;
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 34px 70px rgba(0,0,0,.5), 0 0 44px rgba(245,200,76,.18), 0 0 0 5px rgba(255,255,255,.12);
  }
}

/* ════════════════════════════════════════════════
   MOBILE — plein écran (portrait ≤640px OU téléphone en paysage)
   ════════════════════════════════════════════════ */
@media (max-width: 640px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  html, body { overscroll-behavior: none; }
  body { overflow: hidden !important; }
  /* Masquer le chrome de page : en paysage (>640px) les règles mobiles de
     common.css ne s'appliquent plus, le bloc SEO repasserait au-dessus du jeu. */
  #topbar,
  .similar-games,
  .game-content,
  footer,
  .bgw,
  #stt-btn { display: none !important; }
  .jeu-v-wrap { max-width: none; padding: 0 !important; }
  #game-content { overflow: visible; padding: 0 !important; }
  .ct.pw { padding: 0 !important; }
  .app { background: none !important; }

  /* Zone de jeu fixée plein écran (transform:none : l'anim .au retient un
     transform qui casserait le fixed) */
  #ps-gp-zone {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50 !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
  }

  /* Bouton quitter : visible aussi en portrait (pas seulement en paysage) */
  .jvps-exit-mob { display: flex !important; }

  /* Dégager le ✕ : le libellé/score du header restent centrés, rien à décaler,
     mais on réserve l'encoche gauche/droite */
  .tab-header { padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

/* ════════════════════════════════════════════════
   MOBILE PAYSAGE — colonne portrait centrée (pattern Doodle Jump)
   Le jeu est vertical par design : on le garde en colonne au centre,
   fond stade sombre sur les côtés.
   ════════════════════════════════════════════════ */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  #ps-stage {
    inset: auto !important;
    top: 0 !important; bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: auto !important;
    height: 100% !important;
    aspect-ratio: 10 / 16;
    border-left: 1px solid rgba(255,255,255,.08);
    border-right: 1px solid rgba(255,255,255,.08);
  }
}