/* =========================================
   JOLLY ROGER GAME - CSS
   ========================================= */

/* =========================================
   0. TUTORIAL MODAL — compactado (solo aquí)
   ========================================= */
/* .tutorial-content/.tutorial-steps son compartidos por TODOS los juegos
   (modals.css). Aquí solo se reduce SU tamaño dentro de #tutorialModal de
   esta página (selector con ID, gana por especificidad sin tocar el CSS
   compartido) porque con 4 pasos + textos algo más largos que otros juegos
   se quedaba muy justo de alto y obligaba a hacer scroll dentro del modal. */
#tutorialModal .tutorial-content {
    padding: 22px 20px;
    max-height: 94vh;
}

#tutorialModal .tutorial-title {
    font-size: 1.7rem;
    margin-bottom: 14px;
}

#tutorialModal .tutorial-steps {
    padding: 12px;
    gap: 8px;
    margin-bottom: 14px;
}

#tutorialModal .tutorial-steps .anim-box {
    height: 70px;
}

#tutorialModal .tutorial-steps .step-emoji {
    font-size: 2rem;
}

#tutorialModal .tutorial-steps .step-card h3 {
    margin: 6px 0 3px;
    font-size: 1rem;
}

#tutorialModal .tutorial-steps .step-card p {
    font-size: 0.78rem;
    line-height: 1.25;
}

#tutorialModal .btn-play {
    margin-top: 4px;
}

.container-jolly-roger {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px 30px;
}

/* .message-container (common.css) no tiene padding propio; se lo damos aquí
   para que el reveal-panel (ahora dentro) alinee con el ancho real del
   game-container (que sí resta sus propios 30px de padding). */
.container-jolly-roger .message-container {
    padding: 0 30px;
}

/* =========================================
   1. JOLLY ROGER
   ========================================= */
.jolly-roger-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.jolly-roger-frame {
    position: relative;
    width: 300px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    background: #1b1b1b;
    border: 4px solid #8d6e63;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.jolly-roger-frame:hover {
    transform: scale(1.02);
}

.jolly-roger-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

@keyframes jolly-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.jolly-roger-frame.jolly-img-loading .jolly-roger-img {
    opacity: 0;
}

.jolly-roger-frame.jolly-img-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(141, 110, 99, 0.3);
    border-top-color: #8d6e63;
    border-radius: 50%;
    animation: jolly-spin 0.8s linear infinite;
}

/* =========================================
   2. HINTS
   ========================================= */
/* Las cajitas usan el estilo compartido .hint-box de personaje/fruta
   (game-ui.css). En escritorio se fuerza una sola fila de 3 (con solo 3
   títulos cortos, emoji + 1 palabra, caben perfectamente reduciendo el
   min-width fijo del CSS compartido). En móvil (<=600px) esto se
   desactiva y se deja el comportamiento apilado compartido de
   game-ui.css, igual que personaje/fruta: forzar la fila en pantallas
   estrechas hacía que el icono+texto de .hint-lock se solapara con el
   título dentro de cada caja. */
@media (min-width: 601px) {
    #hint-container {
        flex-wrap: nowrap;
        gap: 8px;
    }

    #hint-container .hint-box {
        min-width: 0;
        flex: 1 1 0;
        padding: 10px 6px;
    }

    #hint-container .hint-title {
        white-space: normal;
        text-align: center;
        font-size: 0.95rem;
    }
}

/* =========================================
   2b. BÚSQUEDA SIN FOTO (anti-comparación)
   ========================================= */
/* search-jolly-roger.php no manda imagen a propósito (ver comentario en ese
   fichero); esto solo oculta el hueco del avatar que initAutocomplete()
   sigue reservando en el DOM. */
#autocomplete .ac-avatar {
    display: none;
}

/* =========================================
   3. REVEAL PANEL (solo al terminar)
   ========================================= */
.reveal-panel {
    background: linear-gradient(145deg, rgba(62, 39, 35, 0.92), rgba(45, 31, 20, 0.95));
    border: 2px solid #8d6e63;
    border-radius: 12px;
    padding: 18px 20px;
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    color: #efebe9;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.reveal-panel.hidden {
    display: none;
}

.reveal-title {
    font-family: 'Pirata One', cursive;
    color: #ffb300;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.reveal-row {
    margin-bottom: 12px;
}

.reveal-name {
    font-family: 'Pirata One', cursive;
    font-size: 1.6rem;
    color: #ffe082;
    letter-spacing: 1px;
}

.reveal-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 16px;
    margin-bottom: 10px;
}

.reveal-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.reveal-item.hidden {
    display: none;
}

.reveal-item-capitan {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    text-align: left;
}

/* Contenedor de fotos: puede llevar varias "slots" (co-capitanes, ej. Dorry
   y Brogy) en fila, no solo una — ver revealCapitanPhoto en game-jolly-roger.js. */
.reveal-capitan-photo {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex-shrink: 0;
}

.reveal-capitan-photo.hidden {
    display: none;
}

.reveal-capitan-photo-slot {
    position: relative;
    width: 60px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #ffe082;
}

.reveal-capitan-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.reveal-capitan-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.reveal-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #bcaaa4;
}

.reveal-value {
    font-size: 0.95rem;
    color: #efebe9;
    font-weight: 600;
}

/* =========================================
   4. ATTEMPTS TABLE (mismo patrón que Wanted)
   ========================================= */
.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.results-table thead th {
    background: #3e2723;
    color: #ffca28;
    font-family: 'Pirata One', cursive;
    font-size: 1.4rem;
    padding: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 4px solid #5d4037;
    text-align: center;
    border-right: 1px solid rgba(255, 202, 40, 0.2);
}

.results-table thead th:last-child {
    border-right: none;
}

.results-table tbody td {
    padding: 10px;
    border-bottom: 1px solid #d7ccc8;
    border-right: 1px solid rgba(93, 64, 55, 0.15);
    vertical-align: middle;
    color: #3e2723;
    font-weight: 500;
}

.results-table tbody td:last-child {
    border-right: none;
}

.results-table td.correct {
    color: #2e7d32;
    background-color: rgba(46, 125, 50, 0.1);
    font-weight: bold;
}

.results-table td.incorrect {
    color: #c62828;
}

.col-img {
    width: 20%;
    text-align: center;
}

.col-name {
    width: 50%;
    text-align: center;
    font-size: 1.2rem;
}

.col-result {
    width: 30%;
    text-align: center;
}

.col-result.correct,
.col-result.incorrect {
    font-family: 'Pirata One', cursive;
    font-size: 1.4rem;
}

.results-table img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: #1b1b1b;
    border-radius: 4px;
    border: 2px solid #a1887f;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* =========================================
   5. RESPONSIVE
   ========================================= */
@media (max-width: 600px) {
    .reveal-grid {
        grid-template-columns: 1fr;
    }

    /* Capitán centrado y foto un pelín más grande, solo en móvil. */
    .reveal-item-capitan {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* .reveal-capitan-photo-slot normalmente saca su altura del "stretch" de
       .reveal-item-capitan en fila (su img interna es absolute, no aporta
       altura propia); al pasar a columna hace falta una altura explícita. */
    .reveal-capitan-photo-slot {
        width: 80px;
        height: 80px;
    }

    .reveal-capitan-text {
        align-items: center;
    }

    /* Coincide con el padding "15px 10px" que .game-container gana en este
       mismo breakpoint (game-ui.css), para que el reveal-panel siga
       alineado con el ancho real del game-container. */
    .container-jolly-roger .message-container {
        padding: 0 10px;
    }

    .results-table thead th {
        font-size: 1rem;
        padding: 8px 4px;
        white-space: nowrap;
    }

    .results-table tbody td {
        padding: 8px 4px;
        border-right: 1px solid rgba(93, 64, 55, 0.15);
        border-bottom: 1px solid rgba(93, 64, 55, 0.15);
    }

    .results-table img {
        width: 45px;
        height: 45px;
        margin: 0 auto;
    }

    .results-table tbody td:nth-child(2) {
        font-size: 1rem;
    }
}

@media (max-width: 500px) {
    .jolly-roger-frame {
        width: 240px;
    }

    .jolly-roger-hints {
        gap: 8px;
    }

    .attempts-counter {
        display: none;
    }

    .game-result-content {
        flex-direction: column;
        text-align: center;
    }

    .game-result-title {
        font-size: 1.4rem;
    }
}

/* =========================================
   6. TUTORIAL / HOW TO PLAY — PIRATE DOSSIER
   ========================================= */
#tutorialModal .jolly-tutorial-card {
    width: min(760px, 100%);
    max-width: 760px;
    max-height: calc(100dvh - 16px);
    padding: 24px;
    overflow-y: auto;
    border: 2px solid #8d6e63;
    border-radius: 15px;
    background:
        radial-gradient(circle at 50% -20%, rgba(255, 202, 40, .14), transparent 43%),
        repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 248, 225, .024) 24px),
        linear-gradient(145deg, #3e2723, #251713);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(255, 248, 225, .12);
    animation: jolly-tutorial-enter .32s cubic-bezier(.2, .8, .2, 1) both;
}

.jolly-tutorial-heading {
    padding: 0;
    text-align: center;
}

.jolly-tutorial-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border: 1px solid rgba(255, 179, 0, .34);
    border-radius: 999px;
    color: #bcaaa4;
    background: rgba(0, 0, 0, .2);
    font: 700 .68rem/1.2 'Roboto', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.jolly-tutorial-kicker > span {
    color: #ffca28;
    font-size: .78rem;
}

#tutorialModal .jolly-tutorial-heading .tutorial-title,
.jolly-tutorial-howto .jolly-tutorial-heading > h3 {
    margin: 6px 0 7px;
    padding: 0;
    border: 0;
    color: #ffca28;
    font-family: 'Pirata One', cursive;
    font-size: 2rem;
    line-height: 1.15;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
}

#tutorialModal .jolly-tutorial-lead,
.jolly-tutorial-howto .jolly-tutorial-lead {
    width: min(630px, 100%);
    margin: 0 auto 12px;
    padding: 0;
    color: #d7ccc8;
    font-size: .84rem;
    line-height: 1.42;
}

.jolly-tutorial-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.jolly-howto-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jolly-step-card {
    position: relative;
    display: grid;
    grid-template-rows: 68px min-content 1fr;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    max-width: none;
    padding: 12px 10px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 179, 0, .28);
    border-radius: 12px;
    color: #fff8e1;
    background: rgba(255, 248, 225, .055);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 248, 225, .08);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.jolly-step-number {
    position: absolute;
    top: 7px;
    left: 8px;
    z-index: 3;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid rgba(255, 179, 0, .48);
    border-radius: 50%;
    color: #ffca28;
    background: #3e2723;
    font: 900 .56rem/1 'Roboto', sans-serif;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .38);
}

.jolly-step-visual {
    position: relative;
    display: flex;
    width: 100%;
    height: 68px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1.5px solid rgba(255, 179, 0, .22);
    border-radius: 9px;
    background: linear-gradient(145deg, rgba(255, 179, 0, .09), rgba(0, 0, 0, .18));
}

.jolly-step-card > h3 {
    margin: 0;
    padding: 0;
    border: 0;
    color: #ffca28;
    font-family: 'Pirata One', cursive;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
}

.jolly-step-card > p {
    margin: 0;
    padding: 0;
    color: #d7ccc8;
    font-size: .76rem;
    line-height: 1.32;
}

@media (hover: hover) {
    .jolly-step-card:hover {
        border-color: rgba(255, 202, 40, .52);
        background: rgba(255, 248, 225, .075);
        transform: translateY(-2px);
    }
}

/* 01 · A Jolly Roger waving from its mast. */
.jolly-tut-flag {
    position: relative;
    width: 94px;
    height: 54px;
}

