/* Rompi Bae. Il tavolo e' una colonna di fasce: il banco dell'avversario,
   il centro con pesca, pilastri e chiusi, il proprio banco, la mano, la
   barra con lo stato. I mazzetti stanno nell'angolo alla destra di ogni
   giocatore (per l'avversario, a sinistra di chi guarda) con la cornice
   d'oro: sono l'obiettivo del gioco. La misura della carta (--cw) la calcola
   main.js dalla finestra, cosi' la stessa regola vale dal telefono in
   verticale all'iPad. Niente gap nel flex e niente funzioni di confronto
   nelle misure: Safari 12. Le animazioni usano solo transform e opacity. */

:root {
    --bg: #1d3a30;
    --panel: #15302a;
    --fg: #f2f2f4;
    --cw: 52px;
    --ch: 74px;
    --raggio: 6px;
    --blu: #2f6fed;
    --verde: #2ecc40;
    --ambra: #f4a72e;
    --oro: #e0b44c;
}

html, body {
    height: 100%;
    margin: 0;
}

/* Il panno: piu' chiaro dove cadrebbe la luce, scuro ai bordi. Il tavolo ci
   sta sopra con le sue fasce, il menu e la sala lo lasciano vedere. */
body {
    position: fixed;
    width: 100%;
    overflow: hidden;
    background-color: var(--bg);
    background-image: radial-gradient(ellipse at 50% 30%, #2b5646 0%, #204035 45%, #16291f 100%);
    color: var(--fg);
    font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

[hidden] {
    display: none !important;
}

/* iOS tiene in vita il livello di composizione di un'area con
   -webkit-overflow-scrolling: touch anche quando il genitore finisce in
   display:none, e quel pezzo di schermata resta dipinto sopra a quella nuova.
   schermate.js mette questa classe un attimo prima di nascondere. */
.senza-inerzia,
.senza-inerzia [data-scroll] {
    -webkit-overflow-scrolling: auto;
}

img {
    -webkit-user-drag: none;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
    outline: none;
}

/* I pulsanti sono placche: un filo di luce sopra, ombra sotto, e sotto il
   dito scendono. Senza, sul panno restavano macchie piatte. */
.grande, .piccolo {
    display: inline-block;
    box-sizing: border-box;
    border-radius: 32px;
    background-color: rgba(255, 255, 255, 0.13);
    background-image: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -2px 0 rgba(0, 0, 0, 0.16) inset,
        0 5px 14px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-weight: bold;
    white-space: nowrap;
    -webkit-transition: -webkit-transform 0.1s ease, box-shadow 0.1s ease;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.grande {
    min-height: 62px;
    padding: 0 30px;
    font-size: 20px;
}

.piccolo {
    min-height: 42px;
    padding: 0 18px;
    font-size: 15px;
}

.grande.is-pressed, .piccolo.is-pressed {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 6px rgba(0, 0, 0, 0.34);
}

/* L'oro e' l'azione principale, il blu quella di contorno: sono i due colori
   che il tavolo usa gia' per il mazzetto e per i bersagli */
.oro {
    background-color: var(--oro);
    background-image: linear-gradient(#f2d27e, #dfb24a 55%, #c1942f);
    color: #2a1c06;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.blu {
    background-color: var(--blu);
    background-image: linear-gradient(#4d86f4, #2f6fed 55%, #1f57c6);
    color: #fff;
}

.etichetta {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.72;
    white-space: nowrap;
}

/* --- Menu ------------------------------------------------------------------- */

/* Il menu si centra quando ci sta e scorre quando non ci sta: con riprendi,
   punteggio e avviso di aggiornamento tutti fuori, su un telefono piccolo non
   ci starebbe. Il margine automatico sul contenuto centra senza tagliare
   sopra, che e' il difetto di justify-content: center con l'overflow. */
#menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px 24px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#menu-dentro {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#logo {
    width: 104px;
    height: 104px;
    -webkit-filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
    -webkit-animation: galleggia 5s ease-in-out infinite;
    animation: galleggia 5s ease-in-out infinite;
}

@-webkit-keyframes galleggia {
    0%, 100% { -webkit-transform: translateY(0) rotate(-1deg); }
    50% { -webkit-transform: translateY(-7px) rotate(1deg); }
}

@keyframes galleggia {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}

/* Il titolo in oro spazzolato: il colore pieno resta per chi non ritaglia lo
   sfondo sul testo */
#menu h1 {
    margin: 10px 0 4px;
    font-size: 38px;
    letter-spacing: 0.03em;
    color: var(--oro);
    background-image: linear-gradient(#fbeec2, #e0b44c 55%, #b98c28);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Chi arriva dal link non sa cos'e': una riga sotto il titolo lo dice prima
   dei pulsanti. Stretta quanto il pulsante, cosi' su un telefono va su due
   righe invece di allargare il menu. */
#motto {
    max-width: 300px;
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
    opacity: 0.8;
}

#menu .fila {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#menu .fila > * {
    margin: 6px;
}

#menu-dentro > .grande {
    width: 100%;
    max-width: 300px;
    margin-bottom: 12px;
}

#menu .minori {
    margin-top: 12px;
}

/* Finche' non l'ha fatto, il tutorial si fa notare; dopo si mette in riga
   con gli altri pulsanti piccoli */
#tutorial {
    border: 1px solid rgba(224, 180, 76, 0.55);
    color: var(--oro);
}

