/* ============================================================= *
 *  Televoto — pagina pubblica (stile POP-ART / fumetto)
 * ============================================================= */

:root {
  --ink: #14110f;
  --paper: #fff7e6;
  --pop-red: #ff2e4d;
  --pop-yellow: #ffd23f;
  --pop-blue: #2d7dff;
  --pop-cyan: #29e7cd;
  --pop-pink: #ff5ea8;
  --pop-green: #23c552;
  --pop-purple: #8338ec;
  --pop-orange: #fb7014;

  --border: 4px;
  --shadow-pop: 6px 6px 0 var(--ink);
  --shadow-pop-sm: 4px 4px 0 var(--ink);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  font-family: "Baloo 2", system-ui, sans-serif;
  color: var(--ink);
  background: var(--pop-blue);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Sfondo pop-art ---------- */
.bg-layer {
  position: fixed; inset: -10%; z-index: -3;
  background: radial-gradient(circle at 50% 42%, #3a8bff 0, #1f5fd6 60%, #164aa8 100%);
}
.bg-halftone {
  position: fixed; inset: -10%; z-index: -2;
  background-image: radial-gradient(rgba(255,255,255,.16) 22%, transparent 23%);
  background-size: clamp(14px, 4vw, 26px) clamp(14px, 4vw, 26px);
  mix-blend-mode: screen; opacity: .7;
}
.bg-rays {
  position: fixed; inset: -20%; z-index: -1;
  background: repeating-conic-gradient(from 0deg at 50% 42%,
    rgba(255,255,255,.06) 0deg 6deg, transparent 6deg 12deg);
  animation: slow-spin 90s linear infinite;
}
@keyframes slow-spin { to { transform: rotate(360deg); } }

/* ---------- Stage & schermate ---------- */
.stage {
  position: relative;
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 1fr);   /* la riga riempie tutta l'altezza visibile */
  justify-items: center;
  align-items: stretch;
  padding: clamp(10px, 2vh, 20px) clamp(14px, 4vw, 28px);
  overflow: hidden;
}
.screen {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 960px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 20px);
  text-align: center;
}
.screen[hidden] { display: none; }

/* ---------- Testi pop ---------- */
.ev-title {
  font-family: "Bangers", cursive;
  font-size: clamp(22px, 6vw, 44px);
  letter-spacing: 2px;
  color: var(--pop-yellow);
  text-transform: uppercase;
  -webkit-text-stroke: clamp(1.5px, .4vw, 3px) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
  transform: rotate(-1.5deg);
}
.big-msg {
  margin: 0;
  font-family: "Bangers", cursive;
  font-weight: 400;
  font-size: clamp(40px, 12vw, 108px);
  line-height: .92;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: clamp(2px, .6vw, 6px) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 clamp(4px, 1vh, 9px) 0 var(--ink);
  transform: rotate(-1deg);
}
.sub  { margin: 0; font-weight: 800; font-size: clamp(15px, 3.4vw, 22px); color: #fff; opacity: .95; }
.sub2 { margin: 0; font-weight: 800; font-size: clamp(14px, 3vw, 20px); color: var(--pop-yellow); }

/* ---------- Schermata ATTESA ---------- */
.waiting { display: flex; gap: 14px; }
.waiting-dot {
  width: clamp(14px, 3.2vw, 22px); aspect-ratio: 1; border-radius: 50%;
  background: var(--pop-yellow); border: 3px solid var(--ink);
  animation: bounce 1.1s infinite ease-in-out;
}
.waiting-dot:nth-child(2) { animation-delay: .18s; background: var(--pop-pink); }
.waiting-dot:nth-child(3) { animation-delay: .36s; background: var(--pop-cyan); }
@keyframes bounce { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-40%); } }

/* ---------- Schermata VOTA ---------- */
.round-head { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vh, 10px); }
.kicker {
  font-family: "Bangers", cursive; font-size: clamp(18px, 4.4vw, 30px);
  letter-spacing: 3px; color: var(--pop-yellow); text-transform: uppercase;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  background: var(--pop-red);
  border: 3px solid var(--ink); border-radius: 999px;
  padding: .1em .8em; box-shadow: var(--shadow-pop-sm);
  transform: rotate(-2deg);
}
.round-title {
  margin: 0;
  font-family: "Bangers", cursive; font-weight: 400;
  font-size: clamp(30px, 8.5vw, 76px); line-height: .95;
  letter-spacing: 1px; text-transform: uppercase; color: #fff;
  -webkit-text-stroke: clamp(2px, .5vw, 5px) var(--ink); paint-order: stroke fill;
  text-shadow: 0 clamp(3px, .7vh, 7px) 0 var(--ink);
  max-width: 14ch;
}

