/* ==========================================================================
   Arcade — un monde de nuit, le même dans les deux thèmes
   ========================================================================== */
.salle {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(155, 140, 255, .25), transparent 45%),
    radial-gradient(ellipse at 100% 30%, rgba(255, 111, 168, .16), transparent 40%),
    var(--nuit);
  color: var(--creme);
  min-height: 70vh;
  position: relative;
  overflow: hidden;
}
.salle::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 4px);
}
.salle > * { position: relative; z-index: 1; }
.salle-tete { padding-block: clamp(40px, 7vw, 96px) clamp(24px, 4vw, 48px); display: grid; gap: 18px; justify-items: start; }
.salle .ariane, .salle .ariane a { color: #8FA3C9; }
.titre-neon {
  font-family: var(--f-pixel); font-weight: 700;
  font-size: clamp(2.2rem, 1.2rem + 5.5vw, 5.4rem); line-height: 1; letter-spacing: .02em;
  color: #FFF4DA;
  text-shadow: 0 0 6px rgba(255, 210, 122, .9), 0 0 22px rgba(255, 210, 122, .55), 0 0 60px rgba(255, 111, 168, .45);
  animation: bourdonne 6s infinite;
}
@keyframes bourdonne { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }
.salle-tete .chapeau { color: #B7C0D3; }
.jetons { display: flex; flex-wrap: wrap; gap: 10px; }
.jeton {
  font-family: var(--f-pixel); font-size: .72rem; letter-spacing: .06em;
  padding: 8px 12px; border-radius: 4px; border: 1px solid #2B3C62; color: #DDE5F5; background: rgba(22, 38, 74, .5);
}
.jeton b { color: var(--neon-or); font-weight: 400; }

.murs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); padding-bottom: clamp(40px, 6vw, 80px); }
@media (max-width: 1020px) { .murs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .murs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .murs { grid-template-columns: 1fr; } }

