:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --border: #dfe3e8;
    --text: #1a1d21;
    --muted: #6b7280;
    --accent: #2f6f4f;
    --accent-text: #ffffff;
    --danger: #a4342b;
    --warn-bg: #fdf5e2;
    --warn-border: #e8d9a8;
    --ok-bg: #e9f3ec;
    --ok-border: #bcd9c6;
    --radius: 12px;
    --tap: 48px;
    --header-h: 3.25rem;
    --tabbar-h: 3.75rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16181c;
        --surface: #1e2126;
        --border: #333941;
        --text: #e8eaed;
        --muted: #9aa3ad;
        --accent: #4c9e75;
        --accent-text: #0f1114;
        --danger: #e0796e;
        --warn-bg: #2e2716;
        --warn-border: #4d4224;
        --ok-bg: #172a1f;
        --ok-border: #2c4a37;
    }
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Niente lampo grigio al tocco, niente rimbalzo che scopre il fondo. */
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}

h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: .9rem; }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.center { text-align: center; }

/* ---------------------------------------------------------------------------
   Pagine "sito": home, accesso, elenco tornei. Restano una pagina web normale.
   --------------------------------------------------------------------------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: .75rem 1rem; }
.topbar-inner {
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { font-weight: 700; text-decoration: none; color: var(--text); }
.topbar nav { display: flex; align-items: center; gap: .75rem; font-size: .95rem; }
.wrap { max-width: 720px; margin: 0 auto; padding: 1rem 1rem 3rem; }

/* ---------------------------------------------------------------------------
   App shell: testata fissa, corpo che scorre, linguette in basso.
   Le tre parti sono un flex column alto quanto la viewport, cosi' la tab bar
   resta sotto il pollice senza coprire il contenuto.
   --------------------------------------------------------------------------- */
body.shell {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.shell-header {
    position: sticky; top: 0; z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .55rem 1rem;
    padding-top: calc(.55rem + env(safe-area-inset-top));
    display: flex; align-items: center; gap: .75rem;
    min-height: var(--header-h);
}
.shell-back {
    flex: 0 0 auto; width: 2rem; height: 2rem;
    display: grid; place-items: center;
    color: var(--muted); text-decoration: none; font-size: 1.3rem; line-height: 1;
}
.shell-titles { flex: 1; min-width: 0; }
.shell-title {
    font-weight: 700; font-size: 1.02rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shell-sub { font-size: .78rem; color: var(--muted); }

.shell-body {
    flex: 1;
    padding: .75rem 0 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Linguette in basso */
.tabbar {
    position: sticky; bottom: 0; z-index: 20;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
    flex: 1;
    min-height: var(--tabbar-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    text-decoration: none; color: var(--muted);
    font-size: .7rem; font-weight: 600;
    padding: .4rem .2rem;
}
.tabbar a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.tabbar a[aria-current="page"] { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Riquadri. Su telefono vanno da bordo a bordo: i margini laterali sono la
   cosa che piu' fa "pagina web".
   --------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 0; border-right: 0;
    border-radius: 0;
    padding: 1rem;
    margin-bottom: .75rem;
}
.card-flush { padding-left: 0; padding-right: 0; }
.card-flush > h3,
.card-flush > .muted { padding: 0 1rem; }

.flash {
    padding: .75rem 1rem; margin: 0 0 .75rem; font-size: .95rem;
    border-top: 1px solid; border-bottom: 1px solid;
}
.flash-ok { background: var(--ok-bg); border-color: var(--ok-border); }
.flash-error { background: var(--warn-bg); border-color: var(--warn-border); }

/* ---------------------------------------------------------------------------
   Comandi: bersaglio minimo 48px, che e' il polpastrello.
   --------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap);
    font: inherit; font-size: .98rem; font-weight: 600;
    padding: .6rem 1.1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    cursor: pointer; text-decoration: none;
    -webkit-user-select: none; user-select: none;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-danger { color: var(--danger); }
.btn-sm { min-height: 2.35rem; padding: .35rem .7rem; font-size: .85rem; font-weight: 600; }
.btn-block { display: flex; width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.actions-stack { display: flex; flex-direction: column; gap: .5rem; }

/* Moduli */
label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
    width: 100%; font: inherit;
    min-height: var(--tap);
    padding: .6rem .7rem;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg); color: var(--text);
}
textarea { min-height: 7rem; resize: vertical; }
.field { margin-bottom: 1rem; }
.inline-form { display: flex; gap: .5rem; align-items: stretch; }
.inline-form input { flex: 1; }

/* ---------------------------------------------------------------------------
   Righe (tavoli, giocatori)
   --------------------------------------------------------------------------- */
.row {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: 0; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; }
.row-sub { font-size: .82rem; color: var(--muted); }
.badge {
    flex: 0 0 2.1rem; height: 2.1rem;
    display: grid; place-items: center;
    border-radius: 8px; background: var(--bg); border: 1px solid var(--border);
    font-weight: 700; font-size: .82rem;
}
.pill {
    display: inline-block; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em;
    padding: .15rem .45rem; border-radius: 999px;
    border: 1px solid var(--border); color: var(--muted);
    vertical-align: middle;
}
.pill-ok { background: var(--ok-bg); border-color: var(--ok-border); color: inherit; }
.pill-wait { background: var(--warn-bg); border-color: var(--warn-border); color: inherit; }

/* Un tavolo: intestazione su una riga, comandi sulla riga sotto. Su telefono
   nomi e bottoni non ci starebbero mai affiancati. */
.match { border-bottom: 1px solid var(--border); }
.match:last-child { border-bottom: 0; }
.match .row { border-bottom: 0; padding-bottom: .35rem; }
.match .score-row { padding: 0 1rem .7rem; }

/* Punteggi rapidi: tre bersagli affiancati */
.score-row { display: flex; gap: .4rem; }
.score-row form { flex: 1; }
.score-row .btn { width: 100%; padding-left: 0; padding-right: 0; }

/* ---------------------------------------------------------------------------
   Classifica
   --------------------------------------------------------------------------- */
table.standings { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.standings th, table.standings td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid var(--border); }
table.standings th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
table.standings tr:last-child td { border-bottom: 0; }
table.standings td:first-child, table.standings th:first-child { padding-left: 1rem; width: 2rem; color: var(--muted); }
table.standings td:last-child, table.standings th:last-child { padding-right: 1rem; }
table.standings td.num, table.standings th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.standings tr.me td { background: var(--ok-bg); font-weight: 700; }
table.standings tr.dropped td { opacity: .45; text-decoration: line-through; }

/* ---------------------------------------------------------------------------
   Schermata partita: l'avversario e' l'unica cosa che conta
   --------------------------------------------------------------------------- */
.versus { text-align: center; padding: 1.5rem 1rem; }
.versus .where { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.versus .opponent { font-size: clamp(1.9rem, 9vw, 2.6rem); font-weight: 800; line-height: 1.15; margin: .5rem 0; }
.versus .score { font-size: 1.1rem; font-weight: 700; }

.seat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; padding: 0 1rem; }

.qr-panel { text-align: center; padding: 1.25rem 1rem; }
.qr-panel img { width: 100%; max-width: 17rem; height: auto; }
.code { font-family: ui-monospace, Consolas, monospace; font-size: 1.8rem; font-weight: 800; letter-spacing: .18em; margin: .5rem 0 .25rem; }

.empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Da tablet in su: la shell si ricentra e i riquadri tornano a galleggiare.
   --------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .shell-header, .shell-body, .tabbar > * { }
    .shell-header > .shell-titles { max-width: 720px; margin: 0 auto; }
    .shell-body { max-width: 720px; width: 100%; margin: 0 auto; padding: 1rem 1rem 2rem; }
    .tabbar { justify-content: center; }
    .tabbar a { flex: 0 1 9rem; }
    .card { border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: var(--radius); }
    .card-flush > h3, .card-flush > .muted { padding: 0 1rem; }
    .flash { border: 1px solid; border-radius: var(--radius); }
}