/* Salle d'arcade — décor peint en CSS, palette Machinarium (bois usé, laiton, rouille,
   vert-de-gris, parchemin) avec un seul accent cyan : l'enseigne. */

:root {
  --ink: #0b0806;
  --wall: #17120e;
  --wood: #3a2a1c;
  --wood-dk: #241a12;
  --brass: #d4b05c;
  --brass-dk: #9a7430;
  --rust: #8a4a24;
  --verdigris: #364a3a;
  --parch: #efe3c8;
  --muted: #a8977a;
  --amber: #ffb347;
  --cyan: #6fe6df;
  --cw: clamp(150px, 13.8vw, 240px);           /* largeur d'une borne */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --title: "Rye", "Georgia", serif;
  --hand: "Caveat", "Segoe Script", cursive;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font: 15px/1.45 system-ui, "Segoe UI", sans-serif;
  color: var(--parch);
  background: var(--wall);
  overflow-x: hidden;
}

/* ---- Le mur : plâtre sale, planches, taches, vignette --------------------- */
.room {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background:
    radial-gradient(60% 45% at 50% 95%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(40% 50% at 12% 30%, rgba(138,74,36,.14), transparent 70%),
    radial-gradient(35% 40% at 85% 20%, rgba(54,74,58,.18), transparent 70%),
    radial-gradient(120% 90% at 50% 10%, transparent 40%, rgba(0,0,0,.75) 100%),
    repeating-linear-gradient(180deg, transparent 0 52px, rgba(0,0,0,.22) 52px 54px),
    linear-gradient(180deg, #1b1510, #15100c 60%, #110d09);
}
.room::before {                                   /* grain de peinture */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--noise); opacity: .07; pointer-events: none;
}

/* ---- Lampes suspendues ---------------------------------------------------- */
.lamp { position: absolute; top: 0; width: 0; height: 0; z-index: 1; pointer-events: none; }
.lamp-a { left: 24%; }
.lamp-b { left: 73%; }
.lamp i { position: absolute; display: block; left: 0; }
.lamp .cord { width: 2px; height: 58px; margin-left: -1px; background: linear-gradient(#000, #3a3028); }
.lamp .shade {
  top: 56px; width: 92px; height: 34px; margin-left: -46px;
  background: linear-gradient(180deg, #4e3b28, #2a1f15 70%, #1a130d);
  clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%);
}
.lamp .bulb {
  top: 82px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: #ffe2a6; box-shadow: 0 0 10px 4px rgba(255,210,140,.75), 0 0 40px 14px rgba(255,180,90,.35);
}
.lamp .cone {
  top: 88px; width: 420px; height: 520px; margin-left: -210px;
  background: linear-gradient(180deg, rgba(255,205,135,.17), rgba(255,190,110,.05) 55%, transparent 100%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}
.lamp.flicker .bulb, .lamp.flicker .cone { animation: lampflicker 7s infinite; }
@keyframes lampflicker {
  0%, 93%, 100% { opacity: 1; }
  94% { opacity: .55; } 95% { opacity: 1; } 96.5% { opacity: .7; } 97% { opacity: 1; }
}

/* ---- Poussière -------------------------------------------------------------- */
.mote {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  border-radius: 50%; background: rgba(255,225,170,var(--a, .55)); z-index: 1; pointer-events: none;
  animation: drift var(--d) linear infinite; animation-delay: var(--t);
}
.mote.beam { z-index: 3; }                        /* dans le faisceau, devant les bornes */
.mote.lit { box-shadow: 0 0 6px 2px rgba(255,210,140,.4); }
@keyframes drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: .8; }
  50%  { transform: translate(calc(var(--dx, 28px) * .3), calc(var(--dy, 70px) * .5)); }
  85%  { opacity: .6; }
  100% { transform: translate(var(--dx, 28px), var(--dy, 70px)); opacity: 0; }
}

/* ---- L'enseigne au néon (seul accent cyan) ---------------------------------- */
.sign { position: relative; z-index: 2; text-align: center; padding: clamp(28px, 5vh, 56px) 16px 0; }
.neon {
  margin: 0; font: 400 clamp(38px, 6.2vw, 78px)/1 var(--title); letter-spacing: .14em;
  color: #d9fffb;
  text-shadow:
    0 0 4px #fff, 0 0 10px var(--cyan), 0 0 22px var(--cyan), 0 0 48px rgba(111,230,223,.6),
    0 0 90px rgba(111,230,223,.35);
}
.neon span { display: inline-block; }
.neon .buzz { animation: buzz 5.5s infinite; }
@keyframes buzz {
  0%, 18%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .22; text-shadow: 0 0 2px rgba(111,230,223,.3); }
}
.tagline { margin: 10px 0 0; color: var(--muted); font-size: clamp(13px, 1.3vw, 16px); letter-spacing: .02em; }

/* ---- La rangée de bornes ---------------------------------------------------- */
.row {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(8px, 1.6vw, 24px);
  padding: clamp(36px, 6vh, 70px) 16px 0;
}

/* Une borne : un conteneur dont toutes les cotes dérivent de sa largeur (cqw). */
.cab {
  position: relative; flex: 0 0 var(--cw); width: var(--cw);
  container-type: inline-size;
  display: block; color: inherit; text-decoration: none;
  filter: drop-shadow(0 18px 14px rgba(0,0,0,.55));
}
.cab > * { position: relative; }

/* Chant de la borne (épaisseur) */
.cab::before {
  content: ""; position: absolute; z-index: 0; left: -3.5cqw; top: 2cqw; bottom: 0; width: 4cqw;
  background: linear-gradient(90deg, #0d0a07, #2a1f15 70%, #1a130d);
  border-radius: 1cqw 0 0 0;
}

/* Fronton lumineux (marquee) */
.marquee {
  z-index: 3; height: 17cqw; margin: 0 -2cqw;
  display: grid; place-items: center;
  border: 1.2cqw solid #2a1f15; border-bottom-width: 1.6cqw; border-radius: 2cqw 2cqw .5cqw .5cqw;
  background: linear-gradient(180deg, #4b3a26, #2e2318);
  box-shadow: inset 0 0 2cqw rgba(0,0,0,.6);
  transition: box-shadow .35s, filter .35s;
}
.marquee span {
  font: 400 6.2cqw/1 var(--title); letter-spacing: .04em; text-transform: uppercase;
  color: #6a5a46; text-shadow: none; white-space: nowrap; padding: 0 2cqw;
}
.cab.lit .marquee {
  background: linear-gradient(180deg, #ffe09a, #f0b85a 55%, #c98a3a);
  box-shadow:
    inset 0 1.2cqw 2cqw rgba(255,255,255,.4), inset 0 -1.5cqw 2.5cqw rgba(120,60,0,.35),
    0 0 4cqw rgba(255,190,90,.55), 0 0 12cqw rgba(255,170,70,.28);
}
.cab.lit .marquee span { color: #3a2308; text-shadow: 0 .3cqw 0 rgba(255,240,200,.5), 0 0 3cqw rgba(255,220,150,.9); }

/* Caisson d'écran */
.bezel {
  z-index: 2; padding: 6cqw 7cqw 8cqw; margin-top: -.5cqw;
  background: linear-gradient(180deg, #2b2118, #1c150f);
  border-left: 1cqw solid #3b2d1f; border-right: 1cqw solid #15100b;
}
.grille {
  height: 5cqw; margin: 0 6cqw 4cqw;
  background: repeating-linear-gradient(90deg, #0d0a07 0 1.4cqw, #2a2018 1.4cqw 2.6cqw);
  border-radius: .6cqw; box-shadow: inset 0 .4cqw .6cqw rgba(0,0,0,.8);
}
.screen {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 6cqw / 5cqw;
  background: radial-gradient(90% 90% at 50% 45%, #1a1815, #060504 95%);
  box-shadow: inset 0 0 0 1.2cqw #090705, inset 0 0 4cqw rgba(0,0,0,.9), 0 0 0 .8cqw #3a2c1f;
  transition: filter .35s;
}
.screen video {
  position: absolute; inset: 1cqw; width: calc(100% - 2cqw); height: calc(100% - 2cqw);
  object-fit: cover; border-radius: 5cqw / 4cqw;
  filter: saturate(1.15) contrast(1.06) brightness(.98);
  background: #000;
}
.scanlines {
  position: absolute; inset: 1cqw; border-radius: 5cqw / 4cqw; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.glass {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(60% 40% at 25% 12%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.cab.lit .screen { box-shadow: inset 0 0 0 1.2cqw #090705, inset 0 0 4cqw rgba(0,0,0,.7), 0 0 0 .8cqw #3a2c1f, 0 0 7cqw rgba(255,200,130,.35); }
.press {
  position: absolute; left: 0; right: 0; bottom: 5cqw; text-align: center;
  font: 700 3.6cqw/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #fff6d8; text-shadow: 0 0 2cqw rgba(0,0,0,.9), 0 0 1cqw #000;
  opacity: 0; transition: opacity .3s; animation: blink 1.1s steps(2, start) infinite; pointer-events: none;
}
@keyframes blink { to { visibility: hidden; } }
/* Invite clavier ou manette selon la dernière entrée (classe .pad sur <html>) */
.press .pad { display: none; }
html.pad .press .key { display: none; }
html.pad .press .pad {
  display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: #3fa34d; color: #fff; letter-spacing: 0; box-shadow: 0 0 1.5cqw rgba(0,0,0,.8);
}
html.pad, html.pad * { cursor: none; }

/* Écriteau en papier sur les bornes éteintes */
.paper {
  position: absolute; left: 12%; right: 12%; top: 34%; padding: 2cqw 1cqw;
  background: linear-gradient(170deg, #e8d9b4, #cdbb90);
  color: #4a3621; font: 600 9cqw/1 var(--hand); text-align: center;
  transform: rotate(-4deg); box-shadow: 0 1cqw 2cqw rgba(0,0,0,.6);
}
.paper::before {                                   /* ruban adhésif */
  content: ""; position: absolute; left: 50%; top: -2cqw; width: 12cqw; height: 4cqw; margin-left: -6cqw;
  background: rgba(240,225,190,.55); transform: rotate(3deg);
}
.paper.tilt { transform: rotate(5deg); top: 30%; }

/* Pupitre : manette et boutons */
.panel {
  z-index: 2; height: 15cqw; margin: 0 -1cqw;
  background: linear-gradient(180deg, #6a5338, #4a3824 55%, #2f2217);
  border-top: .8cqw solid #8a7049; border-radius: 1cqw 1cqw 0 0;
  box-shadow: inset 0 -2cqw 3cqw rgba(0,0,0,.45);
  clip-path: polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%);
}
.panel i { position: absolute; display: block; border-radius: 50%; }
.stick {
  left: 25%; top: 44%; width: 6.5cqw; height: 6.5cqw; margin: -3.25cqw;
  background: radial-gradient(circle at 35% 30%, #4d4538, #15110c 70%);
  box-shadow: 0 0 0 1.4cqw #2a2016, 0 .5cqw 1cqw rgba(0,0,0,.7);
}
.stick::after {                                   /* la boule, en laiton usé */
  content: ""; position: absolute; left: 50%; top: -9cqw; width: 6cqw; height: 6cqw; margin-left: -3cqw;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0d48a, var(--brass) 45%, var(--brass-dk) 100%);
  box-shadow: 0 .5cqw .8cqw rgba(0,0,0,.6);
}
.stick::before {
  content: ""; position: absolute; left: 50%; top: -5cqw; width: 1.6cqw; height: 6cqw; margin-left: -.8cqw;
  background: linear-gradient(90deg, #4a4036, #a89a86, #3a3028);
}
.btn { top: 50%; width: 6cqw; height: 6cqw; margin-top: -3cqw; box-shadow: 0 0 0 1.2cqw #241a12, 0 .5cqw 1cqw rgba(0,0,0,.6); }
.b1 { left: 56%; background: radial-gradient(circle at 35% 30%, #ff8a70, #b53a26 55%, #6e2015); }
.b2 { left: 74%; background: radial-gradient(circle at 35% 30%, #fff0b8, var(--amber) 50%, #b06a1a); }

/* Corps : bois peint, monnayeur, traces de rouille */
.body {
  z-index: 1; height: 78cqw; margin: 0 -1cqw;
  background:
    radial-gradient(30% 20% at 80% 85%, rgba(138,74,36,.45), transparent 70%),
    radial-gradient(20% 14% at 12% 30%, rgba(138,74,36,.35), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 9cqw, rgba(0,0,0,.08) 9cqw 9.6cqw),
    linear-gradient(90deg, #2a1f15, #3d2d1e 12%, #46351f 50%, #3a2b1c 88%, #1f160f);
  border-left: 1cqw solid #3b2d1f; border-right: 1cqw solid #15100b;
}
.body::before {                                   /* panneau décoratif vert-de-gris */
  content: ""; position: absolute; left: 12%; right: 12%; top: 7%; height: 50%;
  background: linear-gradient(180deg, #3f5443, #2a3a2e);
  border: .8cqw solid #1e2a21; box-shadow: inset 0 0 2cqw rgba(0,0,0,.5); opacity: .85;
}
.coin {
  position: absolute; left: 50%; top: 72%; width: 30cqw; height: 16cqw; margin-left: -15cqw;
  background: linear-gradient(180deg, #5a4631, #3a2b1c); border: .8cqw solid #1a130d; border-radius: 1cqw;
  box-shadow: inset 0 .6cqw 1cqw rgba(255,230,180,.12), 0 .6cqw 1cqw rgba(0,0,0,.5);
}
.coin::before {                                   /* fente */
  content: ""; position: absolute; left: 50%; top: 22%; width: 1.4cqw; height: 6cqw; margin-left: -.7cqw;
  background: #000; box-shadow: 0 0 .5cqw rgba(255,220,160,.35);
}
.coin::after {                                    /* serrure en laiton */
  content: ""; position: absolute; right: 12%; bottom: 14%; width: 3cqw; height: 3cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d48a, var(--brass-dk));
}
/* Tableau des meilleurs scores, gravé sur le panneau vert-de-gris */
.board {
  position: absolute; left: 12%; right: 12%; top: 7%; height: 50%; z-index: 2;
  padding: 2cqw 3cqw 1cqw; display: flex; flex-direction: column;
  font: 600 5.4cqw/1.25 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #cfe3cf;
  text-shadow: 0 .3cqw 0 rgba(0,0,0,.6);
}
.board-title {
  font: 400 4.4cqw/1 var(--title); letter-spacing: .06em; text-transform: uppercase; text-align: center;
  color: var(--brass); margin-bottom: 1.6cqw; padding-bottom: 1.2cqw;
  border-bottom: .4cqw solid rgba(212,176,92,.45);
}
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9cqw; }
.board-list li { display: grid; grid-template-columns: 5.5cqw 1fr auto; gap: 1.5cqw; align-items: baseline; white-space: nowrap; }
.board-list em { font-style: normal; color: var(--amber); }
.board-list b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.board-list span { color: #e9f3e6; font-variant-numeric: tabular-nums; }
.board.empty .board-list li { color: #8aa28c; }
.board .note { margin-top: auto; font: 500 3.8cqw/1.2 system-ui, sans-serif; color: #93ad95; text-align: center; }
.tip-scores { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid rgba(212,176,92,.3); display: grid; gap: 3px; font-size: 12.5px; }
.tip-scores:empty { display: none; }
.tip-scores li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; color: var(--muted); }
.tip-scores li em { font-style: normal; color: var(--amber); }
.tip-scores li b { color: var(--parch); font-weight: 600; }
.tip-scores li span { font-variant-numeric: tabular-nums; color: var(--brass); }
.tip-count { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.tip-count:empty { display: none; }
/* Compteur mécanique du monnayeur : parties jouées sur le site */
.meter {
  position: absolute; left: 50%; top: 59.5%; z-index: 2; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1.6cqw; padding: .8cqw 1.4cqw;
  background: linear-gradient(180deg, #c9a557, var(--brass-dk)); border: .5cqw solid #4a3518; border-radius: .8cqw;
  box-shadow: inset 0 .3cqw .4cqw rgba(255,240,200,.35), 0 .5cqw .8cqw rgba(0,0,0,.55);
}
.meter-digits { display: flex; gap: .4cqw; }
.meter-digits i {
  display: block; width: 3.8cqw; padding: .3cqw 0; text-align: center; font: 700 4.2cqw/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-style: normal; color: #f3ead2; background: linear-gradient(180deg, #050403, #2a2420 48%, #050403 52%, #2a2420);
  border-radius: .4cqw; box-shadow: inset 0 .4cqw .5cqw rgba(0,0,0,.8);
}
.meter-unit { font: 700 3.2cqw/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #2a1d0c; }
.kick { z-index: 1; height: 6cqw; margin: 0 -1.5cqw; background: linear-gradient(180deg, #221a12, #0d0a07); border-top: .6cqw solid #3b2d1f; }
.shadow {
  position: absolute; z-index: 0; left: -10%; right: -10%; bottom: -2.5cqw; height: 8cqw;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.75), transparent 70%);
}

/* Halo au sol et sur le mur des bornes allumées ; plus fort au survol.
   La boîte descend bien sous la borne pour que la flaque au sol s'éteigne en fondu. */
.glow {
  position: absolute; z-index: -1; left: -30%; right: -30%; top: -12%; bottom: -45%;
  background:
    radial-gradient(45% 27% at 50% 77%, rgba(255,190,110,.42), rgba(255,190,110,.12) 45%, transparent 72%),
    radial-gradient(60% 35% at 50% 23%, rgba(255,200,130,.25), transparent 70%);
  opacity: .8; transition: opacity .35s, transform .35s; pointer-events: none;
}

/* Bornes éteintes : voile de poussière, contraste bas */
.cab.off { filter: drop-shadow(0 18px 14px rgba(0,0,0,.55)) saturate(.6) brightness(.72); }
.cab.off::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(190,170,130,.14), rgba(190,170,130,.06) 50%, rgba(190,170,130,.16));
}
.cab.dusty .screen { background: radial-gradient(90% 90% at 50% 45%, #2a2622, #0b0907 95%); }
.cobweb { position: absolute; z-index: 6; left: -2cqw; top: -5cqw; width: 42cqw; height: 42cqw; pointer-events: none; opacity: .8; }

/* Infobulle : titre et une phrase, au survol ou au focus clavier */
.tip {
  position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 10px); width: max(220px, 130cqw);
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  padding: 12px 14px; border: 1px solid var(--brass-dk); border-radius: 6px;
  background: linear-gradient(180deg, rgba(58,50,40,.97), rgba(36,30,24,.97));
  color: var(--parch); box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: opacity .25s, transform .25s; text-align: left;
}
.tip strong { display: block; font: 400 17px/1.2 var(--title); color: var(--brass); margin-bottom: 4px; }
.tip span { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }
.tip::after {
  content: ""; position: absolute; left: 50%; top: 100%; margin-left: -7px;
  border: 7px solid transparent; border-top-color: var(--brass-dk);
}

.cab.lit:hover, .cab.lit:focus-visible, html.pad .cab.lit.sel { outline: none; }
.cab.lit:hover .glow, .cab.lit:focus-visible .glow, html.pad .cab.lit.sel .glow { opacity: 1.6; transform: scale(1.08); }
.cab.lit:hover .marquee, .cab.lit:focus-visible .marquee, html.pad .cab.lit.sel .marquee { filter: brightness(1.15); box-shadow: inset 0 1.2cqw 2cqw rgba(255,255,255,.45), inset 0 -1.5cqw 2.5cqw rgba(120,60,0,.3), 0 0 6cqw rgba(255,200,110,.8), 0 0 18cqw rgba(255,170,70,.45); }
.cab.lit:hover .screen, .cab.lit:focus-visible .screen, html.pad .cab.lit.sel .screen { filter: brightness(1.12); }
.cab.lit:hover .press, .cab.lit:focus-visible .press, html.pad .cab.lit.sel .press { opacity: 1; }
.cab.lit:hover .tip, .cab.lit:focus-visible .tip, html.pad .cab.lit.sel .tip { opacity: 1; transform: translate(-50%, 0); }
.cab.lit:focus-visible .marquee, html.pad .cab.lit.sel .marquee { outline: 2px solid var(--parch); outline-offset: 3px; }

/* ---- Le sol : parquet usé qui fuit vers le fond ---------------------------- */
.floor {
  position: relative; z-index: 1; height: clamp(120px, 28vh, 280px); margin-top: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 25%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.92) 100%),
    repeating-linear-gradient(90deg, #3a2b1d 0 84px, #2b2015 84px 88px, #3e2e1f 88px 160px, #291e14 160px 164px),
    #2e2217;
  transform: perspective(520px) rotateX(42deg); transform-origin: 50% 0;
  width: 130%; margin-left: -15%;
}
.floor::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .12; }
.baseboard {
  position: relative; z-index: 1; height: 12px;
  background: linear-gradient(180deg, #4a3826, #2a1f15 60%, #1a130d);
  box-shadow: 0 -1px 0 rgba(255,220,170,.08), 0 6px 12px rgba(0,0,0,.6);
}

.foot { position: relative; z-index: 2; margin-top: auto; padding: 18px 16px 22px; text-align: center; color: #6e604d; font-size: 12.5px; }

/* ---- Mobile : bornes en défilement horizontal, infobulle sous la borne ------ */
@media (max-width: 860px) {
  :root { --cw: 210px; }
  .row {
    justify-content: flex-start; overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    gap: 26px; padding-inline: 24px; padding-bottom: 8px; margin-bottom: 0;
    scrollbar-width: thin; scrollbar-color: #3b2d1f transparent;
  }
  .row { align-items: flex-start; }
  .cab { scroll-snap-align: center; }
  .tip {
    position: static; width: auto; margin-top: 10px; transform: none; opacity: 1; pointer-events: auto;
  }
  .tip::after { display: none; }
  .cab.off::after { inset: 0; }
  .board { font-size: 5cqw; }
  .lamp .cone { width: 240px; margin-left: -120px; height: 260px; }
  .lamp-a { left: 18%; } .lamp-b { left: 82%; }
  .floor { height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .neon .buzz, .lamp.flicker .bulb, .lamp.flicker .cone, .press { animation: none; }
  .tip, .glow, .marquee, .screen { transition: none; }
}