/* Shared, restrained title-screen presentation. Loaded after the legacy arcade
   skin so the home, panels and internal screens use one set of visual tokens. */
body.arcade-home-body[data-theme] {
  --arc-bg: #101817;
  --arc-panel: #182320;
  --arc-text: #f3f0df;
  --arc-muted: #a8b5ac;
  --arc-line: #34483f;
  --arc-accent: var(--theme-accent);
  --arc-mint: #93cbb9;
  --arc-neon: #93cbb9;
  --screen-space: clamp(16px, 3vw, 48px);
  background: var(--arcade-backdrop);
  color: var(--arc-text);
  font-family: 'Jersey 15', sans-serif;
  overflow: hidden;
}
/* Inside the frame (panels, ranking, training shell) the tokens follow the
   screen palette of arcade-ui.css: Thème = CTA color, Interface = surface. */
.arcade-home-body :is(.arcade-panel, .arcade-content-screen) {
  --arc-bg: var(--screen-bg);
  --arc-panel: var(--screen-panel);
  --arc-text: var(--screen-ink);
  --arc-muted: var(--screen-muted);
  --arc-line: var(--screen-line);
  --arc-accent: var(--screen-accent);
  --arc-mint: var(--screen-mint);
  color: var(--arc-text);
}
.arcade-home-body .arcade-cabinet {
  --home-scene-width: var(--arcade-frame-width);
  height: 100dvh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
}
.arcade-home-body .arcade-screen {
  container-type: size;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--arcade-room);
  box-shadow: none;
}
.arcade-screen::before, .arcade-screen::after,
.arcade-crt-scan, .arcade-crt-glow { display: none !important; }
.arcade-home-body .arcade-screen .home-stage-frame {
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--home-scene-width);
  height: auto;
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 0;
  /* The frame itself is drawn by .arcade-bezel. The boot screen behind the demo
     is a calm, theme-neutral night, never the striped cabinet. */
  box-shadow: none;
  background: radial-gradient(ellipse at 50% 42%, #1a2824 0%, #111a17 55%, #0b120f 100%);
}
.arcade-screen .home-training-demo { border-radius: 0; }
.arcade-home-body .arcade-attract {
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--home-scene-width);
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
  container-type: size;
  margin: 0;
  padding: 12px;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.arcade-attract-bg,
