@font-face{font-family:"Oswald";src:url(fonts/oswald-latin.woff2) format("woff2");font-weight:200 700;font-display:swap}
@font-face{font-family:"Rye";src:url(fonts/rye-latin.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --cream:#fbefd5;
  --muted:rgba(251,239,213,.74);
  --faint:rgba(251,239,213,.5);
  --amber:#f2b24a;
  --amber-deep:#c8702a;
  --panel:rgba(22,12,5,.74);
  --line:rgba(242,178,74,.26);
  --alert:#b3321f;
  /* unità che scala con lo schermo (16:9 o no) */
  --u:min(1vh,.5625vw);
  --display:"Oswald","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --western:"Rye","Oswald",Georgia,serif;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  font-family:var(--display);
  color:var(--cream);
  background:#1a0f07 url("../sfondo169_b.jpg") center/cover no-repeat fixed;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
/* vignettatura: stacca il testo dal legno senza nascondere il logo ai bordi */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.25) 0%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.75) 100%);
}

.dj-only,.mobile-only{display:none}

/* ---------------- TV (default) ---------------- */
#stage{
  position:relative;
  width:min(94vw,calc(var(--u)*170));
  max-height:96vh;
  margin:0 auto;
  top:50%;transform:translateY(-50%);
  padding:calc(var(--u)*3.6) calc(var(--u)*5.5) calc(var(--u)*4);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:calc(var(--u)*2.4);
  box-shadow:0 calc(var(--u)*2) calc(var(--u)*8) rgba(0,0,0,.55),inset 0 0 0 calc(var(--u)*.5) rgba(0,0,0,.25);
  backdrop-filter:blur(2px);
  text-align:center;
  transition:opacity .6s ease,filter .6s ease;
}
#stage.stale{opacity:.55;filter:grayscale(.6)}
/* con il QR a sinistra il riquadro si stringe per non coprirlo */
body.has-qr #stage{width:min(calc(100vw - var(--u)*50),calc(var(--u)*170))}

.kicker{
  margin:0 0 calc(var(--u)*1.2);
  font:400 calc(var(--u)*3) / 1 var(--western);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
  display:flex;align-items:center;gap:calc(var(--u)*2);
}
.kicker::before,.kicker::after{
  content:"";flex:1;height:2px;
  background:linear-gradient(90deg,transparent,var(--line) 30%,var(--amber) 100%);
}
.kicker::after{transform:scaleX(-1)}
.kicker span::before,.kicker span::after{content:"★";font-size:.6em;vertical-align:.25em;margin:0 .7em;opacity:.8}

.choreo{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.015em;
  line-height:1.02;
  overflow:hidden;
  overflow-wrap:break-word;
}
.song{
  color:var(--muted);
  font-weight:400;
  line-height:1.2;
  overflow:hidden;
  white-space:nowrap;
}
.song .artist{color:var(--faint)}
.song .sep{color:var(--amber);opacity:.7;margin:0 .35em}
.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,2);white-space:normal}
.song.clamp{text-overflow:ellipsis;display:block;white-space:nowrap}

.now .choreo{font-size:calc(var(--u)*11.5);text-shadow:0 .06em .25em rgba(0,0,0,.6)}
.now .song{font-size:calc(var(--u)*3.8);margin-top:calc(var(--u)*1)}
.now .waiting{color:var(--faint);font-weight:400;text-transform:none}

.progress{
  display:flex;align-items:center;gap:calc(var(--u)*1.6);
  margin:calc(var(--u)*2.2) auto 0;width:min(100%,calc(var(--u)*110));
}
.progress .bar{flex:1;height:calc(var(--u)*.8);border-radius:99px;background:rgba(251,239,213,.14);overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--amber-deep),var(--amber));transition:width 1s linear}
.progress .remaining{font-size:calc(var(--u)*2.6);color:var(--muted);font-variant-numeric:tabular-nums;min-width:4.2ch;text-align:right}

