/* =====================================================================
   Les cinq époques. Tout ce qui change d'une décennie à l'autre est ici :
   interface, salle d'arcade, bornes. (L'étagère et la télé : css/shelf.css)
   ===================================================================== */

:root {
  --ui-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* =================================================================== 1980 */

[data-era='80'] {
  --ui-font: 'VT323', ui-monospace, monospace;
  --ui-display: 'Press Start 2P', monospace;
  --ui-mono: 'VT323', monospace;
  --ui-bg: #000;
  --ui-fg: #ececec;
  --ui-muted: #8f8f8f;
  --ui-accent: #ffd400;
  --ui-accent-ink: #000;
  --ui-line: #2b2b2b;
  --ui-radius: 0px;
  --ui-border: 0;
  --brand-size: 15px;
  --brand-weight: 400;
  --btn-size: 20px;
  --btn-pad: 4px 10px 5px;
  --btn-case: uppercase;
  --seg-bg: transparent;
  --seg-border: 2px solid #333;
  --btn-on-bg: #ffd400;
  --odo-font: 'Press Start 2P', monospace;
  --odo-size: 20px;
  --cap-size: 14px;
  --cap-weight: 400;
  --track-h: 8px;
  --track-radius: 0;
  --track-bg: repeating-linear-gradient(90deg, #444 0 6px, transparent 6px 9px);
  --thumb-w: 14px;
  --thumb-h: 22px;
  --thumb-radius: 0;
  --thumb-bg: #ffd400;
  --thumb-shadow: 3px 3px 0 #a33;
  --crt-radius: 14% / 18%;
  --scan: 0.42;
  --vignette: 0.7;
  --glare: 0.14;
}
[data-era='80'] .arcade {

  --room-bg: #000;
  --wall-bg:
    linear-gradient(180deg, transparent 0 calc(100% - var(--H, 400px) * 0.55), #2a160a calc(100% - var(--H, 400px) * 0.55) calc(100% - var(--H, 400px) * 0.53), transparent calc(100% - var(--H, 400px) * 0.53)),
    linear-gradient(180deg, #06060a 0 calc(100% - var(--H, 400px) * 0.55), transparent calc(100% - var(--H, 400px) * 0.55)),
    repeating-linear-gradient(90deg, #3a2210 0 3px, #4a2c15 3px 26px, #3f2511 26px 28px, #533219 28px 52px);
  --plinth: #160c05;
  --floor-bg:
    radial-gradient(circle at 20% 30%, #b3121d 0 2px, transparent 2.6px) 0 0 / 34px 34px,
    radial-gradient(circle at 70% 70%, #1d4ed8 0 2px, transparent 2.6px) 0 0 / 34px 34px,
    radial-gradient(circle at 45% 80%, #e5b800 0 1.4px, transparent 2px) 0 0 / 22px 22px,
    #0b0b16;
}
[data-era='80'] .cab {

  --side-bg:
    linear-gradient(160deg, transparent 0 34%, var(--g-accent) 34% 44%, transparent 44% 47%, var(--g-accent2) 47% 51%, transparent 51%),
    repeating-linear-gradient(90deg, #5b371a 0 2px, #6e4421 2px 9px, #4f2f15 9px 11px, #7a4d27 11px 19px);
  --mq-frame: #000;
  --mq-bg: linear-gradient(180deg, var(--g-accent) 0 9%, #050505 9% 91%, var(--g-accent) 91%);
  --mq-ink: var(--g-accent);
  --mq-font: 'Press Start 2P', monospace;
  --bezel-bg: #050505;
  --bezel-ring: #1e1e1e;
  --panel-bg: linear-gradient(180deg, #111 0%, #222 100%);
  --panel-front: #6e4421;
  --body-bg: #0d0d0d;
  --scr-dim: 0.95;
  --glow-idle: 0.18;
  --glow-active: 0.55;
}
[data-era='80'] .hud {
  border-bottom: 0;
  box-shadow:
    0 2px 0 #d7261e,
    0 4px 0 #f28c1b,
    0 6px 0 #ffd400;
  margin-bottom: 6px;
}
[data-era='80'] .dock {
  border-top: 2px solid #2b2b2b;
}
[data-era='80'] .cap-pitch,
[data-era='80'] .cap-meta {
  font-size: 19px;
  line-height: 1.05;
}
[data-era='80'] .era-name,
[data-era='80'] .era-ticks,
[data-era='80'] .era-read label {
  font-size: 16px;
}
[data-era='80'] .brand span {
  font-size: 18px;
}
[data-era='80'] .credits {
  font-size: 18px;
}
[data-era='80'] .mq-art {
  font-size: calc(var(--H) * 0.034);
  text-shadow: 0 0 calc(var(--H) * 0.01) var(--g-accent);
}
[data-era='80'] .mq-letter {
  text-shadow: 0 0 calc(var(--H) * 0.01) var(--lc);
}
[data-era='80'] .wall-sign {
  font-family: 'Press Start 2P', monospace;
  font-size: calc(var(--H) * 0.07);
  color: #ffe9a8;
  padding: 0.55em 0.8em 0.5em;
  background: #120707;
  text-shadow: 0 0 0.25em #ff9d00;
}
[data-era='80'] .wall-sign::before,
[data-era='80'] .wall-sign::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 0.16em dotted #ffd76a;
  filter: drop-shadow(0 0 0.15em #ffb300);
  animation: bulbs 0.9s steps(1) infinite;
}
[data-era='80'] .wall-sign::after {
  inset: 0.08em;
  border-color: #fff3c4;
  animation-delay: 0.45s;
}
[data-era='80'] .wall-sign span {
  font-family: 'VT323', monospace;
  font-size: 0.6em;
  color: #fff;
}
[data-era='80'] .sign-import {
  color: #9fe7ff;
  text-shadow: 0 0 0.25em #19a7ff;
}
[data-era='80'] .aisle-nav {
  background: #000;
  border: 2px solid #ffd400;
  color: #ffd400;
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  border-radius: 0;
}

/* =================================================================== 1990 */

[data-era='90'] {
  --ui-font: 'Chakra Petch', system-ui, sans-serif;
  --ui-display: 'Bungee', system-ui, sans-serif;
  --ui-bg: #160a26;
  --hud-bg: linear-gradient(180deg, #2a1347, #160a26);
  --dock-bg: linear-gradient(0deg, #2a1347, #160a26);
  --ui-fg: #f6eeff;
  --ui-muted: #b19ad6;
  --ui-accent: #19e3ff;
  --ui-accent-ink: #160a26;
  --ui-line: #3d2466;
  --ui-radius: 6px;
  --brand-size: 24px;
  --brand-weight: 400;
  --btn-case: uppercase;
  --btn-tracking: 0.04em;
  --btn-bg: #2d1650;
  --btn-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.4);
  --btn-on-bg: linear-gradient(180deg, #5ff1ff, #12b8d9);
  --btn-on-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  --seg-bg: #0e0619;
  --odo-font: 'Bungee', sans-serif;
  --odo-size: 28px;
  --cap-size: 20px;
  --cap-weight: 400;
  --track-h: 10px;
  --track-radius: 5px;
  --track-bg: linear-gradient(90deg, #ff2bd6, #ffe600 50%, #19e3ff);
  --track-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
  --thumb-w: 16px;
  --thumb-h: 30px;
  --thumb-radius: 3px;
  --thumb-bg: linear-gradient(90deg, #ddd, #fff 40%, #999);
  --thumb-border: 2px solid #160a26;
  --crt-radius: 8% / 10%;
  --scan: 0.26;
  --vignette: 0.55;
  --glare: 0.12;
}
[data-era='90'] .arcade {

  --room-bg: #0b0414;
  --wall-bg:
    linear-gradient(180deg, transparent 0 calc(100% - var(--H, 400px) * 0.08), #ff2bd6 calc(100% - var(--H, 400px) * 0.08) calc(100% - var(--H, 400px) * 0.075), transparent calc(100% - var(--H, 400px) * 0.075)),
    radial-gradient(120% 60% at 50% 100%, #2a0f4a, #12061f 70%);
  --plinth: #0a0312;
  --floor-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Crect width='240' height='240' fill='%23080410'/%3E%3Cg fill='none' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M20 40q15-20 30 0t30 0' stroke='%23ff2bd6'/%3E%3Cpath d='M150 30l20 30h-40z' stroke='%2319e3ff'/%3E%3Ccircle cx='200' cy='110' r='14' stroke='%23ffe600'/%3E%3Cpath d='M40 140l15 15 15-15 15 15 15-15' stroke='%236bff3a'/%3E%3Cpath d='M120 200q10-25 30-10t30-5' stroke='%23ff7a1a'/%3E%3Cpath d='M30 210l25-8' stroke='%2319e3ff'/%3E%3Cpath d='M180 180l20 20m0-20-20 20' stroke='%23ff2bd6'/%3E%3Cpath d='M95 95q10-20 25 0' stroke='%23ffe600'/%3E%3C/g%3E%3Cg fill='%23ff2bd6'%3E%3Ccircle cx='110' cy='40' r='5'/%3E%3Ccircle cx='225' cy='225' r='4'/%3E%3C/g%3E%3Cg fill='%2319e3ff'%3E%3Ccircle cx='70' cy='100' r='4'/%3E%3Ccircle cx='160' cy='140' r='5'/%3E%3C/g%3E%3Cpath fill='%23ffe600' d='M215 40l4 9 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Cpath fill='%236bff3a' d='M80 180l10 18H70z'/%3E%3C/svg%3E") 0 0 / 160px 160px;
}
[data-era='90'] .cab {

  --side-bg:
    linear-gradient(125deg, transparent 0 30%, var(--g-accent) 30% 42%, transparent 42% 45%, var(--g-accent2) 45% 52%, transparent 52% 55%, #fff 55% 56%, transparent 56%),
    radial-gradient(80% 50% at 30% 30%, var(--g-bg2), transparent 70%),
    #101016;
  --mq-frame: #0b0b0f;
  --mq-bg: repeating-conic-gradient(from 0deg at 50% 130%, var(--g-bg) 0 7deg, var(--g-bg2) 7deg 14deg);
  --mq-ink: #fff;
  --mq-font: 'Bungee', sans-serif;
  --bezel-bg: linear-gradient(180deg, #1a1a22, #0c0c10);
  --bezel-ring: #2b2b36;
  --panel-bg: linear-gradient(180deg, #1c1c26, #2a2a38);
  --panel-front: #19e3ff;
  --body-bg: #101016;
  --glow-idle: 0.2;
  --glow-active: 0.6;
}
[data-era='90'] .cab-marquee,
[data-era='90'] .cab-body,
[data-era='90'] .cab-screen {
  border-inline: calc(var(--H) * 0.008) solid #19e3ff;
}
[data-era='90'] .mq-art {
  font-size: calc(var(--H) * 0.048);
  text-shadow:
    0.06em 0.06em 0 var(--g-dark),
    0.11em 0.11em 0 #000;
  -webkit-text-stroke: 0.02em #000;
}
[data-era='90'] .wall-sign {
  font-family: 'Bungee', sans-serif;
  font-size: calc(var(--H) * 0.11);
  color: #fff;
  text-shadow:
    0 0 0.08em #fff,
    0.05em 0.05em 0 #ff2bd6,
    0.1em 0.1em 0 #19e3ff,
    0 0 0.6em #ff2bd6;
}
[data-era='90'] .wall-sign span {
  font-family: 'Chakra Petch', sans-serif;
  text-shadow: 0 0 0.4em #19e3ff;
}
[data-era='90'] .sign-import {
  text-shadow:
    0 0 0.08em #fff,
    0.05em 0.05em 0 #ffe600,
    0.1em 0.1em 0 #ff7a1a,
    0 0 0.6em #ffe600;
}
[data-era='90'] .aisle-nav {
  background: linear-gradient(180deg, #5ff1ff, #12b8d9);
  color: #160a26;
  border: 2px solid #160a26;
  border-radius: 6px;
  box-shadow: 3px 3px 0 #ff2bd6;
}

/* =================================================================== 2000 */

[data-era='00'] {
  --ui-font: Verdana, Tahoma, 'DejaVu Sans', sans-serif;
  --ui-display: 'Michroma', Verdana, sans-serif;
  --ui-bg: #dfe5ec;
  --hud-bg: linear-gradient(180deg, #fbfcfd 0%, #e3e8ee 50%, #d3dae3 51%, #e6ebf0 100%);
  --dock-bg: linear-gradient(180deg, #e9edf2, #cfd6df);
  --ui-fg: #17283a;
  --ui-muted: #50637a;
  --ui-accent: #1e6fd9;
  --ui-accent-ink: #fff;
  --ui-line: #a9b6c6;
  --ui-radius: 14px;
  --brand-size: 19px;
  --brand-weight: 400;
  --brand-tracking: 0.04em;
  --btn-size: 12px;
  --btn-pad: 7px 13px;
  --btn-bg: linear-gradient(180deg, #ffffff 0%, #eef2f6 50%, #dce3ea 51%, #eef2f6 100%);
  --btn-border: 1px solid #93a4b8;
  --btn-on-bg: linear-gradient(180deg, #8cc4ff 0%, #3d8ff0 50%, #1d6ed8 51%, #3e94f2 100%);
  --btn-on-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(20, 70, 140, 0.4);
  --seg-bg: transparent;
  --seg-gap: 4px;
  --odo-font: 'Michroma', sans-serif;
  --odo-size: 22px;
  --cap-size: 15px;
  --cap-weight: 400;
  --track-h: 8px;
  --track-radius: 4px;
  --track-bg: linear-gradient(180deg, #9aa8b8, #e9eef3);
  --track-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --thumb-w: 22px;
  --thumb-h: 22px;
  --thumb-bg: radial-gradient(circle at 50% 28%, #ffffff 0 18%, #9fd0ff 30%, #2a7fe6 62%, #1b5fb8 100%);
  --thumb-shadow: 0 2px 4px rgba(0, 40, 100, 0.45);
  --thumb-border: 1px solid #1b5fb8;
  --crt-radius: 4% / 5%;
  --scan: 0.1;
  --vignette: 0.35;
  --glare: 0.2;
}
[data-era='00'] .arcade {

  --room-bg: #04101f;
  --wall-bg:
    repeating-linear-gradient(180deg, transparent 0 calc(var(--H, 400px) * 0.18), rgba(140, 200, 255, 0.12) calc(var(--H, 400px) * 0.18) calc(var(--H, 400px) * 0.185)),
    linear-gradient(180deg, #071a33, #0e3463 70%, #12407a);
  --plinth: linear-gradient(180deg, #c9d3dd, #6f7c8a);
  --floor-bg:
    linear-gradient(180deg, rgba(120, 190, 255, 0.18), transparent 30%),
    repeating-conic-gradient(#0c1726 0 25%, #16253a 0 50%) 0 0 / 120px 120px;
}
[data-era='00'] .cab {

  --side-bg: linear-gradient(90deg, #6f7a87 0%, #e9eef3 22%, #aab4bf 45%, #dfe5ec 70%, #8a95a2 100%);
  --mq-frame: linear-gradient(180deg, #dfe5ec, #8a95a2);
  --mq-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0 48%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, var(--g-bg2), var(--g-bg));
  --mq-ink: #fff;
  --mq-font: 'Michroma', sans-serif;
  --bezel-bg: linear-gradient(180deg, #2b313a, #14181d);
  --bezel-ring: #9aa6b4;
  --panel-bg: linear-gradient(180deg, #2b313a, #4b5562);
  --panel-front: linear-gradient(180deg, #c9d3dd, #7d8996);
  --body-bg: linear-gradient(180deg, #2a3039 0%, #1a1e24 100%);
  --door-bg: linear-gradient(180deg, #d6dde5, #8f9aa7);
  --glow-idle: 0.16;
  --glow-active: 0.55;
}
[data-era='00'] .mq-art {
  font-size: calc(var(--H) * 0.036);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[data-era='00'] .cab-body::before {
  /* bande LED bleue */
  content: '';
  position: absolute;
  inset: 4% 8% auto;
  height: 2%;
  border-radius: 9px;
  background: #4fb4ff;
  box-shadow: 0 0 10px #4fb4ff;
}
[data-era='00'] .wall-sign {
  font-family: 'Michroma', sans-serif;
  font-size: calc(var(--H) * 0.07);
  letter-spacing: 0.08em;
  color: #0e3a75;
  padding: 0.5em 1em 0.6em;
  border-radius: 0.25em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0 50%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #e8f4ff, #a8d4ff);
  box-shadow:
    0 0 0.6em rgba(120, 190, 255, 0.7),
    inset 0 0 0 0.04em #fff;
}
[data-era='00'] .wall-sign span {
  font-family: Verdana, sans-serif;
  letter-spacing: 0.02em;
  color: #2b5f9c;
}
[data-era='00'] .sign-import {
  color: #7a4a00;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0 50%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #fff6d8, #ffd27a);
  box-shadow: 0 0 0.6em rgba(255, 200, 90, 0.6);
}
[data-era='00'] .aisle-nav {
  border-radius: 50%;
  border: 1px solid #1b5fb8;
  color: #fff;
  background: radial-gradient(circle at 50% 25%, #cfe7ff 0 15%, #5aa6f5 40%, #1d6ed8 75%);
  box-shadow: 0 2px 6px rgba(0, 30, 80, 0.5);
}

/* =================================================================== 2010 */

[data-era='10'] {
  --ui-font: 'Rubik', system-ui, sans-serif;
  --ui-display: 'Rubik', system-ui, sans-serif;
  --ui-bg: #1b1416;
  --ui-fg: #fff3ea;
  --ui-muted: #b7a29c;
  --ui-accent: #ff3d7f;
  --ui-accent-ink: #1b1416;
  --ui-line: rgba(255, 220, 210, 0.12);
  --ui-radius: 10px;
  --brand-size: 26px;
  --brand-weight: 400;
  --seg-bg: rgba(255, 255, 255, 0.06);
  --btn-on-bg: #ff3d7f;
  --odo-size: 30px;
  --cap-weight: 800;
  --track-bg: linear-gradient(90deg, #4b3036, #4b3036);
  --thumb-w: 20px;
  --thumb-h: 20px;
  --thumb-bg: #ff3d7f;
  --thumb-shadow: 0 0 0 4px #1b1416, 0 0 14px #ff3d7f;
  --crt-radius: 3px;
  --scan: 0;
  --vignette: 0.22;
  --glare: 0.08;
}
[data-era='10'] .arcade {

  --room-bg: #120c0d;
  --wall-bg:
    radial-gradient(70% 55% at 50% 100%, rgba(255, 61, 127, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(10, 6, 7, 0.75), rgba(10, 6, 7, 0.1) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Crect width='120' height='64' fill='%231c1011'/%3E%3Cg fill='%23432523'%3E%3Crect x='1' y='1' width='57' height='29' rx='1'/%3E%3Crect x='62' y='1' width='57' height='29' rx='1'/%3E%3Crect x='-29' y='33' width='57' height='29' rx='1'/%3E%3Crect x='92' y='33' width='57' height='29' rx='1'/%3E%3C/g%3E%3Crect x='32' y='33' width='57' height='29' rx='1' fill='%234c2a27'/%3E%3C/svg%3E") 0 0 / 96px 51px;
  --plinth: #0c0809;
  --floor-bg:
    radial-gradient(60% 40% at 50% 0%, rgba(255, 61, 127, 0.1), transparent 70%),
    linear-gradient(180deg, #2b2628, #1a1617 60%);
}
[data-era='10'] .cab {

  --side-bg:
    linear-gradient(118deg, transparent 0 44%, var(--g-accent) 44% 53%, transparent 53% 56%, var(--g-accent2) 56% 60%, transparent 60%),
    var(--g-bg);
  --mq-frame: #0e0e10;
  --mq-bg: var(--g-bg);
  --mq-ink: var(--g-ink);
  --mq-font: var(--g-font), 'Rubik', sans-serif;
  --bezel-bg: #0e0e10;
  --bezel-ring: #1d1d22;
  --panel-bg: linear-gradient(180deg, color-mix(in srgb, var(--g-bg) 40%, #000), color-mix(in srgb, var(--g-bg) 60%, #000));
  --panel-front: var(--g-accent);
  --body-bg: color-mix(in srgb, var(--g-bg) 45%, #0b0b0b);
  --glow-idle: 0.16;
  --glow-active: 0.6;
}
[data-era='10'] .brand b {
  font-family: 'Monoton', sans-serif;
  color: #ffd2e2;
  text-shadow: 0 0 6px #ff3d7f;
}
[data-era='10'] .mq-art {
  font-size: calc(var(--H) * 0.056);
  font-weight: 700;
}
[data-era='10'] .is-home .mq-letter {
  -webkit-text-stroke: 0.14em #fff;
  paint-order: stroke fill;
}
[data-era='10'] .wall-sign {
  font-family: 'Monoton', sans-serif;
  font-size: calc(var(--H) * 0.12);
  color: #ffe1ec;
  text-shadow:
    0 0 0.04em #fff,
    0 0 0.12em #ff3d7f,
    0 0 0.3em #ff3d7f,
    0 0 0.7em #ff3d7f;
}
[data-era='10'] .wall-sign span {
  font-size: 0.4em;
  color: #dcfaff;
  text-shadow:
    0 0 0.05em #fff,
    0 0 0.2em #19d3ff,
    0 0 0.5em #19d3ff;
  animation: neon-flicker 7s infinite;
}
[data-era='10'] .sign-import {
  color: #fff5d6;
  text-shadow:
    0 0 0.04em #fff,
    0 0 0.12em #ffb31a,
    0 0 0.3em #ffb31a,
    0 0 0.7em #ff8a00;
}
[data-era='10'] .aisle-nav {
  border: 0;
  border-radius: 50%;
  background: #ff3d7f;
  color: #1b1416;
  box-shadow: 0 6px 0 #a3194b;
}

/* =================================================================== aujourd'hui */

[data-era='20'] {
  --ui-font: 'Instrument Sans', system-ui, sans-serif;
  --ui-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ui-bg: #efebe4;
  --ui-fg: #1d1b19;
  --ui-muted: #6f6a63;
  --ui-accent: #1d1b19;
  --ui-accent-ink: #f6f3ee;
  --ui-line: rgba(29, 27, 25, 0.1);
  --ui-radius: 999px;
  --brand-size: 24px;
  --brand-weight: 750;
  --brand-tracking: -0.02em;
  --seg-bg: rgba(29, 27, 25, 0.06);
  --btn-pad: 8px 14px;
  --odo-font: 'Bricolage Grotesque', sans-serif;
  --odo-size: 32px;
  --cap-weight: 750;
  --track-h: 2px;
  --track-bg: #1d1b19;
  --thumb-w: 30px;
  --thumb-h: 18px;
  --thumb-radius: 999px;
  --thumb-bg: #f6f3ee;
  --thumb-border: 1.5px solid #1d1b19;
  --crt-radius: 8px;
  --scan: 0;
  --vignette: 0.08;
  --glare: 0.06;
}
[data-era='20'] .arcade {

  --room-bg: #e6e0d6;
  --wall-bg:
    radial-gradient(80% 60% at 50% 100%, rgba(255, 255, 255, 0.5), transparent 70%),
    linear-gradient(180deg, #ddd6ca, #ebe5db 70%);
  --plinth: #cfc6b8;
  --floor-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 40%),
    repeating-linear-gradient(90deg, #c9a87c 0 2px, #d8b98e 2px 80px, #cfae82 80px 82px, #dcbf96 82px 160px);
}
[data-era='20'] .cab {

  --side-bg: color-mix(in oklab, var(--g-bg) 62%, #efe9df);
  --mq-frame: #1e1e20;
  --mq-bg: color-mix(in oklab, var(--g-bg) 85%, #000);
  --mq-ink: var(--g-ink);
  --mq-font: var(--g-font), 'Bricolage Grotesque', sans-serif;
  --bezel-bg: #1e1e20;
  --bezel-ring: #2c2c2f;
  --panel-bg: #2a2a2d;
  --panel-front: #1e1e20;
  --body-bg: #1e1e20;
  --door-bg: #2a2a2d;
  --spot: 0;
  --glow-idle: 0.08;
  --glow-active: 0.35;
}
[data-era='20'] .cab-side::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.12));
}
[data-era='20'] .cab-shadow {
  background: radial-gradient(50% 45% at 50% 62%, rgba(60, 40, 20, 0.35), transparent 100%);
}
[data-era='20'] .mq-art {
  font-size: calc(var(--H) * 0.05);
}
[data-era='20'] .wall-sign {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: calc(var(--H) * 0.12);
  letter-spacing: -0.03em;
  color: #2a2622;
  text-shadow: 0 0 0.6em rgba(255, 196, 120, 0.9);
}
[data-era='20'] .wall-sign span {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  color: #6f6a63;
}
[data-era='20'] .aisle-nav {
  border: 1.5px solid #1d1b19;
  border-radius: 50%;
  background: #f6f3ee;
  color: #1d1b19;
}
.is-cashless .coin-slots {
  display: none;
}
.is-cashless .coin-reader {
  display: flex;
}

@keyframes bulbs {
  50% {
    opacity: 0.25;
  }
}
@keyframes neon-flicker {
  0%,
  18%,
  20%,
  22%,
  62%,
  64%,
  100% {
    opacity: 1;
  }
  19%,
  21%,
  63% {
    opacity: 0.35;
  }
}