/* ------------------------------------------------------------------
   Ludoverse · prenotazioni
   Colori presi dal sito: prugna #530f64, magenta #9e0069, turchese
   #2ec4c6, ambra #ffc93c. Tipografia Lexend, come ludoverse.it.
------------------------------------------------------------------ */

:root {
  --plum: #530f64;
  --plum-deep: #3d0a4c;
  --magenta: #9e0069;
  --magenta-dark: #820057;
  --ink: #2f2036;
  --heading: #7a1a74;
  --teal: #2ec4c6;
  --teal-deep: #178f95;
  --amber: #ffc93c;
  --paper: #f6f2f7;
  --card: #ffffff;
  --line: #e5dce9;
  --muted: #6d5f76;
  --ok: #1d7f5c;
  --warn: #b26b00;
  --stop: #c0392b;
  --radius: 18px;
  --shadow: 0 6px 18px rgba(47, 32, 54, .08);
}

* { box-sizing: border-box; }

/* L'attributo hidden deve sempre vincere, anche quando l'elemento ha una
   classe che imposta un suo display (es. .event-list usa display:grid,
   che altrimenti avrebbe la meglio sullo stile di default del browser). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Lexend", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}

h1, h2, h3 {
  font-family: "Lexend", sans-serif;
  color: var(--heading);
  line-height: 1.2;
  margin: 0 0 .3em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(28px, 6vw, 40px); font-weight: 700; }
h2 { font-size: clamp(21px, 4vw, 26px); font-weight: 600; }
h3 { font-size: 19px; font-weight: 600; }

a { color: var(--magenta); }

p { margin: 0 0 .8em; }

.muted { color: var(--muted); font-size: 14.5px; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 50; border-radius: 8px; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; }

/* ---------------- Header ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--plum);
  box-shadow: 0 2px 12px rgba(61, 10, 76, .3);
}

.brand { display: flex; align-items: center; }
.brand img { height: 52px; width: auto; display: block; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.site-nav a {
  color: #e8d7ee;
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  padding: 8px 10px;
  border-radius: 10px;
}

.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.site-nav a.on { color: var(--plum-deep); background: var(--teal); font-weight: 600; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.chip-cta { background: var(--teal); border-color: var(--teal); color: var(--plum-deep); font-weight: 600; }

.chip-admin { background: var(--amber); border-color: var(--amber); color: #4a2d00; font-weight: 700; text-decoration: none; }
.chip-admin:hover { background: #f2bb28; color: #4a2d00; }
.chip-admin .chip-dot { background: #4a2d00; }
/* .chip-admin è un <a> dentro <nav class="site-nav">: senza queste due
   regole più specifiche, ".site-nav a { color: #e8d7ee }" (una classe + un
   tag, quindi più "pesante" di ".chip-admin" da sola) vincerebbe comunque
   e il testo tornerebbe quasi bianco, illeggibile sul giallo. */
.site-nav .chip-admin,
.site-nav .chip-admin:hover { color: #4a2d00; }

/* ---------------- Bottoni ---------------- */

.btn, button.btn, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .06s ease, background-color .15s ease;
}