.arcade-cabinet.is-menu-ready .arcade-attract-bg {
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 46%, #08120de6 0%, #08120dc7 22%, #08120d69 48%, #08120d20 76%),
    linear-gradient(0deg, #08120dc2 0%, transparent 18%, transparent 82%, #08120d55 100%);
  backdrop-filter: none;
}
.arcade-home-body .arcade-center {
  width: min(100%, 560px);
  margin: 0 auto;
  /* Écran titre : le bloc logo + invite descend un peu sous le centre (≈ 53 % de l'écran), depuis que
     le bas de la démo n'a plus de bande. En cqh : mesuré sur l'écran 4:3 (.arcade-attract est un
     conteneur), donc identique à toutes les tailles de fenêtre. */
  padding: 6cqh 16px 0;
  transition: padding 280ms cubic-bezier(.2,.8,.2,1);
}
.arcade-logo { animation: arcade-clean-enter 180ms ease-out both; filter: none; }
.arcade-logo-main {
  font-size: clamp(54px, min(13vw, 12dvh), 132px);
  filter: drop-shadow(0 3px 0 #243e32);
  text-shadow: none;
}
.arcade-logo-main span {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.arcade-logo-main span:first-child {
  background-image: repeating-linear-gradient(0deg, #f3f0df 0 4px, #d5d2c5 4px 5px);
}
.arcade-logo-main .logo-smash {
  background-image: repeating-linear-gradient(0deg, #a7dccb 0 4px, #83b7a5 4px 5px);
}
.arcade-logo-sub { text-shadow: none; margin-top: 16px; font-size: clamp(12px, 1.5dvh, 14px); }
.arcade-logo-sub span { display: none; }
.arcade-home-body .arcade-start {
  display: block;
  min-width: 0;
  min-height: 44px;
  margin: clamp(24px, 5dvh, 48px) auto 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  color: var(--arc-accent);
  background: none;
  box-shadow: none;
  animation: arcade-clean-prompt 1.6s steps(4, end) infinite;
}
.arcade-start::before, .arcade-start-key, .arcade-start-chevron { display: none; }
.arcade-start-copy { font: clamp(24px, 3.5dvh, 34px)/1 'Jersey 15', sans-serif; letter-spacing: .06em; }
.arcade-home-body .arcade-menu-nav { width: min(100%, 330px); margin: 26px auto 0; }
/* Menu screen: the title logo stays in the flow, just smaller, so it keeps a fixed
   rhythm above the menu. Without the tagline, the block gets 8cqh of top padding so the logo clears the clouds; lower would push
   the last entries onto the demo blobs' heads. */
.arcade-logo-main { transition: font-size 280ms cubic-bezier(.2,.8,.2,1); }
.arcade-cabinet.is-menu-ready .arcade-logo-main { font-size: clamp(44px, min(11vw, 8.5dvh), 96px); }
.arcade-cabinet.is-menu-ready .arcade-logo-sub { margin-top: clamp(8px, 1.3dvh, 14px); font-size: clamp(11px, 1.4dvh, 13px); }
.arcade-home-body .arcade-cabinet.is-menu-ready .arcade-center { padding-top: 2.5cqh; padding-bottom: 5cqh; }
/* Fit the list to its entries and balance the ball cursor, so the names sit
   centred under the logo. */
.arcade-home-body .arcade-cabinet.is-menu-ready .arcade-menu-nav {
  width: fit-content;
  max-width: 100%;
  /* Logo détaché de la liste : environ une ligne de menu d'écart (≈ 2 × l'écart entre deux entrées),
     sinon il se lit comme une entrée de plus. Le bloc remonte d'autant (padding ci-dessus). */
  margin-top: clamp(16px, 6.6cqh, 56px);
  padding-right: calc(clamp(26px, 3.8dvh, 36px) + 16px);
}
.arcade-menu { gap: clamp(4px, .8dvh, 9px); }
/* Every menu level shares one grid cell: the block keeps the height of the longest
   list, so the logo never moves and each list starts on the same line below it.
   Hidden levels keep their box but stay invisible (rows() skips them). */
.arcade-home-body .arcade-menu-nav { display: grid; }
.arcade-home-body .arcade-menu-nav .arcade-menu { grid-area: 1 / 1; align-self: start; justify-self: center; }
.arcade-home-body .arcade-menu-nav .arcade-menu[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
.arcade-home-body .arcade-menu .arcade-menu-item {
  min-height: clamp(34px, 5.4dvh, 54px);
  padding: 4px 8px;
  gap: 16px;
  border: 0;
  border-radius: 0;
  color: var(--arc-text);
  background: none;
  box-shadow: none;
  transform: none;
  animation: none;
  transition: color 120ms ease;
}
.arcade-menu-item::before, .arcade-menu-item::after { content: none; }
.arcade-menu-name {
  font: clamp(25px, 4dvh, 38px)/1 'Jersey 15', sans-serif;
  letter-spacing: .045em;
}
.arcade-menu-item .arcade-menu-name,
.arcade-menu-item.is-selected .arcade-menu-name { text-shadow: 0 2px #08120d; }
.arcade-home-body .arcade-menu .arcade-menu-item:is(.is-selected, :focus-visible) { color: var(--arc-accent); }
.arcade-home-body .arcade-menu-bullet {
  width: clamp(26px, 3.8dvh, 36px);
  height: clamp(26px, 3.8dvh, 36px);
  object-fit: contain;
  filter: drop-shadow(0 2px 0 #08120d);
}
.arcade-menu-item.is-selected .arcade-menu-bullet { animation: none; transform: none; }
/* Réglage porté par la ligne (format de la partie rapide) : ‹ valeur › après le nom. */
.arcade-menu-format {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--arc-muted);
  font: clamp(17px, 2.6dvh, 26px)/1 'Jersey 15', sans-serif;
  letter-spacing: .06em;
  white-space: nowrap;
  text-shadow: 0 2px #08120d;
}
.arcade-menu-step { padding: 4px 6px; }
.arcade-home-body .arcade-menu .arcade-menu-item.is-selected .arcade-menu-format { color: var(--arc-mint); }
.arcade-home-body .arcade-menu .arcade-menu-item.is-selected .arcade-menu-step { color: var(--arc-accent); }
.arcade-home-body .arcade-selection-hint { display: none; }
.arcade-menu:not([hidden]) { animation: arcade-clean-enter 180ms ease-out both; }
/* First visit: a full screen prompt inside the same cabinet frame. */
.arcade-tutorial-invite[hidden] { display: none !important; }
.arcade-tutorial-invite {
  position: absolute; inset: 0; z-index: 12;
  display: flex; flex-direction: column; gap: clamp(16px, 4cqh, 36px);
  padding: var(--screen-pad); background: var(--screen-bg); color: var(--screen-ink);
  animation: arcade-screen-open 260ms steps(7) backwards;
}
.arcade-tutorial-invite-lead { display: flex; align-items: center; gap: clamp(8px, 1.6cqw, 16px); min-width: 0; }
.arcade-tutorial-invite .language-switcher { position: static; padding: 0; }
.arcade-tutorial-invite-body {
  display: grid; justify-items: center; align-content: center; gap: clamp(12px, 3cqh, 26px);
  width: min(100%, 860px); min-height: 0; margin: auto; text-align: center;
}
.arcade-tutorial-invite-title { margin: 0; color: var(--screen-accent); font: clamp(40px, 9cqh, 72px)/.9 'Jersey 15', sans-serif; }
/* Les 8 étapes sur une ligne ; sur un écran étroit, deux lignes de 4. */
.arcade-tutorial-invite-steps {
  display: grid; grid-template-columns: repeat(8, auto); justify-content: center; gap: clamp(6px, 1.4cqh, 10px) clamp(10px, 2cqw, 18px);
  margin: 0; padding: 0; list-style: none; counter-reset: tutorial-step;
}
.arcade-tutorial-invite-steps li {
  display: flex; align-items: center; gap: 6px; color: var(--screen-muted);
  font: clamp(17px, 3cqh, 23px)/1 'Jersey 15', sans-serif; counter-increment: tutorial-step;
  animation: arcade-screen-open 160ms steps(3) backwards; animation-delay: calc(var(--i, 0) * 50ms + 180ms);
}
.arcade-tutorial-invite-steps li::before {
  content: counter(tutorial-step); display: inline-grid; place-items: center; width: 1.25em; height: 1.25em;
  background: var(--screen-raised); color: var(--screen-accent); font: .8em/1 'PixelArt', monospace;
}
.arcade-tutorial-invite-steps li:nth-child(2) { --i: 1; } .arcade-tutorial-invite-steps li:nth-child(3) { --i: 2; }
.arcade-tutorial-invite-steps li:nth-child(4) { --i: 3; } .arcade-tutorial-invite-steps li:nth-child(5) { --i: 4; }
.arcade-tutorial-invite-steps li:nth-child(6) { --i: 5; } .arcade-tutorial-invite-steps li:nth-child(7) { --i: 6; } .arcade-tutorial-invite-steps li:nth-child(8) { --i: 7; }
@media (max-width: 1180px) { .arcade-tutorial-invite-steps { grid-template-columns: repeat(4, auto); } }
.arcade-tutorial-invite-start {
  --cursor-gap: -6px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-width: min(100%, 300px); padding: 12px 18px; border: 0; border-radius: 0;
  background: var(--screen-accent); color: var(--screen-accent-ink);
  box-shadow: inset -3px -3px color-mix(in srgb, var(--screen-accent) 70%, var(--screen-bg)), inset 3px 3px color-mix(in srgb, var(--screen-accent) 60%, var(--screen-ink));
  font: clamp(23px, 4cqh, 32px)/1 'Jersey 15', sans-serif; text-transform: uppercase; cursor: pointer;
}
.arcade-tutorial-invite-start:is(:hover, :focus-visible, .is-selected) { outline: none; background: var(--screen-mint); color: var(--screen-accent-ink); }
.arcade-tutorial-invite-start:active { transform: translate(2px, 2px); }
.arcade-tutorial-invite-arrow { font-family: 'PixelArt', monospace; }
/* Panels and game screens open like a console screen: stepped, from the centre line. */
.arcade-panel, .arcade-content-screen { animation: arcade-screen-open 260ms steps(7) backwards; }
.arcade-home-body :is(.arcade-panel, .arcade-content-screen).is-closing {
  animation: arcade-screen-close 130ms steps(5) backwards;
  pointer-events: none;
}
.arcade-cabinet.is-menu-ready .arcade-menu-nav { transition: opacity 180ms ease; transform: none; }
.arcade-home-body .arcade-hud-account { top: 16px; right: var(--screen-space); }
.arcade-home-body .user-bloc .icon-user { background: #101817b3; border: 1px solid var(--arc-line); box-shadow: none; }
.arcade-home-body .arcade-foot {
  display: flex;
  justify-content: center;
  padding: 0 10px;
  position: absolute;
  z-index: 5;
  /* Centre l'aide dans l'espace entre le bord du cadre et le bas de page. */
  inset: auto 0 max(env(safe-area-inset-bottom), calc((100dvh - var(--home-scene-width) * .75) / 4 - (var(--bezel) + 4px) / 2 - 13px));
  min-height: 26px;
  background: none;
  pointer-events: none;
  opacity: 1;
}
.arcade-home-body .arcade-navigation-help { justify-content: center; gap: clamp(12px, 3vw, 32px); color: var(--arc-muted); font: 16px 'Jersey 15', sans-serif; }
.arcade-home-body .arcade-navigation-help span:nth-child(2) { display: inline-flex; }
.arcade-home-body .arcade-navigation-help kbd { min-width: 0; padding: 0; margin-right: 5px; border: 0; background: none; color: var(--arc-text); font: inherit; }
/* Solid screen inside the stepped frame; the striped backdrop stays outside.
   margin/radius/shadow reset the legacy .player-card rules (style.css). */
.arcade-home-body .arcade-panel { position: absolute; z-index: 8; align-items: stretch; margin: 0; padding: var(--screen-pad); border-radius: 0; box-shadow: none; background: var(--arc-bg); }
/* The screen bar sits at the top of every screen; the content centers below it. */
.arcade-panel-inner { width: min(100%, 1120px); height: 100%; gap: 24px; }
.arcade-home-body .arcade-panel .arcade-panel-head { flex-shrink: 0; }
.arcade-panel-body { width: min(100%, 800px); margin: auto; }
.arcade-home-body .arcade-system-row { border: 0; background: none; box-shadow: none; border-radius: 0; font-family: 'Jersey 15', sans-serif; }
.arcade-home-body .arcade-system-row.is-selected { background: var(--screen-tint); color: var(--arc-accent); box-shadow: none; }
.arcade-home-body .arcade-panel :is(.arcade-picker-label, .arcade-field-label, .arcade-panel-note, .arcade-key-row, .arcade-system-label) { font-family: 'Jersey 15', sans-serif; font-size: 22px; }
.arcade-home-body .arcade-panel .skin-choice { background: transparent; border: 1px solid var(--arc-line); box-shadow: none; font: 18px 'Jersey 15', sans-serif; }
.arcade-home-body .arcade-panel .skin-choice.is-selected { border-color: var(--arc-accent); }
.arcade-panel .arcade-legal { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; margin-top: 20px; }
.arcade-panel .arcade-legal :is(a, button) { padding: 4px 0; border: 0; color: var(--arc-muted); background: none; font: 18px 'Jersey 15', sans-serif; }
.arcade-panel .arcade-legal :is(a, button):is(:hover, :focus-visible) { color: var(--arc-accent); }
/* Training and ranking open inside the same 4:3 frame as the home scene: the
   stepped frame and the striped backdrop around it never change. Each screen
   draws its own bar (ranking-content.pug, game.pug). */
.arcade-home-body .arcade-content-screen {
  inset: 50% auto auto 50%;
  width: var(--home-scene-width);
  height: auto;
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
  grid-template-rows: minmax(0, 1fr);
  border-radius: 0;
  background: var(--arc-bg);
}
.arcade-content-frame[hidden] { display: none; }
.arcade-home-body .arcade-ranking-view { background: var(--arc-bg); }
.arcade-home-body .arcade-ranking-view .score-screen { max-width: none; padding: var(--screen-pad); }
.arcade-home-body .arcade-ranking-view .ranking-arcade-shell {
  --rank-bg: var(--arc-bg);
  --rank-panel: var(--arc-panel);
  --rank-panel-2: var(--arc-bg);
  --rank-ink: var(--arc-text);
  --rank-dim: var(--arc-muted);
  --rank-line: var(--arc-line);
  --rank-yellow: var(--arc-accent);
  --rank-cyan: var(--arc-mint);
  --rank-pink: var(--arc-mint);
  --rank-green: var(--arc-mint);
  padding: var(--screen-space);
  box-shadow: none;
  font-family: 'Jersey 15', sans-serif;
}
.arcade-ranking-view .ranking-arcade-shell::before { background: var(--arc-bg); }
.arcade-ranking-view .ranking-arcade-main { width: min(100%, 1200px); margin: 0 auto; }
.arcade-ranking-view .ranking-arcade-title h1 { font-size: clamp(28px, 4dvh, 44px); text-shadow: none; }
.arcade-ranking-view .ranking-arcade-title > span { font: 16px 'Jersey 15', sans-serif; color: var(--arc-muted); }
.arcade-ranking-view .ranking-arcade-header { box-shadow: none; border-bottom-width: 1px; }
.arcade-ranking-view .ranking-arcade-led { animation: none; box-shadow: none; }
.arcade-ranking-view .ranking-arcade-podium-card,
.arcade-ranking-view .ranking-arcade-podium-card.is-rank-1 { background: transparent; box-shadow: none; border: 0; border-bottom: 1px solid var(--arc-line); }
.arcade-ranking-view .ranking-arcade-podium-card::after { display: none; }
.arcade-ranking-view .ranking-arcade-board { box-shadow: none; background: transparent; }
.arcade-ranking-view .ranking-arcade-board-head { background: transparent; }
.arcade-ranking-view .ranking-arcade-modes { background: transparent; border: 0; }
.arcade-ranking-view .ranking-arcade-modes a.is-active { background: none; border-color: var(--arc-accent); color: var(--arc-accent); box-shadow: none; }
.arcade-ranking-view .ranking-arcade-summary { background: none; border: 0; }
.arcade-ranking-view .ranking-arcade-summary > span { background: none; }
@keyframes arcade-clean-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes arcade-clean-prompt { 50% { opacity: .58; } }
@media (max-height: 650px) {
  .arcade-home-body .arcade-menu-nav { margin-top: 50px; }
  .arcade-menu { gap: 2px; }
}
@media (max-width: 700px) {
  .arcade-home-body .arcade-panel .arcade-player { flex-direction: row; }
  .arcade-home-body .arcade-ranking-view { overflow-y: auto; }
  .arcade-home-body .arcade-ranking-view .ranking-arcade-shell { height: auto; min-height: 100%; overflow: visible; }
  .arcade-ranking-view .ranking-arcade-summary { flex-wrap: wrap; }
  .arcade-ranking-view .ranking-arcade-summary > span { flex: 1 1 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-home-body .arcade-cabinet *, .arcade-home-body .arcade-cabinet *::before,
  .arcade-home-body .arcade-cabinet *::after { animation: none !important; transition: none !important; }
}
.arcade-home-body .arcade-panel :is(button, input, .arcade-panel-subhead, .arcade-picker-current, .arcade-system-value),
.arcade-ranking-view .ranking-arcade-exit {
  font-family: 'Jersey 15', sans-serif;
}
.arcade-home-body .arcade-cabinet.is-content-open > .arcade-foot { opacity: 1; }
@media (max-height: 650px) {
  .arcade-home-body .arcade-ranking-view { overflow-y: auto; }
  .arcade-home-body .arcade-ranking-view .ranking-arcade-shell { height: auto; min-height: 100%; overflow: visible; }
}

/* Character selection: one stage, one roster, no stacked settings cards. */
#arcade-panel-player .character-screen { width: min(100%, 960px); gap: 20px; }
.character-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); }
.character-preview { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.character-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(140px, 30dvh, 290px);
  isolation: isolate;
}
.character-stage::before, .character-stage::after { content: none; }
.arcade-home-body #arcade-panel-player #my-blobby {
  width: clamp(150px, 28dvh, 270px);
  height: clamp(150px, 28dvh, 270px);
  object-fit: contain;
  image-rendering: pixelated;
  filter: none;
  margin: 0;
}
.character-player-name { color: var(--arc-text); font: clamp(32px, 5dvh, 54px)/1 'Jersey 15', sans-serif; }
.character-player-name { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.character-stats { display: flex; justify-content: center; gap: 24px; margin: 24px 0 0; }
.character-stats dt { font: 13px 'Jersey 15', sans-serif; letter-spacing: .06em; color: var(--arc-muted); }
.character-stats dd { margin: 6px 0 0; color: var(--arc-text); font: 15px 'Numbers', monospace; }
.character-customize { display: grid; gap: 22px; min-width: 0; }
.character-section { min-width: 0; }
.character-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.character-section-heading h3, .character-name-label { margin: 0; color: var(--arc-text); font: 23px/1 'Jersey 15', sans-serif; }
.character-section-heading > span { color: var(--arc-muted); font: 16px 'Jersey 15', sans-serif; text-transform: capitalize; }
#arcade-panel-player .character-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.arcade-home-body #arcade-panel-player .character-roster .skin-choice {
  position: relative;
  min-width: 0;
  min-height: 92px;
  padding: 8px 4px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--arc-muted);
  background: color-mix(in srgb, var(--arc-mint) 2%, transparent);
  box-shadow: none;
  font: 19px 'Jersey 15', sans-serif;
  transition: border-color 120ms ease, color 120ms ease;
}
.arcade-home-body #arcade-panel-player .character-roster .skin-choice img { width: 54px; height: 54px; }
.arcade-home-body #arcade-panel-player .character-roster .skin-choice.active { background: color-mix(in srgb, var(--arc-mint) 5%, transparent); color: var(--arc-mint); }
.arcade-home-body #arcade-panel-player .character-roster .skin-choice:is(.is-selected, :focus-visible) { border-color: var(--arc-accent); color: var(--arc-accent); outline: none; }
.character-colors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.arcade-home-body .character-color {
  display: grid;
  place-items: center;
  width: 100%;
  height: 44px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  cursor: pointer;
}
.character-color > .character-color-chip { width: 24px; height: 24px; border: 1px solid #ffffff30; border-radius: 2px; background: var(--character-color); }
.character-color[aria-pressed="true"] > .character-color-chip { box-shadow: 0 0 0 2px var(--arc-bg), 0 0 0 3px var(--arc-mint); }
.arcade-home-body .character-color:is(.is-selected, :focus-visible) { border-color: var(--arc-accent); outline: none; }
#arcade-panel-player .arcade-nameplate { display: grid; gap: 10px; width: 100%; padding: 0; border: 0; background: none; box-shadow: none; }
.arcade-home-body #arcade-panel-player #login {
  width: 100% !important;
  max-width: none;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--arc-line);
  border-radius: 0;
  color: var(--arc-text);
  background: color-mix(in srgb, var(--arc-mint) 2%, transparent);
  box-shadow: none;
  text-align: left;
  font: 24px 'Jersey 15', sans-serif;
}
.arcade-home-body #arcade-panel-player #login:focus { border-bottom-color: var(--arc-accent); outline: 1px solid var(--arc-accent); outline-offset: 2px; }
.character-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 0; }
.character-footer > span { color: var(--arc-muted); font: 17px 'Jersey 15', sans-serif; }
.arcade-home-body .character-done { min-height: 44px; padding: 6px 16px; border: 1px solid var(--arc-line); border-radius: 2px; color: var(--arc-accent); background: none; font: 24px 'Jersey 15', sans-serif; cursor: pointer; }
.character-done:is(.is-selected, :focus-visible) { border-color: var(--arc-accent); }
@media (max-width: 600px) {
  #arcade-panel-player .character-screen { gap: 16px; }
  .character-layout { grid-template-columns: 1fr; gap: 22px; }
  .character-stage { height: 150px; }
  .arcade-home-body #arcade-panel-player #my-blobby { width: 130px; height: 130px; }
  .character-stats { margin-top: 12px; }
  .character-footer { justify-content: center; }
}
@media (min-width: 601px) and (max-height: 680px) {
  #arcade-panel-player .character-screen { gap: 12px; }
  .character-customize { gap: 12px; }
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice { min-height: 70px; padding: 4px; }
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice img { width: 38px; height: 38px; }
}

/* Fighting-game selection screen: large portrait and close-set roster.
   Focus decoration stays inside controls so the scrolling panel never clips it. */
#arcade-panel-player .character-layout, #arcade-panel-player .character-footer { flex-shrink: 0; }
#arcade-panel-player .character-layout { margin-block: auto; }
#arcade-panel-player .character-preview { position: relative; align-self: center; }
#arcade-panel-player .character-stage {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--arc-mint) 5.5%, transparent), transparent 66%);
}
#arcade-panel-player .character-player-name {
  font-size: clamp(40px, 7dvh, 72px);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-shadow: 3px 3px var(--screen-shadow);
}
#arcade-panel-player .character-roster { gap: 4px; }
.arcade-home-body #arcade-panel-player .character-roster .skin-choice {
  overflow: visible;
  min-height: 108px;
  border: 2px solid transparent;
  border-radius: 0;
  padding: 9px 4px 5px;
  background: color-mix(in srgb, var(--arc-mint) 3.5%, transparent);
  gap: 0;
}
.arcade-home-body #arcade-panel-player .character-roster .skin-choice img { width: 70px; height: 70px; }
.arcade-home-body #arcade-panel-player .character-roster .skin-choice.active { background: color-mix(in srgb, var(--arc-mint) 8.5%, transparent); }
.arcade-home-body #arcade-panel-player .character-roster .skin-choice:is(.is-selected, :focus-visible) {
  z-index: 1;
  border-color: var(--arc-accent);
  background: color-mix(in srgb, var(--arc-accent) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--arc-bg);
}
.arcade-home-body #arcade-panel-player .character-done {
  min-height: 40px;
  border: 0;
  padding: 6px 12px;
  border-radius: 0;
  box-shadow: none;
  background: none;
  outline: none;
  outline-offset: 0;
  color: var(--screen-ink);
  font-size: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.arcade-home-body #arcade-panel-player .character-done:is(:hover, .is-selected, :focus-visible) {
  color: var(--arc-accent); background: var(--screen-tint);
}
.arcade-home-body #arcade-panel-player .character-done:active { transform: translate(2px, 2px); }
.arcade-home-body #arcade-panel-player #login:focus { outline-offset: -2px; }
@media (min-width: 601px) and (max-height: 680px) {
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice { min-height: 78px; padding: 4px; }
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice img { width: 44px; height: 44px; }
}
@media (max-width: 600px) {
  #arcade-panel-player .character-player-name { font-size: 38px; }
}

