/* ---------------------------------------------------------------
   Fantascacchi — foglio di stile unico.
   Palette: legno scuro da scacchiera + oro. Mobile-first.
   --------------------------------------------------------------- */

:root {
  --bg:        #12100e;
  --bg-2:      #1a1714;
  --surface:   #211d19;
  --surface-2: #2b2621;
  --line:      #38312a;
  --line-soft: #2e2822;

  --text:      #f4efe8;
  --text-dim:  #a89c8d;
  --text-mute: #7a6f62;

  --gold:      #e0a83a;
  --gold-dim:  #a87c25;
  --green:     #6ec07a;
  --red:       #e0605a;
  --blue:      #6ea8e0;
  --violet:    #a98ce0;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 4px 24px rgba(0,0,0,.45);

  --font:      'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display:   'Bricolage Grotesque', var(--font);
  --mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --topbar-h:  56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(224,168,58,.10), transparent 70%);
  background-attachment: fixed;
  min-height: 100dvh;
}

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.02rem; font-weight: 600; }
p  { margin: 0 0 1rem; }
a  { color: var(--gold); }

/* ------------------------------- topbar ------------------------------- */

/* display:flex batterebbe l'attributo hidden: va riaffermato. */
.topbar[hidden], .tab[hidden], .btn[hidden], .notice[hidden] { display: none; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 clamp(.75rem, 3vw, 1.5rem);
  background: rgba(18,16,14,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.brand span { display: none; }
@media (min-width: 560px) { .brand span { display: inline; } }

.tabs { display: flex; gap: .15rem; overflow-x: auto; flex: 1; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

.tab {
  border: 0; background: transparent; color: var(--text-dim);
  font: 600 .85rem/1 var(--font); cursor: pointer;
  padding: .55rem .7rem; border-radius: var(--radius-sm); white-space: nowrap;
}
.tab:hover { color: var(--text); background: var(--surface); }
.tab[aria-current="page"] { color: var(--bg); background: var(--gold); }

.topbar-right { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.me {
  font-size: .8rem; color: var(--text-dim); white-space: nowrap;
  max-width: 12ch; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; padding: .35rem .5rem; border-radius: var(--radius-sm);
  background: none; border: 1px solid transparent;
}
.me::before { content: "👤"; margin-right: .3rem; }
.me:hover { color: var(--text); border-color: var(--line); }

/* -------------------------------- layout ------------------------------- */

.view {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(1rem, 4vw, 2rem) clamp(.75rem, 3vw, 1.5rem) 5rem;
}

.stack   { display: grid; gap: 1rem; }
.stack-s { display: grid; gap: .5rem; }
.row     { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spread  { display: flex; gap: .6rem; align-items: center; justify-content: space-between; }
.grid    { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.muted  { color: var(--text-dim); }
.mute-2 { color: var(--text-mute); }
.small  { font-size: .82rem; }
.mono   { font-family: var(--mono); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* -------------------------------- card --------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.1rem;
}
.card-tight { padding: .8rem; }
.card-hi { border-color: var(--gold-dim); box-shadow: 0 0 0 1px rgba(224,168,58,.18), var(--shadow); }

.hero {
  text-align: center;
  padding: clamp(1.5rem, 6vw, 3rem) 1rem;
}
.hero .lede { color: var(--text-dim); max-width: 46ch; margin: .9rem auto 1.6rem; }

/* ------------------------------- controls ------------------------------ */

.btn {
  appearance: none; cursor: pointer;
  font: 600 .92rem/1 var(--font);
  padding: .7rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text);
  transition: filter .12s, transform .06s;
  display: inline-flex; align-items: center; gap: .45rem; justify-content: center;
}
.btn:hover:not(:disabled) { filter: brightness(1.18); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }

.btn-primary { background: var(--gold); border-color: var(--gold); color: #241a05; }
.btn-danger  { background: transparent; border-color: var(--red); color: var(--red); }
.btn-ghost   { background: transparent; }
.btn-sm      { padding: .45rem .7rem; font-size: .82rem; }
.btn-lg      { padding: .9rem 1.5rem; font-size: 1rem; }
.btn-block   { width: 100%; }

label.field { display: grid; gap: .35rem; font-size: .85rem; color: var(--text-dim); font-weight: 500; }

input[type=text], input[type=number], select {
  font: 500 .95rem var(--font);
  padding: .65rem .8rem;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  width: 100%;
}
input:focus-visible, select:focus-visible, .btn:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
input[type=search]::-webkit-search-cancel-button { filter: invert(.6); }

.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--text-dim);
  font: 600 .82rem var(--font); padding: .4rem .7rem; border-radius: 7px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }

/* -------------------------------- badges ------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font: 700 .68rem/1 var(--font); letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .5rem; border-radius: 999px;
  background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--line);
}
.badge-gold   { background: rgba(224,168,58,.14); color: var(--gold);   border-color: rgba(224,168,58,.35); }
.badge-green  { background: rgba(110,192,122,.14); color: var(--green); border-color: rgba(110,192,122,.35); }
.badge-red    { background: rgba(224,96,90,.14);  color: var(--red);    border-color: rgba(224,96,90,.35); }
.badge-blue   { background: rgba(110,168,224,.14); color: var(--blue);  border-color: rgba(110,168,224,.35); }
.badge-violet { background: rgba(169,140,224,.14); color: var(--violet); border-color: rgba(169,140,224,.35); }

.title-tag {
  font: 800 .66rem/1 var(--mono); letter-spacing: .02em;
  color: var(--bg); background: var(--text-dim);
  padding: .25rem .32rem; border-radius: 4px; flex: none;
}
.title-tag.gm { background: var(--gold); }
.title-tag.im { background: #c0c0c0; }
.title-tag.fm, .title-tag.wgm { background: #c98b52; }

/* ----------------------------- player rows ----------------------------- */

.plist { display: grid; gap: .4rem; }

.pcard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: .7rem;
  padding: .6rem .75rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  text-align: left; width: 100%;
  font: inherit; color: inherit;
}
button.pcard { cursor: pointer; }
button.pcard:hover { border-color: var(--gold-dim); background: var(--surface-2); }
.pcard.is-owned { opacity: .45; }
.pcard.is-picked { border-color: var(--gold); background: rgba(224,168,58,.07); }

.pav {
  width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
  background: var(--surface-2); flex: none;
}
.pmain { min-width: 0; }
.pname { font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: .35rem; }
.pname > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmeta { font-size: .75rem; color: var(--text-mute); display: flex; gap: .5rem; flex-wrap: wrap; }
.pright { text-align: right; flex: none; }
.pprice { font: 700 .95rem var(--mono); color: var(--gold); }

/* ------------------------------- auction ------------------------------- */

.auction-stage {
  display: grid; gap: 1rem; text-align: center;
  padding: clamp(1.2rem, 5vw, 2rem);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--gold-dim); border-radius: var(--radius);
}
.auction-player { display: flex; align-items: center; gap: .9rem; justify-content: center; }
.auction-player img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--surface-2); }
.auction-bid { font: 800 clamp(2.4rem,10vw,3.6rem)/1 var(--mono); color: var(--gold); }
.auction-timer {
  font: 700 1.05rem var(--mono); color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.auction-timer.urgent { color: var(--red); animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

.bidbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: .5rem; }

/* -------------------------------- table -------------------------------- */

/* I figli di grid/flex nascono con min-width:auto: senza azzerarlo una
   tabella larga allarga TUTTA la pagina invece di scorrere qui dentro. */
.stack > *, .stack-s > *, .view > section, .grid > * { min-width: 0; }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 420px; }
th, td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
th {
  font: 700 .7rem/1 var(--font); text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-mute); white-space: nowrap;
}
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.is-me { background: rgba(224,168,58,.07); }
.rankcell { font: 800 .95rem var(--mono); color: var(--text-dim); width: 1%; }
.rank-1 { color: var(--gold); }
.rank-2 { color: #c9c9c9; }
.rank-3 { color: #c98b52; }

/* -------------------------------- misc --------------------------------- */

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-mute); }
.empty .big { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* Pallino di presenza. Il verde ha un alone tenue cosi' si distingue
   dal grigio anche a colpo d'occhio su schermi piccoli. */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: .45rem; flex: none; vertical-align: middle;
}
.dot-on  { background: var(--green); box-shadow: 0 0 0 3px rgba(110,192,122,.18); }
.dot-off { background: var(--line); }