.jolly-tut-flag > i {
    position: absolute;
    top: 2px;
    bottom: 1px;
    left: 9px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #8d6e63, #d7ccc8 48%, #6d4c41);
    box-shadow: 2px 0 4px rgba(0, 0, 0, .28);
}

.jolly-tut-flag > i::after {
    content: '';
    position: absolute;
    right: -5px;
    bottom: -1px;
    width: 14px;
    height: 4px;
    border-radius: 4px;
    background: #8d6e63;
}

.jolly-tut-flag > span {
    position: absolute;
    top: 6px;
    left: 13px;
    display: grid;
    width: 69px;
    height: 38px;
    place-items: center;
    clip-path: polygon(0 0, 100% 7%, 86% 50%, 100% 93%, 0 100%);
    color: #fff8e1;
    background: #1b1716;
    box-shadow: inset 0 0 0 2px rgba(255, 202, 40, .18);
    transform-origin: left center;
    animation: jolly-tut-wave 2.25s ease-in-out infinite;
}

.jolly-tut-flag b {
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 1px 0 #000);
}

/* 02 · The three real hint categories reveal in sequence. */
.jolly-tut-hints {
    display: grid;
    width: min(225px, 86%);
    gap: 3px;
}

.jolly-tut-hints > i {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    min-height: 17px;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 248, 225, .16);
    border-radius: 4px;
    color: #9f8880;
    background: rgba(0, 0, 0, .18);
    font-style: normal;
    animation: jolly-tut-hint-reveal 4.2s ease-in-out infinite;
}

.jolly-tut-hints > i:nth-child(2) { animation-delay: .55s; }
.jolly-tut-hints > i:nth-child(3) { animation-delay: 1.1s; }

.jolly-tut-hints b {
    font-size: .65rem;
    line-height: 1;
    filter: grayscale(1);
    animation: jolly-tut-hint-icon 4.2s ease-in-out infinite;
}

.jolly-tut-hints > i:nth-child(2) b { animation-delay: .55s; }
.jolly-tut-hints > i:nth-child(3) b { animation-delay: 1.1s; }

.jolly-tut-hints span {
    overflow: hidden;
    font: 800 .52rem/1 'Roboto', sans-serif;
    letter-spacing: .035em;
    text-align: left;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Modal step 02: exact hint bulb used by Fruit and Character. */
.fruit-tut-hint-unlock {
    position: relative;
    display: grid;
    width: 76px;
    height: 55px;
    place-items: center;
}

.fruit-tut-bulb {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid rgba(255, 202, 40, .5);
    border-radius: 50%;
    color: #6f5a4f;
    background: #281b18;
    box-shadow: 0 3px 0 #1d1311;
    font: 900 1.05rem/1 'Roboto', sans-serif;
    animation: fruit-tut-bulb 4.8s ease-in-out infinite;
}

.fruit-tut-lock {
    position: absolute;
    top: 9px;
    right: 6px;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 50%;
    color: #3e2723;
    background: #9e7c68;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
    transform-origin: 50% 80%;
    animation: fruit-tut-unlock 4.8s ease-in-out infinite;
}

.fruit-tut-lock svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fruit-tut-hint-unlock > i {
    position: absolute;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 40px;
    gap: 4px;
}

.fruit-tut-hint-unlock > i > u {
    height: 3px;
    border-radius: 999px;
    background: #5d4b44;
    text-decoration: none;
    animation: fruit-tut-hint-progress 4.8s ease-in-out infinite;
}

.fruit-tut-hint-unlock > i > u:nth-child(2) { animation-delay: .12s; }

/* 03 · A crew dossier resolves from unknown to identified. */
.jolly-tut-reveal {
    position: relative;
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) 24px;
    grid-template-rows: 1fr 5px 5px;
    width: min(185px, 78%);
    height: 48px;
    align-items: center;
    gap: 3px 8px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 202, 40, .28);
    border-radius: 7px;
    background: #281b18;
    box-shadow: 0 3px 0 #1d1311;
}