.cabinet {
  --n: #FF6FA8;
  display: grid; gap: 10px; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, #172850, #0C1631 55%, #081024);
  border: 0; border-radius: 14px 14px 8px 8px; padding: 10px 10px 14px; color: var(--creme);
  box-shadow: inset 0 0 0 1px rgba(155, 140, 255, .22), 0 20px 40px -26px #000;
  transition: transform .35s var(--doux), box-shadow .35s;
  position: relative;
}
.cabinet:hover, .cabinet:focus-visible { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--n), 0 22px 50px -22px var(--n); outline: none; }
.cabinet-fronton { font-family: var(--f-pixel); font-size: .92rem; letter-spacing: .06em; color: var(--n); text-shadow: 0 0 10px var(--n); text-align: center; padding: 4px 0 2px; }
.cabinet canvas { width: 100%; aspect-ratio: 4 / 3; display: block; border-radius: 8px; background: #020812; border: 4px solid #050A16; }
.cabinet-txt { font-size: .88rem; color: #AFB9CD; line-height: 1.45; padding-inline: 2px; min-height: 2.9em; }
.cabinet-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--f-pixel); font-size: .6rem; letter-spacing: .06em; color: #8FA3C9; padding-inline: 2px; }
.cabinet-bas b { color: var(--neon-or); font-weight: 400; }
.cabinet-jouer { background: var(--n); color: #0B1526; padding: 5px 9px; border-radius: 3px; }
.cabinet-atelier { cursor: default; opacity: .75; }
.cabinet-atelier:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(155, 140, 255, .22); }
.cabinet-atelier .cabinet-jouer { background: #2B3C62; color: #C9D2E6; }

.records { padding-bottom: clamp(48px, 7vw, 96px); display: grid; gap: 18px; }
.records h2 { font-family: var(--f-pixel); font-size: 1.1rem; letter-spacing: .06em; color: var(--neon-cyan); font-weight: 400; }
.table-records { width: 100%; max-width: 620px; border-collapse: collapse; font-family: var(--f-pixel); font-size: .8rem; }
.table-records td { padding: 10px 6px; border-bottom: 1px dashed #22335A; }
.table-records td:last-child { text-align: right; color: var(--neon-or); }
.records p { color: #8FA3C9; font-size: .92rem; max-width: 62ch; }
.records .btn-ligne { --texte: #DDE5F5; border-color: #2B3C62; justify-self: start; }

/* ---------- La borne de jeu (plein écran) ---------- */
.borne-jeu {
  position: fixed; inset: 0; z-index: 90;
  background: radial-gradient(ellipse at center, #0D1838, #030712 75%);
  display: flex; flex-direction: column; color: var(--creme);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
}
.borne-jeu[hidden] { display: none !important; }
.bj-haut { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; justify-content: space-between; padding: 4px 6px 10px; }
.bj-titre { display: grid; gap: 2px; min-width: 0; }
.bj-nom { font-family: var(--f-pixel); font-size: 1.1rem; letter-spacing: .06em; color: var(--neon-jeu, #FF6FA8); text-shadow: 0 0 10px var(--neon-jeu, #FF6FA8); }
.bj-aide { font-size: .8rem; color: #8FA3C9; }
.bj-scores { display: flex; gap: 18px; font-family: var(--f-pixel); font-size: .78rem; letter-spacing: .06em; color: #AFC1E6; }
.bj-scores b { color: var(--neon-or); font-weight: 400; margin-left: 4px; }
.bj-boutons { display: flex; gap: 6px; }
.bj-btn {
  width: 42px; height: 42px; border-radius: 8px; border: 1px solid #2B3C62; background: #0E1B38; color: #E4EBF8;
  cursor: pointer; font-size: 1rem; display: grid; place-items: center; font-family: var(--f-mono);
}
.bj-btn:hover { border-color: var(--neon-jeu, #FF6FA8); }
.bj-quitter { background: #2A0F24; border-color: #5A2346; }
.bj-scene { flex: 1; min-height: 0; display: grid; place-items: center; }
.bj-ecran { position: relative; line-height: 0; border-radius: 10px; box-shadow: 0 0 0 6px #050A16, 0 0 0 7px #22335A, 0 0 60px -10px var(--neon-jeu, #FF6FA8); overflow: hidden; }
.bj-ecran canvas { display: block; }
.bj-voile { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(2, 6, 16, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); line-height: 1.5; cursor: pointer; }
.bj-voile[hidden] { display: none; }
.bj-voile-int { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 20px; max-width: 90%; }
.bj-voile-int p { color: #C9D2E6; font-size: .95rem; }
.bj-gros { font-family: var(--f-pixel); font-size: clamp(1.2rem, 1rem + 1.5vw, 2rem); color: #FFFFFF !important; text-shadow: 0 0 12px var(--neon-jeu, #FF6FA8); letter-spacing: .04em; }
.bj-final { font-family: var(--f-pixel); font-size: 1.6rem; color: var(--neon-or) !important; }
.bj-record-neuf { font-family: var(--f-pixel); color: var(--neon-vert) !important; animation: clignote-r .6s steps(2, start) infinite; }
@keyframes clignote-r { to { visibility: hidden; } }
.bj-petit { font-size: .75rem !important; color: #7F8EB0 !important; }
.bj-tactile { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px 0; gap: 12px; }
.bj-croix { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 48px); gap: 6px; margin-inline: auto; }
.bj-croix button, .bj-action {
  border-radius: 10px; border: 1px solid #2B3C62; background: #0E1B38; color: #E4EBF8; font-size: 1.1rem; cursor: pointer;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.bj-croix button:active, .bj-action:active { background: var(--neon-jeu, #FF6FA8); color: #0B1526; }
.bj-croix [data-dir="haut"] { grid-column: 2; grid-row: 1; }
.bj-croix [data-dir="gauche"] { grid-column: 1; grid-row: 2; }
.bj-croix [data-dir="bas"] { grid-column: 2; grid-row: 2; }
.bj-croix [data-dir="droite"] { grid-column: 3; grid-row: 2; }
.bj-action { width: min(320px, 90%); height: 56px; margin-inline: auto; font-family: var(--f-pixel); letter-spacing: .1em; }
.bj-croix[hidden], .bj-action[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .bj-tactile { display: none; } }
@media (max-width: 560px) { .bj-aide { display: none; } .bj-nom { font-size: .9rem; } }