#tutorial.fatto {
    border-color: transparent;
    color: inherit;
    opacity: 0.7;
}

/* Il punteggio sta sotto al titolo, su una riga d'oro: e' il motivo per cui
   uno torna a giocare */
#punteggio {
    margin: 2px 0 22px;
    padding-top: 10px;
    border-top: 1px solid rgba(224, 180, 76, 0.35);
    font-size: 14px;
    color: var(--oro);
    opacity: 0.85;
    text-align: center;
}

/* Un campo di testo dentro un pannello sovrapposto: i nomi dei due giocatori,
   il nickname, la ricerca di un amico */
.campo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 280px;
    margin-bottom: 14px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.campo input, #online-nick, #online-cerca {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    margin-top: 6px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.26);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) inset;
    color: var(--fg);
    font: inherit;
    font-size: 18px;
    letter-spacing: normal;
    text-transform: none;
    outline: none;
    -webkit-user-select: text;
    user-select: text;
    -webkit-appearance: none;
}

#aggiornamento {
    margin: 20px 0 0;
    font-size: 16px;
}

/* In basso a destra: che versione gira su questo dispositivo, e il giro per
   andare a cercarne una nuova. Prima l'unico modo di sapere se l'aggiornamento
   era arrivato era accorgersi che a schermo c'era una cosa nuova. Sta fissa
   nella finestra ma e' figlia del menu, quindi si vede solo li'. */
#versione {
    position: fixed;
    right: calc(env(safe-area-inset-right, 0px) + 14px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 13px;
    white-space: nowrap;
    opacity: 0.65;
}

#versione svg {
    width: 15px;
    height: 15px;
    margin-right: 7px;
}

#versione.is-pressed {
    opacity: 0.4;
}

/* mentre cerca, il giro gira */
#versione.cerca svg {
    -webkit-animation: giro 0.9s linear infinite;
    animation: giro 0.9s linear infinite;
}

@-webkit-keyframes giro {
    to { -webkit-transform: rotate(360deg); }
}

@keyframes giro {
    to { transform: rotate(360deg); }
}

#ios-strip, #install {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    min-height: 56px;
    padding: 0 22px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 16px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

#install {
    background: var(--blu);
    font-weight: bold;
}

/* --- Guida del tutorial ------------------------------------------------------ */

/* Sta sopra al banco dell'avversario, che nel tutorial non fa niente: le
   spiegazioni nella barra in fondo erano troppo piccole per essere lette
   mentre si gioca. */
#guida {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    left: 6px;
    right: 6px;
    z-index: 20;
    box-sizing: border-box;
    padding: 8px 14px 10px;
    border: 1px solid rgba(224, 180, 76, 0.4);
    border-radius: 14px;
    background-color: rgba(9, 24, 19, 0.93);
    background-image: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(6px);
    text-align: center;
}

#guida-passo {
    display: inline-block;
    margin-bottom: 3px;
    padding: 2px 9px;
    border-radius: 10px;
    background: rgba(224, 180, 76, 0.18);
    color: var(--oro);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.08em;
}

#guida-titolo {
    margin: 0 0 3px;
    font-size: 18px;
    font-weight: bold;
}

#guida-testo {
    margin: 0 auto;
    max-width: 480px;
    font-size: 15px;
    line-height: 1.32;
    opacity: 0.9;
}

/* Mossa sbagliata: la guida trema, invece di lasciare che uno riprovi
   senza capire che non e' successo niente */
#guida.scuote {
    -webkit-animation: scossa 0.4s ease;
    animation: scossa 0.4s ease;
}

@-webkit-keyframes scossa {
    0%, 100% { -webkit-transform: translateX(0); }
    20% { -webkit-transform: translateX(-7px); }
    40% { -webkit-transform: translateX(6px); }
    60% { -webkit-transform: translateX(-4px); }
    80% { -webkit-transform: translateX(2px); }
}

@keyframes scossa {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

#guida-avanti {
    margin-top: 12px;
    -webkit-animation: entra 0.25s ease;
    animation: entra 0.25s ease;
}

@-webkit-keyframes entra {
    from { opacity: 0; -webkit-transform: translateY(6px); }
}

@keyframes entra {
    from { opacity: 0; transform: translateY(6px); }
}

/* --- Tavolo ----------------------------------------------------------------- */

#tavolo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    display: flex;
    flex-direction: column;
}

.banco {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

#avversario {
    background: var(--panel);
    padding-bottom: 6px;
}

.intestazione {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 12px 4px;
    font-size: 14px;
}

.intestazione .nome {
    font-weight: bold;
    font-size: 15px;
}

.intestazione .mano-conto {
    opacity: 0.8;
}

/* altezze fisse e non in percentuale: la sovrapposizione delle carte in
   colonna le legge, e Safari 12 non risolve bene le percentuali nel flex */
/* Le colonne stanno in mezzo alla riga, esattamente come i pilastri, e il
   mazzetto e' appoggiato di fianco fuori dal flusso: tenendolo in fila le
   colonne finivano spostate di mezzo mazzetto, in un verso in alto e
   nell'altro in basso, e su uno schermo largo si vedeva. */
.fila-banco {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 8px;
}

#avversario .fila-banco, #avversario .colonne, #avversario .colonna {
    height: calc(var(--ch) * 1.5);
}

#proprio {
    padding-top: 8px;
}

#proprio .fila-banco, #proprio .colonne, #proprio .colonna {
    height: calc(var(--ch) * 2.4);
}

/* il mazzetto: piu' grande, con la cornice d'oro e il conto in evidenza */
.mazzetto {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--cw) * 1.12);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#avversario .mazzetto {
    position: absolute;
    top: 0;
    right: 50%;
    margin-right: calc(var(--cw) * 2.3 + var(--stacco));
}

#proprio .mazzetto {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: calc(var(--cw) * 2.3 + var(--stacco));
}

.mazzetto .carta {
    width: calc(var(--cw) * 1.12);
    height: calc(var(--ch) * 1.12);
    box-shadow: 0 0 0 3px var(--oro), 0 2px 10px rgba(0, 0, 0, 0.6);
}

.mazzetto .carta.vuota {
    box-shadow: none;
    border-color: var(--oro);
}

.mazzetto .carta .valore {
    font-size: calc(var(--cw) * 0.34);
}