.jolly-tut-reveal > i {
    grid-row: 1 / 4;
    display: grid;
    width: 40px;
    height: 36px;
    place-items: center;
    border: 1px solid #8d6e63;
    border-radius: 5px;
    color: #d7ccc8;
    background: #171313;
    font-style: normal;
}

.jolly-tut-reveal > b,
.jolly-tut-reveal > strong {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    color: #8d6e63;
    font: 900 .66rem/1 'Roboto', sans-serif;
    letter-spacing: .08em;
    animation: jolly-tut-question 4.3s ease-in-out infinite;
}

.jolly-tut-reveal > strong {
    color: #ffe082;
    opacity: 0;
    animation: jolly-tut-check 4.3s ease-in-out infinite;
}

.jolly-tut-reveal > u {
    grid-column: 2 / 4;
    height: 4px;
    border-radius: 999px;
    background: #5d4037;
    text-decoration: none;
    transform-origin: left;
    animation: jolly-tut-dossier-line 4.3s ease-in-out infinite;
}

.jolly-tut-reveal > u:last-child {
    width: 68%;
    animation-delay: .12s;
}

.jolly-tut-reveal::after {
    content: '✓';
    grid-column: 3;
    grid-row: 1;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: #3e2723;
    background: #ffca28;
    font: 900 .68rem/1 'Roboto', sans-serif;
    opacity: 0;
    animation: jolly-tut-check 4.3s ease-in-out infinite;
}

/* 04 · Shared result card. */
.jolly-tut-share {
    position: relative;
    display: flex;
    width: 120px;
    height: 42px;
    align-items: end;
    justify-content: center;
    gap: 4px;
    padding: 7px 26px 6px 25px;
    border: 1px solid rgba(255, 248, 225, .22);
    border-radius: 7px;
    background: rgba(37, 23, 19, .72);
}

.jolly-tut-share > span {
    position: absolute;
    top: 5px;
    left: 8px;
    color: #ffca28;
    font-size: .75rem;
}

.jolly-tut-share > i {
    display: block;
    width: 10px;
    border-radius: 2px 2px 0 0;
    background: #66bb6a;
    animation: jolly-tut-share-bars 2.2s ease-in-out infinite;
}

.jolly-tut-share > i:nth-of-type(1) { height: 10px; }
.jolly-tut-share > i:nth-of-type(2) { height: 19px; animation-delay: -.45s; }
.jolly-tut-share > i:nth-of-type(3) { height: 14px; animation-delay: -.9s; }

.jolly-tut-share > b {
    position: absolute;
    top: 5px;
    right: 7px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: #3e2723;
    background: #ffca28;
    font-size: .7rem;
    animation: jolly-tut-send 2.2s ease-in-out infinite;
}

#tutorialModal .jolly-tutorial-card > .btn-play {
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    padding: 12px 34px;
    border: 0;
    border-radius: 9px;
    color: #3e2723;
    background: linear-gradient(135deg, #ffca28, #ffb300);
    font-family: 'Pirata One', cursive;
    font-size: 1.3rem;
    box-shadow: 0 5px 0 #251713, 0 8px 18px rgba(0, 0, 0, .3);
}

#tutorialModal .jolly-tutorial-card > .btn-play:hover,
#tutorialModal .jolly-tutorial-card > .btn-play:focus-visible {
    background: linear-gradient(135deg, #ffd54f, #ffb300);
    transform: translateY(-2px);
}

#tutorialModal .jolly-tutorial-card > .btn-play:focus-visible {
    outline: 3px solid #fff8e1;
    outline-offset: 3px;
}

.jolly-tutorial-howto {
    width: min(760px, calc(100% - 20px));
    max-width: 760px;
    margin: 40px auto;
    padding: 24px;
}

.jolly-tutorial-howto .note-game {
    margin: 17px 0 0;
    padding-top: 14px;
}