/* Reset the old picker image's align-self:end: these cells use a flex column. */
.arcade-home-body #arcade-panel-player .character-roster .skin-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  gap: 4px;
  text-align: center;
}
.arcade-home-body #arcade-panel-player .character-roster .skin-choice img {
  display: block;
  align-self: center;
  flex: 0 0 auto;
  margin: 0;
  object-position: center;
}
#arcade-panel-player .character-footer { justify-content: flex-end; }
#arcade-panel-player .character-player-name { text-transform: none; }

/* Give the portrait, roster and name their own breathing room. */
#arcade-panel-player .character-screen {
  width: min(100%, 1120px);
  gap: clamp(24px, 4dvh, 48px);
}
#arcade-panel-player .character-layout { gap: clamp(32px, 7vw, 104px); }
#arcade-panel-player .character-customize { gap: clamp(28px, 4dvh, 44px); }
#arcade-panel-player .character-section-heading { margin-bottom: 16px; }
#arcade-panel-player .character-roster { gap: 12px; }
.arcade-home-body #arcade-panel-player .character-roster .skin-choice {
  min-height: 120px;
  padding: 12px;
  gap: 8px;
}
#arcade-panel-player .character-stats { margin-top: 32px; gap: 32px; }
/* Label then entry: the legacy .player-nameplate 3-column grid squeezed the label. */
#arcade-panel-player .arcade-nameplate { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
#arcade-panel-player .character-name-label { color: var(--arc-text); font: 23px/1 'Jersey 15', sans-serif; }
#arcade-panel-player .character-name-entry {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 4px 16px;
  border: 1px solid var(--arc-line);
  border-radius: 2px;
  background: color-mix(in srgb, var(--arc-mint) 3%, transparent);
  transition: border-color 120ms ease, background-color 120ms ease;
}
/* Saisie : le curseur d'écran (arcade-ui.css) autour du champ, sur une teinte. */
#arcade-panel-player .character-name-entry:focus-within { background: var(--screen-tint); }
#arcade-panel-player .character-name-mark { color: var(--arc-accent); font: 34px/1 'Jersey 15', sans-serif; }
.arcade-home-body #arcade-panel-player .character-name-entry #login,
.arcade-home-body #arcade-panel-player .character-name-entry #login:focus {
  min-width: 0;
  width: 100% !important;
  min-height: 46px;
  padding: 6px 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--arc-text);
  caret-color: var(--arc-accent);
  font: 28px/1.2 'Jersey 15', sans-serif;
  letter-spacing: .035em;
}
#arcade-panel-player .character-name-entry #login::placeholder { color: var(--arc-muted); opacity: .7; }
#arcade-panel-player .character-name-error { grid-column: 1 / -1; margin: 0; color: var(--arc-accent); font: 19px/1.2 'Jersey 15', sans-serif; }
#arcade-panel-player .character-name-error[hidden] { display: none; }
@media (max-width: 600px) {
  #arcade-panel-player .character-screen { gap: 28px; }
  #arcade-panel-player .character-layout { gap: 32px; }
  #arcade-panel-player .character-roster { gap: 10px; }
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice { min-height: 110px; padding: 8px; }
}
@media (min-width: 601px) and (max-height: 760px) {
  /* Scaled on the frame height (cqh) so the whole screen fits without scrolling. */
  #arcade-panel-player .character-screen { gap: clamp(12px, 2.4cqh, 20px); }
  #arcade-panel-player .character-stage { height: clamp(140px, 30cqh, 290px); }
  #arcade-panel-player .character-footer { padding-top: 0; }
  #arcade-panel-player .character-customize { gap: clamp(12px, 2.4cqh, 22px); }
  #arcade-panel-player .character-section-heading { margin-bottom: clamp(6px, 1.4cqh, 12px); }
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice { min-height: clamp(72px, 14cqh, 88px); padding: 8px; gap: 4px; }
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice img { width: 48px; height: 48px; }
}

/* The HUD belongs to the scene, not to an outer cabinet. */
.arcade-home-body .arcade-cabinet { position: relative; }
.arcade-home-body .arcade-cabinet.is-content-open > .arcade-foot,
.arcade-home-body .arcade-cabinet:has(.arcade-panel:not([hidden])) > .arcade-foot { display: none; }
.arcade-home-body .arcade-content-viewport,
.arcade-home-body .arcade-content-frame { background: var(--arc-bg); }
.arcade-home-body .arcade-hud-account { top: max(16px, env(safe-area-inset-top)); }
/* The same letterboxing applies in fullscreen; short/narrow scenes get a
   compact menu instead of enlarging or cropping the 4:3 court. */
.arcade-home-body .arcade-cabinet.is-fullscreen > .arcade-foot { display: flex; }
.arcade-home-body .arcade-cabinet.is-fullscreen.is-content-open > .arcade-foot,
.arcade-home-body .arcade-cabinet.is-fullscreen:has(.arcade-panel:not([hidden])) > .arcade-foot { display: none; }
@container (max-height: 420px) {
  .arcade-home-body .arcade-center,
  .arcade-home-body .arcade-cabinet.is-menu-ready .arcade-center { padding: 0 8px; }
  .arcade-home-body .arcade-logo-main,
  .arcade-home-body .arcade-cabinet.is-menu-ready .arcade-logo-main { font-size: clamp(32px, 15cqh, 54px); }
  .arcade-home-body .arcade-logo-sub,
  .arcade-home-body .arcade-cabinet.is-menu-ready .arcade-logo-sub { margin-top: 8px; font-size: 10px; }
  .arcade-home-body .arcade-cabinet.is-menu-ready .arcade-menu-nav { margin-top: 12px; padding-right: 32px; }
  .arcade-home-body .arcade-menu { gap: 2px; }
  .arcade-home-body .arcade-menu .arcade-menu-item { min-height: 28px; padding: 2px 4px; gap: 8px; }
  .arcade-home-body .arcade-menu-name { font-size: clamp(21px, 8cqh, 27px); }
  .arcade-home-body .arcade-menu-bullet { width: 24px; height: 24px; }
  .arcade-home-body .arcade-start { margin-top: 16px; }
}
/* Small phone screens keep a clear top strip for the player HUD. */
@container (max-height: 320px) {
  .arcade-home-body .arcade-cabinet.is-menu-ready .arcade-center { padding: 11cqh 8px 0; }
  .arcade-home-body .arcade-cabinet.is-menu-ready .arcade-logo-main { font-size: clamp(24px, 11cqh, 36px); }
  .arcade-home-body .arcade-cabinet.is-menu-ready .arcade-menu-nav { margin-top: 16px; }
  .arcade-home-body .arcade-menu .arcade-menu-item { min-height: clamp(20px, 8cqh, 26px); padding-block: 0; }
  .arcade-home-body .arcade-menu-name { font-size: clamp(18px, 7.5cqh, 24px); }
  .arcade-home-body .arcade-menu-bullet { width: 20px; height: 20px; }
}

/* Keycaps follow the cream / mint / gold palette, like the training menu. */
.arcade-home-body .arcade-keys kbd { border-color: var(--arc-line); background: var(--screen-raised); color: var(--arc-accent); }

/* Commandes / Options: sized on the frame height (cqh of .arcade-attract), so the
   lists fill the 4:3 screen and stay readable at every frame size. */
.arcade-home-body .arcade-panel .arcade-panel-body { width: min(100%, 880px); gap: clamp(12px, 3cqh, 32px); }
.arcade-home-body .arcade-panel .arcade-system-list { gap: clamp(2px, .8cqh, 8px); }
.arcade-home-body .arcade-panel .arcade-system-row {
  min-height: clamp(44px, 8.4cqh, 72px); gap: clamp(10px, 2cqh, 20px);
  grid-template-columns: 1.4em minmax(0, 1fr) auto 1.4em;
  padding: clamp(4px, 1cqh, 10px) clamp(10px, 2cqh, 18px);
  font-size: clamp(20px, 4cqh, 34px);
}
.arcade-home-body .arcade-panel .arcade-system-icon { font-size: .82em; }
.arcade-home-body .arcade-panel .arcade-system-label { font-size: 1em; }
.arcade-home-body .arcade-panel .arcade-system-value { font-size: .76em; }
.arcade-home-body .arcade-panel .arcade-system-arrows { font-size: .72em; }
.arcade-home-body .arcade-panel .arcade-keys { gap: clamp(8px, 2.2cqh, 20px); }
.arcade-home-body .arcade-panel .arcade-key-row { font-size: clamp(22px, 4.4cqh, 36px); color: var(--arc-text); }
.arcade-home-body .arcade-panel .arcade-key-row dd { gap: .3em; }
.arcade-home-body .arcade-panel .arcade-keys kbd { min-width: 1.9em; padding: .12em .4em; font-size: .72em; }
.arcade-home-body .arcade-panel .arcade-panel-note { font-size: clamp(18px, 3cqh, 26px); }
.arcade-home-body .arcade-panel .arcade-legal { gap: clamp(12px, 2.4cqh, 24px); margin-top: clamp(8px, 2cqh, 20px); }
.arcade-home-body .arcade-panel .arcade-legal :is(a, button) { font-size: clamp(16px, 2.6cqh, 22px); }

/* Boot sequence, like a console title: the demo stays hidden until it has drawn
   its first frame (.is-scene-ready from arcade-home.js; not index.js's
   .is-demo-ready, which the iframe load event can clear after the fact), then the
   beach fades in behind the logo. Meanwhile a stepped pixel bar stands where the
   prompt will appear. */
.arcade-home-body .home-training-demo { opacity: 0; transition: opacity 900ms ease-out; }
.arcade-home-body .arcade-cabinet.is-scene-ready .home-training-demo { opacity: 1; }
.arcade-home-body .arcade-attract-bg { transition: opacity 900ms ease-out; }
.arcade-home-body .arcade-cabinet:not(.is-scene-ready) .arcade-attract-bg { opacity: 0; }
.arcade-boot { display: none; }
.arcade-home-body .arcade-cabinet:not(.is-scene-ready):not(.is-menu-ready) .arcade-start { display: none; }
.arcade-home-body .arcade-cabinet:not(.is-scene-ready):not(.is-menu-ready) .arcade-boot {
  display: grid; justify-items: center; gap: 12px; margin: clamp(24px, 5dvh, 48px) auto 0;
  animation: arcade-clean-enter 400ms 200ms ease-out both;
}
.arcade-boot-bar { position: relative; display: block; width: clamp(140px, 16cqw, 200px); height: 12px; padding: 2px; box-shadow: 0 0 0 2px #34483f; background: #0b120f; overflow: hidden; }
/* Real progress from the demo (homeDemoProgress), in 10 % notches. */
.arcade-boot-bar > span { display: block; width: 100%; height: 100%; background: var(--arc-accent); transform-origin: left; transform: scaleX(var(--boot-progress, 0)); transition: transform 160ms steps(2); }
.arcade-boot-label { color: #a8b5ac; font: clamp(18px, 2.4dvh, 22px)/1 'Jersey 15', sans-serif; letter-spacing: .04em; }
/* The logo drops in on stepped frames, as sprites do. */
.arcade-home-body .arcade-cabinet:not(.is-menu-ready) .arcade-logo-main { animation: arcade-logo-drop 480ms steps(6) both; }
.arcade-home-body .arcade-cabinet:not(.is-menu-ready) .arcade-logo-sub { animation: arcade-clean-enter 300ms 420ms ease-out both; }
@keyframes arcade-logo-drop { from { transform: translateY(-28px); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .arcade-home-body .home-training-demo, .arcade-home-body .arcade-attract-bg { transition: none; }
  .arcade-boot-bar > span { transition: none; }
}

/* Console bezel + ambient glow, one element over every screen of the home. */
.arcade-home-body .arcade-bezel {
  position: absolute; z-index: 30; inset: 50% auto auto 50%;
  width: var(--home-scene-width); aspect-ratio: 4 / 3; transform: translate(-50%, -50%);
  box-shadow: var(--arcade-bezel), 0 0 180px 50px color-mix(in srgb, var(--scene-glow) 20%, transparent);
  transition: box-shadow 700ms ease; pointer-events: none;
}
/* Arrival: the screen powers on (thin bright line, then the picture opens). */
.arcade-home-body .home-stage-frame, .arcade-home-body .arcade-attract { animation: arcade-screen-on 520ms steps(9) backwards; }
@media (prefers-reduced-motion: reduce) {
  .arcade-home-body :is(.home-stage-frame, .arcade-attract, .arcade-panel, .arcade-content-screen) { animation: none; }
  .arcade-home-body .arcade-bezel { transition: none; }
}

/* ======================================================================
   MON PERSO : fiche Elo, titres de section, bouton PRÊT !
   Jetons --screen-* uniquement (sombre / sable clair, accent du thème).
   ====================================================================== */

/* Fiche de combattant : juste le texte, deux colonnes, l'Elo en gros chiffres dorés. */
#arcade-panel-player .character-record {
  display: flex; justify-content: center; gap: clamp(32px, 7cqw, 64px);
  margin: clamp(14px, 3cqh, 28px) 0 0;
}
#arcade-panel-player .character-record-mode { display: grid; justify-items: center; gap: clamp(3px, .8cqh, 8px); }
#arcade-panel-player .character-record-label { color: var(--screen-mint); font: 22px/1 'Jersey 15', sans-serif; letter-spacing: .1em; }
#arcade-panel-player .character-record-elo {
  display: flex; align-items: baseline; gap: 6px;
  color: var(--screen-accent); font: clamp(30px, 6.4cqh, 48px)/1 'Jersey 15', sans-serif;
  letter-spacing: .04em; text-shadow: 0 2px var(--screen-shadow);
}
#arcade-panel-player .character-record-elo small { color: var(--screen-muted); font: .42em/1 'Jersey 15', sans-serif; letter-spacing: .12em; text-shadow: none; }
#arcade-panel-player .character-record-sub { color: var(--screen-muted); font: 19px/1 'Jersey 15', sans-serif; letter-spacing: .04em; }
#arcade-panel-player .character-record-mode.is-unranked .character-record-elo { color: var(--screen-muted); font-family: 'Jersey 15', sans-serif; text-shadow: none; }
#arcade-panel-player .character-record-mode.is-unranked .character-record-sub { color: var(--screen-muted); }
/* Fiche de progression : NIVEAU en gros chiffres dorés, jauge menthe. */
#arcade-panel-player .character-level {
  display: grid; justify-items: center; gap: clamp(4px, .9cqh, 8px);
  width: min(100%, 260px); margin: clamp(8px, 2cqh, 20px) auto 0;
}
#arcade-panel-player .character-level-head { display: flex; align-items: baseline; justify-content: center; gap: 10px; width: 100%; }
#arcade-panel-player .character-level-label { display: flex; align-items: baseline; gap: 6px; color: var(--screen-mint); font: 22px/1 'Jersey 15', sans-serif; letter-spacing: .1em; }
/* Prestige : étoiles sous le pseudo, puis emblème + PRESTIGE VI à la couleur du rang. Le niveau
   passe à la même couleur. Pixel d'emblème = 2 px. */
#arcade-panel-player .character-prestige-rank {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: clamp(2px, .8cqh, 10px);
  color: var(--pe-ink); font: clamp(20px, 3.6cqh, 28px)/1 'Jersey 15', sans-serif; letter-spacing: .14em;
  text-shadow: 0 2px var(--screen-shadow);
}
#arcade-panel-player .character-prestige-rank .prestige-emblem { --pe-px: 2px; }
#arcade-panel-player .character-preview[data-prestige-tier] .character-level-value { color: var(--pe-ink); }
/* Étoiles et rang prennent ~10 % de la hauteur : le piédestal rétrécit d'autant pour que Mon
   profil reste dans l'écran. */
#arcade-panel-player .character-preview[data-prestige-tier] .character-stage-canvas { height: clamp(140px, 35cqh, 360px); }
#arcade-panel-player .character-level-value {
  color: var(--screen-accent); font: clamp(28px, 5.6cqh, 42px)/1 'Jersey 15', sans-serif; font-weight: normal;
  letter-spacing: .04em; text-shadow: 0 2px var(--screen-shadow);
}
#arcade-panel-player .character-level-head .character-level-sub { margin-left: auto; }
#arcade-panel-player .character-level-bar { position: relative; width: 100%; height: 10px; overflow: hidden; background: var(--screen-raised); border: 1px solid var(--screen-line); }
#arcade-panel-player .character-level-bar i { position: absolute; inset: 0 auto 0 0; background: var(--screen-mint); }
#arcade-panel-player .character-level-sub { color: var(--screen-muted); font: 18px/1 'Jersey 15', sans-serif; letter-spacing: .04em; }
#arcade-panel-player .character-prestige-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; margin-top: 8px; padding: 5px 16px; border: 0; border-radius: 0;
  background: var(--screen-accent); color: var(--screen-accent-ink);
  font: 22px/1 'Jersey 15', sans-serif; letter-spacing: .1em; cursor: pointer;
  box-shadow: inset -3px -3px color-mix(in srgb, var(--screen-accent) 68%, #000), inset 3px 3px color-mix(in srgb, var(--screen-accent) 58%, #fff);
}
#arcade-panel-player .character-prestige-button.is-armed { font-size: 17px; letter-spacing: .04em; }
#arcade-panel-player .character-prestige-button:is(:hover, :focus-visible, .is-selected) { outline: 2px solid var(--screen-ink); outline-offset: 2px; }

/* Objets pas encore gagnés : silhouette sombre + niveau requis (index.js paintLocks). */
#arcade-panel-player :is(.skin-choice, .character-color).is-locked { position: relative; cursor: not-allowed; }
#arcade-panel-player .skin-choice.is-locked img { filter: brightness(0) opacity(.45); }
#arcade-panel-player .character-color.is-locked > .character-color-chip { filter: brightness(0) opacity(.45); animation: none; }
#arcade-panel-player :is(.skin-choice, .character-color) > .character-lock {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--screen-ink); font: 14px/1 'Jersey 15', sans-serif; letter-spacing: .04em;
  white-space: nowrap; pointer-events: none; text-shadow: 0 1px var(--screen-shadow), 0 -1px var(--screen-shadow);
}
#arcade-panel-player .skin-choice > .character-lock { font-size: 17px; color: var(--screen-accent); }

#arcade-panel-player .character-profile-trigger.player-profile-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; margin-top: clamp(22px, 3.6cqh, 38px); padding: 5px 14px;
  border: 0; border-radius: 0; background: transparent; color: var(--screen-ink);
  box-shadow: none; font: 20px/1 'Jersey 15', sans-serif;
  letter-spacing: .07em; text-transform: uppercase;
}
#arcade-panel-player .character-profile-trigger::before {
  content: ''; width: 18px; height: 18px; flex: none;
  background: url('/images/brand/ballon-beach.png') center / contain no-repeat;
  image-rendering: pixelated;
}
#arcade-panel-player .character-profile-trigger:is(:hover, :focus-visible, .is-selected) {
  outline: none; background: var(--screen-tint); box-shadow: none; color: var(--screen-accent);
}

/* Titres de section : libellés courts en capitales, lisibles de loin comme un menu de jeu. */
#arcade-panel-player .character-section-heading { align-items: baseline; }
#arcade-panel-player :is(.character-section-heading h3, .character-name-label) {
  color: var(--screen-mint); font: 24px/1 'Jersey 15', sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
#arcade-panel-player .character-section-heading > span {
  color: var(--screen-muted); font: 20px/1 'Jersey 15', sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
#arcade-panel-player .character-section-heading { margin-bottom: 12px; }
#arcade-panel-player .character-name-entry { min-height: 52px; }

/* PRÊT ! : le CTA plein du jeu (relief pixel), le curseur d'écran autour quand il est visé. */
.arcade-home-body #arcade-panel-player .character-done {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 220px; min-height: 52px; padding: 0 28px;
  border: 0; border-radius: 0;
  background: var(--screen-accent); color: var(--screen-accent-ink);
  box-shadow: inset -3px -3px color-mix(in srgb, var(--screen-accent) 70%, #000), inset 3px 3px color-mix(in srgb, var(--screen-accent) 60%, #fff), 0 4px var(--screen-shadow);
  font: 28px/1 'Jersey 15', sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.arcade-home-body #arcade-panel-player .character-done { --cursor-gap: -6px; }
.arcade-home-body #arcade-panel-player .character-done:is(:hover, .is-selected, :focus-visible) {
  color: var(--screen-accent-ink); outline: none;
  background: color-mix(in srgb, var(--screen-accent) 82%, #fff);
  box-shadow: inset -3px -3px color-mix(in srgb, var(--screen-accent) 70%, #000), inset 3px 3px color-mix(in srgb, var(--screen-accent) 60%, #fff), 0 4px var(--screen-shadow);
}
.arcade-home-body #arcade-panel-player .character-done:active {
  transform: translateY(2px);
  box-shadow: inset -3px -3px color-mix(in srgb, var(--screen-accent) 70%, #000), inset 3px 3px color-mix(in srgb, var(--screen-accent) 60%, #fff), 0 2px var(--screen-shadow);
}

/* Écrans bas (1024×640…) : le portrait suit la hauteur du cadre, sinon il déborde sur le nom
   et pousse PRÊT ! hors de l'écran. */
@media (min-width: 601px) and (max-height: 760px) {
  #arcade-panel-player .character-stage { height: clamp(96px, 24cqh, 290px); }
  .arcade-home-body #arcade-panel-player #my-blobby { width: clamp(96px, 24cqh, 270px); height: clamp(96px, 24cqh, 270px); }
  #arcade-panel-player .character-player-name { font-size: clamp(30px, 7cqh, 72px); }
  .arcade-home-body #arcade-panel-player .character-done { min-height: 44px; font-size: 24px; }
  #arcade-panel-player :is(.character-section-heading h3, .character-name-label) { font-size: 20px; }
  #arcade-panel-player .character-section-heading > span { font-size: 17px; }
  #arcade-panel-player .character-section-heading { margin-bottom: clamp(6px, 1.2cqh, 10px); }
  #arcade-panel-player .character-customize { gap: clamp(10px, 2cqh, 20px); }
  #arcade-panel-player .character-name-entry { min-height: 44px; }
  .arcade-home-body #arcade-panel-player .character-name-entry #login { min-height: 38px; font-size: 24px; }
  #arcade-panel-player .character-record-label { font-size: 19px; }
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice { min-height: clamp(64px, 12.5cqh, 88px); padding: 6px; }
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice img { width: 42px; height: 42px; }
}
@media (max-width: 600px) {
  #arcade-panel-player .character-record { width: 100%; }
  .arcade-home-body #arcade-panel-player .character-done { width: 100%; }
}

/* Keep the exit actions inside the 4:3 screen; scale the selection area with it. */
#arcade-panel-player .character-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}
#arcade-panel-player .character-layout {
  min-height: 0;
  margin-block: 0;
  align-self: stretch;
  align-items: center;
}
@container (max-height: 900px) {
  #arcade-panel-player .character-screen { gap: clamp(10px, 2cqh, 20px); }
  #arcade-panel-player .character-layout { gap: clamp(20px, 4cqw, 48px); }
  #arcade-panel-player .character-stage { height: clamp(96px, 24cqh, 230px); }
  .arcade-home-body #arcade-panel-player #my-blobby { width: clamp(96px, 24cqh, 230px); height: clamp(96px, 24cqh, 230px); }
  #arcade-panel-player .character-record { margin-top: clamp(8px, 1.5cqh, 16px); }
  #arcade-panel-player .character-profile-trigger.player-profile-trigger { margin-top: clamp(16px, 2.8cqh, 24px); }
  #arcade-panel-player .character-customize { gap: clamp(10px, 2cqh, 20px); }
  #arcade-panel-player .character-section-heading { margin-bottom: clamp(6px, 1.2cqh, 10px); }
  #arcade-panel-player .character-roster { gap: 8px; }
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice { min-height: clamp(64px, 11cqh, 96px); padding: 6px; }
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice img { width: clamp(38px, 6cqh, 50px); height: clamp(38px, 6cqh, 50px); }
}
@media (max-width: 600px) {
  #arcade-panel-player .character-screen {
    display: flex;
    overflow-y: auto;
  }
  #arcade-panel-player .character-layout {
    align-self: auto;
    flex: 0 0 auto;
    grid-template-columns: 1fr;
  }
}

