/* Karaoke — form PUBBLICO di prenotazione (index.php), restyle del 1 ott 2026.
   "La locandina continua": chi inquadra il QR atterra nella stessa grafica del monitor (blu WPP,
   titolo pieno + contorno, card bianca col microfono). Dentro la card l'anteprima del maxischermo
   (card del palco del proiettore, in piccolo) e i suggerimenti mentre si scrive il titolo.
   Foglio a sé: niente styles.css dell'Asset Manager, il telefono scarica solo questo.
   CSP: font-src 'self' → i font WPP vengono da ../_core/fonts. */
@font-face { font-family:"WPP"; src:url("fonts/WPP-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"WPP"; src:url("fonts/WPP-Medium.otf") format("opentype"); font-weight:500 600; font-display:swap; }
@font-face { font-family:"WPP"; src:url("fonts/WPP-Bold.otf") format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:"WPP"; src:url("fonts/WPP-Black.otf") format("opentype"); font-weight:800 900; font-display:swap; }

:root {
  --navy:#000050; --ink:#000050; --soft:#5a5f73; --mute:var(--wpp-ink-faint,#6b6b86);   /* era #8a8db0 (3,3:1): ora 5,2:1 su bianco, 4,7:1 sui campi */ --field:#f2f2f8; --line:#e3e3ee;
  --amber:#ffb547; --amber-ink:#2a1a00; --red:var(--wpp-red,#bc0113); --red-bg:var(--wpp-red-bg,#fbe9ec); --warn-bg:#fdf3e0; --warn:#8a5a00;
  --stage-a:#2b2f8c; --stage-b:#11124f; --stage-c:#0a0a38;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding:24px 0 140px; }   /* il campo col fuoco non finisce sotto il tasto fisso in basso */
body { margin:0; min-height:100dvh; font-family:"WPP", Helvetica, Arial, sans-serif; color:#fff; -webkit-font-smoothing:antialiased;
  background:var(--navy); -webkit-tap-highlight-color:transparent; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:
  var(--navy); }
button, input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
svg { display:block; }
[hidden] { display:none !important; }
:focus-visible { outline:2.5px solid var(--amber); outline-offset:2px; }
/* Dentro la card bianca l'ambra non si vede (1,7:1): lì il contorno è blu */
.kp-card :focus-visible { outline-color:var(--navy); }

.kp-page { max-width:460px; margin:0 auto; padding:calc(18px + env(safe-area-inset-top, 0px)) 16px calc(116px + env(safe-area-inset-bottom, 0px)); }
.kp-page.no-cta { padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px)); }

/* ── Testata come la locandina ── */
.kp-title { margin:10px 0 0; font-weight:900; font-size:clamp(50px, 16vw, 70px); line-height:.9; letter-spacing:-.035em; overflow-wrap:anywhere; }
.kp-title .w1 { display:block; color:#fff; }
.kp-title .w2 { display:block; color:transparent; -webkit-text-stroke:1.6px #fff; padding-bottom:.06em; }
.kp-sub { margin:12px 0 26px; font-size:16px; line-height:1.4; color:rgba(255,255,255,.72); }
.kp-sub b { color:#fff; font-weight:700; }

/* ── Card bianca col microfono ── */
.kp-card { position:relative; color-scheme:light; background:#fff; color:var(--ink); border-radius:26px; padding:22px 16px 18px; box-shadow:0 24px 50px -22px rgba(0,0,0,.7); }
.kp-badge { position:absolute; top:-20px; right:-6px; width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; border:3px solid #fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -8px rgba(0,0,0,.55); }
.kp-badge svg { width:22px; height:22px; }
.kp-lab { margin:22px 2px 10px; font-size:17px; font-weight:800; line-height:1.2; letter-spacing:-.01em; color:var(--ink); }
.kp-lab:first-child { margin-top:0; }

/* Anteprima del maxischermo (stessa card del palco di display.php, in piccolo) */
.kp-prev { position:relative; height:176px; border-radius:20px; overflow:hidden; isolation:isolate; padding:14px 14px 16px; color:#fff;
  display:flex; flex-direction:column; background:linear-gradient(180deg, var(--stage-a) 0%, var(--stage-b) 58%, var(--stage-c) 100%);
  box-shadow:0 14px 30px -14px rgba(0,0,40,.8), inset 0 0 0 1px rgba(255,255,255,.08); }
.kp-prev .bg { position:absolute; z-index:-1; top:0; right:0; bottom:0; width:58%; background:center top / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 48%); mask-image:linear-gradient(90deg, transparent 0%, #000 48%); }
.kp-prev .bg.cover { background-position:center; opacity:.85; }
.kp-prev .ini { display:none; }   /* 9 ott: niente iniziale gigante in filigrana */
.kp-prev .top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.kp-prev .now { display:inline-flex; padding:4px 10px; border-radius:999px; background:var(--amber); color:var(--amber-ink); font-size:12px; font-weight:800; }
.kp-prev .ag { font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 6px rgba(0,0,40,.9); text-align:right; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-prev .nm { text-shadow:0 2px 12px rgba(0,0,40,.6); margin:auto 0 4px; max-width:56%; font-size:30px; font-weight:900; line-height:1; letter-spacing:-.02em; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kp-prev .sg { max-width:56%; font-size:12.5px; line-height:1.3; color:rgba(255,255,255,.72); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-prev .sg b { color:#fff; font-size:14px; }
.kp-prev .empty { color:rgba(255,255,255,.55); }
.kp-prev-wrap { position:relative; }
.kp-cam { position:absolute; z-index:2; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border:0; border-radius:999px;
  background:#fff; color:var(--navy); font-size:13px; font-weight:800; box-shadow:0 8px 18px -8px rgba(0,0,0,.7); }
.kp-cam svg { width:16px; height:16px; }
.kp-prev-note { margin:8px 2px 0; font-size:12px; color:var(--mute); }
.kp-link { border:0; background:none; padding:0; color:inherit; font:inherit; text-decoration:underline; text-underline-offset:2px; }

/* Campi */
.kp-f { display:block; position:relative; background:var(--field); border-radius:14px; padding:9px 14px 8px; margin-bottom:8px; border:2px solid transparent; transition:border-color .15s, background .15s; }
.kp-f:focus-within { border-color:var(--navy); background:#fff; }
.kp-f.bad { border-color:var(--red); background:var(--red-bg); }
.kp-f span { display:block; font-size:11px; font-weight:700; color:var(--mute); margin-bottom:1px; }
.kp-f input { display:block; width:100%; border:0; outline:0; background:transparent; padding:0; color:var(--ink); font-size:17px; font-weight:600; min-height:26px; }
.kp-f input::placeholder { color:#686b83; font-weight:400; }   /* era #b3b6cf (1,9:1): 4,6:1; il valore scritto resta più scuro e più pesante */

/* Suggerimenti sotto il titolo */
.kp-sug { margin:-2px 0 10px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 14px 28px -16px rgba(0,0,40,.45); overflow:hidden; }
.kp-sug button { width:100%; display:flex; align-items:center; gap:12px; padding:9px 12px; border:0; background:#fff; color:var(--ink); text-align:left; min-height:60px; }
.kp-sug button + button { border-top:1px solid var(--line); }
.kp-sug button:active, .kp-sug button:focus-visible { background:var(--field); outline:0; }
.kp-sug .cv { width:42px; height:42px; flex:none; border-radius:9px; background:var(--field) center / cover no-repeat; display:flex; align-items:center; justify-content:center; color:var(--mute); }
.kp-sug .cv svg { width:18px; height:18px; }
.kp-sug .tx { flex:1; min-width:0; }
.kp-sug b { display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-sug .tx span { display:block; font-size:13px; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-sug .tag { flex:none; font-size:12px; font-weight:700; padding:4px 8px; border-radius:999px; background:var(--field); color:var(--soft); }
.kp-sug .tag.duo { background:var(--amber); color:var(--amber-ink); }
.kp-sug .more { padding:9px 14px; font-size:12px; color:var(--mute); border-top:1px solid var(--line); }

/* Agenzie a tocco */
.kp-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.kp-chips button { min-height:38px; padding:0 14px; border-radius:999px; border:0; background:var(--field); color:var(--ink); font-size:14px; font-weight:600; }
.kp-chips button[aria-pressed="true"] { background:var(--navy); color:#fff; }
.kp-chips.bad button { box-shadow:inset 0 0 0 1.5px var(--red); }

.kp-consent { display:flex; gap:10px; align-items:flex-start; margin:14px 2px 0; font-size:13px; line-height:1.5; color:var(--soft); }
.kp-consent input { margin:2px 0 0; width:20px; height:20px; flex:none; accent-color:var(--navy); }
.kp-consent.bad { color:var(--red); }

/* Messaggi dentro la card */
.kp-msg { border-radius:14px; padding:12px 14px; font-size:14px; line-height:1.45; margin-bottom:14px; }
.kp-msg.err { background:var(--red-bg); color:var(--red); }
.kp-msg.warn { background:var(--warn-bg); color:var(--warn); }
.kp-msg .row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

/* Bottoni */
.kp-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px; border:0; font-size:14px; font-weight:800; }
.kp-btn.navy { background:var(--navy); color:#fff; }
.kp-btn.soft { background:var(--field); color:var(--ink); }
.kp-btn.line { background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4); }
.kp-btn.block { width:100%; min-height:54px; font-size:16px; }
.kp-btn:disabled { opacity:.6; }

/* Tasto fisso in basso */
.kp-cta { position:fixed; left:0; right:0; bottom:0; z-index:40; padding:28px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(0,0,80,0) 0%, rgba(0,0,80,.92) 40%, var(--navy) 100%); }
.kp-cta button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:428px; margin:0 auto; min-height:58px; border:0; border-radius:999px;
  background:#fff; color:var(--navy); font-size:17px; font-weight:900; box-shadow:0 16px 34px -12px rgba(0,0,0,.65); transition:transform .12s; }
.kp-cta button:active { transform:scale(.985); }
.kp-cta svg { width:20px; height:20px; }

/* Conferma "Sei in scaletta" */
.kp-done { text-align:center; padding:28px 18px 20px; }
.kp-done .duo-with { margin:0 0 4px; font-size:15px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.kp-done h2 { margin:0 0 6px; font-size:32px; font-weight:900; line-height:1; letter-spacing:-.02em; }
.kp-done .song { margin:0; font-size:15px; color:var(--soft); overflow-wrap:anywhere; }
.kp-done .song b { color:var(--ink); }
.kp-eq { display:flex; gap:4px; justify-content:center; align-items:flex-end; height:30px; margin:18px 0 10px; }
.kp-eq i { width:5px; height:8px; border-radius:3px; background:var(--navy); animation:kpEq 1s ease-in-out infinite alternate; }
.kp-eq i:nth-child(1) { animation-delay:-.2s; } .kp-eq i:nth-child(2) { animation-delay:-.55s; } .kp-eq i:nth-child(3) { animation-delay:-.1s; }
.kp-eq i:nth-child(4) { animation-delay:-.75s; } .kp-eq i:nth-child(5) { animation-delay:-.35s; } .kp-eq i:nth-child(6) { animation-delay:-.6s; } .kp-eq i:nth-child(7) { animation-delay:-.15s; }
@keyframes kpEq { from { height:5px; } to { height:30px; } }
.kp-done .note { margin:0 0 18px; font-size:13px; line-height:1.5; color:var(--soft); }
.kp-closed .ic { width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:var(--field); color:var(--soft); display:flex; align-items:center; justify-content:center; }
.kp-closed .ic svg { width:24px; height:24px; }

/* Le tue canzoni */
.kp-mine { margin-top:26px; }
.kp-mine h3 { margin:0 2px 12px; font-size:19px; font-weight:800; letter-spacing:-.01em; color:#fff; }
.kp-it { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); margin-bottom:8px; }
.kp-it .cv { width:44px; height:44px; flex:none; border-radius:10px; background:rgba(255,255,255,.1) center / cover no-repeat; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); }
.kp-it .cv svg { width:18px; height:18px; }
.kp-it .tx { flex:1; min-width:0; }
.kp-it strong { display:block; font-size:15px; overflow-wrap:anywhere; }
.kp-it .tx span { display:block; font-size:12.5px; color:rgba(255,255,255,.65); overflow-wrap:anywhere; }
.kp-it .tx span b { color:#fff; font-weight:700; }
.kp-it .tx .st { display:inline-flex; margin-top:5px; padding:3px 8px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(255,255,255,.14); width:max-content; }
.kp-it.stage { background:var(--amber); color:var(--amber-ink); border-color:transparent; }
.kp-it.stage .tx span, .kp-it.stage .tx span b { color:var(--amber-ink); }
.kp-it.stage .tx .st { background:var(--amber-ink); color:#fff; }
.kp-it .x { flex:none; min-height:36px; padding:0 12px; border-radius:999px; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:13px; font-weight:700; }
.kp-it .x.sure { background:var(--red); }

/* "Hai un duetto!" */
.kp-news { margin:0 0 18px; padding:14px 16px; border-radius:18px; background:var(--amber); color:var(--amber-ink); font-size:14px; line-height:1.45; box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
.kp-news b { display:block; font-size:16px; font-weight:900; }

/* "È un match!" a tutto schermo */
.kp-match { position:fixed; inset:0; z-index:300; overflow-y:auto; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:calc(28px + env(safe-area-inset-top, 0px)) 22px calc(24px + env(safe-area-inset-bottom, 0px)); background:
  radial-gradient(60% 40% at 50% 12%, rgba(255,214,150,.22), transparent 70%), var(--navy); animation:kpFade .25s ease-out; }
.kp-match .in { width:100%; max-width:400px; }
.kp-duo { position:relative; display:flex; justify-content:center; margin:0 0 26px; }
.kp-duo .av { width:118px; height:118px; border-radius:50%; background:center top / cover no-repeat; display:flex; align-items:center; justify-content:center;
  font-size:44px; font-weight:900; color:#fff; box-shadow:0 0 0 4px #fff, 0 20px 40px -12px rgba(0,0,0,.8); }
.kp-duo .a { background-color:var(--stage-a); background-image:linear-gradient(180deg, var(--stage-a), var(--stage-b)); animation:kpInL .7s cubic-bezier(.2,.8,.2,1) both; }
.kp-duo .b { background-color:var(--amber); animation:kpInR .7s cubic-bezier(.2,.8,.2,1) both; margin-left:-22px; }
.kp-duo .b:not(.ph) { color:var(--amber-ink); }
.kp-duo .note { position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; background:var(--amber); color:var(--amber-ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px var(--navy); animation:kpPop .4s .55s both; }
.kp-duo .note svg { width:20px; height:20px; }
.kp-match h2 { margin:0; font-size:52px; font-weight:900; line-height:.92; letter-spacing:-.03em; }
.kp-match h2 span { display:block; color:transparent; -webkit-text-stroke:1.5px #fff; }
.kp-match p { margin:16px 4px 26px; font-size:16px; line-height:1.5; color:rgba(255,255,255,.8); overflow-wrap:anywhere; }
.kp-match p b { color:#fff; }
.kp-match .yes { width:100%; min-height:58px; border:0; border-radius:999px; background:var(--amber); color:var(--amber-ink); font-size:17px; font-weight:900; margin-bottom:10px; }
.kp-match .solo { width:100%; margin-bottom:12px; }
.kp-match .chg { border:0; background:none; color:rgba(255,255,255,.7); font-size:14px; text-decoration:underline; text-underline-offset:3px; padding:8px; }
@keyframes kpFade { from { opacity:0; } }
@keyframes kpInL { from { transform:translateX(-50px) scale(.85); } }
@keyframes kpInR { from { transform:translateX(50px) scale(.85); } }
@keyframes kpPop { from { transform:translateX(-50%) scale(.4); } }

.kp-foot { margin-top:26px; text-align:center; font-size:12px; line-height:1.6; color:rgba(255,255,255,.55); }
.kp-foot a { color:rgba(255,255,255,.7); }

/* Avviso "Tocca a te!" a tutto schermo — 5 ott 2026: dentro la locandina invece dello schermo ambra.
   Navy come il form, titolo pieno + contorno ("Tocca" / "a te!", "a voi!" nei duetti), al centro la card
   del palco del maxischermo con il proprio nome. Ambra solo sulla pastiglia e su "Arrivo!", in basso
   dove arriva il pollice. Il bordo della card si accende a ogni squillo (ogni 4 s, come il suono). */
.kf-alert { position:fixed; inset:0; z-index:500; overflow-y:auto; display:flex; color:#fff;
  padding:calc(28px + env(safe-area-inset-top, 0px)) 18px calc(22px + env(safe-area-inset-bottom, 0px)); background:
  radial-gradient(70% 40% at 50% 0%, rgba(255,214,150,.22), transparent 70%), var(--navy); }
.kf-alert .in { width:100%; max-width:420px; margin:0 auto; display:flex; flex-direction:column; }
.kf-t { margin:8px 0 0; font-size:clamp(64px, 21vw, 84px); font-weight:900; line-height:.86; letter-spacing:-.04em; }
.kf-t span { display:block; }
.kf-t .w2 { color:transparent; -webkit-text-stroke:1.8px #fff; padding-bottom:.06em; }

.kf-stage { position:relative; flex:none; margin:28px 0 0; min-height:clamp(236px, 38vh, 300px); border-radius:24px; overflow:hidden; isolation:isolate; padding:16px 16px 18px;
  display:flex; flex-direction:column; background:linear-gradient(180deg, var(--stage-a) 0%, var(--stage-b) 58%, var(--stage-c) 100%);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.1); animation:kfIn .7s cubic-bezier(.16,1,.3,1) both; }
.kf-stage::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--amber); opacity:0; animation:kfRing 4s cubic-bezier(.16,1,.3,1) .2s infinite; }
.kf-stage .bg { position:absolute; z-index:-1; top:0; right:0; bottom:0; width:60%; background:center top / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 48%); mask-image:linear-gradient(90deg, transparent 0%, #000 48%); }
.kf-stage .bg.cover { background-position:center; opacity:.85; }
.kf-stage .ini { display:none; }
.kf-stage .top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.kf-stage .now { display:inline-flex; flex:none; padding:5px 11px; border-radius:999px; background:var(--amber); color:var(--amber-ink); font-size:13px; font-weight:800; }
.kf-stage .ag { font-size:13px; font-weight:700; color:#fff; text-shadow:0 1px 6px rgba(0,0,40,.9);
  text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf-stage .nm { margin:auto 0 6px; padding-top:14px; max-width:72%; font-size:40px; font-weight:900; line-height:.95; letter-spacing:-.025em; overflow-wrap:break-word; hyphens:manual; text-shadow:0 2px 14px rgba(0,0,40,.6); }
/* Nomi lunghi (duetti, doppi nomi): più piccoli e su tutta la larghezza, mai spezzati a metà parola */
.kf-stage .nm.long { max-width:none; font-size:32px; }
.kf-stage .nm.xlong { max-width:none; font-size:26px; }
.kf-stage .sg { max-width:80%; font-size:14px; line-height:1.35; color:rgba(255,255,255,.78); overflow-wrap:anywhere; text-shadow:0 1px 8px rgba(0,0,40,.7); }
.kf-stage .sg b { display:block; color:#fff; font-size:16px; font-weight:700; }

.kf-go { margin:22px 2px 0; font-size:20px; line-height:1.3; font-weight:500; color:rgba(255,255,255,.85); overflow-wrap:anywhere; }
.kf-go b { color:#fff; font-weight:800; }
.kf-space { flex:1; min-height:24px; }
.kf-alert-ok { width:100%; flex:none; min-height:60px; border:0; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--amber); color:var(--amber-ink); font-size:19px; font-weight:900; box-shadow:0 16px 30px -14px rgba(255,181,71,.6); }
.kf-alert-ok svg { width:20px; height:20px; }
.kf-alert-ok:focus-visible { outline:2.5px solid #fff; outline-offset:3px; }
.kf-alert-ok:active { transform:scale(.985); }
body.kf-alert-open, body.kp-match-open { overflow:hidden; }
@keyframes kfIn { from { opacity:0; transform:translateY(22px) scale(.96); } }
@keyframes kfRing { 0% { opacity:1; } 60%, 100% { opacity:0; } }

@media (prefers-reduced-motion: reduce) {
  .kf-stage, .kf-stage::after, .kp-eq i, .kp-match, .kp-duo .a, .kp-duo .b, .kp-duo .note { animation:none; }
  .kp-eq i { height:16px; }
  .kf-stage::after { opacity:1; }   /* niente lampeggio: il bordo resta acceso */
}

/* ── Voto del pubblico (9 ott 2026) ──
   In cima alla pagina, finché il voto è aperto: la card del palco del maxischermo (copertina, mai il
   selfie degli altri) con sotto i cinque microfoni da toccare. Ambra come chi è sul palco. Un tocco
   accende i microfoni fino a quello scelto, uno dietro l'altro; il voto si può cambiare. */
.kp-votes { display:flex; flex-direction:column; gap:12px; margin:0 0 24px; }
.kp-vote { position:relative; border-radius:24px; overflow:hidden; isolation:isolate; padding:14px 14px 16px; color:#fff;
  background:linear-gradient(180deg, var(--stage-a) 0%, var(--stage-b) 58%, var(--stage-c) 100%);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.1); animation:kfIn .6s cubic-bezier(.16,1,.3,1) both; }
.kp-vote .bg { position:absolute; z-index:-1; top:0; right:0; height:150px; width:58%; background:center / cover no-repeat; opacity:.85;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 48%), linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, #000 48%), linear-gradient(180deg, #000 55%, transparent 100%); mask-composite:intersect; }
.kp-vote .top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kp-vote .now { display:inline-flex; padding:4px 10px; border-radius:999px; background:var(--amber); color:var(--amber-ink); font-size:12px; font-weight:800; }
.kp-vote .now.off { background:rgba(255,255,255,.16); color:#fff; }
.kp-vote .left { font-size:12.5px; font-weight:700; color:rgba(255,255,255,.8); font-variant-numeric:tabular-nums; text-shadow:0 1px 6px rgba(0,0,40,.9); }
.kp-vote .nm { margin:44px 0 4px; max-width:64%; font-size:30px; font-weight:900; line-height:1; letter-spacing:-.02em; overflow-wrap:anywhere; text-shadow:0 2px 12px rgba(0,0,40,.6); }
.kp-vote .nm.long { max-width:none; font-size:24px; }
.kp-vote .sg { max-width:72%; font-size:13px; line-height:1.3; color:rgba(255,255,255,.78); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,40,.7); }
.kp-vote .sg b { color:#fff; font-size:14px; }
.kp-mics { display:flex; justify-content:space-between; gap:4px; margin:18px -4px 0; }
.kp-mic { position:relative; flex:1 1 0; max-width:64px; height:72px; border:0; border-radius:16px; padding:8px 0; background:transparent; color:#fff; -webkit-user-select:none; user-select:none; }
.kp-mic svg { position:absolute; left:50%; top:8px; width:36px; height:56px; margin-left:-18px; overflow:visible; }
.kp-mic .off { color:rgba(255,255,255,.5); }
.kp-mic .on { color:var(--amber); opacity:0; transform:scale(.6); transform-origin:50% 70%;
  transition:opacity .16s ease-out, transform .34s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i, 0) * 45ms); }
.kp-mic.lit .on { opacity:1; transform:none; }
.kp-mic:active { background:rgba(255,255,255,.08); }
.kp-mic:focus-visible { outline:2.5px solid var(--amber); outline-offset:0; }
.kp-mic[disabled] { cursor:default; }
.kp-vote-tx { margin:8px 2px 0; font-size:14px; line-height:1.4; color:rgba(255,255,255,.82); }
.kp-vote-tx b { color:#fff; }
.kp-vote-tx.err { color:#ffc2c9; }
@media (prefers-reduced-motion: reduce) { .kp-vote { animation:none; } .kp-mic .on { transition:none; } }

/* ═════ Giochi (11 ott 2026): reazioni a chi canta e squadra del telefono ═════
   Compaiono solo dove il server manda d.games (oggi la versione Cloudflare). */
.kp-vote.rx-only .nm { margin-top:36px; }
.kp-rx { display:flex; justify-content:space-between; gap:6px; margin:16px -2px 0; }
.kp-rx-b { flex:1 1 0; max-width:62px; aspect-ratio:1; border:0; border-radius:50%; padding:0; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-size:28px; line-height:1; -webkit-user-select:none; user-select:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.kp-rx-b:active { background:rgba(255,255,255,.22); }
.kp-rx-b:focus-visible { outline:2.5px solid var(--amber); outline-offset:2px; }
.kp-rx-b.pop { animation:kpRxPop .32s cubic-bezier(.16,1,.3,1); }
.kp-rx-tx { margin:10px 2px 0; font-size:13.5px; line-height:1.4; color:rgba(255,255,255,.78); }
.kp-rx-tx b { color:#fff; }
.kp-rx-fly { position:fixed; z-index:30; margin:-14px 0 0 -14px; font-size:28px; line-height:1; pointer-events:none; animation:kpRxFly .9s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes kpRxPop { 40% { transform:scale(1.18); } }
@keyframes kpRxFly { from { opacity:1; transform:translate(0, 0) scale(.9); } to { opacity:0; transform:translate(var(--dx, 0px), -130px) scale(1.4); } }

/* La squadra del telefono. Scelta: un biglietto bianco come la card del form, con la matrice ambra dei punti
   staccata da una linea di strappo (due tacche ritagliate nel bordo). Da scegliere: la card bianca con la domanda. */
.kp-team { margin:0 0 24px; }
.kp-pass { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) 96px; min-height:92px; color-scheme:light; color:var(--ink);
  filter:drop-shadow(0 16px 20px rgba(0,0,30,.45)); }
/* Le tacche: ogni metà ritaglia mezzo cerchio sul lato dello strappo (l'ombra resta al contenitore) */
.kp-pass-main { --x:100%; }
.kp-pass-stub { --x:0%; }
.kp-pass-main, .kp-pass-stub {
  -webkit-mask:radial-gradient(circle 11px at var(--x) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at var(--x) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask:radial-gradient(circle 11px at var(--x) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at var(--x) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.kp-pass-main { display:flex; align-items:center; gap:14px; min-width:0; padding:16px 18px 16px 16px; background:#fff; border-radius:22px 0 0 22px; }
.kp-pass-main .bd { flex:none; min-width:56px; height:56px; padding:0 8px; border-radius:16px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.kp-pass-main .tx { min-width:0; }
.kp-pass-main .tx span { display:block; font-size:13px; font-weight:700; color:var(--soft); }
.kp-pass-main .tx strong { display:block; margin-top:1px; font-size:22px; font-weight:900; line-height:1.1; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-pass-stub { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:var(--amber); color:var(--amber-ink); border-radius:0 22px 22px 0; }
.kp-pass-stub::before { content:""; position:absolute; left:0; top:14px; bottom:14px; border-left:2px dashed rgba(42,26,0,.32); }
.kp-pass-stub b { font-size:34px; font-weight:900; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.kp-pass-stub span { font-size:12.5px; font-weight:800; }
.kp-pass-stub.up b { animation:kpPtsUp .7s cubic-bezier(.16,1,.3,1); }
@keyframes kpPtsUp { 0% { transform:translateY(10px) scale(.7); opacity:0; } 60% { transform:translateY(-2px) scale(1.12); opacity:1; } 100% { transform:none; } }
.kp-team-tx { margin:12px 4px 0; font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.78); }
.kp-team-tx .kp-link { color:#fff; font-weight:700; }

.kp-pick { color-scheme:light; background:#fff; color:var(--ink); border-radius:24px; padding:20px 16px 16px; box-shadow:0 24px 50px -22px rgba(0,0,0,.7); }
.kp-pick h3 { margin:0; font-size:24px; font-weight:900; line-height:1.05; letter-spacing:-.02em; text-wrap:balance; }
.kp-pick p { margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--soft); }
.kp-pick p.err { color:var(--red); font-weight:600; }
.kp-pick .kp-chips { margin:14px 0 0; }
.kp-pick > .kp-link { display:block; margin:12px auto 0; font-size:14px; font-weight:600; color:var(--soft); }
.kp-team-f { display:flex; gap:8px; margin-top:14px; }
.kp-team-f input { flex:1 1 auto; min-width:0; min-height:50px; padding:0 14px; border-radius:14px; border:1.5px solid transparent; background:var(--field); color:var(--ink); font:inherit; font-size:16px; font-weight:600; }
.kp-team-f input::placeholder { color:var(--mute); font-weight:400; }
.kp-team-f input:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,0,80,.14); }
.kp-team-f button { flex:none; min-height:50px; padding:0 20px; border:0; border-radius:999px; background:var(--navy); color:#fff; font:inherit; font-size:15px; font-weight:800; }
.kp-team-f button:active { transform:scale(.97); }
.kp-team-f button:focus-visible { outline:2.5px solid var(--navy); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { .kp-rx-b.pop, .kp-pass-stub.up b { animation:none; } }

/* ═════ Voto aperto a chi ha già cantato (12 ott 2026): elenco compatto sotto la card del palco ═════ */
.kp-mic[disabled] { opacity:1; }
.kp-vlist { margin-top:4px; padding:16px 14px 6px; border-radius:24px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.kp-vlist h3 { margin:0; font-size:19px; font-weight:900; letter-spacing:-.01em; }
.kp-vlist > p { margin:4px 0 6px; font-size:13.5px; line-height:1.4; color:rgba(255,255,255,.75); }
.kp-vrow { display:grid; grid-template-columns:44px minmax(0, 1fr); grid-template-areas:"cv tx" "mics mics" "st st"; column-gap:12px; align-items:center; padding:12px 0; border-top:1px solid rgba(255,255,255,.1); }
.kp-vrow:first-of-type { border-top:0; }
.kp-vrow .cv { grid-area:cv; width:44px; height:44px; border-radius:12px; background:#2a2d86 center / cover no-repeat; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); }
.kp-vrow .cv svg { width:20px; height:20px; }
.kp-vrow .tx { grid-area:tx; min-width:0; }
.kp-vrow .tx strong { display:block; font-size:16px; font-weight:800; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-vrow .tx span { display:block; font-size:13px; color:rgba(255,255,255,.7); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kp-vrow .kp-mics { grid-area:mics; margin:8px -4px 0; }
.kp-mics.sm .kp-mic { height:52px; border-radius:12px; padding:4px 0; }
.kp-mics.sm .kp-mic svg { top:6px; width:26px; height:40px; margin-left:-13px; }
.kp-vrow-tx { grid-area:st; margin:4px 2px 0; font-size:13px; font-weight:700; color:var(--amber); }
.kp-vrow-tx:empty { display:none; }
.kp-vrow-tx.err { color:#ffc2c9; font-weight:600; }
.kp-vrow.done { grid-template-areas:"cv tx" "mics mics"; }
.kp-vrow.done .kp-mics { margin-top:6px; }
.kp-vrow.done .kp-mics.sm .kp-mic { height:36px; }
.kp-vrow.done .kp-mics.sm .kp-mic svg { top:4px; width:18px; height:28px; margin-left:-9px; }
.kp-vrow.done .kp-vrow-tx { display:none; }
.kp-vrow.done .cv, .kp-vrow.done .tx { opacity:.7; }

/* ── Duello (12 ott 2026): card in "Le tue canzoni", conferma dal basso, schermate a tutto schermo ── */
/* La card in "Le tue canzoni": bianca come "Per chi fai il tifo?", sotto la canzone a cui si riferisce */
.kp-du { margin:2px 0 12px; color-scheme:light; background:#fff; color:var(--ink); border-radius:22px; padding:18px 14px 12px; box-shadow:0 24px 50px -22px rgba(0,0,0,.7); }
.kp-du h3 { margin:0; color:var(--ink); font-size:22px; font-weight:900; line-height:1.05; letter-spacing:-.02em; }
.kp-du > p { margin:6px 0 12px; font-size:14px; line-height:1.45; color:var(--soft); }
.kp-du-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.kp-du-row .cv { width:44px; height:44px; flex:none; border-radius:10px; background:var(--field) center / cover no-repeat; }
.kp-du-row .tx { flex:1; min-width:0; }
.kp-du-row strong { display:block; font-size:16px; font-weight:800; }
.kp-du-row .tx span { display:block; font-size:12.5px; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kp-du-row .go { flex:none; min-height:42px; padding:0 18px; border:0; border-radius:999px; background:var(--navy); color:#fff; font-size:14.5px; font-weight:800; }
.kp-du-row .go:focus-visible { outline-color:var(--navy); outline-offset:3px; }
.kp-du-row.off strong { color:var(--soft); }
.kp-du-row.off .cv { opacity:.45; }
.kp-du .foot { margin:0; padding-top:10px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.4; color:var(--mute); }
.kp-it .tx .st.du { background:var(--amber); color:var(--amber-ink); }

/* Conferma: foglio dal basso */
.kp-du-sheet-ov { position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end; background:rgba(0,0,30,.6); animation:kpFade .2s ease-out; }
.kp-du-sheet { width:100%; color-scheme:light; background:#fff; color:var(--ink); border-radius:26px 26px 0 0; padding:10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); animation:kpUp .35s cubic-bezier(.2,.8,.2,1); }
.kp-du-sheet .grab { display:block; width:40px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 18px; }
.kp-du-sheet .who { display:flex; align-items:center; gap:14px; }
.kp-du-sheet .who .cv { width:56px; height:56px; flex:none; border-radius:14px; background:var(--field) center / cover no-repeat; }
.kp-du-sheet h3 { margin:0; font-size:30px; font-weight:900; letter-spacing:-.025em; line-height:1; }
.kp-du-sheet .who span { display:block; margin-top:5px; font-size:13.5px; color:var(--soft); }
.kp-du-rules { list-style:none; margin:20px 0 22px; padding:0; display:grid; gap:14px; }
.kp-du-rules li { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:center; font-size:15px; line-height:1.4; color:var(--soft); }
.kp-du-rules li b { color:var(--ink); }
.kp-du-rules .n { width:34px; height:34px; border-radius:10px; background:var(--field); color:var(--navy); display:flex; align-items:center; justify-content:center; }
.kp-du-rules .n svg { width:18px; height:18px; }
.kp-du-sheet .kp-btn + .kp-btn { margin-top:8px; }

/* A tutto schermo (attesa, invito, domande, risultato): la locandina, come "È un match!" e "Tocca a te!" */
.kp-du-ov { position:fixed; inset:0; z-index:300; overflow-y:auto; display:flex; color:#fff;
  padding:calc(26px + env(safe-area-inset-top, 0px)) 20px calc(22px + env(safe-area-inset-bottom, 0px));
  background:radial-gradient(70% 40% at 50% 0%, rgba(255,214,150,.22), transparent 70%), var(--navy); animation:kpFade .25s ease-out; }
.kp-du-ov .in { width:100%; max-width:420px; margin:0 auto; display:flex; flex-direction:column; }
.kp-du-ov.c .in { text-align:center; }
.kp-du-vs { display:flex; align-items:center; justify-content:center; margin:22px 0 30px; }
.kp-du-vs .av { width:112px; height:112px; flex:none; display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:900; background:center / cover no-repeat;
  box-shadow:0 0 0 4px #fff, 0 20px 40px -12px rgba(0,0,0,.8); }
.kp-du-vs .me { border-radius:50%; background-color:var(--amber); color:var(--amber-ink); animation:kpInL .7s cubic-bezier(.2,.8,.2,1) both; }
.kp-du-vs .them { border-radius:28px; background-color:var(--stage-a); animation:kpInR .7s cubic-bezier(.2,.8,.2,1) both; }
.kp-du-vs .them.wait { animation:kpInR .7s cubic-bezier(.2,.8,.2,1) both, kpDuBreath 1.6s .7s ease-in-out infinite alternate; }
.kp-du-vs .vs { position:relative; z-index:1; margin:0 -16px; width:54px; height:54px; flex:none; border-radius:50%; background:#fff; color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; letter-spacing:-.02em; box-shadow:0 0 0 4px var(--navy); animation:kpDuPop .4s .5s both; }
.kp-du-t { margin:0; font-size:56px; font-weight:900; line-height:.9; letter-spacing:-.035em; }
.kp-du-t span { display:block; }
.kp-du-t .o { color:transparent; -webkit-text-stroke:1.6px #fff; padding-bottom:.06em; }
.kp-du-ov .lead { margin:16px 4px 0; font-size:16px; line-height:1.5; color:rgba(255,255,255,.8); }
.kp-du-ov .lead b { color:#fff; }
.kp-du-clock { margin:24px auto 0; width:100%; max-width:280px; height:6px; border-radius:3px; background:rgba(255,255,255,.14); overflow:hidden; }
.kp-du-clock i { display:block; height:100%; background:#fff; transform-origin:left; animation:kpDuDrain var(--t, 60s) linear both; }
.kp-du-ov .sm { margin:9px 0 0; font-size:13px; color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums; }
.kp-du-space { flex:1; min-height:24px; }
.kp-du-cta { width:100%; flex:none; min-height:58px; border:0; border-radius:999px; background:var(--amber); color:var(--amber-ink); font-size:17px; font-weight:900;
  box-shadow:0 16px 30px -14px rgba(255,181,71,.6); }
.kp-du-cta:focus-visible { outline:2.5px solid #fff; outline-offset:3px; }
.kp-du-ov .kp-btn.line { margin-top:10px; }
.kp-du-ov .note { margin:12px 0 0; font-size:13px; line-height:1.45; color:rgba(255,255,255,.62); }

/* Le domande */
.kp-du-sb { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:8px; padding:12px; border-radius:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); }
.kp-du-sb .pl { display:flex; align-items:center; gap:9px; min-width:0; }
.kp-du-sb .pl.them { flex-direction:row-reverse; text-align:right; }
.kp-du-sb .pl > div { min-width:0; }
.kp-du-sb .av { width:38px; height:38px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:900; background:var(--amber) center / cover no-repeat; color:var(--amber-ink); }
.kp-du-sb .them .av { border-radius:10px; background-color:var(--stage-a); }
.kp-du-sb strong { display:block; font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kp-du-pips { display:flex; gap:4px; margin-top:6px; }
.kp-du-sb .them .kp-du-pips { justify-content:flex-end; }
.kp-du-pips i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.2); }
.kp-du-pips i.ok { background:var(--wpp-night-green, #4ddb8a); }
.kp-du-pips i.ko { background:var(--wpp-night-red, #ff7b8a); }
.kp-du-pips i.now { background:transparent; box-shadow:inset 0 0 0 2px #fff; }
.kp-du-sb .sc { font-size:30px; font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kp-du-sb .sc span { margin:0 3px; color:rgba(255,255,255,.4); font-weight:700; }
.kp-du-n { margin:30px 2px 10px; font-size:13px; font-weight:800; color:rgba(255,255,255,.62); }
.kp-du-q { margin:0; font-size:32px; font-weight:900; line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
.kp-du-hint { margin:10px 2px 0; font-size:14px; color:rgba(255,255,255,.7); }
.kp-du-timer { position:relative; margin:24px 0 18px; height:8px; border-radius:4px; background:rgba(255,255,255,.14); overflow:hidden; }
.kp-du-timer i { position:absolute; inset:0; border-radius:inherit; background:var(--amber); transform-origin:left; animation:kpDuDrain 8s linear infinite; }
.kp-du-timer.stop i { animation:none; transform:scaleX(.7); background:rgba(255,255,255,.35); }
.kp-du-ans { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kp-du-ans button { position:relative; min-height:78px; border:0; border-radius:18px; background:#fff; color:var(--ink); font-size:24px; font-weight:900; letter-spacing:-.01em;
  box-shadow:0 14px 26px -16px rgba(0,0,0,.7); transition:transform .12s; }
.kp-du-ans button:active { transform:scale(.97); }
.kp-du-ans button:focus-visible { outline:2.5px solid var(--amber); outline-offset:3px; }
.kp-du-ans button.ok { background:var(--wpp-green, #0e7a45); color:#fff; }
.kp-du-ans button.ko { background:var(--wpp-red, #bc0113); color:#fff; }
.kp-du-ans button svg { position:absolute; top:10px; right:10px; width:18px; height:18px; }
.kp-du-ans.done button:not(.ok):not(.ko) { opacity:.3; }
.kp-du-wait { margin:18px 2px 0; font-size:15px; line-height:1.45; color:rgba(255,255,255,.8); }
.kp-du-wait b { color:#fff; }

/* Il risultato */
.kp-du-res { display:flex; align-items:center; justify-content:center; gap:16px; margin:18px 0 28px; }
.kp-du-res .av { width:80px; height:80px; flex:none; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:900; background:center / cover no-repeat;
  box-shadow:0 0 0 3px rgba(255,255,255,.5); }
.kp-du-res .me { border-radius:50%; background-color:var(--amber); color:var(--amber-ink); }
.kp-du-res .them { border-radius:22px; background-color:var(--stage-a); }
.kp-du-res .win { box-shadow:0 0 0 4px #fff, 0 0 0 9px var(--amber); }
.kp-du-res .lose { opacity:.6; }
.kp-du-res b { font-size:60px; font-weight:900; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.kp-du-res .dash { font-size:36px; color:rgba(255,255,255,.4); }
.kp-du-swap { list-style:none; margin:24px 0 0; padding:4px 14px; border-radius:20px; background:#fff; color:var(--ink); color-scheme:light; text-align:left; }
.kp-du-swap li { display:flex; align-items:center; gap:12px; padding:11px 0; }
.kp-du-swap li + li { border-top:1px solid var(--line); }
.kp-du-swap .ar { width:32px; height:32px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.kp-du-swap .ar svg { width:17px; height:17px; }
.kp-du-swap .up .ar { background:var(--wpp-green-bg, #e6f4ec); color:var(--wpp-green, #0e7a45); }
.kp-du-swap .dn .ar { background:var(--wpp-gray-bg, #f0f1f4); color:var(--wpp-gray, #5f6672); }
.kp-du-swap strong { display:block; font-size:16px; font-weight:800; }
.kp-du-swap span { display:block; font-size:12.5px; color:var(--soft); }
.kp-du-pts { align-self:center; margin:18px 0 0; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.12); font-size:14px; font-weight:700; color:rgba(255,255,255,.85); }
.kp-du-pts b { color:#fff; font-weight:900; }

@keyframes kpUp { from { transform:translateY(100%); } }
@keyframes kpDuPop { from { transform:scale(.3); opacity:0; } }
@keyframes kpDuBreath { to { opacity:.5; transform:scale(.96); } }
@keyframes kpDuDrain { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .kp-du-sheet, .kp-du-vs .me, .kp-du-vs .them, .kp-du-vs .vs { animation:none; }
  .kp-du-timer i, .kp-du-clock i { animation-duration:0s; }
}

/* Versione vera: risposta data in attesa dell'altro, risposte lunghe in colonna, copertina, conto alla rovescia */
.kp-du-ans button.sel { box-shadow:inset 0 0 0 3px var(--amber), 0 14px 26px -16px rgba(0,0,0,.7); }
.kp-du-ans button:disabled { cursor:default; }
.kp-du-ans button:disabled:active { transform:none; }
.kp-du-ans.list { grid-template-columns:1fr; gap:8px; }
.kp-du-ans.list button { min-height:58px; padding:10px 44px 10px 18px; text-align:left; font-size:18px; line-height:1.2; }
.kp-du-cover { width:132px; height:132px; margin:16px 0 0; border-radius:16px; background:var(--stage-a) center / cover no-repeat; box-shadow:0 14px 30px -14px rgba(0,0,0,.8); }
.kp-du-big { margin:18px 0 0; font-size:120px; font-weight:900; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.kp-du-err { margin:-8px 0 14px; color:var(--red); font-size:14px; font-weight:600; line-height:1.4; }
.kp-du-sheet .kp-btn.navy:disabled { opacity:.6; }
.kp-du-row.off .tx span { color:var(--warn); font-weight:600; }