@keyframes jolly-tutorial-enter {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes jolly-tut-wave {
    0%, 100% { transform: perspective(90px) rotateY(-7deg) skewY(-1deg) scaleX(.92); }
    50% { transform: perspective(90px) rotateY(9deg) skewY(2deg) scaleX(1.04); }
}

@keyframes jolly-tut-hint-reveal {
    0%, 24%, 100% { border-color: rgba(255, 248, 225, .16); color: #9f8880; background: rgba(0, 0, 0, .18); }
    42%, 72% { border-color: rgba(255, 179, 0, .55); color: #fff3c4; background: rgba(255, 179, 0, .13); }
}

@keyframes jolly-tut-hint-icon {
    0%, 24%, 100% { filter: grayscale(1); opacity: .55; }
    42%, 72% { filter: grayscale(0); opacity: 1; }
}

@keyframes fruit-tut-bulb {
    0%, 35%, 100% { border-color: rgba(255, 202, 40, .35); color: #6f5a4f; box-shadow: 0 3px 0 #1d1311; }
    52%, 80% { border-color: #ffe082; color: #3e2723; background: #ffca28; box-shadow: 0 0 18px rgba(255, 193, 7, .42), 0 3px 0 #6d4300; }
}

@keyframes fruit-tut-unlock {
    0%, 34%, 100% { opacity: 1; transform: translate(0, 0) rotate(0); }
    48%, 78% { opacity: 0; transform: translate(5px, -7px) rotate(18deg); }
}

@keyframes fruit-tut-hint-progress {
    0%, 30%, 100% { background: #5d4b44; transform: scaleX(.4); }
    50%, 80% { background: #ffb300; transform: scaleX(1); }
}

@keyframes jolly-tut-question {
    0%, 38%, 100% { opacity: 1; transform: scale(1); }
    52%, 78% { opacity: 0; transform: scale(.72); }
}

@keyframes jolly-tut-check {
    0%, 38%, 100% { opacity: 0; transform: scale(.55); }
    52%, 78% { opacity: 1; transform: scale(1); }
}

@keyframes jolly-tut-dossier-line {
    0%, 34%, 100% { background: #5d4037; transform: scaleX(.45); }
    52%, 80% { background: #ffb300; transform: scaleX(1); }
}

@keyframes jolly-tut-share-bars {
    0%, 100% { opacity: .58; transform: scaleY(.7); transform-origin: bottom; }
    50% { opacity: 1; transform: scaleY(1); }
}

@keyframes jolly-tut-send {
    0%, 45%, 100% { transform: translate(0, 0); }
    58% { transform: translate(3px, -3px); }
}

@media (max-width: 575px) {
    #tutorialModal { padding: 8px; }
    #tutorialModal .jolly-tutorial-card { padding: 17px 12px; }
    #tutorialModal .jolly-tutorial-steps { gap: 7px; }
    #tutorialModal .jolly-step-card { grid-template-rows: 58px min-content 1fr; gap: 2px; padding: 9px 6px; }
    #tutorialModal .jolly-step-visual { height: 58px; }
    #tutorialModal .jolly-step-card > p { font-size: .69rem; line-height: 1.25; }
    #tutorialModal .jolly-tutorial-lead { margin-bottom: 4px; font-size: .74rem; }
    #tutorialModal .jolly-step-number { top: 5px; left: 5px; transform: scale(.86); transform-origin: top left; }
    #tutorialModal .jolly-tut-flag,
    #tutorialModal .jolly-tut-reveal,
    #tutorialModal .jolly-tut-share { transform: scale(.84); }
    .jolly-tutorial-howto { padding: 18px 12px; }
}

@media (max-height: 780px) {
    #tutorialModal .jolly-tutorial-card { padding: 15px 14px 17px; }
    #tutorialModal .jolly-tutorial-heading .tutorial-title { margin: 4px 0 5px; font-size: 1.7rem; }
    #tutorialModal .jolly-tutorial-lead { margin-bottom: 4px; font-size: .75rem; }
    #tutorialModal .jolly-tutorial-steps { gap: 8px; }
    #tutorialModal .jolly-step-card { grid-template-rows: 54px min-content 1fr; gap: 2px; padding: 8px; }
    #tutorialModal .jolly-step-visual { height: 54px; }
    #tutorialModal .jolly-step-card > h3 { font-size: .92rem; }
    #tutorialModal .jolly-step-card > p { font-size: .69rem; line-height: 1.25; }
    #tutorialModal .jolly-tut-flag,
    #tutorialModal .jolly-tut-hints,
    #tutorialModal .jolly-tut-reveal,
    #tutorialModal .jolly-tut-share { transform: scale(.86); }
    #tutorialModal .fruit-tut-hint-unlock { transform: scale(.86); }
    #tutorialModal .jolly-tutorial-card > .btn-play { margin-top: 10px; padding: 7px 28px; font-size: 1.15rem; }
}

@media (max-height: 620px) {
    #tutorialModal { padding: 5px; }
    #tutorialModal .jolly-tutorial-card { max-height: calc(100dvh - 10px); padding: 9px; }
    #tutorialModal .jolly-tutorial-kicker { padding: 2px 8px; font-size: .62rem; }
    #tutorialModal .jolly-tutorial-heading .tutorial-title { margin: 2px 0 3px; font-size: 1.45rem; }
    #tutorialModal .jolly-tutorial-lead { display: none; }
    #tutorialModal .jolly-tutorial-steps { gap: 6px; }
    #tutorialModal .jolly-step-card { grid-template-rows: 44px min-content 1fr; gap: 2px; padding: 5px; border-radius: 9px; }
    #tutorialModal .jolly-step-visual { height: 44px; }
    #tutorialModal .jolly-step-card > h3 { font-size: .84rem; }
    #tutorialModal .jolly-step-card > p { font-size: .62rem; line-height: 1.16; }
    #tutorialModal .jolly-step-number { top: 4px; left: 4px; transform: scale(.76); transform-origin: top left; }
    #tutorialModal .jolly-tut-flag,
    #tutorialModal .jolly-tut-hints,
    #tutorialModal .jolly-tut-reveal,
    #tutorialModal .jolly-tut-share { transform: scale(.7); }
    #tutorialModal .fruit-tut-hint-unlock { transform: scale(.72); }
    #tutorialModal .jolly-tutorial-card > .btn-play { margin-top: 6px; padding: 5px 24px; font-size: 1.05rem; box-shadow: 0 3px 0 #251713; }
}

@media (prefers-reduced-motion: reduce) {
    #tutorialModal .jolly-tutorial-card,
    .jolly-tut-flag > span,
    .jolly-tut-hints > i,
    .jolly-tut-hints b,
    .jolly-tut-reveal > b,
    .jolly-tut-reveal > strong,
    .jolly-tut-reveal > u,
    .jolly-tut-reveal::after,
    .jolly-tut-share > i,
    .jolly-tut-share > b {
        animation: none;
    }

    .fruit-tut-bulb,
    .fruit-tut-lock,
    .fruit-tut-hint-unlock > i > u { animation: none !important; }

    .jolly-tut-hints > i { border-color: rgba(255, 179, 0, .55); color: #fff3c4; background: rgba(255, 179, 0, .13); }
    .jolly-tut-hints b { filter: grayscale(0); opacity: 1; }
    .jolly-tut-reveal > b { opacity: 0; }
    .jolly-tut-reveal > strong,
    .jolly-tut-reveal::after { opacity: 1; transform: scale(1); }
    .jolly-tut-reveal > u { background: #ffb300; transform: scaleX(1); }
    .fruit-tut-bulb { border-color: #ffe082; color: #3e2723; background: #ffca28; box-shadow: 0 0 18px rgba(255, 193, 7, .42), 0 3px 0 #6d4300; }
    .fruit-tut-lock { opacity: 0; }
    .fruit-tut-hint-unlock > i > u { background: #ffb300; transform: scaleX(1); }
    .jolly-step-card { transition: none; }
}