/* =============================================================================
   MON BLOBBY › EMOTES et ANIMATIONS (emote-loadout.js). Les lignes à gauche (deux barres de
   cinq phrases, ou victoire / défaite et l'aperçu), le catalogue de la ligne choisie à droite
   (seule zone qui défile). Jetons --screen-* seulement.
   ============================================================================= */

/* MON BLOBBY : quatre sections du même modèle (titre + filet, puis la case ou la grille) :
   PSEUDO, PERSONNAGE, COULEUR, EMOTES. Les skins tiennent sur une rangée de six, comme les
   couleurs : c'est ce qui laisse de l'air entre les sections dans le cadre 4:3. */
#arcade-panel-player .character-field-section.arcade-nameplate { display: block; }
/* Titres sans filet dessous : l'espace entre sections suffit à les séparer. */
#arcade-panel-player .character-section-heading { padding-bottom: 0; border-bottom: 0; }
.arcade-home-body #arcade-panel-player .character-roster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#arcade-panel-player .skin-choice-portrait { width: clamp(34px, 8cqh, 64px); }
/* Le sprite garde de la place au-dessus (oreilles, casquette, petit saut) et tous les blobs ont les
   pieds sur la même ligne : ils sont donc bas dans la case. Cette position se lit comme voulue
   avec une ombre au sol (comme sous les billes de couleur), et une marge basse plus grande que la
   haute remonte l'ensemble au milieu de la case. */
.arcade-home-body #arcade-panel-player .character-roster .skin-choice { padding: 2px 2px clamp(7px, 1.8cqh, 16px); }
#arcade-panel-player .skin-choice { position: relative; }
#arcade-panel-player .skin-choice::before {
  content: ''; position: absolute; left: 50%; bottom: calc(clamp(7px, 1.8cqh, 16px) - 3px);
  width: calc(clamp(34px, 8cqh, 64px) * .78); height: clamp(4px, .7cqh, 6px);
  transform: translateX(-50%); border-radius: 50%;
  background: color-mix(in srgb, var(--screen-shadow) 75%, transparent); pointer-events: none;
}
#arcade-panel-player .skin-choice-portrait { z-index: 1; }
/* « NIV. 15 » posé sur la silhouette, pas au milieu de la case. */
#arcade-panel-player .skin-choice > .character-lock { z-index: 2; top: auto; bottom: calc(clamp(7px, 1.8cqh, 16px) + clamp(34px, 8cqh, 64px) * .3); transform: translate(-50%, 50%); font-size: clamp(12px, 2.2cqh, 17px); }

/* Case des emotes : même cadre que celle du pseudo, mais on y voit les emotes en bulles (celles du
   match, au-dessus du blob) et « MODIFIER › » dit qu'on clique. Bulles en jetons de scène : même
   crème et même encre en interface sombre ou sable. */
