/* ============================================================
   FULLY — BRAWL SKIN GLOBALE ("a manetta")
   Caricato per ULTIMO: sovrascrive font, bottoni, pill, chip
   su tutte le schermate per un look Supercell/Brawl coerente.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Baloo+2:wght@600;700;800&display=swap');

:root { --ink: #160a2e; }

/* ---- Font ORIGINALE ovunque (le forme/bordi Brawl restano) ---- */
* { font-family: var(--font, 'Poppins', system-ui, sans-serif) !important; }

/* ---- Bottoni ciccioni globali (bordo scuro + bevel + press) ---- */
.btn {
  border: 3px solid var(--ink); border-radius: 14px;
  font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; letter-spacing: .3px;
  box-shadow: 0 5px 0 rgba(0,0,0,.45); transition: transform .08s ease, box-shadow .12s ease;
  -webkit-text-stroke: .4px var(--ink); paint-order: stroke fill;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.45); }
.btn--big { border-width: 4px; font-size: 19px; }
.btn--primary {
  background: linear-gradient(180deg, #54d6ff, #2f8bf2); border-color: #0e4fa0;
  box-shadow: 0 5px 0 #0e4fa0, inset 0 2px 0 rgba(255,255,255,.4); color: #fff;
}
.btn--primary:active { box-shadow: 0 2px 0 #0e4fa0, inset 0 2px 0 rgba(255,255,255,.25); }
.btn--secondary {
  background: linear-gradient(180deg, #3a4bb0, #20286a); border-color: var(--ink);
  box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.22); color: #fff;
}
.btn--secondary:active { box-shadow: 0 2px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.14); }

/* ---- CTA principale: riflesso lucido che passa, invito al tocco ---- */
.btn--primary::after {
  content: ''; position: absolute; top: 0; left: -40%; width: 34%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%) skewX(-16deg);
  animation: btn-shine 3.6s ease-in-out infinite; pointer-events: none;
}
@keyframes btn-shine {
  0%, 62% { transform: translateX(-100%) skewX(-16deg); }
  100%    { transform: translateX(420%) skewX(-16deg); }
}

/* ---- Pill / chip / HUD ---- */
.pill { border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-weight: 800; }
.pill--gold { background: linear-gradient(180deg, #ffe27a, #f0a713); color: #3a2600; }
.app-header__chip {
  border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-weight: 800; border-radius: 999px;
}
.app-header__chip b { font-family: 'Lilita One', system-ui; }

/* ---- Card generiche più ciccione ---- */
.card { border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 9px 18px rgba(0,0,0,.35); }

/* ---- Home HERO: lasciata come l'originale (niente restyle Brawl) ---- */
.home-hero .btn--primary { background: var(--grad-gold); color: var(--ink); border: 0; box-shadow: var(--shadow-gold); -webkit-text-stroke: 0; }
.home-hero .btn--primary:active { transform: none; }

/* ---- Home HERO: più energia (glow, note fluttuanti, entrata, pulse) ---- */
/* Bagliore caldo pulsante dietro i personaggi */
.home-hero--full::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(40% 44% at 74% 48%, rgba(255,180,60,.26), transparent 70%);
  mix-blend-mode: screen; animation: hf-glow 5s ease-in-out infinite;
}
@keyframes hf-glow { 0%,100% { opacity:.5; } 50% { opacity:1; } }

/* Note musicali fluttuanti (solo desktop, nella colonna testo) */
.hf__spark { display: none; }
@media (min-width: 900px) {
  .hf__spark { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
  .hf__spark span {
    position: absolute; font-size: 26px; color: #ffd76a; opacity: 0;
    text-shadow: 0 0 14px rgba(255,200,80,.7); animation: hf-float 7.5s ease-in-out infinite;
  }
  .hf__spark span:nth-child(1) { left: 8%;  top: 20%; font-size: 22px; animation-delay: 0s; }
  .hf__spark span:nth-child(2) { left: 30%; top: 12%; font-size: 30px; animation-delay: 1.4s; }
  .hf__spark span:nth-child(3) { left: 18%; top: 30%; font-size: 24px; animation-delay: 2.8s; }
  .hf__spark span:nth-child(4) { left: 40%; top: 24%; font-size: 20px; animation-delay: 4.1s; }
  .hf__spark span:nth-child(5) { left: 5%;  top: 40%; font-size: 26px; animation-delay: 5.3s; }
}
@keyframes hf-float {
  0%   { transform: translateY(24px) rotate(-8deg); opacity: 0; }
  18%  { opacity: .8; }
  60%  { opacity: .55; }
  100% { transform: translateY(-70px) rotate(10deg); opacity: 0; }
}

/* Entrata a cascata dei testi + loop (twinkle stelle, glow bottone) */
.home-hero .hf__title      { animation: hf-in .6s .05s both; }
.home-hero .hf__lead       { animation: hf-in .6s .18s both; }
.home-hero .hf__names      { animation: hf-in .6s .30s both; }
.home-hero .hf__names-sub  { animation: hf-in .6s .40s both; }
.home-hero .hf__stars      { animation: hf-in .6s .50s both, hf-twinkle 2.4s 1.2s ease-in-out infinite; }
.home-hero .hf__cta-main   { animation: hf-in .6s .60s both, hf-ctaglow 2.6s 1.3s ease-in-out infinite; }
.home-hero .hf__scroll     { animation: hf-in .6s .72s both; }
@keyframes hf-in { 0% { transform: translateY(16px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes hf-twinkle { 0%,100% { text-shadow: 0 0 16px rgba(255,190,40,.65), 0 2px 6px rgba(0,0,0,.6); } 50% { text-shadow: 0 0 26px rgba(255,210,80,.95), 0 2px 6px rgba(0,0,0,.6); transform: scale(1.04); } }
@keyframes hf-ctaglow { 0%,100% { filter: drop-shadow(0 0 0 rgba(255,200,60,0)); } 50% { filter: drop-shadow(0 0 16px rgba(255,190,50,.6)); } }

.reduce-motion .home-hero--full::after,
.reduce-motion .hf__spark span,
.reduce-motion .home-hero .hf__title,
.reduce-motion .home-hero .hf__lead,
.reduce-motion .home-hero .hf__names,
.reduce-motion .home-hero .hf__names-sub,
.reduce-motion .home-hero .hf__stars,
.reduce-motion .home-hero .hf__cta-main,
.reduce-motion .home-hero .hf__scroll { animation: none !important; opacity: 1 !important; }

/* ---- Studio: chip strumenti ---- */
.instr-chip { border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font-family: 'Baloo 2', system-ui; font-weight: 800; }
.instr-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.instr-chip.is-on { background: linear-gradient(180deg, #ffe27a, #f0a713); color: #3a2600; border-color: var(--ink); box-shadow: 0 4px 0 #b9740a; }