/* =====================================================================
   Salle d'arcade
   Géométrie d'une borne (H = hauteur) :
     fronton 0 → 15 %, écran incliné de 12,2° (retrait 3 → 11 %),
     panneau de commande 52 → 55,5 % qui avance de 7 %,
     caisse 60 → 100 %. Les flancs reprennent ce profil.
   ===================================================================== */

.arcade {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: clip;
  --fp: clamp(28px, 9cqh, 90px);
  --H: min(calc(76cqh - var(--fp)), 600px);
  --W: calc(var(--H) * 0.4);
  --gap: calc(var(--W) * 0.55);
  background: var(--room-bg, #111);
}

.aisle {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  perspective: calc(var(--H) * 2.3);
  perspective-origin: 50% calc(100% - var(--fp) - var(--H) * 0.62);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.aisle::-webkit-scrollbar {
  display: none;
}
.aisle.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.aisle.is-dragging .cab {
  pointer-events: none;
}

.track {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--W) * 1.25);
  height: 100%;
  width: max-content;
  padding: 0 calc(50cqw - var(--W) / 2) var(--fp);
  transform-style: preserve-3d;
}

.cab-group {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
  transform-style: preserve-3d;
}

/* ---------------------------------------------------------------- décor */

.room-wall,
.room-floor {
  position: absolute;
  left: -90cqw;
  right: -90cqw;
  pointer-events: none;
}
.room-wall {
  bottom: var(--fp);
  height: 320cqh;
  transform-origin: 50% 100%;
  transform: translateZ(calc(var(--H) * -0.64));
  background: var(--wall-bg, #1a1a1f);
}
.room-wall::after {
  /* plinthe */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--H) * 0.05);
  background: var(--plinth, rgba(0, 0, 0, 0.4));
}
.room-floor {
  top: calc(100% - var(--fp));
  height: calc(var(--H) * 2.3);
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--H) * 1.66)) rotateX(-90deg);
  background: var(--floor-bg, #222);
}

.wall-sign {
  position: absolute;
  left: 50%;
  bottom: calc(var(--H) * 1.2);
  transform: translateX(-50%) translateZ(calc(var(--H) * -0.62));
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  pointer-events: none;
  font-size: calc(var(--H) * 0.1);
  line-height: 1;
}
.wall-sign b {
  font-weight: inherit;
}
.wall-sign span {
  font-size: 0.38em;
  margin-top: 0.35em;
}

/* ---------------------------------------------------------------- borne */

.cab {
  position: relative;
  display: block;
  flex: none;
  width: var(--W);
  height: var(--H);
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  scroll-snap-align: center;
  color: inherit;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  --j: calc(var(--H) * 0.07);
}
.cab > * {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
}
.cab.is-active {
  transform: translateZ(calc(var(--H) * 0.05));
}

.cab-side {
  top: 0;
  height: 100%;
  width: calc(var(--H) * 0.49);
  transform-origin: 0 0;
  transform: translateZ(var(--j)) rotateY(90deg);
  clip-path: polygon(14.29% 0, 78.57% 0, 100% 8%, 100% 100%, 14.29% 100%, 14.29% 60%, 0 58.5%, 0 55.5%, 20.41% 52%, 36.73% 15%, 14.29% 15%);
  background: var(--side-bg, #333);
}
.cab-side-r {
  left: 100%;
}
.cab-side::after {
  /* ombrage : plus sombre vers l'arrière */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.35));
}
.cab-side-l::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55));
}

