/* I premi e la Collezione: quello che si porta, la collezione in breve, le
   scelte e le carte di un seme. */

/* --- I premi (premi.js, collezione.js) ------------------------------------ */

/* I dorsi vinti: un motivo bianco su un colore, sul mazzo, sui chiusi, sulle
   carte che volano, dietro la figurina e sotto le medaglie della cerimonia. Il
   chiuso e' lo stesso dorso piu' scuro, come il viola accanto al blu di
   sempre. Quello di una festa e' un pezzo del suo tema, nel suo foglio
   (tema-muertos.css). */
.dc-blu { --dorso: #3a5b9c; --dorso-chiuso: #6b4c8a; }
.dc-rosso { --dorso: #b3313b; --dorso-chiuso: #6c1c23; }
.dc-verde { --dorso: #2f7d4f; --dorso-chiuso: #1b4a2f; }
.dc-viola { --dorso: #7048a0; --dorso-chiuso: #3f2959; }
.dc-arancio { --dorso: #d27b25; --dorso-chiuso: #87480f; }
.dc-nero { --dorso: #2b2b31; --dorso-chiuso: #4d4d57; }

.carta.dorso.dorso-vinto, .figurina.retro.dorso-vinto, .coll-dorso.dorso-vinto, .cer-retro.dorso-vinto {
    background-color: var(--dorso);
}

.carta.dorso.dorso-vinto.accantonata {
    background-color: var(--dorso-chiuso);
}

.dorso-vinto.dm-righe {
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 4px, transparent 4px 10px);
    background-size: auto;
}

.dorso-vinto.dm-rombi {
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.24) 0 1.5px, transparent 1.5px 8px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.24) 0 1.5px, transparent 1.5px 8px);
    background-size: auto;
}

.dorso-vinto.dm-scacchi {
    background-image: conic-gradient(rgba(255, 255, 255, 0.2) 0 25%, transparent 0 50%, rgba(255, 255, 255, 0.2) 0 75%, transparent 0);
    background-size: 10px 10px;
}

.dorso-vinto.dm-pois {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.32) 0 1.7px, transparent 2.3px),
        radial-gradient(circle, rgba(255, 255, 255, 0.32) 0 1.7px, transparent 2.3px);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}

.dorso-vinto.dm-onde {
    background-image: radial-gradient(circle at 50% 100%, transparent 0 3.2px, rgba(255, 255, 255, 0.28) 3.4px 4.8px, transparent 5px);
    background-size: 10px 6px;
}

.dorso-vinto.dm-zigzag {
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%);
    background-size: 10px 10px;
    background-position: -5px 0, -5px 0, 0 0, 0 0;
}

/* Le cornici vinte: il bordo della figurina e l'orlo delle fasce del VS. Sono
   materiali, mai oro, argento o bronzo, che sono della maglia e del podio; la
   maglia d'oro vince sulla cornice (profilo.js). */
.cornice-legno {
    --cornice: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.13) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #a8703c, #7a4a22 45%, #a06835 55%, #6a3d1a);
    --cornice-luce: rgba(255, 210, 160, 0.35);
}

.cornice-marmo {
    --cornice: linear-gradient(115deg, transparent 38%, rgba(110, 110, 125, 0.55) 39%, transparent 41%, transparent 66%, rgba(110, 110, 125, 0.4) 67%, transparent 68.5%),
        linear-gradient(135deg, #fbfaf7, #d8d5ce 30%, #f6f4ef 48%, #cbc6bc 75%, #f1eee8);
    --cornice-luce: rgba(255, 255, 255, 0.5);
}

.cornice-ghiaccio {
    --cornice: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.8) 33%, transparent 37%, transparent 62%, rgba(255, 255, 255, 0.6) 64%, transparent 67%),
        linear-gradient(135deg, #e9fbff, #93d6f0 35%, #f0fcff 52%, #6fc0e6 78%, #d8f4ff);
    --cornice-luce: rgba(170, 235, 255, 0.55);
}

.cornice-lava {
    --cornice: linear-gradient(125deg, transparent 22%, #ff7a1a 24%, transparent 27%, transparent 52%, #ff4d0f 54%, transparent 57%, transparent 78%, #ffa31a 80%, transparent 83%),
        linear-gradient(135deg, #2c0d07, #571409 40%, #2b0c06 70%, #4d1007);
    --cornice-luce: rgba(255, 110, 30, 0.55);
}

.cornice-smeraldo {
    --cornice: conic-gradient(from 20deg at 50% 50%, #0d6e49, #43d6a2, #0f8a5c, #84f2cb, #0b5f3f, #3fc993, #0d6e49);
    --cornice-luce: rgba(70, 230, 160, 0.45);
}

.cornice-corallo {
    --cornice: radial-gradient(circle at 20% 30%, rgba(255, 220, 205, 0.7) 0 6%, transparent 7%),
        radial-gradient(circle at 70% 65%, rgba(255, 220, 205, 0.6) 0 5%, transparent 6%),
        linear-gradient(135deg, #ff9a86, #ff6f5e 40%, #ffb4a3 58%, #e8574b 85%);
    --cornice-luce: rgba(255, 140, 120, 0.5);
}

/* Il bordo e' un anello dipinto col materiale e ritagliato dalla maschera:
   dentro resta il panno della figurina, del tema di chi la porta */
.figurina.con-cornice {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 22px var(--cornice-luce), 0 14px 30px rgba(0, 0, 0, 0.5);
}

/* il filo scuro dentro la cornice, dove comincia il panno */
.figurina.con-cornice::after {
    content: '';
    position: absolute;
    inset: 9px;
    z-index: 3;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 6px rgba(0, 0, 0, 0.45) inset;
    pointer-events: none;
}

.figurina.con-cornice::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 9px;
    border-radius: inherit;
    background: var(--cornice);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) inset;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

/* nel VS l'orlo corre sopra e sotto la fascia, storto con lei; il ricamo
   della festa e' l'orlo a smerli del suo foglio */
.ingresso-lato.con-cornice::after {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: -60px;
    right: -60px;
    z-index: -1;
    transform: skewY(-5deg);
    background: var(--cornice);
    -webkit-mask: linear-gradient(#000 0 0) top / 100% 8px no-repeat, linear-gradient(#000 0 0) bottom / 100% 8px no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% 8px no-repeat, linear-gradient(#000 0 0) bottom / 100% 8px no-repeat;
    pointer-events: none;
}

/* Le rarita', coi colori delle cornici delle medaglie */
.rarita {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1c1c1e;
}

.rarita-comune { background: #b9c3f5; }
.rarita-rara { background: #ffab4a; }
.rarita-epica { background: #c27cff; color: #fff; }
.rarita-leggendaria {
    background: linear-gradient(135deg, #ff8fcf, #8fbaff 28%, #fff09a 52%, #8ff0c8 76%, #c08fff);
}

/* Il gettone sotto il nome, come quello di Telegram */
#scheda .figurina-collezione {
    display: flex;
    align-items: center;
    width: -webkit-fit-content;
    width: fit-content;
    min-height: 30px;
    margin: 8px 0 0;
    padding: 0 12px 0 8px;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.26);
    box-shadow: 0 0 0 1px rgba(194, 124, 255, 0.6) inset;
    color: #f0e2ff;
    font-size: 13px;
}

.figurina-collezione .ventaglio {
    position: relative;
    width: 22px;
    height: 20px;
    margin-right: 8px;
}

.figurina-collezione .ventaglio i {
    position: absolute;
    bottom: 0;
    left: 6px;
    width: 10px;
    height: 15px;
    border-radius: 2px;
    background: #fdfdfb;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    transform-origin: 50% 100%;
}

.figurina-collezione .ventaglio i:nth-child(1) { transform: rotate(-22deg); background: #c27cff; }
.figurina-collezione .ventaglio i:nth-child(2) { transform: rotate(0deg); background: #ffab4a; }
.figurina-collezione .ventaglio i:nth-child(3) { transform: rotate(22deg); }

/* La Collezione: la collezione in breve, coi semi al tavolo, e le scelte
   nel pannello sopra (#collezione-scelta) */
#collezione,
#collezione-scelta {
    justify-content: flex-start;
    padding: 18px 14px 28px;
}

#collezione > :first-child,
#collezione-scelta > :first-child {
    margin-top: 0;
}

#collezione-titolo,
#collezione-scelta-titolo {
    margin: 4px 0 2px;
    font-size: 30px;
    color: #ffc857;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

#collezione-scelta-titolo {
    font-size: 26px;
}

#collezione-chi {
    margin-bottom: 12px;
    font-size: 15px;
    opacity: 0.85;
}

#collezione-scelta-sotto {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    margin: 0 0 14px;
    font-size: 15px;
    opacity: 0.9;
}

#collezione-scelta-sotto .rarita {
    margin-right: 8px;
}

#collezione-x,
#collezione-scelta-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 20px;
    font-size: 18px;
}

#collezione-dentro,
#collezione-scelta-dentro {
    width: 100%;
    max-width: 420px;
    text-align: left;
}

