:root {
  --bg: #121826; --card: #1c2538; --text: #eef1f8; --muted: #97a1b8;
  --alberto: #4f8cff; --carlotta: #ff6fa5; --gold: #ffc83d; --danger: #ff6b6b;
  --radius: 16px;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
html { height: 100%; }
/* min-height (non height): il padding in basso deve restare sotto l'ultimo elemento, sopra la barra fissa */
body { min-height: 100%; }
/* l'animazione di scorrimento sposta #view fuori dal bordo: senza questo il telefono allarga la pagina e la barra fissa salta */
html { overflow-x: hidden; }
body { overflow-x: clip; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
main { max-width: 520px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: 4px 0 16px; text-align: center; }
h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 0 8px; }
button { font: inherit; color: inherit; }

#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex;
  background: #0d121e; border-top: 1px solid #263149;
  padding-bottom: env(safe-area-inset-bottom);
}
#tabs button {
  flex: 1; background: none; border: 0; padding: 10px 0; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; font-size: .75rem; gap: 2px;
}
#tabs button span { font-size: 1.35rem; }
#tabs button.active { color: var(--text); }
#tabs button span { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
#tabs button.active span { transform: translateY(-2px) scale(1.18); }
#tabs { --i: 0; }
#ind {
  position: absolute; top: 0; left: 0; width: 50%; height: 3px; display: flex; justify-content: center; pointer-events: none;
  transform: translateX(calc(var(--i) * 100%)); transition: transform .35s cubic-bezier(.3,1.1,.5,1);
}
#ind::after { content: ""; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
#view.slide-left { animation: slideLeft .32s cubic-bezier(.2,.8,.2,1) both; }
#view.slide-right { animation: slideRight .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes slideLeft { from { opacity: 0; transform: translateX(36px); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-36px); } }

