/* ============================================================================
   RICHIAMI INCROCIATI FRA I GIOCHI DA TAVOLIERE (Dama, Mulino, Scacchi)
   ----------------------------------------------------------------------------
   Ogni gioco mostra in fondo alla colonna dei controlli i due richiami agli
   altri due. Le miniature sono disegnate interamente in CSS: nessuna immagine
   da caricare e nitidezza a qualsiasi fattore di scala di #campogioco.

   I due richiami stanno AFFIANCATI su una riga sola, con la miniatura sopra e
   il testo sotto. Il motivo è lo spazio verticale: nel Mulino la colonna dei
   controlli arriva già a quota 662 dei 750px del campo, quindi restano 88px e
   due richiami impilati (96px l'uno) non ci starebbero. Affiancati occupano
   una fascia sola (~84px) e lo stesso identico blocco entra in tutte e tre le
   pagine, che hanno ingombri diversi.

   Le palette delle miniature sono ricopiate dai CSS dei giochi veri
   (dama.css, mulino.css, scacchi.css): se lì cambiano i colori di caselle o
   pedine, vanno riallineate anche qui.
   ============================================================================ */

.richiami-giochi {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.richiami-giochi .richiamo {
    flex: 1 1 0;              /* i due richiami si dividono la larghezza in parti uguali */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    background: rgba(0, 40, 10, 0.55);
    border: 2px solid rgba(100, 160, 110, 0.35);
    border-radius: 10px;
    text-decoration: none;
    color: #cde8cd;
    transition: all 0.15s;
}
.richiami-giochi .richiamo:hover {
    background: rgba(0, 60, 20, 0.7);
    border-color: rgba(255, 215, 0, 0.55);
    transform: translateY(-1px);
}
.richiami-giochi .richiamo-testo {
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;      /* i nomi lunghi rimpiccioliscono, non vanno a capo */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.richiami-giochi .richiamo-testo b {
    color: #ffd700;
    font-size: 13px;
}

/* === MINIATURA: SCACCHIERA (dama e scacchi) ===
   Griglia 4x4 di caselle da 14px. Le caselle scure sono quelle con
   (riga+colonna) dispari, come sulla scacchiera vera. */
.mini-scacchiera {
    display: grid;
    grid-template-columns: repeat(4, 14px);
    grid-template-rows: repeat(4, 14px);
    border: 2px solid #4a2f17;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
    flex-shrink: 0;
}
.mini-scacchiera .mc {
    position: relative;
    display: block;
}
.mini-scacchiera .mc.chiara { background: #e9d5ab; }
.mini-scacchiera .mc.scura  { background: #9c6b3c; }

/* Pedine tonde della dama: stessi gradienti delle pedine vere, in scala */
.mini-scacchiera .mp {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.mini-scacchiera .mp.bianca {
    background: radial-gradient(circle at 35% 30%, #fffdf5 0%, #f0e6c8 45%, #cdbd92 100%);
}
.mini-scacchiera .mp.nera {
    background: radial-gradient(circle at 35% 30%, #6a6a6a 0%, #3a3a3a 45%, #191919 100%);
}
/* Pezzi degli scacchi: caratteri Unicode, non pedine tonde. I pezzi bianchi
   usano i glifi pieni (♟ ecc.) con riempimento chiaro e contorno scuro,
   perché i glifi vuoti su casella chiara risulterebbero invisibili. */
.mini-scacchiera .mz {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}
.mini-scacchiera .mz.bianco {
    color: #fffdf5;
    text-shadow: 0 0 1px #000, 0 0 1px #000, 0 1px 1px rgba(0,0,0,0.6);
}
.mini-scacchiera .mz.nero {
    color: #191919;
    text-shadow: 0 1px 1px rgba(255,255,255,0.25);
}

/* === MINIATURA: TABELLONE DEL MULINO ===
   Tre quadrati concentrici su un'area di 56px più i quattro raccordi che
   uniscono i punti di mezzo dei lati. Le pedine formano un doppio mulino
   bianco (riga in alto + colonna a sinistra), così la miniatura mostra la
   figura che dà il nome al gioco. */
.mini-mulino {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: #9c6b3c;
    border: 2px solid #4a2f17;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.mini-mulino .mq {
    position: absolute;
    border: 2px solid #4a2f17;
}
.mini-mulino .mq.esterno { inset: 5px; }
.mini-mulino .mq.mezzo   { inset: 13px; }
.mini-mulino .mq.interno { inset: 21px; }
/* I raccordi radiali vanno dal quadrato esterno (5px) a quello interno
   (21px): 16px di tratto, centrati sul punto di mezzo del lato (56/2 - 1). */
.mini-mulino .mr {
    position: absolute;
    background: #4a2f17;
}
.mini-mulino .mr.alto     { left: 27px; top: 5px;    width: 2px; height: 16px; }
.mini-mulino .mr.basso    { left: 27px; bottom: 5px; width: 2px; height: 16px; }
.mini-mulino .mr.sinistra { top: 27px;  left: 5px;   height: 2px; width: 16px; }
.mini-mulino .mr.destra   { top: 27px;  right: 5px;  height: 2px; width: 16px; }
/* Pedine: 9px di diametro, posizionate per centro. I centri utili sono quelli
   delle linee, cioè inset + metà bordo: 6 / 14 / 22 e i simmetrici 50 / 42 / 34,
   più il punto di mezzo dei lati (28). Il "left" è il centro meno 4.5 (metà
   pedina), arrotondato a .5 perché la miniatura viene poi scalata. */
.mini-mulino .mp {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    z-index: 2;
}
.mini-mulino .mp.bianca {
    background: radial-gradient(circle at 35% 30%, #fffdf5 0%, #f0e6c8 45%, #cdbd92 100%);
}
.mini-mulino .mp.nera {
    background: radial-gradient(circle at 35% 30%, #6a6a6a 0%, #3a3a3a 45%, #191919 100%);
}
/* Doppio mulino bianco che condivide l'angolo in alto a sinistra del quadrato
   esterno: la riga superiore (6,6)-(28,6)-(50,6) e la colonna sinistra
   (6,6)-(6,28)-(6,50) sono entrambe complete. */
.mini-mulino .mp.p-alto-sx    { left: 1.5px;  top: 1.5px; }
.mini-mulino .mp.p-alto-cx    { left: 23.5px; top: 1.5px; }
.mini-mulino .mp.p-alto-dx    { left: 45.5px; top: 1.5px; }
.mini-mulino .mp.p-sx-cy      { left: 1.5px;  top: 23.5px; }
.mini-mulino .mp.p-basso-sx   { left: 1.5px;  top: 45.5px; }
/* Due pedine nere di contrasto, su posizioni reali ma senza mulino: il punto
   di mezzo del lato destro del quadrato di mezzo (42,28) e l'angolo in basso
   a destra del quadrato esterno (50,50). */
.mini-mulino .mp.p-mezzo-dx   { left: 37.5px; top: 23.5px; }
.mini-mulino .mp.p-basso-dx   { left: 45.5px; top: 45.5px; }