.next{margin-top:calc(var(--u)*3.6)}
.next ol,.played ol{list-style:none;margin:0;padding:0}
.next li{
  display:grid;
  grid-template-columns:calc(var(--u)*5.2) 1fr auto;
  align-items:center;
  gap:calc(var(--u)*2.2);
  padding:calc(var(--u)*1.3) 0;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.next li:last-child{border-bottom:0}
.num{
  width:calc(var(--u)*5.2);height:calc(var(--u)*5.2);
  display:grid;place-items:center;border-radius:50%;
  border:2px solid var(--amber);color:var(--amber);
  font:600 calc(var(--u)*2.8) / 1 var(--display);
}
.next li:first-child .num{background:var(--amber);color:#2a1606}
.next .choreo{font-size:calc(var(--u)*5.4)}
.next li:first-child .choreo{font-size:calc(var(--u)*6.2)}
.next .song{font-size:calc(var(--u)*2.7);margin-top:calc(var(--u)*.3)}
.eta{
  font-size:calc(var(--u)*2.4);color:var(--amber);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  border:1px solid var(--line);border-radius:99px;padding:.2em .8em;
}

.played{margin-top:calc(var(--u)*2.6)}
.played .kicker{font-size:calc(var(--u)*2)}
.played ol{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u)*.6) calc(var(--u)*2.4);color:var(--faint);font-size:calc(var(--u)*2.4)}
.played li b{color:var(--muted);font-weight:600;text-transform:uppercase}

.chips{display:flex;gap:calc(var(--u)*1);justify-content:center;flex-wrap:wrap;margin-top:calc(var(--u)*1.6)}
.chip{font-size:calc(var(--u)*2.2);padding:.15em .7em;border-radius:99px;border:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
.chip.warn{border-color:var(--alert);background:rgba(179,50,31,.35);color:var(--cream)}
.chip.small{font-size:calc(var(--u)*1.8)}

#qr{
  position:fixed;left:calc(var(--u)*3);bottom:calc(var(--u)*3);
  background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--u)*1.6);
  padding:calc(var(--u)*1.4);text-align:center;
}
#qrCode{background:#fff;padding:calc(var(--u)*.8);border-radius:calc(var(--u)*.8);line-height:0}
#qrCode img,#qrCode canvas{width:calc(var(--u)*15)!important;height:calc(var(--u)*15)!important}
#qr p{margin:calc(var(--u)*1) 0 0;font-size:calc(var(--u)*1.7);color:var(--muted);line-height:1.2}

#badge{
  position:fixed;right:calc(var(--u)*2);bottom:calc(var(--u)*2);
  font-size:calc(var(--u)*1.9);padding:.35em .9em;border-radius:99px;
  background:rgba(179,50,31,.85);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4);
}
#badge.info{background:rgba(22,12,5,.85);color:var(--muted);border:1px solid var(--line)}

/* ---------------- animazioni cambio brano ---------------- */
#stage.leaving .now > *,#stage.leaving .next li{animation:leave .25s ease-in forwards}
#stage.entering .now > *,#stage.entering .next li,#stage.entering .played li{
  animation:enter .7s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--i,0) * 90ms);
}
@keyframes leave{to{opacity:0;transform:translateY(calc(var(--u)*-3))}}
@keyframes enter{from{opacity:0;transform:translateY(calc(var(--u)*4))}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#stage *{animation:none!important}}

/* ---------------- DJ ---------------- */
body.mode-dj .dj-only{display:flex}
body.mode-dj .now .choreo{font-size:calc(var(--u)*9)}
body.mode-dj .next .choreo,body.mode-dj .next li:first-child .choreo{font-size:calc(var(--u)*4.2)}
body.mode-dj #stage{padding-top:calc(var(--u)*2.6);padding-bottom:calc(var(--u)*2.6)}
body.mode-dj .next{margin-top:calc(var(--u)*2.4)}
body.mode-dj .next li{padding:calc(var(--u)*.8) 0}
body.mode-dj .next .song{font-size:calc(var(--u)*2.3)}
body.mode-dj .num{width:calc(var(--u)*4.2);height:calc(var(--u)*4.2);font-size:calc(var(--u)*2.2)}
body.mode-dj .next li{grid-template-columns:calc(var(--u)*4.2) 1fr auto}
.side{display:flex;align-items:center;gap:calc(var(--u)*1)}
.side .chips{margin:0;flex-wrap:nowrap}

/* ---------------- MOBILE ---------------- */
body.mode-mobile{overflow:auto;background-attachment:scroll}
body.mode-mobile::before{background:rgba(10,5,2,.72)}
body.mode-mobile .mobile-only{display:block}
body.mode-mobile #stage{
  top:auto;transform:none;width:auto;max-height:none;
  margin:0;padding:max(20px,env(safe-area-inset-top)) 16px 110px;
  background:none;border:0;box-shadow:none;border-radius:0;backdrop-filter:none;
}
body.mode-mobile .kicker{font-size:15px;margin-bottom:10px}
body.mode-mobile .now{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 16px}
body.mode-mobile .now .choreo{font-size:40px}
body.mode-mobile .now .song{font-size:17px;white-space:normal}
body.mode-mobile .progress{margin-top:14px}
body.mode-mobile .progress .bar{height:6px}
body.mode-mobile .progress .remaining{font-size:14px}
body.mode-mobile .next{margin-top:26px}
body.mode-mobile .next li{grid-template-columns:34px 1fr auto;gap:12px;padding:10px 0}
body.mode-mobile .num{width:34px;height:34px;font-size:16px}
body.mode-mobile .next .choreo,body.mode-mobile .next li:first-child .choreo{font-size:22px}
body.mode-mobile .next .song{font-size:14px;white-space:normal}
body.mode-mobile .eta{font-size:13px}
body.mode-mobile .played{margin-top:26px}
body.mode-mobile .played .kicker{font-size:13px}
body.mode-mobile .played ol{display:block;font-size:15px;text-align:left}
body.mode-mobile .played li{padding:6px 0;border-bottom:1px solid rgba(242,178,74,.12)}
body.mode-mobile #badge{font-size:13px;right:12px;bottom:84px}