.mazzetto .conto {
    position: absolute;
    top: -10px;
    right: -10px;
    min-width: 26px;
    padding: 0 7px;
    border-radius: 13px;
    background: var(--oro);
    color: #1c1c1e;
    font-size: 14px;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.mazzetto.finito .conto {
    background: var(--verde);
}

.mazzetto .etichetta {
    margin-top: 6px;
    color: var(--oro);
    opacity: 0.9;
}

.colonne {
    flex: 0 1 calc(var(--cw) * 4.6);
    display: flex;
    justify-content: space-between;
}

.colonna {
    position: relative;
    width: var(--cw);
    border-radius: var(--raggio);
}

.colonna .carta {
    position: absolute;
    top: 0;
    left: 0;
}

#centro {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 8px 6px;
    background: rgba(0, 0, 0, 0.18);
}

.zona {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 calc(var(--cw) * 0.05);
}

.zona .etichetta {
    margin-top: 5px;
}

.pila {
    position: relative;
    width: var(--cw);
    height: var(--ch);
}

.pila .conto {
    position: absolute;
    right: -8px;
    top: -8px;
    min-width: 22px;
    padding: 0 6px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

#pilastri {
    display: flex;
}

/* stesso passo delle colonne (1.2 carte), senno' le due file non si
   incolonnano */
.pilastro {
    position: relative;
    width: var(--cw);
    height: var(--ch);
    margin: 0 calc(var(--cw) * 0.1);
    border-radius: var(--raggio);
}

/* la mano prende lo spazio che resta e sta in basso, vicino ai pollici */
#mano-zona {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px 6px;
}

#mano-etichetta {
    margin-bottom: 6px;
}

#mano {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: calc(var(--ch) + 14px);
}

#mano .carta {
    margin: 0 calc(var(--cw) * 0.06);
}

/* la barra dice cosa succede e cosa fare */
#barra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 6px 10px 8px;
    background: var(--panel);
}

#stato {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
    text-align: center;
}

#stato-titolo {
    font-size: 16px;
    font-weight: bold;
}

#stato-testo {
    font-size: 13px;
    line-height: 1.25;
    opacity: 0.82;
}

#passo {
    background: var(--ambra);
    color: #1c1c1e;
}

/* --- Carte ------------------------------------------------------------------ */

.carta {
    position: relative;
    box-sizing: border-box;
    width: var(--cw);
    height: var(--ch);
    border-radius: var(--raggio);
    background: #fdfdfb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    color: #1c1c1e;
}

.carta.rossa {
    color: #c8202a;
}

.carta .valore {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: calc(var(--cw) * 0.3);
    font-weight: bold;
    line-height: 1;
}

.carta .valore.giu {
    top: auto;
    left: auto;
    right: 5px;
    bottom: 3px;
    transform: rotate(180deg);
}

.carta .seme {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46%;
    height: 46%;
    margin: -23% 0 0 -23%;
    fill: currentColor;
}

/* una carta sotto un'altra: un bordo scuro che spunta */
.carta.impilata {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 2px 2px 0 0 #b9b9b4, 3px 3px 2px rgba(0, 0, 0, 0.4);
}

.mazzetto .carta.impilata {
    box-shadow: 0 0 0 3px var(--oro), 3px 3px 0 0 #b9b9b4, 4px 4px 3px rgba(0, 0, 0, 0.5);
}

.carta.dorso {
    background: #3a5b9c;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 4px, transparent 4px 10px);
    border: 3px solid #f2f2f4;
}

.carta.dorso.accantonata {
    background-color: #6b4c8a;
}

.carta.vuota {
    background: none;
    border: 2px dashed rgba(255, 255, 255, 0.28);
    box-shadow: none;
}

/* sorgenti e bersagli */
.carta.giocabile {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.mazzetto .carta.giocabile {
    box-shadow: 0 0 0 3px var(--oro), 0 0 14px var(--oro);
    animation: pulsa 1.2s ease-in-out infinite;
}

.carta.scelta {
    box-shadow: 0 0 0 3px var(--blu), 0 0 12px var(--blu);
    transform: translateY(-6px);
}

#mano .carta.scelta {
    transform: translateY(-12px);
}

.pilastro.bersaglio .carta, .colonna.bersaglio .carta:last-child, .colonna.bersaglio .carta.vuota {
    box-shadow: 0 0 0 3px var(--verde), 0 0 14px var(--verde);
}

.colonna.rompe .carta:last-child {
    box-shadow: 0 0 0 3px var(--ambra), 0 0 14px var(--ambra);
}

/* il segno di stop sulla colonna che chiuderebbe il turno */
.colonna.rompe::after {
    content: '';
    position: absolute;
    top: -7px;
    right: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ambra);
    box-shadow: 0 0 0 2px var(--bg);
    z-index: 1;
}

.carta.is-pressed {
    opacity: 0.85;
}

/* la carta vera resta nascosta finche' il suo clone non arriva */
.carta.in-volo {
    visibility: hidden;
}

#tavolo.turno-bot #mano .carta,
#tavolo.turno-bot #proprio .carta,
#tavolo.turno-bot .pilastro {
    pointer-events: none;
}

/* --- Animazioni: cloni, lampi, coriandoli, banner ----------------------------- */

#strato {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

.clone {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}

.lampo {
    box-sizing: border-box;
    border-radius: var(--raggio);
    border: 4px solid var(--oro);
    box-shadow: 0 0 18px var(--oro);
    animation: lampo 0.8s ease-out forwards;
}

.coriandolo {
    position: fixed;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    z-index: 21;
    animation: coriandolo 1.1s ease-in forwards;
}

.batte {
    animation: batte 0.45s ease;
}

#banner {
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 15;
    box-sizing: border-box;
    max-width: 90%;
    padding: 14px 30px;
    border-radius: 40px;
    background: rgba(14, 30, 25, 0.94);
    box-shadow: 0 0 0 2px var(--oro), 0 10px 30px rgba(0, 0, 0, 0.5);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
}

#banner.visibile {
    animation: banner 1.6s ease forwards;
}

@keyframes lampo {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.9); }
}

@keyframes coriandolo {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    35% { transform: translate(calc(var(--dx) * 0.4), -70px) rotate(200deg); opacity: 1; }
    100% { transform: translate(var(--dx), 170px) rotate(560deg); opacity: 0; }
}

@keyframes batte {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

@keyframes pulsa {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes banner {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    25% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

/* --- Veli ------------------------------------------------------------------- */

/* I pannelli sopra il tavolo. Come il menu, si centrano quando ci stanno e
   scorrono quando non ci stanno: la schermata di fine partita ha fino a tre
   righe di testo e tre pulsanti, e su un telefono piccolo si accavallavano. */
.sopra {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    box-sizing: border-box;
    padding: 28px 24px;
    background-color: #0e1e19;
    background-image: radial-gradient(ellipse at 50% 38%, #1d3c31 0%, #12261f 55%, #0b1813 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
}

.sopra > * {
    flex: 0 0 auto;
}

.sopra .grande {
    width: 100%;
    max-width: 300px;
    margin-bottom: 12px;
}

.sopra .piccolo {
    margin-bottom: 6px;
}

/* dopo i pulsanti, senno' il loro margine vince e il pannello si appoggia in
   fondo invece di stare in mezzo */
.sopra > :first-child {
    margin-top: auto;
}

.sopra > :last-child {
    margin-bottom: auto;
}

.sopra p {
    margin: 0 0 20px;
    font-size: 22px;
}

.sopra p.nota {
    font-size: 15px;
    opacity: 0.7;
}

#fine-testo {
    font-size: 32px;
    font-weight: bold;
}

#fine-dettaglio {
    opacity: 0.8;
    font-size: 17px;
}

#fine-menu {
    margin-top: 14px;
}

/* Analisi: l'elenco delle mosse giudicate sta in una schermata a se', e
   rivedere una posizione riapre il tavolo vero in sola lettura, con la barra
   di sotto al posto di quella di gioco. Cosi' non c'e' un secondo tavolo da
   tenere in piedi. */

#analisi, #online {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
    display: flex;
    flex-direction: column;
}

#analisi {
    background: var(--bg);
}

.testata {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--panel);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.testata .piccolo {
    margin-right: 12px;
}

#analisi-titolo, #online-nome {
    font-size: 17px;
    font-weight: bold;
}

#online-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 24px;
    text-align: center;
}

#online-corpo .grande, #online-corpo .piccolo {
    margin: 8px 4px;
}

#online-nick {
    max-width: 280px;
    text-align: center;
}

#online-cerca {
    width: 170px;
    margin: 0 8px 0 0;
    min-height: 42px;
    font-size: 15px;
}

#online-corpo .fila {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
}

.grosso {
    margin: 26px 0 8px;
    font-size: 25px;
    font-weight: bold;
}

/* Un titoletto di sezione con la riga d'oro sopra: separa la sala in blocchi
   senza mettere un pannello dentro un pannello */
.titoletto {
    position: relative;
    margin: 30px auto 10px;
    max-width: 380px;
    padding-top: 12px;
    border-top: 1px solid rgba(224, 180, 76, 0.28);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}

.spiega {
    margin: 4px auto 0;
    max-width: 340px;
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.6;
}

#online-punti {
    margin: 14px 0 4px;
    font-size: 15px;
    opacity: 0.75;
}

#online-attesa {
    margin: 6px 0 0;
    font-size: 15px;
}

#online-errore {
    margin: 14px 0 0;
    font-size: 15px;
    color: var(--ambra);
}

/* In fondo e in tono minore: c'e' quando serve, e prima di fare qualcosa
   chiede */
#online-cancella {
    margin: 34px auto 6px;
    opacity: 0.6;
}

/* Le righe della sala sono placche come i pulsanti, ma appoggiate: luce
   sopra, ombra corta sotto. Il bordo a sinistra dice lo stato senza scriverlo
   una seconda volta. */
.riga-conto {
    position: relative;
    display: flex;
    align-items: center;
    margin: 6px auto;
    max-width: 380px;
    padding: 11px 14px 11px 16px;
    border-radius: 12px;
    background-color: var(--panel);
    background-image: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.09) inset,
        0 3px 8px rgba(0, 0, 0, 0.28);
    text-align: left;
    font-size: 16px;
    overflow: hidden;
}

.riga-conto::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: rgba(255, 255, 255, 0.14);
}

.riga-conto.libero::before {
    background: var(--verde);
}

.riga-conto.in-partita::before {
    background: var(--ambra);
}

.riga-conto.chiede::before {
    background: var(--blu);
}

.riga-conto .stato {
    margin-left: auto;
    padding-left: 10px;
    font-size: 13px;
    opacity: 0.55;
}

.riga-conto .piccolo {
    margin: 0 0 0 10px;
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
}

.riga-conto.io {
    background-color: #1d3f5e;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 3px 10px rgba(0, 0, 0, 0.34);
}

.riga-conto.io::before {
    background: var(--blu);
}

/* Il podio: oro, argento, bronzo. Sotto, il numero e basta. */
.riga-conto .posto {
    width: 30px;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: bold;
    opacity: 0.5;
}

.riga-conto.podio1 .posto { color: var(--oro); opacity: 1; }
.riga-conto.podio2 .posto { color: #cfd4d8; opacity: 1; }
.riga-conto.podio3 .posto { color: #cd8f52; opacity: 1; }

.riga-conto .punti {
    margin-left: auto;
    padding-left: 10px;
    font-size: 14px;
    opacity: 0.75;
    white-space: nowrap;
}

/* --- Il pannello dei livelli ------------------------------------------------- */

/* Le stesse placche della sala, che qui sono l'elenco degli avversari. Il filo
   a sinistra sale di temperatura col livello: l'ordine si vede prima di
   leggere i nomi. */
#livelli-lista {
    width: 100%;
    max-width: 380px;
    margin-bottom: 14px;
}

.livello {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0;
    padding: 11px 14px 12px 18px;
    border-radius: 12px;
    background-color: var(--panel);
    background-image: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.09) inset,
        0 3px 8px rgba(0, 0, 0, 0.28);
    text-align: left;
    overflow: hidden;
}

