:root {
    --receta-masa: "cm/DsWVzYWxsaVYgb2RyYXVkRSBlZCBzZSBvZ2V1aiBldHNF";
    --bg-color: #fdf6ec;
    --panel-bg: #fff8f0;
    --accent-color: #d97706;
    --accent-hover: #b45309;
    --text-color: #451a03;
    --border-color: #fde68a;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    user-select: none;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Layout Principal */
.game-container {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Sección Izquierda: Clicker & Entorno Urbano Dinámico */
.clicker-section {
    width: 880px;
    min-width: 380px;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0 20px;
    border-right: 3px solid var(--border-color);
    position: relative;
    overflow: hidden;
    background-color: #030712; /* Base oscura */
}

/* Sección Central: Producción de Edificios (Estilo Cookie Clicker) */
.buildings-display-section {
    flex: 1;
    min-width: 260px;
    background-color: #faf5ee;
    display: flex;
    flex-direction: column;
    border-right: 3px solid var(--border-color);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.04);
    z-index: 15;
    overflow: hidden;
}

/* Escritorio: Producción Activa mide justo lo que ocupa una fila llena
   (11 unidades: 3 Nv.1 + 2 de cada nivel del 2 al 5, ~906 px + relleno y barra
   de desplazamiento) y la concha se queda con el resto del ancho. Hasta que
   Producción Activa llega a ese tope, todo funciona como antes (concha de 880 px). */
@media (min-width: 821px) {
    .clicker-section {
        width: auto;
        flex: 1 1 880px;
    }

    .buildings-display-section {
        flex: 100 1 0;
        max-width: 960px;
    }
}

.buildings-display-header {
    padding: 20px;
    background-color: #b45309;
    color: white;
    font-size: 1.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
    letter-spacing: 0.5px;
}

.buildings-display-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.empty-production-msg {
    text-align: center;
    color: #92400e;
    background: rgba(254, 243, 199, 0.65);
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    padding: 35px 24px;
    margin-top: 30px;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 600;
}

.building-display-row {
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 14px;
    padding: 12px 16px;
    display: none; /* Se activa dinámicamente cuando count > 0 */
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.building-display-row:hover {
    border-color: var(--accent-color);
}

.b-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #fef3c7;
    padding-bottom: 6px;
    gap: 8px;
    flex-wrap: wrap;
}

/* Nombre en una sola línea; debajo la producción y, al máximo, la maestría */
.b-row-title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--text-color);
}

.b-row-name {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b-row-mastery {
    max-width: 100%;
    font-size: 0.74rem;
    line-height: 1.35;
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid #f59e0b;
    background: linear-gradient(135deg, #fef08a 0%, #fbbf24 100%);
    color: #78350f;
}

.b-row-mastery[hidden] {
    display: none;
}

/* Producción y Maestría juntas; en celular van en una sola línea debajo del ícono y del nombre */
.b-row-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}

@media (max-width: 820px), (pointer: coarse) {
    /* Tarjeta más baja: ícono a la izquierda del nombre y la descripción, y las etiquetas en una línea
       debajo de los tres, aprovechando el hueco bajo el ícono */
    .slot-row .b-row-header {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 2px;
    }

    .slot-row .b-row-icon {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .slot-row .b-row-title-group {
        display: contents;
    }

    .slot-row .b-row-name-line {
        grid-column: 2;
        grid-row: 1;
    }

    .slot-row .b-row-desc {
        grid-column: 2;
        grid-row: 2;
    }

    .slot-row .b-row-badges {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 4px;
    }

    .slot-row .b-row-badges .b-row-count-badge {
        white-space: nowrap;
    }

    .b-row-mastery-long {
        display: none;
    }
}

.b-row-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.b-row-count-badge {
    max-width: 100%;
    font-size: 0.8rem;
    background: #fef3c7;
    color: #9a3412;
    padding: 3px 9px;
    border-radius: 12px;
    font-weight: 800;
    border: 1px solid #fde68a;
    white-space: nowrap;
}

.fuse-building-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 800;
    border: 1.5px solid #d97706;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    cursor: pointer;
    transition: all 0.16s ease;
    box-shadow: 0 2px 5px rgba(217, 119, 6, 0.2);
    user-select: none;
    white-space: nowrap;
}

.fuse-building-btn:hover:not(.disabled) {
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(217, 119, 6, 0.3);
}

.fuse-building-btn:active:not(.disabled) {
    transform: translateY(0);
}

.fuse-building-btn.disabled {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.85;
}

.fuse-building-btn .mini-concha-icon {
    width: 15px;
    height: 15px;
}

.b-units-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    min-height: 52px;
    padding: 6px 0 2px 0;
}

.building-unit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, border-color 0.2s ease;
}

.building-unit-item.pop-in {
    animation: popInSquare 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.building-unit-item {
    cursor: pointer;
}

.building-unit-item:hover {
    transform: translateY(-2px) scale(1.05);
    border-color: var(--accent-color);
}

.unit-level-badge {
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 9999px;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: #92400e;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    user-select: none;
}

.building-unit-item.level-1 .unit-level-badge { background: #78716c; }
.building-unit-item.level-2 .unit-level-badge { background: #2563eb; }
.building-unit-item.level-2 { background: #eff6ff; border-color: #bfdbfe; }
.building-unit-item.level-3 .unit-level-badge { background: #7c3aed; }
.building-unit-item.level-3 { background: #f5f3ff; border-color: #ddd6fe; }
.building-unit-item.level-4 .unit-level-badge { background: #d97706; }
.building-unit-item.level-4 { background: #fffbeb; border-color: #fcd34d; }
.building-unit-item.level-5 .unit-level-badge { background: linear-gradient(135deg, #e11d48, #f59e0b); }
.building-unit-item.level-5 { background: #fff1f2; border-color: #fda4af; box-shadow: 0 0 8px rgba(244, 63, 94, 0.22); }

/* Aura Dorada al alcanzar los 3 edificios de Nivel 5 de un tipo (solo en el exterior del div, sin iluminar el interior) */
.building-unit-item.max-golden-aura {
    position: relative;
    border: 2px solid #f59e0b;
    box-shadow: 0 0 8px 2px rgba(250, 204, 21, 0.9), 0 0 18px 5px rgba(245, 158, 11, 0.55);
    animation: goldenAuraPulse 2s ease-in-out infinite;
    z-index: 2;
}

.building-unit-item.max-golden-aura .unit-level-badge {
    background: linear-gradient(135deg, #92400e 0%, #d97706 45%, #f59e0b 100%);
    color: #fffbeb;
    border: 1px solid #fef08a;
}

.building-display-row.maxed-row-aura {
    border-color: #f59e0b;
    box-shadow: 0 0 12px 2px rgba(245, 158, 11, 0.3);
}

.b-row-count-badge.max-bonus-active {
    background: linear-gradient(135deg, #fef08a 0%, #fbbf24 100%);
    color: #78350f;
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

@keyframes goldenAuraPulse {
    0%, 100% {
        box-shadow: 0 0 7px 2px rgba(250, 204, 21, 0.85), 0 0 15px 4px rgba(245, 158, 11, 0.5);
    }
    50% {
        box-shadow: 0 0 12px 3px rgba(250, 204, 21, 1), 0 0 24px 7px rgba(245, 158, 11, 0.8);
    }
}

.black-square {
    width: 15px;
    height: 15px;
    background-color: #18181b;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    transition: transform 0.15s ease, background-color 0.2s ease;
}

.black-square:hover {
    transform: scale(1.35);
    background-color: #3f3f46;
}

@keyframes popInSquare {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Contenedor del Cielo Dinámico */
.sky-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

/* Capas de Fondo del Cielo con Crossfade Fluido Continuo */
.sky-gradient-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}

.sky-layer-sunrise {
    background: linear-gradient(to bottom, #312e81 0%, #831843 35%, #c026d3 65%, #fdba74 100%);
}

.sky-layer-day {
    background: linear-gradient(to bottom, #38bdf8 0%, #7dd3fc 45%, #bae6fd 100%);
}

.sky-layer-sunset {
    background: linear-gradient(to bottom, #1e1b4b 0%, #7c2d12 35%, #f97316 75%, #fef08a 100%);
}

.sky-layer-night {
    background: linear-gradient(to bottom, #030712 0%, #0b132b 50%, #1e1b4b 100%);
}

/* Cuerpos Celestes (Sol y Luna) */
.celestial-body {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    top: 15%;
    left: 0; /* Controlado con JS mediante transform3d: el recorrido entra y sale por fuera de los bordes */
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
    z-index: 2;
}

.sun {
    background: radial-gradient(circle, #fef08a 30%, #facc15 70%, #eab308 100%);
    box-shadow: 0 0 40px #fde047, 0 0 80px rgba(250, 204, 21, 0.6);
}

.moon {
    background: radial-gradient(circle, #f1f5f9 40%, #cbd5e1 80%, #94a3b8 100%);
    box-shadow: 0 0 25px rgba(241, 245, 249, 0.8), 0 0 50px rgba(148, 163, 184, 0.4);
}

/* Estrellas durante la Noche */
.stars-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    opacity: 0;
    transition: opacity 1.5s ease;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 80px 120px, #e2e8f0, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 150px 50px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 240px 90px, #f8fafc, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 320px 150px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 400px 40px, #e2e8f0, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 500px 110px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 620px 70px, #f8fafc, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 730px 130px, #ffffff, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 800px 200px;
}

/* Nubes Animadas */
.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    transition: background-color 1.5s ease, filter 1.5s ease;
    will-change: transform;
    pointer-events: none;
}

.cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.cloud-1 {
    width: 140px;
    height: 45px;
    top: 10%;
}
.cloud-1::before { width: 50px; height: 50px; top: -20px; left: 20px; }
.cloud-1::after { width: 40px; height: 40px; top: -15px; right: 25px; }

.cloud-2 {
    width: 180px;
    height: 55px;
    top: 22%;
    opacity: 0.75;
}
.cloud-2::before { width: 65px; height: 65px; top: -28px; left: 30px; }
.cloud-2::after { width: 50px; height: 50px; top: -20px; right: 35px; }

.cloud-3 {
    width: 110px;
    height: 35px;
    top: 32%;
    opacity: 0.6;
}
.cloud-3::before { width: 40px; height: 40px; top: -16px; left: 15px; }
.cloud-3::after { width: 30px; height: 30px; top: -12px; right: 20px; }

/* Mantenimiento nocturno de nubes */
.night-mode .cloud {
    background: rgba(100, 116, 139, 0.65);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

/* Capas de Fondo de la Ciudad */
.city-background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Escena del fondo (una por acto). La nueva entra con un fundido de opacidad y la anterior se
   elimina al terminar: nunca quedan escenas ocultas ocupando memoria de la GPU en Android. */
.scene-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: opacity 1.5s ease;
}

.scene-layer.scene-entering {
    opacity: 0;
}

/* Detalles por edificio dentro de la escena (data-min-level): aparecen con un fundido */
.scene-detail {
    transition: opacity 1.2s ease;
}

.scene-detail.detail-hidden {
    opacity: 0;
}

/* Humo y vapor: solo se mueven en escritorio (en móvil se apaga en el bloque de rendimiento) */
.scene-smoke {
    transform-box: fill-box;
    transform-origin: center;
    animation: sceneSmokeDrift 7s ease-in-out infinite;
}

@keyframes sceneSmokeDrift {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-10px); opacity: 0.75; }
}

/* Acto II: la luz de la ciudad se vuelve naranja por los hornos y el esmog */
#clicker-section[data-act="2"] .city-glow {
    background: radial-gradient(ellipse at bottom, rgba(234, 88, 12, 0.2) 0%, transparent 70%);
}

/* Acto III: luz verdosa del volcán, los laboratorios y las Clonchas */
#clicker-section[data-act="3"] .city-glow {
    background: radial-gradient(ellipse at bottom, rgba(132, 204, 22, 0.18) 0%, transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
    .scene-layer,
    .scene-detail {
        transition: none;
    }

    .scene-smoke {
        animation: none;
    }
}

/* Vector SVG de la Ciudad */
.city-svg {
    width: 100%;
    height: 65%;
    object-fit: cover;
    object-position: bottom;
    transition: filter 1.5s ease;
}

/* Actos II y III: la calle es una ilustración de día; de noche la oscurece este velo. Usa --window-opacity
   (0.15 de día a 0.95 de noche, cuantizada en environment.js), así que cambia tan poco como antes las ventanas */
.scene-night-tint {
    opacity: calc((var(--window-opacity, 0.15) - 0.15) * 0.7);
    pointer-events: none;
}

/* Acto IV: el cielo (galaxia y Doña Conchita) va en un SVG encimado detrás de la ciudad, con el
   Horno Solar Dyson entre los dos */
.city-svg.scene-svg-back {
    position: absolute;
    left: 0;
    bottom: 0;
}

.city-svg.scene-svg-front {
    position: relative;
}

/* El Sol encerrado cruza el cielo en lugar del sol (updateEnvironment lo mueve con transform y opacity);
   resplandor fijo, sin animar (Android) */
.scene-dyson {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: url('../img/escenas/ciudad/horno_dyson.webp') center / contain no-repeat;
    box-shadow: 0 0 45px rgba(249, 115, 22, 0.55), 0 0 90px rgba(234, 88, 12, 0.3);
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 820px) {
    .scene-dyson {
        width: 76px;
        height: 76px;
    }
}

/* Al terminar la ascensión el Ente se lleva la concha (playEnteTakesConcha en game.js): velo negro sobre
   toda la sección (encima del marcador, los botones y la consola) y solo la concha y su mano a la vista */
.ente-cinematic {
    position: absolute;
    inset: 0;
    z-index: 1600;
    overflow: hidden;
    pointer-events: auto;
}

.ente-void,
.ente-grab {
    position: absolute;
    inset: 0;
}

.ente-void {
    background: #000;
    opacity: 0;
}

.ente-concha,
.ente-hand {
    position: absolute;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.ente-hand-pivot {
    position: absolute;
    width: 0;
    height: 0;
    /* 75°: la mano llega de lado y pellizca la orilla con pulgar (arriba) e índice (abajo);
       los demás dedos quedan arriba, fuera de la concha */
    transform: rotate(75deg);
}

.ente-hand {
    opacity: 0;
}

/* Fin del juego (#end-of-realities, showEndOfRealities en game.js): negro y vacío encima de todo */
.end-of-realities {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    opacity: 0;
    transition: opacity 1.6s ease-in;
}

.end-of-realities[hidden] {
    display: none;
}

.end-of-realities.visible {
    opacity: 1;
}

.end-of-realities-box {
    max-width: 440px;
    text-align: center;
    color: #d6d3e0;
}

.end-of-realities-title {
    margin: 0 0 18px;
    font-size: 1.6rem;
    color: #fff;
}

.end-of-realities-text {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.5;
}

.end-of-realities-btn {
    margin-top: 22px;
    padding: 12px 24px;
    border: 1px solid #6b5b95;
    border-radius: 10px;
    background: #1a1428;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.end-of-realities-btn:hover,
.end-of-realities-btn:focus-visible {
    background: #2a2040;
}

/* Escena que cubre toda la sección (la cocina del Acto I): el cielo solo se ve por su ventana */
.city-svg.scene-full {
    height: 100%;
}

/* Ciudad en pixel art (desde el Acto II): franja en la mitad de abajo, el resto es cielo */
.city-svg.city-strip {
    height: 55%;
}

/* Versión de noche de cada edificio, encima de la de día: aparece con --window-opacity
   (0.15 de día a 0.95 de noche, cuantizada en environment.js) */
.city-night {
    opacity: calc((var(--window-opacity, 0.15) - 0.15) / 0.8);
}

/* La nieve del Acto IV: de noche solo se oscurece a medias para que siga viéndose blanca bajo la luna */
/* Grietas del Horno de la Realidad (Acto V): en el cielo, detrás de las nubes, con la geometría de la franja de
   la ciudad; updateSkyCracks les pone .visible */
.sky-cracks {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 55%;
    overflow: visible;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

.sky-cracks.visible {
    opacity: 1;
}

.city-night.city-night-soft {
    opacity: calc((var(--window-opacity, 0.15) - 0.15) / 1.6);
}

.window-group {
    opacity: var(--window-opacity, 0.2);
}

/* Luz de Neón del Cielo Urbano */
.city-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: radial-gradient(ellipse at bottom, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 5;
}

/* ========================================================
   NOTICIERO PANADERO (TICKER) Y GLOBOS DE DIÁLOGO URBANOS
   ======================================================== */

.news-ticker-container {
    position: relative;
    z-index: 15;
    margin-top: 12px;
    margin-bottom: 6px;
    width: 560px;
    max-width: 92%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.city-news-ticker {
    position: relative;
    z-index: 10;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(245, 158, 11, 0.4);
    border-radius: 9999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    padding: 2px 6px;
    box-sizing: border-box;
    cursor: default;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.city-news-ticker:hover {
    border-color: rgba(245, 158, 11, 0.8);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
}

.news-ticker-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 9999px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    flex-shrink: 0;
}

.news-ticker-dot {
    width: 7px;
    height: 7px;
    background-color: #ffffff;
    border-radius: 50%;
    animation: newsDotPulse 1.2s infinite ease-in-out;
}

@keyframes newsDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
}

.news-ticker-viewport {
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
    mask-image: linear-gradient(to right, transparent 0%, black 14px, black calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14px, black calc(100% - 14px), transparent 100%);
}

.news-ticker-text {
    display: inline-block;
    color: #fef3c7;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    will-change: transform, opacity;
}

.news-ticker-text.flash-news {
    animation: newsTickerFlash 0.8s ease;
}

.news-ticker-text.marquee-scroll {
    animation: newsMarquee var(--marquee-duration, 10s) ease-in-out infinite;
}

/* Pausar scroll si el jugador posa el cursor sobre el noticiero para leer con calma */
.city-news-ticker:hover .news-ticker-text.marquee-scroll {
    animation-play-state: paused;
}

@keyframes newsTickerFlash {
    0% { opacity: 0; transform: translateY(6px); color: #fbbf24; }
    50% { opacity: 1; color: #ffffff; text-shadow: 0 0 10px rgba(251, 191, 36, 0.8); }
    100% { transform: translateY(0); color: #fef3c7; }
}

@keyframes newsMarquee {
    0%, 18% {
        transform: translateX(0);
        opacity: 1;
    }
    72%, 86% {
        transform: translateX(var(--marquee-dist, -120px));
        opacity: 1;
    }
    92% {
        transform: translateX(var(--marquee-dist, -120px));
        opacity: 0;
    }
    94% {
        transform: translateX(15px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Contenedor de Globos de Diálogo Flotantes de la Ciudad */
.city-dialogues-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 12;
    overflow: hidden;
}

/* Globo de Diálogo Base */
.city-speech-bubble {
    position: absolute;
    pointer-events: auto;
    max-width: 260px;
    padding: 10px 14px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    user-select: none;
    transform-origin: bottom center;
    animation: bubblePopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: transform 0.2s ease, opacity 0.35s ease;
}

.city-speech-bubble:hover {
    transform: scale(1.04);
}

.city-speech-bubble.dismissing {
    opacity: 0 !important;
    transform: scale(0.7) translateY(-10px) !important;
    pointer-events: none;
}

@keyframes bubblePopIn {
    0% {
        opacity: 0;
        transform: scale(0.4) translateY(18px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.bubble-author-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.bubble-text {
    font-size: 0.82rem;
    line-height: 1.35;
    word-break: break-word;
}

/* Estilo: Ciudadano / Adicto */
.bubble-citizen {
    background: rgba(255, 252, 245, 0.96);
    border: 2px solid #854d0e;
    color: #1f2937;
    backdrop-filter: blur(6px);
}

.bubble-citizen .bubble-author-row {
    color: #92400e;
}

.bubble-citizen::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: var(--tail-left, 30px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 8px 0 8px;
    border-color: #854d0e transparent transparent transparent;
}

/* Estilo: Culto a la Santa Costra */
.bubble-cult {
    background: linear-gradient(145deg, rgba(39, 13, 89, 0.96), rgba(67, 24, 133, 0.96));
    border: 2px solid #f59e0b;
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.5), 0 8px 24px rgba(0, 0, 0, 0.6);
    color: #f3e8ff;
    backdrop-filter: blur(6px);
    animation: bubblePopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, cultGlow 2.5s infinite ease-in-out;
}

.bubble-cult .bubble-author-row {
    color: #fde047;
    text-shadow: 0 0 8px rgba(253, 224, 71, 0.6);
}

.bubble-cult .bubble-text {
    font-style: italic;
}

.bubble-cult::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: var(--tail-left, 30px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 8px 0 8px;
    border-color: #f59e0b transparent transparent transparent;
}

@keyframes cultGlow {
    0%, 100% {
        box-shadow: 0 0 14px rgba(168, 85, 247, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6);
        border-color: #f59e0b;
    }
    50% {
        box-shadow: 0 0 24px rgba(217, 70, 239, 0.7), 0 8px 28px rgba(0, 0, 0, 0.7);
        border-color: #fde047;
    }
}

/* Estilo: Noticiero / Alerta Urbana */
.bubble-news {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
    border: 2px solid #ef4444;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6);
    color: #f8fafc;
    backdrop-filter: blur(6px);
}

.bubble-news .bubble-author-row {
    color: #fca5a5;
    letter-spacing: 0.8px;
}

.bubble-news::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: var(--tail-left, 30px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 8px 0 8px;
    border-color: #ef4444 transparent transparent transparent;
}

/* Cola superior cuando el globo aparece en zona baja */
.city-speech-bubble.tail-top::after {
    bottom: auto;
    top: -9px;
    border-width: 0 8px 9px 8px;
}
.bubble-citizen.tail-top::after {
    border-color: transparent transparent #854d0e transparent;
}
.bubble-cult.tail-top::after {
    border-color: transparent transparent #f59e0b transparent;
}
.bubble-news.tail-top::after {
    border-color: transparent transparent #ef4444 transparent;
}

@media (max-width: 600px) {
    .news-ticker-container {
        margin-top: 6px;
    }

    .city-news-ticker {
        height: 30px;
        margin-top: 0;
    }
    .news-ticker-badge {
        font-size: 0.65rem;
        padding: 2px 8px;
    }
    .news-ticker-text {
        font-size: 0.75rem;
    }
    .city-speech-bubble {
        max-width: 200px;
        padding: 8px 10px;
        font-size: 0.75rem;
    }
}

/* Panel de Estadísticas por encima del cielo */
.stats-panel {
    position: relative;
    text-align: center;
    margin-top: 56px;
    /* Por encima de la concha y su lienzo de manos (z-index 10), que vienen después en el DOM */
    z-index: 15;
    width: 560px;
    max-width: 92%;
    box-sizing: border-box;
    perspective: 1000px;
}

/* Tarjeta que se voltea: el frente marca el tamaño y la cara trasera (logro) se encima girada.
   Solo se anima transform; el frente no usa backdrop-filter para no romper el 3D en Android. */
.stats-flip-inner {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.stats-panel.show-achievement .stats-flip-inner {
    transform: rotateY(180deg);
}

.stats-face {
    background: rgba(255, 248, 240, 0.96);
    padding: 14px 28px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    border: 2px solid var(--border-color);
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.stats-face-front {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stats-face-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Mide al menos lo mismo que el frente; si el logro es largo, la tarjeta crece hacia abajo */
    min-height: 100%;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: left;
    padding: 10px 18px;
    background: linear-gradient(135deg, #fffdf5 0%, #fef3c7 100%);
    border-color: #d97706;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .stats-flip-inner {
        transition: none;
    }
}

.conchas-count {
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--accent-color);
    text-shadow: 1px 1px 0 #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.cps-count {
    font-size: 1.08rem;
    color: #78350f;
    margin-top: 3px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    /* En ventanas angostas de escritorio la nota de beneficios no cabe en una línea */
    text-wrap: balance;
}

.mastery-bonus-pill {
    display: none;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #fef08a 0%, #fbbf24 100%);
    border: 1.5px solid #d97706;
    color: #78350f;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.55);
}

.aura-detail-short,
.cps-short,
.stats-collapse-hint {
    display: none;
}

/* Botón de la Concha Principal */
.concha-wrapper {
    position: relative;
    z-index: 10;
    margin-bottom: auto;
    margin-top: auto;
}

.main-concha-btn {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 15px 35px rgba(69, 26, 3, 0.35));
}

.main-concha-btn:hover {
    transform: scale(1.03);
}

.main-concha-btn img {
    width: 290px;
    height: 290px;
    object-fit: contain;
    pointer-events: none;
}

.main-concha-btn:active {
    transform: scale(0.91) rotate(-1deg);
}

/* Indicador flotante al pasar el mouse sobre la concha */
.concha-hover-hint {
    position: absolute;
    bottom: -44px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: rgba(30, 41, 59, 0.92);
    color: #fef3c7;
    border: 1.5px solid #fbbf24;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 25;
}

.main-concha-btn:hover ~ .concha-hover-hint {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Ícono de edificio en el panel de producción activa (mismo tamaño 56x56 que en la tienda) */
.building-unit-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    user-select: none;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.building-unit-item .black-square {
    width: 56px;
    height: 56px;
    border-radius: 8px;
}

/* Canvas de Manos Amasadoras alrededor de la concha (alto rendimiento estilo Cookie Clicker) */
.hands-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    pointer-events: none;
    z-index: 12;
}

.shop-hand-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Sección Derecha: Tienda de Hornos */
.shop-section {
    width: 520px;
    min-width: 440px;
    flex-shrink: 0;
    background-color: var(--panel-bg);
    display: flex;
    flex-direction: column;
    border-left: 1px solid #f3f4f6;
    box-shadow: var(--shadow);
    z-index: 20;
}

.shop-header {
    padding: 20px;
    background-color: var(--accent-color);
    color: white;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: var(--shadow);
}

.buildings-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.building-card {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
    box-shadow: var(--shadow);
}

.building-card:hover:not(.disabled) {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

/* Edificios Ocultos con Silueta Negra y datos en '???' */
.building-card.building-hidden {
    opacity: 0.65;
    background-color: #f5f5f4;
    border-color: #d6d3d1;
    cursor: not-allowed;
    transition: opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.building-card.building-hidden:hover {
    border-color: #a8a29e;
    transform: none;
}

.building-card.building-hidden .building-icon-box {
    cursor: not-allowed;
}

.building-card.building-hidden .building-icon-box img,
.building-card.building-hidden .building-icon-box svg {
    filter: brightness(0) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
    opacity: 0.85;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.building-card.building-hidden .building-name {
    color: #78716c;
    font-style: italic;
    letter-spacing: 2px;
}

.building-card.building-hidden .building-desc {
    color: #a8a29e;
    font-style: italic;
    letter-spacing: 1px;
}

.building-card.building-hidden .building-stats {
    color: #a8a29e;
    font-style: italic;
    letter-spacing: 1px;
}

.building-card.building-hidden .building-cost span {
    color: #a8a29e;
    font-style: italic;
    letter-spacing: 1px;
}

.building-card.building-hidden .mini-concha-icon {
    filter: grayscale(1);
    opacity: 0.35;
}

.building-card.building-hidden .building-count {
    color: #a8a29e;
    font-style: italic;
    letter-spacing: 1px;
}

.building-card.building-hidden .building-bulk-tag {
    background: #e7e5e4;
    color: #78716c;
    border-color: #d6d3d1;
    font-style: italic;
    letter-spacing: 1px;
}

.building-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f3f4f6;
    border-color: #e5e7eb;
}

.building-icon-box {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.building-icon-box img,
.building-icon-box svg {
    max-width: 100%;
    max-height: 100%;
    width: 56px;
    height: 56px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.building-icon-box .black-square {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    animation: none;
}

.building-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.building-name {
    font-weight: bold;
    font-size: 1.05rem;
}

.building-desc {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
}

.building-stats {
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hands-multiplier-group {
    display: inline-flex;
    background: #fef3c7;
    border: 1.5px solid #fcd34d;
    border-radius: 9999px;
    padding: 2px;
    gap: 2px;
}

.hands-multiplier-group .buy-btn {
    padding: 2px 8px;
    font-size: 0.72rem;
}

/* Selector de Modo (Comprar/Vender) */
.buy-mode-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    background: #ffffff;
    border-bottom: 2px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    z-index: 5;
    gap: 8px;
}

.trade-mode-switch {
    display: inline-flex;
    background: #fef3c7;
    border: 1.5px solid #fde68a;
    border-radius: 9999px;
    padding: 2px 3px;
    gap: 2px;
}

.trade-mode-btn {
    background: transparent;
    border: none;
    outline: none;
    padding: 4px 11px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #92400e;
    cursor: pointer;
    transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.trade-mode-btn:hover:not(.active) {
    background: rgba(217, 119, 6, 0.16);
    color: #78350f;
}

.trade-mode-btn.active[data-mode="buy"] {
    background: var(--accent-color);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.35);
}

.trade-mode-btn.active[data-mode="autofuse"] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(217, 119, 6, 0.45);
}

.trade-mode-btn.active[data-mode="sell"] {
    background: #dc2626;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.35);
}

/* Selector de Lote para Edificios (1 a la vez vs Todo) */
.batch-mode-switch {
    display: inline-flex;
    background: #fef3c7;
    border: 1.5px solid #fde68a;
    border-radius: 9999px;
    padding: 2px 3px;
    gap: 2px;
}

.batch-mode-btn {
    background: transparent;
    border: none;
    outline: none;
    padding: 4px 11px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #92400e;
    cursor: pointer;
    transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.batch-mode-btn:hover:not(.active) {
    background: rgba(217, 119, 6, 0.16);
    color: #78350f;
}

.batch-mode-btn.active {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.4);
}

.shop-section.sell-mode .batch-mode-switch {
    display: none;
}

.buy-mode-group {
    display: inline-flex;
    background: #fef3c7;
    border: 1.5px solid #fde68a;
    border-radius: 9999px;
    padding: 2px 3px;
    gap: 3px;
}

.shop-section.sell-mode .buy-mode-group {
    background: #fee2e2;
    border-color: #fecaca;
}

.buy-btn {
    background: transparent;
    border: none;
    outline: none;
    padding: 4px 11px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #92400e;
    cursor: pointer;
    transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.shop-section.sell-mode .buy-btn {
    color: #991b1b;
}

.buy-btn:hover:not(.active) {
    background: rgba(217, 119, 6, 0.18);
    color: #78350f;
}

.shop-section.sell-mode .buy-btn:hover:not(.active) {
    background: rgba(220, 38, 38, 0.15);
    color: #7f1d1d;
}

.buy-btn.active {
    background: var(--accent-color);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.35);
    transform: scale(1.04);
}

.shop-section.sell-mode .buy-btn.active {
    background: #dc2626;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.35);
}

.shop-section.sell-mode .building-card:hover:not(.disabled) {
    border-color: #dc2626;
}

.shop-section.sell-mode .building-cost {
    color: #dc2626;
}

.shop-section.sell-mode .building-bulk-tag {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}

.shop-section.sell-mode .hands-multiplier-group,
.shop-section.autofuse-mode .hands-multiplier-group {
    display: none;
}

.shop-section.autofuse-mode .building-card:hover:not(.disabled) {
    border-color: #d97706;
}

.shop-section.autofuse-mode .building-cost {
    color: #b45309;
}

.shop-section.autofuse-mode .building-bulk-tag {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

/* Tarjeta con Fusión Lista en la Tienda */
.building-card.fusion-ready-card {
    border-color: #d97706;
    background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.22);
}

.building-card.fusion-ready-card:hover:not(.disabled) {
    border-color: #b45309;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.32);
}

.building-card.fusion-ready-card .building-cost {
    color: #b45309;
}

.building-card.fusion-ready-card .building-bulk-tag {
    color: #ffffff;
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    border-color: #92400e;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
    animation: fusionTagPulse 1.8s infinite ease-in-out;
}

@keyframes fusionTagPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Botón para colapsar o abrir la tarjeta (los edificios bloqueados no lo llevan) */
.building-collapse-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 10px;
    padding: 0;
    border: 1.5px solid #fcd34d;
    border-radius: 9999px;
    background: #fffbeb;
    color: #b45309;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.building-card.building-hidden .building-collapse-btn {
    display: none;
}

/* Colapsada: un solo renglón con ícono chico, nombre y precio o etiqueta */
.building-card.card-collapsed {
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

/* El ícono cambia de tamaño con transición; durante el encogimiento (card-collapsing) ya va chico */
.building-icon-box,
.building-icon-box img,
.building-icon-box svg,
.building-icon-box .black-square {
    transition: width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.building-card:is(.card-collapsed, .card-collapsing) .building-icon-box {
    width: 32px;
    height: 32px;
}

.building-card:is(.card-collapsed, .card-collapsing) .building-icon-box img,
.building-card:is(.card-collapsed, .card-collapsing) .building-icon-box svg,
.building-card:is(.card-collapsed, .card-collapsing) .building-icon-box .black-square {
    width: 30px;
    height: 30px;
}

.building-card.card-collapsed .building-name {
    font-size: 0.92rem;
}

.building-card.card-collapsed .building-desc,
.building-card.card-collapsed .building-stats,
.building-card.card-collapsed.maxed .building-cost,
.building-card.card-collapsed.building-hidden .building-cost {
    display: none;
}

/* La etiqueta trae display en línea desde updateShopUI */
.building-card.card-collapsed.building-hidden .building-bulk-tag {
    display: none !important;
}

.building-card.card-collapsed .building-bulk-tag {
    margin-top: 0;
}

/* Al máximo ya no se compra: tocar la tarjeta colapsada la abre */
.building-card.card-collapsed.maxed {
    cursor: pointer;
    opacity: 0.8;
}

.building-cost-container {
    text-align: right;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.building-cost {
    font-weight: bold;
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 0.95rem;
    white-space: nowrap;
}

.building-bulk-tag {
    font-size: 0.7rem;
    font-weight: 800;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 1px 5px;
    margin-top: 2px;
    letter-spacing: 0.04em;
    display: none;
    white-space: nowrap;
}

.mini-concha-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.building-count {
    font-size: 1.4rem;
    font-weight: 800;
    color: #9a3412;
    margin-left: 10px;
}

/* Texto flotante al hacer clic */
.click-text {
    position: absolute;
    color: #fbbf24;
    font-weight: 900;
    font-size: 1.8rem;
    pointer-events: none;
    z-index: 100;
    text-shadow: 2px 2px 0 #78350f, -1px -1px 0 #78350f;
    animation: floatUp 0.8s ease-out forwards;
}

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-60px) scale(0.9); }
}

/* Barra de Controles Superiores (Audio, Reiniciar) */
.top-bar-controls {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 50;
    display: flex;
    gap: 12px;
}

.top-btn {
    background: rgba(255, 248, 240, 0.92);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.35rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.top-btn:hover {
    transform: scale(1.1);
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.top-btn:active {
    transform: scale(0.92);
}

.top-btn.muted {
    opacity: 0.65;
    background: rgba(241, 245, 249, 0.9);
    border-color: #cbd5e1;
}

.top-btn.test-mode-btn {
    width: auto;
    border-radius: 9999px;
    padding: 0 16px;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #78350f;
}

.top-btn.test-mode-btn.active {
    background: #7c3aed;
    border-color: #c4b5fd;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.45), 0 6px 16px rgba(0, 0, 0, 0.25);
}

.top-btn.options-btn:hover {
    border-color: #f59e0b;
    background: #fffbeb;
    transform: scale(1.12) rotate(30deg);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
}

.top-btn.reset-btn:hover {
    border-color: #f87171;
    background: #fef2f2;
}

/* Modal de Confirmación de Reinicio */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    /* visibility evita que los modales cerrados sigan como capas de GPU a pantalla completa (crítico en Android) */
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.modal-box {
    background: var(--panel-bg);
    border: 3px solid var(--border-color);
    border-radius: 20px;
    padding: 28px 32px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-box {
    transform: scale(1);
}

.modal-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #991b1b;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modal-desc {
    font-size: 0.95rem;
    color: #78350f;
    line-height: 1.55;
    margin-bottom: 24px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn {
    padding: 10px 22px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.1s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.modal-btn:active {
    transform: translateY(1px);
}

.modal-btn-cancel {
    background: white;
    color: var(--text-color);
    border-color: var(--border-color);
}

.modal-btn-cancel:hover {
    background: #fef3c7;
}

.modal-btn-confirm {
    background: #dc2626;
    color: white;
}

.modal-btn-confirm:hover {
    background: #b91c1c;
}

/* Popup de Información Detallada de Edificio */
.building-detail-box {
    max-width: 480px;
    padding: 26px 28px;
    position: relative;
}

.detail-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: #ffffff;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.detail-close-btn:hover {
    background: #fef3c7;
    transform: scale(1.1);
}

.detail-image-showcase {
    width: 168px;
    height: 168px;
    margin: 0 auto 14px auto;
    background: radial-gradient(circle, #fffbeb 0%, #fef3c7 100%);
    border: 2.5px solid #fcd34d;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 10px rgba(217, 119, 6, 0.12), 0 8px 20px rgba(69, 26, 3, 0.12);
    position: relative;
}

.detail-image-showcase.max-golden-aura {
    border-color: #f59e0b;
    box-shadow: 0 0 10px 2px rgba(250, 204, 21, 0.9), 0 0 22px 6px rgba(245, 158, 11, 0.6);
    animation: goldenAuraPulse 2s ease-in-out infinite;
}

.detail-mastery-banner {
    display: none;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 800;
    border: 1.5px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.detail-mastery-banner.unlocked {
    background: linear-gradient(135deg, #fef9c3 0%, #fde047 100%);
    border-color: #f59e0b;
    color: #78350f;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
}

.detail-image-showcase img,
.detail-image-showcase svg {
    width: 136px;
    height: 136px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
    animation: popInSquare 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.detail-level-pill {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 900;
    color: #ffffff;
    background: #d97706;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
    border: 2px solid #ffffff;
}

.detail-building-title {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--text-color);
    margin-bottom: 6px;
}

.detail-building-desc {
    font-size: 0.92rem;
    font-style: italic;
    color: #78350f;
    background: #fffbeb;
    border: 1.5px dashed #fcd34d;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    line-height: 1.45;
}

.detail-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
    text-align: left;
}

.detail-stat-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

.detail-stat-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #92400e;
    margin-bottom: 3px;
}

.detail-stat-value {
    font-size: 1rem;
    font-weight: 900;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 5px;
}

.detail-levels-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 18px;
}

.detail-lvl-chip {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #fde68a;
    font-size: 0.72rem;
    font-weight: 800;
    color: #78350f;
}

.detail-lvl-chip strong {
    font-size: 0.9rem;
    color: #d97706;
}

.building-icon-box {
    cursor: zoom-in;
    border-radius: 10px;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.building-icon-box:hover {
    transform: scale(1.08);
    background-color: rgba(254, 243, 199, 0.7);
}

/* Partículas de Migajas de Pan */
.crumb-particle {
    position: absolute;
    pointer-events: none;
    z-index: 99;
    will-change: transform, opacity;
    animation: crumbFly 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes crumbFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    75% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.2) rotate(var(--rot));
    }
}

/* Notificación Flotante / Toast */
.game-toast {
    position: fixed;
    bottom: 25px;
    right: 25px;
    left: auto;
    background: rgba(30, 41, 59, 0.94);
    color: #f8fafc;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 10px;
}

.game-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================================
   CONCHA DORADA (EVENTO ALEATORIO)
   ======================================================== */
/* Mano Dorada (game.js, EVENTO 8): aparece y se va solo con opacidad (la duración la pone el JS) */
.golden-hand {
    position: absolute;
    z-index: 150;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: ease-in-out;
    filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.9));
}

.golden-hand.visible {
    opacity: 1;
}

.golden-hand.collected {
    transform: scale(1.25);
}

.golden-hand img,
.golden-hand-mini-icon {
    filter: brightness(1.2) sepia(0.9) hue-rotate(-12deg) saturate(3.6);
}

.golden-hand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.golden-concha {
    position: absolute;
    width: 96px;
    height: 96px;
    top: 0;
    left: 0;
    z-index: 150;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
    transition: opacity 0.4s ease;
    filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.95))
            drop-shadow(0 0 32px rgba(245, 158, 11, 0.7));
}

.golden-concha:hover {
    filter: drop-shadow(0 0 22px rgba(254, 240, 138, 1))
            drop-shadow(0 0 44px rgba(245, 158, 11, 0.95))
            brightness(1.15);
}

.golden-concha.spawning {
    opacity: 0;
    pointer-events: none;
}

.golden-concha.active {
    opacity: 1;
}

.golden-concha.despawning {
    opacity: 0;
    pointer-events: none;
}

.golden-concha img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: brightness(1.28) sepia(0.85) hue-rotate(-12deg) saturate(3.8);
    animation: goldenPulseAura 1.4s ease-in-out infinite alternate;
    transition: transform 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.golden-concha:active img {
    transform: scale(0.84) rotate(-5deg);
}

@keyframes goldenPulseAura {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.9))
                drop-shadow(0 0 28px rgba(245, 158, 11, 0.6));
    }
    100% {
        transform: scale(1.06);
        filter: drop-shadow(0 0 22px rgba(254, 240, 138, 1))
                drop-shadow(0 0 44px rgba(245, 158, 11, 0.85));
    }
}

/* Floating number para clics en Concha Dorada */
.click-text.golden {
    color: #fef08a;
    font-size: 2.1rem;
    z-index: 200;
    text-shadow: 0 0 14px rgba(251, 191, 36, 1),
                 0 0 24px rgba(245, 158, 11, 0.8),
                 2px 2px 0 #78350f,
                 -1px -1px 0 #78350f;
    animation: floatUpGolden 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes floatUpGolden {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1.15);
    }
    50% {
        transform: translateY(-40px) scale(1.35);
    }
    100% {
        opacity: 0;
        transform: translateY(-85px) scale(0.9);
    }
}

/* ========================================================
   CADENA DE CONCHAS (EVENTO ALEATORIO SECUENCIAL)
   ======================================================== */
.chain-concha {
    position: absolute;
    width: 84px;
    height: 84px;
    z-index: 155;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.95))
            drop-shadow(0 0 32px rgba(126, 34, 206, 0.8));
    animation: chainPopIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.chain-concha:hover {
    filter: drop-shadow(0 0 22px rgba(233, 213, 255, 1))
            drop-shadow(0 0 44px rgba(168, 85, 247, 1))
            brightness(1.18);
}

.chain-concha.hit {
    animation: chainHitPop 0.15s ease-out forwards;
    pointer-events: none;
}

.chain-concha.fail {
    animation: chainFailShake 0.22s ease-out forwards;
    pointer-events: none;
}

.chain-concha img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: brightness(1.18) sepia(0.38) hue-rotate(245deg) saturate(3.5);
    animation: purplePulseAura 0.7s ease-in-out infinite alternate;
    transition: transform 0.1s ease;
}

.chain-concha:active img {
    transform: scale(0.82) rotate(-6deg);
}

.chain-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #a855f7, #6b21a8);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
    border: 2px solid #f3e8ff;
    border-radius: 9999px;
    padding: 2px 7px;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.9);
    pointer-events: none;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.chain-timer-bar-wrap {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 5px;
    background: rgba(30, 27, 75, 0.8);
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid #c084fc;
    pointer-events: none;
}

.chain-timer-bar-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #c084fc, #e879f9);
    transform-origin: left center;
    animation: chainTimerDeplete 1.5s linear forwards;
}

@keyframes chainPopIn {
    0% {
        opacity: 0;
        transform: scale(0.25) rotate(-20deg);
    }
    70% {
        transform: scale(1.12) rotate(4deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes purplePulseAura {
    0% {
        transform: scale(1);
        filter: brightness(1.18) sepia(0.38) hue-rotate(245deg) saturate(3.5)
                drop-shadow(0 0 10px rgba(168, 85, 247, 0.8));
    }
    100% {
        transform: scale(1.06);
        filter: brightness(1.28) sepia(0.38) hue-rotate(245deg) saturate(3.8)
                drop-shadow(0 0 20px rgba(233, 213, 255, 1));
    }
}

@keyframes chainTimerDeplete {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}

@keyframes chainHitPop {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3) rotate(8deg); opacity: 0.8; }
    100% { transform: scale(0.2); opacity: 0; }
}

@keyframes chainFailShake {
    0% { transform: translateX(0) scale(1); opacity: 1; }
    25% { transform: translateX(-8px) scale(0.9); }
    50% { transform: translateX(8px) scale(0.7); }
    75% { transform: translateX(-6px) scale(0.5); }
    100% { transform: translateX(0) scale(0.2); opacity: 0; }
}

/* Floating number morado para la Cadena de Conchas */
.click-text.chain-purple {
    color: #f3e8ff;
    font-size: 2rem;
    z-index: 200;
    text-shadow: 0 0 14px rgba(168, 85, 247, 1),
                 0 0 26px rgba(147, 51, 234, 0.9),
                 2px 2px 0 #3b0764,
                 -1px -1px 0 #3b0764;
    animation: floatUpPurple 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes floatUpPurple {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1.15);
    }
    50% {
        transform: translateY(-38px) scale(1.35);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.9);
    }
}

/* ========================================================
   ETIQUETA DE VERSIÓN (ESQUINA INFERIOR IZQUIERDA)
   ======================================================== */
.game-version-label {
    position: absolute;
    bottom: 3px;
    left: 14px;
    right: auto;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(254, 243, 199, 0.65);
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(251, 191, 36, 0.2);
    padding: 1.5px 6px;
    opacity: 0.75;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 40;
    user-select: none;
    -webkit-user-select: none;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Herramientas de prueba (solo desarrollo: build-web.js las quita en producción).
   Arriba a la derecha, en el cielo, para no sumar botones a la barra superior en móvil ni tapar la ciudad. */
/* En producción vienen ocultas (hidden) hasta escribir el código en la consola secreta */
.dev-tools[hidden] {
    display: none;
}

.dev-tools {
    position: absolute;
    right: 10px;
    top: 270px;
    z-index: 40;
    display: flex;
    /* Debajo del contador, en el cielo: el botón arriba y el panel se abre hacia abajo, así no tapa los
       edificios del fondo */
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 6px;
}

/* En celular, debajo del contador compacto */
@media (max-width: 820px) {
    .dev-tools {
        top: 84px;
    }
}

.dev-test-btn,
.dev-test-action,
.dev-test-select {
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 9999px;
    border: 1.5px solid #c4b5fd;
    background: rgba(255, 255, 255, 0.92);
    color: #5b21b6;
    padding: 4px 10px;
    cursor: pointer;
}

.dev-test-btn.active {
    background: #7c3aed;
    border-color: #ede9fe;
    color: #ffffff;
}

.dev-test-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(46, 16, 101, 0.88);
    border: 1px solid #a78bfa;
}

.dev-test-panel[hidden] {
    display: none;
}

.dev-test-field {
    font-size: 0.65rem;
    font-weight: 800;
    color: #ede9fe;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dev-test-select {
    max-width: 210px;
    border-radius: 8px;
}

/* Combo de eventos con su botón para lanzarlo */
.dev-test-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ========================================================
   LA CONCHA DE LA MUERTE (EVENTO ALEATORIO DE FRENESÍ)
   ======================================================== */
.frenzy-concha {
    position: absolute;
    width: 82px;
    height: 82px;
    z-index: 156;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform, opacity;
    animation: frenzyPopIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.frenzy-concha img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: transform 0.1s ease;
}

.frenzy-concha:active img {
    transform: scale(0.82);
}

.frenzy-concha.hit {
    animation: frenzyHitPop 0.16s ease-out forwards;
    pointer-events: none;
}

.frenzy-concha.despawning {
    animation: frenzyPopOut 0.22s ease-in forwards;
    pointer-events: none;
}

/* Todas las conchas de frenesí comparten la misma aura dorada idéntica (el único diferenciador es el dibujo de la calavera) */
.frenzy-concha {
    filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.95))
            drop-shadow(0 0 28px rgba(245, 158, 11, 0.7));
}

.frenzy-concha:hover {
    filter: drop-shadow(0 0 20px rgba(254, 240, 138, 1))
            drop-shadow(0 0 38px rgba(245, 158, 11, 0.9))
            brightness(1.15);
}

.frenzy-concha img {
    filter: brightness(1.25) sepia(0.85) hue-rotate(-12deg) saturate(3.8);
    animation: goldenFrenzyPulse 0.7s ease-in-out infinite alternate;
}

/* Banner de Frenesí activo en la zona de juego */
.death-event-banner {
    position: absolute;
    top: 75px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(153, 27, 27, 0.92), rgba(69, 10, 10, 0.95));
    border: 2px solid #ef4444;
    color: #fef2f2;
    padding: 6px 18px;
    border-radius: 9999px;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    z-index: 140;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.7);
    animation: bannerPulse 1s ease-in-out infinite alternate;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

@keyframes bannerPulse {
    0% { transform: translateX(-50%) scale(1); box-shadow: 0 0 14px rgba(239, 68, 68, 0.6); }
    100% { transform: translateX(-50%) scale(1.04); box-shadow: 0 0 26px rgba(239, 68, 68, 0.9); }
}

@keyframes frenzyPopIn {
    0% { transform: scale(0.2) rotate(-15deg); opacity: 0; }
    75% { transform: scale(1.12) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes frenzyPopOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.25); opacity: 0; }
}

@keyframes frenzyHitPop {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3) rotate(6deg); opacity: 0.85; }
    100% { transform: scale(0.2); opacity: 0; }
}

@keyframes goldenFrenzyPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.06); filter: brightness(1.35) sepia(0.85) hue-rotate(-12deg) saturate(4.2); }
}

/* ===== Evento: Lluvia de Conchas =====
   Capa sobre la sección de la concha; cada concha cae con una animación de transform (solo compositor).
   El tono dorado es un filtro fijo en la imagen: nunca se anima. */
.shell-rain-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 156;
    transition: opacity 0.3s ease;
}

.shell-rain-layer.ending {
    opacity: 0;
}

.shell-rain-drop {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    animation-name: shellRainFall;
    animation-timing-function: linear;
    animation-fill-mode: both;
    transition: opacity 0.18s ease;
}

.shell-rain-drop img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: brightness(1.25) sepia(0.85) hue-rotate(-12deg) saturate(3.8) drop-shadow(0 0 8px rgba(251, 191, 36, 0.9));
    transition: transform 0.18s ease;
}

.shell-rain-drop.caught {
    opacity: 0;
    pointer-events: none;
}

.shell-rain-drop.caught img {
    transform: scale(1.35);
}

@keyframes shellRainFall {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(var(--fall, 800px)) rotate(calc(var(--spin, 1) * 160deg)); }
}

/* ===== Evento: Concha Traicionera =====
   Se mueve con transform desde JS. Dorada o roja según la clase .red: el filtro cambia solo al
   cambiar de estado (nunca se anima). */
.traitor-concha {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 150;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: opacity 0.4s ease;
}

.traitor-concha.spawning,
.traitor-concha.despawning {
    opacity: 0;
    pointer-events: none;
}

.traitor-concha img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: brightness(1.28) sepia(0.85) hue-rotate(-12deg) saturate(3.8) drop-shadow(0 0 12px rgba(251, 191, 36, 0.9));
    transition: transform 0.12s ease;
}

.traitor-concha.red img {
    filter: brightness(0.95) sepia(1) hue-rotate(-50deg) saturate(6) drop-shadow(0 0 12px rgba(239, 68, 68, 0.95));
}

@media (max-width: 820px), (pointer: coarse) {
    .traitor-concha img {
        filter: brightness(1.28) sepia(0.85) hue-rotate(-12deg) saturate(3.8);
    }

    .traitor-concha.red img {
        filter: brightness(0.95) sepia(1) hue-rotate(-50deg) saturate(6);
    }
}

/* ===== Evento: Concha Evolucionadora (game.js, EVENTO 7) =====
   Imagen img/conchas/concha_evolucionadora.png (concha blanca con flecha verde). Si falta, se usa
   concha.png blanqueada con una flecha verde de CSS (.evolve-fallback). Brillo fijo, sin animar filter. */
.evolve-concha {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 150;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: opacity 0.4s ease;
}

.evolve-concha.spawning,
.evolve-concha.despawning {
    opacity: 0;
    pointer-events: none;
}

.evolve-concha img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 0 12px rgba(74, 222, 128, 0.9));
}

.evolve-concha .evolve-arrow {
    display: none;
}

.evolve-fallback-img,
.evolve-concha.evolve-fallback img {
    filter: grayscale(1) brightness(1.75) contrast(0.85) drop-shadow(0 0 10px rgba(74, 222, 128, 0.9));
}

/* Flecha verde hacia arriba dibujada con bordes (solo en el respaldo) */
.evolve-concha.evolve-fallback .evolve-arrow {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    height: 42%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.evolve-concha.evolve-fallback .evolve-arrow::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 18px solid #16a34a;
}

.evolve-concha.evolve-fallback .evolve-arrow::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 16px;
    bottom: 0;
    width: 10px;
    transform: translateX(-50%);
    background: #16a34a;
    border-radius: 0 0 3px 3px;
}

