/* The title screen owns its layout. Shared game/account components stay intact. */
.arcade-home-body {
  --arc-bg: #10091c;
  --arc-panel: #21112f;
  --arc-text: #eeebff;
  --arc-muted: #bab0d5;
  --arc-line: #63417f;
  --arc-accent: #ffd45a;
  --arc-mint: #57eee9;
  --arc-neon: #ff398e;
  --arc-highlight: var(--arc-accent);
  --arc-overlay: rgba(10, 3, 22, .62);
  --home-panel: var(--arc-panel);
  --home-text: var(--arc-text);
  --home-muted: var(--arc-muted);
  --home-cta: var(--arc-accent);
  --home-control: var(--arc-bg);
  --home-control-border: var(--arc-line);
  margin: 0;
  /* L'écran titre tient dans la fenêtre : aucun ascenseur en desktop. Le mobile
     rétablit le défilement plus bas (média ≤900px). */
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #4b195d, #1d0c2f 55%, #080410) fixed;
  color: var(--arc-text);
  font-family: 'PixelArt', monospace;

}
.arcade-home-body[data-theme="sunset"] {
  --arc-bg: #210b20;
  --arc-panel: #371427;
  --arc-line: #874459;
  --arc-accent: #ffe66d;
  --arc-mint: #ffb77c;
  --arc-neon: #ff6b5c;
  --arc-overlay: rgba(28, 4, 20, .62);
  background: radial-gradient(ellipse at 50% 0%, #68283e, #290d29 55%, #10040e) fixed;
}
.arcade-home-body[data-theme="night"] {
  --arc-bg: #071023;
  --arc-panel: #102340;
  --arc-line: #365b91;
  --arc-accent: #abeaff;
  --arc-mint: #64d7ff;
  --arc-neon: #8787ff;
  --arc-overlay: rgba(3, 9, 28, .65);
  background: radial-gradient(ellipse at 50% 0%, #223f73, #0e1837 55%, #040817) fixed;
}
.arcade-home-body[data-ui-mode="light"] {
  background: radial-gradient(ellipse at 50% 0%, #e8d7fc, #b8a4d1 75%, #8d7ba9) fixed;

}
.arcade-home-body > footer:empty { display: none; }
.arcade-cabinet, .arcade-cabinet * { box-sizing: border-box; }
.arcade-cabinet {
  width: 100%; height: 100dvh; margin: auto;
  padding: 0 clamp(12px, 1.6vw, 26px);
  /* Deux rangées seulement depuis la suppression de la barre du haut : l'écran, puis le pied.
     minmax(0, 1fr) et non 1fr — sans le minimum à 0, l'écran prend la hauteur de son contenu
     et pousse le pied hors de la fenêtre. */
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--arc-text);

}
.arcade-topbar {
  min-height: clamp(42px, 5.4dvh, 54px); display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
  padding: 0 10px; border: 0;

}
.arcade-status, .arcade-account { display: flex; align-items: center; gap: 12px; }
.arcade-status, .arcade-beta, .arcade-eyebrow, .arcade-logo-sub,
.arcade-menu-heading, .arcade-side-head, .arcade-menu-tag, .arcade-menu-number,
.arcade-news-label, .arcade-hiscore-rank, .arcade-hiscore-elo {
  color: #a5fa88; font-size: 20px;
}
.arcade-status {
  font-size: 19px; letter-spacing: 2px; color: var(--arc-mint); text-shadow: 0 0 12px #57eee940;
}
.arcade-status-dot, .arcade-demo-dot {
  width: auto; height: auto; background: none; box-shadow: none; color: var(--arc-neon); font-size: 15px;
}
.arcade-beta {
  color: var(--arc-accent); border: 1px solid var(--arc-line); padding: 1px 6px; font-size: 15px; letter-spacing: 1px;
}
.arcade-account-label {
  font-size: 17px; letter-spacing: 1px; color: var(--arc-muted);
}
.arcade-home-body .user-bloc { position: relative; top: auto; right: auto; align-items: center; z-index: 20; }
.arcade-home-body .user-bloc .icon-user {
  width: 36px; height: 36px; border: 2px solid var(--arc-line); border-radius: 3px;
  background: var(--arc-panel); color: var(--arc-accent); box-shadow: 0 3px 0 #07030e;
  font-size: 14px;

}
.arcade-home-body .user-dropdown .icon-user { width: 60px; padding: 5px; gap: 6px; }
.arcade-home-body .user-bloc .user-avatar { width: 28px; height: 28px; border-radius: 4px; background: transparent; box-shadow: none; }
.arcade-home-body .user-bloc .dropdown-menu { top: calc(100% + 12px); right: 0; }
.arcade-screen {
  position: relative; min-width: 0; min-height: 0; display: grid; isolation: isolate;
  margin: clamp(3px, 0.6dvh, 6px) 0 clamp(8px, 1.4dvh, 14px);
  border: clamp(6px, 1dvh, 10px) solid #090511; border-radius: 20px;
  background: #090511;
  box-shadow: 0 0 0 2px var(--arc-line), 0 0 0 6px #090511, 0 14px 36px #0008, 0 0 44px color-mix(in srgb, var(--arc-neon) 20%, transparent);

}
.arcade-home-body .home-stage-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; border: 0; border-radius: 12px;
  box-shadow: none; outline: none; overflow: hidden;
  background: var(--arc-bg);
}
.arcade-home-body .home-stage-frame::before, .arcade-home-body .home-stage-frame::after { content: none; }
.arcade-home-body .home-training-demo { width: 100%; height: 100%; border: 0; border-radius: 0; }
.arcade-home-body .home-stage-frame:not(.is-playing) { pointer-events: none; }
.arcade-attract {
  position: relative; z-index: 3; display: grid;
  grid-template-columns: minmax(0, 640px);
  justify-content: center; align-items: center; align-content: center;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(10px, 2.8dvh, 28px) clamp(4px, 1.5vw, 26px) clamp(12px, 3.2dvh, 32px);
  height: 100%; min-height: 0;

}
.arcade-attract-bg {
  position: absolute; inset: 0; z-index: -1; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 40%, rgba(8, 2, 20, .8), transparent 80%),
    linear-gradient(var(--arc-overlay), var(--arc-overlay));
  pointer-events: none;

}
.arcade-cabinet.is-demo-visible .arcade-attract { visibility: hidden; pointer-events: none; }
.arcade-side {
  min-width: 0; min-height: 0; overflow: hidden;
  padding: clamp(14px, 2.4dvh, 24px) 20px; display: flex; flex-direction: column; gap: clamp(8px, 1.4dvh, 14px);
  border: 0; border-radius: 0;
  background: linear-gradient(90deg, rgba(14, 5, 29, .85), rgba(14, 5, 29, .48));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--arc-mint) 55%, transparent);

}
.arcade-home-body .arcade-side-left { margin: 0; }
.arcade-side-head {
  display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 0 0 10px;
  border-bottom: 2px dashed var(--arc-line);
  color: var(--arc-mint); font-size: 22px; letter-spacing: 2px;
  text-shadow: 0 0 12px color-mix(in srgb, var(--arc-mint) 35%, transparent);

}
.arcade-panel-number {
  color: var(--arc-neon); font-size: 18px;
}
.arcade-panel-meta {
  margin-left: auto; font-size: 16px; color: var(--arc-muted);
}
.arcade-side-head-stats { margin-top: 12px; }
.arcade-player { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.arcade-player-blobby {
  position: relative; display: grid; place-items: center;
  width: 100%; height: clamp(72px, 12dvh, 120px);
  background: radial-gradient(ellipse at 50% 75%, color-mix(in srgb, var(--arc-mint) 13%, transparent), transparent 65%);
}
.arcade-player-blobby::after {
  content: ''; position: absolute; bottom: 4px; width: 78px; height: 10px; border-radius: 50%;
  background: #0003;
}
.arcade-home-body #my-blobby { width: clamp(56px, 9.2dvh, 92px); height: clamp(56px, 9.2dvh, 92px); object-fit: contain; image-rendering: pixelated; z-index: 1; filter: drop-shadow(0 4px 0 #0002); }
.arcade-home-body .arcade-nameplate { display: block; width: 100%; min-height: 0; padding: 0; text-align: left; }
.arcade-field-label {
  display: block; font-size: 17px; text-transform: uppercase; color: var(--arc-muted); margin: 0 0 4px; letter-spacing: 2px;
}
.arcade-home-body #login.arcade-input {
  width: 100% !important; max-width: 100%; height: 44px; min-height: 44px; padding: 5px 10px;
  border: 2px solid var(--arc-line); border-radius: 2px; background: #10071cbf;
  color: var(--arc-accent); font-family: 'Jersey 15', sans-serif; font-size: 24px;
  text-align: center; letter-spacing: 1px; box-shadow: 0 3px 0 #050309;
  text-shadow: 0 0 12px #ffd45a33;

}
.arcade-picker, .arcade-home-body .arcade-side-link {
  border-color: transparent; padding: 6px 0; color: var(--arc-mint); text-decoration: none; background: none;
}
.arcade-picker-label {
  color: var(--arc-muted); text-transform: uppercase; font-size: 18px;
}
.arcade-picker-value { display: flex; align-items: center; gap: 8px; }
.arcade-chevron {
  color: var(--arc-accent); font-size: 22px;
}
.arcade-picker-current { min-width: 6ch; text-align: center; }
.arcade-swatches { display: flex; gap: 5px; }
.arcade-swatch { width: 10px; height: 10px; border-radius: 2px; border: 1px solid #ffffff50; }
.arcade-swatch.is-active { outline: 2px solid var(--arc-text); outline-offset: 2px; }
.arcade-side-note {
  color: var(--arc-muted); font-size: 18px; line-height: 1.2; margin: 4px 0 0;
}
.arcade-home-body .arcade-side-link { border-color: transparent; padding: 6px 0; color: var(--arc-mint); text-decoration: none; }
.arcade-stats { display: grid; gap: 8px; margin: 0; }
.arcade-stat {
  display: flex; justify-content: space-between; font-size: 20px;
}
.arcade-stat dt { font-weight: normal; color: var(--arc-muted); }
.arcade-stat dd {
  margin: 0; color: #a5fa88;
}
.arcade-center { min-width: 0; min-height: 0; text-align: center; }
.arcade-logo { margin: 0 auto; }
.arcade-eyebrow {
  font-size: clamp(14px, 1.8dvh, 18px); color: var(--arc-neon); letter-spacing: 3px; margin: 0 0 clamp(8px, 1.6dvh, 16px);
}
.arcade-logo-main {
  margin: 0; color: #f3f0df;
  font: 400 clamp(46px, min(7.3vw, 10.4dvh), 110px)/.76 'Jersey 15', sans-serif;
  letter-spacing: -.015em; text-shadow: 0 4px 0 #314941;

}
.arcade-logo-main span { display: block; }
.arcade-logo-main span + span {
  color: #93cbb9; margin-top: clamp(2px, 0.7dvh, 7px);
}
.arcade-logo-sub {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(8px, 2dvh, 20px);
  color: #f6cd72; font: 11px 'Numbers', monospace; letter-spacing: 7px; padding-left: 7px;

}
.arcade-logo-sub span { width: 28px; height: 1px; background: var(--arc-line); }
.arcade-tagline {
  font-size: clamp(16px, 1.9dvh, 19px); color: var(--arc-muted); margin: clamp(6px, 1.6dvh, 16px) 0 clamp(8px, 2.4dvh, 24px);
}
.arcade-menu-heading {
  font-size: 18px; letter-spacing: 3px; color: var(--arc-mint); text-align: center; margin: 0 0 clamp(4px, 1.2dvh, 12px);
}
.arcade-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2px, 0.5dvh, 5px); }
.arcade-menu-item {
  position: relative; display: flex; align-items: center; gap: 15px;
  width: 100%; min-height: clamp(38px, 5.3dvh, 53px); padding: clamp(3px, 0.8dvh, 8px) 16px;
  border: 2px solid transparent; border-radius: 2px; background: transparent;
  color: #c8bddf; text-decoration: none; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;

}
.arcade-menu-number { font-size: 10px; color: var(--arc-muted); }
.arcade-menu-name {
  font: 400 clamp(24px, min(2.6vw, 3.8dvh), 38px)/1 'Jersey 15', sans-serif; letter-spacing: 2px; text-align: left; text-shadow: 0 3px 0 #080311;
}
.arcade-menu-tag {
  margin-left: auto; font-size: 18px; letter-spacing: 1px; color: var(--arc-mint); white-space: nowrap;
}
.arcade-menu-arrow {
  font-size: 18px; opacity: 0; color: var(--arc-accent);
}
.arcade-menu-item.is-selected {
  background: linear-gradient(90deg, #ffcf591b, #ffcf5905);
  color: var(--arc-accent); border-color: color-mix(in srgb, var(--arc-accent) 40%, transparent);
  box-shadow: inset 3px 0 var(--arc-accent), 0 0 20px #ffcf590b;

}
.arcade-menu-item.is-selected .arcade-menu-number, .arcade-menu-item.is-selected .arcade-menu-tag {
  color: var(--arc-accent);
}
.arcade-menu-item.is-selected .arcade-menu-arrow { opacity: 1; }
.arcade-insert {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: clamp(36px, 4.4dvh, 44px); margin-top: clamp(5px, 1.8dvh, 18px); padding: clamp(4px, 0.8dvh, 8px);
  border: 2px solid var(--arc-neon); border-radius: 2px; background: #180b27;
  box-shadow: 0 4px 0 #050209, 0 0 22px color-mix(in srgb, var(--arc-neon) 15%, transparent);
  color: #fff; font: 24px 'PixelArt', monospace; letter-spacing: 2px; cursor: pointer;

}
.arcade-demo-dot { width: 5px; height: 5px; }
.arcade-demo-arrow {
  margin-left: 0; color: var(--arc-neon); font-size: 15px;
}
.arcade-selection-hint {
  min-height: clamp(14px, 2dvh, 20px); margin: clamp(6px, 1.3dvh, 13px) 0 0; font-size: 17px; line-height: 1.1; color: var(--arc-muted);
}
/* Contour de secours, au plus bas : les éléments qui ont le curseur d'écran (arcade-ui.css) le coupent. */
:where(.arcade-home-body :is(button, a, input)):focus-visible {
  outline: 2px solid var(--arc-accent); outline-offset: 4px;
}
.arcade-home-body :is(.arcade-picker, .arcade-util, .arcade-insert, .arcade-side-link, .arcade-option, .arcade-panel-cta, .arcade-panel-close, .skin-choice).is-selected {
  border-color: var(--arc-mint); background: color-mix(in srgb, var(--arc-mint) 10%, var(--arc-panel)); color: var(--arc-text);
}
.arcade-hiscores { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(6px, 1.4dvh, 14px); }
.arcade-hiscore {
  display: flex; align-items: baseline; gap: 10px; font-size: 21px;
}
.arcade-hiscore-rank {
  color: var(--arc-neon); font-size: 18px;
}
.arcade-hiscore-name { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arcade-hiscore-elo { color: var(--arc-mint); font-size: 11px; }
.arcade-hiscore:first-child .arcade-hiscore-rank, .arcade-hiscore:first-child .arcade-hiscore-elo { color: var(--arc-highlight); }
.arcade-empty-scores { padding: 10px 0 2px; color: var(--arc-muted); }
.arcade-empty-scores > .fa-solid { color: var(--arc-highlight); font-size: 22px; margin-bottom: 14px; }
.arcade-empty-scores p { color: var(--arc-text); font-size: 22px; margin-bottom: 5px; }
.arcade-empty-scores > span:last-child { font-size: 18px; line-height: 1.2; display: block; }
.arcade-keys { display: grid; gap: clamp(4px, 1dvh, 10px); margin: 0; }
.arcade-key-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--arc-muted); font-size: 20px;
}
.arcade-key-row dt { font-weight: normal; }
.arcade-key-row dd { display: flex; gap: 5px; margin: 0; }
.arcade-home-body .arcade-cabinet kbd {
  display: inline-block; min-width: 26px; padding: 0 6px; text-align: center;
  border: 2px solid #75608f; border-bottom-width: 4px; border-radius: 3px;
  background: #1e1230; color: #eee6ff; font: 18px/1.1 'PixelArt', monospace;

}
.arcade-side-legal {
  font-size: 16px; color: var(--arc-muted); margin: 10px 0 0; text-align: center;
}
.arcade-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(6px, 1.4dvh, 14px) 20px; border: 0; padding: 0 4px clamp(6px, 1.4dvh, 14px);

}
.arcade-news {
  min-width: 0; overflow: hidden; display: flex; align-items: center;
  height: clamp(30px, 4.2dvh, 42px); border: 2px solid #63417f; border-radius: 3px; background: #08040f;
  box-shadow: inset 0 0 18px #ff398e26, 0 3px 0 #05020a;

}
.arcade-news-label { color: var(--arc-mint); font-size: 8px; letter-spacing: 1.5px; padding: 5px 7px; border: 1px solid var(--arc-line); border-radius: 3px; }
.arcade-news-key { color: var(--arc-muted); font-size: 11px; }
.arcade-utils { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.arcade-home-body .arcade-util {
  display: inline-flex; align-items: center; gap: 7px; min-height: clamp(30px, 3.8dvh, 38px); padding: 5px 10px;
  border: 2px solid var(--arc-line); border-bottom-width: 4px; border-radius: 3px; background: var(--arc-panel);
  color: var(--arc-text); font: 18px 'PixelArt', monospace; text-decoration: none; cursor: pointer;

}
.arcade-util .fa-solid { font-size: 11px; }
.arcade-home-body .arcade-util .home-mode-icons { display: inline-grid; place-items: center; }
.arcade-home-body .arcade-util .home-mode-icons > * { grid-area: 1 / 1; }
.arcade-home-body .arcade-util .home-mode-sun { opacity: 0; }
.arcade-home-body .arcade-util .home-mode-moon { opacity: 1; }
.arcade-home-body[data-ui-mode="light"] .arcade-util .home-mode-sun { opacity: 1; }
.arcade-home-body[data-ui-mode="light"] .arcade-util .home-mode-moon { opacity: 0; }
.arcade-navigation-help {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 16px; color: var(--arc-muted);
}
.arcade-navigation-help > span { white-space: nowrap; }
.arcade-navigation-help kbd { margin-right: 4px; }
.arcade-legal {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; font-size: 15px; color: var(--arc-muted);
}
.arcade-legal a { color: inherit; text-decoration: none; }
.arcade-legal a:hover { color: var(--arc-text); text-decoration: underline; }
.arcade-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.arcade-home-body .skin-picker-modal { background: var(--arc-panel); color: var(--arc-text); }
.arcade-home-body .skin-picker-modal[hidden] { display: none; }
.arcade-home-body .skin-choice:focus-visible { outline: 2px solid var(--arc-accent); outline-offset: 2px; }
.arcade-home-body .skin-modal-backdrop.open { background: #071219aa; }

/* Écrans bas (et larges) : on sacrifie le décor avant de laisser déborder. L'accroche et
   la suraccroche ne portent aucune fonction, elles partent en premier. */
@media (min-width: 901px) and (max-height: 820px) {
  .arcade-eyebrow, .arcade-tagline { display: none; }
}
@media (min-width: 901px) and (max-height: 640px) {
  .arcade-selection-hint, .arcade-side-legal { display: none; }
  .arcade-logo-sub { margin-top: 6px; }
}
@media (max-width: 1150px) {
  .arcade-attract { gap: 24px; grid-template-columns: 210px minmax(300px, 440px) 210px; padding-inline: 0; }
  .arcade-side { padding: 20px 14px; }
  .arcade-foot { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
  .arcade-news { width: 100%; }
  .arcade-utils, .arcade-legal { justify-content: center; }
  .arcade-news { justify-content: center; }
}
@media (max-width: 900px) {
  /* En colonne, le contenu dépasse forcément : on rend l'ascenseur. */
  .arcade-home-body { overflow: auto; }
  .arcade-cabinet { height: auto; min-height: 100dvh; overflow: visible; padding-inline: 12px; }
  .arcade-side { overflow: visible; }
  .arcade-attract { height: auto; }
  .arcade-attract { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin: auto; width: 100%; gap: 24px; padding-block: 32px; }
  .arcade-center { grid-column: 1 / -1; grid-row: 1; width: min(100%, 460px); margin: 0 auto 16px; }
  .arcade-side { align-self: start; padding: 22px; }
  .arcade-logo-main { font-size: 98px; }
  .arcade-attract-bg { inset: 0; }
  .arcade-home-body .home-stage-frame { height: min(680px, 100%); position: sticky; top: 12px; grid-area: 1 / 1; }
  .arcade-attract { grid-area: 1 / 1; }
  .arcade-cabinet.is-demo-visible .arcade-attract { display: none; }
  .arcade-cabinet.is-demo-visible .arcade-screen { min-height: 65dvh; }
  .arcade-cabinet.is-demo-visible .home-stage-frame { position: absolute; height: 100%; top: 0; }
  .arcade-navigation-help { justify-content: center; gap: 12px; }
}
@media (max-width: 540px) {
  .arcade-cabinet { padding-inline: 10px; }
  .arcade-topbar { min-height: 52px; gap: 8px; }
  .arcade-screen { border-width: 6px; border-radius: 12px; }
  .arcade-insert { font-size: 20px; letter-spacing: 1px; }
  .arcade-status { font-size: 16px; letter-spacing: 1px; gap: 7px; }
  .arcade-account-label { display: none; }
  .arcade-attract { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .arcade-attract-bg { inset: 0; }
  .arcade-center { margin-bottom: 4px; padding-inline: 8px; }
  .arcade-logo-main { font-size: 88px; }
  .arcade-eyebrow { font-size: 14px; letter-spacing: 2px; }
  .arcade-tagline { margin-bottom: 24px; font-size: 17px; }
  .arcade-menu-item { padding-inline: 8px; gap: 8px; min-height: 48px; }
  .arcade-menu-name { font-size: 25px; letter-spacing: 1px; }
  .arcade-menu-tag { font-size: 15px; letter-spacing: .5px; }
  .arcade-side { padding: 22px; }
  .arcade-player-blobby { height: 100px; }
  .arcade-utils { justify-content: center; }
  .arcade-home-body .arcade-util { min-height: 44px; }
  .arcade-legal a { padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-cabinet *, .arcade-cabinet *::before, .arcade-cabinet *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* CRT texture stays faint and never flickers across readable text. */
.arcade-crt-scan, .arcade-crt-glow { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: 10px; }
.arcade-crt-scan { background: repeating-linear-gradient(0deg, #00000020 0 1px, transparent 1px 4px); }
.arcade-crt-glow { box-shadow: inset 0 0 65px #05020d88; }
.arcade-cabinet.is-demo-visible .arcade-crt-scan,
.arcade-cabinet.is-demo-visible .arcade-crt-glow { display: none; }
.arcade-side-right { background: linear-gradient(270deg, #0e051dd9, #0e051d7a); box-shadow: inset -3px 0 0 color-mix(in srgb, var(--arc-neon) 60%, transparent); }
.arcade-menu-bullet { width: 24px; height: 24px; flex: 0 0 auto; image-rendering: pixelated; opacity: 0; }
.arcade-menu-item.is-selected .arcade-menu-bullet { opacity: 1; animation: arcade-cursor .9s ease-in-out infinite alternate; }
.arcade-insert [data-arcade-insert-copy] { animation: arcade-prompt 1.8s ease-in-out infinite; }
.arcade-ticker-track { display: flex; width: max-content; animation: arcade-ticker 30s linear infinite; }
.arcade-ticker-copy { flex: 0 0 auto; white-space: nowrap; padding-right: 2ch; font: 22px 'PixelArt', monospace; letter-spacing: 2px; color: var(--arc-accent); text-shadow: 0 0 10px #ffcf5944; }
.arcade-news:is(:hover, :focus-within) .arcade-ticker-track { animation-play-state: paused; }
.arcade-home-body[data-ui-mode="light"] :is(.arcade-status, .arcade-account-label, .arcade-navigation-help, .arcade-legal) { color: #342047; text-shadow: none; }
@keyframes arcade-cursor { to { transform: translateY(-1px) scale(1.06); } }
@keyframes arcade-prompt { 50% { opacity: .58; } }
@keyframes arcade-ticker { to { transform: translateX(-50%); } }
@media (max-width: 540px) {
  .arcade-menu-bullet { width: 18px; height: 18px; }
  .arcade-menu-arrow { display: none; }
  .arcade-attract { gap: 20px; padding-bottom: 20px; }
  .arcade-side { margin-inline: 8px; }
}

/* Scale the 4:3 court beyond Phaser's 800 x 600 render size. The desktop width
   also accounts for training's compact control rail, keeping both courts equal;
   height remains the safety constraint on short displays. */
.arcade-screen .home-stage-frame {
  inset: 50% auto auto 50%;
  width: min(
    1600px,
    calc(100% - 24px),
    calc(100vw - clamp(280px, 18vw, 340px) - clamp(16px, 2vw, 32px) - (2 * clamp(12px, 1.5vw, 24px))),
    calc((100dvh - 210px) * 1.333333)
  );
  height: auto;
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--arc-mint) 38%, transparent);
  border-radius: 8px;
  box-shadow: 0 0 42px color-mix(in srgb, var(--arc-mint) 13%, transparent);
}

.arcade-screen .home-training-demo {
  object-fit: contain;
  border-radius: 7px;
}

.arcade-attract-bg {
  background:
    radial-gradient(circle at 50% 48%, transparent 0 31%, rgba(8, 2, 20, 0.22) 54%, rgba(8, 2, 20, 0.68) 100%),
    linear-gradient(var(--arc-overlay), var(--arc-overlay));
}

@media (max-width: 860px) {
  .arcade-screen .home-stage-frame {
    position: absolute;
    inset: 50% auto auto 50%;
    width: calc(100% - 18px);
    height: auto;
    top: 50%;
    transform: translate(-50%, -50%);
  }

}


/* ======================================================================
   CTA secondaires + panneaux plein-tube (remplacent les colonnes latérales)
   ====================================================================== */

.arcade-options {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(6px, 1vw, 12px);
  margin-top: clamp(4px, 1.6dvh, 18px);
}
.arcade-home-body .arcade-option {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: clamp(30px, 3.8dvh, 38px); padding: 5px clamp(10px, 1.4vw, 18px);
  border: 2px solid var(--arc-line); border-bottom-width: 4px; border-radius: 3px;
  background: var(--arc-panel); color: var(--arc-muted);
  font: clamp(14px, 1.7dvh, 17px) 'PixelArt', monospace; letter-spacing: 1px;
  cursor: pointer;
}
.arcade-option .fa-solid { font-size: .8em; color: var(--arc-mint); }
.arcade-option.is-selected .fa-solid { color: inherit; }

/* Le panneau occupe tout le tube : on quitte l'écran titre, on entre dans un sous-menu. */
.arcade-panel {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 2.4dvh, 26px) clamp(10px, 2vw, 28px);
  background: linear-gradient(rgba(8, 2, 20, .93), rgba(8, 2, 20, .97));
  animation: arcade-panel-in .16s ease-out both;
}
/* [hidden] doit gagner contre le display:flex ci-dessus. */
.arcade-panel[hidden] { display: none; }
@keyframes arcade-panel-in { from { opacity: 0; transform: translateY(6px); } }

.arcade-panel-inner {
  width: min(100%, 620px); max-height: 100%;
  display: flex; flex-direction: column; gap: clamp(8px, 1.6dvh, 16px);
  overflow: auto; scrollbar-width: thin;
}
.arcade-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; border-bottom: 2px dashed var(--arc-line);
}
.arcade-panel-title {
  display: flex; align-items: center; gap: 9px; margin: 0;
  color: var(--arc-mint); font: clamp(18px, 2.4dvh, 24px) 'PixelArt', monospace; letter-spacing: 2px;
}
.arcade-home-body .arcade-panel-close {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 2px solid var(--arc-line); border-radius: 3px;
  background: var(--arc-panel); color: var(--arc-text); cursor: pointer;
}
.arcade-panel-body { display: flex; flex-direction: column; gap: clamp(8px, 1.6dvh, 16px); }
.arcade-panel-subhead {
  margin: clamp(2px, 0.8dvh, 8px) 0 0; text-transform: uppercase;
  color: var(--arc-muted); font: clamp(13px, 1.6dvh, 16px) 'PixelArt', monospace; letter-spacing: 2px;
}
.arcade-panel-note {
  margin: 0; color: var(--arc-muted); font-size: clamp(14px, 1.8dvh, 18px); line-height: 1.25;
}
.arcade-home-body .arcade-panel-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 4px 14px;
  border: 2px solid var(--arc-line); border-bottom-width: 4px; border-radius: 3px;
  background: var(--arc-panel); color: var(--arc-accent);
  font: 17px 'PixelArt', monospace; cursor: pointer;
}

/* Panneau perso : aperçu + réglages côte à côte tant qu'il y a la place. */
.arcade-panel .arcade-player {
  flex-direction: row; align-items: center; gap: clamp(12px, 2vw, 24px);
}
.arcade-panel .arcade-player-blobby { width: auto; flex: 0 0 auto; }
.arcade-panel .arcade-stats { flex: 1; }
.arcade-panel-fields { display: flex; flex-direction: column; gap: clamp(6px, 1.2dvh, 12px); }

.arcade-skin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: clamp(5px, 1dvh, 10px);
}
.arcade-home-body .arcade-skin-grid .skin-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: clamp(4px, 1dvh, 10px) 4px;
  border: 2px solid var(--arc-line); border-radius: 3px;
  background: var(--arc-panel); color: var(--arc-muted);
  font: 15px 'PixelArt', monospace; cursor: pointer;
}
.arcade-home-body .arcade-skin-grid .skin-choice img {
  width: clamp(40px, 6dvh, 58px); height: clamp(40px, 6dvh, 58px);
  object-fit: contain; image-rendering: pixelated;
}
/* Le skin porté se distingue du curseur : liseré permanent contre surbrillance mobile. */
.arcade-home-body .arcade-skin-grid .skin-choice.active {
  border-color: var(--arc-accent); color: var(--arc-accent);
}

/* ======================================================================
   Training plein écran : la borne s'efface, il ne reste que le terrain.
   ====================================================================== */

.arcade-cabinet.is-fullscreen { grid-template-rows: minmax(0, 1fr); }
.arcade-cabinet.is-fullscreen .arcade-foot { display: none; }
.arcade-cabinet.is-fullscreen { padding-inline: 0; }
.arcade-cabinet.is-fullscreen .arcade-screen {
  margin: 0; border-width: 0; border-radius: 0; box-shadow: none;
}

@media (max-width: 900px) {
  .arcade-attract { grid-template-columns: minmax(0, 1fr); }
  .arcade-panel { position: fixed; z-index: 60; }
  .arcade-panel .arcade-player { flex-direction: column; }
}

/* Panneau perso : l'aperçu tient sa place à gauche, les réglages s'alignent dessous. */
.arcade-panel .arcade-player-blobby { width: clamp(90px, 14vw, 140px); }
.arcade-panel .arcade-picker { justify-content: flex-start; gap: 12px; }
.arcade-panel .arcade-picker-label { min-width: 7ch; text-align: left; }


/* ======================================================================
   Menu de compte en HUD : posé dans un coin de l'écran, plus de barre de site.
   ====================================================================== */

.arcade-hud-account {
  position: absolute; top: clamp(8px, 1.4dvh, 16px); right: clamp(8px, 1vw, 18px);
  z-index: 6;
}
.arcade-home-body .arcade-hud-account .user-bloc { position: static; }
.arcade-home-body .arcade-hud-account .user-login { display: none; }

/* Les deux entrées d'options prennent le même gabarit que les modes de jeu : une seule
   grammaire de menu, pas un mélange menu + boutons de site. */
.arcade-menu li:nth-last-child(2) .arcade-menu-item,
.arcade-menu li:last-child .arcade-menu-item { color: #9d93bb; }
.arcade-menu li:nth-last-child(2) .arcade-menu-item.is-selected,
.arcade-menu li:last-child .arcade-menu-item.is-selected { color: var(--arc-accent); }


/* Un seul écran de menu affiché à la fois : [hidden] doit gagner contre le display:grid. */
.arcade-menu[hidden] { display: none; }

/* L'entrée RETOUR se lit comme une sortie, pas comme un mode de jeu de plus. */
.arcade-menu-back .arcade-menu-name { color: var(--arc-muted); }
.arcade-menu-back.is-selected .arcade-menu-name { color: var(--arc-accent); }


/* L'accroche et le sur-titre assuraient l'écart entre le logo et le menu ; depuis leur
   retrait, c'est le menu qui porte sa propre respiration. */
.arcade-menu-nav { margin-top: clamp(16px, 3.4dvh, 38px); }

/* ======================================================================
   Écran-titre vivant
   ====================================================================== */

.arcade-screen {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--arc-mint) 8%, transparent), transparent 54%),
    #07030d;
  box-shadow:
    0 0 0 2px var(--arc-line),
    0 0 0 6px #090511,
    0 18px 44px #000a,
    0 0 68px color-mix(in srgb, var(--arc-neon) 24%, transparent),
    inset 0 0 42px #0008;
}

.arcade-screen::before,
.arcade-screen::after {
  content: '';
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* Internal cabinet screen -------------------------------------------------
   Training and ranking replace the title layer without replacing the page.
   The toolbar belongs to the cabinet, so both server-rendered screens keep the
   same visual frame and the same Escape/Retour affordance. */
.arcade-content-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: clamp(54px, 7dvh, 72px) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 10px;
  background: #0b0711;
  animation: arcade-content-enter .24s cubic-bezier(.2,.8,.2,1) both;
}

.arcade-content-screen[hidden] { display: none; }

/* Ranking already owns its title and Back control. Let it use the whole tube
   instead of stacking the training toolbar above another page header. */
.arcade-content-screen[data-content-kind="ranking"] {
  grid-template-rows: minmax(0, 1fr);
}
.arcade-content-screen[data-content-kind="ranking"] .arcade-content-toolbar {
  display: none;
}

.arcade-content-toolbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px clamp(10px, 1.4vw, 20px);
  border-bottom: 1px solid color-mix(in srgb, var(--arc-line) 72%, transparent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent),
    color-mix(in srgb, var(--arc-bg) 90%, #000 10%);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.arcade-content-back,
.arcade-content-brand {
  border: 0;
  color: var(--arc-text);
  background: transparent;
  font-family: 'PixelArt', monospace;
  cursor: pointer;
}

.arcade-content-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--arc-muted);
  font-size: clamp(12px, 1.5dvh, 15px);
  letter-spacing: 1px;
}

.arcade-content-back kbd {
  padding: 4px 7px 3px;
  border: 1px solid var(--arc-line);
  border-bottom-width: 3px;
  border-radius: 3px;
  color: var(--arc-accent);
  background: rgba(0,0,0,.28);
  font: inherit;
}

.arcade-content-back:is(:hover, :focus-visible) {
  color: var(--arc-accent);
  outline: 2px solid color-mix(in srgb, var(--arc-accent) 64%, transparent);
  outline-offset: 2px;
}

.arcade-content-brand {
  display: grid;
  justify-items: center;
  gap: 1px;
  line-height: .8;
  filter: drop-shadow(0 3px 0 #314941) drop-shadow(0 5px 8px rgba(0,0,0,.4));
}

.arcade-content-brand-main {
  display: flex;
  gap: .2em;
  font: 400 clamp(28px, 4.4dvh, 46px)/.78 'Jersey 15', sans-serif;
  letter-spacing: .015em;
}

.arcade-content-brand-main span {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.arcade-content-brand-main span:first-child {
  background-image: repeating-linear-gradient(0deg, #f3f0df 0 3px, #d5d2c5 3px 5px, #f3f0df 5px 7px);
}

.arcade-content-brand-main span:last-child {
  background-image: repeating-linear-gradient(0deg, #a7dccb 0 3px, #73ad9c 3px 5px, #a7dccb 5px 7px);
}

.arcade-content-brand-sub {
  padding-left: .35em;
  color: #f6cd72;
  font: clamp(7px, 1dvh, 10px)/1 'Numbers', monospace;
  letter-spacing: .32em;
}

.arcade-content-brand:is(:hover, :focus-visible) {
  transform: translateY(-1px) scale(1.025);
  outline: none;
}

.arcade-content-mode {
  justify-self: end;
  color: var(--arc-mint);
  font-size: clamp(11px, 1.5dvh, 15px);
  letter-spacing: 1px;
  text-align: right;
}

.arcade-content-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #17171f;
}

.arcade-content-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #17171f;
}

.arcade-ranking-view {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #080510;
}
.arcade-ranking-view[hidden] { display: none; }
.arcade-ranking-view .ranking-page-shell.ranking-arcade-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(12px, 1.8vw, 22px);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 56px rgba(0,0,0,.36);
}
.arcade-ranking-error {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: var(--arc-muted);
}
.arcade-ranking-error strong { color: var(--arc-accent); font-size: clamp(18px, 2.5vw, 28px); }
.arcade-ranking-error button {
  padding: 8px 12px;
  border: 1px solid var(--arc-line);
  border-bottom-width: 4px;
  color: var(--arc-text);
  background: var(--arc-panel);
  font: 13px 'PixelArt', monospace;
  cursor: pointer;
}

.arcade-content-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--arc-muted);
  background: #0b0711;
  font-size: clamp(14px, 2dvh, 20px);
  letter-spacing: 1px;
  transition: opacity .18s ease, visibility .18s;
}

.arcade-content-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.arcade-content-loader-ball {
  width: 22px;
  height: 22px;
  border: 4px solid var(--arc-accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: arcade-content-spin .7s linear infinite;
}

.arcade-cabinet.is-content-open > .arcade-foot { opacity: .72; }
.arcade-cabinet.is-content-open :is(.arcade-crt-scan, .arcade-crt-glow) {
  z-index: 21;
  display: block;
}
.arcade-cabinet.is-content-open .arcade-crt-scan { opacity: .22; }
.arcade-cabinet.is-content-open .arcade-crt-glow { opacity: .7; }

@keyframes arcade-content-enter {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes arcade-content-spin { to { transform: rotate(360deg); } }

@media (max-width: 680px) {
  .arcade-content-toolbar { grid-template-columns: auto 1fr auto; }
  .arcade-content-back span, .arcade-content-mode { display: none; }
  .arcade-content-brand { justify-self: center; }
}

.arcade-screen::before {
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(112deg, transparent 8%, rgba(255,255,255,.025) 22%, transparent 37%),
    radial-gradient(ellipse at 50% 105%, color-mix(in srgb, var(--arc-neon) 13%, transparent), transparent 58%);
  mix-blend-mode: screen;
}

.arcade-screen::after {
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--arc-mint) 16%, transparent);
  border-radius: 9px;
  box-shadow: inset 0 0 90px rgba(3, 0, 10, .38);
}

.arcade-attract-bg {
  /* A simple translucent grade keeps the match readable without forcing the
     browser to filter and recompose the full moving canvas on every frame. */
  background:
    radial-gradient(circle at 50% 48%, rgba(8, 2, 20, .08) 0 26%, rgba(8, 2, 20, .36) 72%, rgba(8, 2, 20, .58) 100%),
    rgba(8, 2, 20, .18);
  transition: background-color .28s ease;
}

.arcade-cabinet.is-menu-ready .arcade-attract-bg {
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 2, 20, .14) 0 24%, rgba(8, 2, 20, .42) 72%, rgba(8, 2, 20, .62) 100%),
    rgba(8, 2, 20, .2);
}