/* grafico */
/* centrato nello spazio tra l'alto e la barra in basso (padding di main 32px + barra 72px) */
.chart-screen {
  min-height: calc(100vh - 104px - env(safe-area-inset-bottom));
  min-height: calc(100dvh - 104px - env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.chart-screen > * { width: 100%; }
/* titolo e sottotitolo in alto; classifica e pulsante ancorati in basso, vicino alla barra */
.chart-bottom { padding-bottom: 4px; }
.chart-screen h1 { margin: 0 0 4px; }
.subtitle { margin: 0 0 8px; text-align: center; color: var(--muted); font-size: .95rem; }
.chart { display: flex; justify-content: center; align-items: flex-end; gap: 28px; height: 340px; padding-top: 16px; }
.col { width: 40%; max-width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.col .trophy { font-size: 2.6rem; line-height: 1; margin-bottom: 4px; animation: bob 1.8s ease-in-out infinite; }
.col .score { font-size: 1.8rem; font-weight: 800; margin-bottom: 4px; }
.col .bar {
  width: 100%; border-radius: 14px 14px 4px 4px; min-height: 8px;
  transition: height .6s cubic-bezier(.2,.8,.2,1);
}
.col.alberto .bar { background: var(--alberto); }
.col.carlotta .bar { background: var(--carlotta); }
.col .name { margin-top: 10px; font-weight: 700; font-size: 1.1rem; padding: 4px 12px; border-radius: 999px; }
.col.winner .bar { background: linear-gradient(180deg, #ffe38a, var(--gold)); box-shadow: 0 0 28px rgba(255,200,61,.55); }
.col.winner .score { color: var(--gold); }
.col.winner .name { background: var(--gold); color: #1a1a1a; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.status { text-align: center; color: var(--muted); margin-top: 14px; }
.cta {
  display: block; width: 100%; margin-top: 22px; padding: 16px; border: 0; border-radius: var(--radius);
  background: var(--gold); color: #1a1a1a; font-weight: 800; font-size: 1.1rem;
}

/* selezione */
.who { display: flex; gap: 8px; }
.who button {
  flex: 1; padding: 12px; border-radius: var(--radius); border: 2px solid #2b3752; background: var(--card); font-weight: 700;
}
.who button.sel.alberto { border-color: var(--alberto); background: rgba(79,140,255,.2); }
.who button.sel.carlotta { border-color: var(--carlotta); background: rgba(255,111,165,.2); }
.chore {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: var(--card); border: 0; border-radius: var(--radius); padding: 14px; margin-bottom: 8px; text-align: left;
}
.chore:active { transform: scale(.98); }
.chore .n { flex: 1; }
.chore small { display: block; color: var(--muted); }
.pts { background: #2b3752; border-radius: 999px; padding: 4px 10px; font-weight: 800; white-space: nowrap; }
.new { color: var(--gold); background: none; border: 2px dashed #3a4868; border-radius: var(--radius); width: 100%; padding: 14px; margin-top: 16px; font-weight: 700; }

/* form */
form.card { background: var(--card); border-radius: var(--radius); padding: 16px; margin-top: 12px; display: grid; gap: 14px; }
form label { display: grid; gap: 6px; color: var(--muted); font-size: .9rem; }
form input[type=text], form select {
  font: inherit; padding: 12px; border-radius: 12px; border: 1px solid #2b3752; background: #0d121e; color: var(--text);
}
form label.check { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 1rem; }
form input[type=checkbox] { width: 22px; height: 22px; }
.row { display: flex; gap: 8px; }
.row button { flex: 1; padding: 14px; border-radius: 12px; border: 0; font-weight: 700; background: #2b3752; }
.row button.primary { background: var(--gold); color: #1a1a1a; }

/* impostazioni */
#gear, #back {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 10; width: 42px; height: 42px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--muted);
}
#back { right: auto; left: 12px; color: var(--text); }
#gear:active, #back:active { transform: scale(.92); }
.row button.danger { background: var(--danger); color: #fff; }

/* pop-up di conferma faccenda */
#sheet { position: fixed; inset: 0; background: rgba(5,8,15,.7); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; animation: fade .2s both; }
.dialog {
  width: 100%; max-width: 420px; background: var(--card); border-radius: 24px; padding: 22px 18px 18px;
  display: grid; gap: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: pop .3s cubic-bezier(.2,.9,.3,1.2) both;
}
.dialog h3 { margin: 0; text-align: center; font-size: 1.2rem; line-height: 1.3; }
.dialog .field-l { display: grid; gap: 6px; color: var(--muted); font-size: .9rem; }
.dialog input[type=date] { display: block; width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; min-height: 48px; font: inherit; padding: 12px; border-radius: 12px; border: 1px solid #2b3752; background: #0d121e; color: var(--text); color-scheme: dark; }
.dialog input[type=text], .dialog select {
  display: block; width: 100%; min-width: 0; min-height: 48px; font: inherit; padding: 12px; border-radius: 12px;
  border: 1px solid #2b3752; background: #0d121e; color: var(--text); color-scheme: dark; outline: none;
}
.dialog input[type=text]:focus, .dialog select:focus, .dialog input[type=date]:focus { border-color: var(--gold); }
.bonus { background: #121a2b; border-radius: 16px; overflow: hidden; }
.brow {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; border: 0; border-bottom: 1px solid #263149;
  background: none; color: var(--text); font: inherit; text-align: left; transition: background .2s, color .2s;
}
.brow:last-child { border-bottom: 0; }
.brow span { flex: 1; }
.brow b { color: var(--muted); transition: color .2s; }
.brow.tog { cursor: pointer; }
.brow.tog:active { filter: brightness(1.15); }
.brow.on { background: rgba(255,200,61,.18); }
.brow.on b { color: var(--gold); }
.confirm-note { margin: 0; text-align: center; color: var(--muted); font-size: .9rem; }
.total { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; font-weight: 700; }
.total-n { font-size: 2.4rem; font-weight: 800; color: var(--gold); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.94); } }

/* login */
.login-title { margin-top: 36px; animation: rise .6s both; }
.login-sub { text-align: center; color: var(--muted); margin: -6px 0 22px; animation: rise .6s .1s both; }
.who-big { display: flex; gap: 14px; }
.pbtn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 10px;
  background: var(--card); border: 2px solid #2b3752; border-radius: 22px; font-weight: 800; font-size: 1.15rem;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s, box-shadow .35s, border-color .35s, background .35s;
  animation: rise .6s both;
}
.pbtn:nth-child(2) { animation-delay: .12s; }
.pbtn .av {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem;
  background: #2b3752; transition: background .35s, color .35s, box-shadow .35s;
}
.pbtn.alberto.sel { --c: var(--alberto); border-color: var(--alberto); background: rgba(79,140,255,.16); box-shadow: 0 0 34px rgba(79,140,255,.6); transform: scale(1.04); }
.pbtn.carlotta.sel { --c: var(--carlotta); border-color: var(--carlotta); background: rgba(255,111,165,.16); box-shadow: 0 0 34px rgba(255,111,165,.6); transform: scale(1.04); }
.pbtn.sel .av { background: var(--c); color: #fff; box-shadow: 0 0 22px var(--c); }
.pbtn.dim { opacity: .35; transform: scale(.94); }
.slot { min-height: 20px; }
.token-card { --c: var(--alberto); animation: cardIn .45s cubic-bezier(.2,.9,.3,1.2) both; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.token-card.carlotta { --c: var(--carlotta); }
.token-card.shake { animation: shake .4s; }
.token-card .field { position: relative; }
.token-card input {
  width: 100%; font: inherit; font-size: 1.05rem; letter-spacing: .04em; color: var(--text);
  background: #0d121e; border: 2px solid #2b3752; border-radius: 14px; padding: 14px 48px 14px 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.token-card input::placeholder { color: #5a6580; letter-spacing: 0; }
.token-card input:focus { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.token-card .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 1.2rem; padding: 10px; opacity: .6; }
.token-card .err { color: var(--danger); font-size: .9rem; min-height: 1.2em; }
.token-card .go {
  padding: 15px; border: 0; border-radius: 14px; font-weight: 800; font-size: 1.05rem; color: #fff;
  background: var(--c); box-shadow: 0 6px 22px color-mix(in srgb, var(--c) 45%, transparent);
}
.token-card .go:disabled { opacity: .6; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.96); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* storico */
.h { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 18px; padding: 12px 12px 12px 14px; margin-bottom: 8px; }
.h { padding-left: 16px; }
.h .n { flex: 1; min-width: 0; }
.h .ttl { display: block; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.h small { display: block; margin-top: 3px; font-weight: 600; }
.h.alberto small { color: var(--alberto); }
.h.carlotta small { color: var(--carlotta); }
/* punti ed eliminazione: due cerchi identici */
.h .pts {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  background: rgba(255,200,61,.16); color: var(--gold); font-size: 1rem; font-weight: 800; line-height: 1;
  /* centra il numero sull'altezza reale delle cifre, non sull'altezza di riga del font */
  text-box: trim-both cap alphabetic;
}
@supports not (text-box: trim-both cap alphabetic) { .h .pts { padding-bottom: 2px; } }
.h .del {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,107,107,.14); color: var(--danger); transition: background .2s, transform .15s;
}
.h .del:active { background: rgba(255,107,107,.3); transform: scale(.9); }
/* schermi piccoli: cerchi più compatti per lasciare spazio al titolo */
@media (max-width: 400px) {
  .h { gap: 8px; padding: 10px 10px 10px 14px; }
  .h .pts, .h .del { width: 38px; height: 38px; }
  .h .pts { font-size: .95rem; }
}
.empty { text-align: center; color: var(--muted); padding: 40px 0; }

#toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: #fff; color: #111; padding: 10px 18px; border-radius: 999px; font-weight: 700; opacity: 0; pointer-events: none;
  transition: .25s; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }