/* ReBattle — Campionatore (25/10/2026). Colori del sito: blu notte, giallo #ffd60a per la batteria, turchese per le note. */
.cp-pagina{padding-bottom:30px}
.cp-testa{margin:22px 0 16px;max-width:820px}
.cp-occhiello{margin:0 0 6px;color:var(--link);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.cp-testa h1{margin:0 0 8px;font-size:clamp(24px,4vw,36px);line-height:1.15;color:var(--bianco)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cp{--cp-on:#ffd60a;--cp-mel:#2dd4bf;--cp-step:#1a2b47;--cp-step-b:#22385c;background:linear-gradient(180deg,#101d33,#0b1424);border:1px solid var(--stroke-2);border-radius:8px;padding:16px;margin-bottom:34px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.cp:not(.pronto) .cp-griglia{min-height:330px}
.cp-ricevuto{margin:0 0 12px;padding:10px 14px;border-radius:6px;background:rgba(255,214,10,.12);color:var(--bianco)}

/* barra superiore */
.cp-barra{display:grid;grid-template-columns:auto 1fr minmax(120px,260px);gap:14px;align-items:center;margin-bottom:14px}
.cp button,.cp select,.cp input{touch-action:manipulation}
.cp :focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #1d4ed8}
.cp-step:focus-visible{outline-offset:1px;position:relative;z-index:2}
.cp-play{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px;border:0;border-radius:6px;background:var(--cp-on);color:#0c1626;font:800 20px var(--font);cursor:pointer;transition:transform .08s,background .15s}
.cp-play:hover{background:#ffe45c}.cp-play:active{transform:scale(.97)}
.cp-play svg{width:22px;height:22px;fill:currentColor}
.cp-play .ic-stop,.cp-play[aria-pressed=true] .ic-play{display:none}.cp-play[aria-pressed=true] .ic-stop{display:inline}
.cp-play[aria-pressed=true]{background:var(--verde-btn);color:#03201d}
.cp-info b{display:block;color:var(--bianco);font-size:17px}
.cp-info small{color:var(--text-2);font-size:12.5px}
.cp-spettro{width:100%;height:52px;border-radius:4px;background:rgba(0,0,0,.3)}

/* generi */
.cp-generi{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.cp-gen{display:inline-flex;align-items:baseline;gap:6px;min-height:38px;padding:7px 12px;border:1px solid var(--stroke-2);border-radius:999px;background:var(--card);color:var(--text);font:600 14px var(--font);cursor:pointer}
.cp-gen small{color:var(--text-2);font-size:11px;font-weight:500}
.cp-gen:hover{border-color:var(--cp-on);color:var(--bianco)}
.cp-gen[aria-pressed=true]{background:var(--cp-on);border-color:var(--cp-on);color:#0c1626}
.cp-gen[aria-pressed=true] small{color:#3b3000}

/* controlli */
.cp-controlli,.cp-dj{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-end;margin-bottom:14px}
.cp-controlli{padding-bottom:14px;border-bottom:1px solid var(--stroke-2)}
.cp-cursore,.cp-scelta,.cp-filtro{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-2)}
.cp-cursore span,.cp-filtro span,.cp-scelta span{font-weight:600}
.cp-cursore output,.cp-filtro output{color:var(--bianco);font-weight:700;margin-left:4px}
.cp-cursore input{width:150px}.cp-filtro input{width:240px}
.cp-filtro small{font-size:11.5px;color:var(--text-3)}
.cp input[type=range]{accent-color:var(--cp-on);height:28px}
.cp select{min-height:36px;padding:4px 8px;border-radius:4px;border:1px solid var(--stroke-2);background:var(--card);color:var(--text);font:14px var(--font)}

/* tasti piccoli */
.cp-attrezzi{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-bottom:10px}
.cp-gruppo{display:inline-flex;flex-wrap:wrap;gap:4px}
.cp-tasto{min-height:36px;padding:6px 12px;border:1px solid var(--stroke-2);border-radius:4px;background:var(--card);color:var(--text);font:600 14px var(--font);cursor:pointer}
.cp-tasto:hover{border-color:var(--cp-on);color:var(--bianco)}
.cp-tasto[aria-pressed=true]{background:var(--cp-on);border-color:var(--cp-on);color:#0c1626}
.cp-tasto.suona{box-shadow:0 0 0 2px var(--cp-mel)}
.cp-mezzi{display:none}

/* griglia */
.cp-griglia{display:flex;flex-direction:column;gap:5px}
.cp-riga{display:grid;grid-template-columns:176px 1fr;gap:8px;align-items:center}
.cp-riga.spenta{opacity:.45}
.cp-nome{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.cp-nome b{font-size:13.5px;color:var(--bianco);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.cp-ms{display:inline-flex;gap:3px}
.cp-mini{width:30px;height:30px;padding:0;border:1px solid var(--stroke-2);border-radius:3px;background:transparent;color:var(--text-2);font:700 11px var(--font);cursor:pointer}
.cp-mini[data-cp-mute][aria-pressed=true]{background:#e5484d;border-color:#e5484d;color:#fff}
.cp-mini[data-cp-solo][aria-pressed=true]{background:var(--cp-mel);border-color:var(--cp-mel);color:#03201d}
.cp-nota-sel{flex-basis:100%}
.cp-nota-sel select{width:100%;min-height:28px;font-size:12.5px;padding:2px 4px}
.cp-passi{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}
.cp-step{position:relative;min-height:38px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.22);padding:0;border:0;border-radius:4px;background:var(--cp-step);color:#0c1626;font:700 11px var(--font);cursor:pointer;transition:background .08s,transform .06s}
.cp-step.battito{background:var(--cp-step-b)}
.cp-step:nth-child(4n){margin-right:6px}
.cp-step:hover{outline:1px solid rgba(255,214,10,.5)}
.cp-step.on{background:var(--cp-on);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.cp-step.acc{background:#ffe45c;box-shadow:inset 0 0 0 2px #fff}
.cp-step.rul{box-shadow:none}
.cp-step.rul{background:repeating-linear-gradient(90deg,var(--cp-on) 0 4px,#b89400 4px 7px)}
.mel .cp-step.on{background:var(--cp-mel);color:#03201d}
.cp-step.ora,.cp-step.on.ora,.cp-step.acc.ora,.cp-step.rul.ora{transform:scale(1.06);box-shadow:0 0 0 2px #fff;z-index:1}
.cp-step:not(.on).ora{background:#2c4670}
.cp-legenda{margin:10px 0 16px;font-size:13px;line-height:1.45;color:var(--text-2);max-width:70ch}

/* DJ */
.cp-dj{padding:12px 14px;border-radius:6px;background:rgba(0,0,0,.22);border:1px solid var(--stroke)}
.cp-salita{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;min-width:180px;margin-left:auto;padding:6px 16px;border:2px solid #e5484d;border-radius:6px;background:rgba(229,72,77,.14);color:#fff;font:800 17px var(--font);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.cp-salita small{font-size:11px;font-weight:500;color:var(--text-2)}
.cp-salita[aria-pressed=true]{background:#e5484d;animation:cp-pulsa .25s infinite alternate}
.cp-salita[aria-pressed=true] small{color:#fff}
@keyframes cp-pulsa{to{transform:scale(1.04)}}

/* pad */
.cp-pad-zona{margin:16px 0}
.cp-pad-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.cp-h2{margin:0;font-size:17px;color:var(--bianco)}
.cp-pads{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.cp-pad{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;min-height:74px;padding:8px;border:1px solid rgba(255,214,10,.25);border-radius:8px;background:linear-gradient(160deg,#1f3356,#14223a);color:var(--bianco);font:700 13px var(--font);text-align:left;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform .05s}
.cp-pad.fx{border-color:rgba(45,212,191,.3);background:linear-gradient(160deg,#173a45,#11283a)}
.cp-pad kbd{position:absolute;top:6px;right:7px;font:600 11px var(--font);color:#a3b1c8}
.cp-pad:active,.cp-pad.colpito{animation:cp-colpo .22s ease-out}
.cp-pad.mio{border-color:var(--cp-on);box-shadow:inset 0 0 0 1px var(--cp-on)}
.cp-pad.reg{background:#e5484d;animation:cp-pulsa .4s infinite alternate}
.cp-pad-nome{overflow:hidden;text-overflow:ellipsis;max-width:100%}
@keyframes cp-colpo{0%{transform:scale(.94);background:var(--cp-on);color:#0c1626}100%{transform:scale(1)}}
[data-modo-pad=carica] .cp-pad,[data-modo-pad=registra] .cp-pad,[data-modo-pad=togli] .cp-pad{border-style:dashed}

/* mixer */
.cp-mixer-box{margin:6px 0 16px;border:1px solid var(--stroke-2);border-radius:6px;padding:10px 12px}
.cp-mixer-box summary{cursor:pointer;min-height:36px;display:flex;align-items:center;font-weight:700;color:var(--bianco)}
.cp-mixer{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:12px}
.cp-canale{display:flex;flex-direction:column;gap:4px;font-size:13px}
.cp-canale input{width:100%}.cp-canale select{width:100%}

/* esporta */
.cp-esporta{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.cp-esporta .i{width:18px;height:18px}
.cp-esporta{padding-top:16px;border-top:1px solid var(--stroke-2)}
.cp-esporta .btn-nero,.cp-esporta .btn-bordo{min-height:44px}
.cp-annuncio{margin:12px 0 0;min-height:1.4em;font-size:14px;color:var(--cp-mel)}
.cp-annuncio.errore{color:#ff8a8d}

/* pagina */
.cp-tre{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cp-tre b{color:var(--bianco);font-size:16px}.cp-tre p{margin:6px 0 0}
.cp-lista-generi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding:0;margin:0;list-style:none}
.cp-lista-generi li{padding:12px 14px;border-radius:6px;background:var(--card)}
.cp-lista-generi b{color:var(--bianco)}.cp-lista-generi p{margin:4px 0 0;font-size:14px}
.cp-bpm{margin-left:6px;font-size:12px;color:var(--link)}
.cp-diritti p{max-width:820px}

@media (max-width:900px){
  .cp-pads{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cp-barra{grid-template-columns:auto 1fr}
  .cp-spettro{grid-column:1/-1;height:40px}
  .cp-salita{margin-left:0}
}
@media (max-width:700px){
  /* ordine della pagina: titolo, strumento, poi la spiegazione */
  .cp-pagina{display:flex;flex-direction:column;padding-bottom:86px}
  .cp-pagina>*{order:5}
  .cp-testa{display:contents}
  .cp-testa .cp-occhiello{order:0;margin:14px 0 4px;font-size:11.5px}
  .cp-testa h1{order:1;margin:0 0 10px;font-size:21px;line-height:1.2}
  .cp-testa .sezione-intro{order:3;margin:-14px 0 28px;font-size:15px}
  #campionatore{order:2}
  .cp{padding:0 10px 12px;border-radius:6px;margin-bottom:26px}
  .cp-mezzi{display:inline-flex}
  /* barra sempre in vista: Play, titolo, spettro */
  .cp-barra{position:sticky;top:0;z-index:20;grid-template-columns:auto minmax(0,1fr) 64px;gap:10px;margin:0 -10px 10px;padding:8px 10px;background:#0e1a2e;border-bottom:1px solid var(--stroke-2);border-radius:6px 6px 0 0}
  .cp-play{min-height:48px;padding:0 18px;gap:8px;font-size:18px}
  .cp-info b{font-size:14.5px;line-height:1.2}
  .cp-info small{display:none}
  .cp-spettro{grid-column:auto;height:40px}
  .cp-ricevuto{margin-top:10px}
  /* generi: una sola riga scorrevole */
  .cp-generi{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0 -10px 12px;padding:2px 10px 6px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .cp-generi::-webkit-scrollbar{display:none}
  .cp-gen{flex:none;min-height:44px;padding:0 14px;scroll-snap-align:start;align-items:center;font-size:15px}
  /* controlli compatti */
  .cp-controlli{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px 12px;align-items:end;padding-bottom:12px;margin-bottom:12px}
  .cp-controlli>:nth-child(1){grid-column:1/3;grid-row:1}
  .cp-controlli>:nth-child(2){grid-column:3/5;grid-row:1}
  .cp-controlli>:nth-child(5){grid-column:5/7;grid-row:1}
  .cp-controlli>:nth-child(3){grid-column:1/4;grid-row:2}
  .cp-controlli>:nth-child(4){grid-column:4/7;grid-row:2}
  .cp-cursore,.cp-scelta{font-size:12.5px}
  .cp-cursore input{width:100%}
  .cp input[type=range]{height:32px}
  .cp select{min-height:42px;font-size:16px;width:100%}
  .cp-scelta{min-width:0}
  /* attrezzi: pattern e metà griglia sulla prima riga */
  .cp-attrezzi{gap:8px;margin-bottom:10px}
  .cp-attrezzi .cp-gruppo:nth-child(1){order:1}
  .cp-attrezzi .cp-mezzi{order:2;margin-left:auto}
  .cp-attrezzi .cp-gruppo:nth-child(2){order:3;flex:1 1 100%;flex-wrap:nowrap}
  .cp-attrezzi .cp-gruppo:nth-child(2) .cp-tasto{flex:1 1 auto;padding:6px 6px;font-size:13.5px}
  .cp-tasto{min-height:44px}
  /* griglia */
  .cp-griglia{gap:6px}
  .cp-riga{grid-template-columns:76px minmax(0,1fr);gap:6px;align-items:start}
  .cp-nome{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:3px}
  .cp-nome b{font-size:12px;flex:none;line-height:1.1}
  .cp-ms{gap:2px}
  .cp-mini{width:37px;height:34px;font-size:12px}
  .cp-nota-sel select{min-height:34px;font-size:13px;padding:2px 2px}
  .cp-passi{grid-template-columns:repeat(8,minmax(0,1fr))}
  .cp[data-mezzo="1"] .cp-step.m2,.cp[data-mezzo="2"] .cp-step.m1{display:none}
  .cp-step{min-height:44px}
  .cp-step:nth-child(4n){margin-right:0}
  .cp-step:nth-child(8n+5){margin-left:4px}
  .cp-legenda{margin:10px 0 14px}
  /* DJ */
  .cp-dj{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:end;padding:12px}
  .cp-dj .cp-filtro,.cp-dj .cp-salita,.cp-dj>.cp-tasto{grid-column:1/-1}
  .cp-filtro input{width:100%}
  .cp-dj>.cp-tasto{justify-self:start}
  .cp-salita{min-height:64px;margin:0;font-size:19px}
  /* pad */
  .cp-pad-zona{margin:18px 0 14px}
  .cp-pad-testa .cp-gruppo{flex:1 1 100%;flex-wrap:nowrap}
  .cp-pad-testa .cp-tasto{flex:1 1 0;padding:6px 2px;font-size:13px}
  .cp-pads{gap:8px}
  .cp-pad{min-height:68px;padding:8px}
  .cp-pad kbd{display:none}
  .cp-mixer-box summary{min-height:44px}
  .cp-mixer{grid-template-columns:1fr 1fr;gap:12px 14px}
  /* esporta */
  .cp-esporta{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
  .cp-esporta .btn-nero,.cp-esporta .btn-bordo{width:100%;justify-content:center;padding-inline:8px}
  .cp-tre{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.cp-salita[aria-pressed=true],.cp-pad.reg,.cp-pad.colpito,.cp-pad:active{animation:none}.cp-step.ora,.cp-step.on.ora,.cp-step.acc.ora,.cp-step.rul.ora{transform:none}.cp-play,.cp-step,.cp-pad{transition:none}.cp-play:active{transform:none}}

/* 25/10 funzioni prese dagli altri campionatori: pattern C/D, euclideo, stutter, rec, mixer esteso, i miei beat */
.cp-tasto.pieno:not([aria-pressed=true]){box-shadow:inset 0 -3px 0 var(--cp-mel)}
.cp-euclide{align-items:flex-end;gap:6px}
.cp-euclide .cp-scelta select{min-height:36px}
.cp-stutter{display:flex;gap:6px;align-items:stretch}
.cp-balbetta{border-color:var(--cp-mel);background:rgba(45,212,191,.12);min-width:150px;margin-left:0}
.cp-balbetta[aria-pressed=true]{background:var(--cp-mel);color:#03201d}
.cp-balbetta[aria-pressed=true] small{color:#03201d}
.cp-rec-barra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-bottom:10px}
.cp-rec[aria-pressed=true]{background:#e5484d;border-color:#e5484d;color:#fff;animation:cp-pulsa .5s infinite alternate}
.cp-mini-cur{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--text-2)}
.cp-mini-cur input{width:100%;height:22px}
.cp-miei-riga{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:10px}
.cp input[type=text]{min-height:36px;padding:4px 10px;border-radius:4px;border:1px solid var(--stroke-2);background:var(--card);color:var(--text);font:14px var(--font)}
@media (max-width:700px){
  .cp-attrezzi .cp-gruppo:nth-child(2){flex-wrap:wrap}
  .cp-attrezzi .cp-gruppo:nth-child(2) .cp-tasto{flex:1 1 30%}
  .cp-attrezzi .cp-gruppo:nth-child(1) .cp-tasto{min-width:40px;padding:6px 8px}
  .cp-euclide{order:4;flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cp-euclide .cp-scelta select{width:100%;min-height:44px;font-size:16px}
  .cp-pad-testa .cp-gruppo{flex-wrap:wrap}
  .cp-pad-testa .cp-tasto{flex:1 1 30%}
  .cp-stutter{grid-column:1/-1}
  .cp-stutter .cp-balbetta{flex:1 1 auto;min-height:56px}
  .cp-stutter select{min-height:56px;font-size:16px}
  .cp-rec-barra .cp-tasto{flex:1 1 40%}
  .cp-rec-barra .cp-scelta{flex:1 1 100%}
  .cp-rec-barra select,.cp-miei-riga select,.cp input[type=text]{width:100%;min-height:44px;font-size:16px}
  .cp-miei-riga .cp-scelta{flex:1 1 100%}
  .cp-miei-riga .cp-tasto{flex:1 1 28%}
}
@media (prefers-reduced-motion:reduce){.cp-rec[aria-pressed=true]{animation:none}}
@media (max-width:700px){
  /* riga 3 dei controlli: Tap tempo + kit, riga 4: Umanizza a tutta larghezza */
  .cp-controlli>:nth-child(6){grid-column:1/3;grid-row:3;min-height:44px}
  .cp-controlli>:nth-child(7){grid-column:3/7;grid-row:3}
  .cp-controlli>:nth-child(7) select{width:100%;min-height:44px;font-size:16px}
  .cp-controlli>:nth-child(8){grid-column:1/7;grid-row:4}
  .cp-controlli>:nth-child(8) input{width:100%}
}