.cab-top {
  top: 0;
  height: calc(var(--H) * 0.315);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background: var(--cab-dark, #111);
}

.cab-hood {
  top: calc(var(--H) * 0.15);
  height: calc(var(--H) * 0.11);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background: #050505;
}

.cab-marquee {
  top: 0;
  height: calc(var(--H) * 0.15);
  overflow: hidden;
  background: var(--mq-frame, #111);
  padding: calc(var(--H) * 0.012);
}
.mq-art {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  background: var(--mq-bg, var(--g-bg));
  color: var(--mq-ink, var(--g-ink));
  font-family: var(--mq-font, var(--ui-display));
  font-size: calc(var(--H) * 0.05);
  line-height: 1;
  text-align: center;
  overflow: hidden;
  filter: brightness(var(--mq-dim, 0.82));
  transition: filter 0.3s;
}
.cab.is-active .mq-art {
  filter: brightness(1.12);
}
.mq-title {
  position: relative;
  white-space: nowrap;
}
.mq-letter {
  color: var(--lc);
}
.mq-badge {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1em;
  background: var(--g-accent);
  color: var(--g-dark);
  font-size: 0.95em;
  clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%);
}
.mq-light {
  inset: 0;
  pointer-events: none;
}

.cab-screen {
  top: calc(var(--H) * 0.1414);
  height: calc(var(--H) * 0.3786);
  transform-origin: 50% 100%;
  transform: translateZ(calc(var(--H) * -0.03)) rotateX(12.2deg);
  background: var(--bezel-bg, #0c0c0c);
  padding: calc(var(--H) * 0.05) calc(var(--W) * 0.07) 0;
}
.cab-bezel {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  background: #000;
  border-radius: var(--crt-radius, 4px);
  overflow: hidden;
  box-shadow: 0 0 0 calc(var(--H) * 0.006) var(--bezel-ring, #222);
}
.cab-bezel canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: brightness(var(--scr-dim, 0.88)) saturate(var(--scr-sat, 1));
  transition: filter 0.3s;
}
.cab.is-active .cab-bezel canvas {
  filter: brightness(1.05) saturate(var(--scr-sat, 1));
}

.crt-glass,
.tv-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, var(--glare, 0.1)) 0%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(120% 110% at 50% 50%, transparent 58%, rgba(0, 0, 0, var(--vignette, 0.4)) 100%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, var(--scan, 0)) 0 1px, transparent 1px 3px);
}
.crt-off {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 80% at 40% 30%, #2a2d2a, #0b0c0b 70%);
}

