/**
 * SF GAME — scènes navigables « point & click » (cale de vaisseau, baie du marchand).
 * Dépend de design-tokens.css + sf-theme.css. Scopé body.sf-theme.
 *
 * Principe : une image de décor (.sf-scene-img) + des zones cliquables (.sf-hotspot)
 * positionnées en % via variables CSS (--hx/--hy/--hw/--hh) → la scène reste alignée
 * à toutes les tailles d'écran. Les popovers (.sf-popover) proposent les choix
 * multiples (table tactique → Team Builder / ROI ; IA de bord → Observatoires).
 */

/* ====================== Scène ====================== */
body.sf-theme:has(.sf-game-main) {
  overflow-y: hidden;
}

body.sf-theme .sf-game-main {
  box-sizing: border-box;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem 0.5rem;
  position: relative;
  z-index: 1;
  container-type: inline-size;
  --sf-bandeau-h: 70px;
  --sf-scene-max-h: calc(100dvh - var(--sf-bandeau-h) - 0.5rem);
}

body.sf-theme .sf-scene-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

body.sf-theme .sf-scene {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 3 / 2;
  /* Tient dans la fenêtre (bandeau → bas) sans scroll vertical ; ratio 3:2 conservé. */
  width: min(100cqw, calc(var(--sf-scene-max-h) * 3 / 2));
  height: min(var(--sf-scene-max-h), calc(100cqw * 2 / 3));
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 32px rgba(53, 224, 255, 0.08);
  overflow: hidden;
  background: var(--bg-base);
}

/*
 * Variante cargo bay (desktop) : le bas de l'image est rogné — seuls les 62 %
 * supérieurs sont visibles (cadre ≈ 2.42:1, plus large qu'un 16:9, donc la
 * largeur occupe tout l'écran). La stage conserve les proportions pleines de
 * l'image (hauteur 100/62 ≈ 161.3 % du cadre), donc les polygones, étiquettes
 * et origines de zoom — tous exprimés en % de l'image complète — restent
 * alignés sans recalcul ; le bas déborde et est masqué.
 */
body.sf-theme .sf-scene--crop-b3 {
  aspect-ratio: 150 / 62;
  width: min(100cqw, calc(var(--sf-scene-max-h) * 150 / 62));
  height: min(var(--sf-scene-max-h), calc(100cqw * 62 / 150));
}
body.sf-theme .sf-scene--crop-b3 .sf-scene-stage {
  bottom: auto;
  height: 161.2903%;
  /* Fenêtre de cadrage descendue de 44 px (sur l'image native 1024 px de haut,
     soit 4.297 % image = 6.93 % du cadre) : on coupe un peu plus le haut et on
     révèle d'autant le bas. Zone visible ≈ [4.3 %, 66.3 %] de l'image. */
  top: -6.93%;
}

/*
 * Merchant bay (2375×2258) : même logique que crop-b3 (index).
 * Desktop : cadre max sous bandeau, bas rogné si l'image dépasse.
 * Mobile : hauteur plein écran, largeur = ratio natif → swipe horizontal.
 */
body.sf-theme:has(.sf-scene--crop-mb) .sf-game-main {
  max-width: none;
  padding: 0;
  --sf-scene-max-h: calc(100dvh - var(--sf-bandeau-h));
}

body.sf-theme .sf-scene--crop-mb {
  aspect-ratio: 2375 / 2258;
  width: min(100cqw, calc(var(--sf-scene-max-h) * 2375 / 2258));
  height: min(var(--sf-scene-max-h), calc(100cqw * 2258 / 2375));
  max-width: none;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

@supports not (width: 1cqw) {
  body.sf-theme .sf-scene {
    width: min(100%, calc(var(--sf-scene-max-h) * 3 / 2));
    height: min(var(--sf-scene-max-h), calc(100% * 2 / 3));
  }
  body.sf-theme .sf-scene--crop-b3 {
    width: min(100%, calc(var(--sf-scene-max-h) * 150 / 62));
    height: min(var(--sf-scene-max-h), calc(100% * 62 / 150));
  }
  body.sf-theme .sf-scene--crop-mb {
    width: min(100%, calc(var(--sf-scene-max-h) * 2375 / 2258));
    height: min(var(--sf-scene-max-h), calc(100% * 2258 / 2375));
  }
}

/* Desktop : cadre rogné responsive — il prend la plus grande taille possible
   tout en tenant ENTIÈREMENT dans la fenêtre (largeur ET hauteur sous bandeau),
   ratio conservé, scène centrée. */
@media (min-width: 761px) {
  body.sf-theme:has(.sf-scene--crop-b3) .sf-game-main {
    max-width: none;
    padding: 0;
  }
  body.sf-theme .sf-scene--crop-b3 {
    height: min(calc(100dvh - var(--sf-bandeau-h, 70px)), calc(100vw * 62 / 150));
    width: min(100vw, calc((100dvh - var(--sf-bandeau-h, 70px)) * 150 / 62));
    max-width: none;
    margin: 0 auto;
  }
  body.sf-theme:has(.sf-scene--crop-mb) .sf-game-main {
    max-width: none;
    padding: 0;
  }
  body.sf-theme:has(.sf-scene--crop-mb) .sf-scene-pan-track {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    overflow: visible;
  }
  body.sf-theme .sf-scene--crop-mb {
    width: 100vw;
    height: min(calc(100dvh - var(--sf-bandeau-h, 70px)), calc(100vw * 2258 / 2375));
    max-width: none;
    margin: 0;
  }
}

/* Couche animée (zoom caméra + micro-FX) */
body.sf-theme .sf-scene-stage {
  position: absolute;
  inset: 0;
  transform-origin: 12.5% 41%;
  will-change: transform;
}

body.sf-theme .sf-zone-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  --glow-x: 50%;
  --glow-y: 50%;
  background:
    radial-gradient(ellipse 38% 55% at var(--glow-x) var(--glow-y), rgba(53, 224, 255, 0.5) 0%, transparent 68%),
    radial-gradient(ellipse 22% 35% at var(--glow-x) var(--glow-y), rgba(122, 209, 255, 0.35) 0%, transparent 72%);
}

/* Couche FX visible (micro-animations au clic) */
body.sf-theme .sf-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}

body.sf-theme .sf-fx-portal {
  position: absolute;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 50%);
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  pointer-events: none;
}

body.sf-theme .sf-hotspot--fx-active {
  background: rgba(53, 224, 255, 0.28) !important;
  filter: brightness(1.35);
  box-shadow: inset 0 0 40px rgba(53, 224, 255, 0.45);
}

body.sf-theme .sf-transition-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  background: #03060d;
  transition: opacity 0s linear;
}

body.sf-theme .sf-transition-overlay.sf-transition-overlay--fade {
  opacity: 1;
  transition: opacity calc(var(--sf-fade-dur, 220ms)) ease-in;
}

body.sf-theme.sf-transition-active .sf-scene {
  pointer-events: none;
}

/* ---------- Zoom caméra (phase 2) ---------- */
body.sf-theme .sf-scene-stage {
  transition: transform 0s linear;
  will-change: transform;
}

body.sf-theme .sf-scene-stage.sf-scene-stage--zoom {
  transition: transform var(--sf-zoom-dur, 720ms) var(--sf-zoom-ease, cubic-bezier(0.65, 0, 0.35, 1));
  transform: scale(var(--sf-zoom-scale, 5));
}

/* ---------- Micro-animations VISIBLES sur la scène (phase 1) ---------- */

