/* Wordle de Dragon Ball. Reutiliza personaje.css (título, banner de ayer, resultado y
   «Cómo se juega»); aquí solo el tablero, el teclado y los ejemplos. */
/* Todo el juego (categoría, tablero y teclado) cabe en la altura de la pantalla: las casillas
   miden lo que deja libre el resto (≈ 300 px) repartido entre las 6 filas, y el teclado encoge
   con la altura. La leyenda va fuera, como en WhatPiece. dvh, con vh de respaldo, para no
   contar la barra del móvil. */
.db-wordle {
    --key-h: clamp(38px, 6.5vh, 54px);
    --cell: clamp(32px, calc((100vh - 300px) / 6), 58px);
    max-width: 520px; margin: 0 auto; padding: 14px 20px 0; background: var(--db-surface); border: 2px solid #233f4b; border-top: 4px solid var(--db-orange); border-radius: 13px; box-shadow: var(--db-shadow); overflow: hidden;
}
@supports (height: 100dvh) {
    .db-wordle { --key-h: clamp(38px, 6.5dvh, 54px); --cell: clamp(32px, calc((100dvh - 300px) / 6), 58px); }
}
.db-wordle-hint { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 28px; margin: 0 0 12px; }
.db-wordle-hint-ball { display: flex; }
.db-wordle-hint-ball .db-dragon-ball { width: 26px; height: 26px; }
.db-wordle-hint-ball .db-dragon-ball > span { font-size: 7px; }
.db-wordle-category { display: flex; align-items: center; gap: .3em; color: var(--db-text); font-size: 16px; font-weight: 800; line-height: 1; }
.db-wordle-category strong { color: var(--db-orange-dark); }
/* Botón «?» y popover de la categoría (como el de WhatPiece). */
.db-wordle-cat-btn { display: inline-grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; padding: 0; border: 1px solid #d79a52; border-radius: 50%; background: #fbe3bf; color: var(--db-orange-dark); font-size: 13px; font-weight: 900; line-height: 1; transition: background .15s, transform .15s; }
.db-wordle-cat-btn:hover, .db-wordle-cat-btn[aria-expanded="true"] { background: var(--db-orange); color: #fff8ea; transform: scale(1.1); }
.db-wordle-cat-pop { position: absolute; top: calc(100% + 9px); left: 50%; z-index: 10; width: min(260px, calc(100% - 8px)); transform: translateX(-50%); padding: 11px 14px; background: var(--db-bg-2); border: 1px solid var(--db-gold); border-radius: 10px; box-shadow: 0 10px 24px #071c2a70; color: #e6ecdf; font-size: 12px; line-height: 1.5; text-align: center; animation: db-pop-in .15s ease; }
.db-wordle-cat-pop[hidden] { display: none; }
.db-wordle-cat-pop::before { content: ''; position: absolute; top: -7px; left: var(--arrow-x, 50%); transform: translateX(-50%); border: 7px solid transparent; border-top: 0; border-bottom-color: var(--db-gold); }
.db-wordle-cat-pop strong { display: block; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #ffce6240; color: var(--db-gold); font: 400 18px/1.1 'Bangers', Impact, sans-serif; letter-spacing: .04em; }
@keyframes db-pop-in { from { opacity: 0; transform: translate(-50%, -4px); } }
.db-yesterday-ball .db-dragon-ball { width: 42px; height: 42px; }
/* Resultado: la tarjeta es la del personaje (personaje.css, .db-result-*); aquí solo la bola
   para las palabras sin foto y la palabra del día en casillas del color del resultado. */
.db-result-emblem { display: none; }
.db-result-portrait.is-emblem .db-result-img { display: none; }
.db-result-portrait.is-emblem .db-result-emblem { display: grid; }
.db-result-emblem .db-dragon-ball { width: 58px; height: 58px; }
.db-result-emblem .db-dragon-ball > span { font-size: 13px; }
.db-result-word { display: flex; justify-content: center; gap: 6px; margin: -4px 0 20px; perspective: 400px; }
.db-result-word i {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: var(--result-tone);
    color: #fff8ea; font: 400 26px/1 'Bangers', Impact, sans-serif; font-style: normal; letter-spacing: .03em;
    text-shadow: 1px 1px 0 #0003; box-shadow: 0 3px 0 color-mix(in srgb, var(--result-tone) 60%, #000);
}
.db-result-word.is-revealing i { animation: db-result-flip .5s ease-out both; animation-delay: calc(var(--i) * .12s); }
@keyframes db-result-flip { from { opacity: 0; transform: rotateX(90deg); } to { opacity: 1; transform: none; } }
html.motion-reduce .db-result-word.is-revealing i { animation: none; }

/* ── Tablero ── */
.db-wordle-board { display: grid; gap: 6px; width: min(100%, calc(var(--cell) * 5 + 24px)); margin: 0 auto 14px; }
.db-wordle-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.db-wordle-cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: #fffdf5; border: 2px solid #d5c6a4; border-radius: 6px; color: var(--db-text); font: 400 min(calc(var(--cell) * .58), 7.5vw)/1 'Bangers', Impact, sans-serif; letter-spacing: .03em; text-transform: uppercase; user-select: none; }
.db-wordle-cell.filled { border-color: #7d8a84; animation: db-pop .1s ease-out; }
.db-wordle-cell.correct, .db-wordle-cell.present, .db-wordle-cell.absent { color: #fff8ea; border-color: transparent; text-shadow: 1px 1px 0 #0003; }
.db-wordle-cell.correct { background: var(--db-correct); }
.db-wordle-cell.present { background: var(--db-partial); color: #3b2f12; text-shadow: none; }
.db-wordle-cell.absent { background: var(--db-unknown); }
.db-wordle-cell.flip { animation: db-flip .34s ease-in-out; }
.db-wordle-row.shake { animation: db-shake .3s; }
@keyframes db-pop { 50% { transform: scale(1.08); } }
@keyframes db-flip { 50% { transform: rotateX(90deg); } }
@keyframes db-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ── Teclado ── */
.db-keyboard { display: grid; gap: 6px; margin: 0 -8px 12px; }
.db-key-row { display: flex; justify-content: center; gap: 5px; }
.db-key { flex: 1 1 0; max-width: 44px; height: var(--key-h); padding: 0; display: grid; place-items: center; background: #e4dcc6; border: 1px solid #c3b08a; border-radius: 6px; box-shadow: 0 3px 0 #b39b6e; color: var(--db-text); font-size: 14px; font-weight: 900; transition: background .15s, transform .05s; }
.db-key:active { transform: translateY(2px); box-shadow: 0 1px 0 #b39b6e; }
.db-key-action { flex-grow: 1.5; max-width: 66px; font-size: 19px; }
.db-key.correct, .db-key.present, .db-key.absent { color: #fff8ea; border-color: transparent; box-shadow: 0 3px 0 #0003; }
.db-key.correct { background: var(--db-correct); }
.db-key.present { background: var(--db-partial); color: #3b2f12; }
.db-key.absent { background: var(--db-unknown); opacity: .75; }
.db-keyboard.is-done .db-key { pointer-events: none; }
@media (hover: hover) { .db-key:not(.correct):not(.present):not(.absent):hover { background: #efe6cf; } }

/* Paleta accesible (Ajustes): además del color, una marca en cada casilla. */
html.accessible-palette .db-wordle-cell.correct::after,
html.accessible-palette .db-wordle-cell.present::after,
html.accessible-palette .db-wordle-cell.absent::after { position: absolute; top: 3px; right: 4px; font: 900 9px/1 'Nunito', sans-serif; text-shadow: none; }
html.accessible-palette .db-wordle-cell.correct::after { content: '✓'; }
html.accessible-palette .db-wordle-cell.present::after { content: '≈'; }
html.accessible-palette .db-wordle-cell.absent::after { content: '×'; }

/* ── Leyenda y ejemplos ── */
.db-wordle-legend { margin: 14px auto 0; }
.db-wordle-swatch { display: inline-block; width: 13px; height: 13px; border-radius: 3px; }
.db-wordle-swatch.correct { background: var(--db-correct); }
.db-wordle-swatch.present { background: var(--db-partial); }
.db-wordle-swatch.absent { background: var(--db-unknown); }

@media (prefers-reduced-motion: reduce) {
    .db-wordle-cell.filled, .db-wordle-cell.flip, .db-wordle-row.shake { animation: none; }
}
html.motion-reduce .db-wordle-cell.filled, html.motion-reduce .db-wordle-cell.flip, html.motion-reduce .db-wordle-row.shake { animation: none; }

@media (max-width: 580px) {
    .db-wordle { padding: 12px 12px 0; }
    .db-keyboard { margin: 0 -4px 12px; }
    .db-key-row { gap: 4px; }
    .db-key { font-size: 13px; }
}