/* ═══════════════════════════════════════════════════════════════════════════
   PIRÁMIDE — ordena 10 Pokémon por la temática del día (nº de Pokédex,
   estadísticas base totales, una estadística o el nivel de evolución).

   Port de OP/app/public_html/assets/css/piramide.css: mismas clases (.pir-*)
   que pinta game-piramide.js, llevadas al marco Pokédex y a los tokens de
   common.css (estados --state-*, Press Start 2P para valores y posiciones,
   escala --space-* / --radius-*). Un solo breakpoint de móvil (600px) más
   los ajustes de pantallas bajas del tutorial, como OP.

   Animaciones: solo las apaga el ajuste del jugador (html.tutorial-motion-
   reduce), nunca prefers-reduced-motion — ver CLAUDE.md.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --pir-screen-bg:   #f0f0e8;
    --pir-card-face:   radial-gradient(circle at 50% 42%, #ffffff 0%, #eef2f6 58%, #d9e1ea 100%);
    --pir-card-border: var(--poke-navy);
    --pir-ink:         #1a2a4a;
}

.pokedex-screen {
    background: var(--pir-screen-bg) !important;
}

/* .game-container transparente dentro de la Pokédex (pokedex-frame.css). */
.pir-game-container.game-container {
    background: transparent !important;
    border-color: transparent !important;
    width: 100%;
    margin: 0 auto;
    padding: 22px 16px 26px;
    text-align: center;
}

.pir-not-seeded {
    margin: 0 !important;
    padding: var(--space-6) 0;
    color: var(--pir-ink) !important;
    font-size: 0.95rem !important;
    text-align: center;
}

/* ============================================================
   CABECERA DE LA TEMÁTICA — pantalla de Pokédex
   ============================================================ */
.pir-instruction {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2) var(--space-4);
    max-width: 560px;
    margin: 0 auto var(--space-5);
    padding: 10px 30px 10px 12px;
    overflow: hidden;
    border: 3px solid #1a1a1a;
    border-radius: 10px;
    background: linear-gradient(180deg, #17375c 0%, var(--poke-navy-dark) 100%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.07),
        inset 0 0 22px rgba(0, 0, 0, 0.55),
        0 3px 0 rgba(0, 26, 64, 0.3);
    color: #e8f4ff;
    text-align: left;
}

/* Líneas de barrido de la pantalla (cosmético). */
.pir-instruction::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg,
        transparent 0 3px,
        rgba(255, 255, 255, 0.035) 3px 4px);
}

/* Luz de estado de la pantalla. */
.pir-instruction::after {
    content: '';
    position: absolute;
    top: 9px;
    right: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4444;
    box-shadow: 0 0 6px rgba(255, 68, 68, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.pir-theme-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 2px solid #1a1a1a;
    border-radius: var(--radius-sm);
    background: var(--poke-yellow);
    color: var(--poke-navy);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.pir-theme-svg {
    display: none;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pir-theme-svg .pir-theme-fill {
    fill: var(--poke-red);
}

.pir-instruction:not([data-family]) .pir-theme-svg--none,
.pir-instruction[data-family="dex"] .pir-theme-svg--dex,
.pir-instruction[data-family="bst"] .pir-theme-svg--bst,
.pir-instruction[data-family="stat"] .pir-theme-svg--stat,
.pir-instruction[data-family="evo"] .pir-theme-svg--evo {
    display: block;
}

.pir-instruction-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    min-width: 0;
}

.pir-category-label {
    color: var(--poke-yellow);
    font: 0.5rem/1.4 'Press Start 2P', cursive;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pir-attr-name {
    min-width: 0;
    color: #ffffff;
    font: clamp(0.72rem, 2.2vw, 0.95rem)/1.35 'Press Start 2P', cursive;
    text-shadow: 0 0 8px rgba(120, 200, 255, 0.55), 2px 2px 0 rgba(0, 0, 0, 0.5);
    overflow-wrap: anywhere;
}

.pir-instruction-sub {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
    color: #a9c6e6;
    font: 500 0.74rem/1.3 Roboto, Arial, sans-serif;
}

.pir-sub-part {
    white-space: nowrap;
}

/* Sin coma que partir (CJK): una sola pieza, que sí puede partirse. */
.pir-sub-part:only-child {
    white-space: normal;
}

/* Nivel de evolución tiene su propia línea de ayuda. */
.pir-sub--evo,
.pir-instruction[data-family="evo"] .pir-sub--default {
    display: none;
}

.pir-instruction[data-family="evo"] .pir-sub--evo {
    display: flex;
}

/* ============================================================
   PIRÁMIDE
   Ancho de carta: (fila - 3 huecos) / 4 → calc(25% - gap * 3/4)
   ============================================================ */
.pir-pyramid-wrap {
    --pir-gap: 6px;
    --card-h: clamp(92px, calc((100vh - 330px) / 4), 132px);
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-4);
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.pir-pyramid {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pir-gap);
    margin: 0 0 var(--space-5);
}

.pir-row {
    display: flex;
    justify-content: center;
    gap: var(--pir-gap);
    width: 100%;
}

/* Mientras carga ocupa lo mismo que la pirámide: el tablero no salta. */
.pir-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(4 * var(--card-h) + 3 * var(--pir-gap));
}

.pir-loading-ball {
    width: 34px;
    height: 34px;
    border: 3px solid #1a1a1a;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--poke-red) 0 44%, #1a1a1a 44% 56%, #ffffff 56% 100%);
    animation: pirLoadingSpin 0.9s linear infinite;
}

@keyframes pirLoadingSpin {
    to { transform: rotate(360deg); }
}

/* Partida de hoy ya enviada (lo decide el script de antes del primer
   pintado): el botón de comprobar no llega a aparecer. */
html.pir-restoring-result .pir-footer {
    display: none;
}

/* ============================================================
   CARTA — base (boca arriba)
   ============================================================ */
.pir-card {
    flex: 0 0 calc(25% - var(--pir-gap) * 3 / 4);
    max-width: 140px;
    height: var(--card-h);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--pir-card-border);
    border-radius: var(--radius-sm);
    background: var(--pir-card-face);
    box-shadow: 0 3px 0 rgba(0, 26, 64, 0.32), 0 5px 12px rgba(0, 26, 64, 0.16);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.14s;
}

