/* vortexgames.dev: nero come il logo Vortex, con il ciano e il magenta delle sue linee al neon (17/10, richiesta
   dell'utente). Un solo tema, scuro. */
:root {
  --bg: #000; --panel: #07090d; --line: #1a2230; --fg: #e8ecf4; --muted: #7d8799;
  --cyan: #3fd8ff; --magenta: #c46bff; --cream: #f4f1ff; --red: #ff7a9a; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--fg); font: 16px/1.5 "Space Grotesk", system-ui, sans-serif;
  min-height: 100vh; padding-inline: 16px;
}
main { max-width: 760px; margin: 0 auto; padding-block: 40px; }
main.wide { max-width: 1100px; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: .04em; margin: 0 0 .3em; color: var(--cream); text-wrap: balance; }
h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .14em; color: var(--cyan); margin-top: 2.2em; }
p { max-width: 62ch; }
a { color: var(--cyan); }
.small { font-size: .88rem; color: var(--muted); }

/* home: logo, icona del gioco, contatore */
.home { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; padding-block: 32px; }
.home .logo { width: min(320px, 70vw); max-width: 100%; height: auto; display: block; }
.game { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; color: var(--fg); }
.game img {
  width: 132px; height: 132px; border-radius: 28px; display: block;
  box-shadow: 0 0 0 1px var(--line), 0 0 28px rgba(196, 107, 255, .25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.game:hover img, .game:focus-visible img { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 1px var(--magenta), 0 0 36px rgba(63, 216, 255, .45); }
.game span { font-weight: 700; letter-spacing: .12em; font-size: .95rem; }
.game:focus-visible { outline: none; }
.counter { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; min-height: 1.5em; }
.counter b { color: var(--cream); font-weight: 700; }

/* pagina della password */
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: 0 0 40px rgba(63, 216, 255, .08); }
.login { max-width: 400px; margin: 14vh auto 0; text-align: center; }
.login img { width: 96px; height: 96px; border-radius: 22px; }
.login form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; justify-content: center; }
input[type=password] {
  flex: 1 1 200px; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: #000; color: var(--fg); font: inherit; text-align: center; letter-spacing: .2em;
}
input[type=password]:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(63, 216, 255, .2); }
button {
  padding: 12px 22px; border-radius: 10px; border: 1px solid var(--magenta); background: transparent; color: var(--cream);
  font: 700 1rem/1 inherit; font-family: inherit; cursor: pointer; letter-spacing: .08em;
}
button:hover { background: rgba(196, 107, 255, .15); box-shadow: 0 0 18px rgba(196, 107, 255, .35); }
.err { color: var(--red); }

/* statistiche */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; }
.tiles div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tiles b { display: block; font-size: 1.7rem; color: var(--cream); font-variant-numeric: tabular-nums; }
.tiles span { color: var(--muted); font-size: .9rem; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }