/* Shared stepped frame and page header, matching the private lobby. */
:root {
  --arcade-frame-shadow: -4px 0 #34483f, 4px 0 #34483f, 0 -4px #52675a, 0 4px #34483f, 0 8px #060d09;
  --arcade-backdrop: #0b1210 repeating-linear-gradient(0deg, #0b1210 0 3px, #0e1613 3px 4px);
  /* Inner margin of a framed screen. cq units resolve against the frame (panels,
     ranking) or, with no container, against the home iframe's own viewport. */
  --screen-pad: clamp(16px, 4cqw, 48px);
  /* Rounded cathode-ray screen: dark inner lip and a moulded shell, lit from
     the top-left. The screen box itself stays the same 4:3 size. */
  --bezel: 14px;
  /* Total breathing room beyond the moulded shell when width is the limit. */
  --arcade-frame-clearance: clamp(40px, 5vw, 80px);
  --arcade-size-scale: 1;
  --arcade-screen-max-width: 1100px;
  --arcade-control-bottom: max(12px, env(safe-area-inset-bottom));
  --arcade-control-height: 44px;
  --arcade-control-gap: 12px;
  /* The centred screen needs the same clearance above and below. Reserve
     the bottom controls, their gap and the outer bezel before sizing it. */
  --arcade-frame-vertical-clearance: calc(2 * (var(--arcade-control-bottom) + var(--arcade-control-height) + var(--arcade-control-gap) + var(--bezel) + 4px));
  --arcade-screen-radius: clamp(10px, calc(var(--bezel) + 4px), 18px);
  --arcade-screen-rim: clamp(5px, calc(var(--bezel) * .65), 9px);
  --arcade-bezel:
    0 0 0 3px #030706,
    0 0 0 calc(var(--bezel) - 2px) #1b2925,
    -3px -3px 0 calc(var(--bezel) + 1px) #52665e,
    4px 5px 0 calc(var(--bezel) + 1px) #0b1411,
    0 0 0 calc(var(--bezel) + 4px) #040807;
  --arcade-screen-lip:
    inset 0 0 0 var(--arcade-screen-rim) #020403,
    inset 0 14px 24px #000000a6,
    inset 0 -9px 18px #00000080;
  /* Cabinet wall: the striped backdrop, darker towards the edges. */
  --arcade-room: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, #0000008c 100%), repeating-linear-gradient(0deg, #0b1210 0 3px, #0e1613 3px 4px) #0b1210;
}
/* One size for home, framed pages and matches, set by the game (no user screen-size setting). */
body {
  --arcade-frame-width: calc(min(var(--arcade-screen-max-width), calc(100vw - 2 * var(--bezel) - var(--arcade-frame-clearance)), calc(88dvh * 4 / 3), calc((100dvh - var(--arcade-frame-vertical-clearance)) * 4 / 3)) * var(--arcade-size-scale));
}
@media (max-width: 600px) { :root { --bezel: 6px; } }
@media (max-width: 760px) { :root { --arcade-frame-clearance: 12px; } }
/* The lit screen tints the wall around it: colour of the theme, or of the training
   map. Used inline (not via a :root token) so each element resolves its own value. */
body { --scene-glow: #4aa3c7; }
body[data-theme='sunset'] { --scene-glow: #e0784f; }
body[data-theme='night'] { --scene-glow: #6b7be0; }
/* Training map (arcade-home.js copies it from the game iframe). */
[data-scene-map='beach'] { --scene-glow: #4aa3c7; }
[data-scene-map='planet'] { --scene-glow: #9a6ad6; }
[data-scene-map='cyberpunk'] { --scene-glow: #d655b8; }
/* The home keeps one physical shell over its interchangeable screens. */
.arcade-home-body .arcade-bezel { border-radius: var(--arcade-screen-radius); }
.arcade-home-body .arcade-bezel::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: var(--arcade-screen-lip); pointer-events: none;
}
.arcade-home-body .arcade-screen .home-stage-frame,
.arcade-home-body :is(.arcade-attract, .arcade-panel, .arcade-content-screen) {
  border-radius: var(--arcade-screen-radius);
}
.arcade-home-body .arcade-attract { overflow: hidden; }
/* Screens switch like a console: a stepped "power-on" from a centre line.
   Always `backwards` fill: a lingering clip-path would also clip the bezel shadow. */
@keyframes arcade-screen-on {
  0% { clip-path: inset(49% 0 49% 0); filter: brightness(1.8); }
  45% { clip-path: inset(49% 0 49% 0); filter: brightness(1.8); }
  100% { clip-path: inset(0); filter: none; }
}
@keyframes arcade-screen-open { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0); } }
@keyframes arcade-screen-close {
  from { clip-path: inset(0); filter: none; }
  to { clip-path: inset(50% 0 50% 0); filter: brightness(1.6); }
}

/* Screen palette: everything drawn INSIDE the 4:3 frame reads these tokens.
   - Options › Thème (body[data-theme]) sets the CTA color: --theme-accent is the
     bright version used over the game scene, --screen-accent the one used on
     the screen surface (darker in light mode, for contrast).
   - Options › Interface (body[data-ui-mode]) sets the screen surface.
   The striped cabinet outside the frame stays dark in both modes. */
body {
  /* Texte superposé au terrain : contraste constant, même en interface sable. */
  --screen-scene-ink: #f3f0df;
  --screen-scene-muted: #c2c9bc;
  --screen-scene-mint: #93cbb9;
  --screen-scene-shadow: #060d09;
  --theme-accent: #f6cd72;
  --screen-bg: #101817;
  --screen-panel: #182320;
  --screen-raised: #1e2b26;
  --screen-ink: #f3f0df;
  --screen-muted: #a8b5ac;
  --screen-line: #34483f;
  --screen-mint: #93cbb9;
  --screen-warning: #f6cd72;
  --screen-danger: #ff7866;
  --screen-shadow: #060d09;
  --screen-accent: var(--theme-accent);
  --screen-accent-ink: #101817;
  --screen-tint: color-mix(in srgb, var(--screen-accent) 7%, transparent);
  /* Bout de plage des écrans (podium MON BLOBBY, démo COMMANDES) : un sable un peu éteint
     pour ne pas crier sur le fond sombre, avec sa tranche, son liseré et l'ombre du blob. */
  --screen-sand: #c9a76c;
  --screen-sand-light: #e6cc95;
  --screen-sand-shade: #8f6f40;
  --screen-sand-shadow: #7a5c33;
  /* Prestige (prestige.css) : métaux de rang, identiques dans les trois thèmes. Clair, base,
     ombre pour l'emblème et le piédestal ; -ink pour le texte à la couleur du rang. Les mêmes
     métaux servent sur le sable clair, seuls les -ink s'assombrissent. */
  --screen-prestige-outline: #1b130c;
  /* Défi réussi (challenges-arcade.css) : gemme émeraude, plus franche que la menthe de
     l'interface pour dire « réussi ». Identique dans les deux interfaces. */
  --screen-clear-light: #8ef2b0; --screen-clear: #2fbf62; --screen-clear-dark: #14703a;
  /* Bulle d'emote du match (game.css .game-emote-bubble) : crème et contour sombre, identique dans
     les deux interfaces, comme tout ce qui se dit sur le terrain. */
  --screen-bubble-ink: #363435; --screen-bubble-bg: #fff6da;
  --screen-prestige-shine: #fffdf2;
  --screen-prestige-bronze-light: #f3b880; --screen-prestige-bronze: #c97a3d; --screen-prestige-bronze-dark: #84461f;
  --screen-prestige-silver-light: #ffffff; --screen-prestige-silver: #bcc6ce; --screen-prestige-silver-dark: #6f7b86;
  --screen-prestige-gold-light: #fff0a3; --screen-prestige-gold: #f0bf2e; --screen-prestige-gold-dark: #a8700f;
  --screen-prestige-diamond-light: #e8fdff; --screen-prestige-diamond: #7fd6ec; --screen-prestige-diamond-dark: #2f7e9e;
  --screen-prestige-legend-light: #ffd1f3; --screen-prestige-legend: #ff5cc4; --screen-prestige-legend-dark: #9a1e74;
  /* Texte sur la scène (HUD) : toujours la version claire, comme --screen-scene-ink. */
  --screen-scene-prestige-bronze-ink: #f0a76c; --screen-scene-prestige-silver-ink: #dfe5ea;
  --screen-scene-prestige-gold-ink: #f8d153; --screen-scene-prestige-diamond-ink: #a6e6f6;
  --screen-scene-prestige-legend-ink: #ff94d9;
  --screen-prestige-bronze-ink: var(--screen-scene-prestige-bronze-ink);
  --screen-prestige-silver-ink: var(--screen-scene-prestige-silver-ink);
  --screen-prestige-gold-ink: var(--screen-scene-prestige-gold-ink);
  --screen-prestige-diamond-ink: var(--screen-scene-prestige-diamond-ink);
  --screen-prestige-legend-ink: var(--screen-scene-prestige-legend-ink);
}
body[data-theme='sunset'] { --theme-accent: #ff9f6e; }
body[data-theme='night'] { --theme-accent: #8fd3ff; }
body[data-ui-mode='light'] {
  /* Soft sand rather than bright cream: easier on the eyes next to the dark cabinet. */
  --screen-bg: #d8d1be;
  --screen-panel: #cec6b0;
  --screen-raised: #c4bba3;
  --screen-ink: #232d28;
  --screen-muted: #4a554e;
  --screen-line: #b0a68c;
  --screen-mint: #235f50;
  --screen-warning: #86560b;
  --screen-danger: #ab3325;
  --screen-shadow: #a79c80;
  --screen-accent: #774c06;
  --screen-accent-ink: #fffaf0;
  --screen-tint: color-mix(in srgb, var(--screen-accent) 10%, transparent);
  /* Sur le sable clair de l'interface, le bout de plage passe plus doré pour se détacher. */
  --screen-sand: #c39a58;
  --screen-sand-light: #e0bf83;
  --screen-sand-shade: #94703b;
  --screen-sand-shadow: #7a5a2c;
  --screen-prestige-bronze-ink: #8a4a1e; --screen-prestige-silver-ink: #56616b;
  --screen-prestige-gold-ink: #835806; --screen-prestige-diamond-ink: #1d6582;
  --screen-prestige-legend-ink: #9a1e74;
}
body[data-ui-mode='light'][data-theme='sunset'] { --screen-accent: #9e3a16; }
body[data-ui-mode='light'][data-theme='night'] { --screen-accent: #1a5a93; }
/* Large surrounding surfaces share the texture; controls, cards and game art
   retain their own solid backgrounds. No overlay over the canvas or lettering. */
.arcade-home-body .arcade-content-loader { background: var(--screen-bg); color: var(--screen-muted); }
body[data-ui-mode='dark']:has(.match-history-page-shell) { --history-bg: var(--arcade-backdrop); }
/* Screen bar: the one header every framed screen uses. Title on the left,
   game-brand logo in the middle, the exit action (Retour / Menu) on the right.
   It sits on the screen's solid background, never on the striped backdrop. */
body .arcade-page-header {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: 16px; margin: 0; padding: 0 0 clamp(10px, 2cqh, 16px);
  border: 0; border-bottom: 1px solid var(--screen-line); background: none;
  box-shadow: none; color: var(--screen-muted); font: 18px 'Jersey 15', sans-serif;
}
body .arcade-page-header > :first-child { justify-self: start; }
body .arcade-page-header > :last-child { justify-self: end; }
body .arcade-page-header .arcade-page-title {
  min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--screen-ink); font: clamp(26px, 4.4cqh, 44px)/1 'Jersey 15', sans-serif;
  letter-spacing: .045em; text-transform: uppercase; text-shadow: none;
}
body .arcade-page-header .arcade-page-back {
  display: inline-flex; align-items: center; gap: 10px; width: auto; height: auto; min-height: 36px; padding: 4px 10px;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--screen-ink); text-decoration: none;
  font: 20px/1 'Jersey 15', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
body .arcade-page-header .arcade-page-back kbd { padding: 0; border: 0; background: none; color: var(--screen-muted); font: 11px 'PixelArt', monospace; letter-spacing: 0; }
/* Selected: the screen cursor (four corners, see .arcade-cursor below) on a light tint. */
body .arcade-page-header .arcade-page-back:is(:hover, :focus-visible, .is-selected) {
  outline: none; background: var(--screen-tint); box-shadow: none; color: var(--screen-accent);
}
body .arcade-page-header .arcade-page-back:active { transform: translate(2px, 2px); }
body .arcade-page-header .game-brand { justify-self: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; }
body .arcade-page-header .game-brand .game-brand-main { font-size: clamp(22px, 4.2cqh, 34px); }
body .arcade-page-header .game-brand .game-brand-sub { font-size: clamp(8px, 1.5cqh, 12px); }
body .arcade-page-header .game-brand:focus-visible { outline: 2px solid var(--screen-accent); outline-offset: 4px; }
/* Light screen: the cream / mint logo keeps its treatment, outlined in dark
   pixels so it stays legible on the cream surface. */
body[data-ui-mode='light'] .arcade-page-header .game-brand .game-brand-main {
  filter: drop-shadow(1px 0 0 #1f2b26) drop-shadow(-1px 0 0 #1f2b26) drop-shadow(0 1px 0 #1f2b26) drop-shadow(0 -1px 0 #1f2b26) drop-shadow(0 2px 0 #1f2b26);
}
body[data-ui-mode='light'] .arcade-page-header .game-brand .game-brand-sub { color: var(--screen-accent); }
@media (max-width: 600px) {
  body .arcade-page-header { gap: 8px; }
  body .arcade-page-header .arcade-page-title { font-size: 22px; }
  body .arcade-page-header .arcade-page-back { padding-inline: 6px; font-size: 17px; }
  body .arcade-page-header .arcade-page-back kbd { display: none; }
  body .arcade-page-header .game-brand .game-brand-main { font-size: 18px; }
  body .arcade-page-header .game-brand .game-brand-sub { font-size: 8px; }
}
/* Standalone framed page (lobby, /ranking): the same 4:3 screen, at the same
   place and size as the home scene, so leaving the home never moves the frame.
   Outside: the striped backdrop. Inside: a solid screen with the screen bar. */
body:has(.arcade-frame-screen) {
  --frame-width: var(--arcade-frame-width);
  background: var(--arcade-room);
}
.arcade-frame-screen {
  animation: arcade-screen-open 260ms steps(7) backwards;
  position: fixed; inset: 0; z-index: 1;
  box-sizing: border-box; display: flex; flex-direction: column; gap: clamp(12px, calc(var(--frame-width) * .024), 24px);
  width: var(--frame-width); height: calc(var(--frame-width) * 3 / 4); max-width: none; margin: auto;
  /* = --screen-pad of the home frame (4% of its width); cq units can't target the element itself. */
  padding: clamp(16px, calc(var(--frame-width) * .04), 48px); overflow: auto; container-type: size;
  border-radius: var(--arcade-screen-radius);
  background: var(--screen-bg); color: var(--screen-ink); box-shadow: var(--arcade-screen-lip), var(--arcade-bezel), 0 0 180px 50px color-mix(in srgb, var(--scene-glow) 20%, transparent); scrollbar-width: thin; scrollbar-color: var(--screen-line) transparent;
}
.arcade-frame-screen.is-closing {
  animation: arcade-screen-close 130ms steps(5) backwards;
  pointer-events: none;
}
.arcade-frame-screen > .arcade-page-header { flex-shrink: 0; }
/* Phones: a 4:3 box would be a letterbox strip, so the frame keeps its border
   and width but grows to the screen height and the page scrolls. */
@media (max-width: 760px) {
  .arcade-frame-screen {
    position: relative; width: calc(100vw - 24px); height: auto;
    min-height: calc(100dvh - 32px); margin: 16px auto; overflow: visible; container-type: inline-size;
  }
}
@media (prefers-reduced-motion: reduce) { .arcade-frame-screen { animation: none; } }

/* Manette (gamepad.js) : les aides affichées suivent le dernier appareil utilisé. gamepad.js pose
   .is-gamepad sur <html> à la première pression d'un bouton, l'enlève à la première vraie touche.
   .kbd-only / .pad-only : une aide en deux versions, une seule visible. */
:root:not(.is-gamepad) .pad-only,
.is-gamepad .kbd-only { display: none !important; }
/* Listes de commandes du jeu : un groupe de touches et, à côté, son groupe de boutons manette. */
.training-key-group.training-pad-group { display: none; }
:is(.training-arcade, .match-arcade) .training-key-or { color: var(--screen-muted); font-size: clamp(17px, 3cqh, 21px); }
.is-gamepad .training-key-group:not(.training-pad-group) { display: none; }
.is-gamepad .training-key-group.training-pad-group { display: flex; }
/* Boutons ronds, comme sur la manette ; gâchettes et stick en pastille. !important : chaque écran
   restyle ses kbd au carré (bord de borne), la forme du bouton doit passer par-dessus. */
kbd.pad-btn { min-width: 1.6em; aspect-ratio: 1; border-radius: 50% !important; }
kbd.pad-btn.pad-btn-wide { aspect-ratio: auto; padding-inline: .5em !important; border-radius: 999px !important; }

/* Curseur d'écran : le viseur 4 coins des écrans de sélection, le seul marqueur de sélection du
   jeu (les listes de menu gardent en plus leur balle). Quatre crochets pixel aux angles de
   l'élément, qui se referment dessus à l'arrivée puis respirent de quelques pixels.
   - Il suit « où l'on est » : .is-selected (accueil, arcade-home.js ; page Joueurs),
     .console-selected (menus des écrans de jeu, console-menu.js) et le focus clavier/manette.
   - Quand le focus est ailleurs, un .is-selected gardé reste marqué, figé et éteint.
   - Le survol souris n'est pas un curseur (une teinte suffit), sauf là où le survol déplace
     déjà la sélection (accueil, menus de jeu).
   - Un champ de saisie l'a tant que son input a le focus (:has(input:focus)).
   - Un état permanent (filtre actif, couleur portée, aria-pressed) n'est pas un curseur.
   Un nouvel élément prend .arcade-cursor ; les composants existants sont listés ci-dessous.
   Réglages : --cursor-gap (écart au bord, négatif = dehors), --cursor-len (longueur d'un bras).
   Une liste qui défile (overflow) rogne ce qui dépasse : elle garde 8 px de marge intérieure
   sur les côtés (et en haut / en bas) pour que le curseur, dehors, y respire sans être coupé.
   Le ::after de ces éléments est réservé au curseur. */
:where(
  .arcade-cursor,
  .arcade-page-back,
  .account-hud .account-trigger, .account-menu-item, .auth-screen-switch button,
  .arcade-hud-login, #arcade-panel-account :is(.account-mode, .account-submit),
  #arcade-panel-player :is(.character-done, .character-profile-trigger, .character-guest-login, .character-emotes-link, .skin-choice, .character-color),
  .emote-guest-cta, .emote-catalog-item,
  .arcade-panel :is(.arcade-system-row, .arcade-key-row), #arcade-panel-options .arcade-legal :is(a, button),
  .endgame-button, .cookie-btn, .legal-screen-nav a, .legal-screen-footer a, .error-screen-action, .lobby-modal-action,
  .match-options :is(button, a[href]), .match-arcade .game-modal-button,
  .training-start-actions button, .training-setting-row, #training-audio-options .game-action-button,
  #arcade-panel-player .character-name-entry, #arcade-panel-account .account-field-entry
) {
  position: relative;
  &:focus-visible { outline: none; }
  &::after {
    --cursor-color: var(--screen-accent); --c: var(--cursor-color); --t: 3px; --l: var(--cursor-len, 10px);
    content: ''; position: absolute; inset: var(--cursor-gap, -2px); z-index: 2; pointer-events: none; opacity: 0;
    background:
      linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t), linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l),
      linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t), linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l),
      linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t), linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l),
      linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t), linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
    background-repeat: no-repeat;
  }
  &:is(.is-selected, .console-selected, :focus-visible, :has(input:focus))::after {
    opacity: 1;
    animation: arcade-cursor-in 140ms steps(3) backwards, arcade-cursor-breathe 900ms steps(2, jump-none) 140ms infinite alternate;
  }
  body:has(&:focus-visible) &.is-selected:not(:focus-visible)::after { --cursor-color: var(--screen-muted); animation: none; }
  @media (prefers-reduced-motion: reduce) { &::after { animation: none !important; } }
}
@keyframes arcade-cursor-in { from { inset: calc(var(--cursor-gap, -2px) - 11px); opacity: 0; } }
@keyframes arcade-cursor-breathe { to { inset: calc(var(--cursor-gap, -2px) - 3px); } }

