/* Il menu, col pulsante di Puzzle, e il cartello del puzzle del giorno. */

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

/* Il menu si centra quando ci sta e scorre quando non ci sta: con riprendi e
   avviso di aggiornamento tutti e due 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.
   Scorre solo in verticale: su iPhone, col tema acceso, qualcosa sbordava di
   lato (in Chrome niente) e il menu ballava sotto il dito. */
#menu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px calc(env(safe-area-inset-bottom, 0px) + 14px);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Non si stringe quando il menu non ci sta: la versione, che gli viene dopo,
   finirebbe sopra quello che ne esce */
#menu-dentro {
    flex-shrink: 0;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Il logo e' anche il tasto dei temi (temi.js), e galleggia insieme al
   pennello nell'angolo. Il pennello c'e' solo quando c'e' un tema da
   scegliere o da annunciare: senza, il tocco passa oltre e non fa neanche il
   click. */
#tema-apri {
    position: relative;
    display: block;
    width: 104px;
    height: 104px;
    -webkit-animation: galleggia 5s ease-in-out infinite;
    animation: galleggia 5s ease-in-out infinite;
}

#tema-apri:not(.con-temi) {
    pointer-events: none;
}

#tema-apri:not(.con-temi) .pennello {
    display: none;
}

#tema-apri.premuto {
    opacity: 0.8;
}

#logo {
    display: block;
    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));
}

.pennello {
    position: absolute;
    right: -9px;
    bottom: -9px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.pennello circle {
    fill: var(--blu);
}

.pennello path {
    fill: #fff;
}

@-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, pari, senza «rete.» da sola sotto. */
#motto {
    max-width: 300px;
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
    opacity: 0.8;
}

/* Il filo d'oro stacca il motto dai pulsanti. Fino al 30 ottobre 2026 era il
   bordo della riga coi punti contro il bot, tolta perche' dava troppo peso
   all'Allenamento e a chi gioca in rete rubava spazio. */
#motto::after {
    content: '';
    display: block;
    width: 280px;
    max-width: 100%;
    margin: 20px auto 0;
    border-top: 1px solid rgba(224, 180, 76, 0.35);
}

#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;
}

/* «Allenamento» dice sotto contro chi, come la mano del giorno dice cosa
   chiede: dal nome solo non si capirebbe che dentro c'e' anche il gioco a due */
#contro-bot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

#contro-bot-sotto {
    margin-top: 4px;
    font-size: 13px;
    font-weight: normal;
    opacity: 0.8;
}

/* Un campo di testo: i nomi dei due giocatori nel loro pannello, il nickname
   e la ricerca di un amico nella sala */
.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, #aggiungi-nome, #nome-nuovo-campo {
    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.
   Non e' fissa nella finestra: quando il menu non ci stava e scorreva, fissa
   finiva sopra ai pulsanti in fondo («Regole» su un iPhone 8, «Manda a un
   amico» col tasto Installa). Sta in fila dopo il menu: se il menu ci sta, il
   margine automatico di #menu-dentro la spinge nell'angolo, se non ci sta
   viene dopo la firma. Il posto c'e' anche finche' il numero non e' arrivato,
   senno' comparendo spostava il menu. */
#versione-posto {
    align-self: flex-end;
    flex-shrink: 0;
    min-height: 34px;
    /* a 14 pixel dal bordo come l'altoparlante, e il menu ne ha 20 */
    margin: 12px calc(env(safe-area-inset-right, 0px) - 6px) 0 0;
}

#versione {
    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.premuto {
    opacity: 0.4;
}

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

/* L'altoparlante (suoni.js): fisso in alto a destra nel menu. Coi suoni
   spenti le onde lasciano il posto a una croce.
   Al tavolo i suoni stanno nel pannello di Menu: accanto a Menu e alla chat
   l'altoparlante toglieva al testo della barra piu' di cento pixel, e su un
   iPhone 8 la barra cresceva di tre righe. */
#suoni-menu {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 14px);
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.09);
    opacity: 0.8;
}

#suoni-menu.premuto {
    opacity: 0.5;
}

#suoni-menu svg {
    display: block;
    margin: 0 auto;
}

/* La lingua (lingua.js), in alto a sinistra di fronte all'altoparlante, con
   la sigla di quella in uso. Apre il pannello delle lingue: quella in uso ha
   l'anello blu della carta scelta nel pannello dei semi. */
#lingua-menu {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: calc(env(safe-area-inset-left, 0px) + 14px);
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 15px;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

#lingua-menu.premuto {
    opacity: 0.5;
}

#lingue-lista {
    width: 100%;
    max-width: 300px;
    margin-bottom: 8px;
}

#lingue-lista .grande.scelta {
    box-shadow: 0 0 0 3px var(--blu), 0 0 14px var(--blu);
}

/* I regolatori dell'audio (audio.js), uguali nel pannello dell'altoparlante e
   in quello di Menu al tavolo: una riga per cosa, il nome a sinistra e il
   comando a destra. Il generale e' un interruttore, verde acceso; musica ed
   effetti sono cursori d'oro come i pulsanti che contano. Col generale spento
   i cursori si spengono anche loro, ma tengono il loro volume. */
.regolatori {
    width: 100%;
    max-width: 320px;
    margin-bottom: 18px;
}

.regola {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 58px;
    margin-bottom: 10px;
    padding: 0 16px 0 18px;
    border-radius: 29px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.25) inset;
    -webkit-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
}

.regola.spenta {
    opacity: 0.4;
}

.regola-nome {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 14px;
    font-size: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

.regola-nome svg {
    flex: 0 0 auto;
    margin-right: 10px;
}

.regola.generale .regola-nome {
    flex: 1 1 auto;
}

/* i due cursori partono dallo stesso punto, qualunque sia la parola */
.regola.musica .regola-nome,
.regola.effetti .regola-nome {
    width: 108px;
}

/* l'interruttore: una pastiglia con la pallina, verde quando suona */
.interruttore {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 36px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) inset;
    -webkit-transition: background-color 0.15s ease;
    transition: background-color 0.15s ease;
}

.interruttore i {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 -2px 0 rgba(0, 0, 0, 0.12) inset;
    -webkit-transition: -webkit-transform 0.15s ease;
    transition: transform 0.15s ease;
}

.interruttore[aria-checked="true"] {
    background: var(--verde);
    background-image: linear-gradient(#5fe06b, #2ecc40 55%, #22a532);
}

.interruttore[aria-checked="true"] i {
    -webkit-transform: translateX(28px);
    transform: translateX(28px);
}

/* il cursore: la corsa scura, la parte piena d'oro fino alla pallina.
   --pieno lo mette audio.js. La corsa e' alta 12 px ma il cursore 40, perche'
   il dito lo prende anche un po' sopra o sotto. */
.regola input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.regola input[type="range"]::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(#f2d27e, #dfb24a 55%, #c1942f) 0 0 / var(--pieno, 100%) 100% no-repeat, rgba(0, 0, 0, 0.38);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
}

.regola input[type="range"]::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    margin-top: -9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), 0 -2px 0 rgba(0, 0, 0, 0.12) inset;
    -webkit-appearance: none;
    appearance: none;
}

.regola input[type="range"]::-moz-range-track {
    height: 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.38);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
}