/* Porte : anneau qui se désaxe + flash sur toute la scène */
@keyframes sf-fx-door-ring {
  0% { transform: rotate(0deg) scale(0.85); opacity: 0.3; border-color: rgba(53, 224, 255, 0.4); }
  35% { transform: rotate(5deg) scale(1.05); opacity: 1; border-color: rgba(122, 230, 255, 1); box-shadow: 0 0 24px rgba(53, 224, 255, 0.9); }
  62% { transform: rotate(-2deg) scale(0.98); opacity: 0.85; }
  100% { transform: rotate(0deg) scale(1); opacity: 0.5; }
}
@keyframes sf-fx-door-flash {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 0.95; transform: scale(1.2); }
  70% { opacity: 0.4; transform: scale(1.5); }
}
@keyframes sf-stage-door-bright {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.35) saturate(1.15); }
  55% { filter: brightness(1.15); }
}
body.sf-theme .sf-fx-portal--door .sf-fx-portal__ring {
  position: absolute;
  inset: 12%;
  border: 3px solid rgba(53, 224, 255, 0.85);
  border-radius: 4px;
  box-shadow: inset 0 0 20px rgba(53, 224, 255, 0.5);
  animation: sf-fx-door-ring 380ms cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}
body.sf-theme .sf-fx-portal--door .sf-fx-portal__flash {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 224, 255, 0.55) 0%, transparent 70%);
  animation: sf-fx-door-flash 380ms ease-out forwards;
}
body.sf-theme .sf-scene-stage--micro-door-flash {
  animation: sf-stage-door-bright 380ms ease forwards;
}

/* Armoire : double pulse lumineux */
@keyframes sf-fx-cabinet-pulse {
  0% { transform: scale(0.4); opacity: 0; }
  45% { transform: scale(1.15); opacity: 0.75; }
  100% { transform: scale(1.45); opacity: 0; }
}
body.sf-theme .sf-fx-portal--cabinet .sf-fx-portal__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 224, 255, 0.65) 0%, rgba(53, 224, 255, 0.15) 45%, transparent 70%);
  animation: sf-fx-cabinet-pulse 340ms ease-in-out forwards;
}
body.sf-theme .sf-fx-portal--cabinet .sf-fx-portal__pulse--delayed {
  animation-delay: 90ms;
  animation-duration: 400ms;
}

/* Console : glitch sur toute la scène + scanlines locales */
@keyframes sf-stage-glitch {
  0%, 100% { transform: translate(0, 0); filter: none; }
  12% { transform: translate(-5px, 1px); filter: hue-rotate(25deg) brightness(1.2); }
  28% { transform: translate(4px, -1px); filter: hue-rotate(-15deg) brightness(1.35); }
  44% { transform: translate(-3px, 0); filter: brightness(1.25); }
  60% { transform: translate(3px, 1px); filter: hue-rotate(10deg); }
  76% { transform: translate(-2px, 0); filter: none; }
}
@keyframes sf-fx-scan-flicker {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 0.9; }
  50% { opacity: 0.35; }
}
@keyframes sf-fx-glitch-bar {
  0%, 100% { transform: translateX(0); opacity: 0; }
  25% { transform: translateX(-8px); opacity: 0.85; }
  50% { transform: translateX(6px); opacity: 0.7; }
  75% { transform: translateX(-4px); opacity: 0.5; }
}
body.sf-theme .sf-scene-stage--micro-glitch {
  animation: sf-stage-glitch 260ms steps(2) forwards;
}
body.sf-theme .sf-fx-portal--console .sf-fx-portal__scan {
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(53, 224, 255, 0.18) 3px 4px
  );
  mix-blend-mode: screen;
  animation: sf-fx-scan-flicker 240ms steps(3) forwards;
}
body.sf-theme .sf-fx-portal--console .sf-fx-portal__glitch-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  height: 8px;
  background: rgba(122, 230, 255, 0.75);
  box-shadow: 0 0 12px rgba(53, 224, 255, 0.9);
  animation: sf-fx-glitch-bar 240ms linear forwards;
}

/* Hologramme : particules + onde */
@keyframes sf-fx-holo-particle {
  0% {
    transform: translate(var(--px, 0), var(--py, 0)) scale(1);
    opacity: 0.95;
  }
  100% {
    transform: translate(calc(var(--px, 0) * 0.05), calc(var(--py, 0) * 0.05)) scale(0);
    opacity: 0;
  }
}
@keyframes sf-fx-holo-wave {
  0% { transform: scale(0.15); opacity: 0.9; box-shadow: 0 0 16px 6px rgba(53, 224, 255, 0.8); }
  100% { transform: scale(2.8); opacity: 0; box-shadow: 0 0 48px 20px rgba(53, 224, 255, 0); }
}
body.sf-theme .sf-fx-portal--hologram .sf-fx-portal__particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #7ad1ff;
  box-shadow: 0 0 12px rgba(53, 224, 255, 1);
  transform: translate(var(--px, 0), var(--py, 0));
  animation: sf-fx-holo-particle 300ms ease-in forwards;
}
body.sf-theme .sf-fx-portal--hologram .sf-fx-portal__holo-wave {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  border: 2px solid rgba(122, 230, 255, 0.85);
  animation: sf-fx-holo-wave 220ms ease-out 260ms forwards;
}

/* Personnage : aura + sursaut */
@keyframes sf-fx-char-lift {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  45% { transform: translateY(-14px); opacity: 0.95; }
  70% { transform: translateY(-4px); opacity: 0.7; }
}
@keyframes sf-fx-char-aura {
  0% { transform: scale(0.7); opacity: 0; }
  50% { transform: scale(1.1); opacity: 0.65; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes sf-stage-char-nudge {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
}
body.sf-theme .sf-fx-portal--character .sf-fx-portal__lift {
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 30%, rgba(180, 230, 255, 0.9), transparent 70%);
  animation: sf-fx-char-lift 320ms cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
}
body.sf-theme .sf-fx-portal--character .sf-fx-portal__aura {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 224, 255, 0.35) 0%, transparent 65%);
  animation: sf-fx-char-aura 320ms ease-out forwards;
}
body.sf-theme .sf-scene-stage--micro-character {
  animation: sf-stage-char-nudge 320ms cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  body.sf-theme .sf-scene-stage.sf-scene-stage--micro-glitch,
  body.sf-theme .sf-scene-stage.sf-scene-stage--micro-door-flash,
  body.sf-theme .sf-scene-stage.sf-scene-stage--micro-character,
  body.sf-theme .sf-scene-stage.sf-scene-stage--zoom {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Coins HUD du cadre de scène. */
body.sf-theme .sf-scene::before,
body.sf-theme .sf-scene::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 5;
  pointer-events: none;
}
body.sf-theme .sf-scene::before {
  top: 0;
  left: 0;
  border-top: 2px solid var(--accent-cyan);
  border-left: 2px solid var(--accent-cyan);
}
body.sf-theme .sf-scene::after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--accent-amber);
  border-right: 2px solid var(--accent-amber);
}

body.sf-theme .sf-scene-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/*
 * Merchant bay : calque hotspots calé sur l'image rendue (pas sur une stage surdimensionnée).
 * .sf-scene-media prend la taille exacte de l'img ; le cadre .sf-scene rogne le bas si besoin.
 */
body.sf-theme .sf-scene--crop-mb .sf-scene-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  inset: unset;
  right: auto;
  bottom: auto;
}

body.sf-theme .sf-scene--crop-mb .sf-scene-media {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}

body.sf-theme .sf-scene--crop-mb .sf-scene-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: unset;
  max-width: none;
}

