/* Commodore 64 theme -------------------------------------------------------
   Classic C64: light-blue text on a blue screen, wrapped in a lighter blue
   border, with a subtle CRT scanline overlay. Pixel-mono feel via a monospace
   stack, uppercase headings and chunky blocks. No external fonts/CDN. */

:root {
  --c64-border: #7b71da;   /* outer border (light blue) */
  --c64-screen: #4038c0;   /* inner screen (blue) */
  --c64-ink: #a8b0ff;      /* light-blue text */
  --c64-bright: #ffffff;   /* highlight */
  --c64-dim: #8078d8;      /* muted */
  --c64-green: #7be07b;    /* success */
  --c64-amber: #ffcf5a;    /* warning */
  --c64-red: #ff6f6f;      /* error */
  --c64-font: "Lucida Console", "Consolas", "Courier New", monospace;
  /* Chunky 90s-arcade display face for the wordmark / banners (system fonts,
     no CDN). */
  --c64-display: "Impact", "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c64-border);
  color: var(--c64-ink);
  font-family: var(--c64-font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  -webkit-font-smoothing: none;
}

/* CRT scanlines overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.12) 0px,
    rgba(0, 0, 0, 0.12) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 9999;
}

.screen {
  max-width: 820px;
  margin: 24px auto;
  padding: 22px;
  background: var(--c64-screen);
  border: 14px solid var(--c64-border);
  border-radius: 10px;
  min-height: calc(100vh - 48px);
  box-shadow: 0 0 0 3px #2b2599 inset;
}

h1, h2, h3 {
  text-transform: uppercase;
  color: var(--c64-bright);
  letter-spacing: 0.12em;
  margin: 0 0 0.4em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }

.banner {
  border: 2px solid var(--c64-ink);
  padding: 10px 14px;
  margin-bottom: 20px;
  text-align: center;
}

.banner .logo {
  color: var(--c64-bright);
  font-family: var(--c64-display);
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

/* sull'aia wordmark: 90s-arcade italic, skewed, hard offset shadow.
   Scoped under .banner so it outranks the generic `.banner .logo` rule. */
.banner .logo.brand-mark {
  font-family: var(--c64-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.875rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--c64-bright);
  text-shadow: 3px 3px 0 #22d3ee, 6px 6px 0 rgba(0, 0, 0, 0.35);
  transform: skewX(-6deg);
  padding: 4px 0;
}

/* Language toggle (fixed top-right) */
.lang-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  gap: 4px;
}
.lang-toggle button {
  margin: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  background: var(--c64-screen);
  color: var(--c64-ink);
  border: 2px solid var(--c64-ink);
  font-family: var(--c64-font);
  font-size: 0.8rem;
  font-weight: bold;
}
.lang-toggle button.active { background: var(--c64-ink); color: #201b7a; }
.lang-toggle button:hover { background: var(--c64-bright); color: #201b7a; }

.ready { color: var(--c64-ink); margin: 4px 0 0; }

/* Pixel-art dance-floor scene at the foot of the homepage */
.hero {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 24px auto 4px;
  image-rendering: pixelated;
}

.cursor::after {
  content: "\2588";
  animation: blink 1s steps(1) infinite;
  color: var(--c64-bright);
}
@keyframes blink { 50% { opacity: 0; } }

a { color: var(--c64-bright); }

/* Event / ticket cards */
.card {
  border: 3px solid var(--c64-bright);
  padding: 14px 16px;
  margin: 0 0 20px;
  background: #221c85;               /* deep panel: separates box from screen */
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
}
.card h2 { margin-top: 0; }
.card .meta { color: var(--c64-ink); font-size: 0.85rem; }
.card.past { opacity: 0.6; }

.spots { color: var(--c64-green); }
.spots.full { color: var(--c64-red); }

.pill {
  display: inline-block;
  border: 1px solid var(--c64-ink);
  padding: 1px 8px;
  font-size: 0.75rem;
  text-transform: uppercase;
}
.pill.on { color: var(--c64-green); border-color: var(--c64-green); }
.pill.off { color: var(--c64-amber); border-color: var(--c64-amber); }

/* Forms */
label { display: block; margin: 14px 0 4px; text-transform: uppercase; font-size: 0.8rem; }
input, textarea {
  width: 100%;
  background: #1b1568;
  color: var(--c64-bright);
  border: 3px solid var(--c64-ink);
  padding: 10px;
  font-family: var(--c64-font);
  font-size: 1rem;
  letter-spacing: 0.06em;
}
input:focus, textarea:focus { outline: none; border-color: var(--c64-bright); }

/* Opt-in checkbox row (overrides the full-width input default) */
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  text-transform: none;
  font-size: 0.9rem;
  cursor: pointer;
}
.check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  padding: 0;
  accent-color: var(--c64-green);
  cursor: pointer;
}
textarea { min-height: 80px; resize: vertical; }

button, .btn {
  display: inline-block;
  margin-top: 16px;
  background: var(--c64-ink);
  color: #201b7a;
  border: none;
  padding: 11px 20px;
  font-family: var(--c64-font);
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--c64-bright); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.secondary { background: transparent; color: var(--c64-ink); border: 2px solid var(--c64-ink); }
button.danger, .btn.danger { color: var(--c64-red); border-color: var(--c64-red); }
button.danger:hover, .btn.danger:hover { background: var(--c64-red); color: #201b7a; }

/* Status messages */
.msg { margin: 14px 0; padding: 10px 12px; border: 2px solid var(--c64-ink); }
.msg.ok { border-color: var(--c64-green); color: var(--c64-green); }
.msg.warn { border-color: var(--c64-amber); color: var(--c64-amber); }
.msg.err { border-color: var(--c64-red); color: var(--c64-red); }
.hidden { display: none !important; }

/* Host announcement box (shown on tickets) */
.announce {
  border: 2px solid var(--c64-amber);
  color: var(--c64-amber);
  background: rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
  margin: 12px 0;
  text-align: left;
  white-space: pre-wrap;
}
.announce::before {
  content: "> ANNUNCIO";
  display: block;
  color: var(--c64-bright);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  margin-bottom: 6px;
}
[data-lang="en"] .announce::before { content: "> ANNOUNCEMENT"; }

/* Ticket */
.ticket {
  border: 3px dashed var(--c64-ink);
  padding: 20px;
  text-align: center;
}
.ticket .qr { margin: 16px auto; max-width: 260px; }
.ticket .qr svg, .ticket .qr img { width: 100%; height: auto; }
.ticket .code {
  font-size: 1.8rem;
  color: var(--c64-bright);
  letter-spacing: 0.4em;
  margin: 8px 0;
}

/* Scanner */
.progress {
  text-align: center;
  border: 2px solid var(--c64-bright);
  color: var(--c64-bright);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}
#video {
  width: 100%;
  max-width: 420px;
  border: 3px solid var(--c64-ink);
  background: #000;
  display: block;
  margin: 0 auto 12px;
}
.result {
  text-align: center;
  padding: 18px;
  border: 3px solid var(--c64-ink);
  margin-top: 16px;
  font-size: 1.1rem;
}
.result.ok { border-color: var(--c64-green); color: var(--c64-green); }
.result.already { border-color: var(--c64-amber); color: var(--c64-amber); }
.result.invalid { border-color: var(--c64-red); color: var(--c64-red); }

/* Layout helpers */
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > * { margin-top: 0; }
.nav { margin-bottom: 18px; font-size: 0.8rem; text-transform: uppercase; }
.nav a { margin-right: 14px; }

/* Host login - fixed bottom-right corner */
.host-login {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--c64-screen);
  color: var(--c64-bright);
  border: 2px solid var(--c64-ink);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  box-shadow: 0 0 0 4px var(--c64-screen);
}
.host-login:hover, .host-login:focus { background: var(--c64-ink); color: #201b7a; outline: none; }

/* One-time welcome blessing beneath the events: slow pulse in, hold ~10s, fade out */
.blessing {
  max-width: 640px;
  margin: 22px auto 6px;
  padding: 0 16px;
  text-align: center;
  color: var(--c64-amber);
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  opacity: 0;               /* hidden until JS decides it's a first open */
}
.blessing.play { animation: blessing 13s ease-in-out forwards; }
@keyframes blessing {
  0%   { opacity: 0; transform: scale(0.94); }
  10%  { opacity: 1; transform: scale(1); }
  82%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .blessing.play { animation: none; opacity: 1; transform: none; }
}
.muted { color: var(--c64-dim); }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--c64-dim); font-size: 0.85rem; }
th { text-transform: uppercase; color: var(--c64-bright); }
.tag-in { color: var(--c64-green); }
.tag-out { color: var(--c64-dim); }