/* Circle Clicker. Design system: docs/02-ux.md sez. 5 (v2, tema scuro). Nessuno stile inline: tutto qui (CSP style-src self). */
:root {
  --bg: #0B1020;
  --bg-2: #141C3A;
  --surface: #1E293B;
  --glass: rgba(30, 41, 59, 0.62);
  --border: rgba(148, 163, 184, 0.24);
  --text: #F1F5F9;
  --text-muted: #CBD5E1;
  --accent: #FACC15;
  --accent-2: #22D3EE;
  --on-accent: #0B1020;
  --danger: #F87171;
  --success: #4ADE80;
  --focus: #38BDF8;
  --gold: #FACC15;
  --silver: #E2E8F0;
  --bronze: #FDBA74;
  --radius: 8px;
  --radius-lg: 16px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hud-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(34, 211, 238, 0.12), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(250, 204, 21, 0.08), transparent 55%),
    linear-gradient(160deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* Focus sempre visibile */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Layout pagine non-gioco */
.center {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--s4) var(--s3) 48px;
}
.stack { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
h1 { margin: 0; line-height: 1.1; }
.title {
  font-size: 48px; font-weight: 800; letter-spacing: -.02em; text-align: center;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { margin: 0; color: var(--text-muted); text-align: center; }
.hint { margin: 0; font-size: 14px; color: var(--text-muted); }

/* Pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 120px; padding: 0 var(--s4);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  border-radius: var(--radius); border: 1px solid var(--border);
  color: var(--text); background: rgba(255, 255, 255, 0.04);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover { background: rgba(255, 255, 255, 0.10); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  color: var(--on-accent); border-color: transparent;
  background: linear-gradient(135deg, #FDE047, var(--accent) 55%, #F59E0B);
  box-shadow: 0 6px 24px rgba(250, 204, 21, 0.28);
}
.btn-primary:hover { background: linear-gradient(135deg, #FEF08A, #FACC15 55%, #FBBF24); }
.btn-lg { min-height: 56px; min-width: 200px; font-size: 20px; }
.btn[disabled] { opacity: .65; cursor: not-allowed; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); justify-content: center; }

/* Card / pannello */
.card, .panel {
  width: 100%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.card { padding: var(--s4); }
.panel { max-width: 560px; padding: var(--s5) var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; animation: enter .28s ease both; }
.panel h1 { font-size: 32px; }
.panel .lead { margin: 0; font-size: 18px; }
.final-label { margin: 0; color: var(--text-muted); }
.final-score {
  margin: 0; font-size: 64px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--accent); text-shadow: 0 0 28px rgba(250, 204, 21, 0.45);
}
.card h2 { margin: 0 0 var(--s3); font-size: 20px; display: flex; align-items: baseline; gap: var(--s2); }
.card h2 small { font-size: 14px; font-weight: 400; color: var(--text-muted); }

/* Form */
form { width: 100%; max-width: 380px; text-align: left; display: flex; flex-direction: column; gap: var(--s2); }
label { font-weight: 600; }
.field { position: relative; }
.field input {
  width: 100%; min-height: 44px; padding: 0 64px 0 var(--s3);
  font: inherit; color: var(--text); background: rgba(11, 16, 32, 0.7);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.field input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.field input:disabled { opacity: .6; }
.counter { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--danger); font-weight: 700; }
.error { margin: 0; color: var(--danger); font-weight: 600; font-size: 14px; }
.banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s3); border-radius: var(--radius); text-align: left; width: 100%;
}
.banner p { margin: 0; }
.banner-error { background: rgba(248, 113, 113, 0.12); border: 1px solid var(--danger); color: var(--text); }
.banner-error::before { content: "!"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--danger); color: var(--on-accent); font-weight: 800; text-align: center; line-height: 22px; }
.banner-error p { flex: 1; }
.banner .btn { min-height: 36px; min-width: 96px; padding: 0 var(--s3); }
.success { margin: 0; font-size: 20px; font-weight: 700; color: var(--success); }
.success::before { content: "\2713\00a0"; }

