@charset "UTF-8";
/* ==========================================================================
   Slow Poker — Design system iOS
   Costruito sulle Human Interface Guidelines: tipografia SF, colori di
   sistema, materiali sfocati, angoli continui, molle di iOS, safe area.
   Supporta chiaro/scuro automatico e Dynamic Type.
   ========================================================================== */

/* ------------------------------------------------------------- token ----- */
:root {
    color-scheme: light dark;

    /* Colori di sistema — chiaro */
    --blue:        #007AFF;
    --green:       #34C759;
    --indigo:      #5856D6;
    --orange:      #FF9500;
    --pink:        #FF2D55;
    --purple:      #AF52DE;
    --red:         #FF3B30;
    --teal:        #30B0C7;
    --yellow:      #FFCC00;
    --mint:        #00C7BE;

    --gray:        #8E8E93;
    --gray2:       #AEAEB2;
    --gray3:       #C7C7CC;
    --gray4:       #D1D1D6;
    --gray5:       #E5E5EA;
    --gray6:       #F2F2F7;

    --bg:          #FFFFFF;
    --bg-2:        #F2F2F7;
    --bg-3:        #FFFFFF;
    --grouped:     #F2F2F7;
    --grouped-2:   #FFFFFF;
    --grouped-3:   #F2F2F7;

    --label:       #000000;
    --label-2:     rgba(60, 60, 67, .60);
    --label-3:     rgba(60, 60, 67, .30);
    --label-4:     rgba(60, 60, 67, .18);

    --separator:   rgba(60, 60, 67, .29);
    --separator-o: #C6C6C8;
    --fill:        rgba(120, 120, 128, .20);
    --fill-2:      rgba(120, 120, 128, .16);
    --fill-3:      rgba(118, 118, 128, .12);
    --fill-4:      rgba(116, 116, 128, .08);

    --material:    rgba(255, 255, 255, .72);
    --material-th: rgba(255, 255, 255, .60);
    --scrim:       rgba(0, 0, 0, .40);

    --tint:        var(--blue);
    --on-tint:     #FFFFFF;

    /* Geometria */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 22px;
    --r-2xl: 28px;
    --r-full: 999px;

    /* Safe area */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);

    /* Metriche chrome */
    --nav-h: 44px;
    --tab-h: 49px;
    --gutter: 16px;

    /* Molle iOS */
    --ease-spring: cubic-bezier(.32, .72, 0, 1);
    --ease-out:    cubic-bezier(.25, .46, .45, .94);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);

    --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
    --shadow-2: 0 8px 30px rgba(0,0,0,.12);
    --shadow-3: 0 -1px 0 var(--separator);

    /* Tipografia (rem = Dynamic Type) */
    --f-large:    2.125rem;  /* 34 */
    --f-title1:   1.75rem;   /* 28 */
    --f-title2:   1.375rem;  /* 22 */
    --f-title3:   1.25rem;   /* 20 */
    --f-headline: 1.0625rem; /* 17 semibold */
    --f-body:     1.0625rem; /* 17 */
    --f-callout:  1rem;      /* 16 */
    --f-sub:      .9375rem;  /* 15 */
    --f-foot:     .8125rem;  /* 13 */
    --f-cap1:     .75rem;    /* 12 */
    --f-cap2:     .6875rem;  /* 11 */
}

@media (prefers-color-scheme: dark) {
    :root {
        --blue: #0A84FF; --green: #30D158; --indigo: #5E5CE6; --orange: #FF9F0A;
        --pink: #FF375F; --purple: #BF5AF2; --red: #FF453A; --teal: #40C8E0;
        --yellow: #FFD60A; --mint: #63E6E2;

        --gray: #8E8E93; --gray2: #636366; --gray3: #48484A;
        --gray4: #3A3A3C; --gray5: #2C2C2E; --gray6: #1C1C1E;

        --bg: #000000; --bg-2: #1C1C1E; --bg-3: #2C2C2E;
        --grouped: #000000; --grouped-2: #1C1C1E; --grouped-3: #2C2C2E;

        --label: #FFFFFF;
        --label-2: rgba(235, 235, 245, .60);
        --label-3: rgba(235, 235, 245, .30);
        --label-4: rgba(235, 235, 245, .18);

        --separator: rgba(84, 84, 88, .60);
        --separator-o: #38383A;
        --fill: rgba(120, 120, 128, .36);
        --fill-2: rgba(120, 120, 128, .32);
        --fill-3: rgba(118, 118, 128, .24);
        --fill-4: rgba(118, 118, 128, .18);

        --material: rgba(30, 30, 32, .78);
        --material-th: rgba(30, 30, 32, .64);
        --scrim: rgba(0, 0, 0, .55);

        --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
        --shadow-2: 0 8px 30px rgba(0,0,0,.6);
    }
}

/* Tema "poker" — verde tavolo, si attiva con data-theme="felt" */
[data-theme="felt"] { --tint: #30D158; }

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    /* 100dvh non basta su iOS: usiamo anche la custom property aggiornata da JS */
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 16px;
}

body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Helvetica Neue", system-ui, "Segoe UI", Roboto, sans-serif;
    font-size: var(--f-body);
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--label);
    background: var(--grouped);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis-weight: none;

    /* iOS: niente rimbalzo dell'intera pagina né zoom accidentale */
    overscroll-behavior-y: none;
    touch-action: manipulation;

    /* Il testo dell'interfaccia non è selezionabile: la lente di iOS che
       compare tenendo premuto un pulsante è la cosa che più "smaschera"
       una web app. Il contenuto testuale la riattiva più sotto. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

body.is-standalone { overscroll-behavior: none; }
body.is-locked { overflow: hidden; }

input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
    font: inherit;
    color: inherit;
}

/* iOS zooma se il campo ha meno di 16px: mai scendere sotto. */
input, textarea, select { font-size: max(16px, var(--f-body)); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--tint); text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 4px; }

::selection { background: color-mix(in srgb, var(--tint) 25%, transparent); }

/* Scrollbar discreta (desktop) */
@media (pointer: fine) {
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-thumb { background: var(--label-3); border-radius: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
}

/* ------------------------------------------------------------- layout ---- */
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(var(--vh, 1vh) * 100);
}

.screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    padding-left: var(--sal);
    padding-right: var(--sar);
}

