:root {
  --bg: #10121a;
  --text: #e9ebf3;
  --muted: #8a90a6;
  --line: #2a2f40;
  --panel: rgba(7, 8, 12, .72);
  --danger: #ff3d3d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  user-select: none;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
body.playing canvas { cursor: none; }

/* HUD */
#hud {
  position: fixed;
  top: 14px;
  left: 20px;
  right: 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
  font-size: 14px;
  letter-spacing: .08em;
  text-shadow: 0 1px 4px #000;
}
#hud[hidden] { display: none; }

/* Salute: una barra unica; il pezzo perso resta un attimo, lampeggia di
   rosso e si ritira. */
#health { display: flex; align-items: center; gap: 10px; }
#health-bar {
  position: relative;
  width: 220px;
  height: 8px;
  border-radius: 4px;
  background: #1c2030;
  box-shadow: inset 0 0 0 1px #262b3c;
  overflow: hidden;
}
#health-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, .5);
  transition: width .12s ease-out, background .3s;
}
#health-bar.low #health-fill { background: #ff8a8a; animation: low 1s ease-in-out infinite; }
@keyframes low { 50% { opacity: .55; } }
#health-bar.heal #health-fill { animation: heal 1.2s ease-out; }
@keyframes heal { 0%, 30% { background: #9fdcff; box-shadow: 0 0 16px #73cbff; } }
.loss {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--danger);
  transform-origin: left;
  animation: loss .75s ease-in forwards;
}
@keyframes loss {
  0%   { background: #fff; transform: scaleX(1); }
  12%  { background: var(--danger); box-shadow: 0 0 12px var(--danger); }
  45%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: .6; }
}
#health-text { min-width: 3em; font-variant-numeric: tabular-nums; }

#lvl { display: flex; align-items: center; gap: 12px; }
#lvl-name { text-transform: uppercase; }
#bar {
  width: 200px;
  height: 4px;
  background: #1c2030;
  border-radius: 2px;
  overflow: hidden;
}
#bar-fill {
  height: 100%;
  background: #8a90a6;
  transform-origin: left;
  transform: scaleX(0);
}
#time { min-width: 3.2em; font-variant-numeric: tabular-nums; }

#score {
  justify-self: end;
  font-size: 20px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
#score.bump { animation: bump .25s ease-out; }
@keyframes bump { 0% { transform: scale(1.25); color: #fff; } }
/* Ogni 1000 punti: animazione più marcata (stessa specificità di .bump,
   ma dichiarata dopo, quindi vince quando serve). */
#score.milestone { animation: milestone .6s ease-out; font-weight: 400; font-size: calc(20px + 0.5vw); }
@keyframes milestone {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.7); color: #ffd166; text-shadow: 0 0 22px rgba(255, 209, 102, .8); }
  100% { transform: scale(1); color: var(--text); text-shadow: 0 1px 4px #000; }
}

#fps {
  position: fixed;
  bottom: 10px;
  left: 12px;
  font: 12px ui-monospace, Consolas, monospace;
  color: var(--muted);
  pointer-events: none;
}
#fps[hidden] { display: none; }

/* Messaggi: nuovo livello, bonus, complimenti, avvisi. Tutti qui, nello
   stesso punto e della stessa misura: cambia solo il colore. Non si
   sovrappongono mai, perché ne passa uno alla volta (la fila e i tempi
   stanno in main.js e in CONFIG.messages di js/setup/config.js).
   --msg-fade lo imposta main.js leggendo CONFIG.messages.fade: la durata
   dell'animazione e quella dei tempi restano così un valore solo. */
#message {
  position: fixed;
  top: 36%;
  left: 0;
  right: 0;
  font-size: clamp(1.875rem, 0.739rem + 5.68vw, 5rem);
  font-weight: 300;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(.7);
  text-shadow: 0 0 22px currentColor, 0 0 52px currentColor;
  transition: opacity var(--msg-fade, .18s) ease-out,
              transform var(--msg-fade, .18s) cubic-bezier(.2, 1.7, .3, 1);
}
#message.show { opacity: 1; transform: scale(1); }
/* L'unica differenza fra un tipo di messaggio e l'altro. */
#message.level  { color: var(--text); }
#message.bonus  { color: #9fdcff; }
#message.praise { color: #ffd166; }
#message.other  { color: #96f2c0; }