/* Footer links keep the same keyboard cursor as the screen rows. */
.arcade-home-body #arcade-panel-options .arcade-legal {
  flex-wrap: wrap; justify-content: center; overflow: clip; overflow-clip-margin: 16px;
  column-gap: clamp(5px, 1.3cqw, 14px); row-gap: 2px; margin-top: clamp(8px, 1.5cqh, 16px);
}
.arcade-home-body #arcade-panel-options .arcade-legal::-webkit-scrollbar { display: none; }
.arcade-home-body #arcade-panel-options .arcade-legal :is(a, button) { padding: 2px 5px 2px 8px; font-size: clamp(15px, 2.3cqh, 20px); line-height: 1.1; white-space: nowrap; text-decoration: none; }
.arcade-home-body #arcade-panel-options .arcade-legal :is(a, button) { --cursor-len: 7px; }
.arcade-home-body #arcade-panel-options .arcade-legal :is(a, button):is(.is-selected, :hover, :focus-visible) { outline: none; color: var(--screen-accent); background: var(--screen-tint); box-shadow: none; }
.arcade-home-body #arcade-panel-options .arcade-legal #account-delete:not(.is-selected, :hover, :focus-visible) { color: var(--screen-muted); }
/* At the smaller screen sizes, only the long options list scrolls. The clip
   margin and list padding contain the cursor throughout its animation. */
.arcade-home-body #arcade-panel-options .arcade-panel-inner { overflow: clip; overflow-clip-margin: 16px; }
.arcade-home-body #arcade-panel-options .arcade-panel-body { flex: 0 1 auto; min-height: 0; margin-block: auto; overflow: clip; overflow-clip-margin: 16px; }
.arcade-home-body #arcade-panel-options .arcade-system-row { min-height: clamp(40px, 7cqh, 64px); }
.arcade-home-body #arcade-panel-options .arcade-system-list {
  min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto;
  /* The entrance cursor extends 13px beyond its row before settling. */
  padding: 16px;
  scroll-padding-block: 16px;
  scrollbar-width: thin; scrollbar-color: var(--screen-line) transparent;
}
.arcade-home-body #arcade-panel-options .arcade-legal { flex: none; }
@media (max-width: 760px) {
  .arcade-home-body #arcade-panel-options .arcade-legal { flex-wrap: wrap; overflow-x: visible; }
}

/* MON PERSO, invité : à la place de la fiche Elo, l'invitation à se connecter. Bouton
   secondaire (texte, curseur d'écran à la sélection) pour ne pas concurrencer PRÊT !. */
#arcade-panel-player .character-guest {
  display: grid; justify-items: center; gap: clamp(8px, 1.8cqh, 14px);
  max-width: 480px; margin-top: clamp(14px, 3cqh, 28px); text-align: center;
}
#arcade-panel-player .character-guest-copy { margin: 0; color: var(--screen-muted); font: clamp(17px, 3cqh, 21px)/1.25 'Jersey 15', sans-serif; letter-spacing: .03em; text-wrap: balance; }
.arcade-home-body #arcade-panel-player .character-guest-login {
  min-height: 44px; padding: 4px 18px; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--screen-accent); font: clamp(22px, 4cqh, 28px)/1 'Jersey 15', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.arcade-home-body #arcade-panel-player .character-guest-login:is(.is-selected, :focus-visible, :hover) {
  outline: none; background: var(--screen-tint);
}

/* ======================================================================
   Manette : voyant du HUD, invite titre Entrée / Ⓐ,
   notification « manette connectée » (gamepad-notice.js).
   ====================================================================== */
.arcade-home-body .arcade-hud-account {
  --hud-pad-width: 32px; --hud-pad-gap: 14px;
  display: flex; align-items: flex-start; gap: var(--hud-pad-gap);
}
.arcade-home-body .arcade-hud-account > .user-bloc { flex: 1; min-width: 0; }
/* Le z-index 20 hérité de l'ancien bloc compte (arcade.css) vaut ici, le bloc étant un élément flex :
   il passait l'Elo au-dessus de la bulle du voyant. */
.arcade-home-body .arcade-hud-account > .user-bloc.is-display-only { z-index: auto; }
/* Le voyant n'occupe que la ligne « J1 pseudo » : l'Elo repasse dessous, au bord de l'écran, comme
   le bilan colle au bord droit. Sous 760px le voyant disparaît et l'Elo reste à sa place. */
@media (min-width: 761px) {
  .arcade-home-body .arcade-hud-account:has(> .arcade-hud-pad:not([hidden])) .arcade-hud-player .arcade-hud-value {
    margin-left: calc(-1 * (var(--hud-pad-width) + var(--hud-pad-gap)));
  }
}
/* Compte connecté : « J1 pseudo » (et son voyant) descend sur la ligne de base de « NIV. 25 », comme
   1UP et HI-SCORE sur une même ligne. Décalage = écart de taille entre le niveau et l'étiquette
   (account-arcade.css) × position de la ligne de base dans Jersey 15 (0,78 em, mesurée). */
@media (min-width: 761px) {
  .arcade-home-body .arcade-hud-account:has(.arcade-hud-record) {
    --hud-baseline-shift: calc(.78 * (clamp(36px, 7.4cqh, 60px) - clamp(16px, 2.8cqh, 22px)));
  }
  .arcade-home-body .arcade-hud-account:has(.arcade-hud-record) .arcade-hud-player { padding-top: var(--hud-baseline-shift); }
  .arcade-home-body .arcade-hud-account:has(.arcade-hud-record) > .arcade-hud-pad {
    margin-top: calc(var(--hud-baseline-shift) + max(0px, calc((clamp(16px, 2.8cqh, 22px) - 18px) / 2)));
  }
}
/* Voyant éteint : la silhouette grise, avec l'ombre pixel du texte du HUD pour rester lisible sur un ciel
   clair (plage). Allumé : menthe, avec un halo de LED. C'est un bouton
   (clic = COMMANDES) : on efface son habillage de bouton. L'opacité est portée par l'icône, pas par le
   bouton, pour ne pas estomper la bulle qu'il contient. */