.livello::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: rgba(255, 255, 255, 0.14);
}

.livello[data-livello="novizio"]::before { background: var(--verde); }
.livello[data-livello="dispettoso"]::before { background: #8fbf3f; }
.livello[data-livello="rompiscatole"]::before { background: var(--ambra); }
.livello[data-livello="rompiballe"]::before { background: #d63b3b; }

.livello b {
    font-size: 17px;
}

.livello .conto {
    float: right;
    padding-left: 10px;
    font-size: 13px;
    font-style: normal;
    opacity: 0.6;
    white-space: nowrap;
}

.livello span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    opacity: 0.7;
}

/* Quello con cui si gioca adesso: lo stesso blu con cui la sala segna te */
.livello.scelto {
    background-color: #1d3f5e;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 3px 10px rgba(0, 0, 0, 0.34);
}

.livello.is-pressed {
    opacity: 0.75;
}

/* I tre puntini mentre si aspetta un avversario */
#online-attesa i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--oro);
    -webkit-animation: pulsa 1.2s ease-in-out infinite;
    animation: pulsa 1.2s ease-in-out infinite;
}

#online-attesa i + i { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
#online-attesa i + i + i { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }

@-webkit-keyframes pulsa {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

@keyframes pulsa {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

#analisi-avanti {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 10px 12px;
}

#analisi-barra {
    flex: 1 1 auto;
    height: 6px;
    margin-right: 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

#analisi-barra i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--blu);
    -webkit-transition: width 0.2s linear;
    transition: width 0.2s linear;
}

#analisi-elenco {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 12px 20px;
}

#analisi-somma {
    padding: 12px 0 4px;
}

#analisi-somma b {
    font-size: 30px;
}

/* Accanto al numero, non sotto: cosi' si leggono insieme */
#analisi-verdetto {
    margin-left: 10px;
    font-size: 17px;
    opacity: 0.8;
}

#analisi-somma p {
    margin: 6px 0 0;
    font-size: 14px;
    opacity: 0.7;
}

.an-conteggio {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 6px;
}

.an-conteggio span {
    margin: 3px 14px 3px 0;
    font-size: 14px;
}

.an-turno {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    opacity: 0.6;
}

.an-mossa {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0;
    padding: 9px 10px;
    border-radius: var(--raggio);
    background: var(--panel);
    text-align: left;
    font-size: 15px;
}

.an-mossa.is-pressed {
    opacity: 0.7;
}

.an-mossa .perdita {
    float: right;
    margin-left: 10px;
    font-size: 13px;
    opacity: 0.65;
}

/* Il colore del giudizio sta sul contenitore, e se lo prendono il pallino, la
   tacca nella striscia e il filo della carta: i sei colori si scrivono una
   volta sola invece di tre. */
.g-geniale { --g: #56c8f0; }
.g-ottima { --g: var(--verde); }
.g-buona { --g: #8fbf3f; }
.g-imprecisione { --g: var(--ambra); }
.g-errore { --g: #e8703a; }
.g-grave { --g: #d63b3b; }

.pallino {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--g, var(--verde));
}

/* La striscia della partita: una tacca per mossa giudicata, in ordine. Da
   lontano si vede dov'e' il rosso, che e' l'unica cosa che si cerca aprendo
   un'analisi. Alta abbastanza da prenderla col dito. */
.an-striscia {
    display: flex;
    height: 24px;
    margin: 14px 0 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

/* Le tacche si dividono la larghezza in parti uguali, senza stacco: una
   partita lunga sono piu' di cento mosse, e con un margine per tacca la coda
   della partita finiva fuori dalla striscia. Quelle vicine dello stesso colore
   si fondono in una fascia, che e' poi come si legge. */
.an-striscia i {
    flex: 1 1 0%;
    background: var(--g, var(--verde));
}

.an-striscia i.is-pressed {
    opacity: 0.6;
}

.an-titolo {
    margin: 20px 0 8px;
}

.an-titolo b {
    display: block;
    font-size: 17px;
}

.an-titolo span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    opacity: 0.6;
}

/* Le mosse da rivedere sono placche come le righe della sala, non voci di un
   elenco: ognuna e' un discorso di quattro righe, e il filo a sinistra dice
   quanto e' costata. */
.an-carta {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
    padding: 10px 14px 12px 18px;
    border-radius: 12px;
    background-color: var(--panel);
    background-image: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.09) inset,
        0 3px 8px rgba(0, 0, 0, 0.28);
    text-align: left;
    overflow: hidden;
}

.an-carta::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--g, var(--verde));
}