.arcade-center {
  position: relative;
  width: min(100%, 680px);
  padding: clamp(18px, 3dvh, 34px) clamp(14px, 2.2vw, 30px);
  margin: auto;
  isolation: isolate;
}

.arcade-center::before {
  content: none;
}

.arcade-cabinet.is-menu-ready .arcade-center::before {
  content: none;
}

.arcade-logo {
  filter: drop-shadow(0 14px 28px #040109a6);
  transform-origin: 50% 50%;
  animation: arcade-logo-arrive .62s cubic-bezier(.2,.8,.2,1) both;
  transition: transform .3s ease;
}

.arcade-logo-main {
  filter:
    drop-shadow(0 4px 0 #314941)
    drop-shadow(0 6px 0 rgba(3, 8, 12, .45))
    drop-shadow(0 0 18px color-mix(in srgb, var(--arc-mint) 18%, transparent));
}

/* The large title keeps the original, solid two-colour treatment. The global
   CRT layer already draws its scanlines without altering the letter faces. */
.arcade-logo-main span:first-child { color: #f3f0df; }
.arcade-logo-main span:last-child { color: #93cbb9; }

.arcade-logo-sub {
  text-shadow: 0 0 14px color-mix(in srgb, var(--arc-accent) 38%, transparent);
}

.arcade-start {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: min(100%, 370px);
  min-height: 54px;
  margin: clamp(22px, 4dvh, 42px) auto 0;
  padding: 8px 18px;
  overflow: hidden;
  border: 2px solid var(--arc-accent);
  border-bottom-width: 5px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 212, 90, .16), rgba(255, 212, 90, .05)), rgba(10, 4, 20, .84);
  box-shadow: 0 0 32px color-mix(in srgb, var(--arc-accent) 22%, transparent), inset 0 0 24px rgba(255,255,255,.025);
  color: var(--arc-text);
  font-family: 'PixelArt', monospace;
  cursor: pointer;
  animation: arcade-start-pulse 1.65s ease-in-out infinite;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.arcade-start::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-18deg);
  animation: arcade-start-shine 2.8s ease-in-out infinite;
}

.arcade-start-key {
  padding: 5px 7px 3px;
  border: 1px solid color-mix(in srgb, var(--arc-accent) 62%, transparent);
  border-bottom-width: 3px;
  border-radius: 3px;
  color: var(--arc-accent);
  font-size: clamp(11px, 1.5dvh, 15px);
  letter-spacing: 1px;
}

.arcade-start-copy {
  font: clamp(22px, 3dvh, 30px) 'Jersey 15', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.arcade-start-chevron { color: var(--arc-mint); font-size: 22px; }

.arcade-menu-nav,
.arcade-selection-hint {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.98);
  pointer-events: none;
}

/* On the title screen, hidden menu content must not take up space. This keeps
   the logo and CTA centred together inside the 4:3 court. */
.arcade-cabinet:not(.is-menu-ready) .arcade-menu-nav,
.arcade-cabinet:not(.is-menu-ready) .arcade-selection-hint {
  display: none;
}

.arcade-menu-nav { margin-top: clamp(10px, 2dvh, 22px); }

.arcade-cabinet.is-menu-ready .arcade-start {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(.94);
  pointer-events: none;
}

.arcade-cabinet.is-menu-ready .arcade-menu-nav,
.arcade-cabinet.is-menu-ready .arcade-selection-hint {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .26s .1s ease, transform .28s .08s cubic-bezier(.2,.8,.2,1), visibility 0s;
}

.arcade-menu:not([hidden]) { animation: arcade-menu-enter .2s ease-out both; }

.arcade-menu-item {
  overflow: visible;
  isolation: isolate;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(9, 3, 18, .82), rgba(9, 3, 18, .62) 76%, rgba(9, 3, 18, .3));
  box-shadow: inset 0 1px rgba(255, 255, 255, .045), inset 0 -1px rgba(0, 0, 0, .34);
  transition: color .16s ease, background .2s ease, box-shadow .2s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}