body.sf-theme .sf-scene--crop-mb .sf-hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ====================== Hotspots (contours d'objets) ====================== */
/*
 * Chaque hotspot couvre toute la scène (inset: 0) et reçoit un polygone de contour
 * via --shape (coordonnées en % de la scène). clip-path restreint AUSSI la zone de
 * clic au polygone → le clic suit le contour de l'objet (porte, étagère, orbe…).
 * L'étiquette est un élément frère (.sf-hotspot-tag, data-tag-for) pour ne pas être
 * rognée par le clip-path.
 */
body.sf-theme .sf-hotspot {
  position: absolute;
  inset: 0;
  clip-path: var(--shape, none);
  display: block;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  z-index: 3;
  transition: background var(--dur-fast) ease;
}
body.sf-theme .sf-hotspot[hidden],
body.sf-theme .sf-hotspot-tag[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  clip-path: none !important;
}
/* Survol : le polygone entier s'illumine → l'objet est « surligné » à sa forme. */
body.sf-theme .sf-hotspot:hover,
body.sf-theme .sf-hotspot:focus-visible {
  background: rgba(53, 224, 255, 0.14);
  outline: none;
}
body.sf-theme .sf-hotspot:active {
  background: rgba(53, 224, 255, 0.22);
}

/* Calibrage : merchant-bay.html?sf-hotspot-debug=1 affiche les polygones en cyan. */
body.sf-theme.sf-hotspot-debug .sf-hotspot {
  background: rgba(53, 224, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(53, 224, 255, 0.65);
}

/* Étiquette de zone : frère du hotspot, positionnée en % scène (--tx/--ty). */
body.sf-theme .sf-hotspot-tag {
  position: absolute;
  left: var(--tx);
  top: var(--ty);
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-hi);
  background: rgba(3, 6, 13, 0.78);
  border: 1px solid var(--line-strong);
  padding: 0.28rem 0.6rem;
  white-space: nowrap;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
body.sf-theme .sf-hotspot-tag--stack {
  white-space: normal;
  text-align: center;
  line-height: 1.22;
  letter-spacing: 0.06em;
}
body.sf-theme .sf-hotspot-tag--soon {
  background: rgba(168, 28, 42, 0.94);
  color: rgba(255, 245, 245, 0.98);
  border-color: rgba(255, 110, 120, 0.82);
  letter-spacing: 0.12em;
  box-shadow: 0 0 12px rgba(200, 40, 55, 0.45);
}
body.sf-theme .sf-hotspot-tag--soon::before {
  content: "◇ ";
  color: rgba(255, 210, 210, 0.92);
}
body.sf-theme .sf-hotspot-tag::before {
  content: "◉ ";
  color: var(--accent-cyan);
}
body.sf-theme .sf-hotspot:hover + .sf-hotspot-tag,
body.sf-theme .sf-hotspot:focus-visible + .sf-hotspot-tag {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
}

/* — État verrouillé (IA de bord sans autorisation) — */
body.sf-theme .sf-hotspot--locked {
  cursor: not-allowed;
}
body.sf-theme .sf-hotspot--locked:hover,
body.sf-theme .sf-hotspot--locked:focus-visible {
  background: rgba(255, 92, 122, 0.12);
}
body.sf-theme .sf-hotspot--locked + .sf-hotspot-tag {
  color: var(--text-dim);
}
body.sf-theme .sf-hotspot--locked + .sf-hotspot-tag::before {
  content: "⬢ ";
  color: var(--accent-danger);
}
body.sf-theme .sf-hotspot--locked:hover + .sf-hotspot-tag,
body.sf-theme .sf-hotspot--locked:focus-visible + .sf-hotspot-tag {
  color: var(--accent-danger);
  border-color: var(--accent-danger);
  box-shadow: 0 0 14px rgba(255, 92, 122, 0.4);
}
/* Flash « accès refusé » (classe posée par JS). */
body.sf-theme .sf-hotspot--denied + .sf-hotspot-tag {
  color: var(--accent-danger);
  border-color: var(--accent-danger);
  box-shadow: 0 0 18px rgba(255, 92, 122, 0.55);
}

/* ====================== Popovers de choix ====================== */
/* Bug fix : display:flex écrasait l'attribut hidden → encarts visibles avant le clic. */
body.sf-theme .sf-popover[hidden] {
  display: none;
}
body.sf-theme .sf-popover {
  position: absolute;
  left: var(--px);
  top: var(--py);
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 200px;
  padding: 0.6rem;
  background: linear-gradient(180deg, rgba(19, 35, 59, 0.92), rgba(7, 14, 28, 0.97));
  border: 1px solid var(--accent-cyan);
  box-shadow: var(--glow-cyan), 0 18px 40px rgba(0, 0, 0, 0.65);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  z-index: 10;
}
body.sf-theme .sf-popover-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin: 0 0 0.15rem;
}
body.sf-theme .sf-popover a {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-hi);
  text-decoration: none;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, 0.35);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
body.sf-theme .sf-popover a:hover,
body.sf-theme .sf-popover a:focus-visible {
  color: var(--bg-void);
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

/* ====================== Accès direct (fallback accessible) ====================== */
body.sf-theme .sf-quick-access {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
body.sf-theme .sf-quick-access-label {
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
body.sf-theme .sf-quick-access a {
  color: var(--accent-cyan-soft);
  text-decoration: none;
  border-bottom: 1px dotted rgba(122, 209, 255, 0.4);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
body.sf-theme .sf-quick-access a:hover {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}

/* ====================== Animations (si motion OK) ====================== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sf-hotspot-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(53, 224, 255, 0); }
    50% { box-shadow: 0 0 14px rgba(53, 224, 255, 0.35); }
  }
  @keyframes sf-denied-shake {
    0%, 100% { transform: translate(-50%, -50%) translateX(0); }
    25% { transform: translate(-50%, -50%) translateX(-4px); }
    75% { transform: translate(-50%, -50%) translateX(4px); }
  }
  body.sf-theme .sf-hotspot-tag {
    animation: sf-hotspot-pulse 3.2s ease-in-out infinite;
  }
  body.sf-theme .sf-hotspot--locked + .sf-hotspot-tag {
    animation: none;
  }
  body.sf-theme .sf-hotspot--denied + .sf-hotspot-tag {
    animation: sf-denied-shake 0.3s ease 0s 2;
  }
  body.sf-theme .sf-scene {
    animation: sf-reveal var(--dur-reveal) ease both;
  }
  body.sf-theme .sf-popover {
    animation: sf-reveal var(--dur-med) ease both;
  }
}

/* ====================== Responsive ====================== */
@media (max-width: 760px) {
  body.sf-theme:has(.sf-game-main) {
    overflow-x: hidden;
  }

  body.sf-theme .sf-game-main {
    padding: 0;
    max-width: none;
    --sf-scene-max-h: calc(100dvh - var(--sf-bandeau-h));
  }

  /* Mobile : hauteur plein écran sous bandeau + panoramique horizontal */
  body.sf-theme .sf-scene-wrap {
    display: block;
    height: var(--sf-scene-max-h);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
  }
  body.sf-theme .sf-scene-wrap::-webkit-scrollbar {
    display: none;
  }

  body.sf-theme .sf-scene {
    width: calc(var(--sf-scene-max-h) * 3 / 2);
    height: var(--sf-scene-max-h);
    max-width: none;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }

  /* Mobile : pas de rognage — panoramique sur l'image complète. */
  body.sf-theme .sf-scene--crop-b3 {
    aspect-ratio: 3 / 2;
    width: calc(var(--sf-scene-max-h) * 3 / 2);
    height: var(--sf-scene-max-h);
  }
  body.sf-theme .sf-scene--crop-b3 .sf-scene-stage {
    top: 0;
    bottom: 0;
    height: auto;
  }

  body.sf-theme .sf-scene-pan-edge {
    display: block;
    position: fixed;
    top: var(--sf-bandeau-h, 56px);
    bottom: 0;
    width: 2rem;
    pointer-events: none;
    z-index: 12;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  body.sf-theme .sf-scene-pan-edge--left {
    left: 0;
    background: linear-gradient(to right, rgba(4, 10, 24, 0.72), transparent);
  }
  body.sf-theme .sf-scene-pan-edge--right {
    right: 0;
    background: linear-gradient(to left, rgba(4, 10, 24, 0.72), transparent);
  }
  body.sf-theme.sf-scene-pan-active:not(.sf-scene-at-start) .sf-scene-pan-edge--left {
    opacity: 1;
  }
  body.sf-theme.sf-scene-pan-active:not(.sf-scene-at-end) .sf-scene-pan-edge--right {
    opacity: 1;
  }

  body.sf-theme .sf-scene-pan-hint {
    display: block;
    position: fixed;
    left: 50%;
    bottom: 0.55rem;
    transform: translateX(-50%);
    z-index: 13;
    pointer-events: none;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(160, 220, 255, 0.82);
    background: rgba(3, 6, 13, 0.78);
    border: 1px solid rgba(120, 200, 255, 0.22);
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    opacity: 1;
    transition: opacity 0.35s ease;
  }
  body.sf-theme.sf-scene-pan-hint-hidden .sf-scene-pan-hint,
  body.sf-theme:not(.sf-scene-pan-active) .sf-scene-pan-hint,
  body.sf-theme.sf-scene-pan-nav-visible .sf-scene-pan-hint {
    opacity: 0;
    visibility: hidden;
  }

  /* Boutons ← → : bas de l'écran, centrés et rapprochés (index + merchant bay) */
  body.sf-theme .sf-scene-pan-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 8rem;
    z-index: 14;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.35rem;
    padding: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  body.sf-theme.sf-scene-pan-nav-visible .sf-scene-pan-nav {
    opacity: 1;
    visibility: visible;
  }
  body.sf-theme .sf-scene-pan-btn.menu-bouton {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    pointer-events: auto;
  }
  body.sf-theme .sf-scene-pan-btn.menu-bouton:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
  }
  body.sf-theme .sf-scene-pan-btn-icon {
    display: block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }
  body.sf-theme .sf-scene-pan-btn-icon--left {
    margin-right: 3px;
    border-right: 13px solid currentColor;
  }
  body.sf-theme .sf-scene-pan-btn-icon--right {
    margin-left: 3px;
    border-left: 13px solid currentColor;
  }

  body.sf-theme .sf-hotspot-tag {
    font-size: 0.74rem;
    padding: 0.24rem 0.48rem;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    max-width: 34vw;
  }
  body.sf-theme .sf-popover {
    min-width: 160px;
    padding: 0.45rem;
  }
  body.sf-theme .sf-popover a {
    font-size: 0.72rem;
    padding: 0.38rem 0.5rem;
  }
}

/*
 * Merchant bay mobile/touch : comme l'index (pleine hauteur + swipe horizontal).
 * Fenêtre source : x = 189 px, largeur 1855 px ; zoom ×1,5 (JS : MB_CROP_SRC_X, MB_MOBILE_ZOOM).
 * --sf-mb-track-w, --sf-mb-scene-w, --sf-mb-crop-x posés par sf-game.js.
 */
body.sf-mb-mobile-layout.sf-merchant-bay .sf-game-main {
  padding: 0;
  max-width: none;
}
body.sf-mb-mobile-layout.sf-merchant-bay .sf-scene-wrap {
  display: block;
  width: 100%;
  height: var(--sf-scene-max-h);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
}
body.sf-mb-mobile-layout.sf-merchant-bay .sf-scene-wrap::-webkit-scrollbar {
  display: none;
}
body.sf-mb-mobile-layout.sf-merchant-bay .sf-scene-pan-track {
  display: block;
  position: relative;
  width: var(--sf-mb-track-w);
  height: var(--sf-scene-max-h);
  overflow: hidden;
  flex-shrink: 0;
}
body.sf-mb-mobile-layout.sf-merchant-bay .sf-scene--crop-mb {
  box-sizing: border-box;
  display: block;
  width: var(--sf-mb-scene-w);
  height: var(--sf-mb-scene-h);
  aspect-ratio: unset;
  margin: 0;
  overflow: visible;
  transform: translateX(calc(-1 * var(--sf-mb-crop-x, 0px)));
}
body.sf-mb-mobile-layout.sf-merchant-bay .sf-scene--crop-mb .sf-scene-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}
body.sf-mb-mobile-layout.sf-merchant-bay .sf-scene--crop-mb .sf-scene-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body.sf-mb-mobile-layout.sf-merchant-bay .sf-scene--crop-mb .sf-scene-img {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  vertical-align: top;
}

body.sf-theme .sf-scene-pan-edge,
body.sf-theme .sf-scene-pan-hint {
  display: none;
}

body.sf-mb-mobile-layout.sf-merchant-bay .sf-scene-pan-edge,
body.sf-mb-mobile-layout.sf-merchant-bay .sf-scene-pan-hint {
  display: block;
}