:root {
  --sfondo: #141414;
  --scheda: #141414;
  --bordo: #262626;
  --testo: #ededed;
  --tenue: #8e8e93;
  --accento: #5ac8fa;
  --avviso: #ff9f0a;
  --evidenza: rgba(90, 200, 250, 0.18);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #0b0b0b;
  color: var(--testo);
  font: 16px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
}

.scheda {
  width: min(100%, 520px);
  background: var(--scheda);
  border: 1px solid var(--bordo);
  border-radius: 24px;
  padding: 18px 20px 14px;
}

.cifre {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.grande { font-size: clamp(30px, 9vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.medio { font-size: clamp(17px, 4.6vw, 22px); font-weight: 600; }
.piccolo { font-size: 12px; }
.tenue { color: var(--tenue); }
.accento { color: var(--accento); }
.avviso { color: var(--avviso) !important; }

.riga1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.riga1.sinistra { justify-content: flex-start; }
.riga1 .p { font-size: 34px; font-weight: 900; line-height: 1; }

.riga2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
}

.riga {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 10px;
}
#vuota .riga:first-of-type { margin-top: 18px; }

.striscia {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 16px;
}
.cella {
  display: flex;
  flex-direction: column;
  padding: 3px 5px;
  border-radius: 6px;
  min-width: 0;
}
.cella .e { font-size: 13px; }
.cella .o { font-size: 11px; color: var(--tenue); }
.cella.passato { opacity: 0.35; }
.cella.corrente { background: var(--evidenza); }
.cella.corrente .e, .cella.corrente .o { color: var(--accento); font-weight: 700; }

#nota { margin-top: 14px; min-height: 1em; }
#caricamento { margin: 0; }

@media (max-width: 380px) {
  .scheda { padding: 14px 14px 10px; border-radius: 20px; }
  .cella .e { font-size: 12px; }
}