.content {
    padding: 0 var(--gutter);
    padding-bottom: calc(var(--tab-h) + var(--sab) + 32px);
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}
.content--flush { padding-left: 0; padding-right: 0; }

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

/* ---------------------------------------------------------- navigation --- */
.nav {
    position: sticky;
    top: 0;
    z-index: 40;
    padding-top: var(--sat);
    background: var(--material);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    transition: background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.nav::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: .5px;
    background: var(--separator);
    opacity: 0;
    transition: opacity .2s var(--ease-out);
}
.nav.is-scrolled::after { opacity: 1; }

.nav__bar {
    height: var(--nav-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 4px;
    padding: 0 max(8px, var(--sal)) 0 max(8px, var(--sar));
}
.nav__title {
    font-size: var(--f-headline);
    font-weight: 600;
    text-align: center;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.nav.is-scrolled .nav__title { opacity: 1; transform: none; }
.nav__side { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav__side--r { justify-content: flex-end; }

.nav__btn {
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--tint);
    font-size: var(--f-body);
    border-radius: var(--r-sm);
    transition: opacity .15s var(--ease-out), background .15s var(--ease-out);
}
.nav__btn:active { opacity: .4; }
.nav__btn[disabled] { opacity: .3; pointer-events: none; }
.nav__btn--strong { font-weight: 600; }
.nav__btn .i { font-size: 22px; }

/* Titolo grande che collassa (UINavigationBar prefersLargeTitles) */
.large-title {
    padding: 4px var(--gutter) 8px;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}
.large-title h1 {
    font-size: var(--f-large);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
}
.large-title p {
    margin-top: 3px;
    font-size: var(--f-sub);
    color: var(--label-2);
}

/* ------------------------------------------------------------- tab bar --- */
.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    display: flex;
    padding-bottom: var(--sab);
    padding-left: var(--sal);
    padding-right: var(--sar);
    background: var(--material);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: .5px solid var(--separator);
    transform: translateY(0);
    transition: transform .3s var(--ease-spring);
}
.tabbar[hidden] { display: none; }
.tabbar.is-hidden { transform: translateY(120%); }

.tabbar__item {
    flex: 1;
    height: var(--tab-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--gray);
    font-size: var(--f-cap2);
    font-weight: 500;
    letter-spacing: 0;
    transition: color .15s var(--ease-out), transform .1s var(--ease-out);
    position: relative;
}
.tabbar__item .i { font-size: 24px; line-height: 1; }
.tabbar__item .ic { display: block; }
/* Le icone SVG ereditano currentColor: seguono automaticamente lo stato
   attivo/inattivo della scheda, come una UITabBar nativa. */
.tabbar__item.is-active { color: var(--tint); }
.tabbar__item:active { transform: scale(.92); }
.tabbar__item .badge-dot {
    position: absolute;
    top: 4px;
    left: calc(50% + 8px);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 2px var(--material);
}

/* -------------------------------------------------------------- liste ---- */
.list {
    background: var(--grouped-2);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 22px;
}
.list--plain { background: none; border-radius: 0; }

.list__header {
    padding: 0 var(--gutter) 7px 4px;
    font-size: var(--f-foot);
    font-weight: 400;
    color: var(--label-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.list__footer {
    padding: 7px 4px 0;
    font-size: var(--f-foot);
    color: var(--label-2);
    line-height: 1.35;
}

.row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 11px var(--gutter);
    position: relative;
    background: var(--grouped-2);
    transition: background .12s var(--ease-out);
    width: 100%;
    text-align: left;
    color: inherit;
}
.row + .row::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    left: var(--gutter);
    height: .5px;
    background: var(--separator);
}
.row--tap { cursor: pointer; }
.row--tap:active { background: var(--fill-4); }
.row--inset + .row--inset::before { left: 56px; }

.row__icon {
    width: 29px; height: 29px;
    flex: 0 0 29px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 17px;
    background: var(--gray);
}
.row__icon--lg { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; font-size: 20px; }
.row__body { flex: 1; min-width: 0; }
.row__title {
    font-size: var(--f-body);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.row__sub {
    font-size: var(--f-foot);
    color: var(--label-2);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.row__value {
    font-size: var(--f-body);
    color: var(--label-2);
    flex-shrink: 0;
    max-width: 55%;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.row__chevron {
    flex: 0 0 auto;
    color: var(--label-3);
    font-size: 15px;
    margin-left: -4px;
}
.row--destructive .row__title { color: var(--red); }
.row--tint .row__title { color: var(--tint); }
.row--center { justify-content: center; }
.row--center .row__title { text-align: center; }

/* Swipe-to-delete in stile iOS */
.swipe {
    position: relative;
    overflow: hidden;
    background: var(--red);
}
.swipe__content {
    position: relative;
    z-index: 2;
    transition: transform .3s var(--ease-spring);
    will-change: transform;
}
.swipe.is-open .swipe__content { transform: translateX(-84px); }
.swipe__action {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 84px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: var(--f-sub);
    font-weight: 500;
    background: var(--red);
    z-index: 1;
}

/* ------------------------------------------------------------- pulsanti -- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 50px;
    padding: 0 20px;
    border-radius: var(--r-md);
    font-size: var(--f-body);
    font-weight: 600;
    letter-spacing: -.01em;
    background: var(--tint);
    color: var(--on-tint);
    transition: transform .12s var(--ease-out), opacity .12s var(--ease-out), background .15s var(--ease-out);
    user-select: none;
    -webkit-user-select: none;
    text-align: center;
    /* Le etichette lunghe vanno a capo invece di essere tagliate. */
    white-space: normal;
    line-height: 1.15;
    padding-top: 8px;
    padding-bottom: 8px;
    height: auto;
}
.btn:active { transform: scale(.97); opacity: .85; }
.btn[disabled], .btn.is-busy { opacity: .4; pointer-events: none; }
.btn--block { display: flex; width: 100%; }
.btn--tinted { background: color-mix(in srgb, var(--tint) 15%, transparent); color: var(--tint); }
.btn--gray { background: var(--fill-3); color: var(--label); }
.btn--plain { background: none; color: var(--tint); min-height: 44px; font-weight: 400; }
.btn--destructive { background: var(--red); color: #fff; }
.btn--destructive-tinted { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.btn--sm { min-height: 34px; padding: 0 14px; font-size: var(--f-sub); border-radius: var(--r-xs); }
.btn--pill { border-radius: var(--r-full); }
.btn--lg { min-height: 56px; font-size: var(--f-title3); }
.btn .i { font-size: 19px; }
.btn .ic, .nav__btn .ic { flex: 0 0 auto; }

.btn-group { display: flex; gap: 10px; }
.btn-group > * { flex: 1; }

/* --------------------------------------------------------- form fields --- */
.field { margin-bottom: 14px; }
.field__label {
    display: block;
    font-size: var(--f-foot);
    color: var(--label-2);
    margin: 0 0 6px 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.field__hint { font-size: var(--f-foot); color: var(--label-2); margin: 6px 0 0 4px; }
.field__error { font-size: var(--f-foot); color: var(--red); margin: 6px 0 0 4px; }

.input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--grouped-2);
    color: var(--label);
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow .15s var(--ease-out), background .15s var(--ease-out);
    box-shadow: inset 0 0 0 1px transparent;
}
.input::placeholder { color: var(--label-3); }
.input:focus { box-shadow: inset 0 0 0 2px var(--tint); }
.input.is-invalid { box-shadow: inset 0 0 0 2px var(--red); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.4; }

select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238E8E93' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* Campo per il codice: monospaziato, spaziato, grande */
.code-input {
    width: 100%;
    min-height: 62px;
    text-align: center;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    border-radius: var(--r-md);
    background: var(--grouped-2);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--separator);
    color: var(--label);
}
.code-input:focus { box-shadow: inset 0 0 0 2px var(--tint); }

/* Interruttore iOS */
.switch { position: relative; display: inline-block; width: 51px; height: 31px; flex: 0 0 51px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; z-index: 2; }
.switch__track {
    position: absolute;
    inset: 0;
    border-radius: var(--r-full);
    background: var(--fill);
    transition: background .25s var(--ease-out);
}
.switch__track::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 27px; height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16);
    transition: transform .25s var(--ease-spring);
}
.switch input:checked + .switch__track { background: var(--green); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:disabled + .switch__track { opacity: .5; }

/* Controllo segmentato */
.segmented {
    display: flex;
    padding: 2px;
    background: var(--fill-3);
    border-radius: 9px;
    position: relative;
    isolation: isolate;
}
.segmented__item {
    flex: 1;
    min-height: 28px;
    display: grid;
    place-items: center;
    font-size: var(--f-sub);
    font-weight: 500;
    color: var(--label);
    border-radius: 7px;
    position: relative;
    z-index: 1;
    transition: color .2s var(--ease-out), transform .1s;
    white-space: nowrap;
    padding: 0 8px;
}
.segmented__item:active { transform: scale(.96); }
.segmented__thumb {
    position: absolute;
    top: 2px; bottom: 2px;
    border-radius: 7px;
    background: var(--grouped-2);
    box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04);
    transition: transform .28s var(--ease-spring), width .28s var(--ease-spring);
    z-index: 0;
}

/* ---------------------------------------------------------------- card --- */
.card {
    background: var(--grouped-2);
    border-radius: var(--r-md);
    padding: 16px;
    margin-bottom: 14px;
}
.card--tint {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--tint) 16%, transparent),
        color-mix(in srgb, var(--tint) 6%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 22%, transparent);
}
.card__title { font-size: var(--f-headline); font-weight: 600; margin-bottom: 4px; }
.card__sub { font-size: var(--f-foot); color: var(--label-2); }

