/* ============================================================
   FULLY — Stili dei mini-game
   ============================================================ */

.game { width: 100%; }

/* ---------- Costruisci la Melodia ---------- */
.bm-progress { display: flex; gap: 8px; justify-content: center; margin: 4px 0 10px; }
.bm-progress i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.15); border: 1px solid var(--border); }
.bm-progress i.is-on { background: var(--grad-gold); border-color: transparent; }

/* ---------- Boss: La Stonatura ---------- */
.boss { text-align: center; margin: 4px auto 10px; }
.boss__avatar { font-size: 64px; line-height: 1; display: inline-block; animation: bossFloat 2.4s ease-in-out infinite; }
.boss__avatar.is-hit { animation: bossHit .4s ease; }
@keyframes bossFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes bossHit { 0%,100% { transform: scale(1); } 30% { transform: scale(1.2) rotate(8deg); filter: brightness(2); } 60% { transform: scale(.9) rotate(-6deg); } }
.boss__hpwrap { width: 200px; max-width: 70%; height: 12px; margin: 10px auto 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; border: 1px solid var(--border); }
.boss__hp { height: 100%; background: linear-gradient(90deg,#ff6b6b,#e23d3d); transition: width .4s ease; }
.boss__lives { font-size: 20px; letter-spacing: 3px; }

/* ---------- Synth: pad luminosi ---------- */
.pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 520px; margin: 14px auto; }
.pad { aspect-ratio: 1/1; border: 2px solid color-mix(in srgb, var(--pc) 60%, transparent); border-radius: var(--r-md);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pc) 35%, transparent), rgba(9,15,38,.9)); color: #fff; font-weight: 900; font-size: 15px;
  cursor: pointer; display: grid; place-items: center; transition: transform .08s, box-shadow .08s; box-shadow: 0 0 14px color-mix(in srgb, var(--pc) 25%, transparent); }
.pad.is-press { transform: scale(.93); box-shadow: 0 0 28px var(--pc), inset 0 0 24px color-mix(in srgb, var(--pc) 60%, transparent); background: radial-gradient(circle at 50% 40%, var(--pc), rgba(9,15,38,.85)); }