.regola input[type="range"]::-moz-range-progress {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(#f2d27e, #dfb24a 55%, #c1942f);
}

.regola input[type="range"]::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

.suoni .croce,
.suoni.spenti .onde {
    display: none;
}

.suoni.spenti .croce {
    display: inline;
}

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

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

/* Larghi quanto il testo ma mai piu' dello schermo: su un iPhone da 375 punti
   la riga intera non ci stava, e senza andare a capo usciva dai due lati */
#ios-strip, #install {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    left: 16px;
    right: 16px;
    margin: 0 auto;
    width: -webkit-fit-content;
    width: fit-content;
    box-sizing: border-box;
    min-height: 56px;
    padding: 8px 22px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Su iOS, con un conto da mettere al sicuro, la striscia dice di collegarlo a
   Telegram prima di installare: e' un tasto, blu e con l'aereo (main.js) */
#ios-strip svg {
    display: none;
}

#ios-strip.avviso {
    padding: 8px 18px;
    background: var(--blu);
    background-image: linear-gradient(#4d86f4, #2f6fed 55%, #1f57c6);
    font-weight: bold;
    cursor: pointer;
}

#ios-strip.avviso svg {
    display: block;
    flex: 0 0 auto;
    margin-right: 10px;
    fill: #fff;
}

/* Stando fissi in fondo coprivano la firma, e col menu lungo anche i pulsanti
   (Impara a giocare e Regole su un iPhone 8, tutta la fila sull'iPad in
   orizzontale): quando c'e' uno dei due il menu finisce dove comincia lui,
   16 + 56 pixel sopra il bordo, e scorrendo non gli passa piu' sotto */
body.con-installa #menu {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
    padding-bottom: 14px;
}

/* --- Il cartello della mano del giorno ------------------------------------ */

/* Sta sopra al banco dell'avversario, che per un turno solo non muove: le
   spiegazioni nella barra in fondo erano troppo piccole per essere lette
   mentre si gioca. La lezione del viaggio ha un cartello suo, #lezione. */
#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,
#guida-rivedi {
    margin-top: 12px;
    -webkit-animation: entra 0.25s ease;
    animation: entra 0.25s ease;
}

/* A soluzione finita «Rivedi» sta accanto ad «Avanti», quando c'e' */
#guida-rivedi + #guida-avanti {
    margin-left: 8px;
}

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

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

/* --- Puzzle e il puzzle del giorno --------------------------------------- */

/* Il pulsante sta fra quelli grandi del menu: il nome, sotto il numero del
   puzzle del giorno e cosa chiede, a destra i giorni di fila. Finche' quello
   di oggi non e' giocato ha il pallino d'oro nell'angolo. Le tessere della
   casa di Puzzle sono fatte allo stesso modo (stile-puzzle.css). */
#puzzle-apri,
.pz-tessera {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

#puzzle-sotto,
.pz-sotto {
    margin-top: 4px;
    font-size: 13px;
    font-weight: normal;
    opacity: 0.8;
}

#puzzle-segno,
.pz-segno {
    position: absolute;
    top: 50%;
    right: 12px;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    font-size: 14px;
    font-style: normal;
    transform: translateY(-50%);
}

#puzzle-apri.da-fare::after,
.pz-tessera.da-fare::after {
    content: '';
    position: absolute;
    top: -3px;
    right: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--oro);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3), 0 0 10px rgba(224, 180, 76, 0.8);
}

#giorno-fine-passo {
    margin-bottom: 8px;
    color: var(--oro);
    font-size: 12px;
}

#giorno-fine-testo {
    margin-bottom: 12px;
    font-size: 32px;
    font-weight: bold;
}

#giorno-quadri {
    margin-bottom: 14px;
    font-size: 30px;
    letter-spacing: 3px;
}

/* con gli obiettivi, sotto le carte uno per riga */
#giorno-fine-dettaglio {
    font-size: 17px;
    opacity: 0.85;
    white-space: pre-line;
}

#giorno-fila {
    color: var(--oro);
    font-size: 18px;
    font-weight: bold;
}

#giorno-corone {
    width: 100%;
    max-width: 330px;
    margin: 4px 0 16px;
}

.sopra p.corone-sospese {
    font-size: 16px;
    opacity: 0.85;
}

#giorno-menu {
    margin-top: 6px;
}