.pir-card:hover:not(.correct):not(.wrong) {
    border-color: var(--poke-gold-deep);
    transform: translateY(-2px);
}

/* Sprite completo, nunca recortado (STYLE_GUIDE: un sprite se ve entero). */
.pir-card-img {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    display: block;
    padding: 16px 4px 2px;
    object-fit: contain;
    object-position: center bottom;
    -webkit-touch-callout: none;
    pointer-events: none;
}

/* Franja inferior con el nombre (y el valor tras comprobar). */
.pir-card-overlay {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 3px 3px 4px;
    background: var(--poke-navy);
    color: #ffffff;
    pointer-events: none;
}

/* Funcional (identifica la carta): dos líneas y corte de palabra antes que
   puntos suspensivos con una sola. */
.pir-card-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-width: 100%;
    overflow: hidden;
    color: #ffffff;
    font: 700 clamp(0.6rem, 1.6vw, 0.74rem)/1.15 'Roboto Condensed', Roboto, Arial, sans-serif;
    text-align: center;
    overflow-wrap: anywhere;
}

.pir-card-result-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
}

.pir-card-value {
    display: none;
    max-width: 100%;
    overflow: hidden;
    color: var(--poke-yellow);
    font: clamp(0.42rem, 1.2vw, 0.56rem)/1.3 'Press Start 2P', cursive;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Insignia de posición (arriba a la izquierda). */
.pir-card-pos {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 2;
    min-width: 17px;
    padding: 3px 3px 2px;
    border: 1px solid var(--poke-yellow);
    border-radius: var(--radius-xs);
    background: var(--poke-navy);
    color: var(--poke-yellow);
    font: clamp(0.42rem, 1.1vw, 0.52rem)/1 'Press Start 2P', cursive;
    text-align: center;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

/* ✓ / × de la esquina superior derecha (tras comprobar). */
.pir-card-status {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: clamp(24px, 5vw, 30px);
    height: clamp(24px, 5vw, 30px);
    align-items: flex-start;
    justify-content: flex-end;
    padding: 3px 4px 0 0;
    color: #ffffff;
    font: 900 clamp(0.62rem, 1.8vw, 0.76rem)/1 Roboto, Arial, sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    pointer-events: none;
}

/* Evolución: zona "→ ?" / "→ sprite + nombre" de la pre-evolución. */
.pir-card-evo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    max-width: 100%;
    min-width: 0;
    padding: 1px 5px;
    border-radius: var(--radius-pill);
    background: var(--poke-yellow);
    color: var(--poke-navy);
    font: 0.42rem/1.5 'Press Start 2P', cursive;
    white-space: nowrap;
}

.pir-card-evo img,
.pir-card-evo .pir-card-evo-img {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.pir-card-evo .pir-card-evo-name {
    min-width: 0;
    overflow: hidden;
    font: 700 0.58rem/1.2 'Roboto Condensed', Roboto, Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Antes de comprobar: "→ ?" (pir_evolves_unknown). */
.pir-card-evo.is-unknown {
    min-width: 30px;
}

/* En las cartas de evolución la franja lleva una línea más: el nombre de la
   pre-evolución se queda en una sola para no comerse el sprite. */
#pirPyramid[data-attribute="evo_level"] .pir-card-name {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.pir-card:focus-visible {
    outline: 3px solid var(--poke-yellow);
    outline-offset: 2px;
}

.pir-error {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    color: var(--state-incorrect);
    font-weight: 700;
}

/* Clones del arrastre (fuera de #pirPyramid, en <body>): el alto y el ancho
   los fija el JS en línea; aquí solo que no se recorte el contenido. */
.pir-drag-ghost,
.pir-touch-clone {
    max-width: none;
}

/* ============================================================
   CARTA — BOCA ABAJO (dorso de carta con Poké Ball)
   ============================================================ */
.pir-card.pir-face-down {
    border-color: #1a1a1a;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 6px, transparent 6px 12px),
        radial-gradient(circle at 50% 42%, #3d7dca 0%, var(--poke-navy) 58%, var(--poke-navy-dark) 100%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 203, 5, 0.6),
        0 3px 0 rgba(0, 26, 64, 0.32),
        0 5px 12px rgba(0, 26, 64, 0.16);
}

.pir-card.pir-face-down:hover {
    border-color: var(--poke-yellow);
}

.pir-card-back {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 14px 3px 6px;
}

/* La Poké Ball es el propio span (el "?" que escribe el JS queda oculto:
   font-size 0); el botón central es su ::before. */
.pir-card-back-icon {
    position: relative;
    flex: 0 0 auto;
    width: clamp(28px, 7vw, 46px);
    height: clamp(28px, 7vw, 46px);
    border: 2px solid #1a1a1a;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--poke-red) 0 45%, #1a1a1a 45% 55%, #ffffff 55% 100%);
    box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.45);
    font-size: 0;
    color: transparent;
    user-select: none;
}

.pir-card-back-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34%;
    height: 34%;
    border: 2px solid #1a1a1a;
    border-radius: 50%;
    background: #ffffff;
    transform: translate(-50%, -50%);
}

.pir-card-back-hint {
    max-width: 100%;
    color: var(--poke-yellow);
    font: 700 clamp(0.52rem, 1.3vw, 0.66rem)/1.15 Roboto, Arial, sans-serif;
    text-align: center;
    user-select: none;
}

/* ============================================================
   ANIMACIONES — revelar, pistas de inactividad, demo de intercambio
   ============================================================ */
@keyframes pirFlip {
    0%   { transform: scale(0.72) rotateY(70deg); opacity: 0; }
    100% { transform: scale(1) rotateY(0); opacity: 1; }
}

.pir-card.pir-revealing {
    animation: pirFlip 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pirIdlePulse {
    0%, 100% {
        border-color: #1a1a1a;
        box-shadow: inset 0 0 0 2px rgba(255, 203, 5, 0.6), 0 3px 0 rgba(0, 26, 64, 0.32);
        transform: translateY(0);
    }
    50% {
        border-color: var(--poke-yellow);
        box-shadow: inset 0 0 0 2px var(--poke-yellow), 0 0 0 3px rgba(255, 203, 5, 0.35), 0 0 18px rgba(255, 203, 5, 0.6);
        transform: translateY(-3px);
    }
}

.pir-card.pir-idle-hint {
    animation: pirIdlePulse 1.1s ease-in-out 2;
}

@keyframes pirDemoA {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    15%  { transform: translate(0, -13px) scale(1.1); opacity: 1; }
    65%  { transform: translate(var(--pir-dx), calc(var(--pir-dy) - 13px)) scale(1.1); opacity: 1; }
    80%  { transform: translate(var(--pir-dx), var(--pir-dy)) scale(1); opacity: 1; }
    92%  { transform: translate(var(--pir-dx), var(--pir-dy)) scale(1); opacity: 1; }
    100% { transform: translate(var(--pir-dx), var(--pir-dy)) scale(1); opacity: 0; }
}

@keyframes pirDemoB {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    15%  { transform: translate(0, 6px) scale(0.93); opacity: 0.65; }
    65%  { transform: translate(var(--pir-dx), calc(var(--pir-dy) + 6px)) scale(0.93); opacity: 0.65; }
    80%  { transform: translate(var(--pir-dx), var(--pir-dy)) scale(1); opacity: 1; }
    92%  { transform: translate(var(--pir-dx), var(--pir-dy)) scale(1); opacity: 1; }
    100% { transform: translate(var(--pir-dx), var(--pir-dy)) scale(1); opacity: 0; }
}

@keyframes pirDemoBadge {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
    14%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    86%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}

.pir-demo-badge {
    position: fixed;
    z-index: 1001;
    padding: 7px 14px;
    border: 2px solid var(--poke-yellow);
    border-radius: var(--radius-pill);
    background: var(--poke-navy);
    color: var(--poke-yellow);
    font: 700 0.78rem/1.2 Roboto, Arial, sans-serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
    animation: pirDemoBadge 2.2s ease-in-out forwards;
}

/* ============================================================
   CARTA — ARRASTRE Y SELECCIÓN
   ============================================================ */
.pir-card[draggable="true"] {
    cursor: grab;
    touch-action: none;
}

.pir-card.dragging {
    opacity: 0.38;
    transform: scale(0.95);
    border-style: dashed;
}

.pir-card.drag-over,
.pir-card.selected {
    border-color: var(--poke-yellow);
    box-shadow:
        0 0 0 3px rgba(255, 203, 5, 0.45),
        0 0 20px rgba(255, 179, 0, 0.6),
        0 3px 0 rgba(0, 26, 64, 0.32);
    transform: scale(1.06) translateY(-2px);
    z-index: 5;
}

.pir-card.selected .pir-card-overlay {
    background: var(--poke-gold-deep);
}

.pir-card.selected .pir-card-name {
    color: var(--poke-navy);
}

/* ============================================================
   CARTA — RESULTADO (acierto / fallo)
   ============================================================ */
@keyframes pirFill {
    0%   { transform: scale(0.82); opacity: 0.5; }
    60%  { transform: scale(1.07); }
    80%  { transform: scale(0.97); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pirReveal {
    0%   { transform: scale(0.85); opacity: 0; }
    70%  { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 1; }
}

.pir-card.correct,
.pir-card.wrong {
    cursor: default;
}

.pir-card.correct {
    border-color: var(--state-correct);
    background: radial-gradient(circle at 50% 42%, #ffffff 0%, var(--state-correct-surface) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--state-correct) 25%, transparent),
        0 0 12px color-mix(in srgb, var(--state-correct) 30%, transparent),
        0 3px 0 var(--state-correct-dark);
    animation: pirFill 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.pir-card.wrong {
    border-color: var(--state-incorrect);
    background: radial-gradient(circle at 50% 42%, #ffffff 0%, var(--state-incorrect-surface) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--state-incorrect) 25%, transparent),
        0 0 12px color-mix(in srgb, var(--state-incorrect) 30%, transparent),
        0 3px 0 var(--state-incorrect-dark);
    animation: pirReveal 0.4s ease-out forwards;
}

.pir-card.correct .pir-card-overlay { background: var(--state-correct-dark); }
.pir-card.wrong .pir-card-overlay   { background: var(--state-incorrect-dark); }

.pir-card.wrong .pir-card-img {
    opacity: 0.75;
}

.pir-card.correct .pir-card-value,
.pir-card.wrong .pir-card-value {
    display: block;
    color: #ffffff;
}

.pir-card.correct .pir-card-status,
.pir-card.wrong .pir-card-status {
    display: flex;
}

.pir-card.correct .pir-card-status {
    background: linear-gradient(225deg,
        var(--state-correct) 0 49%,
        rgba(255, 255, 255, 0.7) 50% 52%,
        transparent 53%);
}

.pir-card.wrong .pir-card-status {
    background: linear-gradient(225deg,
        var(--state-incorrect) 0 49%,
        rgba(255, 255, 255, 0.7) 50% 52%,
        transparent 53%);
}

/* ============================================================
   COMPROBAR — CTA de la casa (patrón .poke-button, STYLE_GUIDE)
   ============================================================ */
.pir-footer {
    margin: var(--space-2) 0 0;
}

.pir-submit-btn {
    display: inline-block;
    min-height: 44px;
    padding: 12px 40px;
    border: 2px solid var(--poke-yellow);
    border-radius: 20px;
    background: linear-gradient(to bottom, var(--poke-navy), var(--poke-navy-dark));
    color: var(--poke-yellow);
    font: 0.72rem/1.3 'Press Start 2P', cursive;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.15s;
}

.pir-submit-btn:hover:not(:disabled) {
    background: var(--poke-yellow);
    color: #141d38;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

.pir-submit-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.pir-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ============================================================
   HISTOGRAMA DE HOY (bandas 0-2 / 3-4 / 5-6 / 7-8 / 10)
   ============================================================ */
.pir-ranking-container {
    width: 100%;
}

.pir-ranking-container:empty {
    display: none;
}

.pir-ranking {
    width: 100%;
    padding: 14px 16px 16px;
    border: 3px solid var(--poke-gold-deep);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--poke-navy), var(--poke-navy-dark));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.pir-ranking-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.pir-ranking-header::before,
.pir-ranking-header::after {
    content: '';
    flex: 1;
    height: 2px;
    background: rgba(255, 203, 5, 0.4);
}

.pir-ranking-title {
    max-width: 80%;
    color: var(--poke-yellow);
    font: 0.5rem/1.5 'Press Start 2P', cursive;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.pir-ranking-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pir-ranking-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pir-ranking-label {
    flex-shrink: 0;
    width: 40px;
    color: rgba(255, 255, 255, 0.6);
    font: 0.5rem/1 'Press Start 2P', cursive;
    text-align: right;
}

.pir-ranking-bar-wrap {
    flex: 1;
    height: 22px;
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: rgba(0, 0, 0, 0.35);
}

.pir-ranking-bar {
    width: 0;
    height: 100%;
    min-width: 4px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.32);
    transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.pir-ranking-pct {
    flex-shrink: 0;
    width: 38px;
    color: rgba(255, 255, 255, 0.7);
    font: 700 0.8rem/1 Roboto, Arial, sans-serif;
    text-align: right;
}

.pir-ranking-pct.is-zero {
    color: rgba(255, 255, 255, 0.25);
}

.pir-ranking-row.pir-ranking-user .pir-ranking-label,
.pir-ranking-row.pir-ranking-user .pir-ranking-pct {
    color: var(--poke-yellow);
}

.pir-ranking-row.pir-ranking-user .pir-ranking-bar {
    background: var(--poke-yellow);
    box-shadow: 0 0 10px rgba(255, 203, 5, 0.5);
}

/* ============================================================
   ESCALA MAYOR / MENOR
   Escritorio: barras a los lados. Móvil: flechas de fondo junto a las
   tres filas de arriba (la de cuatro ocupa todo el ancho).
   ============================================================ */
.pir-scale-bar {
    flex: 0 0 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-5);
}

.pir-scale-label {
    writing-mode: vertical-rl;
    flex-shrink: 0;
    font: 0.46rem/1 'Press Start 2P', cursive;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pir-scale-high {
    transform: rotate(180deg);
    margin-bottom: var(--space-3);
    color: var(--poke-red);
}

.pir-scale-low {
    margin-top: var(--space-3);
    color: var(--poke-navy);
}

.pir-scale-gradient {
    position: relative;
    flex: 1;
    width: 6px;
    min-height: 24px;
    border-radius: var(--radius-pill);
    background: linear-gradient(to bottom, var(--poke-red) 0%, var(--poke-gold-deep) 45%, var(--poke-navy) 100%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.pir-scale-gradient::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 9px solid var(--poke-red);
}

.pir-mobile-arrow {
    display: none;
}

/* ============================================================
   TUTORIAL — caja compartida de common.css ("RECETA COMPARTIDA",
   piezas A/B/C); aquí solo las dimensiones y las mini-demos.
   ============================================================ */
#tutorialModal {
    padding: 12px;
    background: rgba(3, 12, 27, 0.84);
    backdrop-filter: blur(7px);
}

#tutorialModal .pir-tutorial-content {
    width: min(760px, 100%);
    max-width: 760px;
    max-height: calc(100dvh - 24px);
    padding: 22px 24px 21px;
    overflow: hidden auto;
}

/* Sin la franja roja ni la mini Poké Ball del tema blanco por defecto. */
#tutorialModal .pir-tutorial-content::before,
#tutorialModal .pir-tutorial-content::after {
    display: none;
}

.pir-tutorial-heading {
    text-align: center;
}

.pir-tutorial-kicker {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    overflow: hidden;
    border: 2px solid var(--poke-navy);
    border-radius: var(--radius-pill);
    background: var(--poke-yellow);
    color: var(--poke-navy);
    font: 0.49rem/1 'Press Start 2P', cursive;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pir-tutorial-kicker > span {
    color: var(--poke-red);
    font-size: 0.72rem;
}

#tutorialModal .pir-tutorial-heading .tutorial-title {
    margin: 8px 0 7px;
    padding: 0;
    border: 0;
    color: var(--poke-navy);
    font: 0.96rem/1.3 'Press Start 2P', cursive;
    text-shadow: 2px 2px 0 var(--poke-yellow);
}

#tutorialModal .pir-tutorial-heading .tutorial-title::before {
    display: none;
}

#tutorialModal .pir-tutorial-lead {
    width: min(620px, 100%);
    margin: 0 auto 12px !important;
    color: #284969 !important;
    font: 500 0.82rem/1.4 Roboto, Arial, sans-serif;
}

.pir-tutorial-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pir-tutorial-step-card {
    position: relative;
    min-width: 0;
    padding: 10px 9px 11px;
    display: grid;
    grid-template-rows: var(--tutorial-demo-height, 70px) min-content 1fr;
    justify-items: center;
    gap: 6px;
    overflow: hidden;
    border: 2px solid var(--poke-navy);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 3px 3px 0 rgba(18, 53, 91, 0.23);
    text-align: center;
}

.pir-tutorial-step-card::before {
    content: attr(data-step);
    position: absolute;
    z-index: 4;
    top: 5px;
    left: 5px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 2px solid var(--poke-yellow);
    border-radius: 50%;
    background: var(--poke-navy);
    color: #ffffff;
    font: 0.4rem/1 'Press Start 2P', cursive;
    box-shadow: 1px 1px 0 #111;
}

.pir-tutorial-step-card > h3 {
    margin: 0;
    color: var(--poke-navy);
    font: 0.55rem/1.35 'Press Start 2P', cursive;
    text-shadow: 1px 1px 0 var(--poke-yellow);
}

.pir-tutorial-step-card > p {
    margin: 0 !important;
    color: #334e68 !important;
    font: 500 0.71rem/1.28 Roboto, Arial, sans-serif;
}

.pir-step-demo {
    width: 100%;
}

/* 01 · La temática aparece en la pantalla de la Pokédex. */
.pir-tut-category {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 92%;
    padding: 6px 10px 6px 6px;
    border: 2px solid #1a1a1a;
    border-radius: 7px;
    background: linear-gradient(180deg, #17375c, var(--poke-navy-dark));
    box-shadow: 2px 2px 0 rgba(18, 53, 91, 0.3);
}

.pir-tut-category-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid #1a1a1a;
    border-radius: 5px;
    background: var(--poke-yellow);
    color: var(--poke-navy);
}

.pir-tut-category-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pir-tut-category b {
    min-width: 0;
    overflow: hidden;
    color: #ffffff;
    font: 0.5rem/1.3 'Press Start 2P', cursive;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* 02 · Una carta gira y descubre al Pokémon. */
.pir-tut-reveal {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    perspective: 300px;
}

.pir-tut-reveal i {
    position: relative;
    width: 32px;
    height: 44px;
    border: 2px solid #1a1a1a;
    border-radius: 5px;
    background: radial-gradient(circle at 50% 45%, #3d7dca 0%, var(--poke-navy) 70%);
    box-shadow: inset 0 0 0 1px rgba(255, 203, 5, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Mini Poké Ball del dorso. */
.pir-tut-reveal i::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #1a1a1a;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--poke-red) 0 44%, #1a1a1a 44% 56%, #ffffff 56% 100%);
    transform: translate(-50%, -50%);
}

.pir-tut-reveal .is-revealed {
    border-color: var(--poke-navy);
    background: var(--pir-card-face);
    animation: pir-tut-flip 2.8s ease-in-out infinite;
}

.pir-tut-reveal .is-revealed::after {
    display: none;
}

/* Silueta del Pokémon revelado. */
.pir-tut-reveal .is-revealed span {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--poke-navy);
    box-shadow: 0 13px 0 3px var(--poke-navy);
    transform: translateX(-50%);
}

@keyframes pir-tut-flip {
    0%, 18%, 82%, 100% { transform: rotateY(0); }
    45%, 55% { transform: rotateY(180deg); }
}

/* 03 · Dos posiciones de la pirámide se intercambian. */
.pir-tut-swap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 30px);
    align-items: end;
    gap: 6px;
    height: 49px;
}

.pir-tut-swap i {
    height: 20px;
    border: 2px solid var(--poke-navy);
    border-radius: 5px;
    background: #ffffff;
}

.pir-tut-swap i:nth-child(2) { transform: translateY(-12px); }
.pir-tut-swap .is-first { border-color: var(--poke-red); background: color-mix(in srgb, var(--poke-red) 25%, white); }
.pir-tut-swap .is-second { border-color: var(--poke-gold-deep); background: var(--poke-yellow); }

.pir-tut-swap span {
    position: absolute;
    right: 4px;
    bottom: 20px;
    color: var(--poke-navy);
    font-size: 1.2rem;
    font-weight: 900;
    animation: pir-tut-swap 1.8s ease-in-out infinite;
}

@keyframes pir-tut-swap {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-66px); }
}

/* 04 · La pirámide queda validada de arriba abajo. */
.pir-tut-check {
    position: relative;
    display: grid;
    width: 115px;
    justify-items: center;
    gap: 4px;
}

.pir-tut-check i {
    height: 8px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--state-correct), color-mix(in srgb, var(--state-correct) 52%, white));
    box-shadow: 0 0 7px color-mix(in srgb, var(--state-correct) 28%, transparent);
}