.evolve-modal-box {
    max-width: 520px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 18px;
}

.evolve-modal-title {
    color: #15803d;
}

.evolve-title-icon {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.evolve-modal-desc {
    margin-bottom: 14px;
}

.evolve-slot-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    -webkit-overflow-scrolling: touch;
}

.evolve-building {
    border: 2px solid var(--border-color);
    border-radius: 14px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.55);
}

.evolve-building-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 6px;
}

.evolve-building-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

.evolve-building-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.evolve-building-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
}

.evolve-slot-btn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 9px;
    border-radius: 10px;
    border: 2px solid #22c55e;
    background: #f0fdf4;
    color: #14532d;
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.15s ease;
}

.evolve-slot-btn:hover {
    background: #dcfce7;
    transform: translateY(-1px);
}

.evolve-slot-btn:active {
    transform: translateY(1px);
}

.evolve-slot-name {
    font-weight: 800;
}

.evolve-slot-value {
    font-size: 0.72rem;
    opacity: 0.8;
}

@media (max-width: 820px), (pointer: coarse) {
    .evolve-concha img {
        filter: none;
    }

    .evolve-fallback-img,
    .evolve-concha.evolve-fallback img {
        filter: grayscale(1) brightness(1.75) contrast(0.85);
    }
}

/* ===== Hormigas: caminan hacia la concha y se la comen (game.js, LAS HORMIGAS) ===== */
/* Imágenes en img/hormigas/: hormiga_1 negra (Actos I-II), hormiga_2 roja (III-IV), hormiga_3 arriera (V).
   Son de perfil con la cabeza a la izquierda; .ant-flip las voltea para las que llegan por la izquierda. */
.ant {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 140;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    /* El bucle mueve la hormiga cada 100 ms: la transición rellena el paso */
    transition: transform 0.1s linear, opacity 0.4s ease;
}

/* La arriera (Acto V) es 50% más grande: se nota que es la más difícil (sizeScale en game.js) */
.ant.ant-arriera {
    width: 96px;
    height: 96px;
}

/* La reina es el doble de grande y va encima de las demás */
.ant.ant-reina {
    width: 128px;
    height: 128px;
    z-index: 141;
}

.ant-body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35));
}

.ant-flip .ant-body { transform: scaleX(-1); }

.ant-body img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Paso al caminar (solo escritorio; en celular quedan quietas) */
.ant:not(.eating) .ant-body img { animation: ant-walk 0.24s ease-in-out infinite alternate; }

@keyframes ant-walk {
    from { transform: translateY(0) rotate(-3deg); }
    to { transform: translateY(-3px) rotate(3deg); }
}

/* Barra de vida */
.ant-hp {
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: -6px;
    height: 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    pointer-events: none;
}

.ant-hp-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: #4ade80;
    transform-origin: left center;
    transition: transform 0.1s ease;
}

.ant.eating .ant-hp-fill { background: #f87171; }

.ant.hit .ant-body img { animation: ant-hit 0.15s ease; }

@keyframes ant-hit {
    0% { transform: scale(1); }
    50% { transform: scale(1.12, 0.8); }
    100% { transform: scale(1); }
}

.ant.dead {
    opacity: 0;
    pointer-events: none;
}

.ant.dead .ant-body img { animation: none; transform: scale(1.2, 0.35); transition: transform 0.2s ease; }

/* Nota en el contador: cuánto se comen por segundo */
.ants-drain-note {
    color: #f87171;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 820px), (pointer: coarse) {
    .ant {
        width: 48px;
        height: 48px;
    }

    .ant.ant-arriera {
        width: 72px;
        height: 72px;
    }

    .ant.ant-reina {
        width: 96px;
        height: 96px;
    }

    .ant-body { filter: none; }

    .ant:not(.eating) .ant-body img { animation: none; }
}

/* ===== Evento: Memorama ===== */
.pair-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 156;
    transition: opacity 0.3s ease;
}

.pair-layer.ending {
    opacity: 0;
}

.pair-shell {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    animation: frenzyPopIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.pair-shell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

.pair-shell.gone {
    pointer-events: none;
}

.pair-shell.despawning,
.pair-shell.mismatched {
    animation: frenzyPopOut 0.22s ease-in forwards;
}

.pair-shell.picked,
.pair-shell.matched {
    animation: frenzyHitPop 0.2s ease-out forwards;
}

.click-text.pair-miss {
    color: #ef4444;
    font-size: 1.6rem;
}

/* Sabor en espera en el badge de la consola */
.console-badge-tag.pair-pending .mini-concha-icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.4em;
}

.active-event-title .mini-concha-icon,
.console-badge-wrapper .mini-concha-icon {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
}

/* Celular / táctil: sin halo (drop-shadow) para no cargar la GPU */
@media (max-width: 820px), (pointer: coarse) {
    .shell-rain-drop img {
        filter: brightness(1.25) sepia(0.85) hue-rotate(-12deg) saturate(3.8);
    }

    .pair-shell img {
        filter: none;
    }
}

@keyframes deathPulseAura {
    0% { transform: scale(1); }
    100% { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 16px rgba(239, 68, 68, 1)); }
}

/* Floating number rojo de penalización (-50% Conchas) */
.click-text.death-penalty {
    color: #fecaca;
    font-size: 2.2rem;
    z-index: 210;
    text-shadow: 0 0 16px rgba(239, 68, 68, 1),
                 0 0 28px rgba(185, 28, 28, 0.95),
                 2px 2px 0 #450a0a,
                 -1px -1px 0 #450a0a;
    animation: floatDownDeath 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes floatDownDeath {
    0% { opacity: 1; transform: translateY(0) scale(1.2); }
    40% { transform: translateY(-20px) scale(1.4); }
    100% { opacity: 0; transform: translateY(50px) scale(0.8); }
}

/* ========================================================
   MARCO DORADO DE EVENTO ACTIVO
   ======================================================== */
.event-golden-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 135;
    opacity: 0;
    transition: opacity 0.4s ease;
    border: 3.5px solid rgba(251, 191, 36, 0.85);
    box-shadow: inset 0 0 25px rgba(251, 191, 36, 0.65),
                inset 0 0 65px rgba(245, 158, 11, 0.35),
                0 0 20px rgba(251, 191, 36, 0.4);
}

.event-golden-frame.active {
    opacity: 1;
    animation: goldenFramePulse 1.5s ease-in-out infinite alternate;
}

@keyframes goldenFramePulse {
    0% {
        border-color: rgba(251, 191, 36, 0.75);
        box-shadow: inset 0 0 20px rgba(251, 191, 36, 0.5),
                    inset 0 0 45px rgba(245, 158, 11, 0.25);
    }
    100% {
        border-color: rgba(254, 240, 138, 1);
        box-shadow: inset 0 0 35px rgba(254, 240, 138, 0.9),
                    inset 0 0 85px rgba(245, 158, 11, 0.55),
                    0 0 25px rgba(251, 191, 36, 0.6);
    }
}

/* Marco Rojizo de Penalización / Crisis Activa en la Concha */
.event-golden-frame.penalty-active {
    opacity: 1;
    border: 3.5px solid rgba(239, 68, 68, 0.85);
    box-shadow: inset 0 0 25px rgba(239, 68, 68, 0.65),
                inset 0 0 65px rgba(185, 28, 28, 0.35),
                0 0 20px rgba(239, 68, 68, 0.4);
    animation: penaltyFramePulse 1.2s ease-in-out infinite alternate;
}

@keyframes penaltyFramePulse {
    0% {
        border-color: rgba(239, 68, 68, 0.75);
        box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.5),
                    inset 0 0 45px rgba(185, 28, 28, 0.25);
    }
    100% {
        border-color: rgba(254, 202, 202, 1);
        box-shadow: inset 0 0 35px rgba(248, 113, 113, 0.9),
                    inset 0 0 85px rgba(185, 28, 28, 0.55),
                    0 0 25px rgba(239, 68, 68, 0.6);
    }
}

/* Estilo Rojizo para Eventos de Penalización y Crisis */
.active-event-badge.penalty-mode {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 25%, #ef4444 60%, #dc2626 85%, #991b1b 100%);
    border: 2.5px solid #fee2e2;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.55),
                inset 0 2px 4px rgba(255, 255, 255, 0.9),
                inset 0 -2px 5px rgba(153, 27, 27, 0.5),
                0 0 15px rgba(239, 68, 68, 0.6);
    white-space: normal;
    text-align: center;
    max-width: 92%;
    padding: 6px 18px;
}

.active-event-badge.penalty-mode .active-event-title {
    color: #450a0a;
    font-size: 0.92rem;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0.3px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8),
                 0 0 10px rgba(239, 68, 68, 0.4);
}

.active-event-badge.penalty-mode.active {
    animation: redBadgeGleam 1.5s ease-in-out infinite alternate;
}

@keyframes redBadgeGleam {
    0% {
        box-shadow: 0 8px 25px rgba(220, 38, 38, 0.55),
                    inset 0 2px 4px rgba(255, 255, 255, 0.9),
                    inset 0 -2px 5px rgba(153, 27, 27, 0.5),
                    0 0 15px rgba(239, 68, 68, 0.6);
        filter: brightness(1);
    }
    100% {
        box-shadow: 0 10px 32px rgba(220, 38, 38, 0.85),
                    inset 0 3px 6px rgba(255, 255, 255, 1),
                    inset 0 -2px 6px rgba(153, 27, 27, 0.7),
                    0 0 25px rgba(254, 202, 202, 0.9);
        filter: brightness(1.08);
    }
}

/* Pastilla de Debuff en Fila de Edificio */
.building-debuff-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #f87171;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    margin-left: 6px;
    animation: debuffPulse 1.5s infinite alternate;
}

@keyframes debuffPulse {
    0% { background: #fee2e2; border-color: #f87171; }
    100% { background: #fca5a5; border-color: #ef4444; }
}

/* ========================================================
   CRISIS Y RETOS: CONTADOR GIGANTE CENTRAL (3... 2... 1...)
   ======================================================== */
.crisis-center-countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 120;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}

.crisis-countdown-number {
    font-family: 'Luckiest Guy', cursive, sans-serif;
    font-size: 8.5rem;
    font-weight: 900;
    color: #ef4444;
    line-height: 0.88;
    text-shadow: 
        0 0 25px rgba(239, 68, 68, 1),
        0 0 55px rgba(220, 38, 38, 0.95),
        0 0 85px rgba(185, 28, 28, 0.8),
        3px 6px 0 #450a0a,
        -2px -2px 0 #fff;
    transform-origin: center center;
}

.crisis-countdown-number.pop-tick {
    animation: crisisCountdownPop 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.crisis-countdown-label {
    font-family: 'Luckiest Guy', cursive, sans-serif;
    font-size: 1.6rem;
    color: #fef08a;
    letter-spacing: 2.5px;
    text-shadow: 
        0 0 12px rgba(239, 68, 68, 0.9),
        2px 2px 0 #450a0a;
    margin-top: -6px;
    animation: crisisLabelPulse 0.85s ease-in-out infinite alternate;
}

@keyframes crisisCountdownPop {
    0% {
        transform: scale(0.25);
        opacity: 0;
    }
    30% {
        transform: scale(1.35);
        opacity: 1;
    }
    70% {
        transform: scale(1.0);
        opacity: 1;
    }
    100% {
        transform: scale(0.92);
        opacity: 0.85;
    }
}

@keyframes crisisLabelPulse {
    0% { transform: scale(0.96); filter: brightness(1); }
    100% { transform: scale(1.04); filter: brightness(1.25); }
}

/* ========================================================
   RECUADRO DE PENALIZACIÓN ACTIVA (ESQUINA INFERIOR DERECHA)
   ======================================================== */
.active-penalties-container {
    position: absolute;
    /* Por encima de la consola unificada (alto ~67px + margen inferior 24px) */
    bottom: 104px;
    right: 18px;
    z-index: 50;
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
    align-items: center;
    pointer-events: auto;
}

.penalty-box {
    position: relative;
    width: 66px;
    height: 66px;
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 2.5px solid #ef4444;
    border-radius: 12px;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(239, 68, 68, 0.5),
        inset 0 0 12px rgba(239, 68, 68, 0.35);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    animation: penaltyBoxPulse 1.4s ease-in-out infinite alternate;
    user-select: none;
    -webkit-user-select: none;
}

.penalty-box:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(239, 68, 68, 0.9),
        inset 0 0 16px rgba(239, 68, 68, 0.5);
    border-color: #fca5a5;
}

.penalty-box:active {
    transform: scale(0.96);
}

@keyframes penaltyBoxPulse {
    0% {
        border-color: #ef4444;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 14px rgba(239, 68, 68, 0.45);
    }
    100% {
        border-color: #fca5a5;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 24px rgba(239, 68, 68, 0.85);
    }
}

/* Capa de líquido/relleno que se va vaciando de 100% a 0% */
.penalty-box-drain-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(220, 38, 38, 0.8) 0%, rgba(239, 68, 68, 0.5) 85%, rgba(254, 202, 202, 0.85) 100%);
    border-top: 2px solid #fecaca;
    box-shadow: 0 -2px 8px rgba(254, 202, 202, 0.8);
    transition: height 0.25s linear;
    pointer-events: none;
    z-index: 1;
}

/* Ícono del edificio penalizado */
.penalty-box-icon {
    position: relative;
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
    z-index: 2;
    pointer-events: none;
}

/* Etiqueta flotante miniatura en el recuadro con el porcentaje de castigo */
.penalty-box-mini-tag {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-family: 'Fredoka', 'Quicksand', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    color: #ffffff;
    background: rgba(185, 28, 28, 0.95);
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid rgba(254, 202, 202, 0.6);
    z-index: 3;
    pointer-events: none;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Miniatura de advertencia en la esquina superior */
.penalty-box-mini-warning {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.72rem;
    z-index: 3;
    pointer-events: none;
    animation: miniWarningBlink 1s ease-in-out infinite alternate;
}

@keyframes miniWarningBlink {
    0% { opacity: 0.6; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.15); }
}

/* ========================================================
   TOOLTIP / TARJETA FLOTANTE DE INSPECCIÓN DE PENALIZACIÓN
   ======================================================== */
.penalty-inspect-tooltip {
    position: absolute;
    bottom: 180px;
    right: 18px;
    width: 290px;
    background: rgba(15, 23, 42, 0.96);
    border: 2px solid #ef4444;
    border-radius: 14px;
    box-shadow: 
        0 12px 36px rgba(0, 0, 0, 0.75),
        0 0 20px rgba(239, 68, 68, 0.5),
        inset 0 1px 2px rgba(254, 202, 202, 0.3);
    padding: 14px 16px;
    z-index: 60;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: tooltipSlideUp 0.22s ease-out;
    color: #f8fafc;
}

@keyframes tooltipSlideUp {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.penalty-inspect-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 50%;
    color: #fca5a5;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.penalty-inspect-close:hover {
    background: #ef4444;
    color: #ffffff;
    transform: scale(1.1);
}

.penalty-inspect-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding-right: 20px;
}

.penalty-inspect-icon-wrap {
    width: 44px;
    height: 44px;
    background: rgba(30, 41, 59, 0.9);
    border: 1.5px solid #ef4444;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    flex-shrink: 0;
}

.penalty-inspect-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.penalty-inspect-meta {
    display: flex;
    flex-direction: column;
}

.penalty-inspect-badge {
    font-size: 0.65rem;
    font-weight: 800;
    color: #fca5a5;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.penalty-inspect-title {
    font-family: 'Fredoka', 'Quicksand', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.penalty-inspect-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.82rem;
}

.penalty-inspect-desc {
    color: #cbd5e1;
    line-height: 1.35;
    margin: 0;
}

.penalty-inspect-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    padding: 6px 10px;
}

.penalty-inspect-stat-label {
    color: #fca5a5;
    font-weight: 600;
}

.penalty-inspect-stat-val {
    color: #fee2e2;
    font-weight: 800;
}

.penalty-inspect-timer-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.penalty-inspect-timer-label {
    color: #94a3b8;
    font-size: 0.78rem;
}

.penalty-inspect-timer-val {
    font-family: 'Luckiest Guy', cursive, sans-serif;
    font-size: 1.05rem;
    color: #fef08a;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.penalty-inspect-progress-bg {
    width: 100%;
    height: 6px;
    background: rgba(30, 41, 59, 0.8);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.penalty-inspect-progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ef4444, #f87171, #fef08a);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
    transition: width 0.25s linear;
}


/* ========================================================
   TÍTULO DE EVENTO ACTIVO (ARTE DE ORO BAJO EL CONTADOR)
   ======================================================== */
.active-event-badge {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px) scale(0.92);
    padding: 7px 28px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef08a 25%, #f59e0b 60%, #d97706 85%, #b45309 100%);
    border: 2.5px solid #fef3c7;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.55),
                inset 0 2px 4px rgba(255, 255, 255, 0.9),
                inset 0 -2px 5px rgba(180, 83, 9, 0.5),
                0 0 15px rgba(251, 191, 36, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
}

.active-event-badge.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    animation: goldBadgeGleam 2s ease-in-out infinite alternate;
}

.active-event-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #78350f;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9),
                 0 0 10px rgba(251, 191, 36, 0.5);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes goldBadgeGleam {
    0% {
        box-shadow: 0 8px 25px rgba(245, 158, 11, 0.55),
                    inset 0 2px 4px rgba(255, 255, 255, 0.9),
                    inset 0 -2px 5px rgba(180, 83, 9, 0.5),
                    0 0 15px rgba(251, 191, 36, 0.6);
        filter: brightness(1);
    }
    100% {
        box-shadow: 0 10px 32px rgba(245, 158, 11, 0.85),
                    inset 0 3px 6px rgba(255, 255, 255, 1),
                    inset 0 -2px 6px rgba(180, 83, 9, 0.7),
                    0 0 25px rgba(254, 240, 138, 0.9);
        filter: brightness(1.08);
    }
}

/* ========================================================
   SISTEMA DE LEGADO & EL RECETARIO SECRETO DE LA ABUELA
   ======================================================== */

.top-btn.legacy-btn {
    position: relative;
    border-color: #f59e0b;
}

.top-btn.legacy-btn:hover {
    border-color: #d97706;
    background: #fffbeb;
}

.top-btn.legacy-btn.ready-to-ascend {
    border-color: #f59e0b;
    animation: ascensionReadyPulse 2s infinite ease-in-out;
}

/* Aura dorada pulsante del Recetario cuando la ascensión está lista */
@keyframes ascensionReadyPulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(245, 158, 11, 0.4), inset 0 0 4px rgba(245, 158, 11, 0.2);
        border-color: #f59e0b;
    }
    50% {
        box-shadow: 0 0 16px rgba(245, 158, 11, 0.85), 0 0 8px rgba(251, 191, 36, 0.6), inset 0 0 8px rgba(245, 158, 11, 0.4);
        border-color: #fde68a;
    }
}

@keyframes bounceBadge {
    0% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(-2px) scale(1.08);
    }
}

/* Insignia verde circular con "!" de ascensión lista */
.legacy-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #10b981;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 900;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    animation: bounceBadge 1s infinite alternate ease-in-out;
    pointer-events: none;
}

/* Modales de Legado & Vitrina */
.legacy-modal-box {
    max-width: 600px;
    max-height: 88vh;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.legacy-modal-box.celestial-theme {
    background: linear-gradient(175deg, #fffbeb 0%, #fef3c7 40%, #ffedd5 100%);
    border: 3px solid #f59e0b;
    box-shadow: 0 20px 50px rgba(180, 83, 9, 0.35), 0 0 30px rgba(245, 158, 11, 0.2);
}

.celestial-badge-top {
    display: inline-block;
    align-self: flex-start;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 9999px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
}

.legacy-modal-header {
    margin-bottom: 14px;
}

.legacy-modal-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.legacy-modal-subtitle {
    font-size: 0.85rem;
    font-weight: 700;
    color: #b45309;
    margin-top: 3px;
}

/* Banner de Estado de Ascensión */
.legacy-ascension-banner {
    background: #fef3c7;
    border: 1.5px solid #fde68a;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legacy-ascension-banner.qualified {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.banner-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: #78350f;
}

.banner-desc-text {
    font-size: 0.82rem;
    color: #92400e;
    line-height: 1.4;
}

.banner-rule-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(254, 243, 199, 0.95);
    border: 1.5px dashed #d97706;
    border-radius: 9px;
    padding: 7px 11px;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #92400e;
    line-height: 1.35;
    box-shadow: 0 1px 4px rgba(217, 119, 6, 0.12);
}

.banner-rule-pill .celestial-concha-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.notebook-recipe-quote {
    font-size: 0.76rem;
    color: #78350f;
    text-align: center;
    margin-bottom: 8px;
    padding: 4px 10px;
    background: rgba(254, 243, 199, 0.45);
    border-radius: 6px;
    border-bottom: 1px dashed rgba(180, 83, 9, 0.3);
    line-height: 1.3;
}

/* Tarjeta de Saldo Celestial en Tienda */
.celestial-balance-card {
    background: linear-gradient(135deg, #78350f, #451a03);
    color: #ffffff;
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px rgba(69, 26, 3, 0.3);
}

.celestial-balance-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fde68a;
}

.celestial-balance-value {
    font-size: 1.6rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    margin: 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Ícono Oficial de la Concha Celestial (Luz azul celeste celestial) */
.celestial-concha-icon {
    width: 22px;
    height: 22px;
    vertical-align: -3px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.85));
    display: inline-block;
    transition: transform 0.15s ease;
}

.celestial-balance-value .celestial-concha-icon {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 1))
            drop-shadow(0 0 18px rgba(14, 165, 233, 0.7));
}

.relic-buy-btn .celestial-concha-icon {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}

.btn-open-ascension-shop .celestial-concha-icon,
.legacy-subtitle .celestial-concha-icon,
.legacy-modal-subtitle .celestial-concha-icon,
#legacy-modal-subtitle .celestial-concha-icon {
    width: 20px;
    height: 20px;
    vertical-align: -4px;
}

.celestial-balance-hint {
    font-size: 0.78rem;
    color: #fed7aa;
    line-height: 1.35;
}

/* ========================================================
   DISEÑO VISUAL: CUADERNO DE RECETAS ABIERTO DE LA ABUELA
   ======================================================== */

.celestial-balance-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.test-cc-btn {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #ffffff;
    border: 1.5px solid #c4b5fd;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 6px 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.12s ease, filter 0.15s ease;
}

.test-cc-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
}

.recipe-notebook {
    background: #58240c;
    background-image: radial-gradient(circle at 50% 0%, #78350f, #451a03);
    border: 3.5px solid #3b1402;
    border-radius: 18px;
    padding: 12px 14px 14px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.35);
    position: relative;
    margin-bottom: 12px;
}

.recipe-notebook.shop-edition {
    background: #632a0c;
    border-color: #78350f;
    box-shadow: 0 16px 38px rgba(120, 53, 15, 0.35), 0 0 20px rgba(245, 158, 11, 0.2);
}

/* Espiral / Aros de la libreta en la parte superior */
.notebook-spine {
    display: flex;
    justify-content: space-around;
    padding: 0 30px;
    margin-bottom: -6px;
    position: relative;
    z-index: 10;
}

.spine-ring {
    width: 14px;
    height: 18px;
    background: linear-gradient(to right, #71717a, #d4d4d8 45%, #ffffff 55%, #71717a);
    border-radius: 8px;
    border: 1px solid #3f3f46;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35);
}

/* Marcador de cinta de tela saliendo del cuaderno */
.notebook-bookmark-ribbon {
    position: absolute;
    top: -5px;
    right: 32px;
    width: 20px;
    height: 38px;
    background: #dc2626;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    z-index: 15;
}

.notebook-bookmark-ribbon.gold-ribbon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: 1px solid #b45309;
}

/* Hoja de papel pergamino con renglones de cuaderno */
.notebook-page {
    background: #fffdf5;
    background-image: repeating-linear-gradient(transparent, transparent 33px, #fde68a 33px, #fde68a 34px);
    border: 1.5px solid #fcd34d;
    border-radius: 12px;
    padding: 16px 18px 12px;
    box-shadow: inset 0 0 35px rgba(254, 243, 199, 0.6), 0 4px 12px rgba(69, 26, 3, 0.15);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.notebook-page.turning {
    animation: pageFlipAnim 0.22s ease-in-out;
}

@keyframes pageFlipAnim {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.97) rotateY(4deg); opacity: 0.6; }
    100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

.notebook-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed #f59e0b;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.notebook-page-title {
    font-size: 0.96rem;
    font-weight: 800;
    color: #78350f;
    font-family: Georgia, serif;
    letter-spacing: 0.3px;
}

.notebook-page-number {
    font-size: 0.78rem;
    font-weight: 800;
    color: #92400e;
    background: #fef3c7;
    padding: 2px 9px;
    border-radius: 9999px;
    border: 1px solid #fde68a;
}

/* Contenedor de las 2 reliquias */
.notebook-relics-pair {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    justify-content: center;
}

/* Controles de cambio de hoja */
.notebook-page-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1.5px dashed #fcd34d;
    padding-top: 10px;
    margin-top: 10px;
}

.notebook-nav-btn {
    background: #fef3c7;
    border: 1.5px solid #f59e0b;
    color: #78350f;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.14s ease;
    user-select: none;
}

.notebook-nav-btn:hover:not(:disabled) {
    background: #f59e0b;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(217, 119, 6, 0.3);
}

.notebook-nav-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.notebook-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #cbd5e1;
    color: #94a3b8;
    background: #f1f5f9;
}

.notebook-dots-indicator {
    display: flex;
    gap: 8px;
    align-items: center;
}

.notebook-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fde68a;
    border: 1.5px solid #d97706;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notebook-dot:hover {
    background: #f59e0b;
    transform: scale(1.2);
}

.notebook-dot.active {
    background: #d97706;
    transform: scale(1.25);
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.5);
}

/* Tarjeta individual de reliquia */
.relic-item-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.relic-item-card:hover {
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18);
}

.relic-item-card.owned {
    background: #fffdf5;
    border-color: #fde68a;
}

.relic-item-card.maxed {
    background: #fefce8;
    border-color: #facc15;
}

.relic-item-icon {
    font-size: 2rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffbeb;
    border-radius: 10px;
    border: 1px solid #fde68a;
    flex-shrink: 0;
}

.relic-item-details {
    flex: 1;
    min-width: 0;
}

.relic-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.relic-item-name {
    font-size: 0.94rem;
    font-weight: 800;
    color: #78350f;
}

.relic-level-pill {
    background: #fef3c7;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 9999px;
    border: 1px solid #fde68a;
}

.relic-level-pill.maxed {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    border-color: #b45309;
}

.relic-item-desc {
    font-size: 0.8rem;
    color: #92400e;
    line-height: 1.35;
}

.relic-item-action {
    flex-shrink: 0;
}

.relic-buy-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    border: none;
    outline: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
    transition: transform 0.12s ease, filter 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.relic-buy-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.45);
}

.relic-buy-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.relic-buy-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #9ca3af;
    box-shadow: none;
}

.relic-buy-btn.btn-maxed {
    background: #10b981;
    color: #ffffff;
    opacity: 0.9;
}

/* Botones Principales de Ascensión */
.legacy-btn-ascend {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4);
}

.legacy-btn-ascend:hover {
    background: linear-gradient(135deg, #fbbf24, #b45309);
}

.legacy-btn-finish {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.legacy-btn-finish:hover {
    background: linear-gradient(135deg, #34d399, #047857);
}

/* Cuadernos del Recetario, tienda de ascensión y logros en móvil: compactos y con desplazamiento
   (antes overflow: hidden cortaba los controles de hoja y los botones de abajo) */
@media (max-width: 600px) {
    .legacy-modal-box {
        padding: 12px 12px 10px;
        max-height: 92vh;
        max-height: 92dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .legacy-modal-box > * {
        flex-shrink: 0;
    }

    .legacy-modal-header {
        margin-bottom: 8px;
        padding-right: 36px;
    }

    /* !important: la tienda de ascensión trae el tamaño del título en línea (style="font-size: 1.45rem") */
    .legacy-modal-title {
        font-size: 1.1rem !important;
        line-height: 1.2;
    }

    .legacy-modal-subtitle {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .recipe-notebook {
        padding: 8px 8px 10px;
        margin-bottom: 8px;
        border-radius: 14px;
    }

    .notebook-spine {
        padding: 0 18px;
    }

    .spine-ring {
        width: 11px;
        height: 14px;
    }

    .notebook-bookmark-ribbon {
        right: 18px;
        height: 30px;
    }

    .notebook-page {
        padding: 10px 10px 8px;
        min-height: 0;
    }

    .notebook-page-header {
        gap: 8px;
        padding-bottom: 6px;
        margin-bottom: 8px;
    }

    .notebook-page-title {
        font-size: 0.85rem;
        line-height: 1.25;
    }

    .notebook-page-number {
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .notebook-recipe-quote {
        font-size: 0.68rem;
        margin-bottom: 6px;
    }

    .notebook-relics-pair {
        gap: 8px;
    }

    /* Ícono a la izquierda; en la tienda el botón de compra baja a su propio renglón */
    .relic-item-card {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px 10px;
        padding: 8px 10px;
    }

    .relic-item-icon {
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }

    .relic-item-name {
        font-size: 0.86rem;
    }

    .relic-item-desc {
        font-size: 0.74rem;
        line-height: 1.3;
    }

    .relic-item-action {
        width: 100%;
    }

    .relic-buy-btn {
        width: 100%;
        text-align: center;
    }

    .notebook-page-controls {
        gap: 6px;
        padding-top: 8px;
        margin-top: 8px;
    }

    .notebook-nav-btn {
        font-size: 0.7rem;
        padding: 5px 10px;
        white-space: nowrap;
    }

    /* Tienda de ascensión: saldo compacto; la regla de trascendencia ya aparece en la anotación del cuaderno */
    .celestial-badge-top {
        font-size: 0.65rem;
        margin-bottom: 4px;
    }

    .celestial-balance-card {
        padding: 8px 12px;
        margin-bottom: 8px;
    }

    .celestial-balance-label {
        font-size: 0.68rem;
    }

    .celestial-balance-value {
        font-size: 1.3rem;
        margin: 0;
    }

    .celestial-balance-value .celestial-concha-icon {
        width: 24px;
        height: 24px;
    }

    .celestial-balance-hint {
        display: none;
    }

    /* "◀ Anterior" / "Siguiente ▶": con "Hoja" los botones y los puntos no caben a lo ancho */
    .nav-btn-word {
        display: none;
    }

    .notebook-dots-indicator {
        gap: 5px;
    }

    .notebook-dot {
        width: 8px;
        height: 8px;
    }

    .legacy-modal-box .modal-actions {
        margin-top: 0 !important;
        gap: 8px;
    }

    .legacy-modal-box .modal-btn {
        font-size: 0.85rem;
        padding: 9px 12px;
    }
}

/* ========================================================
   IDENTIDAD DE LA PANADERÍA & MODALES DE RENOMBRADO
   ======================================================== */
/* Franja del nombre de la panadería: solo en celular (ver bloque de 820 px) */
.mobile-bakery-banner {
    display: none;
}

/* Nombre de la panadería en el contador de escritorio: letrero de panadería casera (papel crema,
   letra manuscrita, trigo y concha a mano) que ocupa todo el borde superior de la tarjeta.
   Mismo estilo que la franja del celular (.mobile-bakery-banner). Clic para renombrar. */
.bakery-header-badge {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -14px -28px 10px;
    padding: 6px 16px 7px;
    color: #8a4a32;
    background:
        radial-gradient(ellipse at center, rgba(255, 250, 238, 0.9) 0%, rgba(255, 250, 238, 0) 70%),
        linear-gradient(180deg, #f6e9cf 0%, #ecd9b4 100%);
    border-bottom: 1px solid #b98a62;
    box-shadow: inset 0 -3px 0 #f6e9cf, inset 0 -4px 0 rgba(138, 74, 50, 0.35);
    border-radius: 22px 22px 0 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
    position: relative;
    min-width: 0;
}

.bakery-header-badge:hover,
.bakery-header-badge:focus-visible {
    outline: none;
    background:
        radial-gradient(ellipse at center, rgba(255, 252, 244, 1) 0%, rgba(255, 252, 244, 0) 75%),
        linear-gradient(180deg, #f8edd6 0%, #efdcb9 100%);
}

/* El letrero ya dice el nombre; la etiqueta "Panadería:" se queda solo para lectores de pantalla */
.bakery-title-tag {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.bakery-sign-art {
    flex: 0 0 auto;
    width: 60px;
    height: 30px;
    opacity: 0.8;
}

.bakery-sign-art.is-mirrored {
    transform: scaleX(-1);
}

.bakery-name-text {
    min-width: 0;
    font-family: 'Dancing Script', 'Segoe Script', 'Brush Script MT', cursive;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.05;
    color: #7a2e1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px 2px;
}

/* Lápiz para renombrar: en la esquina, se nota al pasar el mouse */
.bakery-name-edit-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    font-size: 0.85rem;
    opacity: 0.35;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bakery-header-badge:hover .bakery-name-edit-icon,
.bakery-header-badge:focus-visible .bakery-name-edit-icon {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
}

/* Modal de Primera Vez y Renombrado */
.first-bakery-box,
.rename-bakery-box {
    max-width: 480px;
    text-align: left;
    position: relative;
}

.first-bakery-box .modal-title,
.rename-bakery-box .modal-title {
    color: #78350f;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.bakery-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 18px 0 10px 0;
}

.bakery-input-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #78350f;
}

.bakery-text-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #451a03;
    background: #fffdfa;
    border: 2px solid #d97706;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.bakery-text-input:focus {
    border-color: #b45309;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.25);
}

.bakery-input-hint {
    font-size: 0.75rem;
    color: #92400e;
    text-align: right;
}

.rename-cost-badge {
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.7) 0%, rgba(254, 215, 170, 0.5) 100%);
    border: 1.5px solid #f59e0b;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 14px 0 6px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rename-cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.rename-cost-label {
    font-weight: 600;
    color: #78350f;
}

.rename-cost-value {
    font-weight: 800;
    color: #b45309;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rename-current-balance {
    font-weight: 800;
    color: #0369a1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rename-warning-msg {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #f87171;
    color: #991b1b;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

/* ========================================================
   LOGRO DESBLOQUEADO: CARA TRASERA DE LA TARJETA DEL CONTADOR
   La tarjeta se voltea (.stats-panel.show-achievement) y regresa sola al contador.
   ======================================================== */
.achievement-toast-badge {
    font-size: 0.72rem;
    font-weight: 800;
    color: #92400e;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.achievement-toast-body {
    display: flex;
    align-items: center;
    gap: 12px;
}

.achievement-toast-icon-wrap {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: radial-gradient(circle, #fffbeb 0%, #fde68a 100%);
    border: 1.5px solid #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2);
}

.achievement-toast-icon-wrap img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.achievement-toast-info {
    flex: 1;
    min-width: 0;
}

.achievement-toast-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #451a03;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.achievement-toast-desc {
    font-size: 0.78rem;
    color: #78350f;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.achievement-toast-timer-bar {
    width: 100%;
    height: 3px;
    background: rgba(217, 119, 6, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

/* Se anima con scaleX (no width) para no recalcular el diseño en cada cuadro */
.achievement-toast-timer-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    transform-origin: left center;
}

@keyframes achievementTimerProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* La duración la fija JS en --achievement-duration según el largo del logro */
.stats-panel.show-achievement .achievement-toast-timer-fill {
    animation: achievementTimerProgress var(--achievement-duration, 3s) linear forwards;
}

/* ========================================================
   LIBRETA DE LOGROS Y HAZAÑAS (ESTILO LISTA DE INGREDIENTES)
   ======================================================== */
.top-btn.achievements-btn {
    position: relative;
    border-color: #f59e0b;
}

.top-btn.achievements-btn:hover {
    border-color: #d97706;
    background: #fffbeb;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.4), 0 6px 16px rgba(0, 0, 0, 0.2);
}

.achievements-notification-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #dc2626;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    animation: pulseBadge 1.5s infinite;
}

.legacy-modal-box.achievements-modal-box {
    max-width: 920px;
    width: 95%;
}

/* ========================================================
   ESTADÍSTICAS DE PRODUCCIÓN (lista por edificio)
   ======================================================== */
.top-btn.stats-btn:hover {
    border-color: #0ea5e9;
    background: #f0f9ff;
    box-shadow: 0 0 14px rgba(14, 165, 233, 0.35), 0 6px 16px rgba(0, 0, 0, 0.2);
}

.legacy-modal-box.stats-modal-box {
    max-width: 760px;
    width: 95%;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 6px 0 0;
    height: min(60vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #0ea5e9 transparent;
}

.stat-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px dashed rgba(180, 83, 9, 0.22);
    border-radius: 6px;
}

.stat-row-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.stat-row-name {
    font-weight: 800;
    color: #451a03;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-row-sub {
    font-size: 0.74rem;
    color: #78350f;
    margin-top: 1px;
}

.stat-row-bar {
    height: 6px;
    margin-top: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.stat-row-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #0ea5e9, #38bdf8);
    border-radius: 3px;
}

.stat-row-values {
    text-align: right;
    white-space: nowrap;
}

.stat-row-total {
    font-weight: 800;
    color: #292524;
    font-size: 0.95rem;
}

.stat-row-detail {
    font-size: 0.72rem;
    color: #78350f;
}

.stat-row-empty {
    padding: 18px 8px;
    text-align: center;
    color: #78350f;
    font-style: italic;
}

@media (max-width: 600px) {
    .stat-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }
    .stat-row-icon img {
        width: 32px;
        height: 32px;
    }
    .stat-row-values {
        grid-column: 2;
        text-align: left;
    }
}

.recipe-notebook.achievements-edition {
    background: #451a03;
    background-image: radial-gradient(circle at 50% 0%, #78350f, #2e0f01);
    border: 3.5px solid #290e02;
}

.notebook-bookmark-ribbon.emerald-ribbon {
    background: linear-gradient(to right, #047857, #10b981 45%, #34d399 55%, #047857);
    box-shadow: 0 4px 10px rgba(4, 120, 87, 0.4);
}

.achievements-ingredients-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 4px 0 0;
    /* Una sola lista con todos los logros: se desplaza dentro de la hoja */
    height: min(56vh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #d97706 transparent;
}

.achievement-ingredient-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-bottom: 1px dashed rgba(180, 83, 9, 0.22);
    border-radius: 6px;
    transition: background-color 0.12s ease;
    height: 34px;
    min-height: 34px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.achievement-ingredient-row:hover {
    background: rgba(245, 158, 11, 0.08);
}

/* Logro conseguido desplegado al tocarlo: título completo, la regla para obtenerlo y la fecha */
.achievement-ingredient-row.unlocked {
    cursor: pointer;
}

.achievement-ingredient-row.expanded {
    height: auto;
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
    background: rgba(245, 158, 11, 0.1);
}

.achievement-ingredient-row.expanded {
    align-items: flex-start;
}

.achievement-ingredient-row.expanded .ach-row-title {
    white-space: normal;
    overflow: visible;
    max-width: none;
}

/* La fecha completa va en el detalle: la píldora se oculta para dejarle ancho al texto */
.achievement-ingredient-row.expanded .ach-row-status-pill {
    display: none;
}

.ach-row-detail {
    display: none;
}

.achievement-ingredient-row.expanded .ach-row-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 3px;
}

.ach-row-date {
    font-size: 0.7rem;
    font-weight: 700;
    color: #15803d;
}

.ach-row-check {
    font-size: 0.95rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.achievement-ingredient-row.unlocked .ach-row-check {
    color: #16a34a;
    font-weight: 800;
}

.achievement-ingredient-row.locked .ach-row-check {
    color: #a8a29e;
    opacity: 0.55;
}

.ach-row-icon-box {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.ach-row-icon-box img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.achievement-ingredient-row.locked .ach-row-icon-box {
    filter: grayscale(1) opacity(0.35);
}

.ach-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ach-row-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #451a03;
    font-family: Georgia, serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.achievement-ingredient-row.locked .ach-row-title {
    color: #78716c;
    font-style: italic;
    letter-spacing: 1px;
}

.ach-row-desc {
    font-size: 0.76rem;
    color: #78350f;
    white-space: normal;
}

.ach-row-status-pill {
    font-size: 0.66rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ach-row-status-pill.unlocked {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.ach-row-status-pill.locked {
    background: #f5f5f4;
    color: #a8a29e;
    border: 1px dashed #d6d3d1;
}

/* ========================================================
   CONTENEDOR INFERIOR MÓVIL Y PESTAÑAS (DESKTOP: DISPLAY CONTENTS)
   ======================================================== */
.mobile-bottom-panel {
    display: contents;
}

.mobile-tabs-nav {
    display: none;
}

/* ========================================================
   CONSOLA UNIFICADA INFERIOR: TRANSMISIÓN, LORE, EVENTOS Y COOLDOWNS
   ======================================================== */
.unified-bottom-console {
    position: relative;
    z-index: 28;
    width: 88%;
    max-width: 580px;
    margin: 8px auto 24px auto;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.96) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(245, 158, 11, 0.45);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}

.unified-bottom-console:hover {
    border-color: rgba(245, 158, 11, 0.85);
    box-shadow: 0 8px 28px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.unified-bottom-console.event-active {
    border-color: #fbbf24;
    background: linear-gradient(180deg, rgba(30, 20, 10, 0.94) 0%, rgba(20, 10, 5, 0.98) 100%);
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.65), inset 0 0 15px rgba(245, 158, 11, 0.3);
    animation: consoleGoldenPulse 1.8s ease-in-out infinite alternate;
}

@keyframes consoleGoldenPulse {
    0% {
        border-color: rgba(245, 158, 11, 0.8);
        box-shadow: 0 0 18px rgba(245, 158, 11, 0.45);
    }
    100% {
        border-color: rgba(254, 240, 138, 1);
        box-shadow: 0 0 32px rgba(251, 191, 36, 0.85), inset 0 0 20px rgba(245, 158, 11, 0.4);
    }
}

.console-header-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 8px;
    padding: 7px 14px 2px 14px;
    width: 100%;
    box-sizing: border-box;
}

.console-body-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 14px 8px 14px;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    min-height: 28px;
}

/* Pastillas de Estado (Badge a la izquierda) */
.console-badge-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3.5px 12px;
    border-radius: 9999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.console-badge-wrapper.badge-live {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
}

.console-badge-wrapper.badge-dialogue {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
}

.console-badge-wrapper.badge-dialogue.cult {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.5);
}

.console-badge-wrapper.badge-event {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.6);
}

.console-badge-wrapper.badge-penalty {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.6);
}

.unified-bottom-console.penalty-active {
    border-color: #ef4444;
    background: linear-gradient(180deg, rgba(40, 10, 10, 0.95) 0%, rgba(25, 5, 5, 0.98) 100%);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.55), inset 0 0 12px rgba(239, 68, 68, 0.25);
}

.console-badge-wrapper.badge-notice {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5);
}

.console-badge-dot {
    width: 7px;
    height: 7px;
    background-color: #ffffff;
    border-radius: 50%;
    animation: consoleDotPulse 1.2s infinite ease-in-out;
}

@keyframes consoleDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.65); }
}

/* Viewport de Texto Central */
.console-content-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent 0%, black 12px, black calc(100% - 12px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12px, black calc(100% - 12px), transparent 100%);
}

.console-content-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f8fafc;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 10px 0 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.console-content-text.fade-in {
    animation: consoleTextFade 0.3s ease-out;
}