/* Défi réussi : la gemme pixel (challenge-done-badge.js) à la place du compte. Un
   pixel de gemme = 2 px sur la ligne, 4 px dans le détail ; émeraude biseautée, coche crème. */
.challenge-done-badge { --cdb-px: 2px; display: inline-block; flex: none; width: calc(11 * var(--cdb-px)); height: calc(11 * var(--cdb-px)); line-height: 0; align-self: center; }
.challenge-done-badge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.challenge-done-badge {
  --cdb-light: var(--screen-clear-light);
  --cdb-base: var(--screen-clear);
  --cdb-dark: var(--screen-clear-dark);
}
.challenge-done-badge .cdb-o { fill: var(--screen-scene-shadow); }
.challenge-done-badge .cdb-l { fill: var(--cdb-light); }
.challenge-done-badge .cdb-b { fill: var(--cdb-base); }
.challenge-done-badge .cdb-d { fill: var(--cdb-dark); }
.challenge-done-badge :is(.cdb-w, .cdb-k) { fill: var(--screen-scene-ink); }
.challenge-done-badge .cdb-s { fill: var(--cdb-dark); }
/* Sur la ligne de la scène, la gemme porte l'ombre portée du texte du HUD. */
.challenge-done-badge.is-hud { filter: drop-shadow(0 2px var(--screen-scene-shadow)); }