.arcade-menu-item::before,
.arcade-menu-item::after {
  content: '';
  position: absolute;
  top: 21%;
  width: 12px;
  height: 58%;
  opacity: 0;
  border-top: 3px solid var(--arc-accent);
  border-bottom: 3px solid var(--arc-accent);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--arc-accent) 72%, transparent));
  transform: scale(.55);
  pointer-events: none;
  transition: opacity .14s ease, transform .2s cubic-bezier(.2,.85,.25,1);
}
.arcade-menu-item::before {
  left: 1px;
  border-left: 3px solid var(--arc-accent);
  transform-origin: left center;
}
.arcade-menu-item::after {
  right: 1px;
  border-right: 3px solid var(--arc-accent);
  transform-origin: right center;
}

.arcade-menu-item.is-selected {
  border-color: transparent;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--arc-accent) 18%, rgba(12, 4, 23, .92)), rgba(12, 4, 23, .82) 78%, rgba(12, 4, 23, .52));
  box-shadow:
    inset 4px 0 var(--arc-accent),
    inset 0 1px rgba(255, 255, 255, .07),
    0 0 22px color-mix(in srgb, var(--arc-accent) 12%, transparent);
  animation: arcade-selection-in .18s cubic-bezier(.2,.8,.2,1) both;
}