/* Classifica */
.board-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-variant-numeric: tabular-nums; }
.board-table th { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: 0 var(--s2) var(--s1); }
.board-table td { padding: 8px; background: rgba(255, 255, 255, 0.04); }
.board-table td:first-child { border-radius: var(--radius) 0 0 var(--radius); width: 56px; }
.board-table td:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.board-table .num { text-align: right; }
.board-table th.num { text-align: right; }
.board-table .name { overflow-wrap: anywhere; }
.board-table .date { color: var(--text-muted); white-space: nowrap; }
.board-table tr.top td { background: rgba(255, 255, 255, 0.07); font-weight: 600; }
.board-table tr.hl td { background: rgba(250, 204, 21, 0.18); box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.board-table tr.hl td:first-child { box-shadow: inset 2px 0 0 var(--accent), inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.board-table tr.hl td:last-child { box-shadow: inset -2px 0 0 var(--accent), inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-weight: 800; font-size: 14px;
  color: var(--on-accent); background: rgba(255, 255, 255, 0.12);
}
.medal.m1 { background: radial-gradient(circle at 30% 30%, #FEF08A, var(--gold)); box-shadow: 0 0 14px rgba(250, 204, 21, .5); }
.medal.m2 { background: radial-gradient(circle at 30% 30%, #fff, var(--silver)); box-shadow: 0 0 12px rgba(226, 232, 240, .35); }
.medal.m3 { background: radial-gradient(circle at 30% 30%, #FED7AA, var(--bronze)); box-shadow: 0 0 12px rgba(253, 186, 116, .35); }
.medal.plain { color: var(--text); }
.tu { margin-left: var(--s2); padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--on-accent); background: var(--accent); }
.board-msg { margin: 0; padding: var(--s4) 0; text-align: center; color: var(--text-muted); }
.skeleton { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s2); }
.skeleton span { display: block; height: 38px; border-radius: var(--radius); background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* Partita */
body.game { overflow: hidden; height: 100vh; }
.hud {
  position: fixed; top: 0; left: 0; right: 0; height: var(--hud-h); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s4);
  background: rgba(30, 41, 59, 0.85); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; user-select: none;
}
.hud span.label { font-weight: 500; font-size: 20px; color: var(--text-muted); margin-right: var(--s2); }
.hud b { display: inline-block; min-width: 2ch; text-align: right; }
.hud-time b.warn { color: var(--danger); font-weight: 900; }
.hud-time b.pulse { animation: pulse 1s ease-in-out infinite; }
.hud-score b.bump { animation: bump .14s ease-out; }
#arena { position: fixed; top: var(--hud-h); left: 0; right: 0; bottom: 0; overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; }
.circle, .ghost {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FEF08A, var(--accent) 55%, #EAB308);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--text), 0 0 26px 6px rgba(250, 204, 21, 0.5);
  will-change: transform; pointer-events: none;
}
.ghost { animation: pop .16s ease-out forwards; }
.ripple {
  position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  border: 3px solid var(--danger); opacity: .9; pointer-events: none;
  animation: ripple .22s ease-out forwards;
}
.small-overlay { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s3); text-align: center; background: rgba(11, 16, 32, 0.92); }
.small-overlay p { margin: 0; font-size: 24px; font-weight: 700; }

@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes bump { from { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes pop { from { transform: var(--t) scale(1); opacity: 1; } to { transform: var(--t) scale(1.5); opacity: 0; } }
@keyframes ripple { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

@media (max-width: 520px) {
  .title { font-size: 36px; }
  .final-score { font-size: 52px; }
  .board-table .date { display: none; }
  .hud { font-size: 22px; padding: 0 var(--s3); }
}

/* Movimento ridotto: niente pop, pulsazioni, shimmer, transizioni. Il moto del cerchio resta (meccanica di gioco). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .panel, .skeleton span, .hud-time b.pulse, .hud-score b.bump { animation: none !important; }
  .ghost { display: none; }
  .ripple { animation: none; opacity: .9; }
  .btn:hover { transform: none; }
}

/* Layout varianti S3 (al posto degli stili inline del mock) */
.stack-col { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.left { width: 100%; text-align: left; }
.card h2 small { margin-left: var(--s2); }