.pcard > .dot { margin: 0; }

.bar { height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .88rem; }
.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; text-align: right; font-family: var(--mono); }

.copyfield { display: flex; gap: .4rem; }
.copyfield input { font-family: var(--mono); font-size: .8rem; }

.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--gold);
  animation: spin .7s linear infinite; margin: 2rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 90; display: grid; gap: .4rem; width: min(92vw, 380px); }
.toast {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .7rem .9rem; font-size: .88rem;
  box-shadow: var(--shadow); animation: rise .2s ease-out;
}
.toast.err { border-color: var(--red); color: var(--red); }
.toast.ok  { border-color: var(--green); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.modal {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  padding: 0; max-width: min(94vw, 460px); width: 100%;
  box-shadow: var(--shadow);
}
.modal::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }
.modal-body { padding: 1.2rem; }
.modal-wide { max-width: min(96vw, 720px); }
.modal-bare .modal-body { padding: 0; }

/* ---------------------------- scheda giocatore -------------------------- */

.pc { display: grid; }

.pc-head {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .8rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
  position: sticky; top: 0; z-index: 2;
}
.pc-av { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--surface-2); flex: none; }
.pc-name { font: 800 1.15rem/1.15 var(--display); display: flex; align-items: center; gap: .4rem; }
.pc-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-sub { font-size: .8rem; color: var(--text-mute); margin-top: .15rem; }