.pir-tut-check i:nth-child(1) { width: 35px; }
.pir-tut-check i:nth-child(2) { width: 70px; }
.pir-tut-check i:nth-child(3) { width: 105px; }

.pir-tut-check span {
    position: absolute;
    right: -4px;
    top: 5px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: var(--state-correct);
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--state-correct) 16%, transparent);
}

/* Botón "Jugar" del tutorial: el rojo/navy propio de los tutoriales. */
#tutorialModal .pir-tutorial-content .btn-play {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 10px 0 0;
    padding: 11px 24px;
    border: 3px solid var(--poke-navy);
    border-radius: 8px;
    background: var(--poke-red);
    color: #ffffff;
    box-shadow: 0 5px 0 var(--poke-navy), 2px 7px 0 var(--poke-yellow);
    font: 0.7rem/1.2 'Press Start 2P', cursive;
}

#tutorialModal .pir-tutorial-content .btn-play:hover,
#tutorialModal .pir-tutorial-content .btn-play:focus-visible {
    transform: translate(-1px, -1px);
    background: #bd1010;
    color: #ffffff;
}

/* common.css fuerza width:70px en los pasos de "cómo jugar" en móvil. */
.info-game .static-step .anim-box {
    width: 100% !important;
    height: auto !important;
}

/* ============================================================
   MÓVIL (≤600px) — breakpoint único del sitio
   ============================================================ */
