/**
 * yc-screens.css — templates PARTAGÉS des écrans de jeu (intro + game over),
 * au niveau "arcade" de référence (cosmocat / colibri). Tous les jeux les
 * réutilisent ; SEULES les couleurs changent, via les variables --game-*
 * surchargées par chaque jeu (sur son conteneur racine).
 *
 * Markup injecté par /shared/js/yc-screens.js. Frame/canvas/HUD restent
 * propres au jeu (chrome de play).
 *
 * Palette par défaut = cosmocat (violet/rose/cyan). Un jeu re-skinne en posant
 * ses --game-* (cf. public/colibri/ pour l'exemple émeraude/corail).
 */

:root {
  --game-primary: #7c4dff;
  --game-accent: #ff4dcc;
  --game-light: #b388ff;
  --game-neon: #5eff9f;
  --game-sky: #4dd0ff;
  --game-gold: #ffb84d;
  --game-orange: #ff6b4d;
  --game-dim: rgba(255, 255, 255, 0.62);

  --game-card-bg: #1a1033;
  --game-card-grad: linear-gradient(180deg, rgba(45, 27, 94, 0.88) 0%, rgba(26, 16, 51, 0.96) 100%);
  --game-hero-grad: linear-gradient(180deg, #1a0a3d 0%, #3d0a5e 50%, #0a0418 100%);
  --game-title-grad: linear-gradient(135deg, #fff 0%, var(--game-light) 60%, var(--game-accent) 100%);
  --game-score-grad: linear-gradient(135deg, var(--game-accent) 0%, var(--game-light) 45%, var(--game-sky) 100%);
  --game-card-glow: rgba(124, 77, 255, 0.15);

  /* Leaderboard (yc-leaderboard.css) : tuiles avatar + cartouches podium.
     Défauts violets = cosmocat ; un jeu re-skinne via ses --game-* (cf. colibri). */
  --game-avatar-grad: linear-gradient(135deg, #1a0a3d, #3d0a5e);
  --game-pod-grad: linear-gradient(180deg, rgba(26, 16, 51, 0.7) 0%, rgba(10, 4, 24, 0.9) 100%);
  --game-pod-base: rgba(26, 16, 51, 0.9);

  /* Hero du CLASSEMENT, distinct du hero du home (--game-hero-grad) : le home
     peut avoir un hero illustré clair (cf. colibri = ciel/lever de soleil), mais
     le hero du classement porte du TEXTE et doit rester sombre/contrasté. Défaut
     = hero arcade sombre cosmocat. Glow = halos décoratifs du pseudo-élément. */
  --game-lb-hero-grad: linear-gradient(180deg, #1a0a3d 0%, #3d0a5e 50%, #0a0418 100%);
  --game-lb-hero-glow:
    radial-gradient(circle at 70% 30%, rgba(255, 184, 77, 0.25), transparent 50%),
    radial-gradient(circle at 20% 70%, rgba(77, 208, 255, 0.2), transparent 50%);

  --ycs-font-sans: 'Inter', system-ui, sans-serif;
  --ycs-font-disp: 'Outfit', 'Inter', sans-serif;
  --ycs-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ===== Vues SPA ===== */
.ycs-view { display: block; }
.ycs-view[hidden], .ycs-view.is-hidden { display: none !important; }
.ycs-view--home, .ycs-view--over {
  position: relative; width: 100%; min-height: calc(100dvh - 64px);
  padding: 28px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow-x: hidden;
}

/* Vue PLAY (règle PARTAGÉE, cf. CLAUDE.md §9). Occupe tout l'espace
   disponible entre header et footer via flex:1. La zone de jeu réelle
   (.yc-game-fit, absolute inset:0, définie dans design-system.css) la
   remplit et la brique yc-game-frame met le cadre à l'échelle pour tenir
   sans scroll sur les deux axes.
   IMPORTANT : aucun min-height ici. Un min-height: calc(100dvh - <Npx>)
   suppose une hauteur de header figée et provoque du scroll dès qu'elle
   diffère (mobile, safe-area viewport-fit=cover, chargement webfont). La
   flexbox calcule la hauteur exacte restante. Ne pas réintroduire de
   min-height dans le <style> d'un jeu. */
.ycs-view--play { flex: 1; width: 100%; position: relative; }

/* ============================================================
   INTRO
   ============================================================ */
.ycs-intro-card {
  position: relative; z-index: 2; width: 100%; max-width: 620px;
  background: var(--game-card-grad);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 60px var(--game-card-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ycs-intro-hero {
  position: relative; aspect-ratio: 620/240; overflow: hidden;
  background: var(--game-hero-grad);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ycs-intro-hero-fx { position: absolute; inset: 0; pointer-events: none; }
.ycs-intro-cat {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 170px; height: 170px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  animation: ycs-float 3s ease-in-out infinite;
}
.ycs-intro-cat svg { filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.3)); }
@keyframes ycs-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
  50% { transform: translate(-50%, -58%) rotate(3deg); }
}
.ycs-intro-orbit {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg);
  width: 280px; height: 280px; border: 1px dashed rgba(255, 255, 255, 0.22); border-radius: 50%; z-index: 1;
}
.ycs-intro-orbit::before, .ycs-intro-orbit::after { content: ''; position: absolute; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.ycs-intro-orbit::before { width: 10px; height: 10px; top: -5px; left: 50%; background: var(--game-gold); color: var(--game-gold); }
.ycs-intro-orbit::after { width: 8px; height: 8px; bottom: 10%; right: 0; background: var(--game-accent); color: var(--game-accent); }
/* Partenaire posé sur un voile dégradé en bas du hero (pas de pilule), aligné
   à droite. Le voile n'apparaît que si un partenaire est présent (:has) →
   ReforestBlock (sans partenaire) garde un hero net. On neutralise localement
   le style chip de .yc-partner (design-system.css) sans toucher le composant
   partagé. La mascotte est légèrement remontée pour rester au-dessus du voile. */
.ycs-intro-hero:has(.ycs-intro-partner)::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(8, 4, 20, 0) 0%,
    rgba(8, 4, 20, 0) 62%,
    rgba(8, 4, 20, 0.35) 84%,
    rgba(8, 4, 20, 0.82) 100%);
  z-index: 2; pointer-events: none;
}
.ycs-intro-hero:has(.ycs-intro-partner) .ycs-intro-cat { top: 45%; }
.ycs-intro-partner { position: absolute; bottom: 18px; right: 22px; z-index: 3; }
.ycs-intro-hero .ycs-intro-partner {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: none; padding: 0; border-radius: 0; max-width: calc(100% - 44px);
}
.ycs-intro-hero .ycs-intro-partner .yc-partner-label,
.ycs-intro-hero .ycs-intro-partner .yc-partner-name {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.65);
}
.ycs-intro-hero .ycs-intro-partner .yc-partner-label { color: rgba(255, 255, 255, 0.85); }
.ycs-intro-hero .ycs-intro-partner .yc-partner-name { color: #fff; }

.ycs-intro-body { padding: 32px 36px 28px; position: relative; }
.ycs-intro-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.ycs-intro-tag { font-family: var(--ycs-font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--game-light); font-weight: 700; }
.ycs-intro-sep { width: 4px; height: 4px; background: rgba(255, 255, 255, 0.25); border-radius: 50%; }
.ycs-intro-difficulty { display: inline-flex; gap: 3px; align-items: center; font-family: var(--ycs-font-mono); font-size: 11px; color: var(--game-dim); letter-spacing: 0.05em; }
.ycs-intro-pip { width: 6px; height: 6px; background: var(--game-neon); border-radius: 50%; box-shadow: 0 0 6px var(--game-neon); }
.ycs-intro-pip.off { background: rgba(255, 255, 255, 0.15); box-shadow: none; }
.ycs-intro-title {
  font-family: var(--ycs-font-disp); font-size: 68px; font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; margin: 10px 0 14px;
  background: var(--game-title-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ycs-intro-tagline { font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); margin: 0 0 18px; font-weight: 500; max-width: 460px; }
.ycs-intro-actions { display: flex; gap: 12px; align-items: stretch; margin: 18px 0; }
.ycs-intro-impact { margin: 18px 0 12px; }
.ycs-intro-note { font-family: var(--ycs-font-mono); font-size: 9px; color: var(--game-gold); letter-spacing: 0.04em; margin-bottom: 14px; }
.ycs-intro-foot { padding: 14px 36px 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.2); text-align: center; font-size: 12px; color: var(--game-dim); }
.ycs-intro-foot-ctrl { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ycs-font-mono); font-size: 11px; letter-spacing: 0.08em; }
.ycs-key { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-bottom-width: 2px; border-radius: 5px; }

/* ===== Boutons ===== */
.ycs-btn-primary {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; cursor: pointer;
  font-family: var(--ycs-font-sans); font-weight: 800; font-size: 16px; border-radius: 14px; padding: 18px 22px; color: #fff;
  background: linear-gradient(135deg, var(--game-accent), var(--game-primary));
  box-shadow: 0 0 24px color-mix(in srgb, var(--game-accent) 35%, transparent), 0 10px 28px color-mix(in srgb, var(--game-primary) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.15s, box-shadow 0.15s; position: relative; overflow: hidden;
}
.ycs-btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); animation: ycs-btn-shine 3s ease-in-out infinite; pointer-events: none; }
@keyframes ycs-btn-shine { 0%, 30% { left: -100%; } 60%, 100% { left: 200%; } }
.ycs-btn-primary > * { position: relative; z-index: 1; }
.ycs-btn-primary:hover { transform: translateY(-2px); }
.ycs-btn-primary:active { transform: translateY(1px); }
.ycs-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06);
  color: #fff; cursor: pointer; font-family: var(--ycs-font-sans); font-weight: 600; font-size: 16px; border-radius: 14px; padding: 18px 24px; white-space: nowrap; text-decoration: none;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.ycs-btn-ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); border-color: var(--game-light); }