.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--magenta); color: #fff; }
.btn-primary:hover { background: var(--magenta-dark); }
.btn-amber { background: var(--amber); color: #4a2d00; }
.btn-amber:hover { background: #f2bb28; }
.btn-ghost { background: #fff; color: var(--magenta); border: 1px solid var(--line); }
.btn-ghost:hover { background: #fbf6fc; border-color: #d9c8e0; }
.btn-danger { background: #fdeeec; color: var(--stop); border: 1px solid #f6d3cd; }
.btn-small { padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------- Avvisi ---------------- */

.alert {
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0 0;
  font-weight: 500;
  font-size: 15px;
}

.alert-error { background: #fdeeec; color: #8e2a1e; }
.alert-ok { background: #e6f5ee; color: var(--ok); }

.notice {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 6px solid var(--teal);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 18px 0;
  font-size: 13.5px;
}

.notice strong { display: block; margin-bottom: 2px; color: var(--heading); }

/* ---------------- Lista serate ---------------- */

.page-head { padding: 26px 0 6px; }
.page-head p { color: var(--muted); }

.next-card {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 22px;
  padding: 24px;
  margin: 8px 0 26px;
  background:
    radial-gradient(1.5px 1.5px at 18% 24%, rgba(255, 255, 255, .85), transparent),
    radial-gradient(1.5px 1.5px at 72% 16%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.5px 1.5px at 41% 68%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(2px 2px at 88% 58%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.5px 1.5px at 60% 86%, rgba(255, 255, 255, .55), transparent),
    linear-gradient(120deg, var(--plum-deep) 0%, var(--plum) 38%, var(--magenta) 100%);
}

.next-card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, rgba(46, 196, 198, .45), transparent 65%);
}

.next-flag {
  display: inline-block;
  background: var(--amber);
  color: #4a2d00;
  font-weight: 600;
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.next-card h2 { font-size: clamp(24px, 5.5vw, 32px); margin-bottom: 4px; color: #fff; }
.next-when { color: var(--amber); font-weight: 600; font-size: 16px; }
.next-where { color: #e3cdec; font-size: 14.5px; margin-top: 2px; }

.next-stats { display: flex; gap: 20px; margin: 16px 0 18px; position: relative; }
.next-stats b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
.next-stats span { color: #dcc2e6; font-size: 13px; }

.next-card .btn { position: relative; }

.event-list { display: grid; gap: 12px; padding-bottom: 20px; }

.event-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
}

.event-row:hover { border-color: var(--teal); }

.daybox {
  flex: 0 0 auto;
  width: 58px;
  text-align: center;
  background: #f3edf6;
  border-radius: 12px;
  padding: 8px 4px;
}

.daybox b { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--heading); }
.daybox span { font-size: 11.5px; color: var(--muted); }

.event-row h3 { margin: 0; }
.event-row .meta { color: var(--muted); font-size: 14px; }
.event-row .go { margin-left: auto; color: var(--magenta); font-weight: 600; }

/* ---------------- Pagina serata ---------------- */

.event-hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  margin: 18px 0;
  box-shadow: var(--shadow);
}

.back { display: inline-block; margin: 18px 0 0; font-weight: 600; font-size: 14.5px; text-decoration: none; }
.event-hero .when { color: var(--magenta); font-weight: 600; }
.event-hero .where { color: var(--muted); font-size: 14.5px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Più piccoli e con sfondo a contrasto, visto che poggiano sulla carta bianca. */
.hero-actions .btn-hero {
  padding: 6px 10px;
  font-size: 12.5px;
  border-radius: 9px;
  background: var(--plum-deep);
  color: #fff;
  border-color: var(--plum-deep);
}
.hero-actions .btn-hero:hover { background: var(--plum); }

.section { margin: 26px 0; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
}

.section-head h2 { margin: 0; }
.section-count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }

.section.cat-boardgame .section-head { border-color: var(--teal); }
.section.cat-rpg .section-head { border-color: var(--magenta); }
.section.cat-wargame .section-head { border-color: var(--amber); }

.empty {
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 16px;
  color: var(--muted);
  font-size: 14.5px;
}

/* --- carta tavolo --- */

.table-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.table-card.mine { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(46, 196, 198, .3); }
.table-top { display: flex; gap: 12px; align-items: flex-start; }
.table-top h3 { margin: 0 0 3px; }
.table-info { color: var(--muted); font-size: 14px; }
.table-links { margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
.table-notes {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #faf5fb;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.seats { margin-left: auto; text-align: right; flex: 0 0 auto; }
.seats-dots { display: flex; gap: 3px; justify-content: flex-end; margin-bottom: 4px; }
.seat { width: 11px; height: 11px; border-radius: 50%; background: var(--teal-deep); }
.seat.free { background: #e4dae9; }
.seats-label { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.seats.full .seats-label { color: var(--stop); }
.seats.almost .seats-label { color: var(--warn); }

.players { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }

.player {
  background: #f3edf6;
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 14px;
  font-weight: 500;
}

.player small { font-weight: 300; color: var(--muted); margin-left: 4px; }
.player.me { background: var(--amber); color: #4a2d00; }

.table-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* --- fascia presenze --- */

.open-card {
  background: linear-gradient(180deg, #fffbee, #fff);
  border: 1px solid #f1e0ae;
  border-radius: var(--radius);
  padding: 16px;
}

/* --- nuovo tavolo --- */

.new-table {
  background: #fff;
  border: 2px dashed var(--teal);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

/* ---------------- Form ---------------- */

label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 12px; }

input[type=text], input[type=password], input[type=date], input[type=time],
input[type=month], input[type=number], input[type=url], select, textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
}

input:focus, select:focus { border-color: var(--teal); }
textarea { resize: vertical; font-family: inherit; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.suggest-wrap { position: relative; }

.suggest {
  position: absolute;
  z-index: 15;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(47, 32, 54, .18);
  overflow: hidden;
  display: none;
}

.suggest.on { display: block; }

.suggest button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid #f2ebf5;
  padding: 10px 12px;
  font: inherit;
  cursor: pointer;
}

.suggest button:hover, .suggest button.sel { background: #faf5fb; }
.suggest b { font-weight: 600; }
.suggest span { color: var(--muted); font-size: 13px; }

.suggest button.suggest-bgg b::after {
  content: "BGG";
  display: inline-block;
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--teal-deep);
  background: #e3f8f8;
  border-radius: 999px;
  padding: 2px 7px;
  vertical-align: middle;
}

/* ---------------- Statistiche ---------------- */

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 26px; }

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}

.stat b { display: block; font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--heading); }
.stat span { font-size: 13px; color: var(--muted); }

.rank { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #f2ebf5; }
.rank-row:last-child { border-bottom: 0; }
.rank-pos { font-size: 18px; font-weight: 700; color: var(--muted); width: 22px; }
.rank-name { font-weight: 600; }
.rank-bar { flex: 1; height: 8px; background: #f0e8f4; border-radius: 999px; overflow: hidden; }
.rank-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--magenta)); }
.rank-val { font-weight: 600; font-size: 14px; white-space: nowrap; }

/* ---------------- Modali ---------------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(61, 10, 76, .6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 40;
}

.modal.on { display: flex; }

.modal-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow: auto;
}

.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Variante più larga per le modali con liste di righe (titoli/nickname simili
   nel pannello admin): 420px sarebbe troppo stretto per checkbox+testo+input. */
.modal-card-wide { max-width: 760px; }

/* Tasto "ci sono cose da controllare" al posto del popup che si apriva da
   solo: lampeggia leggermente finché non lo si clicca, poi la modale si apre
   normalmente. Il battito si ferma da solo quando il tasto sparisce (cioè
   quando non c'è più nulla da segnalare, dopo un'unione). */
@keyframes pulsaAttenzione {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 21, 118, .45); }
  50%      { box-shadow: 0 0 0 9px rgba(214, 21, 118, 0); }
}
.btn-pulse { animation: pulsaAttenzione 1.7s ease-in-out infinite; }

/* Una card per ogni gruppo simile dentro le modali di unione (titoli/nickname):
   ora che ogni gruppo ha tutti i campi da rivedere, non solo un nome, serve
   un bordo per separarli chiaramente l'uno dall'altro. */
.gruppo-simile {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.gruppo-simile:last-of-type { margin-bottom: 4px; }
.gruppo-simile h3 { margin: 0 0 4px; font-size: 16px; }

/* Mini-form del login: stesso stile di tutti gli altri campi del sito
   (sfondo bianco, bordi standard — vedi le regole generali per input/label
   più sopra), solo con un focus più discreto: un anello morbido invece del
   contorno spesso di default, che qui dentro una modale piccola risultava
   troppo invadente. */
.miniform input:focus {
  border-color: var(--teal);
}
.miniform input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 196, 198, .16);
}

.modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

/* ---------------- Admin ---------------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.5px 1.5px at 75% 20%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(2px 2px at 60% 75%, rgba(255, 255, 255, .7), transparent),
    linear-gradient(140deg, var(--plum-deep), var(--magenta));
}

.login-card { background: #fff; border-radius: 22px; padding: 26px; width: 100%; max-width: 380px; text-align: center; }
.login-card img { width: 110px; margin-bottom: 4px; }
.login-card form { text-align: left; margin-top: 14px; }
.login-card .btn { width: 100%; }
.login-back { display: block; margin-top: 14px; color: #e8d7ee; text-decoration: none; font-size: 14px; text-align: center; }

.tabs { display: flex; gap: 6px; margin: 18px 0; flex-wrap: wrap; align-items: center; }

.tabs a {
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 14.5px;
}

.tabs a.on { background: var(--plum); color: #fff; border-color: var(--plum); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }

.admin-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f2ebf5; flex-wrap: wrap; }
.admin-row:last-child { border-bottom: 0; }
.admin-row .grow { flex: 1; min-width: 180px; }
.admin-row .date { font-weight: 700; color: var(--heading); }
.admin-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--magenta); cursor: pointer; }

.catalogo-unifica-bar {
  background: #faf5fb;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 4px;
}

/* ---------------- Footer ---------------- */

.site-footer { background: var(--plum); color: #d9c2e2; margin-top: 40px; padding: 20px 0; font-size: 14px; }
.footer-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.site-footer a { color: #f0e2f5; text-decoration: none; }
.site-footer a:hover { color: #fff; }

/* ---------------- Mobile ---------------- */

@media (max-width: 640px) {
  .brand img { height: 44px; }
  .site-header { flex-wrap: wrap; row-gap: 8px; }
  .site-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .site-nav a { padding: 7px 8px; font-size: 13.5px; }
  .chip { padding: 6px 10px; font-size: 13px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
  .table-actions .btn, .hero-actions .btn, .new-table .btn { flex: 1 1 100%; }
  .seats { margin-left: 0; text-align: left; }
  .table-top { flex-direction: column; }
  .seats-dots { justify-content: flex-start; }
  .event-row .go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}