.arcade-menu-item.is-selected::before,
.arcade-menu-item.is-selected::after { opacity: 1; transform: scale(1); }
.arcade-menu-item.is-selected .arcade-menu-name {
  text-shadow: 0 3px 0 #080311, 0 0 14px color-mix(in srgb, var(--arc-accent) 42%, transparent);
}
.arcade-menu-item.is-selected .arcade-menu-tag {
  text-shadow: 0 0 10px color-mix(in srgb, var(--arc-accent) 42%, transparent);
}
.arcade-menu-item:not(.is-selected) .arcade-menu-name {
  text-shadow: 0 3px 0 #080311, 0 0 9px rgba(8, 3, 17, .82);
}
.arcade-menu-item:not(.is-selected) .arcade-menu-tag {
  text-shadow: 0 2px 0 #080311, 0 0 9px rgba(8, 3, 17, .78);
}
.arcade-cabinet.is-menu-ready .arcade-selection-hint {
  color: #e9e1f5;
  text-shadow: 0 2px 0 #080311, 0 0 9px rgba(8, 3, 17, .86);
}
.arcade-menu-arrow { display: none; }
.arcade-menu-item:active { transform: scale(.992); }
.arcade-home-body .arcade-menu-item:focus-visible { outline: none; }

/* Every entry belongs to the same menu hierarchy. Secondary actions no longer
   fade to a different colour, including Options, Ranking and Back. */
