/* Tutoriales y «Cómo se juega» (inc/ui/tutorials.php), con la estructura de WhatPiece:
   panel oscuro con borde dorado, tarjetas de pasos numeradas y una demo animada en bucle en
   cada una. Aquí, en el azul noche y el naranja de Dragon Ball en vez del marrón pirata.
   Los colores van en variables: la sección «Cómo se juega» es oscura y el modal usa el crema de
   las tarjetas del sitio (tablero, paneles), con texto azul y acentos naranjas. */
.db-tut-modal, .db-tut-section {
    --tut-bg: #142337;                 /* fondo del número de cada paso */
    --tut-line: #ff9b3f57;             /* borde de las tarjetas */
    --tut-gold: #ffce59;               /* títulos */
    --tut-accent: #ffce59;             /* etiqueta y números */
    --tut-text: #d5e0ea;
    --tut-title-shadow: #0b182a;
    --tut-card: #fff1d20b;
    --tut-demo: #0b182a52;
    --tut-demo-line: #ff9b3f40;
    --tut-chip: #ff9b3f12;
    --tut-close-bg: #0b182a60;
    color: var(--tut-text);
}
.db-tut-modal {
    --tut-bg: #fffaf0;
    --tut-line: #d5be98;
    --tut-gold: var(--db-text, #173b64);
    --tut-accent: var(--db-orange-dark, #af4f14);
    --tut-text: #3d5268;
    --tut-title-shadow: #f7c98d;
    --tut-card: #fffaf0;
    --tut-demo: #f3e1bd;
    --tut-demo-line: #dcc39a;
    --tut-chip: #ff9b3f1f;
    --tut-close-bg: #f3e1bd;
}
/* Dentro del modal crema, las tarjetas de los pasos (y los ejemplos del Wordle) son azules, como
   los paneles del sitio, para que contrasten: vuelven a la paleta oscura. */
.db-tut-modal :is(.db-tut-step, .db-tut-examples, .db-sopa-help-card) {
    --tut-bg: #142337;
    --tut-line: #0f2a48;
    --tut-gold: #ffce59;
    --tut-accent: #ffce59;
    --tut-text: #dbe6ef;
    --tut-title-shadow: #0b182a;
    --tut-card: var(--db-panel, #183f68);
    --tut-demo: #0b182a59;
    --tut-demo-line: #ff9b3f40;
    color: var(--tut-text);
}
.db-tut-modal :is(.db-tut-step, .db-sopa-help-card) { box-shadow: 0 3px 0 #0f2a48; }
.db-tut-modal .db-tut-examples { background: var(--db-panel, #183f68); border-color: #0f2a48; box-shadow: 0 3px 0 #0f2a48; }

/* ── Botón «?» junto al título ── */
.db-title-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.db-title-row h1 { margin-bottom: 8px; }
.db-help-btn {
    display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; margin-bottom: 8px; padding: 0;
    border: 2px solid var(--db-gold); border-radius: 50%; background: var(--db-panel, #183f68); color: var(--db-gold);
    font: 400 21px/1 'Bangers', Impact, sans-serif; box-shadow: 0 3px 0 #0b1d33; transition: transform .2s, background .2s;
}
.db-help-btn:hover { transform: scale(1.1) rotate(-8deg); background: #245780; }

/* ── Modal ── */
/* Las pantallas bajas se compactan y el ajuste final de JS garantiza que todo quepa sin scroll. */
.db-modal .db-tut-modal {
    position: relative; width: min(780px, 100%); overflow: hidden;
    padding: 26px 26px 22px; text-align: center; border: 2px solid #132f50; border-top: 4px solid #ff912b; border-radius: 13px;
    background: var(--db-surface, #fff1d2);
    box-shadow: var(--db-shadow), 0 20px 65px #02091480;
    animation: db-tut-enter .34s cubic-bezier(.2, .8, .2, 1) both;
}
.db-modal .db-tut-modal--narrow { width: min(560px, 100%); }
.db-tut-close {
    position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--tut-demo-line); border-radius: 50%; background: var(--tut-close-bg); color: var(--tut-gold); font-size: 15px;
}
.db-tut-close:hover { background: #ff9b3f30; }
.db-tut-heading { text-align: center; }
.db-tut-kicker {
    display: inline-flex; align-items: center; min-height: 27px; padding: 5px 13px; border: 1px solid #ff9b3f94;
    border-radius: 999px; background: var(--tut-chip); color: var(--tut-accent); font: 900 11px/1 'Nunito', sans-serif;
    letter-spacing: .11em; text-transform: uppercase;
}
.db-tut-heading h2 { margin: 8px 0 6px; color: var(--tut-gold); font-size: clamp(28px, 4vw, 36px); line-height: 1; letter-spacing: .03em; text-shadow: 2px 3px 0 var(--tut-title-shadow); }
.db-tut-heading p { max-width: 560px; margin: 0 auto 16px; color: var(--tut-text); font-size: 13.5px; line-height: 1.45; }
.db-tut-choose { margin: 16px 0 8px; color: var(--tut-gold); font: 400 21px/1 'Bangers', Impact, sans-serif; letter-spacing: .04em; text-shadow: 1px 2px 0 var(--tut-title-shadow); }
.db-tut-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.db-tut-level {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 11px 8px;
    border: 2px solid #ffd79a; border-radius: 8px; background: linear-gradient(180deg, #ffb14f, #f58b28); color: #152e4e;
    font: 400 22px/1 'Bangers', Impact, sans-serif; letter-spacing: .04em; text-decoration: none; box-shadow: 0 3px 0 #823d19;
    transition: transform .15s, background .15s;
}
.db-tut-level:hover, .db-tut-level:focus-visible { background: linear-gradient(180deg, #ffd08a, #ffa645); color: #152e4e; transform: translateY(-2px); }
.db-tut-level i { font-size: 17px; }
.db-tut-level.is-current { outline: 3px solid var(--tut-gold); outline-offset: 2px; }
.db-tut-play { margin-top: 16px; padding: 12px 42px; border: 2px solid #ffd79a; border-radius: 8px; background: linear-gradient(180deg, #ffb14f, #f58b28); color: #152e4e; font: 400 24px/1 'Bangers', Impact, sans-serif; letter-spacing: .05em; box-shadow: 0 3px 0 #823d19; }
.db-tut-play:hover { background: linear-gradient(180deg, #ffd08a, #ffa645); transform: translateY(-2px); }

/* ── Tarjetas de pasos ── */
.db-tut-steps { display: grid; gap: 10px; }
.db-tut-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.db-tut-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.db-tut-step {
    position: relative; display: grid; grid-template-rows: 74px min-content 1fr; gap: 7px; min-width: 0; padding: 11px 10px 13px;
    overflow: hidden; border: 1px solid var(--tut-line); border-radius: 10px; background: var(--tut-card); text-align: center;
}
.db-tut-step::before {
    content: attr(data-step); position: absolute; top: 7px; left: 7px; z-index: 2; display: grid; place-items: center;
    width: 26px; height: 26px; border: 1px solid #ff9b3f94; border-radius: 50%; background: var(--tut-bg); color: var(--tut-accent);
    font: 900 10px/1 'Nunito', sans-serif;
}
.db-tut-step h3 { margin: 0; color: var(--tut-gold); font: 400 20px/1.05 'Bangers', Impact, sans-serif; letter-spacing: .03em; text-shadow: 1px 2px 0 var(--tut-title-shadow); }
.db-tut-step p { margin: 0; padding: 0 5px; color: var(--tut-text); font-size: 12.5px; line-height: 1.4; }
.db-tut-demo { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; overflow: hidden; border: 1px solid var(--tut-demo-line); border-radius: 8px; background: var(--tut-demo); }

/* Paso 1 del personaje: el buscador escribe un nombre. */
.db-tut-search { display: grid; grid-template-columns: 26px minmax(0, 1fr) 34px; align-items: center; width: min(220px, 80%); height: 34px; overflow: hidden; border: 1px solid #ff9b3f80; border-radius: 999px; background: #fffbf1; }
.db-tut-search > i { justify-self: end; color: #7b8a97; font-size: 12px; }
.db-tut-search span { display: block; max-width: 0; padding-left: 7px; overflow: hidden; color: var(--db-text); font: 900 11px/1 'Nunito', sans-serif; white-space: nowrap; text-align: left; animation: db-tut-type 4.3s steps(9, end) infinite; }
.db-tut-search b { display: grid; place-items: center; height: 100%; background: #f58b28; color: #152e4e; font-size: 14px; animation: db-tut-press 4.3s ease-in-out infinite; }

/* Paso 2 del personaje: las casillas se colorean una tras otra. */
.db-tut-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; width: min(240px, 86%); }
.db-tut-compare i { display: grid; place-items: center; min-width: 0; min-height: 46px; padding: 4px 3px; border: 1px solid #fff1d22e; border-radius: 6px; background: #2c4462; color: #eef3f8; font-style: normal; animation: db-tut-cell 4.2s ease-in-out infinite; }
.db-tut-compare i:nth-child(2) { animation-delay: .35s; }
.db-tut-compare i:nth-child(3) { animation-delay: .7s; }
.db-tut-compare small { width: 100%; overflow: hidden; font: 800 9px/1 'Nunito', sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.db-tut-compare b { font: 900 16px/1 'Nunito', sans-serif; }
.db-tut-compare .is-correct { --state: var(--db-correct); }
.db-tut-compare .is-partial { --state: var(--db-partial); }
.db-tut-compare .is-incorrect { --state: var(--db-incorrect); }

/* Paso 3 del personaje: la pista se ilumina y el candado se abre. */
.db-tut-unlock { position: relative; display: grid; place-items: center; width: 78px; height: 58px; }
.db-tut-bulb { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #ffce5980; border-radius: 50%; background: #0b182a; color: #5d7189; font-size: 18px; box-shadow: 0 3px 0 #08111f; animation: db-tut-bulb 4.8s ease-in-out infinite; }
.db-tut-lock { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #8aa0b8; color: #142337; font-size: 11px; box-shadow: 0 2px 0 #0006; transform-origin: 50% 80%; animation: db-tut-unlock 4.8s ease-in-out infinite; }
.db-tut-progress { position: absolute; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 50px; }
.db-tut-progress u { height: 3px; border-radius: 999px; background: #3c5574; text-decoration: none; animation: db-tut-progress 4.8s ease-in-out infinite; }
.db-tut-progress u:nth-child(2) { animation-delay: .12s; }
.db-tut-progress u:nth-child(3) { animation-delay: .24s; }

/* Paso 4 del personaje: «???» da paso al nombre y la fila se pone verde. */
.db-tut-answer { position: relative; display: grid; place-items: start center; width: min(210px, 76%); height: 48px; overflow: hidden; border: 1px solid #ff9b3f80; border-radius: 7px; background: #0b182a; box-shadow: 0 3px 0 #08111f; }
.db-tut-answer span, .db-tut-answer b { position: absolute; top: 11px; font: 400 17px/1 'Bangers', Impact, sans-serif; letter-spacing: .12em; }
.db-tut-answer span { color: #6f84a0; animation: db-tut-question 4.2s ease-in-out infinite; }
.db-tut-answer b { color: #ffce59; opacity: 0; animation: db-tut-answer 4.2s ease-in-out infinite; }
.db-tut-answer > i { position: absolute; right: 7px; bottom: 6px; left: 7px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; height: 7px; }
.db-tut-answer > i > u { border-radius: 2px; background: #3c5574; text-decoration: none; animation: db-tut-result 4.2s ease-in-out infinite; }
.db-tut-answer > i > u:nth-child(2) { animation-delay: .12s; }
.db-tut-answer > i > u:nth-child(3) { animation-delay: .24s; }
.db-tut-answer > i > u:nth-child(4) { animation-delay: .36s; }

/* ── Wordle: casillas que giran y se colorean ── */
.db-tut-cell {
    --state: #fffdf5; --state-ink: var(--db-text);
    display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 2px solid #d5c6a4; border-radius: 6px;
    background: #fffdf5; color: var(--db-text); font: 400 22px/1 'Bangers', Impact, sans-serif; font-style: normal; letter-spacing: .03em;
    box-shadow: 0 2px 5px #0000004d;
}
.db-tut-cell.correct { --state: var(--db-correct); --state-ink: #fff8ea; }
.db-tut-cell.present { --state: var(--db-partial); --state-ink: #3b2f12; }
.db-tut-cell.absent { --state: var(--db-unknown); --state-ink: #fff8ea; }
.db-tut-cell.is-flip { animation: db-tut-flip 4.2s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.db-tut-word { display: inline-flex; gap: 5px; }
.db-tut-examples { display: grid; gap: 14px; margin: 0 auto; padding: 16px; max-width: 420px; border: 1px solid var(--tut-demo-line); border-radius: 9px; background: var(--tut-demo); }
.db-tut-example { display: grid; justify-items: center; gap: 6px; }
.db-tut-example .db-tut-cell.is-flip { animation-delay: var(--delay, 0s); }
.db-tut-example p { margin: 0; font-size: 13px; line-height: 1.4; }
.db-tut-demo--repeat { flex-direction: column; gap: 5px; }
.db-tut-demo--repeat > span { display: flex; gap: 6px; }
.db-tut-demo--repeat > b, .db-tut-tries { color: var(--tut-accent); font: 900 11px/1 'Nunito', sans-serif; letter-spacing: .08em; }
.db-tut-demo--daily { gap: 12px; }
.db-tut-day .db-dragon-ball { width: 44px; height: 44px; animation: db-tut-ball 4.2s ease-in-out infinite; }
.db-tut-day .db-dragon-ball > span { font-size: 9px; }
.db-tut-tries { padding: 8px 11px; border: 1px solid #ffce5957; border-radius: 999px; background: #ff9b3f1a; }
.db-tut-tries u { display: inline-block; text-decoration: none; animation: db-tut-count 4.2s ease-in-out infinite; }

/* ── Sección permanente «Cómo se juega» (más aire que el modal) ── */
.db-tut-section {
    max-width: 950px; margin: 34px auto 0; padding: 26px 24px; overflow: hidden; border: 1px solid #ff9b3f57; border-radius: 15px;
    background: linear-gradient(160deg, #1d3557, var(--tut-bg) 70%); box-shadow: 0 18px 45px #02091460, inset 0 1px 0 #fff1d21a;
}
.db-tut-section .db-tut-heading h2 { font-size: clamp(30px, 4vw, 40px); }
.db-tut-section .db-tut-heading p { margin-bottom: 20px; font-size: 14px; }
.db-tut-section .db-tut-steps { gap: 14px; }
.db-tut-section .db-tut-step { grid-template-rows: 94px min-content 1fr; gap: 9px; padding: 16px 15px 17px; border-color: #ff9b3f6b; background: #fff1d20e; }
.db-tut-section .db-tut-step h3 { font-size: 23px; }
.db-tut-section .db-tut-step p { padding: 0 8px; font-size: 13.5px; }
.db-tut-section :is(.db-tut-search, .db-tut-compare, .db-tut-unlock, .db-tut-answer) { transform: scale(1.12); }
.db-tut-legend-title { margin: 26px 0 12px; color: var(--tut-gold); font: 400 24px/1 'Bangers', Impact, sans-serif; letter-spacing: .03em; text-align: center; }
.db-tut-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.db-tut-legend li { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid #fff1d21f; border-radius: 9px; background: #0b182a40; font-size: 13px; line-height: 1.4; }
.db-tut-legend .db-tut-key { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px; color: #fff8ea; font: 900 15px/1 'Nunito', sans-serif; box-shadow: inset 0 -3px #0000002e; }
.db-tut-key.correct { background: var(--db-correct); }
.db-tut-key.partial { background: var(--db-partial); color: #3b2f12; }
.db-tut-key.incorrect { background: var(--db-incorrect); }
.db-tut-key.unknown { background: var(--db-unknown); }
.db-tut-key.arrows { background: #2c4462; color: var(--tut-gold); }
.db-tut-notes { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #ffce5933; }
.db-tut-notes p { margin: 0 0 8px; color: #ffe4ad; font-size: 13px; line-height: 1.55; text-align: center; }
.db-tut-notes p:last-child { margin-bottom: 0; }

/* ── Preguntas frecuentes (inc/ui/faq.php): acordeón con <details> ── */
.db-faq .db-tut-heading h2 { margin-bottom: 18px; }
.db-faq-list { display: grid; gap: 9px; max-width: 780px; margin: 0 auto; }
.db-faq-item { border: 1px solid #ff9b3f57; border-radius: 10px; background: #0b182a40; transition: border-color .15s, background .15s; }
.db-faq-item[open] { border-color: #ff9b3f9e; background: #fff1d20e; }
.db-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px;
    cursor: pointer; list-style: none; border-radius: 10px;
}
.db-faq-item summary::-webkit-details-marker { display: none; }
.db-faq-item summary:focus-visible { outline: 3px solid var(--tut-gold); outline-offset: 2px; }
.db-faq-item summary h3 { margin: 0; color: var(--tut-gold); font: 800 15px/1.35 'Nunito', sans-serif; letter-spacing: 0; text-shadow: none; }
.db-faq-item summary .bi { flex-shrink: 0; color: var(--tut-accent); transition: transform .2s; }
.db-faq-item[open] summary .bi { transform: rotate(180deg); }
.db-faq-item p { margin: 0; padding: 0 16px 15px; color: var(--tut-text); font-size: 14px; line-height: 1.6; }
.db-faq-item:hover { border-color: #ff9b3f9e; }
.db-home .db-faq { margin-left: auto; margin-right: auto; }

/* ── Animaciones ── */
@keyframes db-tut-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes db-tut-type { 0%, 14%, 100% { max-width: 0; } 48%, 82% { max-width: 150px; } }
@keyframes db-tut-press { 0%, 52%, 100% { filter: none; } 58%, 64% { filter: brightness(1.25); } }
@keyframes db-tut-cell {
    0%, 22%, 100% { background: #2c4462; border-color: #fff1d22e; transform: translateY(0); }
    42%, 76% { background: var(--state); border-color: var(--state); transform: translateY(-2px); }
}
@keyframes db-tut-bulb {
    0%, 35%, 100% { color: #5d7189; border-color: #ffce594d; background: #0b182a; box-shadow: 0 3px 0 #08111f; }
    52%, 80% { color: #5a3510; border-color: #ffe4ad; background: var(--tut-gold, #ffce59); box-shadow: 0 0 18px #ffce596b, 0 3px 0 #823d19; }
}
@keyframes db-tut-unlock { 0%, 34%, 100% { opacity: 1; transform: none; } 48%, 78% { opacity: 0; transform: translate(5px, -7px) rotate(18deg); } }
@keyframes db-tut-progress { 0%, 30%, 100% { background: #3c5574; transform: scaleX(.4); } 50%, 80% { background: #f58b28; transform: scaleX(1); } }
@keyframes db-tut-question { 0%, 40%, 100% { opacity: 1; transform: scale(1); } 54%, 82% { opacity: 0; transform: scale(.65); } }
@keyframes db-tut-answer { 0%, 42%, 100% { opacity: 0; transform: translateY(5px); } 56%, 82% { opacity: 1; transform: none; } }
@keyframes db-tut-result { 0%, 38%, 100% { background: #3c5574; transform: scaleX(.35); } 56%, 82% { background: var(--db-correct); transform: scaleX(1); } }
@keyframes db-tut-flip {
    0%, 14% { background: #fffdf5; border-color: #d5c6a4; color: var(--db-text); transform: none; }
    22% { background: #fffdf5; border-color: #d5c6a4; color: var(--db-text); transform: rotateX(90deg); }
    23%, 30% { background: var(--state); border-color: var(--state); color: var(--state-ink); transform: rotateX(90deg); }
    38%, 80% { background: var(--state); border-color: var(--state); color: var(--state-ink); transform: none; }
    88% { background: var(--state); border-color: var(--state); color: var(--state-ink); transform: rotateX(90deg); }
    89%, 100% { background: #fffdf5; border-color: #d5c6a4; color: var(--db-text); transform: none; }
}
@keyframes db-tut-ball { 0%, 100% { transform: rotate(-8deg) scale(1); } 45%, 60% { transform: rotate(8deg) scale(1.08); box-shadow: 0 0 22px #ffab2580; } }
@keyframes db-tut-count { 0%, 40%, 100% { transform: none; } 50% { transform: translateY(-4px) scale(1.25); color: #fff; } }

/* «Reducir animaciones» de Ajustes (html.motion-reduce): sin bucles, cada demo en su estado
   final. Como html.tutorial-motion-reduce en WhatPiece, solo manda el ajuste del sitio y no la
   preferencia del sistema: las demos son la explicación del juego. */
html.motion-reduce :is(.db-tut-modal, .db-tut-modal *, .db-tut-section *) { animation: none !important; }
/* common.css acorta todas las animaciones a 0,01 ms con la preferencia del sistema; aquí se les
   devuelve su duración (mientras el ajuste del sitio no diga lo contrario). */
@media (prefers-reduced-motion: reduce) {
    html:not(.motion-reduce) .db-modal .db-tut-modal { animation-duration: .34s !important; }
    html:not(.motion-reduce) :is(.db-tut-search span, .db-tut-search b) { animation-duration: 4.3s !important; }
    html:not(.motion-reduce) :is(.db-tut-bulb, .db-tut-lock, .db-tut-progress u) { animation-duration: 4.8s !important; }
    html:not(.motion-reduce) :is(.db-tut-compare i, .db-tut-answer span, .db-tut-answer b, .db-tut-answer > i > u,
        .db-tut-cell.is-flip, .db-tut-day .db-dragon-ball, .db-tut-tries u) { animation-duration: 4.2s !important; }
}
html.motion-reduce .db-tut-search span { max-width: 150px; }
html.motion-reduce .db-tut-compare i { background: var(--state); border-color: var(--state); }
html.motion-reduce .db-tut-cell.is-flip { background: var(--state); border-color: var(--state); color: var(--state-ink); }
html.motion-reduce .db-tut-lock, html.motion-reduce .db-tut-answer span { opacity: 0; }
html.motion-reduce .db-tut-bulb { color: #5a3510; background: #ffce59; }
html.motion-reduce .db-tut-answer b { opacity: 1; }
html.motion-reduce :is(.db-tut-answer > i > u, .db-tut-progress u) { background: var(--db-correct); }

@media (max-width: 700px) {
    .db-tut-steps--3 { grid-template-columns: 1fr; }
    .db-tut-steps--3 .db-tut-step { grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: min-content 1fr; align-items: center; text-align: left; padding: 10px; }
    .db-tut-steps--3 .db-tut-demo { grid-row: 1 / 3; min-height: 80px; align-self: stretch; }
    .db-tut-steps--3 .db-tut-step h3 { align-self: end; padding-left: 4px; }
    .db-tut-steps--3 .db-tut-step p { align-self: start; padding: 0 4px; }
    .db-tut-steps--3 .db-tut-cell { width: 32px; height: 32px; font-size: 18px; }
    .db-tut-steps--3 .db-tut-step::before { top: 5px; left: 5px; transform: scale(.85); }
    .db-tut-legend { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .db-modal .db-tut-modal { padding: 18px 11px 15px; }
    .db-tut-heading h2 { font-size: 27px; }
    .db-tut-heading p { margin: 0 14px 11px; font-size: 12px; }
    .db-tut-steps { gap: 7px; }
    .db-tut-modal .db-tut-step { grid-template-rows: 58px min-content 1fr; gap: 4px; padding: 8px 5px 9px; }
    .db-tut-modal .db-tut-step h3 { font-size: 16px; }
    .db-tut-modal .db-tut-step p { padding: 0 2px; font-size: 11px; line-height: 1.25; }
    .db-tut-modal .db-tut-step::before { top: 4px; left: 4px; transform: scale(.82); }
    .db-tut-modal :is(.db-tut-search, .db-tut-compare, .db-tut-answer) { transform: scale(.82); }
    .db-tut-modal .db-tut-unlock { transform: scale(.8); }
    .db-tut-choose { margin: 11px 0 6px; font-size: 18px; }
    .db-tut-level { padding: 9px 4px; font-size: 17px; }
    .db-tut-section { margin-top: 26px; padding: 20px 12px; }
    .db-tut-section .db-tut-steps--4 { grid-template-columns: 1fr; }
}
/* Pantallas bajas (portátiles, móvil en horizontal): el modal se compacta antes de tener que
   escalarse, para que la letra no quede pequeña. */
@media (max-height: 760px) and (min-width: 601px) {
    .db-modal .db-tut-modal { padding-top: 18px; padding-bottom: 16px; }
    .db-tut-kicker { min-height: 23px; padding: 4px 11px; font-size: 10px; }
    .db-tut-modal .db-tut-heading h2 { margin: 5px 0 4px; font-size: 28px; }
    .db-tut-modal .db-tut-heading p { margin-bottom: 11px; font-size: 12.5px; }
    .db-tut-modal .db-tut-step { grid-template-rows: 60px min-content 1fr; gap: 5px; padding: 8px 9px 10px; }
    .db-tut-modal .db-tut-step h3 { font-size: 18px; }
    .db-tut-modal .db-tut-step p { font-size: 12px; line-height: 1.35; }
    .db-tut-modal :is(.db-tut-search, .db-tut-compare, .db-tut-answer, .db-tut-unlock) { transform: scale(.88); }
    .db-tut-choose { margin: 11px 0 7px; font-size: 19px; }
    .db-tut-level { padding: 9px 8px; font-size: 20px; }
    .db-tut-examples { gap: 10px; padding: 12px; }
    .db-tut-play { margin-top: 12px; padding: 10px 38px; font-size: 22px; }
}
@media (max-height: 560px) {
    .db-modal:has(.db-tut-modal) { padding: 10px; }
    .db-tut-modal .db-tut-heading p { display: none; }
    .db-tut-modal .db-tut-step { grid-template-rows: 50px min-content 1fr; }
    .db-tut-modal :is(.db-tut-search, .db-tut-compare, .db-tut-answer, .db-tut-unlock) { transform: scale(.76); }
}

/* Móvil en horizontal y ventanas muy bajas: las 4 tarjetas en una sola fila. */
@media (max-height: 560px) and (min-width: 601px) {
    .db-modal .db-tut-modal { width: min(960px, 100%); }
    .db-tut-modal .db-tut-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
    .db-tut-steps--3 .db-tut-step { grid-template-columns: 106px minmax(0, 1fr); }
    .db-tut-steps--3 .db-tut-cell { width: 29px; height: 29px; font-size: 16px; }
    .db-tut-examples .db-tut-cell { width: 36px; height: 36px; font-size: 20px; }
}

/* Compacta la distribución antes del ajuste final de altura, siempre sin scroll. */
@media (max-width: 700px) {
    .db-tut-modal .db-tut-steps--3 .db-tut-step { grid-template-rows: min-content 1fr; }
}
@media (max-width: 600px), (max-height: 560px) {
    .db-modal:has(.db-tut-modal) { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
    .db-modal:has(.db-tut-modal) { overflow: hidden; }
    .db-modal .db-tut-modal { overflow: hidden; }
    .db-tut-close { width: 44px; height: 44px; }
    .db-tut-modal .db-tut-kicker { max-width: calc(100% - 76px); line-height: 1.3; letter-spacing: .06em; }
    .db-tut-modal .db-tut-level, .db-tut-modal .db-tut-play { min-height: 44px; }
    .db-tut-modal .db-tut-search { width: 92%; grid-template-columns: 14px minmax(0, 1fr) 24px; transform: none; }
    .db-tut-modal .db-tut-search b { align-self: stretch; height: auto; }
    .db-tut-modal .db-tut-search span { padding-left: 3px; }
    .db-tut-modal .db-tut-search > i { font-size: 10px; }
}
@media (max-width: 380px) {
    .db-modal .db-tut-modal { padding: 14px 9px 12px; }
    .db-tut-modal .db-tut-heading p { margin: 0 4px 9px; }
    .db-tut-modal .db-tut-step { grid-template-rows: 44px min-content 1fr; padding: 6px 4px; }
    .db-tut-modal .db-tut-step h3 { font-size: 15px; }
    .db-tut-modal .db-tut-step p { font-size: 11px; line-height: 1.25; }
    .db-tut-modal .db-tut-steps--3 .db-tut-demo { min-height: 58px; }
    .db-tut-modal .db-tut-steps--3 .db-tut-step { grid-template-columns: 76px minmax(0, 1fr); }
    .db-tut-modal .db-tut-choose { margin: 9px 0 6px; }
}
@media (max-height: 560px) and (min-width: 601px) {
    .db-tut-modal .db-tut-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .db-tut-modal .db-tut-steps--3 .db-tut-step { grid-template-columns: 1fr; grid-template-rows: 50px min-content 1fr; text-align: center; }
    .db-tut-modal .db-tut-steps--3 .db-tut-demo { grid-row: auto; min-height: 50px; }
}