.coll-sezione {
    margin: 0 0 14px;
    padding: 12px 10px 12px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.22);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    text-align: left;
}

.coll-testa {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.coll-testa b {
    margin-right: 8px;
    font-size: 19px;
}

.coll-testa .coll-quanti {
    margin-left: auto;
    font-size: 13px;
    opacity: 0.8;
}

p.coll-nota {
    margin: 2px 0 8px;
    font-size: 13px;
    opacity: 0.75;
}

p.coll-sotto {
    margin: 2px 0 6px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* --- Quello che si porta ------------------------------------------------------ */

/* col tema di una festa addosso, un'informazione per riga */
.coll-righe {
    display: flex;
    flex-direction: column;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(140, 40, 110, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 140, 210, 0.45) inset;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
}

.coll-righe-castagne {
    background: rgba(120, 30, 40, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 170, 120, 0.45) inset;
}

.coll-righe b {
    font-size: 14px;
}

/* la matita della carta del profilo: questa si tocca per cambiarla */
.coll-matita {
    position: absolute;
    right: 4px;
    bottom: 22px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

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

.coll-matita path {
    fill: #fff;
}

.coll-semi-tavolo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
    --cw: 44px;
    --ch: 62px;
}

.coll-seme-tavolo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.3) inset;
}

.coll-seme-tavolo small {
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.85;
}

/* la fila della chat in cima al pannello delle emoji e delle frasi */
.coll-fila {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 10px;
    padding: 8px 6px;
    border-radius: 12px;
    background: rgba(255, 200, 87, 0.08);
    box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.35) inset;
}

.coll-fila.frasi {
    grid-template-columns: repeat(2, 1fr);
}

/* il posto che si sta cambiando: blu come la matita */
.coll-fila .coll-voce.acceso {
    box-shadow: 0 0 0 3px #4da3ff;
    background: rgba(77, 163, 255, 0.22);
}

/* --- Sotto, la collezione in breve ------------------------------------------ */

/* minmax(0, ...): un 1fr non scende sotto il pezzo piu' largo, e una frase
   lunga stringeva le tessere accanto */
.coll-famiglie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.coll-famiglia {
    padding: 8px 10px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 3px 8px rgba(0, 0, 0, 0.25);
}

.coll-famiglia-riga {
    display: flex;
    align-items: baseline;
    margin: 4px 0 6px;
}

.coll-famiglia-riga b {
    font-size: 16px;
}

.coll-famiglia-riga span {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.85;
}

.coll-barra {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.coll-barra i {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffc857, #ffab4a);
}

.coll-barra.piena i {
    background: linear-gradient(90deg, #2ecc40, #8ff0a8);
}

/* qualche premio della famiglia aperto a ventaglio, l'ultimo preso davanti */
.coll-ventaglio {
    position: relative;
    height: 64px;
}

.coll-ventaglio > * {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform-origin: 50% 120%;
    transform-origin: 50% 120%;
}

.coll-ventaglio.dorsi .coll-dorso { width: 34px; height: 48px; margin: -24px 0 0 -17px; }
.coll-ventaglio.cornici .coll-cornice { position: absolute; width: 50px; height: 38px; margin: -19px 0 0 -25px; border-radius: 9px; }
.coll-ventaglio.cornici .coll-cornice.con-cornice::before { padding: 4px; }
.coll-ventaglio.emoji .coll-emoji { margin: -20px 0 0 -20px; }

.coll-ventaglio.dorsi.di-3 > :nth-child(1) { transform: translateX(-26px) rotate(-14deg); }
.coll-ventaglio.dorsi.di-3 > :nth-child(3) { transform: translateX(26px) rotate(14deg); }
.coll-ventaglio.dorsi.di-2 > :nth-child(1) { transform: translateX(-14px) rotate(-8deg); }
.coll-ventaglio.dorsi.di-2 > :nth-child(2) { transform: translateX(14px) rotate(8deg); }
.coll-ventaglio.cornici.di-3 > :nth-child(1) { transform: translateX(-34px) rotate(-10deg); }
.coll-ventaglio.cornici.di-3 > :nth-child(3) { transform: translateX(34px) rotate(10deg); }
.coll-ventaglio.cornici.di-2 > :nth-child(1) { transform: translateX(-18px) rotate(-6deg); }
.coll-ventaglio.cornici.di-2 > :nth-child(2) { transform: translateX(18px) rotate(6deg); }
.coll-ventaglio.emoji.di-3 > :nth-child(1) { transform: translateX(-38px) rotate(-10deg); }
.coll-ventaglio.emoji.di-3 > :nth-child(3) { transform: translateX(38px) rotate(10deg); }
.coll-ventaglio.emoji.di-2 > :nth-child(1) { transform: translateX(-20px) rotate(-6deg); }
.coll-ventaglio.emoji.di-2 > :nth-child(2) { transform: translateX(20px) rotate(6deg); }

.coll-ventaglio.di-3 > :nth-child(2) { z-index: 1; }

/* le frasi come due fumetti, uno piu' in la' dell'altro */
.coll-ventaglio.frasi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.coll-ventaglio.frasi > * {
    position: static;
}

.coll-ventaglio.frasi > :nth-child(1) { margin: 0 34px 4px 0; transform: rotate(-5deg); }
.coll-ventaglio.frasi > :nth-child(2) { margin: 0 0 0 34px; transform: rotate(4deg); }

/* una frase che non ci sta si ferma coi puntini: i 34px sono lo spostamento
   del ventaglio, e intera la si legge nel pannello */
.coll-fumetto {
    max-width: calc(100% - 34px);
    box-sizing: border-box;
    padding: 5px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coll-mazzetti {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 6px;
    --cw: 42px;
    --ch: 59px;
}

.coll-mazzetto {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.coll-mazzetto.finito {
    background: rgba(46, 204, 64, 0.12);
    box-shadow: 0 0 0 2px #2ecc40 inset;
}

.coll-mazzetto .coll-in-uso {
    position: absolute;
    top: -6px;
    right: -2px;
    padding: 1px 6px;
    border-radius: 8px;
    background: #2ecc40;
    color: #0e1e19;
    font-size: 10px;
    font-style: normal;
}

.coll-pila .carta {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 2px 2px 0 0 #b9b9b4, 4px 4px 0 0 #9c9c97, 5px 5px 3px rgba(0, 0, 0, 0.4);
}

.coll-pila .carta .valore {
    font-size: 12px;
}

.coll-mazzetto.vuoto .coll-pila {
    opacity: 0.3;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.coll-mazzetto.vuoto .coll-pila .carta {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.coll-mazzetto b {
    margin-top: 6px;
    font-size: 13px;
}

.coll-mazzetto span {
    font-size: 12px;
    opacity: 0.8;
}

/* --- Le scelte di un posto -------------------------------------------------- */

.coll-griglia {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.coll-griglia.c2 { grid-template-columns: repeat(2, 1fr); }
.coll-griglia.c3 { grid-template-columns: repeat(3, 1fr); }
.coll-griglia.c4 { grid-template-columns: repeat(4, 1fr); }
.coll-griglia.c5 { grid-template-columns: repeat(5, 1fr); }
.coll-griglia.c6 { grid-template-columns: repeat(6, 1fr); }
.coll-griglia.c7 { grid-template-columns: repeat(7, 1fr); }

/* quello che manca, dopo quello che si ha: piu' piccolo e spento */
.coll-griglia.mancano .coll-voce > :not(.lucchetto) {
    -webkit-transform: scale(0.82);
    transform: scale(0.82);
}

p.coll-mancano {
    margin-top: 12px;
}

.coll-voce {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    border-radius: 10px;
}

.coll-voce.in-uso {
    box-shadow: 0 0 0 2px #ffc857;
    background: rgba(255, 200, 87, 0.14);
}

.coll-voce.manca > :not(.lucchetto) {
    filter: saturate(0.5) brightness(0.7);
    opacity: 0.4;
}

.coll-voce .lucchetto {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -10px 0 0 -8px;
    fill: rgba(255, 255, 255, 0.85);
}

/* il pezzo di una festa, col suo nome sotto quello del pezzo */
.coll-voce small.coll-festa-nome {
    margin-top: 1px;
    font-size: 10px;
    opacity: 0.65;
}

.coll-voce small {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    opacity: 0.85;
}

.coll-voce small.coll-su-tredici {
    margin-top: 0;
    opacity: 0.7;
}

/* quelle gia' in chat: ci scambiano il posto */
.coll-voce.in-chat::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffc857;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.coll-colori {
    --cw: 64px;
    --ch: 90px;
}

.coll-colori .coll-voce small {
    font-size: 13px;
}

.coll-dorso {
    width: 36px;
    height: 51px;
    box-sizing: border-box;
    border: 2px solid #f2f2f4;
    border-radius: 5px;
    background-color: #3a5b9c;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 4px, transparent 4px 10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.coll-cornice {
    position: relative;
    width: 74px;
    height: 54px;
    border-radius: 12px;
    background: var(--panel);
    box-shadow: 0 0 0 2px var(--oro) inset, 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
}

.coll-voce .coll-cornice {
    width: 64px;
    height: 48px;
}

.coll-cornice.con-cornice {
    box-shadow: 0 0 12px var(--cornice-luce);
}

.coll-cornice.con-cornice::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 6px;
    border-radius: inherit;
    background: var(--cornice);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.coll-emoji {
    width: 40px;
    height: 40px;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
}

.coll-emoji img {
    width: 36px;
    height: 36px;
    vertical-align: middle;
}

/* la parolaccia non ha spazi: allargava la sua colonna nel pannello e usciva
   dalla casella nel baule; va a capo fra i simboli solo quando non ci sta */
.coll-frase {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    box-sizing: border-box;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    overflow-wrap: anywhere;
}

/* --- Le carte di un seme ----------------------------------------------------- */

/* dall'asso al 10 cinque per fila; le figure grandi, con la targa (targa.js),
   che prende la misura dal --cw del contenitore */
.coll-carte {
    gap: 6px;
    --cw: 58px;
    --ch: 81px;
}

.coll-figure {
    margin-bottom: 16px;
    --cw: 92px;
    --ch: 129px;
}

.coll-posto {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 2px 5px;
    border-radius: 10px;
}

.coll-figure .coll-posto {
    padding-bottom: 18px;
}

/* quella che manca: il suo posto vuoto, col bordo tratteggiato */
.coll-posto.vuoto {
    background: rgba(0, 0, 0, 0.24);
    outline: 1.5px dashed rgba(255, 255, 255, 0.24);
    outline-offset: -3px;
}

.coll-posto.vuoto > :first-child {
    opacity: 0.22;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.coll-posto.vuoto > .carta.ignota {
    opacity: 1;
    -webkit-filter: none;
    filter: none;
}

.coll-posto .carta.ignota {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

.coll-posto .carta.ignota::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -16px;
    font-size: 28px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
}

.coll-posto.in-uso {
    background: rgba(255, 200, 87, 0.14);
    box-shadow: 0 0 0 2px #ffc857;
}

.coll-posto small {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    opacity: 0.85;
}

/* i pezzi di una festa sotto la sua tessera, nel pannello dei temi */
.coll-pezzi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: -6px 0 12px;
    padding: 12px 6px 8px;
    border-radius: 0 0 14px 14px;
    background: rgba(0, 0, 0, 0.18);
}

.coll-pezzi .coll-cornice {
    width: 62px;
    height: 46px;
}

.coll-usa {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: 12px;
    background: rgba(194, 124, 255, 0.18);
    box-shadow: 0 0 0 1px rgba(194, 124, 255, 0.6) inset;
    font-size: 14px;
    text-align: left;
}

.coll-usa i {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    margin-left: auto;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.25);
}

.coll-usa i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #fff;
    transition: left 0.15s ease;
}

.coll-usa.acceso i { background: #2ecc40; }
.coll-usa.acceso i::after { left: 19px; }

/* La cerimonia di un premio vinto: quella dei temi, col premio al posto
   della tessera e la rarita' sotto il titolo */
#vinto {
    overflow: hidden;
}

#vinto::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 1000px;
    height: 1000px;
    margin: -560px 0 0 -500px;
    background-image: repeating-conic-gradient(rgba(255, 214, 120, 0.2) 0deg 8deg, rgba(255, 214, 120, 0) 8deg 22.5deg);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0, #000 30%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 0, #000 30%, transparent 100%);
    animation: premio-gira 22s linear infinite;
    pointer-events: none;
}

#vinto-titolo {
    margin-bottom: 10px;
    font-size: 36px;
    line-height: 1.1;
    color: #ffc857;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 200, 87, 0.35);
}

#vinto-premio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 168px;
    height: 168px;
}

#vinto-premio .carta, #vinto-premio .coll-dorso {
    --cw: 104px;
    --ch: 146px;
    --raggio: 10px;
    width: 104px;
    height: 146px;
    border-radius: 10px;
    transform: rotate(-6deg);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
}

#vinto-premio .coll-dorso {
    border-width: 5px;
}

/* una figura col nome nella targa (targa.js), dritta sotto la carta storta
   come nella fine del viaggio */
#vinto-premio .vg-con-targa {
    --cw: 104px;
}

#vinto-premio .coll-cornice {
    width: 150px;
    height: 110px;
    border-radius: 20px;
}

#vinto-premio .coll-cornice.con-cornice::before {
    padding: 11px;
}

#vinto-premio .coll-emoji, #vinto-premio .coll-emoji img {
    width: 120px;
    height: 120px;
    font-size: 96px;
    line-height: 120px;
}

p#vinto-nome {
    margin: 10px 0 6px;
    font-size: 22px;
}

p#vinto-quanti {
    margin: 4px 0 18px;
    font-size: 15px;
    opacity: 0.85;
    white-space: pre-line;
}

/* la carta promessa che si aveva gia': il timbro e le corone del baule che
   si apre, che arrivano dopo la carta */
.sopra p#vinto-doppione {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 4px;
    font-size: 22px;
}

.sopra p#vinto-doppione[hidden] {
    display: none;
}

#vinto.arriva #vinto-doppione {
    animation: cer-timbro 0.5s 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

#vinto.arriva #vinto-premio {
    animation: premio-arriva 0.7s 0.15s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

#vinto.arriva #vinto-titolo {
    animation: cer-timbro 0.5s 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

/* una figura della Collezione guardata da vicino: senza raggi ne' rimbalzo, e
   senza il titolo, che col suo margine teneva il pannello in mezzo */
#vinto.vista::before {
    display: none;
}

#vinto.vista.arriva #vinto-premio {
    animation: none;
}

#vinto.vista #vinto-rarita {
    margin-top: auto;
}