@keyframes consoleTextFade {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Desplazamiento (marquee) del texto largo dentro de la consola.
   Se declara despues de .fade-in para tener prioridad: primero aparece con fade
   y luego se desplaza de forma continua hasta mostrar el mensaje completo. */
.console-content-text.marquee-scroll,
.console-content-text.fade-in.marquee-scroll {
    animation: consoleTextFade 0.3s ease-out,
               consoleMarquee var(--marquee-duration, 10s) linear 0.3s infinite;
    will-change: transform;
}

/* Ciclo de respaldo: environment.js (setMarqueeKeyframes) lo reemplaza con uno donde el texto
   espera 1.2 s, avanza hasta salir por completo por la izquierda y vuelve a aparecer desde el inicio. */
@keyframes consoleMarquee {
    0%, 8% { transform: translateX(0); opacity: 1; }
    84%, 92% { transform: translateX(var(--marquee-dist, -120px)); opacity: 1; }
    96% { transform: translateX(var(--marquee-dist, -120px)); opacity: 0; }
    97% { transform: translateX(0); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Pausar el desplazamiento al posar el cursor o tocar la consola para leer con calma */
.unified-bottom-console:hover .console-content-text.marquee-scroll,
.unified-bottom-console:active .console-content-text.marquee-scroll {
    animation-play-state: paused;
}

/* Tira de Cooldowns a la derecha */
/* Va en la fila del badge, a la derecha; si no cabe junto a él, baja completa a una línea propia
   (sin quitarle ancho al mensaje de abajo) */
.console-cooldowns-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
    max-width: 100%;
}

.console-cooldowns-strip:empty {
    display: none;
}

.console-cooldown-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 9999px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fef3c7;
    cursor: default;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.console-cooldown-chip.ready {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #34d399;
    color: #ffffff;
    animation: chipReadyPulse 1.2s infinite alternate;
}

@keyframes chipReadyPulse {
    0% { transform: scale(1); box-shadow: 0 0 4px rgba(16, 185, 129, 0.4); }
    100% { transform: scale(1.05); box-shadow: 0 0 10px rgba(52, 211, 153, 0.8); }
}

/* Chips de beneficios temporales de la ruleta (icono + segundos restantes) */
.console-cooldown-chip.buff-cps {
    background: linear-gradient(135deg, #065f46 0%, #059669 100%);
    border-color: #6ee7b7;
    color: #ecfdf5;
}

.console-cooldown-chip.buff-click {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    border-color: #93c5fd;
    color: #eff6ff;
}

.console-cooldown-chip.buff-debuff {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    border-color: #bae6fd;
    color: #f0f9ff;
}

.console-cooldown-chip .chip-timer {
    font-variant-numeric: tabular-nums;
}

/* Barra de Progreso Inferior para Eventos / Cooldowns */
.console-progress-track {
    width: 100%;
    height: 3.5px;
    background: rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.console-progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #fef08a 100%);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.85);
    transition: width 0.1s linear;
}


/* ========================================================
   ADAPTACIÓN RESPONSIVE PARA DISPOSITIVOS MÓVILES (<= 820px)
   ======================================================== */
@media (max-width: 820px) {
    body {
        overflow: hidden;
        touch-action: manipulation;
    }

    .game-container {
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        width: 100vw;
        overflow: hidden;
    }

    /* 0. Franja superior con el nombre de la panadería, estilo letrero de panadería casera (papel crema,
          letra manuscrita y dibujos a mano). El espacio sale del panel de abajo, no de la concha. */
    .mobile-bakery-banner {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 36px;
        padding: 0 8px;
        box-sizing: border-box;
        color: #8a4a32;
        background:
            radial-gradient(ellipse at center, rgba(255, 250, 238, 0.9) 0%, rgba(255, 250, 238, 0) 70%),
            linear-gradient(180deg, #f6e9cf 0%, #ecd9b4 100%);
        border-bottom: 1px solid #b98a62;
        box-shadow: inset 0 -3px 0 #f6e9cf, inset 0 -4px 0 rgba(138, 74, 50, 0.35);
        position: relative;
        z-index: 5;
    }

    .mobile-bakery-banner-art {
        flex: 0 0 auto;
        width: 50px;
        height: 25px;
        opacity: 0.8;
    }

    .mobile-bakery-banner-art.is-mirrored {
        transform: scaleX(-1);
    }

    .mobile-bakery-banner-name {
        min-width: 0;
        font-family: 'Dancing Script', 'Segoe Script', 'Brush Script MT', cursive;
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1;
        color: #7a2e1f;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 2px 2px;
    }

    /* 1. Mitad Superior Fija: Concha, Cielo, Estadísticas y Controles (~48vh) */
    .clicker-section {
        width: 100%;
        min-width: 0;
        height: 48vh;
        height: 48dvh;
        flex: 0 0 48vh;
        /* padding inferior = alto de la consola anclada al fondo */
        padding: 6px 10px 58px 10px;
        overflow: hidden;
        position: relative;
        justify-content: space-between;
        box-sizing: border-box;
    }

    /* Columna a la izquierda: en fila tapaban el nombre de la panadería */
    .top-bar-controls {
        top: 6px;
        left: 6px;
        flex-direction: column;
        gap: 5px;
        margin-bottom: 2px;
    }

    .top-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .test-mode-label {
        display: none;
    }

    /* Panel compacto: sin altura mínima ni relleno de escritorio para dejarle más espacio a la concha */
    .stats-panel {
        margin-top: 2px;
        margin-bottom: 2px;
        align-self: flex-end;
        width: calc(100% - 36px);
        max-width: none;
    }

    .stats-face {
        padding: 5px 12px 6px;
        border-radius: 16px;
    }

    .stats-face-front {
        min-height: 0;
    }

    /* Logro compacto para que quepa en el alto del contador (si es largo, crece hacia abajo) */
    .stats-face-back {
        padding: 5px 10px 6px;
        gap: 3px;
    }

    .achievement-toast-badge {
        font-size: 0.62rem;
    }

    .achievement-toast-body {
        gap: 8px;
    }

    .achievement-toast-icon-wrap {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 1.1rem;
    }

    .achievement-toast-icon-wrap img {
        width: 24px;
        height: 24px;
    }

    .achievement-toast-title {
        font-size: 0.82rem;
        margin-bottom: 0;
    }

    .achievement-toast-desc {
        font-size: 0.7rem;
        line-height: 1.2;
    }

    .bakery-header-badge {
        padding: 1px 10px;
        margin-bottom: 2px;
    }

    .bakery-title-tag {
        font-size: 0.7rem;
    }

    .bakery-name-text {
        font-size: 0.85rem;
    }

    .conchas-count {
        font-size: 1.5rem;
        line-height: 1.1;
        margin-bottom: 0;
    }

    /* Sin salto de línea: el panel no debe crecer y empujar la concha */
    .cps-count {
        font-size: 0.8rem;
        line-height: 1.25;
        margin-top: 0;
        white-space: nowrap;
    }

    .mastery-bonus-pill {
        font-size: 0.65rem;
        line-height: 1.3;
        padding: 1px 8px;
        margin-top: 3px;
        white-space: nowrap;
    }

    /* Contador compacto: sin el nombre de la panadería (se cambia en Opciones), las conchas con el ícono
       en lugar de "Conchas:", y el CPS y el Aura Dorada juntos en el segundo renglón */
    .stats-face-front .bakery-header-badge {
        display: none;
    }

    .stats-face-front {
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        column-gap: 6px;
        row-gap: 0;
        cursor: pointer;
        padding-right: 22px;
    }

    .conchas-count {
        flex-basis: 100%;
        font-size: 1.35rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .conchas-count::before {
        content: '';
        width: 1.15em;
        height: 1.15em;
        flex-shrink: 0;
        background: url('../img/conchas/concha.png') center / contain no-repeat;
    }

    .conchas-label,
    .cps-long,
    .aura-word,
    .aura-extra {
        display: none;
    }

    .cps-short {
        display: inline;
    }

    .stats-face-front .mastery-bonus-pill {
        margin-top: 0;
        padding: 0 7px;
    }

    /* Flechita que avisa que el contador se puede minimizar */
    .stats-collapse-hint {
        display: block;
        position: absolute;
        right: 9px;
        top: 50%;
        width: 7px;
        height: 7px;
        margin-top: -6px;
        border-right: 2px solid #b45309;
        border-bottom: 2px solid #b45309;
        transform: rotate(-135deg);
        opacity: 0.7;
    }

    /* El contador reserva la misma altura abierto o minimizado (con o sin Aura Dorada) para que la concha
       no brinque al tocarlo */
    .stats-panel {
        min-height: 55px;
    }

    /* Minimizado: una pastilla con solo las conchas, pegada a la derecha */
    .stats-panel.stats-collapsed {
        width: auto;
    }

    /* Un logro nuevo se muestra a lo ancho aunque el contador esté minimizado */
    .stats-panel.stats-collapsed.show-achievement {
        width: calc(100% - 36px);
    }

    .stats-panel.stats-collapsed .stats-face-front {
        padding: 3px 24px 3px 12px;
    }

    .stats-panel.stats-collapsed .conchas-count {
        font-size: 1.05rem;
    }

    .stats-panel.stats-collapsed .cps-count,
    .stats-panel.stats-collapsed .stats-face-front .mastery-bonus-pill {
        display: none !important;
    }

    .stats-panel.stats-collapsed .stats-collapse-hint {
        margin-top: -2px;
        transform: rotate(45deg);
    }

    .aura-detail-long {
        display: none;
    }

    .aura-detail-short {
        display: inline;
    }

    .news-ticker-container {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .city-news-ticker {
        height: 26px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .active-event-badge {
        padding: 4px 14px;
        top: calc(100% + 4px);
    }

    .active-event-title {
        font-size: 0.8rem;
        letter-spacing: 0.5px;
    }

    .news-ticker-badge {
        font-size: 0.60rem;
        padding: 1px 6px;
    }

    .news-ticker-text {
        font-size: 0.70rem;
    }

    /* Escalado responsivo de la Concha y los 10 anillos orbitales de manos */
    .concha-wrapper {
        transform: scale(0.62);
        transform-origin: center center;
        /* transform no reduce el alto de layout: los márgenes cancelan el sobrante (290px x 0.38 / 2) */
        margin-top: -55px;
        margin-bottom: -55px;
        touch-action: manipulation;
        user-select: none;
        order: 2;
    }

    /* Con márgenes fijos la concha perdía el centrado (margin: auto) y quedaba pegada a la consola:
       dos espaciadores flexibles iguales la centran entre el contador y la consola */
    .clicker-section::before,
    .clicker-section::after {
        content: '';
        flex: 1 1 0;
        min-height: 0;
    }

    /* Sin espacio arriba (todo el sobrante va abajo): la concha queda pegada al contador y deja ver a Don Goyo detrás */
    .clicker-section::before {
        order: 1;
        flex-grow: 0;
    }

    .clicker-section::after {
        order: 3;
        flex-grow: 3;
    }

    .main-concha-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .concha-hover-hint {
        display: none;
    }

    .game-version-label {
        display: none;
    }
    .crisis-countdown-number {
        font-size: 5.5rem;
    }
    .crisis-countdown-label {
        font-size: 1.2rem;
    }
    .active-penalties-container {
        bottom: 12px;
        right: 12px;
    }
    .penalty-box {
        width: 52px;
        height: 52px;
    }
    .penalty-box-icon {
        width: 36px;
        height: 36px;
    }
    .penalty-inspect-tooltip {
        right: 12px;
        bottom: 72px;
        width: calc(100vw - 24px);
        max-width: 290px;
    }

    /* 2. Mitad Inferior: Panel con Pestañas (~52vh) */
    .mobile-bottom-panel {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        height: 52vh;
        height: 52dvh;
        overflow: hidden;
        background: #fdfbf7;
        border-top: 2.5px solid #d97706;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
        z-index: 25;
    }

    .mobile-tabs-nav {
        display: flex;
        align-items: center;
        justify-content: stretch;
        background: #fef3c7;
        border-bottom: 2px solid #fde68a;
        padding: 4px 8px;
        gap: 8px;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .mobile-tab-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 10px;
        white-space: nowrap;
        border-radius: 9999px;
        border: 1.5px solid #d97706;
        background: #ffffff;
        color: #92400e;
        font-family: inherit;
        font-weight: 800;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(217, 119, 6, 0.12);
        position: relative;
        touch-action: manipulation;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-tab-btn:hover {
        background: #fffbeb;
    }

    .mobile-tab-btn.active {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: #ffffff;
        border-color: #b45309;
        box-shadow: 0 3px 8px rgba(180, 83, 9, 0.35);
    }

    .mobile-tab-badge {
        background: #dc2626;
        color: #ffffff;
        font-size: 0.72rem;
        font-weight: 900;
        padding: 1px 6px;
        border-radius: 9999px;
        border: 1.5px solid #ffffff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        animation: pulseBadge 1.5s infinite;
    }

    /* Visibilidad de pestañas según data-active-tab */
    .mobile-bottom-panel[data-active-tab="shop"] .shop-section {
        display: flex !important;
        flex: 1;
        width: 100%;
        min-width: 0;
        height: 100%;
        border: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-bottom-panel[data-active-tab="shop"] .buildings-display-section {
        display: none !important;
    }

    .mobile-bottom-panel[data-active-tab="production"] .buildings-display-section {
        display: flex !important;
        flex: 1;
        width: 100%;
        min-width: 0;
        height: 100%;
        border: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-bottom-panel[data-active-tab="production"] .shop-section {
        display: none !important;
    }

    /* Adaptaciones internas de la Tienda en móvil (rellenos mínimos para dejar más espacio a los edificios) */
    .shop-section {
        padding: 4px 6px 6px;
    }

    .shop-header {
        display: none;
    }

    .buy-mode-selector {
        padding: 4px 6px;
        margin-bottom: 4px;
    }

    .buildings-list {
        padding: 2px 2px 8px;
    }

    .trade-mode-btn,
    .batch-mode-btn {
        padding: 5px 8px;
        font-size: 0.74rem;
    }

    /* Tarjeta en rejilla: nombre y precio arriba, descripción a todo lo ancho y abajo
       producción + etiqueta. building-info y building-cost-container se "disuelven"
       (display: contents) para que sus hijos se acomoden directo en la rejilla. */
    .building-card {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto auto;
        column-gap: 8px;
        row-gap: 2px;
        align-items: center;
        padding: 7px 10px;
        margin-bottom: 6px;
    }

    .building-info,
    .building-cost-container {
        display: contents;
    }

    .building-icon-box {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 42px;
        height: 42px;
        margin-right: 0;
    }

    .building-icon-box img,
    .building-icon-box svg {
        width: 40px;
        height: 40px;
    }

    .building-name {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.90rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .building-cost {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        font-size: 0.82rem;
    }

    .building-desc {
        grid-column: 2 / 4;
        grid-row: 2;
        font-size: 0.72rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Producción a la izquierda y etiqueta a la derecha comparten el renglón de abajo */
    .building-stats {
        grid-column: 2 / 4;
        grid-row: 3;
        justify-self: start;
        font-size: 0.76rem;
        gap: 6px;
    }

    .building-bulk-tag {
        grid-column: 2 / 4;
        grid-row: 3;
        justify-self: end;
        margin-top: 0;
        font-size: 0.65rem;
        padding: 1px 5px;
    }

    .building-collapse-btn {
        grid-column: 4;
        grid-row: 1;
        width: 24px;
        height: 24px;
        margin-left: 0;
        font-size: 0.75rem;
    }

    /* Manos: su contador baja para dejarle el renglón de arriba al botón */
    #building-card-0 .building-count {
        grid-row: 2 / span 2;
    }

    /* Colapsada: ícono, nombre, precio (o etiqueta al máximo) y botón en un solo renglón */
    .building-card.card-collapsed {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .building-card.card-collapsed .building-icon-box {
        grid-row: 1;
    }

    .building-card:is(.card-collapsed, .card-collapsing) .building-icon-box {
        width: 26px;
        height: 26px;
    }

    .building-card:is(.card-collapsed, .card-collapsing) .building-icon-box img,
    .building-card:is(.card-collapsed, .card-collapsing) .building-icon-box svg,
    .building-card:is(.card-collapsed, .card-collapsing) .building-icon-box .black-square {
        width: 24px;
        height: 24px;
    }

    .building-card.card-collapsed .building-name {
        font-size: 0.85rem;
    }

    .building-card.card-collapsed .building-bulk-tag,
    .building-card.card-collapsed .building-count {
        display: none !important;
    }

    .building-card.card-collapsed.maxed .building-bulk-tag {
        display: block !important;
        grid-column: 3;
        grid-row: 1;
    }

    .building-count {
        grid-column: 4;
        grid-row: 1 / span 3;
        margin-left: 0;
    }

    /* Manos: el renglón de abajo lleva los botones x1/x5/x10, así que la etiqueta del anillo
       sube junto a la descripción para no taparlos en pantallas angostas */
    #building-card-0 .building-desc {
        grid-column: 2;
    }

    #building-card-0 .building-bulk-tag {
        grid-column: 3;
        grid-row: 2;
    }

    /* Adaptaciones de Producción Activa en móvil */
    .buildings-display-section {
        padding: 10px 8px;
    }

    .buildings-display-header {
        display: none;
    }

    .building-display-row {
        padding: 8px 10px;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    /* Nombre arriba y etiqueta de producción/maestría abajo a todo lo ancho
       (en una sola fila la etiqueta, sin saltos de línea, apretaba el nombre y se salía de la tarjeta) */
    .b-row-title-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .b-row-count-badge {
        white-space: normal;
        font-size: 0.7rem;
        line-height: 1.35;
        padding: 3px 8px;
    }

    .b-row-mastery {
        font-size: 0.68rem;
        padding: 3px 8px;
    }

    .b-row-name {
        font-size: 0.88rem;
    }

    .b-row-rate {
        font-size: 0.75rem;
    }

    .b-fuse-btn {
        padding: 4px 8px;
        font-size: 0.74rem;
    }

    .b-units-flow {
        gap: 4px;
        padding: 4px 0;
    }

    .b-unit-slot {
        width: 36px;
        height: 36px;
    }

    /* Adaptaciones de la Consola Unificada en Pantallas Móviles */
    /* Anclada al fondo: la concha escalada con transform conserva su alto de layout
       y empujaba la consola fuera de la sección (overflow: hidden) */
    .unified-bottom-console {
        position: absolute;
        left: 50%;
        bottom: 4px;
        transform: translateX(-50%);
        width: 96%;
        max-width: 390px;
        margin: 0;
        border-radius: 12px;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(15, 23, 42, 0.96);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
    }

    /* Recuadro de penalización y su tarjeta por encima de la consola anclada al fondo */
    .active-penalties-container {
        bottom: 62px;
        right: 10px;
    }

    .penalty-inspect-tooltip {
        bottom: 136px;
        right: 10px;
        width: min(290px, calc(100% - 20px));
    }

    .console-header-row {
        padding: 4px 8px 1px 8px;
    }

    .console-body-row {
        padding: 1px 8px 5px 8px;
        gap: 6px;
        min-height: 24px;
    }

    .console-badge-wrapper {
        font-size: 0.62rem;
        padding: 2px 7px;
        gap: 4px;
    }

    .console-content-text {
        font-size: 0.70rem;
    }

    .console-cooldown-chip {
        font-size: 0.62rem;
        padding: 2px 5px;
    }

    .game-toast {
        bottom: 70px;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, 20px);
    }

    .game-toast.show {
        transform: translate(-50%, 0);
    }

}

@media (max-width: 480px) {
    .concha-wrapper {
        transform: scale(0.55);
        margin-top: -65px;
        margin-bottom: -65px;
    }
}

/* Pantallas angostas: "Producción Activa" cabe en una línea */
@media (max-width: 380px) {
    .mobile-tab-btn {
        font-size: 0.78rem;
        gap: 4px;
        padding: 6px 8px;
    }
}

/* Teléfonos de poca altura: concha más pequeña para que no tape la consola */
@media (max-width: 820px) and (max-height: 720px) {
    .concha-wrapper {
        transform: scale(0.42);
        margin-top: -84px;
        margin-bottom: -84px;
    }
}


/* ========================================================
   LA RULETA DE LA ABUELA (TÓMBOLA PANADERA)
   ======================================================== */

/* Botón de la Ruleta en la barra superior */
.top-btn.roulette-btn {
    position: relative;
    border-color: #d97706;
}

.top-btn.roulette-btn.ready-spin {
    animation: rouletteReadyPulse 2s infinite ease-in-out;
}

@keyframes rouletteReadyPulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(245, 158, 11, 0.4), inset 0 0 4px rgba(245, 158, 11, 0.2);
        border-color: #f59e0b;
    }
    50% {
        box-shadow: 0 0 16px rgba(245, 158, 11, 0.85), 0 0 8px rgba(251, 191, 36, 0.6), inset 0 0 8px rgba(245, 158, 11, 0.4);
        border-color: #fde68a;
    }
}

/* Modal de la Ruleta */
.roulette-modal-box {
    background: radial-gradient(circle at center, #2e1810 0%, #180e0a 100%);
    border: 3px solid #d97706;
    border-radius: 20px;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(217, 119, 6, 0.4);
    color: #fef3c7;
    width: 460px;
    max-width: 94vw;
    max-height: 90vh;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.roulette-modal-header {
    margin-bottom: 12px;
}

.roulette-modal-title {
    font-family: 'Luckiest Guy', cursive, sans-serif;
    font-size: 1.7rem;
    color: #fbbf24;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 12px rgba(245, 158, 11, 0.5);
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.roulette-modal-subtitle {
    font-size: 0.84rem;
    color: #fde68a;
    opacity: 0.9;
    line-height: 1.35;
}

/* Barra de Estado (Costo y Cooldown) */
.roulette-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
    padding: 8px 14px;
    margin: 12px 0 16px;
    gap: 8px;
    flex-wrap: wrap;
}

.roulette-cost-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}

.roulette-cost-badge .cost-label {
    color: #e5e7eb;
}

.roulette-cost-badge .cost-value {
    color: #f59e0b;
    font-weight: 800;
}

.roulette-cost-badge .cost-sec-hint {
    color: #9ca3af;
    font-size: 0.72rem;
}

.roulette-balance-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}

.roulette-balance-badge .balance-label {
    color: #e5e7eb;
}

.roulette-balance-badge .balance-value {
    color: #34d399;
    font-weight: 800;
}

.roulette-free-spins-info {
    flex-basis: 100%;
    color: #f9a8d4;
    font-size: 0.74rem;
    font-weight: 700;
}

.roulette-free-spins-info[hidden] {
    display: none;
}

/* Escenario de la Ruleta */
.roulette-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0 16px;
}

.roulette-pointer-container {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    pointer-events: none;
}

.roulette-pointer {
    font-size: 2.2rem;
    line-height: 1;
    color: #ef4444;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.85);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
    transform-origin: 50% 20%;
    transition: transform 0.08s ease-out;
}

.roulette-pointer.peg-tick {
    transform: scale(1.2) rotate(14deg);
}

.roulette-wheel-wrapper {
    width: 320px;
    height: 320px;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85), 0 0 20px rgba(217, 119, 6, 0.45);
    position: relative;
    user-select: none;
}

.roulette-wheel-svg {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
}

.roulette-wheel-svg.spinning {
    transition: transform 5.2s cubic-bezier(0.12, 0.88, 0.22, 1);
}

/* Banner de Resultado de Ruleta */
.roulette-result-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 12px;
    margin: 8px 0 12px;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 86px;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.roulette-result-banner.pop {
    animation: bannerPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bannerPop {
    0% { transform: scale(0.96); opacity: 0.85; }
    100% { transform: scale(1); opacity: 1; }
}

.roulette-result-banner.standby {
    background: rgba(0, 0, 0, 0.35);
    border: 1.5px dashed rgba(245, 158, 11, 0.4);
    color: #fef3c7;
}

.roulette-result-banner.standby .result-banner-title {
    color: #fbbf24;
}

.roulette-result-banner.standby .result-banner-desc {
    color: #fde68a;
    opacity: 0.85;
}

.roulette-result-banner.spinning-wait {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.25) 0%, rgba(180, 83, 9, 0.35) 100%);
    border: 1.5px solid rgba(251, 191, 36, 0.6);
    color: #fef3c7;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
}

.roulette-result-banner.spinning-wait .result-banner-icon {
    animation: spinningDice 0.9s ease-in-out infinite alternate;
}

@keyframes spinningDice {
    0% { transform: scale(1) rotate(-12deg); filter: brightness(1); }
    100% { transform: scale(1.18) rotate(12deg); filter: brightness(1.3); }
}

.roulette-result-banner.win {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.35) 100%);
    border: 1.5px solid #10b981;
    color: #a7f3d0;
}

.roulette-result-banner.jackpot {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35) 0%, rgba(217, 119, 6, 0.45) 100%);
    border: 2px solid #fbbf24;
    color: #fef08a;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
}

.roulette-result-banner.loss {
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.25) 0%, rgba(159, 18, 57, 0.35) 100%);
    border: 1.5px solid #f43f5e;
    color: #fecdd3;
}

.roulette-result-banner.neutral {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.25) 0%, rgba(71, 85, 105, 0.35) 100%);
    border: 1.5px solid #94a3b8;
    color: #e2e8f0;
}

.result-banner-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.result-banner-text {
    flex: 1;
    min-width: 0;
}

.result-banner-title {
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.result-banner-desc {
    font-size: 0.8rem;
    opacity: 0.92;
    line-height: 1.25;
}

/* Botón de Girar */
.roulette-modal-actions {
    margin-top: 6px;
    display: flex;
    justify-content: center;
}

.roulette-spin-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    color: #ffffff;
    border: 2px solid #fde68a;
    padding: 12px 28px;
    font-size: 1.15rem;
    font-weight: 800;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

.roulette-spin-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.7);
}

.roulette-spin-btn:active:not(:disabled) {
    transform: translateY(1px);
    filter: brightness(0.96);
}

.roulette-spin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
    box-shadow: none;
}

.roulette-footer-note {
    font-size: 0.74rem;
    color: #d1d5db;
    margin-top: 14px;
    line-height: 1.35;
    opacity: 0.8;
}

@media (max-width: 480px) {
    .roulette-modal-box {
        padding: 16px 12px;
    }
    /* Deja libre el botón de cerrar para que no tape el título */
    .roulette-modal-header {
        padding: 0 34px;
    }
    .roulette-wheel-wrapper {
        width: 270px;
        height: 270px;
    }
    .roulette-modal-title {
        font-size: 1.4rem;
    }
    .roulette-spin-btn {
        font-size: 1.05rem;
        padding: 10px 22px;
    }
    .roulette-result-banner {
        min-height: 80px;
        padding: 8px 12px;
    }
}


/* ========================================================
   MODAL DE OPCIONES DE LA PANADERÍA
   ======================================================== */