.arcade-menu .arcade-menu-item,
.arcade-menu li:nth-last-child(2) .arcade-menu-item,
.arcade-menu li:last-child .arcade-menu-item {
  color: #eee8f7;
}
.arcade-menu .arcade-menu-back .arcade-menu-name { color: inherit; }
.arcade-menu .arcade-menu-item.is-selected,
.arcade-menu li:nth-last-child(2) .arcade-menu-item.is-selected,
.arcade-menu li:last-child .arcade-menu-item.is-selected {
  color: var(--arc-accent);
}


.arcade-hud-status {
  position: absolute;
  top: clamp(10px, 1.5dvh, 18px);
  left: clamp(10px, 1.2vw, 20px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.arcade-live-pill,
.arcade-player-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--arc-line) 80%, transparent);
  border-radius: 3px;
  background: rgba(8, 3, 16, .76);
  box-shadow: 0 3px 0 rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.04);
  color: var(--arc-muted);
  font-size: clamp(12px, 1.5dvh, 15px);
  letter-spacing: 1px;
}

.arcade-live-pill { color: #a5fa88; }
.arcade-player-pill .fa-solid { color: var(--arc-accent); font-size: .8em; }
.arcade-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #71ff8e;
  box-shadow: 0 0 10px #71ff8e;
  animation: arcade-live 1.5s ease-in-out infinite;
}

