/* Pirámide de Dragon Ball (portada de piramide.css de WhatPiece). Reutiliza personaje.css
   (título, resultado) y wordle.css (panel crema, categoría con popover, leyenda); aquí la
   pirámide de cartas, la flecha Mayor/Menor, el botón de comprobar y las demos del tutorial.
   Como en WhatPiece, el alto de las cartas crece con la altura de pantalla, pero con un mínimo
   que deja las fotos casi cuadradas aunque en pantallas bajas haya que hacer algo de scroll. */
.db-pir { max-width: 640px; padding-bottom: 18px; }
.db-pir-hint { margin-bottom: 4px; }
.db-pir-sub { margin: 0 0 14px; color: var(--db-muted); font-size: 12px; font-style: italic; text-align: center; }

/* ── Pirámide ── */
.db-pir-wrap {
    --gap: 6px;
    --card-h: clamp(115px, calc((100vh - 250px) / 4 - 6px), 160px);
    position: relative; display: flex; justify-content: center; padding: 0 34px;
}
@supports (height: 100dvh) {
    .db-pir-wrap { --card-h: clamp(115px, calc((100dvh - 250px) / 4 - 6px), 160px); }
}
.db-pir-pyramid { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--gap); width: 100%; }
.db-pir-row { display: flex; justify-content: center; gap: var(--gap); width: 100%; }
.db-pir-loading { display: grid; place-items: center; width: 100%; height: calc(4 * (var(--card-h) + 4px) + 3 * var(--gap)); }
.db-pir-loading-ball .db-dragon-ball { width: 46px; height: 46px; animation: db-pir-spin 1.2s linear infinite; }
@keyframes db-pir-spin { to { transform: rotate(360deg); } }
/* Partida de hoy ya comprobada (lo decide un script antes del primer pintado): sin botón. */
html.pir-restoring .db-pir-footer { display: none; }