/* Lampo dietro al testo, un istante, per dare più "botto" all'ingresso.
   currentColor prende il colore del tipo di messaggio: un posto solo da
   cambiare se se ne aggiunge un altro. */
#message::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  filter: blur(6px);
  z-index: -1;
}
#message.show::before { animation: message-flash .5s ease-out; }
@keyframes message-flash {
  0%   { opacity: .55; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(9); }
}

/* Guida per l'esplorazione: resta a schermo finché non si esce
   dall'arena (non svanisce da sola come i messaggi), con una freccia che
   ruota verso il lato più vicino. */
#explore-hint {
  position: fixed;
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 20px;
  pointer-events: none;
  animation: explore-pulse 1.8s ease-in-out infinite;
}
#explore-hint[hidden] { display: none; }
#explore-arrow {
  display: inline-block;
  font-size: 16px;
  color: #9fdcff;
  transition: transform .25s ease-out;
}
@keyframes explore-pulse { 50% { opacity: .6; } }

/* Schermate */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  background: var(--panel);
  backdrop-filter: blur(3px);
  text-align: center;
  animation: fade .3s ease-out;
}
.screen[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }

h1 {
  margin: 0;
  font-size: clamp(36px, 7vw, 72px);
  font-weight: 200;
  letter-spacing: .35em;
  text-transform: uppercase;
  padding-left: .35em; /* compensa la spaziatura dopo l'ultima lettera */
}
h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.sub { margin: 0 0 12px; color: var(--muted); letter-spacing: .1em; line-height: 1.7; }
.big-score { margin: 0; font-size: 40px; font-weight: 300; font-variant-numeric: tabular-nums; }
.controls { display: flex; gap: 48px; min-height: 172px; flex-wrap: wrap; justify-content: center; margin: 10px 0 18px; text-align: left; }
.controls p { margin: 18px 0; font-size: 14px; display: flex; align-items: center; gap: 8px; min-height: 26px; }

kbd {
  font: inherit;
  font-size: 12px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #11131b;
}
/* I file SVG non hanno lo stesso margine: le levette hanno un cerchio di
   18 su 24, i tasti riempiono tutto. Misure diverse, stessa grandezza a
   vista, e una colonna fissa perché il testo resti in fila. */
.icon { display: inline-flex; width: 36px; justify-content: center; align-items: center; }
img.pad.stick { width: 36px; height: 36px; }
img.pad.btn { width: 27px; height: 27px; }
img.pad.small { width: 22px; height: 22px; vertical-align: -6px; }

/* Si mostrano solo i comandi del dispositivo usato per ultimo. */
body.dev-pad .only-kbm, body:not(.dev-pad) .only-pad { display: none !important; }

/* Selettore della difficoltà */
.diff { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.diff button {
  font: inherit;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.diff button:hover { color: var(--text); }
.diff button.on { color: #07080c; background: #fff; border-color: #fff; }
.diff button[data-diff="pianesani"].on { background: #9fdcff; border-color: #9fdcff; }
.diff-arrow { color: var(--muted); }
.diff-info { margin: 0; font-size: 13px; color: var(--muted); letter-spacing: .08em; min-height: 1.2em; }

/* Stessa misura per i due ruoli (azione principale / modifica): quello
   che cambia è solo colore e riempimento, così non sono uno più piccolo
   dell'altro sullo schermo. */
button.primary, button.secondary {
  font: inherit;
  font-size: 15px;
  letter-spacing: .25em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 12px 40px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
button.primary {
  color: #07080c;
  background: #fff;
  border: 0;
  box-shadow: 0 0 24px rgba(255, 255, 255, .25);
}
button.primary:hover { transform: scale(1.05); box-shadow: 0 0 34px rgba(255, 255, 255, .4); }
button.secondary {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
}
button.secondary:hover { border-color: var(--muted); transform: scale(1.03); }

/* Selezione col pad (frecce o levetta): un anello, perché il focus
   nativo del browser non è affidabile quando lo diamo via script. */
button.primary.focused, button.secondary.focused {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 0 26px rgba(255, 255, 255, .3);
}
button.secondary.focused { border-color: #fff; }

.hint { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.record { margin: 0; font-size: 13px; color: var(--muted); min-height: 1em; }