.arcade-crt-scan { opacity: .62; }
.arcade-crt-glow { box-shadow: inset 0 0 92px #05020d96; }

/* Visibility on descendants can override an inherited hidden value. Use display
   here so the menu can never remain painted above interactive training. */
.arcade-cabinet.is-demo-visible .arcade-attract { display: none; }

/* The options live inside the game flow instead of a website toolbar. */
.arcade-system-list { display: grid; gap: 7px; }
.arcade-home-body .arcade-system-row {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 2px solid transparent;
  border-radius: 3px;
  background: rgba(8, 3, 16, .44);
  color: var(--arc-text);
  text-align: left;
  text-decoration: none;
  font-family: 'PixelArt', monospace;
  cursor: pointer;
}
.arcade-system-row.is-selected {
  border-color: color-mix(in srgb, var(--arc-accent) 50%, transparent);
  background: color-mix(in srgb, var(--arc-accent) 10%, rgba(8, 3, 16, .7));
}
.arcade-system-icon { color: var(--arc-mint); text-align: center; }
.arcade-system-label { font-size: clamp(16px, 2.1dvh, 20px); }
.arcade-system-value { color: var(--arc-accent); font-size: clamp(13px, 1.8dvh, 17px); font-weight: normal; white-space: nowrap; }
.arcade-system-arrows { color: var(--arc-muted); text-align: right; }
.arcade-home-body .arcade-system-row .home-mode-icons { display: inline-grid; place-items: center; }
.arcade-home-body .arcade-system-row .home-mode-icons > * { grid-area: 1 / 1; }
.arcade-home-body .arcade-system-row .home-mode-sun { opacity: 0; }
.arcade-home-body .arcade-system-row .home-mode-moon { opacity: 1; }
.arcade-home-body[data-ui-mode="light"] .arcade-system-row .home-mode-sun { opacity: 1; }
.arcade-home-body[data-ui-mode="light"] .arcade-system-row .home-mode-moon { opacity: 0; }

/* Compact cabinet footer: news + controls, without a desktop utility bar. */
.arcade-foot {
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 8px 18px;
}
.arcade-foot-meta { display: grid; justify-items: end; gap: 5px; }
.arcade-navigation-help { justify-content: flex-end; gap: 12px; }
.arcade-legal { font-size: 13px; }

@keyframes arcade-logo-arrive {
  from { opacity: 0; transform: translateY(-18px) scale(1.08); filter: blur(5px); }
}
@keyframes arcade-start-pulse {
  50% { box-shadow: 0 0 46px color-mix(in srgb, var(--arc-accent) 32%, transparent), inset 0 0 28px rgba(255,255,255,.04); }
}
@keyframes arcade-start-shine {
  0%, 48% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  62% { opacity: 1; }
  82%, 100% { transform: translateX(520%) skewX(-18deg); opacity: 0; }
}
@keyframes arcade-menu-enter {
  from { opacity: 0; transform: translateX(16px); }
}
@keyframes arcade-selection-in {
  from { opacity: .68; transform: translateX(-3px); filter: brightness(.84); }
  to { opacity: 1; transform: translateX(2px); filter: brightness(1); }
}
@keyframes arcade-live { 50% { opacity: .45; } }

@media (max-width: 1150px) {
  .arcade-foot { grid-template-columns: 1fr; }
  .arcade-foot-meta { width: 100%; grid-template-columns: 1fr auto; align-items: center; justify-items: stretch; }
  .arcade-navigation-help { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .arcade-player-pill { display: none; }
  .arcade-hud-status { top: 8px; left: 8px; }
  .arcade-live-pill { min-height: 26px; padding: 3px 7px; font-size: 11px; }
  .arcade-center { padding-inline: 8px; }
  .arcade-start { min-width: min(92%, 330px); margin-top: 24px; }
  .arcade-foot-meta { grid-template-columns: 1fr; justify-items: center; }
  .arcade-navigation-help, .arcade-legal { justify-content: center; }
  .arcade-system-label { font-size: 16px; }
}

@media (max-width: 420px) {
  .arcade-start { grid-template-columns: auto auto; gap: 8px; }
  .arcade-start-key { display: none; }
  .arcade-system-row { grid-template-columns: 24px minmax(0, 1fr) auto !important; }
  .arcade-system-arrows { display: none; }
  .arcade-navigation-help span:nth-child(2) { display: none; }
}