/* ===== Mécanique impact (300 pts -> 1 unité) =====
   Calé sur le design CosmoCat (.yc-impact) : halo doré en haut à droite,
   séparateur pointillé doré, pastille flèche ronde centrée sur la séparation.
   Les teintes suivent --game-gold / --game-accent → chaque jeu sa couleur. */
.ycs-mech { position: relative; display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--game-gold) 12%, transparent), color-mix(in srgb, var(--game-accent) 7%, transparent)); border: 1px solid color-mix(in srgb, var(--game-gold) 26%, transparent); }
.ycs-mech::before { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: radial-gradient(circle, color-mix(in srgb, var(--game-gold) 28%, transparent), transparent 70%); pointer-events: none; }
.ycs-mech .st { flex: 1; padding: 12px 14px; position: relative; min-width: 0; }
.ycs-mech .st + .st { border-left: 1px dashed color-mix(in srgb, var(--game-gold) 32%, transparent); }
.ycs-mech-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: var(--game-card-bg, #1a1033); border: 1px solid color-mix(in srgb, var(--game-gold) 36%, transparent); display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; color: var(--game-gold); z-index: 2; }
.ycs-mech .n { font-family: var(--ycs-font-disp); font-weight: 900; font-size: 19px; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--game-gold), var(--game-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ycs-mech .l { font-size: 11px; color: rgba(255, 255, 255, 0.8); line-height: 1.3; margin-top: 2px; }
.ycs-mech .l strong { color: #fff; }

/* ============================================================
   GAME OVER
   ============================================================ */
.ycs-go-card {
  position: relative; z-index: 2; width: 100%; max-width: 560px;
  background: var(--game-card-grad);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 60px var(--game-card-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ycs-go-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.ycs-go-confetti i { position: absolute; top: -20px; width: 8px; height: 10px; animation: ycs-fall linear infinite; }
@keyframes ycs-fall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 0.9; } }
.ycs-go-head { position: relative; text-align: center; padding: 40px 36px 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ycs-go-head::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center top, rgba(255, 184, 77, 0.18), transparent 60%); pointer-events: none; }
.ycs-go-trophy { width: 80px; height: 80px; margin: 0 auto 20px; position: relative; animation: ycs-bob 2.4s ease-in-out infinite; }
.ycs-go-trophy svg { filter: drop-shadow(0 0 20px rgba(255, 184, 77, 0.5)); }
@keyframes ycs-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.ycs-go-kicker { font-family: var(--ycs-font-mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--game-neon); margin: 0 0 10px; display: inline-flex; align-items: center; gap: 10px; }
.ycs-go-kicker::before, .ycs-go-kicker::after { content: ''; width: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--game-neon)); }
.ycs-go-kicker::after { background: linear-gradient(90deg, var(--game-neon), transparent); }
.ycs-go-title { font-family: var(--ycs-font-disp); font-size: 44px; font-weight: 900; margin: 0; letter-spacing: -0.02em; line-height: 1; background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--game-neon) 40%, #fff) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ycs-go-score { position: relative; padding: 32px 36px 24px; text-align: center; }
.ycs-go-score-label { font-family: var(--ycs-font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--game-dim); text-transform: uppercase; margin-bottom: 12px; }
.ycs-go-score-value { position: relative; display: inline-block; font-family: var(--ycs-font-disp); font-size: 108px; font-weight: 900; line-height: 0.9; background: var(--game-score-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.ycs-go-score-value::after { content: ''; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent, var(--game-light), transparent); }
.ycs-go-score-unit { display: block; margin-top: 22px; font-size: 13px; font-family: var(--ycs-font-mono); letter-spacing: 0.25em; color: var(--game-dim); text-transform: uppercase; }
.ycs-go-impact { margin: 8px 28px 28px; padding: 22px 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--game-primary) 13%, transparent), color-mix(in srgb, var(--game-accent) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--game-primary) 25%, transparent); border-radius: 20px; display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; }
.ycs-go-impact::before { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, color-mix(in srgb, var(--game-primary) 30%, transparent), transparent 70%); pointer-events: none; }
.ycs-go-impact-icon { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--game-primary), var(--game-accent)); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--game-primary) 35%, transparent); }
.ycs-go-impact-body { flex: 1; position: relative; }
.ycs-go-impact-label { font-family: var(--ycs-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--game-accent); margin-bottom: 4px; font-weight: 700; }
.ycs-go-impact-value { font-family: var(--ycs-font-disp); font-size: 24px; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -0.01em; }
.ycs-go-impact-num { font-size: 30px; background: linear-gradient(90deg, var(--game-accent), var(--game-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: 6px; }
/* Suffixe du message "il te manquait X points ..." (état 0 repas) : plus petit,
   poids normal, sur sa propre ligne, atténué. */
.ycs-go-impact-sub { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.35; color: var(--game-dim); margin-top: 3px; }
.ycs-go-impact-partner { font-size: 12px; color: var(--game-dim); margin-top: 4px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ycs-go-impact-partner .by { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; color: #fff; }
.ycs-go-impact-partner strong { color: #fff; font-family: var(--ycs-font-disp); font-weight: 800; }
.ycs-go-mech { margin: 0 29px 24px; }
.ycs-go-actions { padding: 4px 28px 18px; display: flex; flex-direction: column; gap: 12px; }
.ycs-go-actions .ycs-btn-primary { flex: none; }
/* Rangée Rejouer + Classement cote a cote (calee sur .ycs-intro-actions) :
   Rejouer grandit (flex:1), le ghost Classement prend sa largeur de contenu. */
.ycs-go-actions-primary { display: flex; gap: 12px; align-items: stretch; }
.ycs-go-actions-primary .ycs-btn-primary { flex: 1; }
.ycs-go-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border-radius: 14px; font-family: var(--ycs-font-sans); font-weight: 700; font-size: 15px; cursor: pointer; border: none; min-height: 54px; color: #fff; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; }
.ycs-go-btn:hover { transform: translateY(-2px); }
.ycs-go-btn--donate { background: linear-gradient(135deg, var(--game-gold), var(--game-orange)); color: #fff; text-shadow: 0 1px 2px rgba(60, 20, 0, 0.45); box-shadow: 0 8px 24px rgba(255, 184, 77, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.ycs-go-btn--donate:link, .ycs-go-btn--donate:visited, .ycs-go-btn--donate:hover, .ycs-go-btn--donate:active, .ycs-go-btn--donate:focus { color: #fff; }
.ycs-go-btn--ghost { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 14px; font-weight: 600; min-height: 48px; padding: 12px 18px; }
.ycs-go-btn--ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--game-light); }
/* Rangee d'actions secondaires : flex pour qu'un seul bouton restant occupe
   toute la largeur proprement (Classement ayant migre vers .ycs-go-actions-primary). */
.ycs-go-actions-row { display: flex; gap: 12px; }
.ycs-go-actions-row > * { flex: 1; }
.ycs-go-share { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 16px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ycs-go-share-label { font-family: var(--ycs-font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--game-dim); margin-right: 4px; }
.ycs-go-share-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; padding: 0; transition: all 0.15s; }
.ycs-go-share-icon:hover { background: var(--game-primary); border-color: var(--game-primary); transform: translateY(-2px); }
.ycs-go-foot { padding: 16px 28px 24px; display: flex; justify-content: center; align-items: center; gap: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.2); }
.ycs-go-foot-text { margin: 0; font-size: 12px; color: var(--game-dim); line-height: 1.4; text-align: center; }
.ycs-go-foot-text b { color: var(--game-neon); }

/* ===== Responsive ===== */
@media (max-width: 560px) {
  .ycs-intro-title { font-size: 52px; }
  .ycs-intro-body { padding: 26px 24px 24px; }
  .ycs-intro-actions { flex-direction: column; }
}
@media (max-width: 520px) {
  .ycs-go-score-value { font-size: 84px; }
  .ycs-go-title { font-size: 36px; }
  .ycs-go-head { padding: 32px 24px 24px; }
  .ycs-go-score { padding: 24px 24px 20px; }
  .ycs-go-impact { margin: 8px 20px 24px; padding: 18px 18px; gap: 14px; }
  .ycs-go-actions { padding: 4px 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ycs-intro-cat, .ycs-go-trophy { animation: none; }
  .ycs-go-confetti { display: none; }
  .ycs-btn-primary::before { display: none; }
  .ycs-btn-primary:hover, .ycs-go-btn:hover, .ycs-btn-ghost:hover, .ycs-go-share-icon:hover { transform: none; }
}

/* ============================================================
   Superset cosmocat : éléments présents sur l'écran de référence et réutilisés
   par la migration cosmocat (logo partenaire image, lien pied de classement,
   message "partie trop courte", limite intro, bouton ghost intro, touche).
   Génériques, themables via --game-*.
   ============================================================ */
.ycs-intro-btn--ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 28px; border-radius: 14px; font-family: var(--ycs-font-sans); font-weight: 600; font-size: 16px;
  cursor: pointer; min-height: 60px; color: #fff; text-decoration: none; white-space: nowrap;
  transition: transform .18s, background .18s, border-color .18s;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
}
.ycs-intro-btn--ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.09); border-color: var(--game-light); }
.ycs-intro-btn--ghost:active { transform: translateY(0); }
.ycs-intro-key { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-bottom-width: 2px; border-radius: 5px; }
.ycs-go-impact-mech { margin: 0 29px 24px; }
.ycs-go-impact-partner-by { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; color: #fff; }
.ycs-go-partner-logo { height: 30px; width: auto; display: block; }
.ycs-go-partner-logo[hidden] { display: none; }
.ycs-go-foot[hidden] { display: none; }
.ycs-go-foot-link { background: none; border: none; font-size: 12px; font-weight: 700; color: var(--game-light); cursor: pointer; white-space: nowrap; padding: 0; font-family: inherit; }
.ycs-go-foot-link:hover { color: #fff; }
.ycs-go-too-short { margin: 0; padding: 16px 28px 24px; text-align: center; font-size: 13px; line-height: 1.5; color: #ffd28a; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.18); }
.ycs-go-too-short[hidden] { display: none; }