/* Canonical page-header logo, shared with the training screen. */
.game-brand {
  display: grid; justify-items: center; gap: 1px;
  line-height: .8; text-decoration: none; text-transform: none;
}
.game-brand .game-brand-main {
  display: flex; gap: 0;
  font: 400 clamp(28px, 4.4dvh, 46px)/.78 'Jersey 15', sans-serif;
  letter-spacing: .01em;
}
.game-brand-main span {
  color: transparent; background-clip: text;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-image: repeating-linear-gradient(0deg, #f3f0df 0 4px, #dedbcb 4px 5px);
}
.game-brand-main span + span {
  background-image: repeating-linear-gradient(0deg, #a7dccb 0 4px, #8bbfab 4px 5px);
}
.game-brand .game-brand-sub {
  padding-left: .35em; color: #f6cd72;
  font: clamp(7px, 1dvh, 10px)/1 'Numbers', monospace;
  letter-spacing: .32em;
}

/* Sur l'écran d'accueil (avant l'ouverture du menu), les lettres de PLOP SMASH rebondissent et s'écrasent
   comme les Plops en match, en une vague de gauche à droite sur tout le mot ; partout ailleurs (menus,
   en-têtes) le logo reste droit et immobile. Chaque lettre reprend le fond rayé de son mot
   (background-clip: text) ; le mot lui-même ne le peint plus (taille 0), sinon Chrome redessine ses
   lettres animées à leur place d'origine. */
.logo-plop, .logo-smash, .logo-bang { background-size: 0 0 !important; }
.logo-plop b, .logo-smash b, .logo-bang b {
  display: inline-block; font-weight: inherit;
  background: inherit; background-size: auto; -webkit-background-clip: text; background-clip: text;
  transform-origin: 50% 100%;
}
/* Même rebond (~840 ms par lettre), puis ~2,7 s de repos entre les vagues. */
.arcade-cabinet:not(.is-menu-ready) .arcade-logo-main b { animation: logo-hop 4.2s .4s infinite; }
.arcade-cabinet:not(.is-menu-ready) .arcade-logo-main .logo-plop b:nth-child(2) { animation-delay: .47s; }
.arcade-cabinet:not(.is-menu-ready) .arcade-logo-main .logo-plop b:nth-child(3) { animation-delay: .54s; }
.arcade-cabinet:not(.is-menu-ready) .arcade-logo-main .logo-plop b:nth-child(4) { animation-delay: .61s; }
.arcade-cabinet:not(.is-menu-ready) .arcade-logo-main .logo-smash b:nth-child(1) { animation-delay: .68s; }
.arcade-cabinet:not(.is-menu-ready) .arcade-logo-main .logo-smash b:nth-child(2) { animation-delay: .75s; }
.arcade-cabinet:not(.is-menu-ready) .arcade-logo-main .logo-smash b:nth-child(3) { animation-delay: .82s; }
.arcade-cabinet:not(.is-menu-ready) .arcade-logo-main .logo-smash b:nth-child(4) { animation-delay: .89s; }
.arcade-cabinet:not(.is-menu-ready) .arcade-logo-main .logo-smash b:nth-child(5) { animation-delay: .96s; }
.arcade-cabinet:not(.is-menu-ready) .arcade-logo-main .logo-bang b { animation-delay: 1.03s; }
@keyframes logo-hop {
  0% { translate: 0 0; scale: 1 1; }
  2% { scale: 1.1 .86; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  4% { scale: .94 1.08; }
  9.333% { translate: 0 -.2em; scale: 1 1; animation-timing-function: cubic-bezier(.6, 0, .8, .3); }
  14.667% { translate: 0 0; scale: 1.1 .86; }
  17.333% { scale: .96 1.05; }
  20%, 100% { translate: 0 0; scale: 1 1; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-cabinet:not(.is-menu-ready) .arcade-logo-main b { animation: none; }
}

/* PLOP SMASH tient sur une seule ligne : PLOP crème, SMASH menthe, séparés par une petite espace,
   sur l'écran titre comme dans les en-têtes. */
.game-brand-main > span + span, .arcade-logo-main > span + span { margin-left: .18em; }
/* Le mot ne se coupe jamais : sur grand écran, l'écran titre (×1,15) dépasse la colonne de 560px et
   chaque moitié se repliait entre ses lettres. Il déborde alors à parts égales de la colonne. */
.arcade-logo-main { display: flex; justify-content: center; }
.game-brand-main > span, .arcade-logo-main > span { flex: none; white-space: nowrap; }
.arcade-logo .arcade-logo-main span + span { margin-top: 0; }

/* Un point d'exclamation menthe complète le titre et les logos des menus. */
.game-brand-main > .logo-bang, .arcade-logo-main > .logo-bang { margin-left: .045em; }
.arcade-logo .arcade-logo-main .logo-bang {
  background-image: repeating-linear-gradient(0deg, #a7dccb 0 .045em, #8bbfab .045em .055em);
}

/* Sur l'écran titre, le logo croise l'horizon : un contour sombre net détache SMASH (menthe) de la
   mer, puis la tranche 3D d'origine. Tant que le menu n'est pas ouvert, PLOP SMASH! (plus long que
   GOOMBALL) passe à 92 % pour garder la largeur de l'ancien logo, puis prend sa taille de menu avec
   la même transition. */
.arcade-cabinet .arcade-logo-main {
  --logo-edge: clamp(1px, .018em, 2px);
  --logo-depth: clamp(2px, .03em, 3px);
  filter:
    drop-shadow(var(--logo-edge) 0 0 #142420) drop-shadow(calc(-1 * var(--logo-edge)) 0 0 #142420)
    drop-shadow(0 var(--logo-edge) 0 #142420) drop-shadow(0 calc(-1 * var(--logo-edge)) 0 #142420)
    drop-shadow(0 var(--logo-depth) 0 #243e32);
}
/* Les grandes lettres gardent une rayure proportionnelle ; les petits en-têtes
   utilisent une seule ligne douce de 1px tous les 5px pour rester lisibles. */
.arcade-logo .arcade-logo-main .logo-plop {
  background-image: repeating-linear-gradient(0deg, #f3f0df 0 .045em, #dedbcb .045em .055em);
}
.arcade-logo .arcade-logo-main .logo-smash {
  background-image: repeating-linear-gradient(0deg, #a7dccb 0 .045em, #8bbfab .045em .055em);
}
.arcade-logo-main > span { transition: font-size 280ms cubic-bezier(.2, .8, .2, 1); }
.arcade-cabinet:not(.is-menu-ready) .arcade-logo-main > span { font-size: .92em; }