#captcha-board {
    display: grid;
    grid-template-columns: repeat(8, 32px);
    grid-template-rows: repeat(8, 32px);

    width: fit-content; /* ← FIX fondamentale */
    margin: 10px auto;

    border: 2px solid #333;
    box-sizing: content-box; /* sicurezza */
}

.c-square {
    width: 32px;
    height: 32px;
    position: relative; /* NECESSARIO */
    overflow: hidden;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.15);
}

.c-white {
    /* background: #f0d9b5; standard color
    background: #a8a18f;*/
    background: linear-gradient(135deg, #ded8c9 0%, #d2cbbb 100%);
}

.c-black {
    /* background: #b58863; standard color
    background: #867e6b;*/
    background: linear-gradient(135deg, #b5ab96 0%, #a19782 100%);
}

.c-square img {
    width: 100%;
    height: 100%;
}

.c-square::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.c-selected {
    background: #2563eb !important;
}

.c-solved {
    border: 7px solid #16a34a !important;
}

.c-error {
    border: 7px solid #dc2626 !important;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.45);
}

.internal-subtitle {
    max-width: 640px;
    margin: 12px auto 0 auto;
    text-align: center;
    color: #6b7280;
    line-height: 1.6;
    font-size: 16px;
}

/* ===================== */
/* CAPTCHA LABEL */
/* ===================== */

.captcha-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 10px auto;
}

.captcha-label img {
    width: 22px;
}

/* ===================== */
/* CAPTCHA MESSAGE */
/* ===================== */

#captcha-msg {
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
}

#captcha-msg.success {
    color: #16a34a;
}

#captcha-msg.error {
    color: #dc2626;
}

.positive {
    color: #047857;
    font-weight: 600;
    text-align: center;
}
.negative {
    color: #b91c1c;
    font-weight: 600;
    text-align: center;
}

/* Checkmate verde (override esplicito) */
#captcha-msg.success .cm-text {
    color: #16a34a; /* stesso verde già usato */
    font-weight: 600;
}

/* Risultato nero */
#captcha-msg .cm-result {
    color: black !important;
    margin-left: 8px;
    padding: 2px 4px;
}
#captcha-msg.success .cm-result {
    color: #000 !important;
    margin-left: 8px;
    font-weight: 600;
}

/* ===== Dark Mode ===== */

[data-theme="dark"] #captcha-board {
    border-color: #475569;
}

[data-theme="dark"] #captcha-msg .cm-result,
[data-theme="dark"] #captcha-msg.success .cm-result {
    color: #e2e8f0 !important;
}