/* Griglia di statistiche */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat {
    background: var(--grouped-2);
    border-radius: var(--r-md);
    padding: 13px 14px;
    min-width: 0;
}
.stat__label {
    font-size: var(--f-cap1);
    color: var(--label-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat__value {
    font-size: var(--f-title3);
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.stat__value--sm { font-size: var(--f-headline); }
.stat__meta { font-size: var(--f-cap1); color: var(--label-2); margin-top: 2px; }

/* Colori semantici per gli importi */
.amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.amount--pos { color: var(--green); }
.amount--neg { color: var(--red); }
.amount--zero { color: var(--label-2); }

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--r-full);
    font-size: var(--f-cap1);
    font-weight: 600;
    background: var(--fill-3);
    color: var(--label-2);
    letter-spacing: 0;
    white-space: nowrap;
}
.badge--green { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.badge--red   { background: color-mix(in srgb, var(--red) 18%, transparent);   color: var(--red); }
.badge--blue  { background: color-mix(in srgb, var(--blue) 18%, transparent);  color: var(--blue); }
.badge--orange{ background: color-mix(in srgb, var(--orange) 20%, transparent);color: var(--orange); }
.badge--live  { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.badge--live::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-dot 1.6s var(--ease-in-out) infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

/* Podio della classifica */
.rank {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: var(--f-foot);
    font-weight: 700;
    background: var(--fill-3);
    color: var(--label-2);
    font-variant-numeric: tabular-nums;
}
.rank--1 { background: linear-gradient(145deg,#FFD84D,#E8A200); color: #4A3200; }
.rank--2 { background: linear-gradient(145deg,#E4E6EA,#B4B8C0); color: #43474E; }
.rank--3 { background: linear-gradient(145deg,#E5A46B,#B76A35); color: #40200A; }

/* Avatar */
.avatar {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: var(--f-sub);
    font-weight: 600;
    color: #fff;
    background: var(--gray);
    overflow: hidden;
    letter-spacing: 0;
}
.avatar--sm { width: 30px; height: 30px; flex-basis: 30px; font-size: var(--f-cap1); }
.avatar--lg { width: 64px; height: 64px; flex-basis: 64px; font-size: var(--f-title2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Barra di avanzamento / rating */
.meter { height: 6px; border-radius: 3px; background: var(--fill-3); overflow: hidden; }
.meter__fill {
    height: 100%;
    border-radius: 3px;
    background: var(--tint);
    transition: width .5s var(--ease-spring);
}

/* --------------------------------------------------------------- modal --- */
.scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--scrim);
    opacity: 0;
    transition: opacity .3s var(--ease-out);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
}
.scrim.is-in { opacity: 1; }

/* Foglio modale che sale dal basso, con maniglia e trascinamento */
.sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    max-height: 92vh;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    background: var(--grouped);
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    box-shadow: var(--shadow-2);
    transform: translateY(100%);
    transition: transform .42s var(--ease-spring);
    will-change: transform;
    padding-bottom: var(--sab);
    overscroll-behavior: contain;
}
.sheet.is-in { transform: translateY(0); }
.sheet.is-dragging { transition: none; }

.sheet__grabber {
    flex: 0 0 auto;
    padding: 6px 0 2px;
    display: grid;
    place-items: center;
    cursor: grab;
    touch-action: none;
}
.sheet__grabber::before {
    content: "";
    width: 36px; height: 5px;
    border-radius: 3px;
    background: var(--label-3);
}
.sheet__bar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 10px;
    min-height: 44px;
}
.sheet__title { font-size: var(--f-headline); font-weight: 600; text-align: center; }
.sheet__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px var(--gutter) 24px;
}
.sheet--full { height: 92dvh; }

/* Avviso iOS (UIAlertController) */
.alert {
    position: fixed;
    left: 50%; top: 50%;
    z-index: 100;
    width: min(280px, calc(100vw - 64px));
    transform: translate(-50%, -50%) scale(1.14);
    opacity: 0;
    background: var(--material);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    border-radius: var(--r-md);
    overflow: hidden;
    text-align: center;
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
    box-shadow: var(--shadow-2);
}
.alert.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.alert__body { padding: 19px 16px 15px; }
.alert__title { font-size: var(--f-headline); font-weight: 600; }
.alert__msg { font-size: var(--f-foot); color: var(--label); margin-top: 4px; line-height: 1.4; white-space: pre-line; }
.alert__actions { display: flex; border-top: .5px solid var(--separator); }
.alert__actions--v { flex-direction: column; }
.alert__btn {
    flex: 1;
    min-height: 44px;
    font-size: var(--f-body);
    color: var(--tint);
    display: grid;
    place-items: center;
    transition: background .12s;
    padding: 0 10px;
}
.alert__btn:active { background: var(--fill-4); }
.alert__btn + .alert__btn { border-left: .5px solid var(--separator); }
.alert__actions--v .alert__btn + .alert__btn { border-left: 0; border-top: .5px solid var(--separator); }
.alert__btn--strong { font-weight: 600; }
.alert__btn--destructive { color: var(--red); }

/* Foglio di azione */
.action-sheet {
    position: fixed;
    left: 8px; right: 8px;
    bottom: calc(8px + var(--sab));
    z-index: 100;
    transform: translateY(120%);
    transition: transform .38s var(--ease-spring);
}
.action-sheet.is-in { transform: translateY(0); }
.action-sheet__group {
    background: var(--material);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 8px;
}
.action-sheet__item {
    width: 100%;
    min-height: 57px;
    font-size: var(--f-title3);
    color: var(--tint);
    display: grid;
    place-items: center;
    transition: background .12s;
    padding: 0 16px;
}
.action-sheet__item:active { background: var(--fill-4); }
.action-sheet__item + .action-sheet__item { border-top: .5px solid var(--separator); }
.action-sheet__item--destructive { color: var(--red); }
.action-sheet__item--cancel { font-weight: 600; color: var(--tint); background: var(--grouped-2); }
.action-sheet__title {
    padding: 14px 16px;
    font-size: var(--f-foot);
    color: var(--label-2);
    border-bottom: .5px solid var(--separator);
    white-space: pre-line;
}

/* --------------------------------------------------------------- toast --- */
.toast-host {
    position: fixed;
    left: 0; right: 0;
    top: calc(var(--sat) + 6px);
    z-index: 110;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    padding: 0 12px;
}
.toast {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 420px;
    width: fit-content;
    padding: 11px 17px;
    border-radius: var(--r-full);
    background: var(--material);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    box-shadow: var(--shadow-2);
    font-size: var(--f-sub);
    font-weight: 500;
    color: var(--label);
    transform: translateY(-24px) scale(.94);
    opacity: 0;
    transition: transform .38s var(--ease-spring), opacity .25s var(--ease-out);
    pointer-events: auto;
}
.toast.is-in { transform: none; opacity: 1; }
.toast .i { font-size: 18px; flex: 0 0 auto; }
.toast--ok .i { color: var(--green); }
.toast--err .i { color: var(--red); }
.toast--info .i { color: var(--blue); }

/* ------------------------------------------------------------- caricamento */
.spinner {
    width: 20px; height: 20px;
    display: inline-block;
    position: relative;
}
.spinner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--label-4);
    border-top-color: var(--label-2);
    animation: spin .8s linear infinite;
}
.spinner--light::after { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
.spinner--lg { width: 32px; height: 32px; }
.spinner--lg::after { border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.loading-screen {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 60px 20px;
    gap: 14px;
    text-align: center;
    color: var(--label-2);
    font-size: var(--f-sub);
}

.skeleton {
    background: linear-gradient(90deg, var(--fill-4) 25%, var(--fill-3) 37%, var(--fill-4) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--r-xs);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.skeleton--row { height: 56px; margin-bottom: 2px; border-radius: 0; }
.skeleton--text { height: 12px; margin: 6px 0; }

/* Pull-to-refresh */
.ptr {
    position: absolute;
    left: 0; right: 0;
    top: 0;
    display: grid;
    place-items: center;
    height: 60px;
    margin-top: -60px;
    color: var(--label-2);
    pointer-events: none;
}
.scroll { position: relative; }

/* -------------------------------------------------------- stato vuoto ---- */
.empty {
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 56px 28px;
    text-align: center;
}
.empty .i { font-size: 46px; color: var(--label-3); }
.empty__title { font-size: var(--f-title3); font-weight: 600; }
.empty__msg { font-size: var(--f-sub); color: var(--label-2); max-width: 32ch; line-height: 1.4; }

/* -------------------------------------------------------------- login ---- */
.auth {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--sat) + 32px) 24px calc(var(--sab) + 32px);
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.auth__logo {
    width: 108px; height: 108px;
    margin: 0 auto 20px;
    border-radius: var(--r-2xl);
    object-fit: contain;
    animation: pop .6s var(--ease-spring) both;
}
@keyframes pop { from { opacity: 0; transform: scale(.86) translateY(10px); } to { opacity: 1; transform: none; } }
.auth h1 { font-size: var(--f-large); font-weight: 700; letter-spacing: -.03em; }
.auth__sub { font-size: var(--f-callout); color: var(--label-2); margin-top: 8px; line-height: 1.4; }
.auth__actions { margin-top: 30px; display: grid; gap: 12px; }
.auth__sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 6px;
    color: var(--label-3);
    font-size: var(--f-foot);
}
.auth__sep::before, .auth__sep::after {
    content: "";
    flex: 1;
    height: .5px;
    background: var(--separator);
}
.passkey-mark {
    width: 76px;
    margin: 0 auto 6px;
    opacity: .9;
}

/* Codici di recupero */
.codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 4px 0 16px;
}
.code-chip {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
    font-size: var(--f-callout);
    font-weight: 600;
    letter-spacing: .06em;
    padding: 12px 8px;
    text-align: center;
    background: var(--grouped-2);
    border-radius: var(--r-sm);
    -webkit-user-select: all;
    user-select: all;
}
.code-display {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .16em;
    padding: 18px 12px;
    text-align: center;
    background: var(--grouped-2);
    border-radius: var(--r-md);
    -webkit-user-select: all;
    user-select: all;
    word-break: break-all;
}

/* --------------------------------------------------------- transizioni --- */
.view-enter { animation: view-in .34s var(--ease-spring) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.push-enter { animation: push-in .36s var(--ease-spring) both; }
@keyframes push-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }

.stagger > * { animation: view-in .4s var(--ease-spring) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .05s; }
.stagger > *:nth-child(3) { animation-delay: .08s; }
.stagger > *:nth-child(4) { animation-delay: .11s; }
.stagger > *:nth-child(5) { animation-delay: .14s; }
.stagger > *:nth-child(n+6) { animation-delay: .17s; }

/* ------------------------------------------------------------- utilità --- */
.selectable { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.txt-center { text-align: center; }
.txt-2 { color: var(--label-2); }
.txt-sm { font-size: var(--f-foot); }
.txt-tint { color: var(--tint); }
.txt-red { color: var(--red); }
.txt-green { color: var(--green); }
.mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; }
.nums { font-variant-numeric: tabular-nums; }
.flex { display: flex; }
.flex-c { display: flex; align-items: center; }
.flex-b { display: flex; align-items: center; justify-content: space-between; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.grow { flex: 1; }
.hidden { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Icone: font di sistema quando l'utente è offline e il webfont non c'è */
.i { display: inline-block; line-height: 1; font-style: normal; }

/* Schermo grande: la tab bar diventa laterale, le liste si allargano */
@media (min-width: 768px) {
    :root { --gutter: 20px; }
    .content { padding-bottom: calc(var(--tab-h) + var(--sab) + 40px); }
    .stat-grid { grid-template-columns: repeat(4, 1fr); }
    .codes { grid-template-columns: repeat(4, 1fr); }
}

/* Alto contrasto */
@media (prefers-contrast: more) {
    :root { --separator: rgba(60,60,67,.6); --label-2: rgba(60,60,67,.85); }
    .row + .row::before { height: 1px; }
}

/* ============================================================================
 * TEMA SLOW POKER — interfaccia della versione precedente
 * ----------------------------------------------------------------------------
 * Ricostruita da source/app.css del backup. I riferimenti fra parentesi sono
 * i selettori originali.
 *
 *   superfici    #ffffff1c a raggio 35px  (blocco "FIX Liquid Glass", riga 748)
 *   vetro        trasparente + blur(20px) saturate(180%)
 *                + bordo rgba(255,255,255,.2) + ombra 0 4px 30px rgba(0,0,0,.2)
 *   barra alta   .header  — fissa a top 15px, larga 90%, min 350 max 425, r45
 *   barra bassa  .tabs    — fissa a bottom 20px, larga 90%, max 345, r45,
 *                           4 schede con icona immagine sopra l'etichetta
 *   scheda attiva rgba(255,255,255,.1) con bordo bianco  (riga 751)
 *                 NON blu: il blu di .tab.active era sovrascritto
 *   titoli       .tab-content h2 — pillola #ffffff1c centrata
 *   contenuto    .content — max 1145px, margine 65px sopra e 70px sotto
 * ========================================================================== */

:root {
    color-scheme: dark;

    --vetro-bg:     rgba(255, 255, 255, 0);
    --vetro-bordo:  rgba(255, 255, 255, .2);
    --vetro-ombra:  0 4px 30px rgba(0, 0, 0, .2);
    --superficie:   #ffffff1c;
    --r-pill:       35px;

    --oro:   #ffd700;
    --beige: #c69a76;
    --notte: #0f172a;

    --blue: #3b82f6; --green: #10b981; --red: #ef4444; --orange: #f59e0b;
    --yellow: #ffd700; --teal: #4ecdc4; --pink: #ff6b6b; --purple: #8b5cf6;
    --indigo: #6366f1; --mint: #4ecdc4;

    --gray: #94a3b8; --gray2: #64748b; --gray3: #475569;
    --gray4: #334155; --gray5: #1e293b; --gray6: #0f172a;

    --bg: #000000; --bg-2: #0f172a; --bg-3: #1e293b;
    --grouped: #000000;
    --grouped-2: var(--superficie);
    --grouped-3: var(--superficie);

    --label: #ffffff;
    --label-2: #94a3b8;
    --label-3: rgba(148, 163, 184, .55);
    --label-4: rgba(148, 163, 184, .30);

    --separator: rgba(255, 255, 255, .11);
    --separator-o: #ffffff1c;
    --fill: rgba(255,255,255,.16); --fill-2: rgba(255,255,255,.12);
    --fill-3: rgba(255,255,255,.10); --fill-4: rgba(255,255,255,.06);

    --material: var(--vetro-bg);
    --material-th: var(--vetro-bg);
    --scrim: rgb(0 0 0 / 55%);

    --shadow-1: var(--vetro-ombra);
    --shadow-2: 0 8px 40px rgba(0,0,0,.55);

    --tint: var(--blue);
    --on-tint: #ffffff;

    --r-xs: 10px; --r-sm: 12px; --r-md: var(--r-pill);
    --r-lg: var(--r-pill); --r-xl: 20px; --r-2xl: 25px;

    --testa-top: 15px;
    --testa-h:   75px;
    --barra-h:   64px;
}

@media (prefers-color-scheme: light) { :root { color-scheme: dark; } }

/* =========================================================== barra alta === */
.apphead {
    position: fixed;
    top: calc(var(--testa-top) + var(--sat));
    left: 50%;
    translate: -50%;
    z-index: 999;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px;
    width: 90%;
    /* Il minimo di 350px era assoluto: su uno schermo da 320 punti (iPhone SE
       di prima generazione, pieghevoli chiusi) la barra era piu' larga della
       finestra e sbordava di 15px per lato, con scorrimento orizzontale su
       tutta l'app. Ora il minimo cede quando non c'e' spazio, lasciando 12px
       di margine per lato. */
    min-width: min(350px, calc(100% - 24px));
    max-width: 425px;
    border-radius: 45px;
    color: #fff;
    background: var(--vetro-bg);
    border: 1px solid var(--vetro-bordo);
    box-shadow: var(--vetro-ombra);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.apphead__logo {
    height: 55px;
    width: 15%;
    max-width: 55px;
    margin: auto .15rem;
    background: url(../../icon.png) center/contain no-repeat;
}
.apphead__title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    /* Come le navigation bar di Apple, il titolo della barra scala poco:
       oltre un certo punto crescerebbe solo a scapito del contenuto. */
    font-size: clamp(17px, 1.5rem, 24px);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    margin: 0;
}
.apphead__ver {
    display: flex;
    font-size: clamp(12px, 1rem, 15px);
    font-weight: 500;
    justify-content: center;
    align-items: baseline;
}
.apphead__btn {
    width: 15%;
    max-width: 45px;
    max-height: 43px;
    padding: 10px;
    margin: auto .15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    background: transparent;
    border: 1px solid var(--vetro-bordo);
    border-radius: 45px;
}
.apphead__btn--exit { background: #af4141; border-color: #f57979; }

/* =========================================================== barra bassa === */
.tabbar {
    position: fixed;
    top: auto;
    bottom: calc(20px + var(--sab));
    left: 50%;
    right: auto;
    translate: -50%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    width: 92%;
    /* La versione precedente aveva 4 schede in 345px. Qui ce ne sono 5
       (c'e' anche Gestione/Account), quindi serve un po' piu' di respiro. */
    max-width: 400px;
    border: 1px solid var(--vetro-bordo);
    border-top: 1px solid var(--vetro-bordo);
    border-radius: 45px;
    background: var(--vetro-bg);
    box-shadow: var(--vetro-ombra);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.tabbar.is-hidden { transform: translateY(160%); }

.tabbar__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 5px 1px;
    font-size: .64rem;
    letter-spacing: -.01em;
    font-weight: 500;
    color: #fff;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 45px;
    text-align: center;
    transition: all .3s ease;
}
.tabbar__ico { width: 22px; height: 22px; object-fit: contain; display: block; }

/* .tab.active — bianco al 10% con bordo bianco, non blu. */
.tabbar__item.is-active {
    background-color: rgba(255, 255, 255, .1);
    border-color: #fff;
    color: #fff;
}
.tabbar__item .badge-dot { box-shadow: 0 0 0 2px #111; }

/* ============================================================= contenuto === */
body.has-tabbar .screen {
    padding-top: calc(var(--sat) + var(--testa-top) + var(--testa-h) + 12px);
}
body.has-tabbar .content {
    padding-bottom: calc(var(--sab) + var(--barra-h) + 40px);
}
.content, .large-title { max-width: 1145px; }

.nav {
    position: static;
    padding-top: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.nav.is-scrolled { box-shadow: none; }
body.has-tabbar .nav__bar { height: auto; min-height: 0; }
body.has-tabbar .nav__title { display: none; }

/* Titolo di sezione = .tab-content h2: pillola centrata. */
.large-title {
    padding: 0 var(--gutter);
    margin-bottom: 20px;
}
.large-title h1 {
    padding: 10px;
    margin: 0 auto;
    background: var(--superficie);
    border-radius: var(--r-pill);
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
}
.large-title p { text-align: center; margin-top: 8px; color: var(--gray); }

/* ============================================================= superfici === */
.card, .list, .stat, .row, .input, .code-display, .code-chip,
input, select, textarea {
    background: var(--superficie);
    border: none;
    box-shadow: none;
}
.card, .stat { border-radius: var(--r-pill); }
.card { padding: 15px; margin-bottom: 15px; }

/* Nella versione precedente ogni riga era una pillola a se' (.ranking-card,
   .player-item: margin-bottom 15px, raggio 35px), non una lista raggruppata
   con i separatori. La .list torna a essere solo un contenitore. */
.list {
    background: transparent;
    overflow: visible;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.list > .row {
    background: var(--superficie);
    border-radius: var(--r-pill);
    padding: 15px;
    min-height: 0;
}
.row + .row::before { display: none; }   /* via i separatori */
.list__header, .list__footer { padding-left: var(--gutter); padding-right: var(--gutter); }

input, select, textarea, .input { border-radius: 25px; }

.sheet { border-radius: var(--r-xl) var(--r-xl) 0 0; background: #0f172a; }
.alert, .dialog { border-radius: var(--r-xl); background: #1e293b; }

/* =============================================================== bottoni === */
.btn { border-radius: 25px; padding: 12px 24px; }
.btn--lg { border-radius: 28px; }
.btn--sm { border-radius: 20px; padding: 8px 16px; }

/* ============================================================ classifica === */
/* .rank-number della vecchia app: numero grande grigio, niente pallino. */
.rank {
    width: auto;
    height: auto;
    flex: 0 0 auto;
    min-width: 52px;
    border-radius: 0;
    background: none;
    font-size: 2rem;
    font-weight: 700;
    color: #64748b;
    text-align: center;
    margin-right: 10px;
    place-items: center;
}
/* Dal quarto in poi il numero era preceduto da "#". */
.rank--n { white-space: nowrap; min-width: 62px; display: block; line-height: 1.1; }
.rank--n::before { content: "#"; }
.rank--1, .rank--2, .rank--3 {
    color: transparent;
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center;
    min-height: 44px;
}
.rank--1 { background-image: url(../../img/primo.png); }
.rank--2 { background-image: url(../../img/secondo.png); }
.rank--3 { background-image: url(../../img/terzo.png); }
.rank--1, .rank--2, .rank--3 { min-width: 52px; }

/* ========================================================== statistiche === */
.stat { padding: 10px; min-width: 0; }
.stat__value {
    color: var(--blue);
    font-weight: 700;
    font-size: 1.25rem;
    /* Con Dynamic Type al massimo "600,00 €" usciva dalla card. */
    overflow-wrap: anywhere;
    min-width: 0;
}
.stat__label { color: #94a3b8; font-size: .875rem; overflow-wrap: anywhere; }
.stat-grid { min-width: 0; }
.amount--pos { color: var(--green); }
.amount--neg { color: var(--red); }

/* ================================================================ tabelle === */
table { width: 100%; border-collapse: collapse; }
th { background: var(--superficie) !important; padding: 10px; text-align: left; }
td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }

/* ============================================ safe area, come iOS 26 fix === */
@supports (padding: max(0px)) {
    body { padding-top: max(0px, env(safe-area-inset-top)); }
}

/* ============================================================================
 * CONFORMITA' ALLE HUMAN INTERFACE GUIDELINES
 * ----------------------------------------------------------------------------
 * Correzioni misurate sull'app reale, senza cambiare l'identita' visiva.
 * Ogni voce riporta il valore rilevato prima dell'intervento.
 * ========================================================================== */

/* --- 1. Aree di tocco: minimo 44x44 pt -----------------------------------
 * Rilevati: .apphead__btn 45x43, .segmented__item 177x28.
 * Apple: "Provide ample touch targets... at least 44x44 pt".
 * ------------------------------------------------------------------------ */
.apphead__btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    padding: 0;
    flex: 0 0 44px;
}
/* Il selettore stagione: 44pt di altezza utile e forma a pillola come la
   coppia "STAGIONE | anno" della versione precedente. */
/* Il selettore stagione: la zona toccabile e' la voce, quindi deve essere
   lei ad arrivare a 44pt, non il contenitore. Il cursore resta rientrato. */
.segmented { min-height: 44px; padding: 0; border-radius: var(--r-pill); }
.segmented__item { min-height: 44px; border-radius: var(--r-pill); }
.segmented__thumb { top: 3px; bottom: 3px; border-radius: var(--r-pill); }

.btn { min-height: 44px; }
.btn--sm { min-height: 44px; padding: 10px 16px; }
.row--tap, .list > .row { min-height: 44px; }
.nav__btn { min-height: 44px; min-width: 44px; }
.tabbar__item { min-height: 54px; }

/* --- 2. Contrasto: 4.5:1 sul testo normale, 3:1 su quello grande ---------
 * Rilevati: bianco su #3b82f6 = 3,68:1 ; iniziali bianche sugli avatar da
 * 1,51:1 ; glifi bianchi sulle icone quadrate da 1,93:1.
 * ------------------------------------------------------------------------ */

/* Il blu pieno passa a #2563eb (bianco sopra: 5,17:1). Non e' un colore
   nuovo: era gia' il :hover di .btn nella versione precedente. Il #3b82f6
   resta come tinta del testo, dove su fondo scuro fa 4,63:1. */
/* Solo il pulsante primario. Elencare le eccezioni con :not() era fragile:
   .btn--destructive non era escluso e il pulsante rosso sarebbe diventato blu.
   Qui si parte dal .btn nudo e le varianti, che vengono dopo, lo sovrascrivono. */
.btn {
    background: #2563eb;
    color: #fff;
}
.btn--tinted { background: color-mix(in srgb, var(--blue) 18%, transparent); color: #93b8fb; }
.btn--gray { background: var(--fill-3); color: var(--label); }
.btn--plain { background: none; color: #93b8fb; }
/* Bianco su #dc2626: 5,25:1 (su #ef4444 era 3,76). */
.btn--destructive { background: #dc2626; color: #fff; }
.btn--destructive-tinted {
    background: color-mix(in srgb, var(--red) 16%, transparent);
    color: #fca5a5;
}
.tabbar__item.is-active { background-color: rgba(255, 255, 255, .14); }

/* Le icone quadrate ricevono il colore in linea dalle viste. Un velo interno
   le scurisce senza toccare il glifo, che viene disegnato sopra l'ombra. */
.row__icon {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .40);
    width: 32px; height: 32px; flex-basis: 32px;
}

/* --- 3. Dynamic Type -----------------------------------------------------
 * Tutta la scala tipografica e' gia' in rem: agganciando la radice a
 * -apple-system-body l'intera interfaccia segue la dimensione del testo
 * scelta in Impostazioni > Schermo e luminosita' > Dimensioni testo.
 * ------------------------------------------------------------------------ */
@supports (font: -apple-system-body) {
    :root { font: -apple-system-body; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                        'Segoe UI', Roboto, system-ui, sans-serif; }
}

/* Le etichette della barra non scendono sotto gli 11 pt (erano 10,2) e non
   superano i 13: come fa Apple, l'etichetta della tab bar scala poco, cosi'
   la barra resta della stessa altezza anche alle dimensioni di accessibilita'.
   Verificato a 17, 23 e 28 px di radice: senza il tetto il testo si tagliava. */
.tabbar__item {
    font-size: clamp(11px, .6875rem, 13px);
    line-height: 1.05;
}
.tabbar__item > span {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

/* Alle dimensioni di testo piu' grandi la riga passa su due livelli invece
   di troncare: nessuna informazione sparisce. */
@media (min-width: 0px) {
    .row { flex-wrap: wrap; }
    .row__body { min-width: 55%; }
}

/* --- 4. Focus visibile ---------------------------------------------------
 * Serve a tastiere esterne, Controllo interruttori e Controllo completo.
 * ------------------------------------------------------------------------ */
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}
.tabbar__item:focus-visible, .btn:focus-visible, .apphead__btn:focus-visible {
    outline-offset: 3px;
}

/* --- 5. Safe area --------------------------------------------------------
 * La barra bassa resta sopra l'indicatore Home; il contenuto non ci finisce
 * sotto. Su iPhone senza notch il valore e' 0 e i margini restano invariati.
 * ------------------------------------------------------------------------ */
.tabbar { bottom: calc(20px + var(--sab)); }
.apphead { top: calc(var(--testa-top) + var(--sat)); }
body.has-tabbar .content {
    padding-bottom: calc(var(--sab) + var(--barra-h) + 48px);
}

/* --- 6. Movimento ridotto ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .tabbar, .apphead, .sheet, .row, .btn { transition: none !important; }
    .view-enter, .stagger > * { animation: none !important; }
}

/* --- 7. Contrasto elevato ------------------------------------------------ */
@media (prefers-contrast: more) {
    :root {
        --superficie: rgba(255, 255, 255, .22);
        --label-2: #cbd5e1;
        --vetro-bordo: rgba(255, 255, 255, .55);
    }
    .rank { color: #9fb0c4; }
}

/* --- 8. Riposo per il pollice --------------------------------------------
 * Apple mette i comandi principali in basso. La barra e' gia' li'; i bottoni
 * primari delle schermate a pieno campo seguono la stessa logica.
 * ------------------------------------------------------------------------ */
.auth__actions { padding-bottom: max(16px, var(--sab)); }

/* ============================================================================
 * COERENZA CROMATICA E LIVELLI DI SOVRAPPOSIZIONE
 * ----------------------------------------------------------------------------
 * Tre difetti trovati aprendo "Nuova sessione":
 *
 *  1. Le due barre stavano a z-index 999, sopra la velatura (90), i fogli (95)
 *     e i dialoghi (100). Restavano accese mentre tutto il resto si scuriva, e
 *     un foglio dal basso finiva sotto la barra. Ora stanno sotto la velatura.
 *  2. Il dialogo usava #1e293b, un blu ardesia che non compare da nessun'altra
 *     parte: le superfici dell'app sono #ffffff1c su nero. Ora tutti gli strati
 *     sovrapposti condividono un unico fondo e lo stesso bordo delle barre.
 *  3. Le azioni del dialogo erano #3b82f6: 3,98:1 sul proprio fondo, sotto la
 *     soglia di 4,5. Passano al blu chiaro gia' usato dai bottoni tenui.
 * ========================================================================== */

:root {
    /* Fondo unico per fogli, dialoghi e menu di azione. */
    --sovrapposto: #151b26;
    --blu-chiaro:  #93b8fb;
    --rosso-chiaro: #fca5a5;
}

/* --- 1. Ordine degli strati ---------------------------------------------
 * contenuto < barre < velatura < foglio < dialogo < avviso a comparsa
 * ------------------------------------------------------------------------ */
.apphead { z-index: 46; }
.tabbar  { z-index: 45; }

/* La velatura copre anche le barre: durante un dialogo si scurisce tutto,
   come fa iOS. */
.scrim { z-index: 90; }

/* --- 2. Materiale condiviso dagli strati sovrapposti --------------------- */
.sheet,
.alert,
.dialog,
.action-sheet,
.action-sheet__group {
    background: var(--sovrapposto);
    border: 1px solid var(--vetro-bordo);
    box-shadow: var(--vetro-ombra), 0 8px 40px rgba(0, 0, 0, .55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.sheet { border-radius: 20px 20px 0 0; border-bottom: none; }
.alert, .dialog { border-radius: 20px; }
.action-sheet__group { border-radius: 20px; }

/* Le righe dentro gli strati restano la superficie dell'app. */
.sheet .card, .sheet .list > .row, .sheet .stat { background: var(--superficie); }

/* --- 3. Azioni leggibili -------------------------------------------------
 * Su #151b26: blu chiaro 8,62:1, rosso chiaro 9,09:1, grigio 6,73:1.
 * ------------------------------------------------------------------------ */
/* Tutte le azioni testuali degli strati sovrapposti usano lo stesso blu.
   Prima "Chiudi"/"Apri" del foglio erano #3b82f6 e l'"OK" del dialogo un
   altro valore ancora: due blu diversi a due dita di distanza. */
.alert__btn,
.action-sheet__btn,
.action-sheet__item,
.action-sheet__item--cancel,
.nav__btn,
.btn--plain,
.btn--tinted { color: var(--blu-chiaro); }
.alert__btn--destructive,
.action-sheet__btn--destructive,
.action-sheet__item--destructive { color: var(--rosso-chiaro); }
.nav__btn--strong { font-weight: 600; }

/* Un solo anello di messa a fuoco: l'input disegnava gia' il suo bordo
   interno e :focus-visible ne aggiungeva un secondo esterno. */
.input:focus, .code-input:focus { box-shadow: inset 0 0 0 2px var(--blu-chiaro); }
.input:focus-visible, .code-input:focus-visible, select.input:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--blu-chiaro);
}
.alert__msg { color: #cbd5e1; }
.alert__actions { border-top: .5px solid rgba(255, 255, 255, .16); }
.alert__btn + .alert__btn { border-left: .5px solid rgba(255, 255, 255, .16); }
.alert__actions--v .alert__btn + .alert__btn {
    border-left: none;
    border-top: .5px solid rgba(255, 255, 255, .16);
}

/* --- 4. Etichette dentro la pillola evidenziata --------------------------
 * Con 5 schede la voce e' larga 66px e alta 54: un raggio di 45px viene
 * ricalcolato dal browser in uno stadio, i cui lati curvi mangiano 27px per
 * parte e lasciano solo 12px di tratto dritto. L'etichetta finiva sopra la
 * curva. Un raggio piu' contenuto le restituisce spazio.
 * ------------------------------------------------------------------------ */
/* NIENTE position:relative qui: la barra e' position:fixed e un elemento
   fissato fa gia' da contenitore per i figli in posizione assoluta.
   Sovrascriverlo con relative la riportava nel flusso, staccandola dal fondo
   dello schermo di 164px. */

/* La pillola non e' piu' lo sfondo della scheda ma un elemento che scorre
   sotto le voci: cambiando scheda si sposta con una molla invece di
   scomparire da una parte e ricomparire dall'altra. */
.tabbar__thumb {
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: transform .42s var(--ease-spring),
                width     .42s var(--ease-spring),
                opacity   .2s  var(--ease-out);
}

.tabbar__item {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    padding-inline: 2px;
    justify-content: center;
    gap: 3px;
}

/* Lo stato attivo ora lo disegna la pillola: alla voce resta solo
   l'ingrandimento dell'icona. */
.tabbar__item.is-active {
    background-color: transparent;
    border-color: transparent;
}
.tabbar__item .tabbar__ico {
    transition: transform .42s var(--ease-spring);
}
.tabbar__item.is-active .tabbar__ico { transform: scale(1.12); }

/* Chi ha chiesto meno movimento non vede lo scorrimento. */
@media (prefers-reduced-motion: reduce) {
    .tabbar__thumb, .tabbar__item .tabbar__ico { transition: none !important; }
}
.tabbar__item > span {
    display: block;
    max-width: 100%;
    line-height: 1.1;
}