.options-modal-box {
    background: radial-gradient(circle at center, #2e1810 0%, #180e0a 100%);
    border: 3px solid #d97706;
    border-radius: 20px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(217, 119, 6, 0.4);
    color: #fef3c7;
    width: 440px;
    max-width: 92vw;
    max-height: 90vh;
    padding: 22px;
    text-align: center;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.options-modal-header {
    margin-bottom: 16px;
}

.options-modal-title {
    font-family: 'Luckiest Guy', cursive, sans-serif;
    font-size: 1.65rem;
    color: #fbbf24;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 12px rgba(245, 158, 11, 0.5);
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.options-modal-subtitle {
    font-size: 0.84rem;
    color: #fde68a;
    opacity: 0.9;
    line-height: 1.35;
}

.options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.option-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(0, 0, 0, 0.42);
    border: 1.5px solid rgba(245, 158, 11, 0.32);
    border-radius: 14px;
    padding: 12px 14px;
    box-sizing: border-box;
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.option-item-card:hover {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.option-item-card.option-danger-card {
    border-color: rgba(239, 68, 68, 0.35);
}

.option-item-card.option-danger-card:hover {
    border-color: rgba(239, 68, 68, 0.7);
    background: rgba(40, 10, 10, 0.55);
}

.option-item-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.option-item-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.option-item-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.option-item-title {
    font-weight: 800;
    font-size: 0.96rem;
    color: #fef3c7;
    letter-spacing: 0.2px;
}

.option-item-desc {
    font-size: 0.78rem;
    color: #cbd5e1;
    margin-top: 2px;
    line-height: 1.25;
    opacity: 0.88;
}

.option-item-action {
    flex-shrink: 0;
}

.option-backup-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.option-toggle-btn,
.option-action-btn {
    border-radius: 9999px;
    padding: 8px 16px;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    transition: transform 0.12s ease, filter 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

.option-toggle-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: 1.5px solid #6ee7b7;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

.option-toggle-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.04);
}

.option-toggle-btn.muted {
    background: rgba(51, 65, 85, 0.75);
    color: #94a3b8;
    border-color: #64748b;
    box-shadow: none;
}

.option-toggle-btn.muted:hover {
    background: rgba(71, 85, 105, 0.85);
    color: #cbd5e1;
}

.option-save-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border: 1.5px solid #93c5fd;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

.option-save-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.04);
}

.option-save-btn.saved-pulse {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #6ee7b7;
    animation: savePulse 0.4s ease;
}

@keyframes savePulse {
    0% { transform: scale(0.95); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.option-reset-btn {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: #ffffff;
    border: 1.5px solid #fca5a5;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

.option-reset-btn:hover {
    filter: brightness(1.12);
    transform: scale(1.04);
}

.options-modal-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(245, 158, 11, 0.22);
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}

.options-version-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fde68a;
    opacity: 0.9;
    /* Se toca 5 veces para abrir la consola secreta: que no se seleccione el texto */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.options-autosave-note {
    font-size: 0.74rem;
    color: #a8a29e;
}

/* Aviso legal al pie de Opciones: letra pequeña y discreta */
.options-legal-notice {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(245, 158, 11, 0.12);
    font-size: 0.62rem;
    line-height: 1.35;
    color: #a8a29e;
    opacity: 0.75;
}
.options-legal-notice p {
    margin: 0 0 3px;
}
.options-legal-notice strong {
    color: #d6d3d1;
    font-weight: 600;
}
.options-legal-notice a {
    color: #fcd34d;
    text-decoration: underline;
}
.options-legal-notice .options-legal-love {
    margin: 4px 0 0;
    font-style: italic;
}
.options-legal-concha {
    width: 1.4em;
    height: 1.4em;
    object-fit: contain;
    vertical-align: middle;
}

@media (max-width: 480px) {
    .options-modal-box {
        padding: 16px 14px;
        width: 95vw;
    }
    .options-modal-title {
        font-size: 1.4rem;
    }
    .option-item-card {
        padding: 10px 12px;
    }
    .option-item-title {
        font-size: 0.88rem;
    }
    .option-item-desc {
        font-size: 0.72rem;
    }
    .option-toggle-btn,
    .option-action-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}


/* ========================================================
   RENDIMIENTO EN MÓVILES Y PANTALLAS TÁCTILES
   backdrop-filter recalcula el desenfoque en cada frame sobre el cielo animado
   y agota la memoria de GPU en Chrome Android (texturas que parpadean o desaparecen).
   Todos los paneles afectados ya tienen fondos casi opacos.
   ======================================================== */
@media (max-width: 820px), (pointer: coarse) {
    *,
    *::before,
    *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .modal-overlay {
        background: rgba(0, 0, 0, 0.72);
    }

    /* El humo de las escenas del fondo se queda quieto: animarlo crearía capas de GPU extra */
    .scene-smoke {
        animation: none;
    }

    /* El marco cubre toda la sección: animar box-shadow la repinta completa en cada frame.
       La opacidad se anima en el compositor sin repintar. */
    .event-golden-frame.active,
    .event-golden-frame.penalty-active {
        animation: framePulseOpacity 1.3s ease-in-out infinite alternate;
    }

    /* La ruleta casi siempre es costeable: sin pulso ni rebote infinitos, brillo fijo */
    .top-btn.roulette-btn.ready-spin {
        animation: none;
        border-color: #f59e0b;
        box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
    }

}

@keyframes framePulseOpacity {
    0% { opacity: 0.65; }
    100% { opacity: 1; }
}

/* ========================================================
   MECÁNICAS DE RETENCIÓN: EL REPARTIDOR EN BICI
   ======================================================== */
.top-btn.delivery-btn {
    position: relative;
}

/* Caja base de los modales de retención (mismo estilo que la ruleta) */
.retention-modal-box {
    background: radial-gradient(circle at center, #2e1810 0%, #180e0a 100%);
    border: 3px solid #d97706;
    border-radius: 20px;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(217, 119, 6, 0.4);
    color: #fef3c7;
    width: 640px;
    max-width: 94vw;
    max-height: 90vh;
    padding: 22px;
    text-align: center;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.retention-modal-header {
    margin-bottom: 14px;
    padding: 0 30px;
}

.retention-modal-title {
    font-family: 'Luckiest Guy', cursive, sans-serif;
    font-size: 1.6rem;
    color: #fbbf24;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

.retention-modal-subtitle {
    font-size: 0.85rem;
    color: #d6c3a5;
    margin-top: 6px;
    line-height: 1.4;
}

.delivery-routes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 16px;
}

.delivery-route-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(217, 119, 6, 0.4);
    border-radius: 16px;
    padding: 18px 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.delivery-route-card:hover {
    transform: translateY(-3px);
    border-color: #f59e0b;
}

.route-badge {
    position: absolute;
    top: -11px;
    background: #78350f;
    color: #fde68a;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 9999px;
    border: 1px solid #d97706;
    white-space: nowrap;
}

.route-icon {
    font-size: 2.1rem;
    margin: 4px 0 6px;
}

.route-title {
    font-size: 1rem;
    font-weight: 800;
    color: #fef3c7;
    margin-bottom: 6px;
}

.route-desc {
    font-size: 0.76rem;
    color: #c4b08f;
    line-height: 1.35;
    margin-bottom: 10px;
    flex: 1;
}

.route-rewards {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-bottom: 10px;
}

.reward-pill {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(217, 119, 6, 0.5);
    border-radius: 8px;
    padding: 4px 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fde047;
}

.reward-pill.celestial {
    border-color: #38bdf8;
    color: #7dd3fc;
}

.route-dispatch-btn {
    width: 100%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 9px 10px;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, filter 0.15s ease;
}

.route-dispatch-btn:hover {
    transform: scale(1.03);
    filter: brightness(1.1);
}

.delivery-active-view {
    padding: 14px 10px 6px;
    flex-direction: column;
    align-items: center;
}

.active-delivery-graphic {
    font-size: 2.8rem;
    margin-bottom: 8px;
}

.biking-anim {
    display: inline-block;
    animation: bikeRide 1.2s infinite ease-in-out;
}

@keyframes bikeRide {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-3deg); }
}

.active-delivery-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fde68a;
    margin-bottom: 6px;
}

.active-delivery-timer {
    font-size: 2.1rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #fef08a;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.active-delivery-progress-bar {
    width: 100%;
    max-width: 440px;
    height: 14px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 9999px;
    overflow: hidden;
    border: 2px solid rgba(217, 119, 6, 0.5);
    margin-bottom: 12px;
}

.active-delivery-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 9999px;
    transition: width 0.5s ease;
}

.active-delivery-status-text {
    font-size: 0.85rem;
    color: #c4b08f;
    font-style: italic;
    margin-bottom: 16px;
}

.delivery-claim-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    padding: 12px 26px;
    border-radius: 14px;
    border: 2px solid #34d399;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
    cursor: pointer;
}


.console-cooldown-chip.buff-delivery {
    background: linear-gradient(135deg, #78350f 0%, #b45309 100%);
    border-color: #fbbf24;
    color: #fffbeb;
}

@media (max-width: 600px) {
    .delivery-routes-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .delivery-route-card {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        align-items: center;
        text-align: left;
        padding: 16px 12px 12px;
    }

    .route-icon {
        grid-row: span 2;
        margin: 0;
    }

    .route-title {
        margin-bottom: 2px;
    }

    .route-desc {
        margin-bottom: 0;
    }

    .route-rewards {
        grid-column: 1 / -1;
        flex-direction: row;
        margin: 10px 0 8px;
    }

    .reward-pill {
        flex: 1;
        text-align: center;
    }

    .route-dispatch-btn {
        grid-column: 1 / -1;
    }

    .route-badge {
        left: 12px;
    }

    .retention-modal-title {
        font-size: 1.35rem;
    }
}

/* Móvil: sin animaciones infinitas en el botón, el chip y la bici */
@media (max-width: 820px), (pointer: coarse) {
    .biking-anim {
        animation: none;
    }
}

/* ========================================================
   MECÁNICAS DE RETENCIÓN: LA CHAROLA CALIENTE DE LAS 7:00
   ======================================================== */
.top-btn.charola-btn {
    position: relative;
}

.top-btn.charola-btn.active-hot {
    border-color: #f97316;
    background: linear-gradient(135deg, #ffedd5, #fed7aa);
    animation: charolaHotGlow 1.4s infinite ease-in-out;
}

@keyframes charolaHotGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(249, 115, 22, 0.5); }
    50% { box-shadow: 0 0 18px rgba(249, 115, 22, 0.9); }
}

.charola-modal-box {
    width: 480px;
}

.charola-status-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0 2px;
}

.charola-oven-icon {
    font-size: 2.6rem;
    margin-bottom: 8px;
    letter-spacing: 6px;
    opacity: 0.55;
    transition: opacity 0.3s ease;
}

.charola-oven-icon.hot {
    opacity: 1;
}

.charola-state-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 900;
    margin-bottom: 10px;
    border: 2px solid transparent;
}

.charola-state-badge.hot-active {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    color: #ffffff;
    border-color: #fdba74;
    box-shadow: 0 0 14px rgba(234, 88, 12, 0.6);
}

.charola-state-badge.waiting {
    background: rgba(0, 0, 0, 0.35);
    color: #fde68a;
    border-color: rgba(217, 119, 6, 0.6);
}

.charola-timer-display {
    font-size: 1.9rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #fde047;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.charola-perks-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(217, 119, 6, 0.4);
    border-radius: 16px;
    padding: 14px 16px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    margin-bottom: 12px;
}

.perks-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #fbbf24;
    margin-bottom: 8px;
}

.perk-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: #f5e6c8;
    margin-bottom: 6px;
    line-height: 1.35;
}

.charola-schedule-box {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px dashed rgba(217, 119, 6, 0.6);
    border-radius: 12px;
    padding: 10px 12px;
    box-sizing: border-box;
}

.schedule-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.schedule-tag {
    font-size: 0.75rem;
    font-weight: 800;
    color: #fef3c7;
}

.schedule-hours {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fdba74;
}

.console-cooldown-chip.buff-charola {
    background: linear-gradient(135deg, #9a3412 0%, #ea580c 100%);
    border-color: #fdba74;
    color: #fff7ed;
}

@media (max-width: 480px) {
    .charola-timer-display {
        font-size: 1.5rem;
    }
}

/* Móvil: brillo fijo en lugar del pulso infinito de box-shadow */
@media (max-width: 820px), (pointer: coarse) {
    .top-btn.charola-btn.active-hot {
        animation: none;
        box-shadow: 0 0 12px rgba(249, 115, 22, 0.8);
    }
}

/* ========================================================
   MECÁNICAS DE RETENCIÓN: MANDADOS DE LA ABUELA (ENCARGOS DIARIOS)
   ======================================================== */
.top-btn.quests-btn {
    position: relative;
}

.quests-modal-box {
    width: 560px;
}

.quests-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.quest-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(217, 119, 6, 0.4);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.quest-card.completed {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.quest-card.claimed {
    opacity: 0.55;
}

.quest-icon {
    font-size: 1.7rem;
    flex-shrink: 0;
}

.quest-info {
    flex: 1;
    min-width: 0;
}

.quest-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fef3c7;
    margin-bottom: 3px;
}

.quest-reward-tag {
    font-size: 0.72rem;
    color: #fbbf24;
    margin-left: 4px;
    white-space: nowrap;
}

.quest-desc {
    font-size: 0.78rem;
    color: #c4b08f;
    margin-bottom: 6px;
}

.quest-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quest-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 9999px;
    overflow: hidden;
}

.quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 9999px;
}

.quest-card.completed .quest-progress-fill,
.quest-card.claimed .quest-progress-fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.quest-progress-text {
    font-size: 0.72rem;
    font-weight: 800;
    color: #f5e6c8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.quest-claim-btn {
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.quest-claim-btn:hover:not(:disabled) {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.quest-claim-btn:disabled {
    background: rgba(255, 255, 255, 0.12);
    color: #c4b08f;
    cursor: default;
}

.grand-reward-card {
    background: rgba(0, 0, 0, 0.3);
    border: 2px dashed #f59e0b;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.grand-reward-card.ready {
    border-style: solid;
    border-color: #fbbf24;
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.45);
}

.grand-reward-icon {
    font-size: 2.3rem;
    flex-shrink: 0;
}

.grand-reward-info {
    flex: 1;
    min-width: 0;
}

.grand-reward-title {
    font-size: 1.02rem;
    font-weight: 900;
    color: #fbbf24;
    margin-bottom: 3px;
}

.grand-reward-desc {
    font-size: 0.78rem;
    color: #f5e6c8;
    line-height: 1.35;
    margin-bottom: 5px;
}

.grand-reward-progress {
    font-size: 0.74rem;
    font-weight: 800;
    color: #fdba74;
}

.claim-grand-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #c4b08f;
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: default;
    flex-shrink: 0;
}

.claim-grand-btn.ready {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
}

@media (max-width: 480px) {
    .quest-card {
        gap: 10px;
        padding: 10px 12px;
    }

    .quest-icon {
        font-size: 1.4rem;
    }

    .quest-card .quest-claim-btn {
        padding: 7px 9px;
        font-size: 0.74rem;
    }

    .grand-reward-card {
        flex-wrap: wrap;
    }

    .claim-grand-btn {
        width: 100%;
    }
}

/* ========================================================
   MECÁNICAS DE RETENCIÓN: DON BULTO, LA MASA MADRE CÓSMICA
   ======================================================== */
.top-btn.motherdough-btn {
    position: relative;
}

.motherdough-modal-box {
    width: 440px;
}

.motherdough-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.motherdough-jar-wrap {
    width: 120px;
    height: 125px;
    border: 5px solid #60a5fa;
    border-top-width: 8px;
    border-radius: 18px 18px 28px 28px;
    background: rgba(147, 197, 253, 0.12);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: inset 0 0 18px rgba(96, 165, 250, 0.3), 0 0 20px rgba(168, 85, 247, 0.3);
}

.motherdough-creature {
    width: 92px;
    height: 82px;
    background: radial-gradient(circle at 35% 35%, #fef08a, #d97706);
    border-radius: 50% 50% 45% 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -6px 12px rgba(120, 53, 15, 0.4);
    transform-origin: bottom center;
    animation: doughBreathe 2.5s ease-in-out infinite;
}

.motherdough-creature.asleep {
    filter: grayscale(0.6);
    animation-duration: 5s;
}

.motherdough-creature.munch {
    animation: doughMunch 0.35s ease-out;
}

/* Masi con arte por acto (img/masi/masi_actoN.png). Sin arte queda la bola de masa de siempre */
.motherdough-creature.has-art {
    width: 108px;
    height: 108px;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

.motherdough-creature.has-art .dough-eyes,
.motherdough-creature.has-art .dough-mouth {
    display: none;
}

.motherdough-creature .dough-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

@keyframes doughBreathe {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.08, 0.94); }
}

@keyframes doughMunch {
    0% { transform: scale(1); }
    50% { transform: scale(1.15, 0.9); }
    100% { transform: scale(1); }
}

.dough-eyes {
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.dough-mouth {
    font-size: 1.1rem;
    font-weight: 900;
    color: #78350f;
    line-height: 0.8;
}

.motherdough-stats-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid #a855f7;
    border-radius: 16px;
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
}

.dough-level-badge {
    font-size: 1.08rem;
    font-weight: 800;
    color: #fef08a;
    margin-bottom: 4px;
}

.dough-bonus-badge {
    font-size: 0.92rem;
    font-weight: 800;
    color: #c084fc;
    margin-bottom: 8px;
}

.dough-bonus-badge.paused {
    color: #f87171;
}

.dough-hunger-status {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f5e6c8;
    margin-bottom: 2px;
}

.dough-timer-hint {
    font-size: 0.78rem;
    color: #c4b08f;
}

.feed-dough-btn {
    background: linear-gradient(135deg, #9333ea, #7e22ce);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    padding: 12px 24px;
    border-radius: 14px;
    border: 2px solid #c084fc;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.5);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.feed-dough-btn:hover:not(:disabled) {
    transform: scale(1.04);
}

.feed-dough-btn:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
    border-color: #6b7280;
}

.motherdough-footer-note {
    font-size: 0.75rem;
    color: #c4b08f;
    margin-top: 12px;
    line-height: 1.35;
}

@media (max-width: 480px) {
    .feed-dough-btn {
        font-size: 0.92rem;
        padding: 10px 16px;
    }
}