@media (max-width: 600px) {
    .container-character.container-pir {
        padding: 0 3px;
    }

    .pir-game-container.game-container {
        padding: 14px 8px 20px;
    }

    .pir-instruction {
        gap: var(--space-1) var(--space-3);
        margin-bottom: var(--space-4);
        padding: 8px 24px 8px 8px;
    }

    .pir-instruction::after {
        top: 7px;
        right: 7px;
        width: 7px;
        height: 7px;
    }

    .pir-theme-icon {
        width: 36px;
        height: 36px;
    }

    .pir-theme-svg {
        width: 21px;
        height: 21px;
    }

    .pir-category-label {
        font-size: 0.42rem;
    }

    .pir-instruction-sub {
        grid-column: 1 / -1;
        font-size: 0.68rem;
    }

    .pir-pyramid-wrap {
        --pir-gap: 4px;
        --card-h: clamp(84px, calc((100vh - 300px) / 4), 112px);
        display: block;
    }

    .pir-scale-bar {
        display: none;
    }

    .pir-pyramid {
        max-width: none;
        margin-bottom: var(--space-4);
    }

    .pir-card {
        border-radius: 6px;
    }

    .pir-card-img {
        padding: 13px 2px 1px;
    }

    .pir-card-overlay {
        padding: 2px 2px 3px;
    }

    .pir-card-back {
        gap: var(--space-2);
        padding: 12px 2px 4px;
    }

    .pir-card-pos {
        top: 2px;
        left: 2px;
        min-width: 14px;
        padding: 2px 2px 1px;
        font-size: 0.4rem;
    }

    .pir-card-status {
        width: 22px;
        height: 22px;
        padding: 2px 3px 0 0;
        font-size: 0.6rem;
    }

    .pir-card-evo {
        padding: 1px 3px;
        font-size: 0.36rem;
    }

    .pir-card-evo img,
    .pir-card-evo .pir-card-evo-img {
        width: 13px;
        height: 13px;
    }

    /* Flechas de fondo a los lados de las filas 1-3 (la 4.ª llena el ancho). */
    .pir-mobile-arrow {
        position: absolute;
        top: 0;
        z-index: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20px;
        height: calc(3 * var(--card-h) + 2 * var(--pir-gap));
        opacity: 0.32;
        pointer-events: none;
    }

    .pir-mobile-arrow--left  { left: 2px; }
    .pir-mobile-arrow--right { right: 2px; }

    .pir-mobile-arrow-label {
        flex-shrink: 0;
        margin: 6px 0;
        color: var(--poke-navy);
        font: 0.36rem/1 'Press Start 2P', cursive;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
        writing-mode: vertical-rl;
    }

    .pir-mobile-arrow-high {
        transform: rotate(180deg);
        color: var(--poke-red);
    }

    .pir-mobile-arrow-shaft {
        position: relative;
        flex: 1;
        width: 6px;
        margin: 9px 0;
        border-radius: 2px;
        background: linear-gradient(to bottom, var(--poke-red), var(--poke-navy));
    }

    .pir-mobile-arrow-shaft::before,
    .pir-mobile-arrow-shaft::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
    }

    .pir-mobile-arrow-shaft::before {
        top: -9px;
        border-bottom: 10px solid var(--poke-red);
    }

    .pir-mobile-arrow-shaft::after {
        bottom: -9px;
        border-top: 10px solid var(--poke-navy);
    }

    .pir-submit-btn {
        padding: 12px 28px;
        font-size: 0.62rem;
    }

    .pir-ranking {
        padding: 12px 10px 14px;
    }

    .pir-ranking-label {
        width: 34px;
        font-size: 0.42rem;
    }

    /* Tutorial: mismos valores que silueta/higher-lower. */
    #tutorialModal { padding: 7px; }
    .pir-tutorial-kicker { padding: 4px 8px; font-size: 0.4rem; }
    #tutorialModal .pir-tutorial-heading .tutorial-title { margin: 6px 0 5px; font-size: 0.68rem; }
    #tutorialModal .pir-tutorial-lead { margin-bottom: 9px !important; font-size: 0.68rem; line-height: 1.27; }
    .pir-tutorial-steps { gap: 7px; }
    .pir-tutorial-step-card { --tutorial-demo-height: 57px; padding: 7px 5px 8px; gap: 4px; }
    .pir-tutorial-step-card::before { top: 3px; left: 3px; width: 20px; height: 20px; font-size: 0.32rem; }
    .pir-tutorial-step-card > h3 { font-size: 0.43rem; line-height: 1.3; }
    .pir-tutorial-step-card > p { font-size: 0.6rem; line-height: 1.17; }
    .pir-tut-category, .pir-tut-reveal, .pir-tut-swap, .pir-tut-check { transform: scale(0.84); }
    #tutorialModal .pir-tutorial-content .btn-play { margin-top: 7px; padding: 8px 15px; font-size: 0.53rem; }
}

/* Pantallas bajas: el tutorial cabe sin scroll (como OP). */
@media (max-height: 680px) and (max-width: 600px) {
    #tutorialModal .pir-tutorial-content { padding: 9px 8px 10px; }
    .pir-tutorial-kicker { display: none; }
    #tutorialModal .pir-tutorial-heading .tutorial-title { margin-top: 0; font-size: 0.62rem; }
    #tutorialModal .pir-tutorial-lead { display: none; }
    .pir-tutorial-steps { gap: 6px; }
    .pir-tutorial-step-card { --tutorial-demo-height: 48px; padding: 5px 4px 6px; gap: 3px; }
    .pir-tutorial-step-card > h3 { font-size: 0.39rem; }
    .pir-tutorial-step-card > p { font-size: 0.55rem; line-height: 1.12; }
    .pir-tut-category, .pir-tut-reveal, .pir-tut-swap, .pir-tut-check { transform: scale(0.72); }
    #tutorialModal .pir-tutorial-content .btn-play { margin-top: 5px; padding: 6px 12px; font-size: 0.47rem; }
}

/* ============================================================
   CJK: Press Start 2P no tiene esos glifos (mismo criterio que
   higher-lower.css).
   ============================================================ */
html:lang(ja) :is(.pir-category-label, .pir-attr-name, .pir-submit-btn, .pir-scale-label, .pir-mobile-arrow-label,
    .pir-ranking-title, .pir-tutorial-kicker, .pir-tutorial-step-card > h3, .pir-tut-category b, .pir-card-value, .pir-card-evo),