/* ── Carta ── */
.db-pir-card {
    position: relative; flex: 0 0 calc(25% - var(--gap) * 3 / 4); max-width: 140px; overflow: hidden;
    border: 2px solid #233f4b; border-radius: 10px; background: #fffdf5; cursor: pointer; user-select: none;
    box-shadow: 0 3px 0 #122f5040; transition: border-color .18s, box-shadow .18s, transform .14s;
    -webkit-tap-highlight-color: transparent;
}
.db-pir-card:focus-visible { outline: 3px solid var(--db-orange); outline-offset: 2px; }
@media (hover: hover) {
    .db-pir-card:not(.correct):not(.wrong):hover { border-color: var(--db-orange); transform: translateY(-2px); }
}
.db-pir-card-img { display: block; width: 100%; height: var(--card-h); object-fit: cover; object-position: top center; background: #ddd5b8; pointer-events: none; -webkit-touch-callout: none; }
.db-pir-card-overlay {
    position: absolute; right: 0; bottom: 0; left: 0; padding: 18px 4px 5px; pointer-events: none;
    background: linear-gradient(to top, #0b182af2 0%, #0b182ab8 50%, #0b182a33 80%, transparent);
}
.db-pir-card-name {
    display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    color: #fff1d2; font-size: clamp(9px, 2.2vw, 12px); font-weight: 900; line-height: 1.2; text-align: center; text-shadow: 0 1px 3px #000;
}
.db-pir-card-value { display: none; margin-top: 2px; color: var(--db-gold); font: 400 clamp(12px, 2.6vw, 16px)/1 'Bangers', Impact, sans-serif; letter-spacing: .04em; text-align: center; }
.db-pir-card-pos {
    position: absolute; top: 4px; left: 4px; z-index: 2; min-width: 20px; padding: 3px 5px 2px; border: 1px solid #ffce5966; border-radius: 5px;
    background: #0b182ad9; color: var(--db-gold); font: 400 clamp(12px, 2.4vw, 15px)/1 'Bangers', Impact, sans-serif; text-align: center;
}
.db-pir-card-status {
    position: absolute; top: 0; right: 0; z-index: 3; display: none; align-items: flex-start; justify-content: flex-end;
    width: 28px; height: 28px; padding: 3px 4px 0 0; color: #fff; font: 900 13px/1 'Nunito', sans-serif; pointer-events: none;
}

/* Boca abajo: el reverso azul de los paneles con una bola de dragón. */
.db-pir-card.is-down { border-color: #0f2a48; background: radial-gradient(circle at 50% 38%, #245780, var(--db-panel, #183f68) 70%); }
.db-pir-card-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: var(--card-h); }
.db-pir-card-back .db-dragon-ball { width: clamp(28px, 7vw, 40px); height: clamp(28px, 7vw, 40px); opacity: .9; }
.db-pir-card-back .db-dragon-ball > span { font-size: clamp(7px, 1.6vw, 9px); }
.db-pir-card-hint { padding: 0 4px; color: #c2d5e4; font-size: clamp(8px, 1.6vw, 11px); font-weight: 800; line-height: 1.1; text-align: center; }
.db-pir-card.is-revealing { animation: db-pir-reveal .32s cubic-bezier(.34, 1.56, .64, 1) both; }
.db-pir-card.is-idle-hint { animation: db-pir-idle 1.1s ease-in-out 2; }

/* Selección, arrastre y soltar (dorado, como en WhatPiece). */
.db-pir-card[draggable="true"] { cursor: grab; touch-action: none; }
.db-pir-card.is-selected { z-index: 5; border-color: var(--db-orange); box-shadow: 0 0 0 3px #ff9b3f55, 0 0 18px #ff9b3f80; transform: scale(1.06) translateY(-2px); }
.db-pir-card.is-dragging { opacity: .4; border-style: dashed; transform: scale(.95); }
.db-pir-card.is-drag-over { border-color: var(--db-gold); box-shadow: 0 0 0 3px #ffce5955, 0 0 18px #ffce5999; transform: scale(1.05); }

/* Resultado (como .pir-card.correct / .wrong de WhatPiece): verde y rojo intensos, con borde
   grueso, halo, fondo teñido y el pie de la carta del color del estado. Más vivos que los
   --db-correct / --db-incorrect del tablero del personaje; la paleta accesible usa los suyos. */
.db-piramide-page { --pir-correct: #2e7d32; --pir-wrong: #c62828; }
html.accessible-palette .db-piramide-page { --pir-correct: var(--db-correct); --pir-wrong: var(--db-incorrect); }
.db-pir-card.correct, .db-pir-card.wrong { cursor: default; }
.db-pir-card.correct { --tone: var(--pir-correct); }
.db-pir-card.wrong { --tone: var(--pir-wrong); }
.db-pir-card:is(.correct, .wrong) {
    border: 3px solid var(--tone);
    background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 45%, #0b182a), #0b182a);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 25%, transparent), 0 0 14px color-mix(in srgb, var(--tone) 45%, transparent), 0 3px 0 color-mix(in srgb, var(--tone) 55%, #000);
    animation: db-pir-fill .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--delay, 0ms);
}
.db-pir-card:is(.correct, .wrong) .db-pir-card-img { height: calc(var(--card-h) - 2px); }  /* el borde de 3 px no estira la carta */
.db-pir-card:is(.correct, .wrong) .db-pir-card-overlay { background: linear-gradient(to top, color-mix(in srgb, var(--tone) 92%, #000) 0%, color-mix(in srgb, var(--tone) 60%, transparent) 50%, transparent); }
.db-pir-card:is(.correct, .wrong) .db-pir-card-name { color: color-mix(in srgb, var(--tone) 10%, #fff); }
.db-pir-card:is(.correct, .wrong) .db-pir-card-value { display: block; color: #fff; text-shadow: 0 1px 2px #0009; }
.db-pir-card:is(.correct, .wrong) .db-pir-card-status { display: flex; width: 32px; height: 32px; font-size: 14px; background: linear-gradient(225deg, var(--tone) 0 49%, #ffffffb3 50% 52%, transparent 53%); }
.db-pir-card.wrong .db-pir-card-img { opacity: .72; }

/* Demo de intercambio (clones fijos que cruzan sus posiciones, como en WhatPiece). */
.db-pir-demo-clone { position: fixed; z-index: 1000; margin: 0; pointer-events: none; border: 2px solid var(--db-gold) !important; box-shadow: 0 0 16px #ffce5966; }
.db-pir-demo-badge {
    position: fixed; z-index: 1001; padding: 6px 15px; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
    border: 1px solid var(--db-gold); border-radius: 999px; background: #0b182aee; color: var(--db-gold); font-size: 12px; font-weight: 900;
    box-shadow: 0 3px 14px #0009; animation: db-pir-badge 2.2s ease-in-out forwards;
}

/* ── Flecha Mayor ↕ Menor a los lados ── */
.db-pir-arrow { position: absolute; top: 0; bottom: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; width: 26px; pointer-events: none; }
.db-pir-arrow--left { left: 2px; }
.db-pir-arrow--right { right: 2px; }
.db-pir-arrow-label { flex-shrink: 0; margin: 6px 0; color: var(--db-muted); font-size: 9px; font-weight: 900; letter-spacing: .1em; line-height: 1; text-transform: uppercase; white-space: nowrap; writing-mode: vertical-rl; }
.db-pir-arrow-label.is-high { color: var(--db-orange-dark); transform: rotate(180deg); }
.db-pir-arrow-shaft { position: relative; flex: 1; width: 6px; margin: 10px 0; border-radius: 3px; background: linear-gradient(to bottom, var(--db-orange), #d5be98); }
.db-pir-arrow-shaft::before, .db-pir-arrow-shaft::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-right: 8px solid transparent; border-left: 8px solid transparent; }
.db-pir-arrow-shaft::before { top: -9px; border-bottom: 11px solid var(--db-orange); }
.db-pir-arrow-shaft::after { bottom: -9px; border-top: 11px solid #d5be98; }

/* ── Comprobar ── */
.db-pir-footer { margin-top: 16px; text-align: center; }
.db-pir-submit {
    min-width: 210px; padding: 11px 40px; 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; transition: transform .15s, background .15s;
}
.db-pir-submit:hover:not(:disabled) { background: linear-gradient(180deg, #ffd08a, #ffa645); transform: translateY(-2px); }
.db-pir-submit:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #823d19; }
.db-pir-submit:disabled { opacity: .5; cursor: default; }
.db-pir-swatch-correct { background: var(--pir-correct); }
.db-pir-swatch-wrong { background: var(--pir-wrong); }

/* Resultado: en lugar de retrato, la bola con los aciertos encima. */
.db-pir-score-badge { position: relative; }
.db-pir-score-badge .db-result-emblem { display: grid; }
.db-pir-score-badge .db-dragon-ball { width: 58px; height: 58px; }
.db-pir-score-badge .db-dragon-ball > span { font-size: 13px; }

/* Paleta accesible (Ajustes): ya hay ✓ y × en la esquina; además, borde discontinuo al fallar. */
html.accessible-palette .db-pir-card.wrong { border-style: dashed; }

/* ── Demos del tutorial ── */
.db-tut-pir-category { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #ff9b3f80; border-radius: 999px; background: #0b182a; }
.db-tut-pir-category span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ff9b3f; color: #152e4e; font: 900 13px/1 'Nunito', sans-serif; animation: db-tut-pir-pulse 3.6s ease-in-out infinite; }
.db-tut-pir-category b { color: var(--tut-gold, #ffce59); font: 400 18px/1 'Bangers', Impact, sans-serif; letter-spacing: .05em; }
.db-tut-pir-cards { position: relative; display: flex; gap: 6px; }
.db-tut-pir-cards i { position: relative; display: grid; place-items: center; width: 30px; height: 42px; border: 1px solid #ff9b3f80; border-radius: 6px; background: #245780; color: #fff1d2; font: 400 16px/1 'Bangers', Impact, sans-serif; font-style: normal; }
.db-tut-pir-cards .is-reveal { animation: db-tut-pir-reveal 3.6s ease-in-out infinite; }
.db-tut-pir-cards .is-reveal span { color: var(--db-gold); }
.db-tut-pir-swap .is-first { animation: db-tut-pir-swap-a 3.6s ease-in-out infinite; }
.db-tut-pir-swap .is-second { animation: db-tut-pir-swap-b 3.6s ease-in-out infinite; }
.db-tut-pir-check i { animation: db-tut-pir-check 3.6s ease-in-out infinite; }
.db-tut-pir-check i:nth-child(2) { animation-delay: .25s; }
.db-tut-pir-check i:nth-child(3) { animation-delay: .5s; }
.db-tut-pir-check .correct { --state: var(--pir-correct, var(--db-correct)); }
.db-tut-pir-check .wrong { --state: var(--pir-wrong, var(--db-incorrect)); }
.db-tut-section :is(.db-tut-pir-category, .db-tut-pir-cards) { transform: scale(1.15); }

@keyframes db-pir-reveal { from { opacity: 0; transform: scale(.72); } }
@keyframes db-pir-fill { 0% { opacity: .5; transform: scale(.85); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes db-pir-idle { 50% { border-color: var(--db-gold); box-shadow: 0 0 0 3px #ffce5940, 0 0 16px #ffce5980; transform: translateY(-3px); } }
@keyframes db-pir-demo-a {
    15% { transform: translate(0, -12px) scale(1.08); }
    65% { transform: translate(var(--dx), calc(var(--dy) - 12px)) scale(1.08); }
    80%, 92% { opacity: 1; transform: translate(var(--dx), var(--dy)); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
@keyframes db-pir-demo-b {
    15% { opacity: .65; transform: translate(0, 6px) scale(.93); }
    65% { opacity: .65; transform: translate(var(--dx), calc(var(--dy) + 6px)) scale(.93); }
    80%, 92% { opacity: 1; transform: translate(var(--dx), var(--dy)); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
@keyframes db-pir-badge { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 14%, 86% { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes db-tut-pir-pulse { 0%, 30%, 100% { transform: none; } 45%, 70% { transform: scale(1.2) rotate(-10deg); box-shadow: 0 0 14px #ff9b3f; } }
@keyframes db-tut-pir-reveal { 0%, 25%, 100% { background: #245780; transform: none; } 40%, 80% { background: #fff1d2; transform: translateY(-3px); } }
@keyframes db-tut-pir-swap-a { 0%, 20%, 100% { transform: none; } 45%, 80% { transform: translateX(72px); background: #ff9b3f; color: #152e4e; } }
@keyframes db-tut-pir-swap-b { 0%, 20%, 100% { transform: none; } 45%, 80% { transform: translateX(-72px); background: #ff9b3f; color: #152e4e; } }
@keyframes db-tut-pir-check { 0%, 25%, 100% { background: #245780; color: transparent; } 40%, 82% { background: var(--state); border-color: var(--state); color: #fff; } }

html.motion-reduce :is(.db-pir-card, .db-pir-loading-ball .db-dragon-ball) { animation: none !important; }
html.motion-reduce .db-tut-pir-check i { background: var(--state); color: #fff; }
/* common.css acorta todas las animaciones a 0,01 ms si el sistema pide reducir movimiento. Como en
   WhatPiece (y en tutorial.css), en la Pirámide solo manda el ajuste del sitio: las pistas de
   inactividad y la demo de intercambio explican el juego. Aquí se devuelven sus duraciones. */
@media (prefers-reduced-motion: reduce) {
    html:not(.motion-reduce) :is(.db-tut-pir-category span, .db-tut-pir-cards i) { animation-duration: 3.6s !important; }
    html:not(.motion-reduce) .db-pir-card { transition-duration: .18s !important; }
    html:not(.motion-reduce) .db-pir-card.is-revealing { animation-duration: .32s !important; }
    html:not(.motion-reduce) .db-pir-card.is-idle-hint { animation-duration: 1.1s !important; }
    html:not(.motion-reduce) .db-pir-card:is(.correct, .wrong) { animation-duration: .45s !important; }
    html:not(.motion-reduce) :is(.db-pir-demo-clone, .db-pir-demo-badge) { animation-duration: 2.2s !important; }
    html:not(.motion-reduce) .db-pir-loading-ball .db-dragon-ball { animation-duration: 1.2s !important; }
    html:not(.motion-reduce) .db-pir-submit { transition-duration: .15s !important; }
}

@media (max-width: 600px) {
    .db-pir { padding-right: 8px; padding-left: 8px; }
    .db-pir-wrap { --gap: 5px; --card-h: clamp(90px, calc((100vh - 280px) / 4 - 5px), 130px); padding: 0 22px; }
    @supports (height: 100dvh) { .db-pir-wrap { --card-h: clamp(90px, calc((100dvh - 280px) / 4 - 5px), 130px); } }
    .db-pir-arrow { width: 18px; }
    .db-pir-arrow-label { font-size: 7.5px; }
    .db-pir-arrow-shaft { width: 4px; }
    .db-pir-card { border-radius: 8px; }
    .db-pir-card-overlay { padding: 14px 3px 4px; }
    .db-pir-card-status { width: 22px; height: 22px; padding: 2px 3px 0 0; font-size: 10px; }
    .db-tut-modal :is(.db-tut-pir-category, .db-tut-pir-cards) { transform: scale(.82); }
}
@media (max-width: 360px) {
    .db-pir-wrap { --gap: 4px; padding: 0 16px; }
    .db-pir-card-name { -webkit-line-clamp: 1; line-clamp: 1; }
}