/* countdown ring */
.timer { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.timer small { font-weight: 800; color: #fff; font-size: clamp(11px, 2.4vw, 14px); text-transform: uppercase; letter-spacing: 1px; }
.timer-ring {
  --pct: 100;
  width: clamp(70px, 15vw, 112px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--pop-yellow) calc(var(--pct) * 1%), rgba(0,0,0,.3) 0);
  border: var(--border) solid var(--ink);
  box-shadow: var(--shadow-pop-sm);
  display: grid; place-items: center; position: relative;
}
.timer-ring::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--ink);
}
.timer-num {
  position: relative; z-index: 1;
  font-family: "Bangers", cursive; font-size: clamp(26px, 6vw, 50px); color: var(--ink);
}
.timer-ring.low { animation: ring-pulse .5s infinite alternate; }
.timer-ring.low .timer-num { color: var(--pop-red); }
@keyframes ring-pulse { from { transform: scale(1); } to { transform: scale(1.08); } }

/* tastierino 1..10 */
.pad {
  flex: 1 1 auto;          /* riempie lo spazio verticale rimasto */
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, minmax(0, 1fr));  /* 5 righe uguali, si adattano */
  gap: clamp(6px, 1.2vh, 16px) clamp(10px, 3vw, 18px);
  width: min(92vw, 520px);
  max-height: 74vh;        /* evita bottoni giganti su schermi molto alti/desktop */
  margin: 0 auto;
}
.tap-hint { margin-top: 2px; opacity: .9; }

.vote-btn {
  position: relative;
  display: grid; place-items: center;
  min-height: 0;           /* l'altezza la decide la griglia elastica del .pad */
  font-family: "Bangers", cursive;
  font-size: clamp(30px, 8vw, 62px); line-height: 1;
  color: #fff;
  background: var(--btn-color, var(--pop-red));
  border: var(--border) solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  -webkit-text-stroke: 2px rgba(0,0,0,.5); paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0,0,0,.32);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform .08s ease, box-shadow .08s ease, filter .25s ease, opacity .25s ease;
}
.vote-btn:hover { transform: translate(-1px,-1px); }
.vote-btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.vote-btn.chosen {
  transform: scale(1.06); z-index: 2;
  box-shadow: 0 0 0 6px var(--pop-yellow), var(--shadow-pop);
  filter: saturate(1.2);
}
.vote-btn.dim { opacity: .35; filter: grayscale(.4); }
.pad.locked .vote-btn { cursor: default; pointer-events: none; }

@media (min-width: 620px) {
  .pad {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    width: min(94vw, 880px);
  }
  .vote-btn { font-size: clamp(42px, 6vw, 88px); }
}

/* ---------- Schermata GRAZIE ---------- */
.grazie-burst { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2vh, 18px); }
.grazie {
  margin: 0;
  font-family: "Bangers", cursive; font-weight: 400;
  font-size: clamp(52px, 15vw, 132px); line-height: .9; letter-spacing: 2px;
  text-transform: uppercase; color: var(--pop-yellow);
  -webkit-text-stroke: clamp(3px, .7vw, 7px) var(--ink); paint-order: stroke fill;
  text-shadow: 0 clamp(5px, 1.2vh, 11px) 0 var(--ink);
  transform: rotate(-2deg);
}
.myvote {
  font-family: "Bangers", cursive;
  font-size: clamp(64px, 20vw, 180px); line-height: 1; color: #fff;
  background: var(--pop-red);
  border: clamp(4px, .8vw, 7px) solid var(--ink);
  border-radius: 28px;
  box-shadow: var(--shadow-pop);
  padding: .02em .35em; min-width: 1.6em;
  -webkit-text-stroke: 2px rgba(0,0,0,.4); paint-order: stroke fill;
  transform: rotate(2deg);
}

/* ---------- Schermata CHIUSA ---------- */
.chiusa-msg { color: var(--pop-yellow); }

/* ---------- Connessione persa ---------- */
.conn-lost {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%);
  z-index: 90; font-weight: 800;
  background: var(--pop-red); color: #fff;
  border: 3px solid var(--ink); border-radius: 999px;
  padding: .3em 1em; box-shadow: var(--shadow-pop-sm);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.conn-lost.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bg-rays, .waiting-dot, .timer-ring.low { animation: none; }
}