.pc-close {
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text-dim);
  font-size: .95rem; line-height: 1; cursor: pointer;
}
.pc-close:hover { color: var(--text); border-color: var(--gold-dim); }

.pc-body { display: grid; gap: 1.1rem; padding: 1.1rem; }

.pc-facts { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.pc-fact {
  display: grid; gap: .1rem;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: .5rem .6rem;
}
.pc-fact-l { font: 700 .6rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.pc-fact-v { font: 700 1rem/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.pc-fact-n { font-size: .68rem; color: var(--text-mute); }

.pc-h { font: 700 .72rem/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 .55rem; }

.pc-fmts { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.pc-fmt {
  display: grid; gap: .18rem;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: .55rem .65rem;
}
.pc-fmt-l { font: 700 .62rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.pc-fmt-r { font: 700 1.25rem/1 var(--mono); color: var(--gold); font-variant-numeric: tabular-nums; }
.pc-fmt-b { font-size: .66rem; color: var(--text-mute); font-family: var(--mono); }
.pc-fmt-n { font-size: .66rem; color: var(--text-mute); }

.pc-wdl { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--surface-2); margin: .25rem 0 .1rem; }
.pc-wdl > i { display: block; min-width: 0; }
.wdl-w { background: var(--green); }
.wdl-d { background: var(--text-mute); }
.wdl-l { background: var(--red); }

.pc-links { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }

.pc-chart { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: .8rem .9rem; }
.pc-chart-h { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.pc-chart-h .pc-h { margin: 0; }
.pc-chart-b { margin-top: .5rem; }

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .grid-base { stroke: var(--line-soft); stroke-width: 1.5; }
/* Il testo scala col viewBox: a 8px diventava illeggibile sul telefono,
   dove il grafico viene disegnato a circa 0,6 della larghezza nominale. */
.chart .axis { fill: var(--text-mute); font: 500 11px var(--mono); }
.chart .bar { fill: var(--gold-dim); }
.chart .bar-best { fill: var(--gold); }
.chart .absent { stroke: var(--text-mute); stroke-width: 1.5; opacity: .45; }
.chart .line { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linejoin: round; }
.chart .area { fill: var(--gold); opacity: .10; stroke: none; }
.chart .dot { fill: var(--gold); }
.chart .dot-label { fill: var(--gold); font-weight: 600; }

/* ------------------------------- diretta -------------------------------- */

/* Una riga = una partita. Le due parti sono simmetriche attorno al
   risultato, cosi' si legge come un tabellone. */
.lg-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: inherit; text-decoration: none;
}
.lg-row:hover { border-color: var(--gold-dim); background: var(--surface-2); }

.lg-side { display: grid; gap: .2rem; min-width: 0; }
.lg-side:last-child { justify-items: end; text-align: right; }
.lg-name {
  display: flex; align-items: center; gap: .3rem;
  font-size: .86rem; font-weight: 500; min-width: 0;
}
.lg-side:last-child .lg-name { flex-direction: row-reverse; }
.lg-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-win .lg-name { font-weight: 700; color: var(--gold); }

.lg-score { display: grid; justify-items: center; gap: .1rem; flex: none; }
.lg-res {
  font: 700 .92rem var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .lg-row { grid-template-columns: 1fr auto; row-gap: .35rem; }
  .lg-score { grid-row: 1 / 3; }
  .lg-side:last-child { justify-items: start; text-align: left; }
  .lg-side:last-child .lg-name { flex-direction: row; }
}

/* ------------------------- righe giocatore divise ----------------------- */

/* La riga ospita due comandi affiancati: aprire la scheda e agire.
   Il padding si sposta sui figli, altrimenti l'area cliccabile
   non arriva ai bordi. */
.pcard-split { display: flex; align-items: stretch; gap: 0; padding: 0; }

.pcard-main {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: .7rem;
  flex: 1; min-width: 0;
  padding: .6rem .75rem;
  background: transparent; border: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.pcard-main:hover { background: var(--surface-2); }

.pcard-side {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: .25rem; padding: .6rem .75rem .6rem .4rem; flex: none; text-align: right;
}
.pcard-side.row { flex-direction: row; align-items: center; }

.notice {
  border-left: 3px solid var(--gold); background: var(--bg-2);
  padding: .75rem .9rem; border-radius: var(--radius-sm); font-size: .88rem; color: var(--text-dim);
}
.notice.warn { border-left-color: var(--red); }

/* Presenza: il colore dice a colpo d'occhio se e' un rischio.
   Non e' l'accento della pagina, e' semaforo. */
.pres-ok  { color: var(--green); }
.pres-mid { color: var(--text-dim); }
.pres-low { color: var(--red); }

/* Ultime giornate: pieno = presente, vuoto = assente.
   Sostituisce l'informazione sulle iscrizioni, che chess.com non pubblica. */
.form-strip { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.form-strip > i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.fs-on  { background: var(--green); }
.fs-off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

.pts-pos { color: var(--green); }
.pts-neg { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Striscia degli inviti (installa l'app, accendi le notifiche).
   Sta sopra il contenuto ma dentro la stessa colonna, cosi' non sembra
   una barra di sistema calata dall'alto. Su schermo stretto i pulsanti
   scendono sotto il testo invece di schiacciarlo. */
.avvisi:empty { display: none; }
.avvisi {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(.75rem, 3vw, 1rem) clamp(.75rem, 3vw, 1.5rem) 0;
}
.avviso {
  display: flex; align-items: center; justify-content: space-between;
  gap: .9rem; flex-wrap: wrap;
}
.avviso-testo { flex: 1 1 16rem; min-width: 0; }
.avviso strong { color: var(--text); }

/* Tutorial: la guida resta appiccicata in alto mentre sotto scorre l'app
   vera, cosi' le istruzioni non spariscono appena si scorre il listone.
   Il palco ha un bordo tenue per dire "questa e' l'app, non la guida". */
.guida { position: sticky; top: .5rem; z-index: 5; }
.tut-palco {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: clamp(.6rem, 2vw, 1rem);
}
.tut-palco > * { margin: 0; }

/* ------------------------- menu laterale (mobile) ----------------------- */
/*
   Sotto gli 880px le sei schede non stanno in orizzontale: restavano
   mezze fuori, e le ultime tre si raggiungevano solo con uno scorrimento
   laterale che non si vedeva. Li' la barra diventa un cassetto.

   Il cassetto resta sempre nel DOM (niente [hidden]) cosi' lo scorrimento
   si puo' animare; a tenerlo fuori campo e' la trasformazione, e
   `visibility` impedisce di raggiungerlo col tasto Tab da chiuso.
*/

.hamburger {
  display: grid; gap: 4px; place-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); cursor: pointer;
}
.hamburger span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: var(--text-dim); transition: background .15s;
}
.hamburger:hover span { background: var(--text); }
.hamburger[hidden] { display: none; }

.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
body.menu-aperto .scrim { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 51;
  width: min(80vw, 290px);
  display: flex; flex-direction: column;
  background: var(--bg-2); border-right: 1px solid var(--line);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .22s ease, visibility .22s;
  /* Sui telefoni con la tacca il bordo sinistro e' sotto la cornice. */
  padding-left: env(safe-area-inset-left, 0);
}
body.menu-aperto .drawer { transform: none; visibility: visible; }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--line-soft);
}
.drawer-head strong {
  font-family: var(--display); font-size: 1rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.drawer-nav {
  display: grid; gap: .15rem; padding: .6rem; overflow-y: auto; flex: 1;
  /* Senza, la griglia distribuisce le righe su tutta l'altezza e le sei
     voci finiscono sparse dall'alto in basso come un menu di un DVD. */
  align-content: start;
}
.drawer-nav .tab {
  text-align: left; width: 100%; padding: .7rem .8rem; font-size: .95rem;
}

.drawer-foot {
  display: grid; gap: .4rem; padding: .6rem;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 880px) {
  .topbar .tabs { display: none; }
  #btn-invite { display: none; }
}
@media (min-width: 881px) {
  /* Sopra la soglia il cassetto non serve: resta chiuso qualunque cosa. */
  .hamburger { display: none; }
  body.menu-aperto .drawer,
  body.menu-aperto .scrim { transform: translateX(-100%); visibility: hidden; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer, .scrim { transition: none; }
}