.cab-panel {
  top: calc(var(--H) * 0.52);
  height: calc(var(--H) * 0.106);
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--H) * -0.03)) rotateX(70.7deg);
  transform-style: preserve-3d;
  background: var(--panel-bg, #222);
}
.stick {
  position: absolute;
  left: 26%;
  bottom: 48%;
  width: calc(var(--H) * 0.01);
  height: calc(var(--H) * 0.05);
  margin-left: calc(var(--H) * -0.005);
  background: linear-gradient(90deg, #555, #ddd 40%, #444);
  transform-origin: 50% 100%;
  transform: rotateX(-70.7deg);
  transition: transform 0.2s;
}
.cab.is-active .stick {
  animation: wiggle 2.2s ease-in-out infinite;
}
.stick-ball {
  position: absolute;
  left: 50%;
  top: calc(var(--H) * -0.024);
  width: calc(var(--H) * 0.034);
  height: calc(var(--H) * 0.034);
  margin-left: calc(var(--H) * -0.017);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), var(--ball, #e8262a);
}
.pbtn {
  position: absolute;
  top: 30%;
  width: calc(var(--H) * 0.034);
  height: calc(var(--H) * 0.034);
  border-radius: 50%;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(0, 0, 0, 0.5);
}
.pbtn.p1 {
  left: 52%;
  background: var(--g-accent);
}
.pbtn.p2 {
  left: 65%;
  top: 24%;
  background: var(--g-accent2);
}
.pbtn.p3 {
  left: 78%;
  top: 20%;
  background: #f4f4f4;
}

.cab-panel-front {
  top: calc(var(--H) * 0.555);
  height: calc(var(--H) * 0.03);
  transform: translateZ(var(--j));
  background: var(--panel-front, #111);
}

.cab-body {
  top: calc(var(--H) * 0.6);
  height: calc(var(--H) * 0.4);
  background: var(--body-bg, #151515);
}
.cab-kick {
  position: absolute;
  inset: auto 0 0 0;
  height: 8%;
  background: rgba(0, 0, 0, 0.45);
}

.coin-door {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 54%;
  height: 52%;
  transform: translateX(-50%);
  background: var(--door-bg, linear-gradient(180deg, #4b4f57, #2b2e33));
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    0 2px 0 rgba(0, 0, 0, 0.5);
}
.coin-slots {
  position: absolute;
  inset: 12% 10% auto;
  display: flex;
  justify-content: space-between;
  gap: 8%;
}
.coin-slot {
  flex: 1;
  height: calc(var(--H) * 0.06);
  background: #111;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 4%;
  position: relative;
}
.coin-slot::before {
  content: '';
  position: absolute;
  top: 18%;
  left: 50%;
  width: 12%;
  height: 34%;
  transform: translateX(-50%);
  background: #000;
  box-shadow: 0 0 0 1px #555;
}
.coin-price {
  font: 700 calc(var(--H) * 0.016) / 1 var(--ui-mono, monospace);
  color: #ffd9d4;
  background: #c1121f;
  padding: 0.25em 0.35em;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 40, 40, 0.75);
  white-space: nowrap;
}
.coin-reader {
  display: none;
  position: absolute;
  inset: 10% 14% 30%;
  background: #111;
  border-radius: 6px;
  color: #cfd3da;
  font: 600 calc(var(--H) * 0.014) / 1.1 var(--ui-font);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  box-shadow: inset 0 0 0 1px #333;
}
.nfc {
  width: calc(var(--H) * 0.03);
  height: calc(var(--H) * 0.03);
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 0 50%, transparent 0 22%, var(--g-accent) 22% 30%);
  -webkit-mask: linear-gradient(90deg, #000 0 100%);
}
.coin-return {
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 12%;
  height: 16%;
  background: #0d0d0d;
  border-radius: 2px;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.8);
}
.cab.is-coin .coin-price {
  animation: coin-blink 0.18s steps(2) 4;
}

.import-sticker {
  position: absolute;
  right: 6%;
  bottom: 14%;
  transform: rotate(-6deg);
  background: #ffd400;
  color: #111;
  padding: 0.3em 0.5em 0.35em;
  font: 800 calc(var(--H) * 0.022) / 1 var(--ui-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 2px solid #111;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25em;
}
.import-sticker small {
  font-size: 0.62em;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 700;
}

.cab-shadow {
  top: calc(100% - 1px);
  left: -20%;
  width: 140%;
  height: calc(var(--H) * 0.75);
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--H) * 0.2)) rotateX(-90deg);
  background: radial-gradient(50% 45% at 50% 62%, rgba(0, 0, 0, 0.6), transparent 100%);
  pointer-events: none;
}
.cab-floor-glow {
  top: calc(100% - 2px);
  left: -35%;
  width: 170%;
  height: calc(var(--H) * 0.55);
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--H) * 0.6)) rotateX(-90deg);
  background: radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--g-accent) 55%, transparent), transparent 100%);
  opacity: var(--glow-idle, 0.12);
  transition: opacity 0.4s;
  pointer-events: none;
}
.cab.is-active .cab-floor-glow {
  opacity: var(--glow-active, 0.5);
}
.cab-spot {
  bottom: 62%;
  left: -55%;
  width: 210%;
  height: 80%;
  transform: translateZ(calc(var(--H) * 0.15));
  background: linear-gradient(180deg, rgba(255, 250, 230, 0) 0%, rgba(255, 250, 230, var(--spot, 0.16)) 100%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.cab.is-active .cab-spot {
  opacity: 1;
}

/* borne hors service */
.cab.is-off {
  cursor: default;
}
.cab.is-off .mq-art {
  filter: brightness(0.45);
  font-size: calc(var(--H) * 0.04);
}
.oos-note {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 16%;
  padding: 0.7em 0.6em 0.6em;
  background: #fbfaf3;
  color: #1a1a1a;
  font: 400 calc(var(--H) * 0.018) / 1.15 'Permanent Marker', 'Comic Sans MS', cursive;
  transform: rotate(-3deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  text-align: center;
}
.oos-note b {
  font-weight: 400;
  font-size: 1.5em;
  color: #c1121f;
  text-transform: uppercase;
}
.oos-note small {
  align-self: flex-end;
  font-size: 0.85em;
  opacity: 0.75;
}
.oos-note::before,
.oos-note::after {
  /* scotch */
  content: '';
  position: absolute;
  top: -0.55em;
  width: 3em;
  height: 1.1em;
  background: rgba(240, 232, 200, 0.75);
}
.oos-note::before {
  left: -0.8em;
  transform: rotate(-24deg);
}
.oos-note::after {
  right: -0.8em;
  transform: rotate(20deg);
}

/* flèches de l'allée */
.aisle-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 22px;
  transition: opacity 0.25s;
}
.aisle-prev {
  left: 14px;
}
.aisle-next {
  right: 14px;
}
.arcade.at-start .aisle-prev,
.arcade.at-end .aisle-next {
  opacity: 0;
  pointer-events: none;
}

@keyframes wiggle {
  0%,
  100% {
    transform: rotateX(-70.7deg) rotateZ(0deg);
  }
  20% {
    transform: rotateX(-70.7deg) rotateZ(-14deg);
  }
  45% {
    transform: rotateX(-70.7deg) rotateZ(10deg);
  }
  70% {
    transform: rotateX(-62deg) rotateZ(0deg);
  }
}
@keyframes coin-blink {
  50% {
    background: #ffe36b;
    color: #4a2600;
    box-shadow: 0 0 14px rgba(255, 220, 80, 0.95);
  }
}

@media (max-width: 640px) {
  .arcade {
    --H: min(calc(80cqh - var(--fp)), 540px, 190cqw);
  }
  .aisle-nav {
    display: none;
  }
}