/* 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. Le animazioni usano solo transform e opacity.
   Tutte le scritte sono in Lilita One tranne le carte, che col carattere di
   sistema restano carte vere.
   Il foglio e' spezzato per schermata nei file stile-*.css, che index.html
   carica uno dopo l'altro: l'ordine dei link e' quello della cascata, come
   quando il foglio era uno solo. */

/* --- Pagina e pulsanti ---------------------------------------------------- */

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

/* I colori che un tema cambia: il panno, i pannelli, le tessere e i pulsanti.
   Valgono per la pagina e per un pezzo vestito col panno verde (temi.js), come
   il profilo di chi non ha un tema aperto da chi ce l'ha: li' dentro quelli
   del tema del gioco non arrivano. Il panno e' anche il colore della barra del
   telefono sopra quello che sta davanti: per questo c'e' anche nel pezzo
   vestito, che non lo usa. */
:root, .veste-verde {
    --bg: #1d3a30;
    --panel: #15302a;
    --sopra: #0e1e19;
    --sopra-luce: radial-gradient(ellipse at 50% 38%, #1d3c31 0%, #12261f 55%, #0b1813 100%);
    --tasto: rgba(255, 255, 255, 0.13);
    --tasto-luce: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
}

/* Il carattere del gioco: Lilita One, SIL Open Font License 1.1, con la
   licenza accanto. Il nome «Lilita» e' riservato, quindi il file resta
   com'e': tagliato o convertito dovrebbe chiamarsi in un altro modo. Ha un
   peso solo, dichiarato grassetto: le regole in grassetto lo prendono com'e',
   senza un grassetto finto sopra, e se il file non arriva resta il grassetto
   di sistema. block perche' sta nel precarico e arriva in un attimo: meglio
   quell'attimo senza scritte che il menu che cambia carattere sotto gli
   occhi. */
@font-face {
    font-family: 'Lilita One';
    src: url('/app/caratteri/LilitaOne-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: block;
}

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

/* Finche' main.js non ha tradotto le scritte la pagina non si vede: senza,
   chi gioca in spagnolo vedrebbe per un attimo il menu in italiano. Se il
   codice non arriva, dopo tre secondi si vede lo stesso. */
html.avvio body {
    visibility: hidden;
    -webkit-animation: appari 0s 3s forwards;
    animation: appari 0s 3s forwards;
}

@-webkit-keyframes appari {
    to { visibility: visible; }
}

@keyframes appari {
    to { visibility: visible; }
}

/* 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: 'Lilita One', -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. Vale con
   !important perche' le aree che scorrono lo dichiarano per id o con .sopra,
   che viene dopo, e senza vincerebbero loro. */
.senza-inerzia,
.senza-inerzia [data-scroll] {
    -webkit-overflow-scrolling: auto !important;
}

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: var(--tasto);
    background-image: var(--tasto-luce);
    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.premuto, .piccolo.premuto {
    -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;
}

/* il rosso per quello da cui non si torna indietro: abbandonare in rete,
   cancellare il conto */
.rosso {
    background-color: #d8453c;
    background-image: linear-gradient(#ee6b61, #d8453c 55%, #b3302a);
    color: #fff;
}

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