/* Pantallas bajas: botones superiores más chicos para que la columna no choque con la consola */
@media (max-width: 820px) and (max-height: 720px) {
    .top-bar-controls {
        gap: 3px;
    }

    .top-btn {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
}

/* Móvil: sin respiración ni rebote infinitos */
@media (max-width: 820px), (pointer: coarse) {
    .motherdough-creature {
        animation: none;
    }

    .motherdough-creature.munch {
        animation: doughMunch 0.35s ease-out;
    }
}

/* ========================================================
   TUTORIAL INICIAL Y BOTONES BLOQUEADOS
   ======================================================== */
/* Botones superiores bloqueados: visibles en gris con candado para que se sepa que hay más por descubrir */
.top-btn.locked {
    position: relative;
    background: rgba(226, 232, 240, 0.92);
    border-color: #94a3b8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    cursor: not-allowed;
    animation: none !important;
}

.top-btn.locked:hover,
.top-btn.locked:active {
    transform: none;
    background: rgba(226, 232, 240, 0.92);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.top-btn.locked > span:first-child {
    filter: grayscale(1);
    opacity: 0.4;
}

.top-btn.locked > span:not(:first-child) {
    display: none !important;
}

.top-btn.locked::after {
    content: '🔒';
    position: absolute;
    right: -5px;
    bottom: -5px;
    font-size: 0.72rem;
    line-height: 1;
}

/* Paso 1: pantalla negra con solo la concha al centro */
.tutorial-intro {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: none;
}

.tutorial-intro.active {
    display: block;
}

.tutorial-intro-backdrop {
    position: absolute;
    inset: 0;
    background: #000000;
    animation: tutorialFadeIn 0.6s ease both;
    transition: opacity 0.9s ease 0.2s;
}

.tutorial-intro.leaving .tutorial-intro-backdrop {
    opacity: 0;
}

.tutorial-concha-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 290px;
    height: 290px;
    margin: -145px 0 0 -145px;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.tutorial-concha-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 0 28px rgba(251, 191, 36, 0.35));
    animation: tutorialConchaAppear 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tutorial-concha-btn:active img {
    transform: scale(0.91) rotate(-1deg);
}

.tutorial-intro.leaving .tutorial-concha-btn {
    pointer-events: none;
}

.tutorial-intro-message {
    position: absolute;
    left: 50%;
    top: calc(50% + 168px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fef3c7;
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.tutorial-intro-message.visible {
    opacity: 1;
}

.tutorial-intro.leaving .tutorial-intro-message {
    opacity: 0;
}

.tutorial-intro-message strong {
    color: #fbbf24;
}

.tutorial-intro-progress {
    padding: 4px 16px;
    border: 2px solid #fbbf24;
    border-radius: 9999px;
    font-size: 1.05rem;
    color: #fbbf24;
}

/* Mano que señala: la punta del dedo queda en el origen del contenedor y la mano gira alrededor de ella */
.tutorial-pointer {
    --pointer-size: 96px;
    --pointer-rotate: -30deg;
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tutorial-pointer.visible {
    opacity: 1;
}

.tutorial-pointer-img {
    position: absolute;
    left: calc(var(--pointer-size) * -0.457);
    top: calc(var(--pointer-size) * -0.04);
    width: var(--pointer-size);
    height: var(--pointer-size);
    transform-origin: 45.7% 4%;
    transform: rotate(var(--pointer-rotate));
    animation: tutorialPointerTap 1s ease-in-out infinite;
    user-select: none;
}

.tutorial-intro-pointer {
    left: calc(50% + 62px);
    top: calc(50% + 72px);
}

/* Pasos con el juego a la vista: la posición la calcula JS sobre la tarjeta de Manos Amasadoras o la concha */
.tutorial-game-pointer {
    --pointer-rotate: -25deg;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1500;
}

/* Primer giro gratis: la mano señala el botón de girar dentro de la ruleta (modal con z-index 2250).
   El botón queda al pie de la pantalla, así que la mano baja desde arriba y el globo va encima */
.tutorial-game-pointer.over-modal {
    --pointer-rotate: 155deg;
    z-index: 2300;
}

.tutorial-game-pointer.over-modal .tutorial-game-bubble {
    top: auto;
    bottom: calc(var(--pointer-size) * 1.05);
}

.tutorial-game-bubble {
    position: absolute;
    left: calc(var(--pointer-size) * 0.25);
    top: calc(var(--pointer-size) * 0.95);
    transform: translate(calc(-50% + var(--bubble-shift, 0px)), var(--bubble-shift-y, 0px));
    padding: 6px 12px;
    background: #1e293b;
    color: #fef3c7;
    border: 2px solid #fbbf24;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.tutorial-game-bubble strong {
    color: #fbbf24;
}

/* Globo con explicación (fusión): el texto largo se acomoda en varias líneas */
.tutorial-game-bubble.wide {
    width: 250px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.tutorial-bubble-note {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #fef3c7;
}

.tutorial-bubble-progress {
    margin-left: 4px;
    padding: 1px 8px;
    border: 1.5px solid #fbbf24;
    border-radius: 9999px;
    color: #fbbf24;
}

.building-card.tutorial-highlight,
.building-display-row.tutorial-highlight,
.mobile-tab-btn.tutorial-highlight,
.top-btn.tutorial-highlight,
.buildings-display-header.tutorial-highlight {
    outline: 3px solid #f59e0b;
    outline-offset: -3px;
}

/* Tarjeta que explica Producción Activa (posición y ancho los calcula JS) */
.tutorial-info-card {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1500;
    display: none;
    padding: 14px 16px;
    background: #1e293b;
    color: #fef3c7;
    border: 2px solid #fbbf24;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.tutorial-info-card.visible {
    display: block;
    animation: tutorialFadeIn 0.35s ease both;
}

.tutorial-info-title {
    color: #fbbf24;
    font-size: 1rem;
    font-weight: 800;
}

.tutorial-info-text {
    margin: 6px 0 12px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}

.tutorial-info-btn {
    padding: 7px 18px;
    background: #f59e0b;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
}

/* Durante la pantalla negra: la concha real se oculta y migajas y +1 quedan por encima del fondo */
body.tutorial-intro-active .main-concha-btn {
    visibility: hidden;
}

body.tutorial-intro-active .click-text,
body.tutorial-intro-active .crumb-particle {
    z-index: 2250;
}

@keyframes tutorialFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tutorialConchaAppear {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes tutorialPointerTap {
    0%, 100% { transform: rotate(var(--pointer-rotate)) translateY(0); }
    50% { transform: rotate(var(--pointer-rotate)) translateY(14px); }
}

@media (max-width: 820px), (pointer: coarse) {
    .tutorial-concha-btn {
        width: 220px;
        height: 220px;
        margin: -110px 0 0 -110px;
    }

    .tutorial-intro-message {
        top: calc(50% + 130px);
        font-size: 1.1rem;
    }

    .tutorial-pointer {
        --pointer-size: 76px;
    }

    .tutorial-intro-pointer {
        left: calc(50% + 46px);
        top: calc(50% + 54px);
    }

    .tutorial-game-bubble {
        font-size: 0.78rem;
    }
}

/* Comprar/Vender y 1 por vez/Todo bloqueados hasta comprar la primera Estufa */
.trade-mode-switch.locked,
.batch-mode-switch.locked {
    position: relative;
    background: #f1f5f9;
    border-color: #cbd5e1;
    cursor: not-allowed;
}

/* El gris va en los botones y no en el contenedor para que el candado conserve su color */
.trade-mode-switch.locked > *,
.batch-mode-switch.locked > * {
    pointer-events: none;
    filter: grayscale(1);
    opacity: 0.5;
}

.trade-mode-switch.locked::after,
.batch-mode-switch.locked::after {
    content: '🔒';
    position: absolute;
    right: -6px;
    top: -8px;
    font-size: 0.8rem;
    line-height: 1;
}

/* ========================================================
   PRODUCCIÓN ACTIVA: 3 SLOTS POR EDIFICIO (YA NO HAY TIENDA)
   Fila por edificio con su ícono, nombre y producción; abajo sus 3 slots.
   Vacío: "+" y precio. Comprado: nivel, CPS, botón de mejora y botón de venta (💰).
   ======================================================== */
.building-display-row.slot-row {
    display: flex;
}

.slot-row .b-row-header {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.b-row-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 10px;
    cursor: pointer;
}

.b-row-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.b-row-desc {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.3;
    color: #78716c;
}

.b-row-count-badge[hidden] {
    display: none;
}

.b-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.b-slot {
    position: relative;
    min-height: 116px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 12px;
    border: 1.5px solid #fde68a;
    background: #fffbeb;
    min-width: 0;
}

.b-slot.empty {
    padding: 0;
    border: 2px dashed #d6d3d1;
    background: #fafaf9;
}

.b-slot.empty:not(.disabled):hover {
    border-color: var(--accent-color);
    background: #fff7ed;
}

.b-slot-buy {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    border: none;
    border-radius: 10px;
    background: none;
    color: #92400e;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.b-slot-plus {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.b-slot-price {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.78rem;
    font-weight: 800;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.b-slot.empty.disabled .b-slot-buy {
    color: #a8a29e;
    cursor: not-allowed;
}

.b-slot-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}

.b-slot-sell {
    flex-shrink: 0;
    padding: 1px 6px;
    border: 1px solid #e7e5e4;
    border-radius: 9999px;
    background: #ffffff;
    color: #57534e;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
    cursor: pointer;
    touch-action: manipulation;
}

.b-slot-sell.confirming {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff;
}

.b-slot-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.b-slot-cps {
    font-size: 0.72rem;
    font-weight: 800;
    color: #9a3412;
    text-align: center;
}

.b-slot-upgrade {
    width: 100%;
    margin-top: auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    /* safe: si el precio no cabe, se recorta por la derecha y no se pierde el nivel */
    justify-content: safe center;
    gap: 3px;
    padding: 4px;
    border: 1.5px solid #d97706;
    border-radius: 9999px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    touch-action: manipulation;
}

button.b-slot-upgrade:not(.disabled):hover {
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
}

.b-slot-upgrade.disabled {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

.b-slot-upgrade.maxed {
    background: linear-gradient(135deg, #fef08a 0%, #fbbf24 100%);
    border-color: #f59e0b;
    cursor: default;
}

.b-slot .mini-concha-icon {
    width: 14px;
    height: 14px;
}

.b-slot-upgrade-head {
    white-space: nowrap;
}

.b-slot-upgrade-head .mini-concha-icon {
    vertical-align: -2px;
}

.b-slot.maxed .unit-level-badge {
    background: linear-gradient(135deg, #e11d48, #f59e0b);
}

/* Maestría (3 slots en Nv.10): brillo fijo, sin animar box-shadow */
.b-slot.max-golden-aura {
    border: 2px solid #f59e0b;
    box-shadow: 0 0 8px 2px rgba(250, 204, 21, 0.6);
}

/* Edificio bloqueado: solo "???" sin slots */
.slot-row.building-hidden {
    background: #f5f5f4;
    border-style: dashed;
}

.slot-row.building-hidden .b-slots {
    display: none;
}

.slot-row.building-hidden .b-row-name,
.slot-row.building-hidden .b-row-desc {
    color: #a8a29e;
}

.slot-row.building-hidden .b-row-icon {
    cursor: default;
    background: #e7e5e4;
    border-color: #d6d3d1;
}

@media (max-width: 820px), (pointer: coarse) {
    .b-row-icon {
        width: 40px;
        height: 40px;
    }

    .b-row-icon img {
        width: 34px;
        height: 34px;
    }

    .b-slots {
        gap: 6px;
    }

    .b-slot {
        min-height: 104px;
        padding: 5px 4px;
    }

    .b-slot-icon img {
        width: 34px;
        height: 34px;
    }

    /* El precio baja a un segundo renglón cuando no cabe (p. ej. "999.99 cuatrill.") */
    .b-slot-upgrade {
        font-size: 0.66rem;
        padding: 3px 2px;
        gap: 0 2px;
        flex-wrap: wrap;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
        letter-spacing: -0.02em;
    }

    .b-slot.max-golden-aura {
        box-shadow: none;
    }
}

/* Interruptor "Máx" de cada edificio, en la línea del nombre: apagado, cada ⬆ sube 1 nivel; encendido,
   todos los que alcancen. Reemplaza a la barra "⬆ Mejorar x1 / Máx" que le quitaba altura a las tarjetas. */
.b-row-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.b-row-name-line .b-row-name {
    flex: 1;
    min-width: 0;
}

.b-max-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 4px;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.b-max-track {
    position: relative;
    width: 30px;
    height: 17px;
    border-radius: 9999px;
    background: #e7e5e4;
    border: 1px solid #d6d3d1;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.b-max-knob {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.b-max-label {
    font-size: 0.74rem;
    font-weight: 800;
    color: #a8a29e;
    transition: color 0.2s ease;
}

.b-max-toggle.on .b-max-track {
    background: #f59e0b;
    border-color: #d97706;
}

.b-max-toggle.on .b-max-knob {
    transform: translateX(13px);
}

.b-max-toggle.on .b-max-label {
    color: #b45309;
}

.slot-row.building-hidden .b-max-toggle {
    visibility: hidden;
}

/* ========================================================
   PESTAÑAS DEL PANEL: PRODUCCIÓN ACTIVA Y MINIJUEGOS
   ======================================================== */
.buildings-display-header.panel-tabs {
    padding: 10px 12px;
    gap: 8px;
    justify-content: stretch;
    flex-shrink: 0;
}

.panel-tab-btn {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.panel-tab-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.panel-tab-btn.active {
    background: #ffffff;
    color: #b45309;
    border-color: #ffffff;
}

.panel-tab-badge {
    position: absolute;
    top: -5px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: #dc2626;
    color: #ffffff;
    border: 2px solid #ffffff;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 14px;
    text-align: center;
}

.minigames-list {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    align-content: start;
    gap: 12px;
}

.buildings-display-section[data-panel-tab="minigames"] .buildings-display-list {
    display: none;
}

.buildings-display-section[data-panel-tab="minigames"] .minigames-list {
    display: grid;
}

/* ===== Investigaciones (pestaña 🔬) ===== */
.panel-tab-btn[hidden] {
    display: none;
}

/* Las pestañas inactivas muestran solo su icono (con tres no caben los nombres, ni en la columna de escritorio).
   Al cambiar, la nueva crece y despliega su nombre mientras la anterior se encoge: la nueva la desplaza.
   flex-grow y max-width solo mueven tres botones chicos; el contenido se desliza con transform. */
.panel-tabs .panel-tab-btn {
    flex: 0 1 auto;
    gap: 0;
    transition: flex-grow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.panel-tabs .panel-tab-btn.active {
    flex-grow: 1;
}

.panel-tabs .panel-tab-btn:not(.active) {
    padding-left: 16px;
    padding-right: 16px;
}

.panel-tab-label {
    display: inline-block;
    overflow: hidden;
    max-width: 12em;
    margin-left: 8px;
    opacity: 1;
    vertical-align: bottom;
    transition: max-width 0.3s ease, margin-left 0.3s ease, opacity 0.25s ease;
}

.panel-tab-btn:not(.active) .panel-tab-label {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
}

/* Contenido: la lista nueva entra por un lado y empuja a la anterior, que sale por el otro */
.buildings-display-section.tab-sliding {
    position: relative;
}

.tab-leaving {
    z-index: 2;
    pointer-events: none;
    animation: panel-tab-out-left 0.3s ease forwards;
}

.tab-leaving.slide-from-left {
    animation-name: panel-tab-out-right;
}

.tab-entering {
    animation: panel-tab-in-right 0.3s ease;
}

.tab-entering.slide-from-left {
    animation-name: panel-tab-in-left;
}

@keyframes panel-tab-out-left {
    to { transform: translateX(-100%); opacity: 0.4; }
}

@keyframes panel-tab-out-right {
    to { transform: translateX(100%); opacity: 0.4; }
}

@keyframes panel-tab-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes panel-tab-in-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .panel-tabs .panel-tab-btn,
    .panel-tab-label {
        transition: none;
    }
}

.research-list {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-content: start;
    gap: 12px;
}

.buildings-display-section[data-panel-tab="research"] .buildings-display-list {
    display: none;
}

.buildings-display-section[data-panel-tab="research"] .research-list {
    display: grid;
}

/* Cada pestaña tiene su fondo clarito para saber dónde está uno: Hornos crema, Investigaciones azulado, Minijuegos morado */
.buildings-display-section[data-panel-tab="research"] {
    background-color: #eef5fc;
}

.buildings-display-section[data-panel-tab="minigames"] {
    background-color: #f5f0fc;
}

.research-intro,
.research-empty {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    font-weight: 600;
    color: #92400e;
}

.research-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.research-card.research-ready {
    border-color: #f59e0b;
}

/* Al comprarla, la tarjeta se va como un objetivo cumplido (solo opacity y transform, por Android) */
.research-card.research-completed {
    pointer-events: none;
    border-color: #10b981;
    animation: research-complete 0.38s ease forwards;
}

@keyframes research-complete {
    0% { opacity: 1; transform: scale(1); }
    35% { opacity: 1; transform: scale(1.03); }
    100% { opacity: 0; transform: translateX(40px) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
    .research-card.research-completed {
        animation-duration: 0.01s;
    }
}

.research-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.research-card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.research-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.research-card-name {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #78350f;
}

.research-card-new {
    font-size: 0.72rem;
    font-weight: 900;
    color: #ffffff;
    background: #10b981;
    border-radius: 9999px;
    padding: 2px 8px;
}


.research-next {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: #fffbeb;
    border-radius: 10px;
}

.research-next-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #78350f;
}

.research-effect {
    font-size: 0.78rem;
    font-weight: 800;
    color: #047857;
}

.research-next-desc {
    font-size: 0.8rem;
    color: #92400e;
}

.research-buy-btn {
    margin-top: 4px;
    padding: 8px 12px;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.research-buy-btn:active {
    transform: scale(0.98);
}

.research-buy-btn:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}


.minigame-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.minigame-card:hover {
    border-color: var(--accent-color);
}

.minigame-card:active {
    transform: scale(0.98);
}

.minigame-card-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.minigame-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.minigame-card-title {
    font-size: 1rem;
    font-weight: 800;
    color: #78350f;
}

.minigame-card-desc {
    font-size: 0.82rem;
    font-weight: 600;
    color: #92400e;
}

/* Estados que antes brillaban en la barra superior: aquí, un borde fijo (sin animaciones) */
.minigame-card.ready-spin {
    border-color: #f59e0b;
}

.minigame-card.active-hot {
    border-color: #f97316;
    background: #fff7ed;
}

/* Aviso "!" de la tarjeta (giro gratis, mandado por cobrar, Beto de regreso): fijo, sin rebote */
.minigame-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    border: 1.5px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    font-size: 0.7rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Estado del minijuego en lugar de su descripción (giros gratis, Beto en ruta o de regreso) */
.minigame-card-desc.has-status {
    color: #047857;
    font-weight: 800;
}

.minigame-card.locked {
    background: #f1f5f9;
    border-color: #cbd5e1;
    cursor: not-allowed;
}

.minigame-card.locked:active {
    transform: none;
}

.minigame-card.locked .minigame-card-icon {
    filter: grayscale(1);
    opacity: 0.4;
}

.minigame-card.locked .minigame-card-title,
.minigame-card.locked .minigame-card-desc {
    color: #94a3b8;
}

.minigame-card.locked .minigame-card-badge {
    display: none !important;
}

.minigame-card.locked::after {
    content: '🔒';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.9rem;
}

.minigame-card.tutorial-highlight,
.panel-tab-btn.tutorial-highlight {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}

/* ========================================================
   LA CONCHA RODANTE
   ======================================================== */
.runner-modal-box {
    width: 760px;
    max-width: 96vw;
    padding: 16px;
}

.runner-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fde68a;
    margin: 0 34px 10px;
}

.runner-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 62vh;
    border-radius: 12px;
    overflow: hidden;
    background: #7dd3fc;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.runner-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.runner-hud {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.runner-hud-coin {
    width: 20px;
    height: 20px;
    vertical-align: -5px;
    object-fit: contain;
}

/* Concha base en lugar de emoji (tarjeta, título y portada del minijuego) */
.minigame-card-img {
    display: block;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.runner-inline-concha {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -0.28em;
    object-fit: contain;
}

.charola-oven-concha {
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
    object-fit: contain;
}

.runner-hud-mult {
    background: #b45309;
    color: #ffffff;
    font-weight: 900;
}

.runner-hud-item {
    padding: 4px 10px;
    border-radius: 9999px;
    background: rgba(24, 14, 10, 0.6);
    color: #fef3c7;
    font-size: 0.9rem;
    font-weight: 700;
}

.runner-overlay {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: rgba(24, 14, 10, 0.72);
    cursor: default;
}

.runner-overlay.visible {
    display: flex;
}

.runner-overlay-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #fde68a;
}

.runner-overlay-text {
    max-width: 440px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #fef3c7;
}

/* Resumen al terminar: costo (rojo), lo juntado (verde) y la ganancia o pérdida */
.runner-summary {
    margin: 10px auto 0;
    width: min(300px, 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.runner-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.92rem;
}

.runner-summary-row.is-loss strong {
    color: #f87171;
}

.runner-summary-row.is-gain strong {
    color: #4ade80;
}

.runner-summary-total {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid rgba(254, 243, 199, 0.35);
    font-size: 1.05rem;
    font-weight: 800;
}

.runner-overlay-note {
    font-size: 0.82rem;
    color: #fcd34d;
}

.runner-play-btn {
    padding: 10px 22px;
    border: 2px solid #b45309;
    border-radius: 9999px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    touch-action: manipulation;
}

.runner-play-btn:active {
    transform: scale(0.96);
}

.runner-help {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #fcd34d;
    opacity: 0.85;
}

@media (max-width: 820px) {
    /* Las pestañas reemplazan al encabezado (que en celular estaba oculto) */
    .buildings-display-header.panel-tabs {
        display: flex;
        padding: 0 0 8px;
        background: transparent;
        box-shadow: none;
    }

    .panel-tab-btn {
        padding: 6px 10px;
        font-size: 0.85rem;
        border-color: #d97706;
        background: #ffffff;
        color: #92400e;
    }

    .panel-tab-btn:hover {
        background: #fffbeb;
    }

    .panel-tab-btn.active {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: #ffffff;
        border-color: #b45309;
    }

    .minigames-list,
    .research-list {
        padding: 2px 0 8px;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .panel-tabs .panel-tab-btn:not(.active) {
        padding: 6px 12px;
    }

    .research-card {
        padding: 10px 12px;
        border-radius: 10px;
    }

    .minigame-card {
        padding: 10px 12px;
        border-radius: 10px;
    }

    .minigame-card-icon {
        font-size: 1.6rem;
    }

    .minigame-card-img {
        width: 1.6rem;
        height: 1.6rem;
    }

    .minigame-card-title {
        font-size: 0.92rem;
    }

    .minigame-card-desc {
        font-size: 0.76rem;
    }

    .runner-modal-box {
        width: calc(100vw - 12px);
        max-width: none;
        padding: 12px 8px;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .runner-title {
        font-size: 1.1rem;
    }

    /* En celular el escenario es más alto para que el dedo tenga dónde tocar */
    .runner-stage {
        aspect-ratio: 4 / 3;
    }

    .runner-overlay-text {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    /* El resumen del final debe caber en el escenario de 4:3; si no cabe, la portada se desplaza */
    .runner-overlay {
        gap: 6px;
        padding: 8px 12px;
        justify-content: safe center;
        overflow-y: auto;
    }

    .runner-overlay-title {
        font-size: 1.05rem;
    }

    .runner-summary {
        margin-top: 6px;
        gap: 2px;
    }

    .runner-summary-row {
        font-size: 0.8rem;
    }

    .runner-summary-total {
        padding-top: 3px;
        font-size: 0.9rem;
    }

    .runner-play-btn {
        padding: 8px 18px;
        font-size: 0.9rem;
    }

    .runner-overlay-note {
        font-size: 0.75rem;
    }
}