.arcade-home-body #arcade-panel-player .character-emotes-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(8px, 1.4cqw, 14px);
  width: 100%; min-width: 0; min-height: clamp(56px, 10cqh, 76px); padding: 8px 14px 8px 12px; text-align: left;
  border: 1px solid var(--screen-line); border-radius: 2px; background: color-mix(in srgb, var(--screen-mint) 3%, transparent);
  color: var(--screen-ink); font: 24px/1 'Jersey 15', sans-serif; cursor: pointer;
}
/* Sélection : le curseur d'écran (arcade-ui.css) sur une teinte, comme les autres lignes. */
.arcade-home-body #arcade-panel-player .character-emotes-link:is(:hover, .is-selected, :focus-visible) {
  outline: none; background: var(--screen-tint);
}
.character-emotes-bubbles { display: flex; gap: 8px; min-width: 0; overflow: hidden; padding-bottom: 5px; }
.character-emote-bubble {
  position: relative; flex: none; padding: 3px 9px 4px;
  border: 2px solid var(--screen-scene-shadow); border-radius: 8px;
  background: var(--screen-scene-ink); color: var(--screen-scene-shadow);
  box-shadow: 0 2px 0 var(--screen-scene-shadow);
  font: clamp(15px, 2.6cqh, 20px)/1 'Jersey 15', sans-serif; white-space: nowrap;
}
.character-emote-bubble[hidden] { display: none; }
/* Petite pointe vers le bas à gauche, comme la bulle du match. */
.character-emote-bubble::before, .character-emote-bubble::after {
  content: ''; position: absolute; left: 10px; width: 0; height: 0; border-style: solid; border-color: transparent;
}
.character-emote-bubble::before { bottom: -7px; border-width: 7px 5px 0; border-top-color: var(--screen-scene-shadow); }
.character-emote-bubble::after { bottom: -4px; left: 12px; border-width: 4px 3px 0; border-top-color: var(--screen-scene-ink); }
.character-emotes-more { color: var(--screen-muted); font: 20px/1 'Jersey 15', sans-serif; }
.character-emotes-more.is-empty { visibility: hidden; }
.character-emotes-edit {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--screen-muted); font: 18px/1 'Jersey 15', sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.character-emotes-arrow { color: var(--screen-accent); font: 28px/1 'Jersey 15', sans-serif; }
/* Invité : un cadenas à la place de la flèche, dans la même case pour garder les proportions. */
.character-emotes-arrow.is-locked { display: inline-flex; align-items: center; justify-content: center; min-width: .5em; color: var(--screen-muted); font-size: 15px; }
.arcade-home-body #arcade-panel-player .character-emotes-link:is(:hover, .is-selected, :focus-visible) .character-emotes-edit { color: var(--screen-accent); }

/* Emotes et animations sous le perso, sur une rangée de deux cases : la flèche seule dit qu'on
   clique. La colonne est centrée ; la rangée, elle, prend toute sa largeur et lit à gauche. */
/* MON PERSO, deux colonnes qui finissent sur la même ligne : à gauche le perso, sa jauge, Mon
   profil, puis Emotes / Animations ; à droite Pseudo, Look, puis Le Marchand. Les deux colonnes
   s'alignent par le bas, leurs dernières rangées (mêmes titres, même hauteur de case) se font face.
   Le pseudo n'est plus répété sous le perso : le champ Pseudo le montre. */
#arcade-panel-player .character-layout { align-items: end; }
#arcade-panel-player :is(.character-preview, .character-customize) { align-self: end; }
#arcade-panel-player .character-customize { align-content: end; }
#arcade-panel-player .character-stage-canvas { height: clamp(130px, 36cqh, 340px); }
#arcade-panel-player .character-preview > .character-level { align-self: stretch; width: auto; max-width: none; margin: clamp(4px, 1.4cqh, 14px) 0 0; }
#arcade-panel-player .character-preview > .character-profile-trigger.player-profile-trigger { margin-top: clamp(6px, 1.6cqh, 14px); }
#arcade-panel-player .character-preview > .character-social-row { align-self: stretch; margin-top: clamp(10px, 3cqh, 28px); text-align: left; }
/* Une seule hauteur de case pour les dernières rangées des deux colonnes : calculée une fois sur le
   panneau (@property la fige en pixels), elle ne dépend plus de la colonne qui l'utilise. */
@property --character-last-row { syntax: '<length>'; inherits: true; initial-value: 56px; }
#arcade-panel-player { --character-last-row: clamp(42px, 8.5cqh, 70px); }
.arcade-home-body #arcade-panel-player .character-preview > .character-social-row .character-emotes-link,
.arcade-home-body #arcade-panel-player .character-customize > .character-shop-section .character-shop-link { min-height: var(--character-last-row); padding-block: 4px; }
/* Bulles un peu plus petites dans la demi-case : deux tiennent avant « +N ». */
#arcade-panel-player .character-preview .character-emote-bubble { font-size: clamp(13px, 2.2cqh, 17px); padding: 2px 7px 3px; }