.arcade-hud-pad {
  /* Voyant du J1 : centré sur la ligne « J1 pseudo » (même taille que .arcade-hud-label), pas sur le
     bloc entier, qui fait deux lignes quand l'Elo s'affiche. */
  position: relative; flex-shrink: 0; margin-top: max(0px, calc((clamp(16px, 2.8cqh, 22px) - 18px) / 2));
  display: inline-flex; padding: 0; border: 0; background: none; color: var(--arc-muted); cursor: pointer;
}
.arcade-hud-pad[hidden] { display: none; }
.arcade-hud-pad .gamepad-glyph {
  width: var(--hud-pad-width); height: 18px; opacity: .8;
  filter: drop-shadow(0 2px 0 #08120d);
  transition: color 160ms steps(3), opacity 160ms steps(3), filter 160ms steps(3);
}
.arcade-hud-pad:hover .gamepad-glyph { opacity: 1; }
.arcade-hud-pad.is-on { color: var(--arc-mint); }
.arcade-hud-pad.is-on .gamepad-glyph {
  opacity: 1;
  filter: drop-shadow(0 2px 0 #08120d) drop-shadow(0 0 6px color-mix(in srgb, var(--arc-mint) 55%, transparent));
}
.arcade-hud-pad:focus-visible { outline: 2px solid var(--arc-accent); outline-offset: 4px; }
/* Bulle au survol : même habillage que la notification, en petit, sous le voyant. */
.arcade-hud-pad-tip {
  position: absolute; z-index: 7; top: calc(100% + 10px); left: -6px;
  display: grid; gap: 4px; padding: 8px 12px 8px 11px; white-space: nowrap; text-align: left;
  background: var(--screen-panel); color: var(--screen-ink);
  box-shadow: inset 3px 0 var(--screen-mint), 0 4px 0 var(--screen-shadow);
  visibility: hidden; pointer-events: none;
}
.arcade-hud-pad-tip strong { font: 18px/1 'Jersey 15', sans-serif; font-weight: 400; letter-spacing: .06em; }
.arcade-hud-pad-tip span { color: var(--screen-muted); font: 15px/1 'Jersey 15', sans-serif; letter-spacing: .06em; }
.arcade-hud-pad-tip span[hidden] { display: none; }
.arcade-hud-pad:not(.is-on) .arcade-hud-pad-tip { box-shadow: inset 3px 0 var(--screen-muted), 0 4px 0 var(--screen-shadow); }
.arcade-hud-pad:is(:hover, :focus-visible) .arcade-hud-pad-tip { visibility: visible; animation: arcade-tip-in 120ms steps(3) backwards; }
@keyframes arcade-tip-in { from { clip-path: inset(0 0 100% 0); } }

/* Invite titre : au clavier, « Entrée » et « Ⓐ » se relaient sur deux pulsations (3,2 s). Le relais
   tombe au creux de la pulsation d'arcade-clean-prompt (opacité mini à .8 s puis 2,4 s). */
.arcade-start-copy { display: inline-grid; justify-items: center; }
.arcade-start-alt { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.arcade-start-alt.is-key { animation: arcade-start-key 3.2s step-end infinite; }
.arcade-start-alt.is-pad { opacity: 0; animation: arcade-start-pad 3.2s step-end infinite; }
.is-gamepad .arcade-start-alt.is-key { visibility: hidden; animation: none; }
.is-gamepad .arcade-start-alt.is-pad { opacity: 1; animation: none; }
@keyframes arcade-start-key { 0% { opacity: 1; } 25% { opacity: 0; } 75% { opacity: 1; } }
@keyframes arcade-start-pad { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 0; } }
.arcade-start-copy kbd.pad-btn {
  display: inline-grid; place-items: center; width: 1.1em; min-width: 0; height: 1.1em; padding: 0;
  border: 0; background: var(--arc-accent); color: var(--arc-bg); box-shadow: 0 2px #08120d;
  font: .72em/1 'PixelArt', monospace; letter-spacing: 0;
}

/* Notification : même boîte 4:3 que la scène, sous le bord d'écran (z 30), au-dessus des écrans de
   jeu (z 20). Entre depuis la droite en escalier, comme l'ouverture des écrans. */
.arcade-home-body .arcade-toast-layer {
  position: absolute; z-index: 25; inset: 50% auto auto 50%;
  width: var(--home-scene-width); aspect-ratio: 4 / 3; transform: translate(-50%, -50%);
  pointer-events: none; overflow: hidden;
}
.arcade-toast {
  position: absolute; top: 58px; right: var(--screen-space);
  display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 14px;
  max-width: calc(100% - 2 * var(--screen-space));
  background: var(--screen-panel); color: var(--screen-ink);
  box-shadow: inset 3px 0 var(--screen-mint), 0 4px 0 var(--screen-shadow);
  animation: arcade-toast-in 240ms steps(6) backwards;
}
.arcade-toast[hidden] { display: none; }
.arcade-toast.is-leaving { animation: arcade-toast-out 180ms steps(4) forwards; }
.arcade-toast-glyph { width: 48px; height: 27px; flex-shrink: 0; color: var(--screen-mint); }
.arcade-toast img.arcade-toast-glyph { object-fit: contain; image-rendering: pixelated; }
.arcade-toast-copy { display: grid; gap: 5px; min-width: 0; }
.arcade-toast-title { font: 22px/1 'Jersey 15', sans-serif; font-weight: 400; letter-spacing: .06em; }
.arcade-toast-sub { color: var(--screen-muted); font: 16px/1 'Jersey 15', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.arcade-toast-sub[hidden] { display: none; }
.arcade-toast.is-off { box-shadow: inset 3px 0 var(--screen-muted), 0 4px 0 var(--screen-shadow); }
.arcade-toast.is-off .arcade-toast-glyph { color: var(--screen-muted); }
@keyframes arcade-toast-in { from { transform: translateX(calc(100% + var(--screen-space))); } }
@keyframes arcade-toast-out { to { transform: translateX(calc(100% + var(--screen-space))); } }
@media (max-width: 760px) {
  .arcade-hud-pad { display: none; }
  .arcade-toast { top: 12px; right: 12px; padding: 8px 12px 8px 10px; }
  .arcade-toast-glyph { width: 32px; height: 18px; }
  .arcade-toast-title { font-size: 18px; }
}

/* ================================================================ MON BLOBBY
   Le blob du joueur en grand, sur son bout de plage (canvas de blobby-stage.js), et une
   collection où chaque skin se voit : les sprites de 120 px sont recadrés sur le blob
   (x 12 → 108, y 14 → 120) au lieu d'être réduits avec tout leur vide autour. */
@media (min-width: 601px) {
  #arcade-panel-player .character-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4cqw, 56px); }
}
#arcade-panel-player .character-stage { height: auto; background: none; }
.character-stage-canvas {
  display: block; width: auto; height: clamp(170px, 50cqh, 440px); max-width: 100%;
  aspect-ratio: 1; margin-inline: auto; image-rendering: pixelated;
}
#arcade-panel-player .character-player-name { margin-top: clamp(-18px, -1.6cqh, -6px); font-size: clamp(30px, 6.4cqh, 60px); }
#arcade-panel-player .character-record, #arcade-panel-player .character-guest { margin-top: clamp(4px, 1.4cqh, 14px); }

.skin-choice-portrait {
  position: relative; display: block; flex: 0 0 auto; aspect-ratio: 96 / 106; overflow: hidden;
}
.skin-choice-portrait { width: clamp(52px, 12.5cqh, 100px); }
.arcade-home-body #arcade-panel-player .skin-choice .skin-choice-portrait img {
  position: absolute; left: -12.5%; top: -13.2%; width: 125%; height: auto; max-width: none;
  margin: 0; image-rendering: pixelated; transform-origin: 50% 88%;
}

.arcade-home-body #arcade-panel-player .character-roster { gap: clamp(4px, 1cqh, 10px); }
.arcade-home-body #arcade-panel-player .character-roster .skin-choice {
  min-height: 0; padding: clamp(6px, 1.4cqh, 14px) 4px clamp(4px, 1cqh, 10px); gap: clamp(2px, .6cqh, 6px);
  border: 0; border-radius: 0; box-shadow: none;
  background: color-mix(in srgb, var(--screen-mint) 3.5%, transparent);
  color: var(--screen-muted); font-size: clamp(16px, 2.8cqh, 22px);
}
/* Porté : case un peu plus claire, sans barre en bas. */
.arcade-home-body #arcade-panel-player .character-roster .skin-choice.active {
  background: color-mix(in srgb, var(--screen-mint) 9%, transparent); color: var(--screen-mint);
  box-shadow: none;
}
.arcade-home-body #arcade-panel-player .character-roster .skin-choice:is(.is-selected, :focus-visible) {
  border: 0; outline: none; color: var(--screen-accent);
  background: var(--screen-tint); box-shadow: none;
}

/* Couleurs : des billes de pixel aux quatre tons du sprite (contour, ombre, corps, reflet),
   dessinées par blobby-skin.js (colorSwatch) et posées par arcade-home.js. Chacune a son ombre au
   sol ; la couleur portée sautille. Sans JS : un simple rond de la couleur. */
.arcade-home-body #arcade-panel-player .character-colors { gap: clamp(4px, 1cqh, 10px); }
.arcade-home-body #arcade-panel-player .character-color {
  position: relative;
  height: auto; padding: clamp(8px, 1.6cqh, 14px) 2px; border: 0; border-radius: 0;
  background: color-mix(in srgb, var(--screen-mint) 3.5%, transparent);
}
.arcade-home-body #arcade-panel-player .character-color::before {
  content: ""; position: absolute; left: 50%; bottom: calc(clamp(8px, 1.6cqh, 14px) - 5px);
  width: 24px; height: 4px; transform: translateX(-50%); border-radius: 50%;
  background: color-mix(in srgb, var(--screen-shadow) 70%, transparent); pointer-events: none;
}
.arcade-home-body #arcade-panel-player .character-color[aria-pressed="true"] {
  background: color-mix(in srgb, var(--screen-mint) 9%, transparent); box-shadow: none;
}
.arcade-home-body #arcade-panel-player .character-color:is(.is-selected, :focus-visible) {
  outline: none; background: var(--screen-tint); box-shadow: none;
}
.arcade-home-body #arcade-panel-player .character-color { --cursor-len: 8px; }
.arcade-home-body #arcade-panel-player .character-color > .character-color-chip,
.arcade-home-body #arcade-panel-player .character-color[aria-pressed="true"] > .character-color-chip {
  /* 2 px d'écran par pixel de bille : des bords francs en 1x. */
  position: relative; display: block; width: 30px; height: 30px;
  border: 0; border-radius: 50%; box-shadow: none;
  background: var(--character-color);
  image-rendering: pixelated;
  transition: transform 120ms steps(3);
}
.arcade-home-body #arcade-panel-player .character-color > .character-color-chip.is-bille {
  border-radius: 0; background: var(--bille) center / 100% 100% no-repeat;
}
.arcade-home-body #arcade-panel-player .character-color:is(:hover, .is-selected) > .character-color-chip { transform: translateY(-2px); }
.arcade-home-body #arcade-panel-player .character-color[aria-pressed="true"] > .character-color-chip {
  transform: none; animation: character-color-hop 1.4s steps(6) infinite;
}
@keyframes character-color-hop {
  0%, 60%, 100% { transform: none; }
  70% { transform: translateY(-5px) scale(.96, 1.06); }
  82% { transform: scale(1.06, .94); }
}

/* Le blob sous le curseur fait un petit bond, en marches comme le reste du pixel. */
@keyframes character-pick-hop {
  0%, 100% { transform: none; }
  18% { transform: scale(1.1, .86); }
  45% { transform: translateY(-14%) scale(.94, 1.08); }
  72% { transform: scale(1.08, .9); }
}
.arcade-home-body #arcade-panel-player .skin-choice:is(.is-selected, :hover) img {
  animation: character-pick-hop 460ms steps(10) both;
}
@media (min-width: 601px) and (max-height: 760px) {
  .arcade-home-body #arcade-panel-player .character-roster .skin-choice { min-height: 0; padding: 6px 4px 4px; gap: 2px; }
  .skin-choice-portrait { width: clamp(44px, 9.6cqh, 100px); }
  .arcade-home-body #arcade-panel-player .character-color > .character-color-chip { width: 26px; height: 26px; }
  .arcade-home-body #arcade-panel-player .character-color > .character-color-chip.is-bille { background-image: var(--bille-compact); }
  .arcade-home-body #arcade-panel-player .character-color { padding-block: 4px; }
  .arcade-home-body #arcade-panel-player .character-color::before { bottom: -1px; width: 20px; }
  .character-stage-canvas { height: clamp(150px, 44cqh, 440px); }
}
@media (max-width: 760px) {
  .character-stage-canvas { height: clamp(150px, 42vw, 240px); }
  .skin-choice-portrait { width: clamp(48px, 16vw, 76px); }
  .arcade-home-body #arcade-panel-player .character-color > .character-color-chip { width: 26px; height: 26px; }
  .arcade-home-body #arcade-panel-player .character-color > .character-color-chip.is-bille { background-image: var(--bille-compact); }
  .arcade-home-body #arcade-panel-player .character-color::before { width: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-home-body #arcade-panel-player .skin-choice img { animation: none !important; }
  .arcade-home-body #arcade-panel-player .character-color-chip { transition: none; animation: none !important; }
}