/* ---------- Organo: tastiera vintage ---------- */
.piano--organ { padding: 14px 8px 0; border-radius: 14px; background: linear-gradient(180deg, #5b3a22, #3c2614); box-shadow: inset 0 0 30px rgba(0,0,0,.5); height: 204px; }
.piano--organ .pkey--w { background: linear-gradient(180deg, #fbf4e2, #e3d6b8); color: #6a4a1e; border-radius: 0 0 8px 8px; }
.piano--organ .pkey--w.is-press { background: linear-gradient(180deg, #ffd96b, #f0b73a); }
.piano--organ .pkey--b { background: linear-gradient(180deg, #3a2412, #1c1108); }
.piano--organ .pkey--b.is-press { background: linear-gradient(180deg, #b5763a, #8a5526); }

/* ---------- Chitarra a corde (Studio) ---------- */
.guitar { position: relative; max-width: 560px; height: 220px; margin: 14px auto; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #7a4e2c 0%, #5a3620 55%, #43281590 100%); border: 1px solid rgba(0,0,0,.45);
  box-shadow: inset 0 0 50px rgba(0,0,0,.55); user-select: none; touch-action: none; }
.guitar__hole { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, #160c06 40%, #2a190d 100%); box-shadow: inset 0 0 22px #000, 0 0 0 7px rgba(0,0,0,.28), 0 0 0 9px rgba(255,255,255,.06); }
.gstrings { position: absolute; inset: 0; display: flex; z-index: 1; }
.gstring { flex: 1; position: relative; background: transparent; border: none; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.gstring::before { content: ''; position: absolute; top: 5%; bottom: 13%; left: 50%; width: var(--w, 2px); transform: translateX(-50%);
  background: linear-gradient(180deg, #f3ecd0, #b9b196); box-shadow: 0 0 5px rgba(255,255,255,.45); border-radius: 2px; }
.gstring.is-press::before { animation: gstrum .26s ease; }
@keyframes gstrum { 0%,100% { transform: translateX(-50%) scaleX(1); filter: blur(0); } 30% { transform: translateX(-50%) scaleX(3); filter: blur(1px); } 60% { transform: translateX(-50%) scaleX(1.8); } }
.gstring span { position: relative; z-index: 2; color: rgba(255,255,255,.7); font-weight: 800; font-size: 12px; text-shadow: 0 1px 2px #000; }

/* ---------- Selettore strumenti (Studio) ---------- */
.instr-pick { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
.instr-chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-2); color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; transition: .2s; }
.instr-chip.is-on { background: var(--grad-gold); color: var(--ink); border-color: transparent; }

/* ---------- Strumento a barre (xilofono / carillon) ---------- */
.studio-stage { min-height: 200px; }
.bars { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 210px; max-width: 580px; margin: 14px auto; user-select: none; touch-action: none; }
.bar { flex: 1; min-width: 0; border: none; border-radius: 12px 12px 6px 6px; cursor: pointer; background: var(--bc);
  box-shadow: 0 6px 0 rgba(0,0,0,.28), inset 0 0 22px rgba(255,255,255,.25);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; color: rgba(0,0,0,.55); font-weight: 900; font-size: 13px; transition: transform .08s, box-shadow .08s; }
.bar.is-press { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.28), inset 0 0 34px rgba(255,255,255,.55); }
.instr-chip__ic { margin-right: 6px; }

/* ---------- Pianoforte suonabile (Studio) ---------- */
.piano { position: relative; max-width: 580px; margin: 14px auto; height: 190px; user-select: none; touch-action: none; }
.piano__white { display: flex; height: 100%; gap: 4px; }
.pkey { border: none; cursor: pointer; }
.pkey--w { flex: 1; background: linear-gradient(180deg,#fff,#e9edf6); color: #1a2240; border-radius: 0 0 12px 12px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; font-weight: 800; font-size: 13px; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.pkey--w.is-press { background: var(--grad-gold); transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.piano__black { position: absolute; inset: 0; pointer-events: none; }
.pkey--b { position: absolute; top: 0; width: 8%; height: 62%; background: linear-gradient(180deg,#1b2440,#0c1228); border-radius: 0 0 8px 8px;
  pointer-events: auto; box-shadow: 0 5px 0 rgba(0,0,0,.5); }
.pkey--b.is-press { background: var(--grad-blue); transform: translateY(2px); }

/* ---------- Memory Sonoro ---------- */
.memgrid { display: grid; gap: 12px; max-width: 420px; margin: 8px auto; }
.memcard { position: relative; aspect-ratio: 1/1; border: none; border-radius: var(--r-md); cursor: pointer;
  background: var(--card-2); border: 2px solid var(--border); display: grid; place-items: center; font-size: 34px; transition: transform var(--t-fast), border-color var(--t-fast); }
.memcard__face { } .memcard__back { display: none; }
.memcard.is-up { background: rgba(247,213,72,.16); border-color: var(--gold); }
.memcard.is-up .memcard__face { display: none; } .memcard.is-up .memcard__back { display: block; }
.memcard.is-done { background: rgba(54,211,153,.18); border-color: var(--ok); }
.memcard.is-done .memcard__face { display: none; } .memcard.is-done .memcard__back { display: block; }

/* ---------- Acchiappa il Suono ---------- */
.catch { text-align: center; margin: 14px 0; }
.catch__pad { width: 100%; max-width: 320px; min-height: 180px; border: 3px solid var(--border); border-radius: var(--r-xl);
  background: radial-gradient(circle at 50% 40%, rgba(47,143,255,.25), rgba(9,15,38,.9)); color: #fff; font-size: 56px; font-weight: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform .08s, border-color .1s; }
.catch__pad span { font-size: 18px; letter-spacing: 1px; }
.catch__pad.is-live { border-color: var(--gold); box-shadow: 0 0 0 6px rgba(247,213,72,.18); }
.catch__pad.is-hit { transform: scale(.96); background: radial-gradient(circle at 50% 40%, rgba(247,213,72,.5), rgba(9,15,38,.9)); }
.catch__score { margin-top: 12px; font-size: 28px; font-weight: 900; color: var(--gold); }

/* ---------- Canta Alto o Basso (slide vocale) ---------- */
.slide { position: relative; width: 90px; height: 280px; margin: 14px auto; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(54,211,153,.25), rgba(47,143,255,.12), rgba(255,107,107,.2)); border: 1px solid var(--border); overflow: hidden; }
.slide__dot { position: absolute; left: 50%; bottom: 4%; width: 40px; height: 40px; border-radius: 50%; transform: translateX(-50%);
  background: var(--grad-gold); box-shadow: 0 0 20px rgba(247,213,72,.7); transition: bottom .08s linear; }
.slide__arrow { position: absolute; left: 50%; transform: translateX(-50%); font-size: 30px; opacity: .8; }
.slide__arrow.up { top: 8px; } .slide__arrow.down { bottom: 8px; }

/* ---------- Barra tempo (Sfida) ---------- */
.chal-bar { height: 10px; background: rgba(255,255,255,.1); }
.chal-bar__fill { height: 100%; width: 100%; background: linear-gradient(90deg,#36d399,#f7d548,#ff6b6b); transition: width .1s linear; }

/* transizioni cinematiche tra le domande (gli elementi entrano ad ogni round) */
.game__head { animation: gIn .42s cubic-bezier(.22,1,.36,1) both; }
.answers, .compare, .seq, .staff, .rhythm, .tuner, .round-dots { animation: gIn .45s cubic-bezier(.22,1,.36,1) both .08s; }
@keyframes gIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.game__head { text-align: center; margin-bottom: 18px; }
.game__round { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: var(--gold); }
.game__prompt { margin: 8px 0 0; font-size: clamp(22px,4vw,30px); font-weight: 900; line-height: 1.15; }
.game__hint { margin: 8px auto 0; max-width: 460px; color: rgba(255,255,255,0.74); font-size: 14px; line-height: 1.5; }

/* equalizzatore audio (danza coi suoni) */
.eq { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 58px; margin: 4px auto 12px; max-width: 360px; }
.eq i { width: 9px; min-height: 6px; border-radius: 6px; background: linear-gradient(180deg, var(--gold), var(--blue)); opacity: .9; box-shadow: 0 0 8px rgba(247,213,72,.25); }

/* pulsante "ascolta" centrale — orb blu lucido (stile poster) */
.listen-btn {
  position: relative;
  width: 132px; height: 132px; border-radius: 50%; margin: 10px auto 8px; display: grid; place-items: center;
  font-size: 52px; color: #fff; border: none; padding-left: 6px;
  background: radial-gradient(circle at 50% 30%, #7cbcff 0%, #368adf 44%, #185fa5 100%);
  box-shadow: 0 16px 34px rgba(18,74,150,.55), inset 0 4px 12px rgba(255,255,255,.5),
              inset 0 -10px 20px rgba(2,22,60,.45), 0 0 0 12px rgba(55,138,223,.14);
  transition: transform var(--t);
}
.listen-btn::before {
  content: ''; position: absolute; top: 12px; left: 26px; right: 26px; height: 34px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none;
}
.listen-btn:active { transform: scale(0.94); }
.listen-btn.is-playing { animation: listenPulse 0.9s ease-in-out infinite; }
.listen-btn.is-playing::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(90,170,255,.6); animation: listenRing 1.5s ease-out infinite;
}
@keyframes listenRing { from { transform: scale(1); opacity: .7; } to { transform: scale(2); opacity: 0; } }
@keyframes listenPulse { 0%,100%{ box-shadow: 0 16px 34px rgba(18,74,150,.55), inset 0 4px 12px rgba(255,255,255,.5), inset 0 -10px 20px rgba(2,22,60,.45), 0 0 0 0 rgba(55,138,223,0.5);} 50%{ box-shadow: 0 16px 34px rgba(18,74,150,.55), inset 0 4px 12px rgba(255,255,255,.5), inset 0 -10px 20px rgba(2,22,60,.45), 0 0 0 20px rgba(55,138,223,0);} }
.listen-cap { text-align: center; margin: 0 0 18px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.62); }

/* mini-titolo sopra le risposte */
.ans-lead { text-align: center; font-size: 20px; font-weight: 900; color: #fff; margin: 2px 0 14px; letter-spacing: -.3px; }

/* griglia risposte */
.answers { display: grid; gap: 12px; }
.answers.cols-2 { grid-template-columns: repeat(2, 1fr); }
.answers.cols-3 { grid-template-columns: repeat(3, 1fr); }
.answers.cols-4 { grid-template-columns: repeat(2, 1fr); }
.ans {
  min-height: 70px; padding: 14px 16px; border-radius: 18px; font-size: 18px; font-weight: 800;
  background: linear-gradient(180deg, rgba(32,46,88,.92), rgba(15,24,52,.94));
  border: 2px solid rgba(255,255,255,.14); color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.ans:hover { transform: translateY(-2px); border-color: rgba(124,188,255,.7); box-shadow: 0 10px 22px rgba(0,0,0,.34), 0 0 18px rgba(55,138,223,.28); }
.ans .emoji { font-size: 32px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.ans.is-correct { border-color: #36d399; background: linear-gradient(180deg, rgba(54,211,153,.32), rgba(18,110,86,.36));
  box-shadow: 0 0 0 3px rgba(54,211,153,.35), 0 0 28px rgba(54,211,153,.5); animation: pop 0.4s ease; }
.ans.is-wrong { border-color: var(--err); background: linear-gradient(180deg, rgba(255,107,107,.22), rgba(120,30,30,.30));
  box-shadow: 0 0 22px rgba(255,80,80,.4); animation: shake 0.4s ease; }
.ans[disabled] { pointer-events: none; }
@keyframes pop { 0%{transform:scale(1);} 50%{transform:scale(1.06);} 100%{transform:scale(1);} }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-7px);} 75%{transform:translateX(7px);} }

/* feedback inline */
.game__feedback { min-height: 28px; text-align: center; margin-top: 16px; font-weight: 800; font-size: 16px; }
.game__feedback.ok { color: var(--ok); }
.game__feedback.err { color: var(--err); }

/* barra avanzamento round */
.round-dots { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.round-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.round-dots i.is-on { background: var(--gold); }
.round-dots i.is-ok { background: var(--ok); }
.round-dots i.is-err { background: var(--err); }

/* ---------- RITMO (rhythmTap) ---------- */
.rhythm { text-align: center; }
.rhythm__pad {
  width: 100%; max-width: 320px; height: 200px; margin: 18px auto; border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 40%, rgba(47,143,255,0.3), rgba(9,15,38,0.9));
  border: 2px solid var(--border); display: grid; place-items: center; font-size: 64px; transition: transform 0.08s ease, background 0.08s ease;
}
.rhythm__pad.is-hit { transform: scale(0.96); background: radial-gradient(circle at 50% 40%, rgba(247,213,72,0.45), rgba(9,15,38,0.9)); }
.rhythm__pad.is-beat { box-shadow: 0 0 0 8px rgba(247,213,72,0.25); }
.rhythm__count { font-size: 46px; font-weight: 900; color: var(--gold); min-height: 56px; }

/* ---------- MEMORIA (memorySequence) ---------- */
.seq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 360px; margin: 18px auto; }
.seq__cell { aspect-ratio: 1/1; border-radius: var(--r-md); border: 2px solid var(--border);
  display: grid; place-items: center; font-size: 40px; transition: transform var(--t-fast), filter var(--t-fast); filter: brightness(0.7); }
.seq__cell.is-active { filter: brightness(1.5); transform: scale(1.05); box-shadow: 0 0 24px rgba(247,213,72,0.4); }
.seq__cell.c0 { background: rgba(47,143,255,0.22); }
.seq__cell.c1 { background: rgba(247,213,72,0.22); }
.seq__cell.c2 { background: rgba(54,211,153,0.22); }
.seq__cell.c3 { background: rgba(255,107,107,0.22); }

/* ---------- TROVA L'INTRUSO: evidenzia la cella in riproduzione ---------- */
.ans.is-playing-cell { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(247,213,72,0.25); transform: translateY(-2px); }

/* ---------- CONFRONTO (higherLower) ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 14px; }
.compare__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 110px; border-radius: var(--r-md); color: #fff; font-weight: 800; font-size: 16px;
  background: radial-gradient(circle at 50% 35%, rgba(47,143,255,0.28), rgba(9,15,38,0.85));
  border: 2px solid var(--border); transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.compare__btn:hover { transform: translateY(-2px); border-color: var(--gold); }
.compare__btn.is-playing-cell { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(247,213,72,0.22); }
.compare__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-gold); color: var(--ink); font-weight: 900; }

/* ---------- MICROFONO: accordatore (singNote) ---------- */
/* ---------- INTONOMETRO "cielo + nido" (singNote) ---------- */
.tuner { max-width: 360px; margin: 6px auto 0; text-align: center; }
.tuner__sky {
  position: relative; height: 288px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(180deg, #7fc4ff 0%, #a7a0ff 55%, #c79bff 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -30px 50px rgba(80,40,140,.28), 0 14px 30px rgba(60,30,120,.35);
}
.tuner__cloud { position: absolute; background: rgba(255,255,255,.85); border-radius: 999px; filter: blur(1px); box-shadow: 0 6px 14px rgba(60,30,120,.12); }
.tuner__cloud--a { width: 84px; height: 26px; top: 30px; left: -30px; animation: tCloud 14s linear infinite; }
.tuner__cloud--b { width: 60px; height: 20px; top: 210px; left: -20px; opacity: .8; animation: tCloud 20s linear infinite 3s; }
@keyframes tCloud { from { transform: translateX(0); } to { transform: translateX(430px); } }

/* zona-nido al centro (la nota da colpire) */
.tuner__band {
  position: absolute; left: 7%; right: 7%; top: 50%; transform: translateY(-50%);
  height: 78px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.24); border: 3px dashed rgba(255,255,255,.75);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.08); transition: background .15s, box-shadow .2s, transform .2s;
}
.tuner__goalnote { font-family: var(--font-display, inherit); font-weight: 900; font-size: 34px; color: #fff; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(90,40,140,.35), 0 0 18px rgba(255,255,255,.6); }
.tuner.is-in .tuner__band { background: rgba(70,235,160,.42); border-color: #eafff5; box-shadow: 0 0 0 4px rgba(70,235,160,.35), 0 0 34px rgba(70,235,160,.6); transform: translateY(-50%) scale(1.04); }

/* frecce guida su/giù */
.tuner__chev { position: absolute; left: 50%; transform: translateX(-50%); font-size: 40px; font-weight: 900; color: rgba(255,255,255,.35); line-height: 1; transition: color .12s, transform .12s, text-shadow .12s; pointer-events: none; }
.tuner__chev--up { top: 10px; }
.tuner__chev--dn { bottom: 10px; }
.tuner__chev.lit { color: var(--gold, #ffd54a); text-shadow: 0 0 16px rgba(255,213,74,.9); }
.tuner__chev--up.lit { animation: tUp .7s ease-in-out infinite; }
.tuner__chev--dn.lit { animation: tDn .7s ease-in-out infinite; }
@keyframes tUp { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,-6px); } }
@keyframes tDn { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,6px); } }

/* pallina-voce */
.tuner__orb {
  position: absolute; left: 50%; bottom: 50%; width: 86px; height: 86px;
  transform: translate(-50%, 50%); transition: bottom .09s linear;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0%, #ffaed6 38%, #ff5fa8 78%, #e83f8e 100%);
  box-shadow: 0 8px 18px rgba(150,20,90,.45), inset 0 -8px 14px rgba(150,20,90,.35), inset 0 6px 10px rgba(255,255,255,.7);
}
.tuner__face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.tuner.is-in .tuner__orb {
  background: radial-gradient(circle at 34% 30%, #fff 0%, #9dffcf 36%, #2fe39a 78%, #16b877 100%);
  box-shadow: 0 0 0 5px rgba(70,235,160,.35), 0 10px 22px rgba(20,150,100,.55), inset 0 -8px 14px rgba(20,150,100,.4), inset 0 6px 10px rgba(255,255,255,.8);
  animation: tPulse .5s ease-in-out infinite;
}
@keyframes tPulse { 0%,100% { transform: translate(-50%,50%) scale(1); } 50% { transform: translate(-50%,50%) scale(1.09); } }

/* anello di carica attorno alla pallina */
.tuner__ringsvg { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); transform: rotate(-90deg); pointer-events: none; }
.tuner__ringbg { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 7; }
.tuner__ringfg { fill: none; stroke: var(--gold, #ffd54a); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .1s linear; filter: drop-shadow(0 0 5px rgba(255,213,74,.8)); }
.tuner.is-in .tuner__ringfg { stroke: #eafff5; filter: drop-shadow(0 0 7px rgba(70,235,160,.95)); }

/* scintille quando intonato */
.tuner.is-in .tuner__band::before, .tuner.is-in .tuner__band::after { content: "✨"; position: absolute; font-size: 20px; animation: tSpark .8s ease-in-out infinite; }
.tuner.is-in .tuner__band::before { left: -6px; top: -14px; }
.tuner.is-in .tuner__band::after { right: -6px; bottom: -14px; animation-delay: .35s; }
@keyframes tSpark { 0%,100% { opacity: 0; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(18deg); } }

.tuner__read { text-align: center; font-weight: 800; font-size: 18px; margin-top: 14px; min-height: 24px; color: #fff; }
.tuner.is-in .tuner__read { color: var(--ok, #36d399); }

/* ---------- PENTAGRAMMA (noteMatch) ---------- */
.staff { position: relative; max-width: 420px; height: 180px; margin: 8px auto 16px; }
.staff__line { position: absolute; left: 8%; right: 6%; height: 2px; background: rgba(255,255,255,0.4); }
.staff__clef { position: absolute; left: 6%; top: 34px; height: 96px; display: flex; align-items: center;
  font-size: 104px; line-height: 1; color: rgba(255,255,255,0.85); }
.staff__note { position: absolute; left: 62%; width: 30px; height: 23px; border-radius: 50%;
  background: var(--gold); transform: translate(-50%,-50%) rotate(-18deg);
  box-shadow: 0 0 16px rgba(247,213,72,0.55); }
.staff__ledger { position: absolute; left: 62%; width: 50px; height: 2px;
  transform: translateX(-50%); background: rgba(255,255,255,0.5); }

/* ---------- Prova finale al microfono (mic-dynamics) ---------- */
.micq { max-width: 460px; margin: 8px auto 0; text-align: center; }
.micq__emoji { font-size: 64px; line-height: 1; transition: transform .2s; }
.micq__emoji.is-ok { animation: micq-pop .5s ease; }
.micq__emoji.is-no { animation: micq-shake .5s ease; }
@keyframes micq-pop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
@keyframes micq-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-9px)} 75%{transform:translateX(9px)} }
.micq__prompt { margin: 10px 0 16px; font-size: 18px; font-weight: 800; color: #fff; }
.micq__meter {
  position: relative; height: 30px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.10); border: 1px solid var(--border-soft, rgba(255,255,255,.16));
}
.micq__zone {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  background: rgba(54,211,153,.30); border-left: 2px dashed rgba(54,211,153,.7); border-right: 2px dashed rgba(54,211,153,.7);
}
.micq__fill {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 0;
  border-radius: 999px; background: linear-gradient(90deg, #2f8fff, #f7d548 70%, #ff6b6b);
  transition: width .06s linear;
}
.micq__status { margin-top: 12px; font-size: 20px; font-weight: 900; color: var(--gold, #f7d548); min-height: 26px; }

/* ============================================================
   BOSS FINALE — melodia con barra vita stile picchiaduro
   ============================================================ */
.bossf { --ink:#160a2e; display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 0 4px; }
.bossf__hp { width:88%; transform:skewX(-11deg); }
.bossf__hplab { transform:skewX(11deg); font-weight:900; font-size:12px; letter-spacing:1px; color:#fff; margin:0 0 3px 6px; text-shadow:0 1px 2px rgba(0,0,0,.7); }
.bossf__track { position:relative; height:20px; background:#3a0d0d; border:3px solid var(--ink); border-radius:3px; overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.6),0 3px 0 rgba(0,0,0,.45); }
.bossf__red,.bossf__yel { position:absolute; left:0; top:0; bottom:0; display:block; }
.bossf__red { width:100%; background:#e23b2e; transition:width 1.1s ease .22s; }
.bossf__yel { width:100%; background:linear-gradient(180deg,#fff08a,#ffd21e 45%,#ff9d18); box-shadow:inset 0 3px 0 rgba(255,255,255,.45); transition:width .16s ease; }
.bossf__boss { width:42%; max-width:180px; aspect-ratio:3/4; object-fit:cover; object-position:center top; margin-top:8px;
  border-radius:14px; border:4px solid #ffd21e; box-shadow:0 8px 18px rgba(0,0,0,.5); }
.bossf__boss--ph { display:grid; place-items:center; font-size:70px; background:rgba(9,15,38,.6); }
.bossf__boss.is-hit { animation:bossf-hit .4s ease; }
@keyframes bossf-hit { 0%,100%{ transform:none; } 20%{ transform:translate(6px,-3px) rotate(2deg); } 40%{ transform:translate(-6px,2px) rotate(-2deg); } 60%{ transform:translate(4px,0); } }
.bossf__boss.is-defeat { animation:bossf-defeat 1s ease forwards; }
@keyframes bossf-defeat { to { opacity:0; transform:translateY(30px) scale(.8) rotate(-8deg); } }
.bossf__status { text-align:center; font-weight:900; font-size:18px; color:#fff; min-height:24px; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.bossf__pads { display:flex; gap:8px; justify-content:center; width:100%; padding:0 12px; margin-top:2px; }
.bossf__pad { flex:1; max-width:58px; aspect-ratio:3/4; border-radius:14px; border:4px solid var(--ink); cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.4),inset 0 3px 0 rgba(255,255,255,.35); transition:transform .08s,filter .12s; filter:brightness(.82); }
.bossf__pad:active { transform:translateY(3px); }
.bossf__pad.is-lit { filter:brightness(1.45); transform:translateY(2px) scale(1.04); }
.bossf__go { margin-top:8px; font-weight:900; font-size:18px; color:var(--ink); cursor:pointer; padding:12px 26px;
  border-radius:15px; border:4px solid var(--ink); background:linear-gradient(180deg,#ffe066,#ffd21e); box-shadow:0 6px 0 #a86e00; }
.bossf__go:active { transform:translateY(3px); box-shadow:0 2px 0 #a86e00; }

/* ============================================================
   BRAWL SKIN — mini-giochi (play, card risposta, pallini)
   ============================================================ */
.game__round { font-family:'Baloo 2',system-ui; font-weight:800; }
.game__prompt { font-family:'Lilita One',system-ui; font-weight:400; }
.ans-lead { font-family:'Lilita One',system-ui; font-weight:400; }

.listen-btn {
  border:5px solid #160a2e;
  box-shadow:0 8px 0 rgba(0,0,0,.45), 0 0 26px rgba(55,138,223,.5), inset 0 5px 0 rgba(255,255,255,.4), inset 0 -8px 12px rgba(0,40,90,.5);
  animation:listenBob 2.4s ease-in-out infinite;
}
.listen-btn:active { transform:translateY(4px) scale(.97); box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 4px 0 rgba(255,255,255,.35); }
@keyframes listenBob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
.listen-cap { font-family:'Baloo 2',system-ui; font-weight:800; }

.answers { gap:14px; }
.ans {
  border:4px solid #160a2e; border-radius:18px;
  background:linear-gradient(180deg,#26317a,#1a2258);
  box-shadow:0 6px 0 #160a2e, 0 9px 18px rgba(0,0,0,.4);
  font-family:'Lilita One',system-ui; font-weight:400; color:#fff;
  transition:transform .08s, box-shadow .12s, border-color .12s;
}
.ans:hover { transform:translateY(-2px); border-color:#4f7be8; box-shadow:0 8px 0 #160a2e, 0 12px 22px rgba(0,0,0,.45); }
.ans:active { transform:translateY(3px); box-shadow:0 3px 0 #160a2e; }
.ans.is-correct { border-color:#177a52; background:linear-gradient(180deg,#54d69a,#2ea86f); box-shadow:0 6px 0 #0f5d3d,0 9px 18px rgba(0,0,0,.4); color:#08321f; }
.ans.is-wrong { border-color:#8f1f1f; background:linear-gradient(180deg,#ff6b6b,#d63b3b); box-shadow:0 6px 0 #6e1414,0 9px 18px rgba(0,0,0,.4); }

.round-dots i { width:10px; height:10px; border:2px solid #160a2e; background:#2a2560; }
.round-dots i.is-on { background:var(--gold,#ffd21e); }
.round-dots i.is-ok { background:var(--ok,#36d399); }
.round-dots i.is-err { background:var(--err,#ff6b6b); }

/* ============================================================
   BOSS SHELL v2 — "juice" stile Supercell (arena, combo, intro,
   trasformazione, KO). Le particelle/scintille sono gestite da
   bossFx.js (canvas overlay); qui stati boss + micro-animazioni.
   ============================================================ */
.bossf--v2 { position: relative; }
.bossf__lvl { font-size:10px; font-weight:800; opacity:.7; letter-spacing:.5px; margin-left:6px; }
.bossf__arena { position:relative; width:100%; margin-top:8px; }
.bossf__combo { position:absolute; right:14px; top:52px; z-index:6; font-weight:900; font-size:16px;
  color:#33e1ff; text-shadow:0 2px 6px rgba(0,0,0,.6); pointer-events:none; min-height:20px; }
.bossf__combo.pop { animation:bfCombo .34s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes bfCombo { 0%{ transform:scale(.5); opacity:0 } 55%{ transform:scale(1.25); opacity:1 } 100%{ transform:scale(1); opacity:1 } }

/* pulsante d'ingresso "SFIDA" */
.bossf__go--start { display:block; margin:14px auto 6px; font-weight:900; font-size:17px; letter-spacing:.5px;
  color:#160a2e; padding:14px 26px; border:none; border-radius:16px; cursor:pointer;
  background:linear-gradient(180deg,#ffe680,#ffcf33 55%,#ff9d18); box-shadow:0 5px 0 #a86e00, 0 10px 22px rgba(255,157,24,.4);
  animation:bfPulse 1.1s ease-in-out infinite; }
.bossf__go--start:active { transform:translateY(4px); box-shadow:0 1px 0 #a86e00; }
@keyframes bfPulse { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }

/* stati del boss: agguato -> trasformazione -> rivelazione -> sconfitta */
.bossf__boss.is-lurk { filter:brightness(.35) saturate(.4) blur(1px); transform:scale(.92); transition:filter .3s, transform .3s; }
.bossf__boss.is-transform { animation:bfTransform 1.15s ease-in-out both;
  filter:brightness(1.2) drop-shadow(0 0 22px #a06bff); }
@keyframes bfTransform {
  0%{ transform:scale(.92) } 15%{ transform:scale(.86) rotate(-2deg) } 30%{ transform:scale(.98) rotate(2deg) }
  45%{ transform:scale(.9) rotate(-3deg) } 60%{ transform:scale(1.04) rotate(3deg) }
  80%{ transform:scale(.96) rotate(-1deg) } 100%{ transform:scale(1) } }
.bossf__boss.is-reveal { animation:bfReveal .9s cubic-bezier(.2,1.5,.4,1) both;
  filter:brightness(1.15) drop-shadow(0 0 26px #ff5fa8); }
@keyframes bfReveal { 0%{ transform:scale(1.35); filter:brightness(2) } 60%{ transform:scale(.96) } 100%{ transform:scale(1); filter:none } }

/* tier visivi (aura più intensa nei mondi avanzati) */
.bossf--v2[data-tier="2"] .bossf__boss { box-shadow:0 0 0 3px rgba(255,213,74,.18); }
.bossf--v2[data-tier="3"] .bossf__boss { box-shadow:0 0 0 3px rgba(255,95,168,.22), 0 0 26px rgba(255,95,168,.25); }
.bossf--v2[data-tier="4"] .bossf__boss { box-shadow:0 0 0 3px rgba(160,107,255,.28), 0 0 34px rgba(160,107,255,.4); animation:bfAura 2s ease-in-out infinite; }
@keyframes bfAura { 0%,100%{ filter:none } 50%{ filter:brightness(1.12) drop-shadow(0 0 18px #a06bff) } }

/* lane/area generiche riusabili dai mini-giochi boss */
.bossf__lane { position:relative; border-radius:16px; background:#0b1030cc; border:2px solid #ffffff1a; overflow:hidden; margin-top:8px; }
.bossf__line { position:absolute; left:8%; right:8%; height:6px; background:#ffffff55; border-radius:4px; }