/* =====================================================================
 * 填字 I cruciverba di caratteri (cruciverba.php, assets/js/cruciverba.js)
 * e i loro sigilli: rosso 完成 (completato), d'oro 优秀 (senza aiuti né
 * errori); la coppa 奖杯 del livello.
 * ===================================================================== */
.cv-testata { text-align: center; }
.cv-testata h1 .testo-cinese { color: var(--c-giada-scuro); }
.cv-pinyin-titolo { display: block; font-size: .95rem; font-weight: 500; color: var(--c-giada-scuro); }
.cv-sotto { max-width: 66ch; margin: .35rem auto 1rem; font-size: .95rem; color: var(--c-pietra); }
.cv-bozza { padding: .05rem .4rem; font-size: .75rem; font-weight: 600; color: #8a5a00; background: #fff4d6; border-radius: 6px; }

.cv-livelli { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: 1rem; }
.cv-livelli a { padding: .25rem .8rem; color: var(--c-giada-scuro); text-decoration: none; border: 1px solid var(--c-bordo); border-radius: 999px; }
.cv-livelli a.attivo { color: #fff; background: var(--c-giada); border-color: var(--c-giada); }

.cv-riepilogo { display: flex; align-items: center; gap: .8rem; max-width: 760px; margin: 0 auto 1rem; padding: .6rem 1rem; background: var(--c-nebbia); border-radius: 12px; }
.cv-con-coppa { background: linear-gradient(90deg, #fff6d8, #fffbea); border: 1px solid #ecd27a; }
.cv-coppa { display: inline-grid; justify-items: center; font-size: .72rem; color: #b8860b; }
.cv-coppa i { font-size: 2rem; color: #d4a017; filter: drop-shadow(0 2px 2px rgba(120, 80, 0, .3)); }
.cv-coppa-spenta { color: #c9c2a8; }

.cv-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; max-width: 900px; margin: 0 auto 2rem; padding: 0; list-style: none; }
.cv-carta {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    height: 100%;
    padding: .8rem .9rem;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--c-bordo);
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.cv-carta:hover { border-color: var(--c-giada); box-shadow: 0 6px 18px rgba(16, 36, 29, .08); transform: translateY(-2px); }
.cv-carta-grande { background: linear-gradient(135deg, #fff, var(--c-nebbia)); }
.cv-carta-griglia {
    flex: none;
    width: 46px;
    height: 46px;
    background:
        linear-gradient(var(--c-bordo) 1px, transparent 1px) 0 0 / calc(100% / var(--colonne)) calc(100% / var(--righe)),
        linear-gradient(90deg, var(--c-bordo) 1px, transparent 1px) 0 0 / calc(100% / var(--colonne)) calc(100% / var(--righe)),
        #fbfdfc;
    border: 1px solid var(--c-bordo);
    border-radius: 6px;
}
.cv-carta-testo { display: grid; flex: 1; min-width: 0; }
.cv-carta-testo small { color: var(--c-pietra); }

/* Il sigillo: un timbro quadrato, due caratteri in colonna. */
.cv-sigillo {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    font-family: var(--font-cinese, serif);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    border-radius: 5px;
    transform: rotate(-6deg);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.cv-sigillo span { writing-mode: vertical-rl; letter-spacing: .05em; }
.cv-sigillo-rosso { background: #b8322a; }
.cv-sigillo-oro { color: #5a3e00; background: linear-gradient(135deg, #f9e08b, #d4a017 55%, #f2cf5b); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 2px 6px rgba(150, 100, 0, .35); }
.cv-sigillo-grande { width: 72px; height: 72px; font-size: 1.5rem; border-radius: 8px; }

/* Il gioco: griglia a sinistra, indizi a destra (sotto, sul telefono). */
.cv-gioco { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; max-width: 1050px; margin: 0 auto 1.5rem; }
.cv-indizio-attivo { min-height: 2.6rem; padding: .45rem .7rem; font-size: .95rem; background: var(--c-nebbia); border-left: 4px solid var(--c-giada); border-radius: 8px; }
.cv-indizio-attivo .testo-cinese { font-size: 1.1rem; }
.cv-pinyin-aiuto { font-weight: 600; color: var(--c-giada-scuro); }
.cv-aiuti { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .25rem; }
.cv-nota-aiuti { margin: 0 0 .6rem; font-size: .8rem; color: var(--c-pietra); }
.cv-nota-persa { color: #a0541a; }

.cv-griglia {
    display: grid;
    grid-template-columns: repeat(var(--colonne), minmax(0, 1fr));
    width: min(100%, calc(var(--colonne) * 54px));
    margin: 0 auto;
}
.cv-vuota { aspect-ratio: 1; }
/* Caselle che si toccano: bordo sottile dentro la parola, barra spessa fra parole diverse. */
.cv-cella { position: relative; aspect-ratio: 1; margin: 0 -1px -1px 0; background: #fff; border: 1px solid #9fb5aa; transition: background .15s; }
.cv-cella.barra-destra { border-right: 3px solid var(--c-inchiostro, #10241d); }
.cv-cella.barra-sotto { border-bottom: 3px solid var(--c-inchiostro, #10241d); }
.cv-cella input {
    width: 100%;
    height: 100%;
    padding: 0;
    font-family: var(--font-cinese, serif);
    font-size: max(16px, min(1.6rem, 4.6vw));
    text-align: center;
    color: var(--c-inchiostro);
    caret-color: var(--c-giada);
    background: transparent;
    border: 0;
    outline: 0;
}
.cv-numero { position: absolute; top: 1px; left: 3px; font-size: .62rem; line-height: 1; color: var(--c-pietra); pointer-events: none; }
.cv-cella.nella-parola { background: #e8f6ee; }
.cv-cella.attiva { z-index: 1; background: #c9ecd7; box-shadow: inset 0 0 0 2px var(--c-giada-scuro); }
.cv-cella.sbagliata { background: #fde8e6; }
.cv-cella.sbagliata input { color: #b8322a; }
.cv-cella.svelata input { color: #7a6a2a; font-style: italic; }
.cv-risolta .cv-cella { background: #f6fbf8; }

.cv-avviso-tastiera { margin: .6rem 0 0; padding: .45rem .7rem; font-size: .9rem; background: #fff6e0; border: 1px solid #f0d48a; border-radius: 8px; }
.cv-avviso-tastiera[hidden], .cv-messaggio[hidden], .cv-fine[hidden] { display: none; }
.cv-messaggio { margin: .6rem 0 0; font-size: .9rem; text-align: center; color: var(--c-pietra); }
.cv-fine { display: grid; justify-items: center; gap: .3rem; margin-top: 1rem; padding: 1rem; text-align: center; background: #fff; border: 1px solid var(--c-bordo); border-radius: 14px; }
.cv-fine p { margin: 0; }
.cv-fine-azioni { display: flex; gap: .5rem; margin-top: .4rem !important; }

.cv-colonna-indizi h2 { margin: .2rem 0 .4rem; font-size: 1.05rem; }
.cv-colonna-indizi h2 small { font-size: .8rem; font-weight: 400; color: var(--c-pietra); }
.cv-indizi { margin: 0 0 1rem; padding-left: 1.6rem; }
.cv-indizi li { margin: .15rem 0; }
.cv-indizi li::marker { font-weight: 700; color: var(--c-giada-scuro); }
.cv-indizio { padding: .15rem .35rem; font: inherit; text-align: left; color: inherit; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.cv-indizio:hover { background: var(--c-nebbia); }
.cv-indizi li.attivo .cv-indizio { font-weight: 600; background: #e8f6ee; }
.cv-indizio .testo-cinese { font-size: 1.05rem; }
.cv-indizio-traduzione { font-size: .85rem; color: var(--c-pietra); }
.cv-lunghezza { font-size: .8rem; color: var(--c-pietra); }
.cv-invito { max-width: 1050px; margin: 0 auto 2rem; }

@media (max-width: 800px) {
    .cv-gioco { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .cv-carta, .cv-cella { transition: none; }
    .cv-carta:hover { transform: none; }
}

/* La guida alla tastiera cinese (tastiera-cinese.php). */
.tc-pagina { max-width: 820px; margin: 0 auto; padding: 1.5rem 16px 2.5rem; }
.tc-pagina h2 { margin: 1.4rem 0 .5rem; font-size: 1.2rem; }
.tc-come ol, .tc-sistema ol { padding-left: 1.4rem; }
.tc-come li, .tc-sistema li { margin: .3rem 0; }
.tc-consigli, .tc-nota { font-size: .92rem; color: var(--c-pietra); }
.tc-sistema { margin: .5rem 0; padding: .55rem .9rem; background: #fff; border: 1px solid var(--c-bordo); border-radius: 12px; }
.tc-sistema summary { font-weight: 600; cursor: pointer; }
.tc-sistema summary i { width: 1.3em; color: var(--c-giada-scuro); }
.tc-sistema.tc-tuo { border-color: var(--c-giada); box-shadow: inset 4px 0 0 var(--c-giada); }
.tc-sistema.tc-tuo summary::after { content: ' · il tuo sistema'; font-weight: 400; font-size: .85rem; color: var(--c-giada-scuro); }
.tc-pagina kbd { padding: .05rem .35rem; font-size: .85em; color: var(--c-inchiostro); background: #f4f7f5; border: 1px solid var(--c-bordo); border-bottom-width: 2px; border-radius: 5px; }
.tc-prova input { max-width: 320px; font-size: 1.4rem; }
.tc-esito { min-height: 1.5rem; margin: .4rem 0; font-weight: 600; color: var(--c-giada-scuro); }

/* La pagina dell'amministratore (admin-cruciverba.php). */
.cva-genera { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: .5rem 0 1.2rem; }
.cva-gruppi { font-size: .9rem; color: var(--c-pietra); }
.cva-carta { margin-bottom: 1.2rem; padding: 1rem; background: #fff; border: 1px solid var(--c-bordo); border-radius: 14px; }
.cva-testata { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; }
.cva-testata h2 { margin: 0; font-size: 1.15rem; }
.cva-pubblicato { padding: .05rem .4rem; font-size: .75rem; font-weight: 600; color: #fff; background: var(--c-giada); border-radius: 6px; }
.cva-dati { font-size: .88rem; color: var(--c-pietra); }
.cva-corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; margin-top: .8rem; align-items: start; }
.cva-anteprima { display: grid; grid-template-columns: repeat(var(--colonne), 30px); grid-auto-rows: 30px; }
.cva-cella { display: grid; place-items: center; margin: 0 -1px -1px 0; font-size: 1.05rem; background: #f6fbf8; border: 1px solid #9fb5aa; }
.cva-titolo { display: block; margin-bottom: .5rem; font-size: .88rem; }
.cva-frase { display: block; margin-top: .25rem; font-size: .85rem; }
.cva-azioni { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 760px) { .cva-corpo { grid-template-columns: 1fr; } }