html:lang(ko) :is(.pir-category-label, .pir-attr-name, .pir-submit-btn, .pir-scale-label, .pir-mobile-arrow-label,
    .pir-ranking-title, .pir-tutorial-kicker, .pir-tutorial-step-card > h3, .pir-tut-category b, .pir-card-value, .pir-card-evo),
html:lang(zh-Hans) :is(.pir-category-label, .pir-attr-name, .pir-submit-btn, .pir-scale-label, .pir-mobile-arrow-label,
    .pir-ranking-title, .pir-tutorial-kicker, .pir-tutorial-step-card > h3, .pir-tut-category b, .pir-card-value, .pir-card-evo),
html:lang(zh-Hant) :is(.pir-category-label, .pir-attr-name, .pir-submit-btn, .pir-scale-label, .pir-mobile-arrow-label,
    .pir-ranking-title, .pir-tutorial-kicker, .pir-tutorial-step-card > h3, .pir-tut-category b, .pir-card-value, .pir-card-evo),
html:lang(ja) #tutorialModal .pir-tutorial-content :is(.tutorial-title, .btn-play),
html:lang(ko) #tutorialModal .pir-tutorial-content :is(.tutorial-title, .btn-play),
html:lang(zh-Hans) #tutorialModal .pir-tutorial-content :is(.tutorial-title, .btn-play),
html:lang(zh-Hant) #tutorialModal .pir-tutorial-content :is(.tutorial-title, .btn-play) {
    font-family: Roboto, Arial, sans-serif;
    font-weight: 900;
    letter-spacing: 0.04em;
}

/* ============================================================
   "Reducir animaciones" (Ajustes) — único interruptor.
   ============================================================ */
html.tutorial-motion-reduce .pir-card,
html.tutorial-motion-reduce .pir-card.pir-revealing,
html.tutorial-motion-reduce .pir-card.pir-idle-hint,
html.tutorial-motion-reduce .pir-card.correct,
html.tutorial-motion-reduce .pir-card.wrong,
html.tutorial-motion-reduce .pir-loading-ball,
html.tutorial-motion-reduce .pir-tut-reveal .is-revealed,
html.tutorial-motion-reduce .pir-tut-swap span {
    animation: none;
    transition: none;
}

html.tutorial-motion-reduce .pir-ranking-bar {
    transition: none;
}

/* La demo de intercambio (clones animados) no se muestra. */
html.tutorial-motion-reduce .pir-demo-clone {
    display: none !important;
}