/* Emotes et animations sur une rangée de deux cases : la flèche seule dit qu'on clique. */
#arcade-panel-player .character-social-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(10px, 2cqw, 20px); }
#arcade-panel-player .character-social-row .character-section { min-width: 0; }
.arcade-home-body #arcade-panel-player .character-social-row .character-emotes-link { grid-template-columns: minmax(0, 1fr) auto auto; padding-inline: 10px 12px; }
.arcade-home-body #arcade-panel-player .character-animations-link { grid-template-columns: minmax(0, 1fr) auto; }
.arcade-home-body #arcade-panel-player .character-emotes-link:is(:hover, .is-selected, :focus-visible) .character-emotes-arrow { color: var(--screen-accent); }
/* Case des animations : la victoire et la défaite portées, l'une sous l'autre avec leur icône. */
.character-animations-summary { display: grid; gap: 4px; min-width: 0; }
.character-animation-chip {
  display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--screen-ink); font: clamp(16px, 2.7cqh, 21px)/1 'Jersey 15', sans-serif;
}
.character-animation-chip .fa-solid { flex: none; width: 1.1em; color: var(--screen-mint); font-size: .72em; text-align: center; }

/* PRÊT ! : la balle-curseur au survol élargissait le bouton ; le survol reste dans la couleur. */
.arcade-home-body #arcade-panel-player .character-done::before,
.arcade-home-body #arcade-panel-player .character-done:is(:hover, .is-selected, :focus-visible)::before { display: none; }

/* Colonne de droite (Pseudo, Look, Emotes / Animations / Boutique) : une seule échelle, sur la
   hauteur du cadre (cqh), à toutes les tailles. Cases, rangées du Look, écarts entre sections et
   sous les titres grandissent ensemble, la colonne occupe la hauteur du portrait au lieu de
   se serrer au milieu. Les planchers gardent PRÊT ! dégagé en 1024×640. */
/* L'écart entre sections fond plus vite que le reste : ~11 px en 1024×640, ~40 px en 1920×1080. */
#arcade-panel-player .character-customize { gap: clamp(8px, 5.5cqh - 18px, 34px); align-content: center; }
#arcade-panel-player .character-section-heading { margin-bottom: clamp(4px, 1.7cqh, 16px); }
#arcade-panel-player .character-name-entry { min-height: clamp(38px, 8cqh, 64px); padding-block: 0; }
.arcade-home-body #arcade-panel-player .character-name-entry #login { min-height: 0; padding-block: 4px; }
#arcade-panel-player .character-look-carousel { gap: clamp(4px, 1.3cqh, 12px); }
#arcade-panel-player .character-look-carousel .look-row { min-height: clamp(32px, 7.4cqh, 60px); }
.arcade-home-body #arcade-panel-player .character-emotes-link { min-height: clamp(46px, 10.4cqh, 84px); padding-block: 6px; }

/* Écran */
/* Rogné avec une marge : le curseur d'écran, dessiné hors de la ligne, garde ses coins. */
.arcade-home-body .emote-panel .arcade-panel-inner { overflow: hidden; overflow: clip; overflow-clip-margin: 8px; }
.arcade-home-body .emote-panel .emote-screen {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(16px, 4cqw, 44px);
  flex: 1 1 auto; min-height: 0; width: 100%; margin: 0;
}
.emote-screen-bars { display: flex; flex-direction: column; gap: clamp(8px, 2.4cqh, 22px); min-height: 0; }
.emote-screen-heading {
  margin: 0 0 clamp(4px, 1cqh, 10px); color: var(--screen-mint);
  font: clamp(18px, 3.4cqh, 24px)/1 'Jersey 15', sans-serif; letter-spacing: .1em; text-transform: uppercase;
}

/* Emplacements : rangées d'options, en plus serré (dix lignes doivent tenir sans défiler). */
.arcade-home-body .emote-panel .emote-slots { gap: 0; }
.arcade-home-body .emote-panel .emote-slot {
  min-height: clamp(30px, 5.6cqh, 50px); padding-block: clamp(2px, .5cqh, 6px);
  grid-template-columns: 1.2em minmax(0, 1fr) auto; font-size: clamp(18px, 3.5cqh, 30px);
  color: var(--screen-ink); text-align: left;
}
.arcade-home-body .emote-panel .emote-slot-key { color: var(--screen-muted); font-family: 'Numbers', 'Jersey 15', monospace; font-size: .62em; }
.arcade-home-body .emote-panel .emote-slot-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arcade-home-body .emote-panel .emote-slot.is-selected .emote-slot-key { color: var(--screen-accent); }
.arcade-home-body .emote-panel .emote-slot .arcade-system-arrows { color: var(--screen-muted); opacity: 0; }
.arcade-home-body .emote-panel .emote-slot.is-selected .arcade-system-arrows { opacity: 1; color: var(--screen-accent); }
.arcade-home-body .emote-panel .emote-slot:disabled { opacity: 1; cursor: default; }
/* Sélection = curseur d'écran + teinte (.is-selected, arcade-ui.css). */
.arcade-home-body .emote-panel .emote-slot:focus-visible { outline: none; }