/* VS en pixel art (views/pixel-vs.pug) : salon et intro du match. --vs-color = la couleur du thème
   (sur la scène, sa version vive) ; --vs-ink = le contour. Le reflet balaie les lettres en marches,
   en boucle (--vs-loop). */
.pixel-vs { --vs-color: var(--screen-accent); --vs-ink: var(--screen-prestige-outline); --vs-loop: 3.2s; display: block; height: auto; overflow: visible; }
.pixel-vs .vs-outline { fill: var(--vs-ink); }
.pixel-vs .vs-relief { fill: var(--vs-ink); opacity: .4; }
.pixel-vs .vs-fill rect { fill: var(--vs-color); }
.pixel-vs .vs-fill .is-light { fill: color-mix(in srgb, var(--vs-color) 45%, #fff); }
.pixel-vs .vs-fill .is-shade { fill: color-mix(in srgb, var(--vs-color) 82%, #000); }
.pixel-vs .vs-shine { fill: #fff; opacity: .75; translate: -4px 0; animation: pixel-vs-shine var(--vs-loop) steps(1) infinite; }
@keyframes pixel-vs-shine { 0%, 32% { translate: -4px 0; } 34% { translate: 0 0; } 36% { translate: 4px 0; } 38% { translate: 8px 0; } 40% { translate: 12px 0; } 42% { translate: 16px 0; } 44% { translate: 20px 0; } 46% { translate: 24px 0; } 48%, 100% { translate: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .pixel-vs .vs-shine { animation: none; } }

/* LOOK : Tête, Corps et Couleur en carrousels (look-carousel.js), identiques dans MON PERSO et dans
   le vestiaire du lobby. Même habillage que l'ancien sélecteur du lobby : barre sombre, flèches
   pixel dans des cases, valeur au centre. Verrouillé : cadenas, niveau, grisé. */
.look-carousel { display: grid; gap: clamp(4px, .8cqh, 6px); }
.look-row {
  display: grid;
  grid-template-columns: minmax(4.4em, max-content) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(6px, 1.2cqh, 10px);
  width: 100%;
  min-height: clamp(34px, 6.6cqh, 48px);
  padding: 0 clamp(4px, .8cqh, 6px) 0 clamp(8px, 1.6cqh, 12px);
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--screen-panel);
  box-shadow: none;
  color: var(--screen-ink);
  font: clamp(18px, 3.4cqh, 24px)/1 'Jersey 15', sans-serif;
  text-align: left;
  cursor: pointer;
}
.look-row:is(.is-selected, :focus-visible) { border-color: none; outline: none; }
.look-row-label { color: var(--screen-mint); font-size: .86em; letter-spacing: .1em; text-transform: uppercase; }
.look-row-arrow { display: grid; place-items: center; width: clamp(28px, 5.4cqh, 38px); aspect-ratio: 1; background: var(--screen-bg); }
.look-row-arrow:hover { background: var(--screen-tint); }
.look-pixel-arrow { display: block; width: 9px; height: 15px; background: var(--screen-muted); clip-path: polygon(0 0,33.3% 0,33.3% 20%,66.6% 20%,66.6% 40%,100% 40%,100% 60%,66.6% 60%,66.6% 80%,33.3% 80%,33.3% 100%,0 100%); }
.look-pixel-arrow-left { transform: rotate(180deg); }
.look-row:is(.is-selected, :focus-visible, :hover) .look-pixel-arrow { background: var(--screen-accent); }
.look-row-value { display: flex; align-items: center; justify-content: center; gap: .4em; min-width: 0; letter-spacing: .06em; white-space: nowrap; }
.look-row-value strong { overflow: hidden; font-weight: normal; text-overflow: ellipsis; }
/* Couleur : toutes les couleurs possédées d'un coup, centrées sur la colonne des valeurs du dessus
   (cases de flèches vides de part et d'autre). La couleur portée grossit et un trait d'accent la
   souligne. */
.look-row-arrow-spacer { visibility: hidden; }
/* Toujours sur une ligne : sur un petit écran, les pastilles rétrécissent (jusqu'à 14 px) et les
   espaces se resserrent plutôt que de renvoyer la dernière couleur à la ligne. */
.look-palette { justify-content: center; flex-wrap: nowrap; gap: clamp(2px, 1.1cqh, 9px); padding-block: 5px 8px; }
.look-color { position: relative; width: clamp(22px, 4.2cqh, 30px); min-width: 14px; aspect-ratio: 1; flex: 0 1 auto; background: center / 80% 80% no-repeat; image-rendering: pixelated; transition: transform .12s; }
.look-color:hover { background-color: var(--screen-tint); }
.look-color.is-current { transform: scale(1.25); }
.look-color.is-current::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -4px; height: 3px; background: var(--screen-accent); }
@media (prefers-reduced-motion: reduce) { .look-color { transition: none; } }
.look-carousel .look-row .look-row-shop { font-size: .6em; }
/* Plus spécifique que .fa-solid (display: inline-block) : la boutique ne sort que sur la case
   « +N à débloquer », la dernière d'un carrousel (look-carousel.js, emote-loadout.js). */
.look-row:not(.is-shop) .look-row-shop { display: none; }
.look-row.is-shop .look-row-value { color: var(--screen-muted); }
.look-row.is-shop .look-row-shop { color: var(--screen-warning); }
.character-stage, .lobby-blobby-preview { position: relative; }
.look-row-value strong:empty { display: none; }