/* Colonne de droite (Personnage / Couleur / Pseudo) : de l'air entre les blocs, un filet sous
   chaque titre, et des écarts qui suivent la hauteur du cadre (cqh) plutôt que la fenêtre. Placé
   après les réglages compacts ci-dessus pour les remplacer à toutes les tailles. */
#arcade-panel-player .character-customize { gap: clamp(18px, 4.4cqh, 42px); align-content: center; }
#arcade-panel-player .character-section-heading {
  margin-bottom: clamp(10px, 1.9cqh, 18px); padding-bottom: clamp(6px, 1cqh, 9px);
  border-bottom: 1px solid var(--screen-line);
}
.arcade-home-body #arcade-panel-player .character-roster,
.arcade-home-body #arcade-panel-player .character-colors { gap: clamp(6px, 1.3cqh, 12px); }
#arcade-panel-player .arcade-nameplate { gap: clamp(14px, 2.4cqw, 24px); }

/* ================================================================== COMMANDES
   La démo (canvas de blobby-stage.js) à côté de la liste des coups : chaque coup est une
   ligne du menu, sa démo se joue quand on la choisit. Sans choix, la démo enchaîne les coups
   et allume la ligne jouée (.is-demo). */
.arcade-home-body .arcade-panel .arcade-panel-body.controls-screen {
  width: min(100%, 1100px);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center;
  gap: clamp(16px, 4cqw, 56px);
}
.controls-demo { min-width: 0; }
.controls-demo-canvas {
  display: block; width: 100%; height: auto; max-height: 58cqh; aspect-ratio: 440 / 260;
  object-fit: contain; image-rendering: pixelated;
}
.arcade-home-body .arcade-panel .arcade-keys { list-style: none; margin: 0; padding: 0; gap: clamp(2px, .8cqh, 8px); }
.arcade-home-body .arcade-panel .arcade-key-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: clamp(44px, 8.4cqh, 72px); padding: clamp(4px, 1cqh, 10px) clamp(10px, 2cqh, 18px);
  border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; text-align: left;
  color: var(--screen-ink); font: clamp(22px, 4.4cqh, 36px)/1 'Jersey 15', sans-serif;
}
.arcade-key-caps { display: flex; align-items: center; gap: .3em; }
.arcade-key-caps .training-key-or { padding: 0 .1em; color: var(--screen-muted); font-size: .7em; }
.arcade-home-body .arcade-panel .arcade-key-row.is-demo { color: var(--screen-mint); }
.arcade-home-body .arcade-panel .arcade-key-row:is(.is-selected, :hover, :focus-visible) {
  outline: none; color: var(--screen-accent); background: var(--screen-tint); box-shadow: none;
}
@media (max-width: 760px) {
  .arcade-home-body .arcade-panel .arcade-panel-body.controls-screen { grid-template-columns: 1fr; }
  .controls-demo-canvas { max-height: 36vh; }
}

/* ================================================================== DÉFIS DU JOUR
   La ligne du bas de l'écran, comme CREDIT / HI-SCORE sur une borne en démo : le titre, les trois
   défis (compte puis libellé) ; le temps restant et la série sont dans le détail, au clic.
   Texte posé sur la scène avec le contour pixel du HUD, sur une bande sombre en dégradé
   sans bord (le sable est clair). Toute la ligne ouvre le détail (challenges-arcade.css). */
.arcade-home-body .arcade-challenges {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  column-gap: clamp(14px, 2.6cqw, 32px); row-gap: 2px;
  padding: clamp(18px, 4.5cqh, 40px) var(--screen-pad, 24px) clamp(8px, 1.8cqh, 16px);
  background: linear-gradient(0deg, rgb(6 13 9 / .62), rgb(6 13 9 / .4) 55%, rgb(6 13 9 / 0));
  color: var(--arc-text); font: clamp(15px, 2.7cqh, 22px)/1.1 'Jersey 15', sans-serif; letter-spacing: .05em;
  text-shadow: 0 2px #08120d, 1px 0 #08120d, -1px 0 #08120d, 0 -1px #08120d;
  pointer-events: none;
}
.arcade-home-body .arcade-challenges[hidden] { display: none; }
.arcade-home-body:lang(en) .arcade-challenges {
  flex-wrap: nowrap;
  column-gap: clamp(8px, 1.5cqw, 18px);
  font-size: clamp(13px, 2.35cqh, 19px);
}
.arcade-challenges-title {
  display: inline-flex;
  flex: none;
  gap: .45em;
  color: var(--arc-accent);
  letter-spacing: .12em;
  white-space: nowrap;
}
.arcade-challenges-title strong { color: var(--arc-text); font-weight: normal; }
.arcade-challenges.is-complete .arcade-challenges-title strong { color: var(--arc-mint); }
.arcade-challenges-list { display: contents; margin: 0; padding: 0; list-style: none; }
.arcade-challenges-list li { display: inline-flex; align-items: baseline; gap: .45em; white-space: nowrap; }
/* Trois états : pas commencé (compte en gris), en cours (doré, là où l'œil doit aller), réussi
   (coche menthe, libellé estompé). */
.arcade-challenges-list li strong { color: var(--arc-muted); font-weight: normal; }
.arcade-challenges-list li.is-started strong { color: var(--arc-accent); }
.arcade-challenges-list li.is-done strong { color: var(--arc-mint); }
.arcade-challenges-list li.is-done span { opacity: .6; }
/* Petit écran : la ligne colle au bord et la bande s'efface sur le sable clair. On la remonte et
   on fonce la bande pour que le texte reste lisible. */
@container (max-height: 560px) {
  .arcade-home-body .arcade-challenges {
    padding-bottom: 5cqh;
    background: linear-gradient(0deg, rgb(6 13 9 / .78), rgb(6 13 9 / .6) 50%, rgb(6 13 9 / 0));
  }
}
/* Même bande, inversée et un peu plus légère, sous la ligne du haut (J1 et pseudo, niveau, bilan) :
   le texte reste lisible sur les nuages et le soleil, et l'écran est tenu en haut comme en bas. Elle
   s'efface avant le logo, qui garde son propre fond. Posée sur le fond du titre, elle suit son
   apparition. */
.arcade-home-body .arcade-attract-bg::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30cqh;
  background: linear-gradient(180deg, rgb(6 13 9 / .52), rgb(6 13 9 / .34) 45%, rgb(6 13 9 / 0));
  pointer-events: none;
}
/* Pendant une partie ou un panneau ouvert, l'écran appartient au contenu. */
.arcade-home-body .arcade-cabinet:is(.is-panel-open, .is-content-open) .arcade-challenges { display: none; }
@media (max-width: 600px) { .arcade-home-body .arcade-challenges { display: none; } }

/* Bilan discret dans la fiche du joueur, sous sa progression. */
#arcade-panel-player .character-match-record {
  display: flex; align-items: baseline; justify-content: center; gap: .6em;
  color: var(--screen-muted); font: clamp(15px, 2.8cqh, 20px)/1.2 'Jersey 15', sans-serif;
  letter-spacing: .04em;
}
#arcade-panel-player .character-match-record strong { color: var(--screen-ink); font-weight: normal; }

/* REJOINDRE UN SALON : cinq cases pixel qui affichent le code ; le vrai champ texte est posé dessus,
   invisible, et reçoit la frappe, le collage et le retour arrière (arcade-home.js). La case suivante
   est soulignée à la couleur d'accent, toutes passent au rouge sur un code refusé. */
.arcade-home-body #arcade-panel-join .arcade-panel-body { display: grid; place-items: center; }
/* Comme Options et Emotes : le curseur arcade animé déborde de quelques pixels de sa ligne ; on le
   laisse dessiner sans créer de barre de défilement horizontale dans le panneau. */
.arcade-home-body #arcade-panel-join .arcade-panel-inner { overflow: clip; overflow-clip-margin: 16px; }
.join-lobby { display: grid; justify-items: center; gap: clamp(10px, 2.4cqh, 22px); width: min(100%, 560px); margin: 0; font-family: 'Jersey 15', sans-serif; text-align: center; }
.join-lobby-label { color: var(--arc-muted); font-size: clamp(18px, 3.4cqh, 28px); letter-spacing: .14em; text-transform: uppercase; }
.join-lobby-field { position: relative; }
.join-lobby-cells { display: flex; gap: clamp(8px, 1.6cqh, 14px); }
.join-lobby-cell {
  display: grid; place-items: center; width: clamp(48px, 10cqh, 84px); aspect-ratio: 4 / 5;
  background: var(--screen-raised); box-shadow: inset 0 -4px 0 var(--arc-line);
  color: var(--arc-accent); font-size: clamp(36px, 7.6cqh, 64px); line-height: 1;
}
.join-lobby-field:focus-within .join-lobby-cell { background: color-mix(in srgb, var(--screen-raised) 88%, var(--arc-accent)); }
.join-lobby-cell.is-current { box-shadow: inset 0 -4px 0 var(--arc-accent); }
.join-lobby.has-error .join-lobby-cell { box-shadow: inset 0 -4px 0 var(--screen-danger, #ff7866); }
.arcade-home-body .join-lobby-input,
.arcade-home-body .join-lobby-input:focus {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; cursor: text; caret-color: transparent; outline: none;
}
.join-lobby-hint { margin: 0; color: var(--arc-muted); font-size: clamp(15px, 2.6cqh, 22px); letter-spacing: .04em; }
.join-lobby-message { min-height: 1.1em; margin: 0; color: var(--screen-danger, #ff7866); font-size: clamp(18px, 3.2cqh, 27px); letter-spacing: .04em; }
.arcade-home-body .join-lobby-submit {
  min-height: clamp(44px, 8cqh, 64px); padding: 6px clamp(18px, 3.4cqh, 32px); border: 1px solid var(--arc-line); border-radius: 2px;
  color: var(--arc-accent); background: none; font: clamp(22px, 4cqh, 32px)/1 'Jersey 15', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.arcade-home-body .join-lobby-submit:is(:hover, .is-selected, :focus-visible) { border-color: var(--arc-accent); background: var(--screen-tint); }
.join-lobby.is-checking .join-lobby-submit { opacity: .55; cursor: progress; }