.an-carta.is-pressed {
    opacity: 0.75;
}

.an-testa {
    display: flex;
    align-items: baseline;
    margin-bottom: 4px;
}

.an-testa b {
    font-size: 16px;
    color: var(--g, var(--fg));
}

.an-testa span {
    margin-left: auto;
    padding-left: 10px;
    font-size: 13px;
    opacity: 0.55;
    white-space: nowrap;
}

.an-carta p {
    margin: 3px 0 0;
    font-size: 15px;
    line-height: 1.35;
}

.an-carta .an-meglio {
    color: var(--oro);
}

.an-carta .an-perche {
    opacity: 0.8;
}

/* La regola generale e' l'unica riga che serve anche la prossima partita:
   staccata, e detta una volta sola in tutta la schermata. */
.an-carta .an-regola {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    font-style: italic;
    opacity: 0.75;
}

.an-vincevi {
    color: var(--oro);
}

.an-tutte {
    display: block;
    margin: 22px auto 0;
}

/* In revisione i comandi prendono il posto di Menu e Passo dentro la stessa
   barra: una seconda barra sotto sfonderebbe l'altezza del tavolo */
#barra-analisi {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

#barra-analisi .piccolo {
    padding: 8px 10px;
    font-size: 14px;
}

#an-prima, #an-dopo {
    min-width: 34px;
    text-align: center;
}

#an-quale {
    margin: 0 2px;
    font-size: 12px;
    opacity: 0.7;
}

#regole > :first-child,
#regole > :last-child,
#privacy > :first-child,
#privacy > :last-child {
    margin-top: 0;
    margin-bottom: 0;
}

/* Il pannello Privacy e' fatto come le regole: un blocco di testo lungo
   che scorre, allineato a sinistra */
#regole,
#privacy {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
    text-align: left;
}

#regole .testo,
#privacy .testo {
    max-width: 560px;
    font-size: 17px;
    line-height: 1.45;
}

#regole h2,
#privacy h2 {
    margin: 0 0 12px;
}

#regole p,
#privacy p {
    margin: 0 0 12px;
    font-size: 17px;
}

#regole-chiudi,
#privacy-chiudi {
    flex-shrink: 0;
    margin: 12px 0 24px;
}

/* La spunta del conteggio: una riga sola, non un campo come i nomi */
#privacy .spunta {
    margin: 18px 0 6px;
}

#privacy .spunta label {
    display: flex;
    align-items: center;
}

#privacy .spunta input {
    width: 22px;
    height: 22px;
    margin: 0 10px 0 0;
    flex-shrink: 0;
}

/* I link del gioco: le mance, il canale e la firma. Senza una regola
   erediterebbero il blu del browser sul panno verde, che non si legge. */
#mance, #canale, #firma {
    margin: 16px 0 0;
    font-size: 14px;
    opacity: 0.65;
}

#mance a, #canale a, #firma a, #fine-canale a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#canale {
    margin-top: 6px;
}

/* A fine partita l'invito al canale e' una riga sotto i pulsanti, non un
   pulsante in piu' */
#fine-canale {
    margin-top: 12px;
}

#canale a, #fine-canale a {
    display: inline-block;
    padding: 6px 4px;
}

/* La firma e' una riga sola, ma il dito deve avere dove posarsi */
#firma {
    margin-top: 10px;
    font-size: 13px;
}

#firma a {
    display: inline-block;
    padding: 8px 6px;
}