/* ANIMATIONS : face-à-face comme l'écran de fin, la victoire à gauche, la défaite à droite. Chaque
   carte : titre, scène (end-animations.js, 120 × 168 px de texture avec l'îlot de sable de MON
   PERSO sous les pieds),
   ligne « ‹ nom › » du même modèle que Tête / Corps, et une pastille par animation. */
.arcade-home-body #arcade-panel-animations .animation-screen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center;
  gap: clamp(10px, 2cqh, 18px) clamp(16px, 4cqw, 44px); flex: 1 1 auto; min-height: 0; width: 100%; margin: 0;
}
.animation-card { display: flex; flex-direction: column; gap: clamp(8px, 1.6cqh, 14px); min-width: 0; }
.animation-card-title {
  display: flex; align-items: center; gap: .45em; margin: 0; color: var(--screen-mint);
  font: clamp(20px, 3.8cqh, 28px)/1 'Jersey 15', sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.animation-card[data-animation-card='win'] .animation-card-title { color: var(--screen-accent); }
.animation-card-title .fa-solid { font-size: .72em; }
.animation-stage {
  position: relative; height: clamp(170px, 42cqh, 330px); overflow: hidden; background: var(--screen-panel);
}
.animation-stage-canvas {
  position: absolute; left: 50%; bottom: 3%; height: 96%; aspect-ratio: 120 / 168;
  transform: translateX(-50%); image-rendering: pixelated;
}
.arcade-home-body #arcade-panel-animations .animation-row { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: clamp(4px, .8cqh, 6px); }
.animation-row .look-row-shop { font-size: .6em; }
.animation-pips { display: flex; justify-content: center; gap: 10px; min-height: 12px; }
.animation-pip { width: 12px; height: 12px; background: var(--screen-line); cursor: pointer; }
.animation-pip:hover { background: var(--screen-muted); }
.animation-pip.is-current { background: var(--screen-accent); }
.animation-pip.is-shop { background: transparent; box-shadow: inset 0 0 0 2px var(--screen-line); }
.animation-pip.is-shop.is-current { box-shadow: inset 0 0 0 2px var(--screen-accent); }
@media (max-width: 760px) {
  .arcade-home-body #arcade-panel-animations .animation-screen { grid-template-columns: 1fr; }
}

/* Catalogue de la barre choisie */
.emote-screen-catalog { display: flex; flex-direction: column; min-height: 0; padding-left: clamp(12px, 3cqw, 32px); border-left: 1px solid var(--screen-line); }
.emote-catalog { flex: 1 1 auto; min-height: 0; margin: 0; padding: 6px 8px; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.emote-catalog-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: clamp(26px, 4.6cqh, 40px); padding: 0 10px; border: 0; border-radius: 0; background: none;
  color: var(--screen-ink); font: clamp(16px, 3cqh, 24px)/1 'Jersey 15', sans-serif; text-align: left; cursor: pointer;
}
.emote-catalog-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emote-catalog-tag { flex: none; color: var(--screen-muted); font-size: .8em; letter-spacing: .04em; }
.emote-catalog-item:hover:not(:disabled) { color: var(--screen-accent); background: linear-gradient(90deg, var(--screen-tint) 0, transparent 80%); }
.emote-catalog-item.is-used .emote-catalog-tag { color: var(--screen-mint); font-family: 'Numbers', 'Jersey 15', monospace; }
.emote-catalog-item.is-current { color: var(--screen-accent); background: var(--screen-tint); }
.emote-catalog-item.is-current .emote-catalog-tag { color: var(--screen-accent); }
.emote-catalog-item.is-shop { color: var(--screen-muted); }
.emote-catalog-item.is-shop .emote-catalog-tag { color: var(--screen-warning); }
.emote-catalog-item:disabled { cursor: default; }

/* Invité : bandeau en tête d'écran, au-dessus du contenu qui reste lisible (pas grisé). */
.emote-guest-banner {
  display: flex; align-items: center; gap: clamp(10px, 2cqw, 20px); flex: none;
  margin: 0 0 clamp(10px, 2.4cqh, 20px); padding: clamp(8px, 1.6cqh, 14px) clamp(12px, 2cqw, 20px);
  border: 1px solid var(--screen-accent); background: var(--screen-tint);
}
.emote-guest-icon { flex: none; color: var(--screen-accent); font-size: clamp(16px, 3cqh, 22px); }
.emote-guest-copy { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--screen-ink); font: clamp(16px, 2.9cqh, 22px)/1.15 'Jersey 15', sans-serif; }
.emote-guest-copy strong { color: var(--screen-accent); font-weight: normal; letter-spacing: .06em; text-transform: uppercase; }
.emote-guest-banner.is-nudged { animation: emote-guest-nudge 480ms steps(6, end); }
@keyframes emote-guest-nudge {
  0%, 100% { transform: none; background: var(--screen-tint); }
  20%, 60% { transform: translateX(-6px); background: color-mix(in srgb, var(--screen-accent) 28%, transparent); }
  40%, 80% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .emote-guest-banner.is-nudged { animation: none; background: color-mix(in srgb, var(--screen-accent) 28%, transparent); }
}
/* Les emotes d'un invité se lisent comme une collection : ni grisées, ni cliquables en apparence. */
.arcade-home-body .emote-panel .emote-slot[aria-disabled='true'],
.emote-catalog-item[aria-disabled='true'] { cursor: default; }
.emote-catalog-item[aria-disabled='true']:hover { color: var(--screen-ink); background: none; }