#requestBtn{
  position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));
  font:600 19px/1 var(--display);letter-spacing:.03em;
  padding:17px;border:0;border-radius:14px;cursor:pointer;
  color:#2a1606;background:linear-gradient(180deg,#f7c565,var(--amber-deep));
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
dialog{
  width:min(560px,100vw);max-height:92vh;margin:auto auto 0;padding:0;
  border:1px solid var(--line);border-radius:20px 20px 0 0;
  background:#241408;color:var(--cream);font-family:var(--display);
}
dialog::backdrop{background:rgba(0,0,0,.65)}
dialog form{display:flex;flex-direction:column;gap:10px;padding:16px;max-height:92vh}
dialog header{display:flex;justify-content:space-between;align-items:center}
dialog h2{margin:0;font:400 20px var(--western);color:var(--amber)}
dialog .close{background:none;border:0;color:var(--muted);font-size:22px;cursor:pointer}
dialog input{font:16px var(--display);padding:12px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--cream)}
.request-list{overflow:auto;min-height:160px;max-height:42vh;border:1px solid var(--line);border-radius:10px}
.request-list button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(242,178,74,.12);color:var(--cream);padding:10px 12px;font:16px var(--display);cursor:pointer}
.request-list button b{display:block;text-transform:uppercase;font-weight:600}
.request-list button span{color:var(--faint);font-size:14px}
.request-list button[aria-selected="true"]{background:rgba(242,178,74,.22)}
dialog [type=submit]{font:600 18px var(--display);padding:14px;border:0;border-radius:12px;background:var(--amber);color:#2a1606;cursor:pointer}
dialog [type=submit]:disabled{opacity:.45}
.request-msg{margin:0;min-height:1.2em;color:var(--amber);font-size:15px}

/* ---------------- OBS (sovrimpressione) ---------------- */
body.mode-obs{background:transparent}
body.mode-obs::before{display:none}
body.mode-obs #stage{
  position:fixed;top:auto;transform:none;left:3vw;right:3vw;bottom:4vh;width:auto;margin:0;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:3vw;
  padding:1.6vh 2.4vw;text-align:left;border-radius:1.4vh;
  border-left:.6vh solid var(--amber);
  background:linear-gradient(90deg,rgba(22,12,5,.9),rgba(22,12,5,.72));
}
body.mode-obs .kicker{font-size:2vh;margin-bottom:.6vh}
body.mode-obs .kicker::before,body.mode-obs .kicker::after{display:none}
body.mode-obs .kicker span::before{display:none}
body.mode-obs .now .choreo{font-size:6vh}
body.mode-obs .now .song{font-size:2.6vh;margin-top:.3vh}
body.mode-obs .progress{margin:1vh 0 0;width:100%}
body.mode-obs .progress .bar{height:.5vh}
body.mode-obs .progress .remaining{font-size:1.8vh}
body.mode-obs .next{margin:0;padding-left:3vw;border-left:1px solid var(--line);max-width:34vw}
body.mode-obs .next li{grid-template-columns:1fr auto;padding:0;border:0}
body.mode-obs .next .num{display:none}
body.mode-obs .next .choreo,body.mode-obs .next li:first-child .choreo{font-size:3.6vh}
body.mode-obs .next .song{font-size:1.9vh}
body.mode-obs .eta{font-size:1.7vh}
body.mode-obs .played{display:none!important}