.ac-relax {
    --ac-blue: #24496f;
    --ac-blue-soft: #e8f0f6;
    --ac-sand: #f4eddf;
    --ac-gold: #c7a45a;
    --ac-gold-soft: #f7efd8;
    --ac-ink: #21313f;
    --ac-muted: #66717d;
    --ac-white: #ffffff;
    /* Sistema di spaziature/raggi/misure coerenti */
    --ac-space-1: 6px;
    --ac-space-2: 12px;
    --ac-space-3: 18px;
    --ac-space-4: 26px;
    --ac-radius-sm: 6px;
    --ac-radius-md: 10px;
    --ac-shell-max: 1200px;
    --ac-control-size: 48px;
    --ac-admin-offset: 0px;
    color: var(--ac-ink);
    font-family: inherit;
    cursor: default;
}

/* Offset barra admin WordPress per elementi sticky (Esci) */
body.admin-bar .ac-relax {
    --ac-admin-offset: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .ac-relax {
        --ac-admin-offset: 46px;
    }
}

/* Cursor: nessun cursore testo su elementi statici non editabili */
.ac-relax p,
.ac-relax h2,
.ac-relax h3,
.ac-relax span,
.ac-relax strong,
.ac-relax em,
.ac-relax li,
.ac-relax label {
    cursor: default;
}

.ac-relax a,
.ac-relax button,
.ac-relax [role="button"],
.ac-relax input[type="submit"] {
    cursor: pointer;
}

.ac-relax input[type="text"],
.ac-relax input[type="search"],
.ac-relax textarea {
    cursor: text;
}

/* Nasconde il caret lampeggiante nel board del labirinto quando è in focus */
.ac-relax-maze__board {
    caret-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.ac-relax *,
.ac-relax *::before,
.ac-relax *::after {
    box-sizing: border-box;
}

.ac-relax-home {
    padding: clamp(24px, 4vw, 48px) 0;
}

.ac-relax__header,
.ac-relax-game__top {
    max-width: 980px;
    margin: 0 auto 24px;
    padding: 0 16px;
}

.ac-relax__eyebrow,
.ac-relax-card__type {
    display: block;
    margin: 0 0 6px;
    color: var(--ac-gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ac-relax h2,
.ac-relax h3,
.ac-relax p {
    margin-top: 0;
}

.ac-relax h2 {
    margin-bottom: 10px;
    color: var(--ac-blue);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.12;
}

.ac-relax h3 {
    margin-bottom: 8px;
    color: var(--ac-blue);
    font-size: 1.15rem;
    line-height: 1.25;
}

.ac-relax p {
    color: var(--ac-muted);
    line-height: 1.6;
}

.ac-relax-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
}

.ac-relax-card {
    display: flex;
    min-height: 310px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(36, 73, 111, 0.16);
    border-radius: 8px;
    background: var(--ac-white);
    box-shadow: 0 10px 30px rgba(33, 49, 63, 0.08);
}

.ac-relax-card--coming {
    background: linear-gradient(180deg, #fff 0%, #fbf7ef 100%);
}

.ac-relax-card__body {
    flex: 1;
    padding: 18px 18px 10px;
}

.ac-relax-card__footer {
    padding: 0 18px 18px;
}

.ac-relax-visual {
    height: 112px;
    padding: 14px;
    background: var(--ac-sand);
}

.ac-relax-visual svg {
    width: 100%;
    height: 100%;
}

.ac-relax-visual rect {
    fill: #fffaf0;
    stroke: rgba(36, 73, 111, 0.24);
    stroke-width: 2;
}

.ac-relax-visual path {
    fill: none;
    stroke: var(--ac-blue);
    stroke-linecap: round;
    stroke-width: 5;
}

.ac-relax-visual circle {
    fill: var(--ac-gold);
}

.ac-relax-card--active .ac-relax-visual {
    background: linear-gradient(135deg, var(--ac-blue-soft), var(--ac-gold-soft));
}

.ac-relax-button,
.ac-relax-quiz button,
.ac-relax-maze button,
.ac-relax-level {
    appearance: none;
    border: 1px solid rgba(36, 73, 111, 0.18);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.ac-relax-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    background: var(--ac-blue);
    color: var(--ac-white);
    font-weight: 700;
}

.ac-relax-button:hover,
.ac-relax-button:focus {
    background: #173653;
    color: var(--ac-white);
}

.ac-relax-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(199, 164, 90, 0.42);
    border-radius: 6px;
    background: var(--ac-gold-soft);
    color: #735d24;
    font-weight: 700;
}

.ac-relax-home__game {
    max-width: 980px;
    margin: 28px auto 0;
    padding: 0 16px;
}

.ac-relax-game {
    padding: 24px 0;
}

.ac-relax-game__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(36, 73, 111, 0.16);
    border-radius: 8px;
    background: linear-gradient(135deg, #fff, var(--ac-sand));
}

.ac-relax-game__summary {
    min-width: 126px;
    padding: 14px;
    border: 1px solid rgba(199, 164, 90, 0.35);
    border-radius: 8px;
    background: var(--ac-white);
    text-align: center;
}

.ac-relax-game__summary strong {
    display: block;
    color: var(--ac-blue);
    font-size: 2rem;
    line-height: 1;
}

.ac-relax-game__summary span {
    color: var(--ac-muted);
    font-size: 0.9rem;
}

.ac-relax-alert {
    max-width: 980px;
    margin: 0 auto 16px;
    padding: 12px 16px;
    border: 1px solid rgba(199, 164, 90, 0.35);
    border-radius: 8px;
    background: var(--ac-gold-soft);
    color: #675321;
}

.ac-relax-alert--tip {
    font-size: .88rem;
    font-style: italic;
    opacity: .85;
    margin-top: -8px;
}

.ac-relax-levels {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
    max-width: 980px;
    margin: 0 auto 18px;
    padding: 0 16px;
}

.ac-relax-level {
    min-height: 44px;
    background: var(--ac-white);
    color: var(--ac-blue);
    font-weight: 800;
}

.ac-relax-level:hover:not(:disabled),
.ac-relax-level:focus:not(:disabled),
.ac-relax-level.is-active {
    border-color: var(--ac-gold);
    background: var(--ac-gold-soft);
    transform: translateY(-1px);
}

.ac-relax-level:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.ac-relax-quiz,
.ac-relax-leaderboard {
    max-width: 980px;
    margin: 0 auto 18px;
    padding: 20px;
    border: 1px solid rgba(36, 73, 111, 0.16);
    border-radius: 8px;
    background: var(--ac-white);
}

.ac-relax-quiz__empty,
.ac-relax-muted {
    margin: 0;
    color: var(--ac-muted);
}

.ac-relax-quiz__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--ac-muted);
    font-weight: 700;
}

.ac-relax-quiz__question {
    margin-bottom: 16px;
    color: var(--ac-ink);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.35;
}

.ac-relax-answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.ac-relax-answer {
    min-height: 52px;
    padding: 12px;
    background: #f8fbfd;
    color: var(--ac-ink);
    text-align: left;
}

.ac-relax-answer:hover:not(:disabled),
.ac-relax-answer:focus:not(:disabled) {
    border-color: var(--ac-blue);
    background: var(--ac-blue-soft);
}

.ac-relax-answer.is-correct {
    border-color: #3d8a5f;
    background: #e8f7ee;
}

.ac-relax-answer.is-wrong {
    border-color: #b85858;
    background: #faeeee;
}

.ac-relax-answer:disabled {
    cursor: default;
}

.ac-relax-feedback {
    display: none;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--ac-blue-soft);
    color: var(--ac-ink);
}

.ac-relax-feedback.is-visible {
    display: block;
}

.ac-relax-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ac-relax-secondary {
    min-height: 42px;
    padding: 10px 14px;
    background: var(--ac-blue);
    color: var(--ac-white);
    font-weight: 800;
}

.ac-relax-secondary:hover,
.ac-relax-secondary:focus-visible {
    background: #173653;
}

.ac-relax-result {
    display: grid;
    gap: 10px;
}

.ac-relax-maze {
    max-width: 980px;
    margin: 0 auto 18px;
    padding: 18px;
    border: 1px solid rgba(36, 73, 111, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(244, 237, 223, 0.72)),
        radial-gradient(circle at 14% 10%, rgba(199, 164, 90, 0.18), transparent 34%);
    box-shadow: 0 18px 45px rgba(33, 49, 63, 0.1);
}

.ac-relax-maze__empty,
.ac-relax-maze__loading {
    display: grid;
    min-height: 190px;
    place-items: center;
    gap: 8px;
    border: 1px solid rgba(36, 73, 111, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--ac-muted);
    text-align: center;
}

.ac-relax-maze__empty strong {
    color: var(--ac-blue);
    font-size: 1.25rem;
}

.ac-relax-maze__empty p {
    margin: 0;
}

.ac-relax-maze__shell {
    display: grid;
    gap: 16px;
}

.ac-relax-maze__panel {
    display: grid;
    gap: 16px;
    padding: clamp(14px, 2.6vw, 22px);
    overflow: hidden;
    border: 1px solid rgba(36, 73, 111, 0.14);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 45px rgba(36, 73, 111, 0.11);
}

.ac-relax-maze__hud {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.ac-relax-maze__identity {
    min-width: 0;
}

.ac-relax-maze__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--ac-gold);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ac-relax-maze__identity h3 {
    margin: 0 0 6px;
    color: var(--ac-blue);
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}

.ac-relax-maze__status {
    min-height: 1.5em;
    margin: 0;
    color: var(--ac-muted);
    font-weight: 650;
}

.ac-relax-maze__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(76px, 1fr));
    gap: 8px;
    min-width: min(100%, 312px);
}

.ac-relax-maze__metric {
    padding: 10px 12px;
    border: 1px solid rgba(36, 73, 111, 0.12);
    border-radius: 8px;
    background: rgba(232, 240, 246, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.ac-relax-maze__metric span {
    display: block;
    color: var(--ac-muted);
    font-size: 0.74rem;
    font-weight: 750;
    text-transform: uppercase;
}

.ac-relax-maze__metric strong {
    display: block;
    color: var(--ac-blue);
    font-size: 1.15rem;
    line-height: 1.1;
}

.ac-relax-maze__quick-actions {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 8px;
}

.ac-relax-maze__ghost {
    min-height: 40px;
    padding: 9px 13px;
    border-color: rgba(36, 73, 111, 0.18);
    background: #ffffff;
    color: var(--ac-blue);
    font-weight: 800;
}

.ac-relax-maze__ghost:hover,
.ac-relax-maze__ghost:focus {
    border-color: var(--ac-gold);
    background: var(--ac-gold-soft);
    transform: translateY(-1px);
}

.ac-relax-maze__board {
    display: grid;
    grid-template-columns: repeat(var(--ac-maze-cols), minmax(0, 1fr));
    width: min(100%, clamp(240px, 55vh, 620px));
    aspect-ratio: 1;
    margin: 0 auto;
    padding: clamp(7px, 1.2vw, 10px);
    gap: clamp(2px, 0.45vw, 5px);
    overflow: hidden;
    border: 1px solid rgba(36, 73, 111, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(36, 73, 111, 0.94), rgba(23, 54, 83, 0.96)),
        var(--ac-blue);
    box-shadow: 0 18px 42px rgba(36, 73, 111, 0.2);
    outline: none;
}

.ac-relax-maze__board:focus {
    box-shadow: 0 18px 42px rgba(36, 73, 111, 0.2), 0 0 0 4px rgba(199, 164, 90, 0.26);
}

.ac-relax-maze__cell {
    position: relative;
    min-width: 0;
    min-height: 0;
    border-radius: 4px;
    transition: transform 0.14s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.ac-relax-maze__cell.is-wall {
    background: linear-gradient(145deg, #173653, #24496f);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.ac-relax-maze__cell.is-path {
    background: linear-gradient(145deg, #fffdf6, #eef5f7);
    box-shadow: inset 0 0 0 1px rgba(36, 73, 111, 0.035);
}

/* Marcatore "S" di partenza rimosso: non più necessario (la cella di partenza
   resta una normale cella di percorso). */

.ac-relax-maze__cell.is-exit {
    background: linear-gradient(145deg, #eafbe8, #ffffff);
}

.ac-relax-maze__cell.is-exit::after {
    position: absolute;
    inset: 0;                    /* riempie l'intera cella: ben visibile a ogni livello */
    border-radius: 4px;          /* segue la forma della cella */
    background: linear-gradient(145deg, #7fe07a, #36b536); /* verde chiaro pieno */
    content: "";
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 0 12px rgba(70, 200, 70, 0.5);
    /* niente pulsazione: cella verde statica (meno movimento, più leggibile da mobile) */
}

.ac-relax-maze__cell.is-player::before {
    position: absolute;
    z-index: 2;
    inset: 0;                    /* riempie l'intera cella: visibile a ogni livello, anche L6-10 */
    border-radius: 4px;          /* segue la forma della cella */
    background: linear-gradient(145deg, #ff3b3b, #e00000); /* rosso acceso */
    content: "";
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 4px 12px rgba(190, 20, 20, 0.45);
    animation: ac-relax-player-pop 0.2s ease-out, ac-relax-player-pulse 1.3s ease-in-out infinite;
}

.ac-relax-maze__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    color: var(--ac-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.ac-relax-maze__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ac-relax-maze__legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.ac-relax-maze__legend .is-start-dot {
    background: var(--ac-blue);
}

.ac-relax-maze__legend .is-player-dot {
    background: #e51e1e;
}

.ac-relax-maze__legend .is-exit-dot {
    background: #5fc35f;
    box-shadow: 0 0 8px rgba(95, 205, 95, 0.72);
}

.ac-relax-maze__controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(78px, 1fr));
    gap: 10px;
    width: min(100%, 360px);
    margin: 0 auto;
}

.ac-relax-maze__control {
    min-height: 56px;
    padding: 10px;
    border: 1px solid rgba(36, 73, 111, 0.18);
    border-radius: 8px;
    background: linear-gradient(145deg, #24496f, #173653);
    color: var(--ac-white);
    font-size: 1.25rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(36, 73, 111, 0.18);
}

.ac-relax-maze__control:hover,
.ac-relax-maze__control:focus {
    background: linear-gradient(145deg, #2e587f, #173653);
    transform: translateY(-1px);
}

.ac-relax-maze__control:active {
    transform: translateY(1px) scale(0.98);
}

.ac-relax-maze__control[data-dir="su"] {
    grid-column: 2;
}

.ac-relax-maze__control[data-dir="sinistra"] {
    grid-column: 1;
}

.ac-relax-maze__control[data-dir="destra"] {
    grid-column: 3;
}

.ac-relax-maze__control[data-dir="giu"] {
    grid-column: 2;
}

/* Effetto vibrazione/scuotimento al tocco del muro rimosso: su mobile faceva
   sembrare il gioco traballante. Il blocco resta indicato dal messaggio di stato
   ("Muro: scegli un altro passaggio") e dal fatto che il segnaposto non si muove. */

.ac-relax-maze__shell.is-complete .ac-relax-maze__board {
    box-shadow: 0 18px 42px rgba(36, 73, 111, 0.2), 0 0 0 5px rgba(199, 164, 90, 0.24);
}

.ac-relax-maze__result {
    border: 1px solid rgba(199, 164, 90, 0.24);
    background: linear-gradient(145deg, #ffffff, #fff8df);
    box-shadow: 0 18px 42px rgba(36, 73, 111, 0.09);
}

@keyframes ac-relax-player-pop {
    from {
        transform: scale(0.82);
    }
    to {
        transform: scale(1);
    }
}

/* Pulsazione/glow continua del segnaposto: alone rosso che si espande e svanisce */
@keyframes ac-relax-player-pulse {
    0%, 100% {
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
                    0 0 0 0 rgba(255, 45, 45, 0.55),
                    0 4px 12px rgba(190, 20, 20, 0.45);
    }
    50% {
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.98),
                    0 0 0 6px rgba(255, 45, 45, 0),
                    0 4px 16px rgba(190, 20, 20, 0.6);
    }
}

@keyframes ac-relax-exit-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.92;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes ac-relax-board-bump {
    0%, 100% {
        transform: translateX(0);
    }
    35% {
        transform: translateX(-4px);
    }
    70% {
        transform: translateX(4px);
    }
}
.ac-relax-stars {
    color: var(--ac-gold);
    font-size: 1.7rem;
    letter-spacing: 0;
}

.ac-relax-leaderboard__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ac-relax-leaderboard__title h3 {
    margin: 0;
}

.ac-relax-leaderboard__title span {
    color: var(--ac-muted);
    font-size: 0.9rem;
}

.ac-relax-leaderboard__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style-position: inside;
}

.ac-relax-leaderboard__list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fbfd;
}

.ac-relax-leaderboard__list strong {
    color: var(--ac-blue);
}

.ac-relax-leaderboard__list em {
    color: var(--ac-muted);
    font-style: normal;
}

@media (max-width: 820px) {
    .ac-relax-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ac-relax-levels {
        grid-template-columns: repeat(5, minmax(42px, 1fr));
    }

    .ac-relax-game__top,
    .ac-relax-leaderboard__title {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .ac-relax-grid,
    .ac-relax-answers {
        grid-template-columns: 1fr;
    }

    .ac-relax-card {
        min-height: 0;
    }

    .ac-relax-levels {
        grid-template-columns: repeat(4, minmax(42px, 1fr));
    }

    .ac-relax-leaderboard__list li {
        grid-template-columns: 1fr;
    }

    .ac-relax-maze {
        padding: 14px;
    }

    .ac-relax-maze__board {
        width: min(100%, 92vw);
    }
}

/* Relax UI refresh: home, quiz and leaderboards */
.ac-relax {
    --ac-surface: #ffffff;
    --ac-surface-soft: #f8fbfd;
    --ac-line: rgba(36, 73, 111, 0.14);
    --ac-line-strong: rgba(36, 73, 111, 0.22);
    --ac-shadow-sm: 0 10px 24px rgba(33, 49, 63, 0.07);
    --ac-shadow-md: 0 18px 45px rgba(33, 49, 63, 0.1);
    --ac-shadow-gold: 0 12px 26px rgba(199, 164, 90, 0.18);
}

.ac-relax-home {
    padding: clamp(28px, 5vw, 58px) 0;
    background: linear-gradient(180deg, rgba(248, 251, 253, 0.74), rgba(255, 255, 255, 0));
}

.ac-relax__header {
    display: grid;
    gap: 8px;
    margin-bottom: 28px;
}

.ac-relax__header .ac-relax__eyebrow,
.ac-relax-game__top .ac-relax__eyebrow,
.ac-relax-card__type {
    width: fit-content;
    padding: 5px 9px;
    border: 1px solid rgba(199, 164, 90, 0.28);
    border-radius: 999px;
    background: rgba(247, 239, 216, 0.7);
    color: #876b29;
    font-size: 0.72rem;
    font-weight: 850;
}

.ac-relax__header h2,
.ac-relax-game__top h2 {
    max-width: 760px;
    margin-bottom: 2px;
    color: #173653;
    font-size: clamp(2rem, 4vw, 3rem);
}

.ac-relax__header p,
.ac-relax-game__top p {
    max-width: 720px;
    color: #526170;
    font-size: 1.02rem;
}

.ac-relax-grid {
    gap: 18px;
}

.ac-relax-card {
    position: relative;
    min-height: 326px;
    border-color: var(--ac-line);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    box-shadow: var(--ac-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ac-relax-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--ac-blue), var(--ac-gold));
    content: "";
    opacity: 0;
}

.ac-relax-card--active::before {
    opacity: 1;
}

.ac-relax-card--active:hover,
.ac-relax-card--active:focus-within {
    border-color: rgba(36, 73, 111, 0.28);
    box-shadow: var(--ac-shadow-md);
    transform: translateY(-2px);
}

.ac-relax-card--coming {
    background: linear-gradient(180deg, #ffffff 0%, #fbf7ef 100%);
}

.ac-relax-card--coming .ac-relax-visual,
.ac-relax-card--coming .ac-relax-card__body {
    opacity: 0.76;
}

.ac-relax-card__body {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px 18px 12px;
}

.ac-relax-card__body h3 {
    margin: 0;
    color: #173653;
    font-size: 1.22rem;
}

.ac-relax-card__body p {
    margin: 0;
    color: #5e6b77;
    font-size: 0.96rem;
}

.ac-relax-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 18px 18px;
}

.ac-relax-visual {
    height: 118px;
    padding: 16px;
    background: linear-gradient(145deg, #e8f0f6, #f7efd8);
}

.ac-relax-visual rect {
    fill: rgba(255, 255, 255, 0.78);
    stroke: rgba(36, 73, 111, 0.18);
}

.ac-relax-visual path {
    stroke: #24496f;
    stroke-width: 4;
}

.ac-relax-visual circle {
    fill: #c7a45a;
    filter: drop-shadow(0 4px 7px rgba(199, 164, 90, 0.24));
}

.ac-relax-button,
.ac-relax-secondary {
    border: 1px solid rgba(36, 73, 111, 0.12);
    border-radius: 8px;
    background: linear-gradient(145deg, #24496f, #173653);
    box-shadow: 0 10px 22px rgba(36, 73, 111, 0.16);
}

.ac-relax-button:hover,
.ac-relax-button:focus-visible,
.ac-relax-secondary:hover,
.ac-relax-secondary:focus-visible {
    background: linear-gradient(145deg, #2e587f, #173653);
    transform: translateY(-1px);
}

.ac-relax-pill {
    border-color: rgba(36, 73, 111, 0.1);
    background: rgba(232, 240, 246, 0.72);
    color: #526170;
}

.ac-relax-game {
    padding: 28px 0;
}

.ac-relax-game__top {
    align-items: center;
    padding: clamp(18px, 3vw, 28px);
    border-color: var(--ac-line);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 237, 223, 0.7)),
        linear-gradient(90deg, rgba(232, 240, 246, 0.9), rgba(247, 239, 216, 0.56));
    box-shadow: var(--ac-shadow-sm);
}

.ac-relax-game__summary {
    min-width: 150px;
    border-color: rgba(199, 164, 90, 0.28);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--ac-shadow-gold);
}

.ac-relax-game__summary strong {
    font-size: 2.25rem;
}

.ac-relax-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    border-color: rgba(199, 164, 90, 0.28);
    background: linear-gradient(145deg, #fffdf6, #f7efd8);
    box-shadow: 0 8px 20px rgba(199, 164, 90, 0.1);
}

.ac-relax-alert::before {
    display: inline-grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 999px;
    background: var(--ac-gold);
    color: #ffffff;
    content: "i";
    font-weight: 900;
}

.ac-relax-levels {
    gap: 10px;
    margin-bottom: 20px;
}

.ac-relax-level {
    min-height: 48px;
    border-color: var(--ac-line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fbfd);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(36, 73, 111, 0.06);
}

.ac-relax-level:hover:not(:disabled),
.ac-relax-level:focus:not(:disabled) {
    border-color: rgba(36, 73, 111, 0.28);
    background: var(--ac-blue-soft);
}

.ac-relax-level.is-active {
    border-color: rgba(199, 164, 90, 0.54);
    background: linear-gradient(145deg, #fff8df, #ffffff);
    box-shadow: 0 10px 22px rgba(199, 164, 90, 0.16);
}

.ac-relax-level:disabled {
    background: #f4f6f8;
    color: #95a0aa;
    opacity: 0.62;
}

.ac-relax-quiz,
.ac-relax-leaderboard {
    border-color: var(--ac-line);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    box-shadow: var(--ac-shadow-sm);
}

.ac-relax-quiz {
    padding: clamp(18px, 3vw, 26px);
}

.ac-relax-quiz__empty {
    min-height: 120px;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(36, 73, 111, 0.18);
    border-radius: 8px;
    background: rgba(232, 240, 246, 0.34);
    text-align: center;
}

.ac-relax-quiz__meta {
    align-items: center;
    margin-bottom: 16px;
}

.ac-relax-quiz__meta span {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid rgba(36, 73, 111, 0.1);
    border-radius: 999px;
    background: rgba(232, 240, 246, 0.7);
    color: #526170;
    font-size: 0.86rem;
}

.ac-relax-quiz__question {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid rgba(36, 73, 111, 0.1);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: inset 4px 0 0 var(--ac-gold);
    color: #173653;
    font-size: clamp(1.12rem, 2vw, 1.34rem);
}

.ac-relax-answers {
    gap: 12px;
}

.ac-relax-answer {
    min-height: 58px;
    padding: 14px 15px;
    border-color: var(--ac-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 7px 16px rgba(36, 73, 111, 0.06);
    font-weight: 700;
}

.ac-relax-answer:hover:not(:disabled),
.ac-relax-answer:focus:not(:disabled) {
    border-color: rgba(36, 73, 111, 0.3);
    background: linear-gradient(180deg, #ffffff, #e8f0f6);
    transform: translateY(-1px);
}

.ac-relax-answer.is-correct {
    border-color: #1c7d45;
    background: linear-gradient(145deg, #34b06a, #1f9a55); /* verde pieno */
    color: #ffffff;
    opacity: 1;
    box-shadow: 0 6px 16px rgba(28, 125, 69, 0.34);
}

.ac-relax-answer.is-wrong {
    border-color: #a82f2b;
    background: linear-gradient(145deg, #e8534f, #cf3b37); /* rosso pieno */
    color: #ffffff;
    opacity: 1;
    box-shadow: 0 6px 16px rgba(168, 47, 43, 0.32);
}

.ac-relax-feedback {
    border: 1px solid rgba(36, 73, 111, 0.1);
    background: linear-gradient(145deg, #e8f0f6, #ffffff);
}

.ac-relax-result {
    padding: 18px;
    border: 1px solid rgba(199, 164, 90, 0.24);
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #fff8df);
    box-shadow: var(--ac-shadow-sm);
}

.ac-relax-stars {
    font-weight: 900;
    text-shadow: 0 4px 12px rgba(199, 164, 90, 0.2);
}

.ac-relax-leaderboard {
    padding: clamp(18px, 3vw, 24px);
}

.ac-relax-leaderboard__title {
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(36, 73, 111, 0.1);
}

.ac-relax-leaderboard__title span {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(232, 240, 246, 0.72);
}

.ac-relax-leaderboard__list li {
    grid-template-columns: minmax(0, 1fr) auto auto;
    border: 1px solid rgba(36, 73, 111, 0.08);
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(36, 73, 111, 0.05);
}

.ac-relax-leaderboard__list strong {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--ac-blue-soft);
}

@media (max-width: 820px) {
    .ac-relax-grid {
        gap: 14px;
    }

    .ac-relax-game__top {
        align-items: stretch;
    }

    .ac-relax-game__summary {
        width: 100%;
        text-align: left;
    }

    .ac-relax-game__summary strong,
    .ac-relax-game__summary span {
        display: inline-block;
        vertical-align: baseline;
    }

    .ac-relax-game__summary span {
        margin-left: 8px;
    }
}

@media (max-width: 560px) {
    .ac-relax-home {
        padding-top: 22px;
    }

    .ac-relax__header,
    .ac-relax-game__top {
        padding-inline: 14px;
    }

    .ac-relax-card {
        min-height: 0;
    }

    .ac-relax-card__body,
    .ac-relax-card__footer {
        padding-inline: 15px;
    }

    .ac-relax-visual {
        height: 96px;
    }

    .ac-relax-levels {
        gap: 8px;
        padding-inline: 14px;
    }

    .ac-relax-level {
        min-height: 46px;
    }

    .ac-relax-quiz,
    .ac-relax-leaderboard {
        padding: 16px;
    }

    .ac-relax-quiz__meta,
    .ac-relax-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ac-relax-secondary,
    .ac-relax-button {
        width: 100%;
    }
}
/* ================================================================
   Relax — immagini card, sfondi gioco, hero home
   ================================================================ */

/* Immagini nelle card giochi */
.ac-relax-visual {
    position: relative;
    height: 140px;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(145deg, #e8f0f6, #f7efd8);
}

.ac-relax-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
    transition: transform 0.2s ease;
}

.ac-relax-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(36, 73, 111, 0.07));
    content: "";
    pointer-events: none;
}

.ac-relax-card--active:hover .ac-relax-visual img,
.ac-relax-card--active:focus-within .ac-relax-visual img {
    transform: scale(1.048);
}

.ac-relax-card--coming .ac-relax-visual img {
    filter: saturate(0.78) brightness(1.03);
}

.ac-relax-visual__fallback {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #e8f0f6, #f7efd8);
}

/* Sfondo sezioni gioco singolo */
.ac-relax-game__top {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.95), rgba(255, 253, 246, 0.9) 58%, rgba(232, 240, 246, 0.78)),
        url("../images/bg-home-peace.png") center / cover no-repeat;
}

.ac-relax-game[data-game="sapienza"] .ac-relax-game__top {
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.95), rgba(255, 253, 246, 0.88) 58%, rgba(232, 240, 246, 0.74)),
        url("../images/bg-sapienza-prayer.png") center / cover no-repeat;
}

.ac-relax-game[data-game="mente-aperta"] .ac-relax-game__top,
.ac-relax-game[data-game="il-cammino"] .ac-relax-game__top {
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.94), rgba(255, 253, 246, 0.88) 58%, rgba(232, 240, 246, 0.72)),
        url("../images/bg-ethereal-path.png") center / cover no-repeat;
}

.ac-relax-game__top > * {
    position: relative;
    z-index: 1;
}

.ac-relax-game__summary {
    backdrop-filter: blur(5px);
}

/* ================================================================
   Hero home — layout full-bleed, sfondo, testo, card
   ================================================================ */

/* Nascondi header/footer tema sulla home */
body.home .wp-site-blocks > header.wp-block-template-part,
body.home .wp-site-blocks > footer.wp-block-template-part {
    display: none;
}

body.home .wp-block-post-title {
    display: none !important;
}

/* Azzera padding/margini wrapper pagina sulla home */
body.home #wp--skip-link--target,
body.home #wp--skip-link--target > .wp-block-group,
body.home .entry-content.wp-block-post-content {
    margin-top: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

body.home #wp--skip-link--target > .alignfull,
body.home .entry-content.alignfull {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.home .entry-content.wp-block-post-content > .ac-relax-home {
    margin: 0 !important;
}

/* Posizionamento base per pseudo-elementi hero */
.ac-relax-home {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #fffdf8 0%, #f8fbfd 46%, #ffffff 100%);
}

.ac-relax-home > * {
    position: relative;
    z-index: 1;
}

/* Full-bleed sulla home */
body.home .ac-relax-home {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    padding: 0 0 clamp(44px, 6vw, 84px);
}

/* Sfondo atmosferico hero (colomba, foglie, sentiero) */
.ac-relax-home::before {
    position: absolute;
    inset: 0 0 auto;
    height: clamp(460px, 54vw, 620px);
    background: url("../images/bg-home-peace.png") top center / cover no-repeat;
    content: "";
    z-index: 0;
}

/* Gradiente per leggibilità testo e transizione fluida verso le card */
.ac-relax-home::after {
    position: absolute;
    inset: 0 0 auto;
    height: clamp(460px, 54vw, 620px);
    background:
        radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.56) 30%, rgba(255, 255, 255, 0.16) 60%, rgba(255, 255, 255, 0) 80%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.86) 82%, rgba(255, 255, 255, 0.98) 100%);
    content: "";
    z-index: 0;
}

/* Area hero: eyebrow, titolo, sottotitolo, CTA */
.ac-relax-home .ac-relax__header {
    min-height: clamp(460px, 54vw, 620px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(68px, 9vw, 120px) 20px clamp(82px, 11vw, 144px);
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-align: center;
}

.ac-relax-home .ac-relax__eyebrow {
    margin-inline: auto;
    border-color: rgba(199, 164, 90, 0.40);
    background: rgba(255, 253, 246, 0.88);
    box-shadow: 0 6px 18px rgba(199, 164, 90, 0.14);
}

.ac-relax-home .ac-relax__header h2 {
    max-width: none;
    margin: 0;
    color: #173653;
    font-size: clamp(3rem, 7vw, 5.4rem);
    font-weight: 500;
    line-height: 0.98;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.78), 0 10px 28px rgba(255, 255, 255, 0.84);
}

/* Solo il sottotitolo (non l'eyebrow che è già una <p> con classe propria) */
.ac-relax-home .ac-relax__header > p:not(.ac-relax__eyebrow) {
    max-width: 660px;
    margin: 0 auto;
    padding: 8px 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.52);
    color: #1e3a52;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.62;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(2px);
}

/* Bottone CTA "Inizia a giocare" */
.ac-relax-home__cta {
    margin-top: 6px;
    min-width: 224px;
    min-height: 52px;
    padding: 14px 30px;
    border: 1px solid rgba(199, 164, 90, 0.78);
    border-radius: 8px;
    background: linear-gradient(145deg, #173653, #24496f);
    color: #ffffff;
    font-size: 1.06rem;
    font-weight: 800;
    justify-content: center;
    box-shadow: 0 14px 32px rgba(36, 73, 111, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.ac-relax-home__cta:hover,
.ac-relax-home__cta:focus {
    background: linear-gradient(145deg, #1e4568, #2e587f);
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(36, 73, 111, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Griglia card giochi */
.ac-relax-home .ac-relax-grid {
    max-width: 1120px;
    margin-top: -44px;
    gap: 20px 24px;
    /* Ancora #ac-relax-games: atterra appena SOTTO la barra admin (offset adattivo)
       con un piccolo margine, senza mostrare l'intestazione sopra né restare nascosta
       sotto la barra. (Un +80 mostrava troppa intestazione = sensazione "troppo in alto".) */
    scroll-margin-top: calc(var(--ac-admin-offset, 0px) + 10px);
}

/* Card home */
.ac-relax-home .ac-relax-card {
    min-height: 260px;
    border-color: rgba(199, 164, 90, 0.26);
    background: rgba(255, 253, 247, 0.93);
    box-shadow: 0 18px 40px rgba(36, 73, 111, 0.11);
    text-align: center;
    backdrop-filter: blur(6px);
}

.ac-relax-home .ac-relax-card--active {
    border-color: rgba(36, 73, 111, 0.22);
    background: rgba(255, 255, 255, 0.93);
}

.ac-relax-home .ac-relax-card__body {
    display: flex;
    align-items: center;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px 10px;
}

.ac-relax-home .ac-relax-card__type {
    margin-inline: auto;
}

.ac-relax-home .ac-relax-card__footer {
    justify-content: center;
    width: 100%;
    padding-bottom: 20px;
}

.ac-relax-home .ac-relax-button {
    min-width: 118px;
    padding-inline: 22px;
    justify-content: center;
}

.ac-relax-home .ac-relax-pill {
    border-color: rgba(199, 164, 90, 0.36);
    background: rgba(255, 253, 246, 0.94);
    color: #8a6a28;
}

/* Immagine icona nelle card home */
.ac-relax-home .ac-relax-visual {
    width: calc(100% - 20px);
    height: 104px;
    margin: 10px 10px 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(36, 73, 111, 0.04);
}

/* Classifica sotto le card */
.ac-relax-home .ac-relax-leaderboard {
    max-width: 1120px;
    margin-top: 26px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(6px);
}

/* Responsive */
@media (max-width: 820px) {
    body.home .ac-relax-home .ac-relax-grid {
        margin-top: -22px;
    }

    .ac-relax-home .ac-relax__header h2 {
        font-size: 3rem;
    }
}

@media (max-width: 560px) {
    .ac-relax-home::before {
        height: 420px;
        background-size: auto 420px;
        background-position: top center;
    }

    .ac-relax-home::after {
        height: 420px;
    }

    .ac-relax-home .ac-relax__header {
        min-height: 420px;
        padding: 52px 16px 80px;
    }

    .ac-relax-home .ac-relax__header h2 {
        font-size: 2.8rem;
    }

    .ac-relax-home .ac-relax__header > p:not(.ac-relax__eyebrow) {
        font-size: 0.96rem;
        padding: 7px 12px;
    }

    body.home .ac-relax-home .ac-relax-grid {
        margin-top: -20px;
    }

    .ac-relax-home .ac-relax-card {
        min-height: 0;
    }

    .ac-relax-home .ac-relax-visual {
        height: 90px;
    }

    .ac-relax-visual {
        height: 116px;
    }

    .ac-relax-game__top {
        background-position: center;
    }
}
/* Pulsante Esci — sticky, centrato, sempre raggiungibile, sotto la admin bar */
.ac-relax-game__exit {
    position: sticky;
    top: var(--ac-admin-offset, 0px);
    z-index: 30;
    max-width: var(--ac-shell-max);
    margin: 0 auto var(--ac-space-2);
    padding: var(--ac-space-1) var(--ac-space-3) 0;
    text-align: center; /* centra il tasto Esci */
}

.ac-relax-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 28px;
    border: 2px solid var(--ac-blue);
    border-radius: 999px;
    background: linear-gradient(180deg, #e0c074 0%, #c7a45a 100%); /* oro */
    color: var(--ac-blue);                                         /* blu */
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(36, 73, 111, 0.22);
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.ac-relax-exit-btn:hover,
.ac-relax-exit-btn:focus-visible {
    background: linear-gradient(180deg, #ead08a 0%, #d2b066 100%);
    border-color: var(--ac-blue);
    color: var(--ac-blue);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(36, 73, 111, 0.30);
}

.ac-relax-exit-btn:focus-visible {
    outline: 3px solid rgba(36, 73, 111, 0.5);
    outline-offset: 2px;
}

/* Partita in corso: solo "Esci dal gioco" resta attivo. I pulsanti di
   selezione livello e la classifica vengono disabilitati (in tutti i giochi). */
.ac-relax-game.is-playing .ac-relax-levels,
.ac-relax-game.is-playing .ac-relax-leaderboard {
    pointer-events: none;
    opacity: 0.45;
    filter: grayscale(0.35);
}

/* Gioco aperto: gli altri lanciatori "Gioca" (griglia + card bonus) sono
   disabilitati; tornano attivi quando si esce dal gioco (URL senza gioco). */
.ac-relax-home.is-in-game .ac-relax-grid,
.ac-relax-home.is-in-game .ac-relax-bonus-strip {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(0.35);
}

/* ================================================================
   End Relax — immagini card, sfondi gioco, hero home
   ================================================================ */

/* ================================================================
   Pagine gioco — identità visiva, profondità atmosferica
   ================================================================ */

/* Sfondo caldo per la sezione gioco */
.ac-relax-game {
    background: linear-gradient(180deg, #fffdf8 0%, #f8fbfd 38%, #ffffff 100%);
}

/* Hero gioco: overlay meno opaco, bordo e ombra più presenti */
.ac-relax-game__top {
    border-color: rgba(199, 164, 90, 0.26);
    border-radius: 12px;
    box-shadow: 0 24px 58px rgba(36, 73, 111, 0.15);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 253, 246, 0.62) 52%, rgba(232, 240, 246, 0.54)),
        url("../images/bg-home-peace.png") center / cover no-repeat;
}

.ac-relax-game[data-game="sapienza"] .ac-relax-game__top {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 253, 246, 0.62) 52%, rgba(232, 240, 246, 0.54)),
        url("../images/bg-sapienza-prayer.png") center / cover no-repeat;
}

.ac-relax-game[data-game="mente-aperta"] .ac-relax-game__top,
.ac-relax-game[data-game="il-cammino"] .ac-relax-game__top {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 253, 246, 0.62) 52%, rgba(232, 240, 246, 0.54)),
        url("../images/bg-ethereal-path.png") center / cover no-repeat;
}

/* Striscia decorativa oro–azzurro in cima al box hero del gioco */
.ac-relax-game__top::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, var(--ac-blue), var(--ac-gold));
    content: "";
    z-index: 2;
}

/* Separatore visivo sopra la griglia dei livelli */
.ac-relax-levels {
    margin-top: clamp(16px, 2.5vw, 28px);
    padding-top: clamp(10px, 1.5vw, 18px);
    border-top: 1px solid rgba(36, 73, 111, 0.09);
}

/* Contenitore quiz: textura atmosferica lieve */
.ac-relax-quiz {
    border-color: rgba(199, 164, 90, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.70) 0%, rgba(255, 255, 255, 0.96) 100%),
        url("../images/bg-home-peace.png") top right / 360px auto no-repeat;
}

/* Contenitore labirinto: aggiunge immagine atmosferica in basso-destra */
.ac-relax-maze {
    border-color: rgba(199, 164, 90, 0.18);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 237, 223, 0.70)),
        radial-gradient(circle at 14% 10%, rgba(199, 164, 90, 0.18), transparent 34%),
        url("../images/bg-home-peace.png") bottom right / 440px auto no-repeat;
}

/* Classifica: sfondo caldo leggero */
.ac-relax-leaderboard {
    border-color: rgba(199, 164, 90, 0.14);
    background: linear-gradient(180deg, rgba(255, 253, 247, 0.50) 0%, rgba(255, 255, 255, 0.94) 100%);
}

/* Alert ospite/stato */
.ac-relax-alert {
    border-color: rgba(199, 164, 90, 0.26);
    background: rgba(255, 253, 247, 0.88);
    backdrop-filter: blur(3px);
}
/* ================================================================
   End pagine gioco — identità visiva
   ================================================================ */

/* ================================================================
   Occhi Attenti — trova le differenze
   ================================================================ */

.ac-relax-game[data-game="occhi-attenti"] .ac-relax-game__top {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.80), rgba(255, 253, 246, 0.65) 52%, rgba(232, 240, 246, 0.58)),
        url("../images/bg-ethereal-path.png") center / cover no-repeat;
}

/* Stat bar sopra le immagini */
.ac-relax-diff-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: rgba(255, 253, 247, 0.90);
    border: 1px solid rgba(199, 164, 90, 0.28);
    border-radius: 8px;
}

.ac-relax-diff-stat {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ac-blue, #24496f);
}

.ac-relax-diff-stat--error {
    color: #b32d2e;
}

.ac-relax-diff-stat--level {
    margin-left: auto;
    font-weight: 700;
    color: var(--ac-blue-dark, #1a3550);
    font-size: 0.9rem;
}

.ac-relax-diff-help {
    font-size: 0.82rem;
    padding: 4px 12px;
}

/* Layout immagini */
.ac-relax-diff-images {
    /* IMPORTANTE: colonne a metà fissa (1fr) con immagine width:100% → il wrap
       COINCIDE con l'immagine visualizzata. È un requisito del gioco: sia il
       rilevamento del click sia i marcatori usano le % rispetto al wrap, quindi
       il wrap DEVE combaciare con l'immagine, altrimenti gli hotspot non
       risultano cliccabili. La dimensione si riduce limitando la larghezza al
       minore tra 90% e un valore legato all'altezza finestra. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    /* La dimensione base è limitata da larghezza e altezza finestra; il fattore
       --ac-oa-scale (impostato da admin sulla sezione, default 1) la scala. */
    max-width: calc(min(90%, 115vh) * var(--ac-oa-scale, 1));
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 640px) {
    .ac-relax-diff-images {
        grid-template-columns: 1fr;
    }
}

/* Wrapper singola immagine */
.ac-relax-diff-img-wrap {
    position: relative;
    cursor: crosshair;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(199, 164, 90, 0.22);
    background: #f4f6f8;
    user-select: none;
    -webkit-user-select: none;
}

.ac-relax-diff-img-label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: rgba(36, 73, 111, 0.72);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 0 0 6px 0;
    pointer-events: none;
}

.ac-relax-diff-img {
    /* width:100% → l'immagine riempie ESATTAMENTE il wrap (necessario per
       l'allineamento di click e marcatori: vedi nota su .ac-relax-diff-images). */
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Marcatori hotspot */
.ac-relax-diff-marker {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.ac-relax-diff-marker--found {
    border: 3px solid #27ae60;
    background: rgba(39, 174, 96, 0.18);
    animation: oa-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ac-relax-diff-marker--hint {
    border: 3px dashed #e3b85f;
    background: rgba(227, 184, 95, 0.22);
    animation: oa-pulse 1s ease-in-out infinite;
}

.ac-relax-diff-marker--hint-fade {
    opacity: 0;
    transition: opacity 0.5s;
}

.ac-relax-diff-marker--error {
    width: 38px;
    height: 38px;
    background: rgba(179, 45, 46, 0.22);
    border: 2px solid #b32d2e;
    animation: oa-error 0.7s ease forwards;
}

@keyframes oa-pop {
    from { transform: translate(-50%, -50%) scale(0.4); opacity: 0.2; }
    to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

@keyframes oa-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.9; }
    50%       { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

@keyframes oa-error {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    80%  { opacity: 0.3; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}

/* Overlay di completamento livello */
.ac-relax-diff-complete {
    margin-top: 18px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid rgba(199, 164, 90, 0.32);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(36, 73, 111, 0.14);
    text-align: center;
}

.ac-relax-diff-complete__msg {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ac-blue-dark, #1a3550);
    margin: 8px 0 4px;
}

/* Stelle Occhi Attenti */
.ac-relax-diff-complete .ac-relax-stars {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.ac-relax-star {
    color: #d0d0d0;
    display: inline-block;
}

.ac-relax-star--on {
    color: #e3b85f;
    text-shadow: 0 0 6px rgba(227, 184, 95, 0.5);
}

/* Contenitore gioco differenze */
.ac-relax-differences {
    border: 1px solid rgba(199, 164, 90, 0.18);
    border-radius: 10px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.6) 0%, rgba(255, 255, 255, 0.95) 100%);
}
/* ================================================================
   End Occhi Attenti
   ================================================================ */

/* ================================================================
   Riproporzionamento globale viste gioco — compatte e leggibili
   (blocco finale: vince per ordine di sorgente)
   ================================================================ */

/* Sezione gioco: compatta, larghezza shell coerente */
.ac-relax-game {
    padding: var(--ac-space-3) 0;
}

.ac-relax-game__top,
.ac-relax-maze,
.ac-relax-quiz,
.ac-relax-differences {
    max-width: var(--ac-shell-max);
}

/* Hero gioco compatto (110-160px desktop) */
.ac-relax-game__top {
    align-items: center;
    gap: var(--ac-space-3);
    padding: clamp(14px, 2vw, 22px) clamp(16px, 2.4vw, 26px);
    border-radius: var(--ac-radius-md);
    background-size: cover;
    background-position: center;
}

.ac-relax-game__top h2 {
    margin-bottom: 4px;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.12;
}

.ac-relax-game__top p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.4;
}

.ac-relax-game__summary {
    min-width: 96px;
    padding: 10px 12px;
}

.ac-relax-game__summary strong {
    font-size: 1.6rem;
}

/* Partita in corso: hero ulteriormente ridotto, descrizione nascosta */
.ac-relax-game.is-playing .ac-relax-game__top {
    padding: var(--ac-space-2) clamp(14px, 2vw, 22px);
}

.ac-relax-game.is-playing .ac-relax-game__top p {
    display: none;
}

.ac-relax-game.is-playing .ac-relax-game__top h2 {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
}

/* Griglia livelli compatta (1 riga desktop) */
.ac-relax-levels {
    max-width: 720px;
}

.ac-relax-level {
    position: relative;
    min-height: 40px;
    max-height: 52px;
    font-size: 0.95rem;
    display: grid;
    place-items: center;
    padding: 4px;
}

/* Stato livello: completato (spunta verde) */
.ac-relax-level.is-completed {
    border-color: rgba(47, 125, 91, 0.5);
    background: linear-gradient(145deg, #eaf6ef, #ffffff);
    color: #1f5d40;
}

.ac-relax-level.is-completed::after {
    content: "✓";
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.6rem;
    font-weight: 900;
    line-height: 1;
    color: #2f7d5b;
}

/* Lo stato selezionato vince visivamente sul completato */
.ac-relax-level.is-active {
    border-color: var(--ac-gold);
}

.ac-relax-level:focus-visible {
    outline: 3px solid rgba(199, 164, 90, 0.6);
    outline-offset: 2px;
}

/* Empty-state piccolo: non un'intera area gioco vuota */
.ac-relax-quiz__empty,
.ac-relax-maze__empty,
.ac-relax-maze__loading {
    min-height: 96px;
    padding: var(--ac-space-3);
}

/* ── Labirinto: tabellone dominante, d-pad compatto ───────────────── */
.ac-relax-maze {
    padding: var(--ac-space-3);
}

.ac-relax-maze__panel {
    gap: var(--ac-space-3);
    padding: clamp(12px, 2vw, 18px);
}

/* Board grande e quadrato, sempre dentro il viewport */
.ac-relax-maze__board {
    width: 100%;
    max-width: min(64dvh, 560px);
    margin: 0 auto;
}

/* D-pad 3x3 compatto, dimensione da variabile --ac-control-size */
.ac-relax-maze__controls {
    display: grid;
    grid-template-columns: repeat(3, var(--ac-control-size));
    grid-template-rows: repeat(3, var(--ac-control-size));
    gap: var(--ac-space-1);
    width: max-content;
    margin: 0 auto;
}

.ac-relax-maze__control {
    width: var(--ac-control-size);
    height: var(--ac-control-size);
    min-height: 0;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    touch-action: manipulation;
}

.ac-relax-maze__control[data-dir="su"]       { grid-area: 1 / 2; }
.ac-relax-maze__control[data-dir="sinistra"] { grid-area: 2 / 1; }
.ac-relax-maze__control[data-dir="destra"]   { grid-area: 2 / 3; }
.ac-relax-maze__control[data-dir="giu"]      { grid-area: 3 / 2; }

.ac-relax-maze__control:focus-visible {
    outline: 3px solid rgba(199, 164, 90, 0.65);
    outline-offset: 2px;
}

/* Desktop >=900px: tabellone a sinistra, d-pad compatto a destra */
@media (min-width: 900px) {
    .ac-relax-maze__panel {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "hud hud"
            "board controls"
            "legend legend";
        align-items: start;
    }
    .ac-relax-maze__hud      { grid-area: hud; }
    .ac-relax-maze__board    { grid-area: board; max-width: min(66dvh, 600px); }
    .ac-relax-maze__controls { grid-area: controls; align-self: center; --ac-control-size: 48px; }
    .ac-relax-maze__legend   { grid-area: legend; }
}

/* Mobile <900px: board a tutta larghezza, d-pad sotto piu grande */
@media (max-width: 899px) {
    .ac-relax-maze__board { max-width: 94vw; }
    .ac-relax-maze__controls { --ac-control-size: 56px; }
}

/* Labirinto: niente titolo doppio (l'hero sopra gia identifica il gioco) */
.ac-relax-game.is-playing .ac-relax-maze__eyebrow,
.ac-relax-game.is-playing .ac-relax-maze__identity h3 {
    display: none;
}

/* Quiz / differenze: contenitori meno ingombranti */
.ac-relax-quiz,
.ac-relax-differences {
    padding: var(--ac-space-3);
}

/* ── Quiz: layout a 2 colonne su desktop (domanda + pannello stato) ── */
.ac-relax-quiz__grid {
    display: grid;
    gap: var(--ac-space-3);
}

@media (min-width: 900px) {
    .ac-relax-quiz__grid {
        grid-template-columns: minmax(0, 1fr) 220px;
        align-items: start;
    }
    .ac-relax-quiz__side {
        position: sticky;
        top: calc(var(--ac-admin-offset, 0px) + 56px);
    }
}

.ac-relax-quiz__side {
    display: grid;
    gap: var(--ac-space-2);
    align-content: start;
    padding: var(--ac-space-3);
    border: 1px solid rgba(199, 164, 90, 0.28);
    border-radius: var(--ac-radius-md);
    background: rgba(255, 253, 247, 0.9);
}

.ac-relax-quiz__side-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ac-space-2);
    font-size: 0.9rem;
    color: var(--ac-muted);
}

.ac-relax-quiz__side-row strong {
    color: var(--ac-blue);
    font-size: 1.05rem;
}

.ac-relax-quiz__side-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ac-muted);
}

/* ── Densita quiz compatta (alert, domanda, risposte piu piccoli) ─── */
.ac-relax-alert {
    margin: 0 auto var(--ac-space-2);
    padding: 8px 12px;
    font-size: 0.85rem;
    line-height: 1.35;
}

.ac-relax-alert::before {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
}

.ac-relax-quiz__question {
    margin-bottom: var(--ac-space-2);
    padding: var(--ac-space-2) var(--ac-space-3);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.3;
}

.ac-relax-answers {
    gap: var(--ac-space-2);
    margin-bottom: var(--ac-space-2);
}

.ac-relax-answer {
    min-height: 0;
    padding: 9px 12px;
    font-size: 0.92rem;
    box-shadow: none;
}

.ac-relax-feedback {
    margin: 0 0 var(--ac-space-2);
    padding: 9px 12px;
    font-size: 0.9rem;
}

/* In partita: hero e box stelle piu compatti anche nei quiz */
.ac-relax-game.is-playing .ac-relax-game__summary {
    min-width: 84px;
    padding: 8px 10px;
}

.ac-relax-game.is-playing .ac-relax-game__summary strong {
    font-size: 1.3rem;
}

/* ── Classifiche come pannelli richiudibili (chiusi di default) ───── */
.ac-relax-leaderboard--toggle {
    max-width: var(--ac-shell-max);
    margin-inline: auto;
}

.ac-relax-leaderboard__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ac-space-2);
    padding: var(--ac-space-2) var(--ac-space-3);
    cursor: pointer;
    list-style: none;
    font-weight: 800;
    color: var(--ac-blue);
    border-radius: var(--ac-radius-md);
}

.ac-relax-leaderboard__summary::-webkit-details-marker {
    display: none;
}

.ac-relax-leaderboard__summary-title::before {
    content: "▸ ";
    color: var(--ac-gold);
}

.ac-relax-leaderboard--toggle[open] .ac-relax-leaderboard__summary-title::before {
    content: "▾ ";
}

.ac-relax-leaderboard__summary-hint {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ac-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ac-relax-leaderboard__summary:focus-visible {
    outline: 3px solid rgba(199, 164, 90, 0.6);
    outline-offset: 2px;
}

.ac-relax-leaderboard__body {
    padding: 0 var(--ac-space-3) var(--ac-space-3);
}

/* ── Home: card piu compatte, 6 card in 3x2 a 1366x768 ───────────── */
.ac-relax-home .ac-relax-grid {
    gap: 14px 18px;
    margin-top: -30px;
}

.ac-relax-home .ac-relax-card {
    min-height: 0;
}

.ac-relax-home .ac-relax-visual {
    height: 92px;
    margin: 8px 8px 0;
    overflow: hidden;
}

/* Immagini card: riempimento uniforme, nessuna deformazione */
.ac-relax-visual img,
.ac-relax-home .ac-relax-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ac-relax-home .ac-relax-card__body {
    padding: 10px 16px 4px;
    gap: 4px;
}

.ac-relax-home .ac-relax-card__body h3 {
    font-size: 1.04rem;
}

.ac-relax-home .ac-relax-card__body p {
    font-size: 0.85rem;
    line-height: 1.32;
}

.ac-relax-home .ac-relax-card__footer {
    padding: 0 16px 14px;
}

.ac-relax-home .ac-relax-button,
.ac-relax-home .ac-relax-pill {
    min-height: 36px;
    padding: 6px 18px;
    font-size: 0.92rem;
}

/* NB: NON limitare l'altezza di .ac-relax-diff-img-wrap: i marcatori
   hotspot sono posizionati in % rispetto al wrap e un clipping li sfaserebbe. */
/* ================================================================
   End riproporzionamento globale
   ================================================================ */

/* ================================================================
   Il Mosaico della Luce — puzzle
   ================================================================ */
.ac-relax-puzzle {
    max-width: var(--ac-shell-max);
    margin: 0 auto;
    padding: var(--ac-space-3);
    border: 1px solid rgba(199, 164, 90, 0.18);
    border-radius: var(--ac-radius-md);
    background: linear-gradient(180deg, rgba(255, 253, 247, 0.6), rgba(255, 255, 255, 0.96));
    position: relative;
}

.ac-relax-puzzle__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ac-space-2);
    padding: 8px 12px;
    margin-bottom: var(--ac-space-2);
    border: 1px solid rgba(199, 164, 90, 0.28);
    border-radius: var(--ac-radius-sm);
    background: rgba(255, 253, 247, 0.9);
}

.ac-relax-puzzle__stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--ac-muted);
}

.ac-relax-puzzle__stat strong {
    color: var(--ac-blue);
    font-size: 1rem;
}

.ac-relax-puzzle__help {
    margin-left: auto;
    font-size: 0.85rem;
    padding: 6px 12px;
}

.ac-relax-puzzle__live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Workspace: board + tray */
.ac-relax-puzzle__workspace {
    display: grid;
    gap: var(--ac-space-3);
}

@media (min-width: 900px) {
    .ac-relax-puzzle__workspace {
        grid-template-columns: minmax(0, 640px) minmax(160px, 230px);
        justify-content: center;
        align-items: start;
    }
}

/* Board: rapporto immagine 3:2, dimensionato per stare nella viewport */
.ac-relax-puzzle__board {
    display: grid;
    width: 100%;
    max-width: min(640px, 92vw, 116dvh);
    aspect-ratio: 3 / 2;
    margin: 0 auto;
    gap: 0;
    border: 2px solid rgba(36, 73, 111, 0.35);
    border-radius: 6px;
    overflow: hidden;
    background: #eef2f5;
    touch-action: none;
}

.ac-relax-puzzle__slot {
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(36, 73, 111, 0.12);
    background: rgba(255, 255, 255, 0.35);
}

.ac-relax-puzzle__slot.is-target {
    box-shadow: inset 0 0 0 3px var(--ac-gold);
    background: rgba(199, 164, 90, 0.18);
}

.ac-relax-puzzle__slot:focus-visible {
    outline: 3px solid rgba(199, 164, 90, 0.7);
    outline-offset: -3px;
}

/* Tray pezzi: scrollabile, pezzi leggibili */
.ac-relax-puzzle__tray {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    max-height: min(70dvh, 560px);
    overflow-y: auto;
    padding: 10px;
    border: 1px dashed rgba(36, 73, 111, 0.22);
    border-radius: 8px;
    background: rgba(232, 240, 246, 0.4);
}

.ac-relax-puzzle__piece {
    width: clamp(48px, 8vw, 70px);
    background-repeat: no-repeat;
    border: 1px solid rgba(36, 73, 111, 0.25);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(36, 73, 111, 0.14);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ac-relax-puzzle__piece:active {
    cursor: grabbing;
}

.ac-relax-puzzle__piece:focus-visible {
    outline: 3px solid rgba(199, 164, 90, 0.7);
    outline-offset: 2px;
}

.ac-relax-puzzle__piece.is-selected {
    outline: 3px solid var(--ac-blue);
    outline-offset: 1px;
    transform: scale(1.04);
}

.ac-relax-puzzle__piece.is-error {
    animation: ac-relax-piece-error 0.45s ease;
}

@keyframes ac-relax-piece-error {
    0%, 100% { box-shadow: 0 2px 5px rgba(36, 73, 111, 0.14); }
    30% { box-shadow: 0 0 0 3px rgba(179, 45, 46, 0.7); transform: translateX(-3px); }
    60% { transform: translateX(3px); }
}

/* Pezzo posizionato: riempie lo slot, nessun bordo tra le tessere */
.ac-relax-puzzle__slot .ac-relax-puzzle__piece.is-placed {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
}

/* Ghost durante il drag */
.ac-relax-puzzle__ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    -webkit-user-drag: none;
    background-repeat: no-repeat;
    border: 1px solid rgba(36, 73, 111, 0.4);
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(36, 73, 111, 0.35);
    opacity: 0.92;
}

.ac-relax-puzzle__piece.is-dragging {
    opacity: 0.35;
}

/* Overlay anteprima / aiuto immagine */
.ac-relax-puzzle__overlay {
    /* FIXED rispetto alla viewport: l'immagine di riferimento resta centrata
       nello schermo sia all'anteprima sia col suggerimento, anche se durante la
       partita hai scrollato (prima era absolute dentro la board e si vedeva solo
       la parte bassa). Parte sotto la barra admin. */
    position: fixed;
    inset: var(--ac-admin-offset, 0px) 0 0 0;
    z-index: 1000;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 10px;
    padding: var(--ac-space-3);
    background: rgba(255, 255, 255, 0.97);
}

.ac-relax-puzzle__overlay-img {
    /* Ridotta al 75% (−25%) e centrata: vale per l'anteprima all'avvio del livello
       e per il suggerimento "Mostra immagine" (stessa classe). */
    width: 75%;
    height: 75%;
    object-fit: contain;
    border-radius: 6px;
    justify-self: center;
    align-self: center;
}

.ac-relax-puzzle__overlay-bar {
    display: flex;
    justify-content: center;
}

/* Mobile: board sopra, tray sotto */
@media (max-width: 899px) {
    .ac-relax-puzzle__board { max-width: 96vw; }
    .ac-relax-puzzle__tray { max-height: 38vh; }
    .ac-relax-puzzle__piece { width: clamp(46px, 16vw, 64px); }
}
/* ================================================================
   End Il Mosaico della Luce
   ================================================================ */

/* ================================================================
   Giochi Bonus — card home + gioco "Sentieri di Luce"
   ================================================================ */
.ac-relax-bonus-strip {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: var(--ac-space-4) auto 0;
    padding: 0 16px;
}

.ac-relax-bonus-strip__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ac-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--ac-space-2);
}

.ac-relax-bonus-strip__head h3 {
    margin: 0;
    color: var(--ac-blue);
    font-size: 1.15rem;
}

.ac-relax-bonus-strip__stars {
    font-size: 0.85rem;
    color: var(--ac-muted);
    font-weight: 700;
}

.ac-relax-bonus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.ac-relax-bonus-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas: "icon body" "icon footer";
    align-items: center;
    gap: 4px 12px;
    padding: 12px 14px;
    border: 1px solid rgba(199, 164, 90, 0.28);
    border-radius: var(--ac-radius-md);
    background: rgba(255, 253, 247, 0.95);
    box-shadow: 0 8px 22px rgba(36, 73, 111, 0.08);
}

.ac-relax-bonus-card__icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(145deg, var(--ac-blue), #173653);
}

.ac-relax-bonus-card.is-locked {
    background: linear-gradient(180deg, #fbf7ef, #f1ece1);
}

.ac-relax-bonus-card.is-locked .ac-relax-bonus-card__icon {
    background: linear-gradient(145deg, #9aa3ad, #6c757d);
}

.ac-relax-bonus-card.is-unlocked .ac-relax-bonus-card__icon {
    background: linear-gradient(145deg, var(--ac-gold), #a87f2e);
    color: #2a2410;
}

.ac-relax-bonus-card__body { grid-area: body; min-width: 0; }
.ac-relax-bonus-card__body h4 { margin: 2px 0; color: #173653; font-size: 1rem; }
.ac-relax-bonus-card__body p { margin: 0; font-size: 0.82rem; color: #5e6b77; line-height: 1.3; }
.ac-relax-bonus-card__type { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ac-gold); }
.ac-relax-bonus-card__lock { color: #8a6a28 !important; font-weight: 700; }
.ac-relax-bonus-card__footer { grid-area: footer; margin-top: 4px; }
.ac-relax-bonus-card__footer .ac-relax-button { min-height: 32px; padding: 5px 16px; font-size: 0.9rem; }
.ac-relax-bonus-card__footer .ac-relax-pill { font-size: 0.78rem; padding: 5px 10px; }

@media (max-width: 860px) {
    .ac-relax-bonus-grid { grid-template-columns: 1fr; }
}

/* Gioco bonus: area canvas */
.ac-relax-bonus {
    max-width: var(--ac-shell-max);
    margin: 0 auto;
    padding: var(--ac-space-3);
    border: 1px solid rgba(199, 164, 90, 0.18);
    border-radius: var(--ac-radius-md);
    background: linear-gradient(180deg, rgba(20, 24, 40, 0.04), rgba(255, 255, 255, 0.96));
}

.ac-relax-bonus__workspace {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ac-space-3);
    margin: var(--ac-space-2) 0;
}

.ac-relax-bonus__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
}

.ac-relax-bonus__canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 22px 55px rgba(8, 12, 24, 0.45);
    touch-action: none;
}

/* D-pad: a lato (desktop) */
.ac-relax-bonus__pad {
    flex: 0 0 auto;
    --ac-control-size: 54px;
}

/* Mobile: workspace in colonna, d-pad OVERLAY semitrasparente in basso a destra */
@media (max-width: 899px) {
    .ac-relax-bonus__workspace {
        flex-direction: column;
        position: relative;
    }
    .ac-relax-bonus__pad {
        position: absolute;
        right: 6px;
        bottom: 6px;
        z-index: 5;
        opacity: 0.82;
        --ac-control-size: 50px;
    }
    .ac-relax-bonus__pad .ac-relax-maze__control {
        background: linear-gradient(145deg, rgba(36,73,111,0.92), rgba(23,54,83,0.92));
        box-shadow: 0 6px 14px rgba(0,0,0,0.4);
    }
}
/* ================================================================
   End Giochi Bonus
   ================================================================ */

/* ================================================================
   Giardino dei Ricordi — Memory Bonus 2
   ================================================================ */
.ac-relax-memory {
    padding: 1rem 0;
}

.ac-relax-memory__stats {
    text-align: center;
    font-size: 0.95rem;
    color: var(--ac-relax-muted, #6b7280);
    margin-bottom: 1.25rem;
}
.ac-relax-memory__stats strong {
    color: var(--ac-relax-accent, #1e3a5f);
    font-weight: 700;
}

/* Griglia carte */
.ac-relax-memory__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(6px, 1.4vw, 12px);
    max-width: 580px;
    margin: 0 auto 16px;
}

/* Carta: wrapper con perspective per il 3D flip. Dimensioni fisse via aspect-ratio. */
.ac-relax-memory-card {
    cursor: pointer;
    perspective: 700px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    aspect-ratio: 2 / 3;
}

/* Cella fantasma: mantiene la posizione nella griglia ma è invisibile */
.ac-relax-memory-card--ghost {
    visibility: hidden;
    pointer-events: none;
    cursor: default;
}

/* Faccia interna che ruota */
.ac-relax-memory-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.45s cubic-bezier(.4,0,.2,1);
    transform-style: preserve-3d;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
}

.ac-relax-memory-card.is-flipped .ac-relax-memory-card__inner {
    transform: rotateY(180deg);
}

/* Entrambe le facce: coprono tutta la carta */
.ac-relax-memory-card__back,
.ac-relax-memory-card__front {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}
.ac-relax-memory-card__back img,
.ac-relax-memory-card__front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    pointer-events: none;
    draggable: false;
}

/* Il fronte è già ruotato: quando la carta si gira torna in posizione */
.ac-relax-memory-card__front {
    transform: rotateY(180deg);
}

/* Coppia trovata: bordo dorato luminoso */
.ac-relax-memory-card.is-matched .ac-relax-memory-card__inner {
    box-shadow: 0 0 0 3px #d4a017, 0 4px 16px rgba(212,160,23,.45);
}
.ac-relax-memory-card.is-matched {
    cursor: default;
}

/* Responsive */
@media (max-width: 480px) {
    .ac-relax-memory__grid {
        gap: 5px;
    }
    .ac-relax-memory-card__inner {
        border-radius: 7px;
    }
    .ac-relax-memory-card__back,
    .ac-relax-memory-card__front,
    .ac-relax-memory-card__back img,
    .ac-relax-memory-card__front img {
        border-radius: 7px;
    }
}
/* ================================================================
   End Giardino dei Ricordi
   ================================================================ */

/* ================================================================
   Parole di Sapienza — Rebus
   ================================================================ */

.ac-relax-rebus-mount {
    max-width: 720px;
    margin: 0 auto;
}

.ac-relax-rebus__wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 .5rem;
}

.ac-relax-rebus__img-wrap {
    text-align: center;
    margin-bottom: 1.4rem;
}

.ac-relax-rebus__img {
    max-width: 100%;
    max-height: 440px;
    border-radius: 12px;
    box-shadow: 0 4px 22px rgba(0,0,0,.15);
    display: block;
    margin: 0 auto;
}

.ac-relax-rebus__desc {
    color: var(--ac-blue, #24496f);
    font-style: italic;
    text-align: center;
    margin-bottom: .5rem;
    font-size: .97rem;
}

.ac-relax-rebus__input-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: .4rem 0 .8rem;
    align-items: center;
}

.ac-relax-rebus__input {
    flex: 1 1 220px;
    padding: 10px 14px;
    border: 2px solid #c8d4df;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: #1a2c3d;
    transition: border-color .18s, box-shadow .18s;
}

.ac-relax-rebus__input:focus {
    outline: none;
    border-color: var(--ac-gold, #c7a45a);
    box-shadow: 0 0 0 3px rgba(199,164,90,.22);
}

.ac-relax-rebus__input:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.ac-relax-rebus__feedback {
    min-height: 0;
    font-weight: 600;
    font-size: .97rem;
    margin: .2rem 0;
    padding: 2px 0;
}

.ac-relax-rebus__feedback--correct {
    color: #2e7d32;
}

.ac-relax-rebus__feedback--wrong {
    color: #b32d2e;
}

.ac-relax-rebus__hints {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: .6rem;
}

.ac-relax-rebus__hint-btn {
    font-size: .87rem;
}

.ac-relax-rebus__hint-text {
    color: #4c6174;
    font-style: italic;
    margin: .4rem 0;
    padding: .5rem .9rem;
    background: rgba(0,0,0,.04);
    border-left: 3px solid var(--ac-gold, #c7a45a);
    border-radius: 0 6px 6px 0;
    font-size: .93rem;
}

.ac-relax-rebus__auto-next {
    color: var(--ac-blue, #24496f);
    font-size: .92rem;
    margin: .6rem 0 .2rem;
    opacity: .8;
}

.ac-relax-rebus__explanation {
    color: #4c6174;
    font-style: italic;
    margin: 1rem 0 .6rem;
    padding: .7rem 1.1rem;
    background: rgba(0,0,0,.04);
    border-radius: 8px;
    font-size: .94rem;
}

@media (max-width: 520px) {
    .ac-relax-rebus__img {
        max-height: 260px;
    }
    .ac-relax-rebus__input-wrap {
        flex-direction: column;
    }
    .ac-relax-rebus__input {
        width: 100%;
    }
}

/* ================================================================
   End Parole di Sapienza
   ================================================================ */

/* ================================================================
   Bonus 3 — "Mira alla Luce" (arcade a punteggio)
   ================================================================ */
.ac-relax-aim {
    margin-top: var(--ac-space-3);
}

/* Pannelli inizio/fine */
.ac-relax-aim__panel {
    background: linear-gradient(180deg, #e8f0f6 0%, #f7efd8 100%);
    border: 1px solid var(--ac-gold);
    border-radius: var(--ac-radius-md);
    padding: var(--ac-space-4) var(--ac-space-3);
    text-align: center;
    box-shadow: 0 6px 22px rgba(36, 73, 111, 0.10);
}
.ac-relax-aim__title {
    margin: 0 0 var(--ac-space-1);
    color: var(--ac-blue);
    font-size: 1.4rem;
}
.ac-relax-aim__lead {
    margin: 0 auto var(--ac-space-3);
    max-width: 46ch;
    color: var(--ac-ink);
}
.ac-relax-aim__legend {
    list-style: none;
    margin: 0 auto var(--ac-space-3);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ac-space-2);
    justify-content: center;
    max-width: 520px;
}
.ac-relax-aim__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9rem;
    color: var(--ac-ink);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    padding: 4px 12px 4px 6px;
}
.ac-relax-aim__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ac-relax-aim__dot--luce    { background: radial-gradient(circle at 35% 30%, #fff7df, #e6c878); }
.ac-relax-aim__dot--stella  { background: radial-gradient(circle at 35% 30%, #fffbe9, #f3d27a); }
.ac-relax-aim__dot--colomba { background: radial-gradient(circle at 35% 30%, #ffffff, #cfe6fb); }
.ac-relax-aim__dot--ombra   { background: radial-gradient(circle at 35% 30%, #5b5f6b, #3a3f4b); }
.ac-relax-aim__dot--img {
    width: 28px;
    height: 28px;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.ac-relax-aim__best {
    margin: 0 0 var(--ac-space-3);
    color: var(--ac-muted);
    font-weight: 600;
}
.ac-relax-aim__finalscore {
    margin: var(--ac-space-1) 0;
    font-size: 2rem;
    font-weight: 800;
    color: var(--ac-blue);
}
.ac-relax-aim__newbest {
    margin: 0 0 var(--ac-space-2);
    color: #b8860b;
    font-weight: 700;
}
.ac-relax-aim__start {
    min-width: 160px;
}

/* Schermo di gioco */
.ac-relax-aim__shell {
    border: 1px solid var(--ac-gold);
    border-radius: var(--ac-radius-md);
    overflow: hidden;
    background: var(--ac-white);
    box-shadow: 0 6px 22px rgba(36, 73, 111, 0.10);
}
.ac-relax-aim__hud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ac-space-2);
    padding: var(--ac-space-2) var(--ac-space-3);
    background: linear-gradient(180deg, #24496f 0%, #2d5882 100%);
}
.ac-relax-aim__metric {
    flex: 1 1 0;
    min-width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--ac-white);
}
.ac-relax-aim__metric span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}
.ac-relax-aim__metric strong {
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--ac-gold-soft);
}
.ac-relax-aim__stage {
    position: relative;
    width: 100%;
}
.ac-relax-aim__canvas {
    display: block;
    width: 100%;                 /* area di gioco a tutta larghezza: niente cornici azzurre laterali */
    height: min(58vh, 540px);    /* un po' più alta verso il basso, resta in una vista */
    cursor: pointer;
    touch-action: none;          /* niente scroll/zoom sul tocco di gioco */
    background: linear-gradient(180deg, #dce9f4 0%, #f7efd8 100%);
}

@media (max-width: 820px) {
    .ac-relax-aim__canvas { height: min(64vh, 480px); }
}
@media (max-width: 520px) {
    .ac-relax-aim__metric strong { font-size: 1.05rem; }
}

/* ================================================================
   Card home ~20% più compatte: così TUTTE e 6 le card (con il
   pulsante "Gioca") entrano in una sola schermata. Alta specificità
   (3 classi) + posizione finale per vincere su qualunque regola.
   ================================================================ */
.ac-relax-home .ac-relax-card .ac-relax-visual {
    height: 84px;
    margin-top: 8px;
}
.ac-relax-home .ac-relax-card .ac-relax-card__body {
    padding: 8px 16px 2px;
    gap: 2px;
}
.ac-relax-home .ac-relax-card .ac-relax-card__type {
    font-size: 0.72rem;
}
.ac-relax-home .ac-relax-card .ac-relax-card__body h3 {
    margin: 0;
    font-size: 0.95rem;
}
.ac-relax-home .ac-relax-card .ac-relax-card__body p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.26;
}
.ac-relax-home .ac-relax-card .ac-relax-card__footer {
    padding: 0 16px 12px;
}
.ac-relax-home .ac-relax-card .ac-relax-button,
.ac-relax-home .ac-relax-card .ac-relax-pill {
    min-height: 32px;
    padding: 5px 16px;
    font-size: 0.88rem;
}

/* ================================================================
   Schermata "fine gioco" dei quiz (immagine a schermo, poi uscita auto)
   ================================================================ */
.ac-relax-quiz__end {
    position: fixed;
    inset: 0;                /* appeso a body: copre l'intera viewport */
    z-index: 99990;          /* sopra tutto il contenuto del sito (sotto la barra admin) */
    display: grid;
    place-items: center;
    padding: 20px;
    /* sfondo OPACO (niente residuo del sito intorno all'immagine in letterbox) */
    background: linear-gradient(180deg, #dce9f4 0%, #eaf1f8 55%, #f7efd8 100%);
}
.ac-relax-quiz__end-img {
    /* Immagine di fine gioco ridotta al 80% (−20%) per TUTTI i giochi
       (quiz Sapienza/Mente Aperta, Rebus, Puzzle, Occhi Attenti). Regola unica. */
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(36, 73, 111, 0.18);
}
/* ── Finestra di accesso pubblica (sotto il titolo RELAX) ─────────────────────── */
.ac-relax-access {
    margin: var(--ac-space-3) auto var(--ac-space-2);
    max-width: 540px;
    width: 100%;
    background: linear-gradient(180deg, #ffffff 0%, var(--ac-gold-soft) 100%);
    border: 1px solid #ece3cc;
    border-radius: var(--ac-radius-md);
    box-shadow: 0 10px 30px rgba(36, 73, 111, 0.08);
    padding: var(--ac-space-3) var(--ac-space-3);
    text-align: left;
}
.ac-relax-access__label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ac-blue);
    margin: 0 0 var(--ac-space-1);
}
/* Riga informativa "richiesta codice": discreta, coerente per dimensione con il label. */
.ac-relax-access__request {
    display: block;
    margin: var(--ac-space-2) 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ac-muted);
}
.ac-relax-access__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ac-space-2);
    align-items: stretch;
}
.ac-relax-access__input {
    flex: 1 1 220px;
    min-width: 0;
    height: var(--ac-control-size);
    padding: 0 var(--ac-space-3);
    font-size: 1rem;
    color: var(--ac-ink);
    background: var(--ac-white);
    border: 1px solid #d8cfb6;
    border-radius: var(--ac-radius-sm);
    letter-spacing: 0.5px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ac-relax-access__input:focus {
    outline: none;
    border-color: var(--ac-gold);
    box-shadow: 0 0 0 3px rgba(199, 164, 90, 0.22);
}
.ac-relax-access__btn {
    flex: 0 0 auto;
    min-height: var(--ac-control-size);
    white-space: nowrap;
}
.ac-relax-access__btn[disabled] { opacity: 0.6; cursor: progress; }
/* Pulsante "OK" compatto accanto al campo nickname: conferma il nome ed esegue l'accesso
   (stesso invio del form, evita che l'utente prema per errore "Inizia a giocare"). */
.ac-relax-access__btn--nick { min-width: 64px; padding: 0 var(--ac-space-3); }
.ac-relax-access__nick { margin-top: var(--ac-space-2); }
.ac-relax-access__state {
    margin: 0 0 var(--ac-space-1);
    white-space: pre-line;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ac-blue);
    font-weight: 600;
}
.ac-relax-access__msg {
    margin: var(--ac-space-2) 0 0;
    min-height: 1.2em;
    font-size: 0.92rem;
    color: var(--ac-muted);
}
.ac-relax-access__logout {
    margin-top: var(--ac-space-2);
    appearance: none;
    background: transparent;
    border: 1px solid #d8cfb6;
    color: var(--ac-blue);
    border-radius: var(--ac-radius-sm);
    padding: 8px var(--ac-space-3);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ac-relax-access__logout:hover { background: var(--ac-blue-soft); border-color: var(--ac-blue); }
.ac-relax-access__logout[disabled] { opacity: 0.6; cursor: progress; }
@media (max-width: 480px) {
    .ac-relax-access { padding: var(--ac-space-3) var(--ac-space-2); }
    .ac-relax-access__row { flex-direction: column; }
    .ac-relax-access__btn { width: 100%; }
}