@media (max-width: 760px) {
  .arcade-home-body .emote-panel .arcade-panel-inner { overflow: visible; }
  .arcade-home-body .emote-panel .emote-screen { grid-template-columns: 1fr; }
  .emote-screen-catalog { padding-left: 0; padding-top: 12px; border-left: 0; border-top: 1px solid var(--screen-line); }
  .emote-catalog { max-height: 40vh; }
}

.arcade-home-body .emote-guest-cta {
  flex: none; min-height: 40px; padding: 4px 16px; border: 0; border-radius: 0;
  background: var(--screen-accent); color: var(--screen-accent-ink);
  font: clamp(18px, 3.2cqh, 24px)/1 'Jersey 15', sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.arcade-home-body .emote-guest-cta:is(:hover, .is-selected, :focus-visible) {
  outline: none; background: color-mix(in srgb, var(--screen-accent) 82%, #fff);
}
@media (max-width: 760px) {
  .emote-guest-banner { flex-wrap: wrap; }
  .arcade-home-body .emote-guest-cta { width: 100%; }
}

/* Cadre bas (1024 × 640) : Pseudo, Look et Le Marchand tiennent au-dessus de PRÊT ! sans le toucher. */
@container (max-height: 560px) {
  #arcade-panel-player .character-name-entry { min-height: 32px; }
  #arcade-panel-player .character-look-carousel .look-row { min-height: 26px; }
  #arcade-panel-player { --character-last-row: 46px; }
  /* La colonne du perso tient dans la rangée : podium et écarts plus serrés. */
  #arcade-panel-player .character-stage-canvas { height: clamp(100px, 25cqh, 160px); }
  #arcade-panel-player .character-preview > .character-level { margin-top: 2px; }
  #arcade-panel-player .character-preview > .character-profile-trigger.player-profile-trigger { margin-top: 4px; }
  #arcade-panel-player .character-preview > .character-social-row { margin-top: 6px; }
  .arcade-home-body #arcade-panel-player .character-shop-link { padding-block: 2px; }
  #arcade-panel-player .character-customize { gap: 4px; }
  #arcade-panel-player .character-section-heading { margin-bottom: 3px; }
}