/* Copyright (c) 2026 Josue Pablo Cantoya Di Benedetto. All rights reserved. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ===================================================
       VARIABLES DE COLOR INDEPENDIENTES DE CHAT EN LABORATORIO
       (Edita estos valores libremente para cambiar los colores del laboratorio!)
       =================================================== */
    --lab-ai-bubble-bg: linear-gradient(135deg, rgba(255, 0, 187, 0.2) 0%, rgba(168, 85, 247, 0.25) 100%);
    --lab-ai-bubble-border: rgba(255, 0, 187, 0.4);
    --lab-ai-bubble-color: #ffffff;
    --lab-ai-peak-color: rgba(255, 0, 187, 0.4);

    --lab-user-bubble-bg: linear-gradient(to right, #ec4899, #8b5cf6);
    --lab-user-bubble-color: #ffffff;
    --lab-user-peak-color: #8b5cf6;
    --lab-user-bubble-shadow: rgba(236, 72, 153, 0.3);

    --lab-system-bubble-bg: transparent;
    --lab-system-bubble-color: #f472b6;

    --lab-header-bubble-bg: linear-gradient(135deg, rgba(244, 114, 182, 0.18) 0%, rgba(168, 85, 247, 0.18) 100%);
    --lab-header-bubble-border: #f472b6;
    --lab-header-bubble-color: #ffffff;

    --home-icon-color-arena: #00ff97cc;
    --home-icon-glow-arena: rgba(0, 255, 151, 0.6);
    --home-icon-color-lab: #ffffff;
    --home-icon-shadow-lab: drop-shadow(0 3px 2px rgba(0, 0, 0, 1)) drop-shadow(0 1px 3px rgba(0, 0, 0, 1)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 5px 15px rgba(0, 0, 0, 0.85));
    --home-icon-color: var(--home-icon-color-arena);
    --home-icon-filter: drop-shadow(0 0 6px var(--home-icon-glow-arena)); /* RESPLANDOR EDITABLE DEL ICONO DE HOME */
    --bg-primary: #ffffff;
    --bg-secondary: rgb(14 4 46);
    --accent-purple: #00ffff;
    --accent-purple-glow: rgba(0, 255, 255, 0.3);
    --accent-teal: #58a6ff;
    --accent-teal-glow: rgba(88, 166, 255, 0.3);
    --accent-red: #f43f5e;
    --text-main: #e0ffff;
    --text-muted: #aae5ff;
    --border-glow: rgba(0, 255, 255, 0.4);
    --font-body: 'Plus Jakarta Sans', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Naskh Arabic', 'Noto Nastaliq Urdu', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', 'Malgun Gothic', 'Nirmala UI', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* CONFIGURACIÓN DEL BRILLO (CIRCUITOS CENTRO.PNG) */
    --back-glow-color-normal: #00ffebcc;
    /* Color y opacidad (azul/turquesa) */
    --back-glow-color-lab: #ff00bbcc;
    /* Color y opacidad (rosa/laboratorio) */
    --back-glow-size-min: 4px;
    /* Tamaño del brillo mínimo en reposo */
    --back-glow-size-max: 12px;
    /* Tamaño del brillo máximo en el pulso */
    --deploy-delay: 0.4s;
    /* Retardo base de la animación secuencial del juego */
    --color-burbujauser: #6b54ef;
    /* Color base de la burbuja del usuario */
}

html {
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

*:focus {
    outline: none;
}

body {
    background-color: #ffffff;
    color: var(--text-main);
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    transition: background-color 0.3s ease;
}

/* Home Logo */
.home-logo-link {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.home-logo-link:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.8));
}

.home-logo {
    width: 80px;
    height: auto;
    border-radius: 8px;
}

@keyframes floatHologram {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.1);
        border-color: rgba(0, 255, 255, 0.4);
    }

    100% {
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.5), inset 0 0 40px rgba(0, 255, 255, 0.2);
        border-color: rgba(0, 255, 255, 0.8);
    }
}

.app-container {
    position: relative;
    width: 95vw;
    max-width: 900px;
    height: 85vh;
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 8px;
    border: 2px solid rgba(0, 255, 255, 0.4);
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    box-shadow:
        0 0 15px rgba(0, 255, 255, 0.2),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
    animation: floatHologram 6s ease-in-out infinite, pulseGlow 4s infinite alternate;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Durante la transición del laboratorio: header y footer transicionan suavemente
   a los colores del tema claro (puente visual) */
.app-container.in-transition header {
    position: relative;
    z-index: 10000;
    background: rgba(248, 250, 252, 0.95) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.app-container.in-transition footer {
    position: relative;
    z-index: 10000;
    background: rgba(248, 250, 252, 0.95) !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

/* Header */
header {
    padding: 16px 28px;
    border-bottom: 1px solid var(--border-glow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(8, 8, 12, 0.5);
    transition: background 0.25s ease, border-color 0.25s ease;
}

header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #fff 30%, var(--accent-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

header h1 .subtitle {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--accent-teal);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 6px;
}

.controls-section {
    display: flex;
    gap: 12px;
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 48px;
    right: 0;
    background: rgba(0, 20, 40, 0.95);
    border: 1px solid var(--accent-purple);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 220px;
    z-index: 1001;
    box-shadow: 0 0 15px var(--accent-purple-glow);
    display: flex;
    flex-direction: column;
}

.dropdown-menu.hidden {
    display: none;
}

.menu-item {
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 10px 16px;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    width: 100%;
    transition: var(--transition-smooth);
}

.menu-item:hover {
    background: rgba(0, 255, 255, 0.15);
    color: #fff;
}

.menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

.disabled-menu-item {
    opacity: 0.5;
    cursor: not-allowed;
}

.disabled-menu-item:hover {
    background: transparent;
    color: var(--text-main);
}

.menu-lang-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.lang-options {
    display: flex;
    flex-direction: column;
    background: rgba(0, 10, 20, 0.4);
    border-top: 1px solid rgba(0, 255, 255, 0.1);
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    padding: 4px 0;
    transition: max-height 0.3s ease;
}

.lang-options.hidden {
    display: none;
}

.lang-option-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 24px;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    width: 100%;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lang-option-btn:hover {
    background: rgba(0, 255, 255, 0.1);
    color: #fff;
}

.lang-option-btn.active {
    color: #00ffff;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.lang-option-btn.active::after {
    content: "✓";
    font-size: 0.85rem;
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

.icon-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glow);
    color: var(--text-main);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.icon-btn:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--accent-purple);
    box-shadow: 0 0 12px var(--accent-purple-glow);
}

/* Content Area Wrapper */
.content-area {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Landing Page & Cards */
.main-workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.hero-section {
    text-align: center;
    max-width: 800px;
    margin: auto;
}

.hero-section h2 {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #fff;
}

.hero-section p {
    color: #6a7f99;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

.mode-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.mode-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glow);
    padding: 32px 24px;
    border-radius: 16px;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.mode-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-purple);
    transform: scaleY(0);
    transition: var(--transition-smooth);
}

.mode-card.active:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(20, 184, 166, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.mode-card.active:hover::before {
    background: var(--accent-teal);
    transform: scaleY(1);
}

.mode-card.locked {
    opacity: 0.55;
    cursor: not-allowed;
}

.mode-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid var(--border-glow);
}

.mode-badge.active {
    background: rgba(20, 184, 166, 0.15);
    color: var(--accent-teal);
    border-color: rgba(20, 184, 166, 0.3);
}

.mode-card h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
    color: #fff;
}

.mode-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    header {
        padding: 6px 12px;
    }

    header h1 {
        font-size: 1.02rem;
    }

    .icon-btn {
        width: 32px;
        height: 32px;
    }

    .main-workspace {
        padding: 0px 12px;
    }

    .hero-section h2 {
        font-size: 1.1rem;
        margin-bottom: 4px;
    }

    .hero-section p {
        font-size: 0.75rem;
        margin-bottom: 8px;
        line-height: 1.25;
    }

    .mode-selector {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mode-card {
        padding: 8px 12px;
        padding-top: 25px;
        border-radius: 10px;
    }

    .mode-card h3 {
        font-size: 0.92rem;
        margin-bottom: 2px;
    }

    .mode-card p {
        font-size: 0.68rem;
        line-height: 1.15;
    }

    .mode-badge {
        top: 8px;
        right: 8px;
        font-size: 0.55rem;
        padding: 1px 5px;
    }
}

/* Chat view */
.game-viewport {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 300px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    .game-viewport {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    border-right: 1.5px solid var(--border-glow);
    overflow-x: hidden;
}

.chat-viewport-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    min-height: 0;
    width: 100%;
    overflow-x: hidden;
}

.chat-indicators {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 6px;
    background: rgba(10, 10, 15, 0.45);
    border: none;
    border-left: 1.5px solid var(--border-glow);
    width: 46px;
    flex-shrink: 0;
    height: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: var(--transition-smooth);
    outline: none;
}

.chat-indicators:hover {
    background: rgba(139, 92, 246, 0.08);
    box-shadow: inset 0 0 10px rgba(139, 92, 246, 0.1);
}

.indicator-num {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 700;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition-smooth);
    user-select: none;
    pointer-events: none;
    /* Let click pass to the parent button container */
}

.indicator-num.positive {
    color: #38bdf8;
    /* Blue */
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.indicator-num.negative {
    color: #ef4444;
    /* Red */
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Chat bubbles */
.message-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 85%;
    animation: messagePop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes messagePop {
    0% {
        transform: translateY(10px) scale(0.98);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.message-wrapper.ai {
    align-self: flex-start;
    flex-direction: row;
}

.message-wrapper.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-wrapper.system {
    align-self: center;
    max-width: 90%;
    flex-direction: row;
}

.message-bubble {
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
    position: relative;
}

.message-wrapper.ai .message-bubble {
    background: linear-gradient(135deg, var(--border-glow) 0%, #7234ff40 100%) !important;
    border: 1px solid var(--border-glow);
    color: var(--text-main);
    border-top-left-radius: 0;
    opacity: 0;
    animation: opponent-bubble-appear 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.message-wrapper.ai .message-bubble::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 10px 0;
    border-color: transparent var(--border-glow) transparent transparent;
}

.message-wrapper.user .message-bubble {
    background: linear-gradient(to right, var(--accent-purple), #6b54ef);
    color: #fff;
    border-top-right-radius: 0;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

.message-wrapper.user .message-bubble::after {
    content: "";
    position: absolute;
    top: 0;
    right: -7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 10px 8px;
    border-color: transparent transparent transparent var(--color-burbujauser);
}

.message-wrapper.system .message-bubble {
    background: #ffffff00;

    color: var(--accent-teal);
    font-size: 0.85rem;
    border-radius: 10px;
    text-align: center;
}

.message-wrapper.scenario-header .message-bubble {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.18) 0%, rgba(139, 92, 246, 0.18) 100%) !important;
    border: 1.5px solid var(--accent-teal) !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
    text-align: justify !important;
    padding: 16px 20px !important;
    opacity: 0;
    transform: translateY(-20px);
    animation: deploy-bubble-desktop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.analyst-feedback {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
    border: 1.5px solid var(--accent-teal) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 500;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.2) !important;
    text-align: left !important;
}

.analyst-feedback.red-feedback {
    background: linear-gradient(180deg, #fe022c 0%, #b84747cf 100%) !important;
    border: 1.5px solid var(--accent-red) !important;
    box-shadow: 0 4px 15px rgba(244, 63, 94, 0.2) !important;
}

.play-msg-btn {
    float: right;
    margin-left: 10px;
    margin-bottom: 5px;
    shape-outside: circle(50%);
    background: rgba(11, 26, 48, 0.8);
    border: 1px solid var(--accent-teal);
    color: var(--text-main);
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: var(--transition-smooth);
    opacity: 0.3;
    flex-shrink: 0;
    outline: none;
}

.message-wrapper:hover .play-msg-btn {
    opacity: 1;
}

.play-msg-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: var(--accent-purple);
    box-shadow: 0 0 10px var(--accent-purple-glow);
    transform: scale(1.1);
}

/* Chat Input Bar */
.input-area {
    padding: 16px 24px;
    border-top: 1px solid var(--border-glow);
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(8, 8, 12, 0.3);
}

.input-area textarea {
    width: 100%;
    height: 64px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glow);
    border-radius: 12px;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 12px 16px;
    resize: none;
    outline: none;
    transition: var(--transition-smooth);
    box-sizing: border-box;
}

.input-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
}

.input-actions-row button {
    height: 42px;
}

.input-area textarea:focus {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent-purple);
    box-shadow: 0 0 10px var(--accent-purple-glow);
}

.input-area textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.input-area button {
    background: var(--accent-teal);
    border: none;
    color: #000;
    font-weight: 600;
    padding: 0 24px;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.input-area button:hover {
    background: #2dd4bf;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-teal-glow);
}

.input-area button:disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

.input-area .mic-btn {
    height: 42px !important;
    width: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(11, 26, 48, 0.8) !important;
    border: 1px solid var(--accent-teal) !important;
    color: var(--text-main) !important;
    cursor: pointer !important;
    font-size: 1.15rem !important;
    transition: var(--transition-smooth) !important;
    box-shadow: none !important;
    transform: none !important;
}

.input-area .mic-btn:hover {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: var(--accent-purple) !important;
    box-shadow: 0 0 10px var(--accent-purple-glow) !important;
}

.input-area .mic-btn.recording {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    animation: micPulse 1.2s infinite alternate !important;
}

.mic-btn:not(:disabled) .mic-icon-svg {
    stroke: url(#mic-gradient) !important;
}

.mic-btn:disabled .mic-icon-svg {
    stroke: var(--text-muted) !important;
}

#send-btn {
    height: 42px !important;
    width: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(11, 26, 48, 0.8) !important;
    border: 1px solid var(--accent-teal) !important;
}

#send-btn .send-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: var(--transition-smooth);
}

#send-btn:disabled .send-icon-img {
    opacity: 0.3;
}

.loading-hourglass {
    width: 20px;
    height: 20px;
    animation: hourglass-spin 1.2s infinite ease-in-out;
}

@keyframes hourglass-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

@keyframes micPulse {
    0% {
        box-shadow: 0 0 5px rgba(239, 68, 68, 0.4);
    }

    100% {
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.8);
    }
}

/* Sidebar Dashboard */
.sidebar {
    padding: 16px;
    background: rgba(10, 10, 15, 0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

.scenario-info {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glow);
    padding: 16px;
    border-radius: 12px;
}

.scenario-info h4 {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--accent-teal);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.scenario-info p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.stat-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    cursor: help;
    padding: 6px;
    transition: var(--transition-smooth);
}


.stat-group:hover,
.stat-group.active-tooltip {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    z-index: 10 !important;
}

.stat-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    transform: translateY(10px);
    width: 100%;
    padding: 12px;
    background: rgba(10, 20, 30, 0.98);
    border: 1px solid var(--border-glow);
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--text-main);
    line-height: 1.45;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 255, 255, 0.3);
    pointer-events: none;
    opacity: 0;
    z-index: 10000;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-tooltip strong {
    color: var(--accent-purple);
    display: block;
    margin-bottom: 4px;
}

.stat-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0, 255, 255, 0.4) transparent transparent transparent;
}

.stat-group:hover .stat-tooltip,
.stat-group.active-tooltip .stat-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* For positive stats (top ones), position tooltip below */
.positive-stats .stat-tooltip {
    bottom: auto;
    top: calc(100% + 10px);
}

.positive-stats .stat-tooltip::after {
    bottom: auto;
    top: -6px;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent rgba(0, 255, 255, 0.4) transparent;
}


.stat-label {
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    font-weight: 500;
}

.stat-bar-container {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.stat-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-bar.health {
    background: linear-gradient(90deg, var(--accent-purple), #a78bfa);
}

.stat-bar.karma {
    background: linear-gradient(90deg, var(--accent-teal), #2dd4bf);
}

.stat-bar.sanity {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.stat-bar.control {
    background: linear-gradient(90deg, #00b4db, #0083b0);
}

.stat-bar.manip {
    background: linear-gradient(90deg, #ec008c, #fc6767);
}

.stat-bar.punitiveness {
    background: linear-gradient(90deg, #cb2d3e, #ef473a);
}

.stat-bar.passive {
    background: linear-gradient(90deg, #f12711, #f5af19);
}

.stat-bar.victim {
    background: linear-gradient(90deg, #8a2387, #e94057);
}

.action-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glow);
    color: var(--text-main);
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.action-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--accent-purple);
}

.action-btn.secondary {
    opacity: 0.7;
    margin-top: auto;
}

.action-btn.secondary:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-muted);
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: var(--transition-smooth);
}

.modal-content {
    background: #0f0f18;
    border: 1px solid var(--border-glow);
    padding: 32px;
    border-radius: 16px;
    max-width: 450px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.modal-content h3 {
    font-size: 1.25rem;
    color: #fff;
}

.modal-content p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.modal-content input {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glow);
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-mono);
    outline: none;
    font-size: 0.9rem;
}

.modal-content input:focus {
    border-color: var(--accent-purple);
}

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

.modal-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    border: none;
    background: var(--accent-purple);
    color: #fff;
    transition: var(--transition-smooth);
}

.modal-btn:hover {
    background: #7c3aed;
}

.modal-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glow);
    color: var(--text-main);
}

.modal-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Auth Modal */
.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-glow);
    margin-bottom: 8px;
}

.auth-tab {
    flex: 1;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.auth-tab:hover {
    color: #fff;
}

.auth-tab.active {
    color: var(--accent-purple);
    border-bottom-color: var(--accent-purple);
}

.auth-btn {
    width: 100%;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.auth-btn.primary {
    background: var(--accent-purple);
    color: #000;
}

.auth-btn.primary:hover {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 0 20px var(--accent-purple-glow);
}

.auth-btn.secondary {
    background: #2dd4bf;
    color: #022c22;
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.35);
}

.auth-btn.secondary:hover {
    background: #14b8a6;
    box-shadow: 0 0 25px rgba(45, 212, 191, 0.5);
}

.small-text {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.small-text a {
    color: var(--accent-teal);
    text-decoration: none;
}

/* Helper utility classes */
.hidden {
    display: none !important;
}

.mobile-action-buttons {
    display: none;
}

/* Footer */
footer {
    padding: 12px 28px;
    border-top: 1px solid var(--border-glow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(8, 8, 12, 0.5);
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

#status-indicator {
    font-family: var(--font-mono);
    color: var(--accent-teal);
}

#status-indicator.error {
    color: var(--accent-red);
}

#status-indicator.loading {
    color: var(--accent-purple);
}

.sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px) {
    body {
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: hidden;
        padding: 0;
    }

    .home-logo-link {
        position: relative;
        top: 0;
        left: 0;
        margin: calc(12px + env(safe-area-inset-top, 0px)) auto -8px auto;
        display: block;
        width: 70px;
        z-index: 1050;
    }

    .app-container {
        width: 100%;
        height: calc(100vh - (95px + env(safe-area-inset-top, 0px)));
        height: calc(100svh - (95px + env(safe-area-inset-top, 0px)));
        margin-bottom: 0px;
        position: relative;
        animation: none !important;
        /* Disable floating hologram animation on mobile to fix text blurriness */
    }

    .game-viewport {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
        position: relative;
    }

    .stats-close-btn {
        display: block !important;
        align-self: flex-end;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 1.6rem;
        cursor: pointer;
        padding: 4px;
        line-height: 1;
        margin-bottom: 12px;
        outline: none;
        transition: var(--transition-smooth);
    }

    .stats-close-btn:hover {
        color: var(--accent-purple);
        transform: scale(1.1);
    }

    .sidebar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 300px !important;
        height: 100% !important;
        background: #0b0f19 !important;
        border-right: 1.5px solid var(--border-glow) !important;
        padding: 24px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        z-index: 1200 !important;
        transform: translate3d(-100%, 0, 0) !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow-y: auto !important;
        box-shadow: none !important;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .sidebar.open {
        transform: translate3d(0, 0, 0) !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
    }

    .chat-indicators {
        display: flex !important;
        justify-content: flex-start !important;
        width: 32px !important;
        padding: 4px 2px !important;
        gap: 4px !important;
        border-left: 1px solid var(--border-glow) !important;
    }

    .chat-indicators .indicator-num {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.75rem !important;
    }

    .stats-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        position: static !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    .stats-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .stats-column.positive-stats {
        border-right: none !important;
        padding-right: 0 !important;
        border-bottom: 1px solid rgba(0, 255, 255, 0.1);
        padding-bottom: 16px;
    }

    .stat-group {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 6px !important;
        margin: 0 !important;
        background: transparent !important;
        cursor: help !important;
    }

    .stat-label {
        font-size: 0.8rem !important;
        display: flex !important;
        justify-content: space-between !important;
        font-weight: 500 !important;
        color: var(--text-main) !important;
    }

    .stat-label span:first-child {
        display: inline !important;
        /* Restore name visibility */
    }

    .stat-bar-container {
        width: 100% !important;
        height: 6px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 3px !important;
    }

    .stat-tooltip {
        display: block !important;
        position: absolute !important;
        background: #0f1322 !important;
        border: 1px solid var(--accent-purple) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(139, 92, 246, 0.4) !important;
        z-index: 15000 !important;
        pointer-events: none;
    }

    .sidebar-buttons {
        display: none !important;
    }

    .mobile-action-buttons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        background: #08080c !important;
        border-top: 1px solid var(--border-glow) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.lab-theme .mobile-action-buttons {
        background: var(--color-tema) !important;
        border-top: 1.5px solid #cbd5e1 !important;
    }

    .mobile-action-buttons .action-btn {
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .mobile-action-buttons .action-btn.glow-button-white,
    body.lab-theme .mobile-action-buttons .action-btn.glow-button-white {
        animation: buttonPulseWhiteMobile 1.5s infinite alternate !important;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
        border-color: #ffffff !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.35) 100%) !important;
        color: #ffffff !important;
    }

    @keyframes buttonPulseWhiteMobile {
        0% {
            transform: scale(1);
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
        }

        100% {
            transform: scale(1.03);
            box-shadow: 0 0 25px rgba(255, 255, 255, 0.95);
        }
    }

    /* Ocultar el logo flotante de Google reCAPTCHA v3 por defecto */
    .grecaptcha-badge {
        visibility: hidden !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.auth-modal-open .grecaptcha-badge {
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999999 !important;
    }


    footer {
        font-size: 0.6rem !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 8px 12px !important;
        text-align: center !important;
    }

    footer span:first-child {
        font-size: 0.52rem !important;
        opacity: 0.55 !important;
        line-height: 1.2 !important;
    }

}

.glow-button {
    animation: buttonPulse 1.5s infinite alternate;
    box-shadow: 0 0 15px var(--accent-purple-glow);
    border-color: var(--accent-purple) !important;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.4) 0%, rgba(88, 166, 255, 0.4) 100%) !important;
}

@keyframes buttonPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 5px var(--accent-purple-glow);
    }

    100% {
        transform: scale(1.03);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    }
}

.glow-button-lilac {
    animation: buttonPulseLilac 1.5s infinite alternate;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
    border-color: #a855f7 !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.4) 0%, rgba(192, 132, 252, 0.4) 100%) !important;
    color: #ffffff !important;
}

@keyframes buttonPulseLilac {
    0% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(168, 85, 247, 0.4);
    }

    100% {
        transform: scale(1.03);
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
    }
}

.glow-button-white {
    animation: buttonPulseWhite 1.5s infinite alternate;
    box-shadow: 0 0 15px rgba(100, 116, 139, 0.3);
    border-color: #ffffff !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
    color: #ffffff !important;
}

@keyframes buttonPulseWhite {
    0% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(100, 116, 139, 0.3);
    }

    100% {
        transform: scale(1.03);
        box-shadow: 0 0 20px rgba(148, 163, 184, 0.7);
    }
}

/* Voice Recorder HUD */
.voice-recorder-hud {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px dashed rgba(239, 68, 68, 0.4);
    border-radius: 12px;
    margin-bottom: 8px;
    animation: fadeIn 0.3s ease;
}

.voice-recorder-hud.hidden {
    display: none !important;
}

.recording-status {
    color: #ef4444;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: textBlink 1.5s infinite alternate;
}

@keyframes textBlink {
    0% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.audio-wave {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
}

.audio-wave .stroke {
    display: block;
    width: 3px;
    height: 100%;
    background: #ef4444;
    border-radius: 2px;
    animation: wavePulse 1.2s infinite ease-in-out;
}

.audio-wave .stroke:nth-child(1) {
    animation-delay: 0.1s;
    height: 30%;
}

.audio-wave .stroke:nth-child(2) {
    animation-delay: 0.3s;
    height: 60%;
}

.audio-wave .stroke:nth-child(3) {
    animation-delay: 0.6s;
    height: 100%;
}

.audio-wave .stroke:nth-child(4) {
    animation-delay: 0.4s;
    height: 80%;
}

.audio-wave .stroke:nth-child(5) {
    animation-delay: 0.2s;
    height: 50%;
}

.audio-wave .stroke:nth-child(6) {
    animation-delay: 0.5s;
    height: 75%;
}

.audio-wave .stroke:nth-child(7) {
    animation-delay: 0.15s;
    height: 40%;
}

@keyframes wavePulse {

    0%,
    100% {
        transform: scaleY(0.3);
    }

    50% {
        transform: scaleY(1);
    }
}



.error-msg {
    color: #ef4444;
    font-size: 0.8rem;
    text-align: center;
    margin: 0;
    font-family: var(--font-mono);
}

/* Deep Analysis v1.2 premium styles */
.analysis-modal-content {
    position: relative;
    background: rgba(15, 15, 24, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 16px !important;
    animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    max-height: 85vh;
    overflow-y: auto;
}

#deep-analysis-modal .analysis-modal-content {
    overflow: hidden !important;
}

.analysis-scroll-area {
    max-height: 72vh;
    overflow-y: auto;
}

/* Premium scrollbar for the analysis modal and scroll areas */
.analysis-modal-content::-webkit-scrollbar,
.analysis-scroll-area::-webkit-scrollbar {
    width: 6px;
}

.analysis-modal-content::-webkit-scrollbar-track,
.analysis-scroll-area::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.analysis-modal-content::-webkit-scrollbar-thumb,
.analysis-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.3);
    border-radius: 8px;
}

.analysis-modal-content::-webkit-scrollbar-thumb:hover,
.analysis-scroll-area::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 85, 247, 0.5);
}

.analysis-modal-content #close-analysis-btn {
    position: absolute;
    top: 20px;
    right: 24px;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

.analysis-modal-content #close-analysis-btn:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .analysis-modal-content #close-analysis-btn {
        top: 14px;
        right: 16px;
        font-size: 2rem !important;
    }

    #deep-analysis-modal .analysis-modal-content {
        max-height: 80vh !important;
        margin: auto 10px !important;
        width: 92% !important;
    }

    #deep-analysis-modal .analysis-scroll-area {
        max-height: 66vh !important;
    }
}

@keyframes modalSlideIn {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.analysis-section {
    margin-bottom: 1.25rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid rgba(45, 212, 191, 0.6);
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
}

.analysis-section:hover {
    background: rgba(45, 212, 191, 0.05);
}

.analysis-section h4 {
    margin-top: 0;
    margin-bottom: 0.6rem;
    color: #2dd4bf;
    text-shadow: 0 0 10px rgba(45, 212, 191, 0.4);
    font-size: 1.05rem;
    font-family: var(--font-display);
    display: flex;
    align-items: center;
    gap: 8px;
}

.analysis-section p {
    margin: 0;
    font-size: 0.92rem !important;
    color: #fbffffe3 !important;
    line-height: 1.55;
}

.analysis-section.alternativa-section {
    border-left-color: #2dd4bf;
    background: rgba(45, 212, 191, 0.03);
}

.analysis-section.alternativa-section h4 {
    color: #2dd4bf;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Mobile Dictation Tip */
.dictation-tip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: rgba(11, 26, 48, 0.95);
    border: 1px solid var(--border-glow);
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 30px 12px 15px;
    color: #fff;
    font-size: 0.85rem;
    font-family: var(--font-body);
    margin-bottom: 10px;
    z-index: 100;
    text-align: left;
}

.dictation-tip .close-tip {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-muted);
}

.input-area {
    position: relative;
}

@media (max-width: 768px) {
    #mic-btn {
        display: none !important;
    }
}

/* Input Wrapper (Desktop & Mobile) */
.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

@media (max-width: 768px) {
    .input-wrapper {
        flex-direction: row;
        align-items: flex-end;
        gap: 8px;
    }

    .input-actions-row {
        width: auto !important;
        margin: 0 !important;
    }

    #user-input {
        flex: 1;
        height: 42px;
        min-height: 42px;
        max-height: 150px;
        overflow-y: hidden;
        /* Hide scrollbar until max height is reached */
        padding-top: 11px;
        padding-bottom: 11px;
        line-height: 1.2;
    }

    /* Hide scrollbars on mobile globally */
    *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    * {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

    /* Optimize scenario header for mobile */
    .message-wrapper.scenario-header {
        max-width: none !important;
        width: calc(100% + 40px) !important;
        margin-top: -20px !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        position: relative !important;
        display: block !important;
    }

    .message-wrapper.scenario-header .message-bubble {
        width: 100% !important;
        border-radius: 0 !important;
        /* Completely straight corners to match edge-to-edge layout */
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        padding-top: 25px !important;
        padding-left: 30px !important;
        padding-right: 20px !important;
        margin: 0 !important;
    }

    .play-msg-btn {
        display: none !important;
    }

    /* Optimize chat space */
    .message-bubble {
        padding: 8px 12px !important;
        font-size: 0.88rem !important;
        line-height: 1.35 !important;
    }

    .chat-messages {
        padding: 10px !important;
        gap: 8px !important;
    }

    .chat-container {
        padding-top: 0px !important;
    }

    .analysis-section {
        padding: 0.8rem !important;
        margin-bottom: 0.8rem !important;
    }

    .analysis-section h4 {
        margin-bottom: 0.4rem !important;
        font-size: 0.95rem !important;
    }

    .analysis-section p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    #analysis-results-content {
        gap: 10px !important;
    }

    .modal-content {
        padding: 16px !important;
    }
}

/* Prevent logo overlap on smaller desktop screens */
@media (max-width: 1250px) and (min-width: 769px) {
    .home-logo-link {
        position: relative;
        top: auto;
        left: auto;
        align-self: flex-start;
        margin-top: 20px;
        margin-right: 20px;
        margin-left: 20px;
    }

    .app-container {
        width: 100%;
        margin-right: 20px;
    }
}

@media (max-width: 768px) {
    .message-wrapper {
        max-width: 98% !important;
    }

    .lab-mode-cards {
        flex-direction: column;
        gap: 12px !important;
    }
}

/* Laboratory setup styles */
.lab-mode-card {
    transition: all 0.3s ease;
}

.lab-mode-card.active {
    border-color: #2dd4bf !important;
    background: rgba(45, 212, 191, 0.08) !important;
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.25) !important;
}

.lab-mode-card.active h4 {
    color: #2dd4bf !important;
}

.lab-mode-card:not(.active):hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.lab-mode-card:not(.active) h4 {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Custom white styling for Modo Laboratorio card */
#mode-laboratorio {
    border-color: rgba(255, 255, 255, 0.6) !important;
}

#mode-laboratorio h3 {
    color: #ffffff !important;
}

#mode-laboratorio p {
    color: rgba(255, 255, 255, 0.9) !important;
}

#mode-laboratorio .mode-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

#mode-laboratorio::before {
    background: #ffffff !important;
}

#mode-laboratorio.active:hover {
    border-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.15) !important;
}

#mode-laboratorio.active:hover::before {
    background: #ffffff !important;
}

/* 2x2 grid structure for Laboratory Mode */
.lab-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 25px auto;
}

@media (max-width: 768px) {
    .lab-grid {
        gap: 8px !important;
        margin: 0 auto 12px auto !important;
    }
}

.lab-menu-buttons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.lab-menu-buttons-container .lab-grid {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .lab-menu-buttons-container {
        gap: 12px;
    }
}

/* Warning storage info button */
.storage-info-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: all 0.2s;
    border: 2px solid;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Positioned inside main-workspace top-left */
#lab-menu-page .storage-info-btn {
    position: absolute;
    top: 12px;
    left: 12px;
}

body.lab-theme .storage-info-btn {
    background: transparent;
    border-color: #94a3b8;
    color: #64748b;
}

body.lab-theme .storage-info-btn:hover {
    background: #e2e8f0;
    border-color: #475569;
    color: #334155;
}

/* 
===========================================
   GLOBAL THEME: LABORATORY (MODO BLANCO)
===========================================
*/

body.lab-theme {

    /*Colores laboratorio */

    --color-tema: #f1f5f9;
    /*Esto cambia el color de todo el menu */
    --color-borde: #00d4ff;
    /*Esto cambia el color de todo el menu */
    --color-burbujabot: #ffffff;
    /*Esto cambia el color del borde y pico de la burbuja bot*/
    --color-burbujauser: #6b54ef;
    /*Esto cambia el color del borde y pico de la burbuja user*/



    background-color: #ffffff;
}

body.lab-theme .app-container {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
    animation: none;
}

body.lab-theme header {
    background: var(--color-tema) !important;
    border-bottom: 1px solid var(--color-tema) !important;
}

body.lab-theme header h1 {
    background: linear-gradient(135deg, #0f172a 30%, #0ea5e9 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.lab-theme header h1 .subtitle {
    background: #0284c7 !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.lab-theme .icon-btn {
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}

body.lab-theme .icon-btn:hover {
    background: #e0f2fe;
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
    color: #0284c7;
}

body.lab-theme footer {
    background: var(--color-tema) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #475569 !important;
}

body.lab-theme footer a {
    color: #0ea5e9 !important;
}

/* Rediseño tarjetas de Modo (Ataque / Defensa) */
body.lab-theme .lab-mode-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: none !important;
}

body.lab-theme .lab-mode-card h4 {
    color: #0f172a !important;
}

body.lab-theme .lab-mode-card p {
    color: #64748b !important;
}

body.lab-theme .lab-mode-card.active {
    background: #ffffff !important;
    border: 2px solid #0ea5e9 !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.15) !important;
}

body.lab-theme .lab-mode-card.active h4 {
    color: #0284c7 !important;
}



/* Exit Confirm Modal - Default Game Style (Red) */
.exit-modal-content {
    max-width: 480px;
    border: 2px solid #ef4444;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.45);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.exit-modal-title {
    margin-top: 0;
    margin-bottom: 8px;
    color: #ef4444;
    font-family: var(--font-display);
    font-size: 1.3rem;
}

.exit-modal-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-align: center;
}

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

.exit-modal-cancel {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-muted);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid;
    font-family: var(--font-body);
    font-weight: 600;
}

.exit-modal-accept {
    background: #ef4444;
    color: #fff;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
}

/* Exit Confirm Modal - Lab Theme (White/Blue) */
body.lab-theme .exit-modal-content {
    border-color: var(--accent-teal);
    box-shadow: 0 0 25px var(--accent-teal-glow);
    background: #ffffff;
}

body.lab-theme .exit-modal-title {
    color: #0f172a;
}

body.lab-theme .exit-modal-desc {
    color: #475569;
}

body.lab-theme .exit-modal-cancel {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}

body.lab-theme .exit-modal-accept {
    background: #2dd4bf;
    color: #022c22;
}

/* Menu User Info */
.menu-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: #c084fc;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-weight: 600;
    text-align: left;
}

.user-info-icon {
    font-size: 1rem;
}

#user-info-text {
    flex: 1;
}

/* Menu Logout Button */
.menu-logout-btn {
    color: #ef4444 !important;
    font-weight: 700;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 4px;
}

.menu-logout-btn:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ff6b6b !important;
}

/* Account Modal */
.account-modal-content {
    max-width: 460px;
    border: 2px solid var(--accent-purple);
    box-shadow: 0 0 25px var(--accent-purple-glow);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account-modal-title {
    margin-top: 0;
    margin-bottom: 4px;
    color: var(--accent-purple);
    font-family: var(--font-display);
    font-size: 1.3rem;
    text-align: center;
}

.account-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.account-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-size: 0.9rem;
}

.account-field-label {
    color: var(--text-muted);
    font-weight: 600;
}

.account-action-btn {
    background: rgba(108, 99, 255, 0.15);
    color: #c084fc;
    border: 1px solid rgba(108, 99, 255, 0.3);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    width: 100%;
    transition: var(--transition-smooth);
}

.account-action-btn:hover {
    background: rgba(108, 99, 255, 0.25);
    border-color: rgba(108, 99, 255, 0.5);
}

.account-danger-zone {
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.05);
}

.account-delete-btn {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    width: 100%;
    transition: var(--transition-smooth);
}

.account-delete-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
}

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

.account-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    font-size: 0.9rem;
    outline: none;
    font-family: var(--font-body);
    box-sizing: border-box;
}

.account-input:focus {
    border-color: var(--accent-purple);
    box-shadow: 0 0 10px var(--accent-purple-glow);
}

.account-feedback {
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
}

body.lab-theme .account-modal-content {
    border-color: var(--accent-teal);
    box-shadow: 0 0 25px var(--accent-teal-glow);
    background: #ffffff;
}

body.lab-theme .account-modal-title {
    color: #0f172a;
}

body.lab-theme .account-field {
    background: #f8fafc;
    color: #000000;
}

body.lab-theme .account-field-label {
    color: #475569;
}

body.lab-theme #account-email-value,
body.lab-theme #account-user-value {
    color: #000000;
}

body.lab-theme .account-input {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

body.lab-theme .account-input:focus {
    border-color: var(--accent-teal);
    box-shadow: 0 0 10px var(--accent-teal-glow);
}

/* Lab Builder Titles Border */
#lbl-build-attack-title,
#lbl-build-defense-title,
#lbl-play-attack-title,
#lbl-play-defense-title,

#lbl-lab-attack-title,
#lbl-lab-defense-title,
#lbl-lab-menu-title {
    text-shadow: none;
    font-weight: 800;
    color: #ffffff !important;
}

#lbl-lab-setup-title {
    text-shadow: none;
    font-weight: 800;
    color: #000000 !important;
}


body.lab-theme #lbl-lab-setup-desc {
    color: #0f172a !important;
    font-weight: 600;
    text-shadow: none;
}

body.lab-theme .mode-card {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

body.lab-theme .mode-card:hover {
    border-color: #f472b6;
    box-shadow: 0 8px 25px rgba(244, 114, 182, 0.2);
}

body.lab-theme .mode-card p {
    color: #475569;
}

body.lab-theme #lbl-lab-menu-desc {
    color: #0f172a !important;
    font-weight: 600;
    text-shadow: none;
}

/* Animacion Zoom Rebote para transiciones de Laboratorio */
@keyframes bounceZoom {
    0% {
        transform: scale(0.96);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.015);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-bounce {
    animation: bounceZoom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Custom Lab Tooltip Balloon */
.lab-balloon {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5), 0 0 10px rgba(168, 85, 247, 0.3);
    z-index: 1000;
    white-space: nowrap;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    border: 1px solid rgba(168, 85, 247, 0.5);
    animation: balloonFloat 2s infinite alternate ease-in-out;
}

@keyframes balloonFloat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-4px);
    }
}

.lab-balloon::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 40px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #7c3aed;
}

/* Lab Setup Inline Tooltips */
.lab-inline-stat-group {
    position: relative;
    cursor: help;
}

.lab-inline-stat-group .stat-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 8px);
    width: 220px;
    padding: 10px;
    background: rgba(10, 15, 30, 0.98);
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 8px;
    font-size: 0.76rem;
    color: #ffffff;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 10px rgba(168, 85, 247, 0.3);
    pointer-events: none;
    opacity: 0;
    z-index: 10000;
    transition: all 0.25s ease;
    white-space: normal;
    text-align: left;
}

.lab-inline-stat-group .stat-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: rgba(10, 15, 30, 0.98) transparent transparent transparent;
}

.lab-inline-stat-group:hover .stat-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Custom Play and Custom Defense Light Mode (White Theme) inside Lab Mode */

body.lab-theme #game-page {
    background: transparent !important;
    color: #0f172a !important;
}

body.lab-theme .chat-container {
    background: transparent !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.lab-theme .chat-messages {
    background: transparent !important;
}rapper.system .message-bubble


/* AI opponent bubble in custom modes under lab-theme */
body.lab-theme .message-wrapper.ai .message-bubble {
    background: rgba(241, 245, 249, 0.5) !important;
    border: 1px solid var(--color-burbujabot) !important;
    color: #0f172a !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

body.lab-theme .message-wrapper.ai .message-bubble::before {
    border-color: transparent var(--color-burbujabot) transparent transparent !important;
}

body.lab-theme .message-wrapper.ai .message-bubble::after {
    border-color: transparent var(--color-burbujabot) transparent transparent !important;
}

/* User bubble - keep purple but make it a clean solid color or nice gradient */
body.lab-theme .message-wrapper.user .message-bubble {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.5) 0%, rgba(99, 102, 241, 0.5) 100%) !important;
    border: var(--color-burbujauser);
    color: #ffffff !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1) !important;
}

/* System feedback bubble in custom modes under lab-theme */
body.lab-theme .message-wrapper.system .message-bubble {
    color: #11232a !important;
}

body.lab-theme .message-wrapper.system.red-feedback .message-bubble {
    background: rgba(255, 245, 245, 0.5) !important;
    border: 1px dashed rgba(239, 68, 68, 0.6) !important;
    color: #b91c1c !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Scenario Header bubble */
body.lab-theme .message-wrapper.scenario-header .message-bubble {
    background: linear-gradient(135deg, rgba(224, 242, 254, 0.5) 0%, rgba(243, 232, 255, 0.5) 100%) !important;
    border: 1.5px solid rgba(14, 165, 233, 0.6) !important;
    color: #0f172a !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    box-shadow: 0 0 15px rgb(255, 255, 255) !important;
}

body.lab-theme .message-wrapper.scenario-header .message-bubble strong,
.lab-theme .message-wrapper.scenario-header .message-bubble strong {
    color: #ffffff !important;
}

/* Input area */
body.lab-theme .input-area {
    background: var(--color-tema) !important;
    border-top: 1px solid var(--color-tema) !important;
}

body.lab-theme .input-area textarea {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #0f172a !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

body.lab-theme .input-area textarea::placeholder {
    color: #94a3b8 !important;
}

body.lab-theme .input-area textarea:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

body.lab-theme .input-area .mic-btn {
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

body.lab-theme .input-area .mic-btn:hover {
    background: #f1f5f9 !important;
    border-color: #7c3aed !important;
}

body.lab-theme #send-btn {
    background: linear-gradient(135deg, #0f5052 0%, #421475 100%) !important;
    box-shadow: none !important;
}

body.lab-theme #send-btn:hover {
    background: #6d28d9 !important;
}

body.lab-theme #send-btn:disabled {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
}

/* Sidebar and Stat Groups */
body.lab-theme .sidebar {
    background: #f8fafc !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.lab-theme .sidebar h3 {
    color: #0f172a !important;
}

body.lab-theme .stat-group {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

body.lab-theme .stat-group:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}

body.lab-theme .stat-label {
    color: #334155 !important;
}

body.lab-theme .stat-value {
    color: #0f172a !important;
}

body.lab-theme .stat-bar-container {
    background: #e2e8f0 !important;
}

body.lab-theme .chat-indicators {
    background: var(--color-tema) !important;
    border-left: 1px solid var(--color-tema) !important;
}

body.lab-theme .chat-indicators:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Stats History Modal Styles */
.stats-history-modal-content {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.25) !important;
    border-radius: 12px;
}

.stats-history-filters select {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stats-history-filters select:focus {
    border-color: #c084fc;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

.stats-chart-wrapper {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

.stats-table-wrapper {
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.4) rgba(0, 0, 0, 0.1);
}

.stats-table-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.stats-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.stats-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.4);
    border-radius: 3px;
}

#stats-history-table th,
#stats-history-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#stats-history-table tbody tr:hover {
    background: rgba(168, 85, 247, 0.05);
}

.stats-pill {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.stats-pill.attack {
    background: rgba(244, 63, 94, 0.15);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.stats-pill.defense {
    background: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
    border: 1px solid rgba(45, 212, 191, 0.3);
}

.stats-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.stats-badge-item {
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.stats-badge-item.positive {
    color: #2dd4bf;
    background: rgba(45, 212, 191, 0.05);
}

.stats-badge-item.negative {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

@media (max-width: 768px) {
    .stats-history-modal-content {
        padding: 16px !important;
        margin: 10px !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    .stats-chart-wrapper {
        height: 200px !important;
    }

    #stats-history-table thead {
        display: none;
    }

    #stats-history-table,
    #stats-history-table tbody,
    #stats-history-table tr,
    #stats-history-table td {
        display: block;
        width: 100%;
    }

    #stats-history-table tr {
        margin-bottom: 15px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--border-glow);
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
    }

    #stats-history-table td {
        border: none;
        padding: 6px 0;
        text-align: right;
        position: relative;
        padding-left: 50%;
        min-height: 28px;
    }

    #stats-history-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        font-weight: 600;
        text-align: left;
        color: #c084fc;
    }
}

/* Defense mode deep analysis expandable bar */
#lab-defense-deep-bar:hover {
    background: rgba(168, 85, 247, 0.1) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}

#lab-defense-deep-bar:active {
    background: rgba(168, 85, 247, 0.15) !important;
}

#lab-defense-deep-content {
    animation: deepSlideDown 0.25s ease-out;
}

/* Defense mode deep analysis expandable bar */
#lab-defense-deep-bar:hover {
    background: rgba(168, 85, 247, 0.1) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}

#lab-defense-deep-bar:active {
    background: rgba(168, 85, 247, 0.15) !important;
}

#lab-defense-deep-content {
    animation: deepSlideDown 0.25s ease-out;
}

@keyframes deepSlideDown {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 2000px;
    }
}

.auth-lang-dropdown-container {
    position: relative;
    z-index: 100;
}

.auth-lang-dropdown-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s, border-color 0.2s;
}

.auth-lang-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.auth-lang-dropdown-options {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: #0f0f18;
    border: 1px solid var(--border-glow);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    width: 140px;
    overflow: hidden;
}

.auth-lang-dropdown-options.hidden {
    display: none !important;
}

.auth-lang-dropdown-options .lang-option-btn-auth {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 8px 12px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.auth-lang-dropdown-options .lang-option-btn-auth:hover {
    background: rgba(108, 99, 255, 0.15);
    color: #fff;
}

.auth-lang-dropdown-options .lang-option-btn-auth.active {
    background: rgba(108, 99, 255, 0.25);
    color: #fff;
    font-weight: 600;
}

/* --- Gameplay Interface Entry Animations (Machine Assembly Effect) --- */
@keyframes deploy-from-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes deploy-from-right {
    0% {
        transform: translateX(30px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes deploy-bubble-desktop {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes deploy-bubble-mobile {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Trigger animations sequentially when game-page is initially loaded */
#game-page:not(.hidden) .mobile-action-buttons {
    opacity: 0;
    animation: deploy-from-bottom 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--deploy-delay) * 1) both !important;
}

#game-page:not(.hidden) .input-area {
    opacity: 0;
    animation: deploy-from-bottom 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--deploy-delay) * 2) both !important;
}

#game-page:not(.hidden) .chat-indicators {
    opacity: 0;
    animation: deploy-from-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--deploy-delay) * 3) both !important;
}

/* 4º: La burbuja de texto de cabecera / descripción del escenario (primer elemento del chat) */
#game-page:not(.hidden) #chat-messages .message-wrapper:first-child .message-bubble {
    opacity: 0;
    animation: deploy-bubble-desktop 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--deploy-delay) * 4) both !important;
}

@media (max-width: 768px) {
    #game-page:not(.hidden) #chat-messages .message-wrapper:first-child .message-bubble {
        transform: translateY(-100%);
        animation: deploy-bubble-mobile 0.8s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--deploy-delay) * 4) both !important;
    }
}

/* 5º: La burbuja del oponente (segundo elemento del chat - primer mensaje AI) */
#game-page:not(.hidden) #chat-messages .message-wrapper:nth-child(2) {
    opacity: 0;
    animation: opponent-bubble-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--deploy-delay) * 5) both !important;
}

@keyframes opponent-bubble-appear {
    0% {
        opacity: 0;
        transform: translateX(-20px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Typing Indicator Styles */
.typing-indicator-bubble {
    display: inline-block !important;
    padding: 12px 18px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-glow) !important;
    border-top-left-radius: 0 !important;
    max-width: fit-content !important;
}

body.lab-theme .typing-indicator-bubble {
    background: #ffffff !important;
    border: 1.5px solid #0ea5e9 !important;
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 10px;
}

.typing-indicator span {
    width: 7px;
    height: 7px;
    background-color: var(--text-main);
    border-radius: 50%;
    display: inline-block;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

body.lab-theme .typing-indicator span {
    background-color: #0f172a !important;
}

.typing-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing-bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1.0);
    }
}

/* Animaciones de despliegue para la configuración del laboratorio (construir modo ataque/defensa) */
.lab-setup-animate #lbl-lab-setup-title,
.lab-setup-animate #lbl-lab-setup-desc,
.lab-setup-animate #lbl-lab-context-label,
.lab-setup-animate #lbl-lab-text-label {
    opacity: 0;
    animation: slideFromLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lab-setup-animate #lbl-lab-setup-title {
    animation-delay: 0.05s;
}

.lab-setup-animate #lbl-lab-setup-desc {
    animation-delay: 0.1s;
}

.lab-setup-animate #lbl-lab-context-label {
    animation-delay: 0.15s;
}

.lab-setup-animate #lbl-lab-text-label {
    animation-delay: 0.25s;
}

.lab-setup-animate .lab-input-wrapper {
    opacity: 0;
    animation: slideFromRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lab-setup-animate .lab-form-group>div:nth-child(1) .lab-input-wrapper {
    animation-delay: 0.2s;
}

.lab-setup-animate .lab-form-group>div:nth-child(2) .lab-input-wrapper {
    animation-delay: 0.3s;
}

.lab-setup-animate #lab-bottom-container {
    opacity: 0;
    animation: slideFromBottom 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.35s;
}

@keyframes slideFromBottom {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideFromRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideFromLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animaciones y transiciones para clicks de botones del menú principal y modos */
.clicked-digital-glow {
    animation: labGlow 0.5s cubic-bezier(0.1, 0.8, 0.1, 1) forwards, fadeOutTransition 0.5s ease-out 0.5s forwards;
    pointer-events: none !important;
}

.clicked-lab-glow {
    animation: labGlow 0.5s cubic-bezier(0.1, 0.8, 0.1, 1) forwards, fadeOutTransition 0.5s ease-out 0.5s forwards;
    pointer-events: none !important;
}

.page-fade-out {
    animation: fadeOutPage 0.5s ease-out 0.5s forwards;
}

@keyframes fadeOutPage {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes digitalGlow {
    0% {
        box-shadow: 0 0 0 rgba(0, 255, 255, 0);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 40px 15px rgba(0, 255, 255, 0.95), inset 0 0 20px rgba(0, 255, 255, 0.7);
        transform: scale(0.98);
        border-color: #00ffff;
    }

    100% {
        box-shadow: 0 0 50px 20px rgba(0, 255, 255, 1), inset 0 0 25px rgba(0, 255, 255, 0.8);
        transform: scale(0.96);
        border-color: #00ffff;
    }
}

@keyframes labGlow {
    0% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 40px 15px rgba(255, 255, 255, 0.95), inset 0 0 20px rgba(255, 255, 255, 0.7);
        transform: scale(0.98);
        border-color: #ffffff;
    }

    100% {
        box-shadow: 0 0 50px 20px rgba(255, 255, 255, 1), inset 0 0 25px rgba(255, 255, 255, 0.8);
        transform: scale(0.96);
        border-color: #ffffff;
    }
}

@keyframes fadeOutTransition {
    0% {
        opacity: 1;
        transform: scale(0.96);
    }

    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

#lab-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999;
    pointer-events: none;
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
    will-change: clip-path, opacity;
    transition: clip-path 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease-out;
}

#lab-transition-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Entrada progresiva y escalonada de botones en el menú del laboratorio (lab-menu-page) */
.lab-menu-animate #lab-play-attack,
.lab-menu-animate #lab-play-defense,
.lab-menu-animate #lab-build-attack,
.lab-menu-animate #lab-build-defense,
.lab-menu-animate #lab-menu-back-btn {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lab-menu-animate #lab-play-attack {
    animation-delay: 0.05s;
}

.lab-menu-animate #lab-play-defense {
    animation-delay: 0.12s;
}

.lab-menu-animate #lab-build-attack {
    animation-delay: 0.19s;
}

.lab-menu-animate #lab-build-defense {
    animation-delay: 0.26s;
}

.lab-menu-animate #lab-menu-back-btn {
    animation-delay: 0.33s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================= */
/*   ESTILO DE LOS BOTONES FUTURISTAS        */
/* ========================================= */
/*   BOTONES FUTURISTAS (Vidrio al Frente)   */
/* ========================================= */
.module-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: center;
}

.btn {
    position: relative;
    width: 100%;
    max-width: 334px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    perspective: 800px;
    transition: transform 0.15s ease;
}

.btn:active,
.btn.pressed {
    transform: scale(0.97);
}

.capa-1,
.capa-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

.capa-1 {
    z-index: 1;
    opacity: 0;
}

.capa-2 {
    z-index: 3;
    opacity: 0;
}

.capa-1-borde {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
    background: transparent;
    border: 2px solid rgba(0, 119, 255, 0.321);
    box-shadow: inset 0 0 10px rgba(0, 119, 255, 0.132);
    -webkit-mask: url('assets/Boton.png') no-repeat center/contain;
    mask: url('assets/Boton.png') no-repeat center/contain;
    z-index: 2;
    animation: c1-borde 4.5s ease-in-out infinite;
}

.capa-2-borde {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
    background: transparent;
    border: 1px solid rgba(0, 119, 255, 0.634);
    box-shadow: inset 0 0 10px rgba(0, 119, 255, 0.132);
    -webkit-mask: url('assets/Boton.png') no-repeat center/contain;
    mask: url('assets/Boton.png') no-repeat center/contain;
    z-index: 4;
    animation: c2-borde 4.5s ease-in-out infinite;
}

.capa-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/Boton.png') no-repeat center/contain;
    background-color: #003d80;
    background-blend-mode: luminosity;
    -webkit-mask: url('assets/Boton.png') no-repeat center/contain;
    mask: url('assets/Boton.png') no-repeat center/contain;
}

.capa-neon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 119, 255, 0.22);
    border: 1px solid rgba(0, 119, 255, 0.5);
    box-shadow: inset 0 0 12px rgba(0, 119, 255, 0.15);
    -webkit-mask: url('assets/Boton.png') no-repeat center/contain;
    mask: url('assets/Boton.png') no-repeat center/contain;
}

.capa-1 .capa-neon {
    border-color: rgba(0, 119, 255, 0.25);
    box-shadow: inset 0 0 8px rgba(0, 119, 255, 0.08);
    background: rgba(0, 119, 255, 0.12);
}

.capa-2 .capa-neon {
    border-color: rgba(0, 119, 255, 0.5);
    box-shadow: inset 0 0 12px rgba(0, 119, 255, 0.15);
    background: rgba(0, 119, 255, 0.22);
}

@keyframes c1-borde {

    0%,
    100% {
        transform: translateY(8px) scale(1.03);
    }

    50% {
        transform: translateY(-5px) scale(1.01);
    }
}

@keyframes c2-borde {

    0%,
    100% {
        transform: translateY(-5px) scale(1.01);
    }

    50% {
        transform: translateY(8px) scale(.89);
    }
}

.color-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    background: #04142d;
    mix-blend-mode: color;
    opacity: .95;
    -webkit-mask: url('assets/Boton.png') no-repeat center/contain;
    mask: url('assets/Boton.png') no-repeat center/contain;
}

.vidrio-sharp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none;
    background: rgba(0, 119, 255, 0.04);
    border: 1px solid rgba(0, 119, 255, 0.85);
    border-radius: 6px;
    box-shadow: inset 0 0 12px rgb(0, 119, 255);
    -webkit-mask: url('assets/Boton.png') no-repeat center/contain;
    mask: url('assets/Boton.png') no-repeat center/contain;
}

.touch-glow {

    position: absolute;
    top: -60px;
    left: -420px;
    right: -419px;
    bottom: -60px;
    background: radial-gradient(circle, rgba(0, 119, 255, 0.5) 0%, transparent 20%);
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.25s ease;
}

.btn.pressed .touch-glow {
    opacity: 0.95;
}

.sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    pointer-events: none;
    background: radial-gradient(ellipse 120px 80px at 50% 50%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .2) 30%, rgba(100, 180, 255, .1) 50%, transparent 70%);
    background-size: 300% 100%;
    opacity: 0;
    -webkit-mask: url('assets/Boton.png') no-repeat center/contain;
    mask: url('assets/Boton.png') no-repeat center/contain;
    animation: sweep-beam 5.5s ease-in-out infinite;
}

@keyframes sweep-beam {

    0%,
    80% {
        opacity: 0;
        background-position: 600% 0;
    }

    86% {
        opacity: 1;
    }

    92% {
        opacity: .6;
    }

    100% {
        opacity: 0;
        background-position: -600% 0;
    }
}

.liquid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    pointer-events: none;
}

.txt {
    position: relative;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 32px;
    pointer-events: none;
}

.txt span {
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

.badge {
    position: absolute;
    right: 11px;
    top: -18px;
    font-size: .55rem !important;
    font-weight: 1000 !important;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    background: rgba(0, 119, 255, 0.15);
    border: 1px solid rgba(0, 119, 255, 0.4);
    color: #7fbeff !important;
}

.desc {
    font-size: .84rem;
    color: #6a7f99;
    line-height: 1.5;
    text-align: center;
    max-width: 90%;
}

/* ==========================================================================
   ESTILOS DE MENÚ DE ARENA Y LABORATORIO SIN CUADROS (Mobile-First)
   ========================================================================== */
.lab-grid .mode-card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 16px !important;
    text-align: center !important;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible !important;
}

/* Eliminar efectos de pseudo-elementos del fondo de la tarjeta */
.lab-grid .mode-card::before,
.lab-grid .mode-card::after {
    display: none !important;
}

/* Alineación y estilo del título */
.lab-grid .mode-card h3 {
    font-size: 1.25rem !important;
    color: var(--text-main) !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Alineación y estilo de la descripción */
.lab-grid .mode-card p {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    line-height: 1.45 !important;
    max-width: 250px !important;
    margin: 0 auto !important;
    text-align: center !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* Badge flotante de los submenús */
.lab-grid .mode-card .mode-badge {
    display: inline-block;
    padding: 3px 9px;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 12px;
    border: 1px solid rgba(0, 225, 255, 0.4) !important;
    background: rgba(0, 225, 255, 0.1) !important;
    color: #00e1ff !important;
    margin-bottom: 10px !important;
    position: static !important;
    transform: none !important;
}

/* Evitar sobreescrituras en el tema del laboratorio claro */
body.lab-theme .lab-grid .mode-card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

body.lab-theme .lab-grid .mode-card h3 {
    color: #0f172a !important;
    text-shadow: none !important;
}

body.lab-theme .lab-grid .mode-card p {
    color: #475569 !important;
    text-shadow: none !important;
}

body.lab-theme .lab-grid .mode-card .mode-badge {
    border-color: rgba(244, 114, 182, 0.4) !important;
    background: rgba(244, 114, 182, 0.1) !important;
    color: #f472b6 !important;
}

/* Transiciones de Menú Principal (Etapa 1) */
.module-card {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.app-container.menu-transitioning #landing-page .hero-section>h2,
.app-container.menu-transitioning #landing-page .hero-section>p,
.app-container.menu-transitioning #landing-page .module-card:not(.selected) {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(10px);
}

.module-card.selected {
    transform: scale(1.04);
    opacity: 1 !important;
}

.module-card.selected.fade-out {
    opacity: 0 !important;
    transform: scale(0.96) translateY(5px) !important;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out !important;
}

/* Transiciones de Submenú (Fase 1 y Fase 2) */
.mode-card {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.app-container.submenu-transitioning .main-workspace:not(.hidden) .hero-section>h2,
.app-container.submenu-transitioning .main-workspace:not(.hidden) .hero-section>p,
.app-container.submenu-transitioning .main-workspace:not(.hidden) .lab-menu-buttons-container>.back-btn-container,
.app-container.submenu-transitioning .main-workspace:not(.hidden) .storage-info-btn,
.app-container.submenu-transitioning .main-workspace:not(.hidden) .module-card:not(.selected) {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.module-card.selected {
    transform: scale(1.04);
    opacity: 1 !important;
}

.module-card.selected.fade-out {
    opacity: 0 !important;
    transform: scale(0.96) translateY(5px) !important;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out !important;
}

/* Submenús - Alineación de cabecera superior idéntica */
#arena-menu-page .hero-section,
#lab-menu-page .hero-section {
    margin-top: 75px !important;
    width: 100%;
}

.lab-build-toggle-icon {
    position: absolute;
    top: 24px;
    right: 24px;
    background: #00000036 !important;
    border: 1.5px solid #ffffff !important;
    color: #ffffff !important;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
    box-shadow: 0 0 12px #ffffff;
    padding: 0;
    outline: none;
}

.lab-build-toggle-icon:hover {
    background: #00000036 !important;
    border-color: #ffffff !important;
    transform: scale(1.1);
    box-shadow: 0 0 18px #ffffff;
}

.lab-build-toggle-icon.active {
    background: #ff00bb !important;
    color: #ffffff !important;
    border-color: #ff00bb !important;
    box-shadow: 0 0 24px rgba(255, 0, 187, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.3);
}

.lab-build-toggle-icon svg {
    transition: transform 0.3s ease;
}

.lab-build-toggle-icon:hover svg {
    transform: rotate(15deg);
}

.lab-build-toggle-icon.active svg {
    transform: rotate(45deg);
}

/* Contenedor del Botón Volver de Centro.png */
.back-btn-container {
    position: absolute !important;
    bottom: 5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 10;

    width: 210px !important;
    height: 105px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;

    /* Transición suave */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease-out, transform 0.4s ease-out !important;
}

/* Pseudo-elemento para la capa Centro.png (circuitos de fondo) con opacidad del 70% */
.back-btn-container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -webkit-mask: url('assets/Menu recortado/Centro.png') no-repeat center/contain !important;
    mask: url('assets/Menu recortado/Centro.png') no-repeat center/contain !important;
    background: #00ffeb !important;
    /* COLOR HEX ORIGINAL (azul turquesa) */
    opacity: 0.7 !important;
    /* Capa centro al 70% de opacidad */
    z-index: -1 !important;
    transition: opacity 0.3s ease, background 0.3s ease, filter 0.3s ease !important;
}

/* Tinte Rosa Dinámico solo para los circuitos de fondo en el Lab Menu */
.lab-theme .back-btn-container::before {
    background: #000000 !important;
    /* COLOR HEX DEL LABORATORIO (rosa magenta) */
}

.back-btn-container:hover {
    transform: translateX(-50%) scale(1.05) !important;
}

.back-btn-container:hover::before {
    opacity: 0.95 !important;
    filter: drop-shadow(0 0 10px var(--back-glow-color-normal)) drop-shadow(0 0 4px var(--back-glow-color-normal)) !important;
}

.lab-theme .back-btn-container:hover::before {
    filter: drop-shadow(0 0 10px var(--back-glow-color-lab)) drop-shadow(0 0 4px var(--back-glow-color-lab)) !important;
}

.back-btn-container:active {
    transform: translateX(-50%) scale(0.96) !important;
}

/* Pequeño Botón Circular HUD en el Centro del Reactor */
.btn-circular.btn-circular-small {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.btn-circular.btn-circular-small .txt {
    font-size: 0.62rem !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
    text-shadow: 0 0 6px #00ffebf2 !important;
}

.lab-theme .btn-circular.btn-circular-small .txt {
    text-shadow: 0 0 6px #000000 !important;
}

/* Evitar desalineación durante transiciones de menú */
.app-container.submenu-transitioning .main-workspace:not(.hidden) .lab-menu-buttons-container>.back-btn-container {
    transform: translateY(10px) translateX(-50%) !important;
}

/* Botón Submenú Circular HUD (Totalmente Independiente) */
.btn-circular {
    position: relative;
    width: 190px !important;
    height: 190px !important;
    max-width: 190px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    perspective: 800px;
    border-radius: 50% !important;
    margin: 0 auto 20px auto !important;
    transition: transform 0.15s ease;
}

.btn-circular:active,
.btn-circular.pressed {
    transform: scale(0.97) !important;
}

.btn-circular .capa-1,
.btn-circular .capa-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

.btn-circular .capa-1 {
    z-index: 1;
    opacity: 0;
}

.btn-circular .capa-2 {
    z-index: 3;
    opacity: 0;
}

.btn-circular .capa-1-borde {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
    border: none !important;
    box-shadow: none !important;
    -webkit-mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
    mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
    background: rgba(0, 255, 235, 0.55) !important;
    /* Turquesa neón brillante */
    z-index: 2;
}

.btn-circular .capa-2-borde {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
    border: none !important;
    box-shadow: none !important;
    -webkit-mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
    mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
    background: rgba(0, 171, 255, 0.55) !important;
    /* Cian neón brillante */
    z-index: 4;
}

.btn-circular .capa-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
    background-color: rgba(0, 255, 235, 0.12) !important;
    /* Tintado turquesa transparente */
    background-blend-mode: screen !important;
    -webkit-mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
    mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
}

.btn-circular .capa-neon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 255, 235, 0.25) !important;
    /* Brillo turquesa */
    border: none !important;
    box-shadow: none !important;
    -webkit-mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
    mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
}

.btn-circular .color-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    background: transparent !important;
    /* Quitar fondo negro */
    mix-blend-mode: normal !important;
    display: none !important;
    -webkit-mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
    mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
}

.btn-circular .vidrio-sharp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.05) !important;
    /* Cristal transparente */
    border: 1px solid rgba(0, 255, 235, 0.25) !important;
    box-shadow: none !important;
    -webkit-mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
    mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
}

.btn-circular .touch-glow {
    position: absolute;
    top: -30px;
    left: -150px;
    right: -150px;
    bottom: -30px;
    background: radial-gradient(circle, rgba(0, 150, 255, 0.5) 0%, transparent 20%);
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.25s ease;
}

.btn-circular.pressed .touch-glow {
    opacity: 0.95;
}

.btn-circular .sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    pointer-events: none;
    background: radial-gradient(ellipse 80px 80px at 50% 50%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(100, 180, 255, 0.1) 50%, transparent 70%);
    background-size: 300% 100%;
    opacity: 0;
    -webkit-mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
    mask: url('assets/Menu recortado/boton sub menu.png') no-repeat center/contain !important;
    animation: sweep-beam 5.5s ease-in-out infinite;
}

.btn-circular .liquid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    pointer-events: none;
}

.btn-circular .txt {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px #00ffebf2, 0 0 16px #00ffeb99 !important;
    line-height: 1.35 !important;
    pointer-events: none !important;
    z-index: 10;
}

/* Evitar que el span dentro de txt herede tamaños o sombras oscuras */
.btn-circular .txt span {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    text-shadow: inherit !important;
    letter-spacing: inherit !important;
}

/* Modos de Color para Laboratorio (Transparente y Rosa Pastel / Blanco) */
.lab-theme .btn-circular .capa-1-borde {
    background: #ffffffcf !important;
}

.lab-theme .btn-circular .capa-2-borde {
    background: #252525a3 !important;
}

.lab-theme .btn-circular .capa-bg {
    background-color: rgba(255, 0, 187, 0.12) !important;
    background-blend-mode: screen !important;
}

.lab-theme .btn-circular .capa-neon {
    background: rgba(255, 200, 240, 0.25) !important;
}

.lab-theme .btn-circular .color-layer {
    background: transparent !important;
    mix-blend-mode: normal !important;
    display: none !important;
}

.lab-theme .btn-circular .vidrio-sharp {
    background: rgba(255, 255, 255, 0.05) !important;
    /* Totalmente transparente con sutil reflejo de vidrio */
    border: 1px solid rgba(255, 0, 187, 0.25) !important;
}

.lab-theme .btn-circular .txt {
    color: #ffffff !important;
    /* Letras blancas de alta intensidad */
    text-shadow: 0 0 8px #000, 0 0 16px #ffffff99 !important;
}

.btn-circular:hover {
    transform: scale(1.05);
}

/* ===== ASYNCHRONOUS ROTATION ANIMATIONS FOR HUD BUTTONS ===== */

/* Attack Mode (Ataque y Ataque Personalizado) */
#arena-play-attack .capa-1-borde,
#lab-play-attack .capa-1-borde,
#lab-build-attack .capa-1-borde {
    animation: rot-attack-c1 6s ease-in-out infinite !important;
}

#arena-play-attack .capa-2-borde,
#lab-play-attack .capa-2-borde,
#lab-build-attack .capa-2-borde {
    animation: rot-attack-c2 6s ease-in-out infinite !important;
}

/* Defense Mode (Defensa y Defensa Personalizado) */
#arena-play-defense .capa-1-borde,
#lab-play-defense .capa-1-borde,
#lab-build-defense .capa-1-borde {
    animation: rot-defense-c1 6.5s ease-in-out infinite !important;
}

#arena-play-defense .capa-2-borde,
#lab-play-defense .capa-2-borde,
#lab-build-defense .capa-2-borde {
    animation: rot-defense-c2 6.5s ease-in-out infinite !important;
}

/* Back Buttons (Volver) */
.btn-circular-small .capa-1-borde {
    animation: rot-back-c1 5.5s ease-in-out infinite !important;
}

.btn-circular-small .capa-2-borde {
    animation: rot-back-c2 5.5s ease-in-out infinite !important;
}

/* Electric glow pulsing for Centro.png (staying fixed, no rotation) */
.back-btn-container::before {
    animation: electric-glow 4s ease-in-out infinite !important;
}

.lab-theme .back-btn-container::before {
    animation: electric-glow-lab 4s ease-in-out infinite !important;
}

@keyframes electric-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 var(--back-glow-size-min) var(--back-glow-color-normal));
    }

    50% {
        /* Doble filtro para duplicar la intensidad del neón */
        filter: drop-shadow(0 0 var(--back-glow-size-max) var(--back-glow-color-normal)) drop-shadow(0 0 calc(var(--back-glow-size-max) / 2) var(--back-glow-color-normal));
    }
}

@keyframes electric-glow-lab {

    0%,
    100% {
        filter: drop-shadow(0 0 var(--back-glow-size-min) var(--back-glow-color-lab));
    }

    50% {
        /* Doble filtro para duplicar la intensidad del neón */
        filter: drop-shadow(0 0 var(--back-glow-size-max) var(--back-glow-color-lab)) drop-shadow(0 0 calc(var(--back-glow-size-max) / 2) var(--back-glow-color-lab));
    }
}

/* Rotations keyframes (3° R, 27° L, 7° R, 20° R, 45° L and variations) */
@keyframes rot-attack-c1 {

    0%,
    100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(3deg);
    }

    40% {
        transform: rotate(-27deg);
    }

    60% {
        transform: rotate(7deg);
    }

    80% {
        transform: rotate(20deg);
    }

    90% {
        transform: rotate(-45deg);
    }
}

@keyframes rot-attack-c2 {

    0%,
    100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-15deg);
    }

    40% {
        transform: rotate(12deg);
    }

    60% {
        transform: rotate(-30deg);
    }

    80% {
        transform: rotate(5deg);
    }

    90% {
        transform: rotate(25deg);
    }
}

@keyframes rot-defense-c1 {

    0%,
    100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-25deg);
    }

    40% {
        transform: rotate(15deg);
    }

    60% {
        transform: rotate(-5deg);
    }

    80% {
        transform: rotate(35deg);
    }

    95% {
        transform: rotate(-12deg);
    }
}

@keyframes rot-defense-c2 {

    0%,
    100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(10deg);
    }

    40% {
        transform: rotate(-35deg);
    }

    60% {
        transform: rotate(20deg);
    }

    80% {
        transform: rotate(-15deg);
    }

    95% {
        transform: rotate(40deg);
    }
}

@keyframes rot-back-c1 {

    0%,
    100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(18deg);
    }

    45% {
        transform: rotate(-10deg);
    }

    70% {
        transform: rotate(28deg);
    }

    90% {
        transform: rotate(-22deg);
    }
}

@keyframes rot-back-c2 {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-20deg);
    }

    50% {
        transform: rotate(15deg);
    }

    75% {
        transform: rotate(-35deg);
    }

    90% {
        transform: rotate(10deg);
    }
}

/* Color de descripción en el modo laboratorio claro */
body.lab-theme .module-card .desc {
    color: #475569 !important;
}

/* Efectos visuales de alerta roja en el marco de la aplicación */
.app-container.alert-red {
    border-color: rgba(255, 51, 51, 0.8) !important;
    box-shadow: 0 0 25px rgba(255, 51, 51, 0.5), inset 0 0 25px rgba(255, 51, 51, 0.3) !important;
}

body.lab-theme .app-container.alert-red {
    background: rgba(15, 10, 10, 0.75) !important;
    /* Cristal oscuro translúcido en lugar de blanco sólido */
    border-color: rgba(255, 51, 51, 0.8) !important;
    box-shadow: 0 0 25px rgba(255, 51, 51, 0.6), inset 0 0 25px rgba(255, 51, 51, 0.4) !important;
}

/* Quitar scroll del menú modo arena y modo laboratorio */
#arena-menu-page,
#lab-menu-page {
    overflow-y: hidden !important;
}

/* Tooltip/Bocadillo de diálogo para advertencia de falta de escenarios */
.custom-build-tooltip {
    position: absolute;
    top: 24px;
    right: 80px;
    /* Separación al lado del botón de construir */
    background: rgba(10, 15, 30, 0.98);
    border: 1.5px solid #000000;
    box-shadow: 0 0 15px #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.8rem;
    font-family: var(--font-body);
    max-width: 240px;
    white-space: normal;
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.custom-build-tooltip .tooltip-arrow {
    position: absolute;
    top: 15px;
    /* Centrado vertical con el botón */
    right: -6px;
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #000000;
}

.custom-build-tooltip.hidden {
    display: none !important;
}

/* ==========================================================================
   CSS Modo Arena (ESTILOS EXTRAÍDOS DE INDEX.HTML)
   ========================================================================== */
/* Base resets from backup style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent
}

*:focus {
    outline: none
}

/* Keep body as backup's body style */
body {
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: background-color 0.3s ease;
}

/* Hex background inside app-container */
#hex-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 8px;
}

/* Ensure header/footer/content are above hex */
.app-container header,
.app-container .content-area,
.app-container footer {
    position: relative;
    z-index: 2
}

.app-container header {
    z-index: 10
}

.app-container footer {
    z-index: 10
}

.app-container #lab-transition-overlay {
    z-index: 9999
}

.modal {
    z-index: 9999
}

.app-container.in-transition header,
.app-container.in-transition footer {
    z-index: 10000 !important
}

/* Responsive adjustments for smaller screens */
@media(max-width:768px) {
    .hero-section h2 {
        font-size: 1.2rem
    }

    .hero-section p {
        font-size: 0.8rem;
        margin-bottom: 20px
    }

    .main-workspace {
        padding: 20px 12px
    }

    .mode-card {
        padding: 16px 14px
    }

    .mode-card h3 {
        font-size: 1rem
    }

    .mode-card p {
        font-size: 0.75rem
    }

    .lab-grid {
        gap: 8px
    }

    .lab-menu-buttons-container {
        gap: 12px
    }

    .lab-mode-cards {
        flex-direction: column;
        gap: 12px
    }

    .sidebar {
        display: none
    }

    .game-viewport {
        grid-template-columns: 1fr
    }
}

/* ==========================================================================
   AJUSTE DE LUCES 3D - DEBUG PANEL (OCULTO)
   Para reactivar: Cambiar 'display: none !important;' a 'display: flex;'
   ========================================================================== */
#hex-debug-btn {
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 99999;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 119, 255, 0.7);
    color: #fff;
    border: 1px solid rgba(0, 119, 255, 0.9);
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    backdrop-filter: blur(4px);
    display: none !important; /* [AJUSTE DE LUCES] Oculto */
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

#hex-debug-btn:hover {
    background: rgba(0, 119, 255, 0.9);
    transform: scale(1.08);
}

#hex-debug-panel {
    position: fixed;
    bottom: 60px;
    right: 12px;
    z-index: 99998;
    width: 260px;
    max-height: 70vh;
    overflow-y: auto;
    background: rgba(10, 14, 26, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 119, 255, 0.4);
    border-radius: 10px;
    padding: 12px;
    display: none;
    color: #c8d8ff;
    font-family: 'Segoe UI', monospace;
    font-size: .72rem;
}

#hex-debug-panel.open {
    display: block;
}

#hex-debug-panel h3 {
    color: #00a2ff;
    font-size: .8rem;
    margin-bottom: 8px;
    font-weight: 600;
}

#hex-debug-panel label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    user-select: text;
    -webkit-user-select: text;
}

#hex-debug-panel input[type="range"] {
    width: 90px;
    height: 4px;
    accent-color: #0088ff;
}

#hex-debug-panel input[type="color"] {
    width: 40px;
    height: 22px;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

#hex-debug-panel .row {
    display: flex;
    gap: 8px;
    align-items: center;
}

#hex-debug-panel .val {
    color: #7fbeff;
    min-width: 28px;
    text-align: right;
    user-select: text;
}

#hex-debug-panel button {
    background: rgba(0, 119, 255, 0.2);
    border: 1px solid rgba(0, 119, 255, 0.4);
    color: #7fbeff;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: .7rem;
    width: 100%;
    margin-top: 4px;
}

#hex-debug-panel button:hover {
    background: rgba(0, 119, 255, 0.35);
}

#hex-debug-panel .section {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 6px;
    margin-top: 6px;
}

/* ==========================================================================
   BOTONES DE ACCIÓN Y VENTANAS (MODO JUEGO Y LABORATORIO)
   ========================================================================== */
#btn-submit-analysis {
    width: auto;
    padding: 10px 20px;
    background: #a855f7;
    align-self: flex-start;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
}

#no-scenarios-close-btn,
#storage-info-close-btn {
    background: var(--accent-teal);
    color: #000;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
}

#lab-analysis-edit-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-muted);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid;
}

#lab-analysis-save-btn {
    background: #2dd4bf;
    color: #022c22;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

#account-export-btn {
    background: rgba(14, 165, 233, 0.15);
    color: #38bdf8;
    border-color: rgba(14, 165, 233, 0.3);
}

#changepw-save-btn {
    background: #6C63FF;
}

#lab-back-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid;
    margin-right: auto;
}

#lab-analyze-btn {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    font-family: var(--font-body);
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid #c084fc;
    cursor: pointer;
}

#lab-start-btn {
    background: #2dd4bf;
    color: #022c22;
    font-family: var(--font-body);
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.35);
}

/* ==========================================================================
   CHAT ACTION BUTTONS (MÓVIL Y ESCRITORIO - SOLO ICONOS ESCALADOS)
   ========================================================================== */
.sidebar-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    margin-top: 15px !important;
    background: #08080c !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-glow) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.mobile-action-buttons {
    display: none !important;
}

.sidebar-buttons .action-btn,
.mobile-action-buttons .action-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease !important;
    opacity: 1 !important;
}

.sidebar-buttons .action-btn.hidden,
.mobile-action-buttons .action-btn.hidden {
    display: none !important;
}

.sidebar-buttons .action-btn:hover,
.mobile-action-buttons .action-btn:hover {
    transform: scale(1.1) !important;
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(0, 255, 255, 0.6)) !important;
}

.sidebar-buttons .action-btn:active,
.mobile-action-buttons .action-btn:active {
    transform: scale(0.94) !important;
}

.sidebar-buttons .action-btn .action-btn-img,
.mobile-action-buttons .action-btn .action-btn-img,
.sidebar-buttons .action-btn .action-btn-icon,
.mobile-action-buttons .action-btn .action-btn-icon {
    height: 52px !important;
    width: auto !important;
    max-height: 52px !important;
    max-width: none !important;
    object-fit: contain !important;
    pointer-events: none !important;
    display: block !important;
    transition: transform 0.2s ease !important;
}

@media (max-width: 768px) {
    .sidebar-buttons {
        display: none !important;
    }

    .mobile-action-buttons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        background: #08080c80 !important;
        border-top: 1px solid var(--border-glow) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.lab-theme .mobile-action-buttons {
        background: var(--color-tema) !important;
        border-top: 1.5px solid #cbd5e1 !important;
        box-shadow: none !important;
    }

    .mobile-action-buttons .action-btn .action-btn-img,
    .mobile-action-buttons .action-btn .action-btn-icon {
        height: 44px !important;
        max-height: 44px !important;
    }
}

/* ==========================================================================
   MODO LABORATORIO (.lab-theme) - CAJA LIMPIA SIN SOMBREADOS
   ========================================================================== */
body.lab-theme .sidebar-buttons,
.lab-theme .sidebar-buttons {
    background: var(--color-tema) !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: none !important;
}

body.lab-theme .mobile-action-buttons,
.lab-theme .mobile-action-buttons {
    background: var(--color-tema) !important;
    border-top: 1.5px solid var(--color-tema) !important;
    box-shadow: none !important;
}

body.lab-theme .sidebar-buttons .action-btn,
body.lab-theme .mobile-action-buttons .action-btn,
.lab-theme .sidebar-buttons .action-btn,
.lab-theme .mobile-action-buttons .action-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

body.lab-theme .sidebar-buttons .action-btn:hover,
body.lab-theme .mobile-action-buttons .action-btn:hover,
.lab-theme .sidebar-buttons .action-btn:hover,
.lab-theme .mobile-action-buttons .action-btn:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: scale(1.1) !important;
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(6, 182, 212, 0.5)) !important;
}
/* ==========================================================================
   HOLOGRAMA ANALISTA BOBOT (HEADER SEPARADO SOBRE EL MODAL)
   ========================================================================== */
.analyze-robot-hologram-standalone {
    height: 120px;
    width: auto;
    display: block;
    filter: sepia(0.3) hue-rotate(95deg) saturate(2.5) brightness(1.15) contrast(1.1) drop-shadow(0 0 10px rgba(21, 255, 171, 0.6));
    opacity: 0.95;
    pointer-events: none;
    animation: hologramGlitchStandalone 4s infinite linear;
    -webkit-mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,1) 0px, rgba(0,0,0,1) 2px, rgba(0,0,0,0.55) 2px, rgba(0,0,0,0.55) 4px);
    mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,1) 0px, rgba(0,0,0,1) 2px, rgba(0,0,0,0.55) 2px, rgba(0,0,0,0.55) 4px);
}

@keyframes hologramGlitchStandalone {
    0%, 100% {
        filter: sepia(0.3) hue-rotate(95deg) saturate(2.5) brightness(1.15) contrast(1.1) drop-shadow(0 0 6px rgba(21, 255, 171, 0.5));
        opacity: 0.95;
        transform: skewX(0deg);
        clip-path: inset(0 0 0 0);
    }
    1% {
        filter: sepia(0.3) hue-rotate(95deg) saturate(2.5) brightness(1.15) contrast(1.1) drop-shadow(2px 0 12px rgba(21, 255, 171, 0.7));
        opacity: 0.9;
        transform: translateX(-3px) skewX(-3deg);
        clip-path: inset(15% 0 60% 0);
    }
    2% {
        filter: sepia(0.3) hue-rotate(95deg) saturate(2.5) brightness(1.15) contrast(1.1) drop-shadow(-2px 0 12px rgba(21, 255, 171, 0.7));
        opacity: 0.95;
        transform: translateX(3px) skewX(3deg);
        clip-path: inset(55% 0 20% 0);
    }
    3% {
        filter: sepia(0.3) hue-rotate(95deg) saturate(2.5) brightness(1.15) contrast(1.1) drop-shadow(0 0 6px rgba(21, 255, 171, 0.5));
        opacity: 0.95;
        transform: skewX(0deg);
        clip-path: inset(0 0 0 0);
    }
    45% {
        transform: skewX(0deg);
        filter: sepia(0.3) hue-rotate(95deg) saturate(2.5) brightness(1.15) contrast(1.1) drop-shadow(0 0 6px rgba(21, 255, 171, 0.5));
        clip-path: inset(0 0 0 0);
    }
    46% {
        opacity: 0.9;
        transform: translateX(-2px) scaleY(1.03);
        clip-path: inset(35% 0 40% 0);
    }
    47% {
        opacity: 0.95;
        transform: translateX(2px) scaleY(0.97);
        clip-path: inset(0% 0 80% 0);
    }
    48% {
        transform: skewX(0deg);
        clip-path: inset(0 0 0 0);
    }
}


.btn-circular .txt img,
.btn-circular-small .txt img,
.back-btn-container .txt img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
/* ==========================================================================
   ICONO HOME REAL CON DETALLES (3 HEXÁGONOS Y LÍNEAS TÉCNICAS REVELADAS)
   ========================================================================== */
.home-icon-img,
.home-icon-img-3d,
img[src*="home.png"],
img[src*="Menu%20recortado/home.png"] {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    object-fit: contain !important;
    background: none !important;
    background-color: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: all 0.25s ease !important;
    pointer-events: none !important;
}

/* Modo Arena: Tinte Verde Neón (#00ff97) conservando 3 hexágonos y detalles completos */
#arena-menu-back-btn .home-icon-img-3d,
body:not(.lab-theme) .home-icon-img {
    filter: brightness(1.2) contrast(1.2) sepia(1) hue-rotate(95deg) saturate(3) drop-shadow(0 0 6px rgba(0, 255, 151, 0.7)) !important;
}

#arena-menu-back-btn:hover .home-icon-img-3d,
body:not(.lab-theme) .home-icon-img:hover {
    filter: brightness(1.3) contrast(1.3) sepia(1) hue-rotate(95deg) saturate(3.5) drop-shadow(0 0 12px rgba(0, 255, 151, 0.95)) !important;
}

/* Modo Laboratorio: Blanco / Alto Contraste con los 3 hexágonos super nítidos y sombra oscura */
#lab-menu-back-btn .home-icon-img-3d,
#lab-back-btn .home-icon-img,
body.lab-theme .home-icon-img,
body.lab-theme .home-icon-img-3d {
    filter: brightness(1.8) contrast(1.4) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.9)) !important;
}

#lab-menu-back-btn:hover .home-icon-img-3d,
#lab-back-btn:hover .home-icon-img,
body.lab-theme .home-icon-img:hover,
body.lab-theme .home-icon-img-3d:hover {
    filter: brightness(2.2) contrast(1.5) drop-shadow(0 2px 6px rgba(0, 0, 0, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) !important;
}
/* ==========================================================================
   BURBUJAS DE CHAT INDEPENDIENTES PARA MODO LABORATORIO (.lab-theme)
   ========================================================================== */
/* 1. Burbuja IA (Oponente / Bot) en Laboratorio */
body.lab-theme .message-wrapper.ai .message-bubble,
.lab-theme .message-wrapper.ai .message-bubble {
    background: var(--lab-ai-bubble-bg) !important;
    border: 1px solid var(--lab-ai-bubble-border) !important;
    color: var(--lab-ai-bubble-color) !important;
}

body.lab-theme .message-wrapper.ai .message-bubble::before,
.lab-theme .message-wrapper.ai .message-bubble::before {
    border-color: transparent var(--lab-ai-peak-color) transparent transparent !important;
}

/* 2. Burbuja Usuario en Laboratorio */
body.lab-theme .message-wrapper.user .message-bubble,
.lab-theme .message-wrapper.user .message-bubble {
    background: var(--lab-user-bubble-bg) !important;
    color: var(--lab-user-bubble-color) !important;
    box-shadow: 0 4px 14px var(--lab-user-bubble-shadow) !important;
}

body.lab-theme .message-wrapper.user .message-bubble::after,
.lab-theme .message-wrapper.user .message-bubble::after {
    border-color: transparent transparent transparent var(--lab-user-peak-color) !important;
}

/* 3. Burbuja Sistema en Laboratorio */
body.lab-theme .message-wrapper.system .message-bubble,
.lab-theme .message-wrapper.system .message-bubble {
    background: #ffffff !important;
    color: var(--lab-system-bubble-color) !important;
}

/* 4. Burbuja Encabezado de Escenario en Laboratorio */
body.lab-theme .message-wrapper.scenario-header .message-bubble,
.lab-theme .message-wrapper.scenario-header .message-bubble {
    background: var(--lab-header-bubble-bg) !important;
    border: 1.5px solid var(--lab-header-bubble-border) !important;
    color: var(--lab-header-bubble-color) !important;
}

/* 5. Feedback del Analista en Laboratorio */
body.lab-theme .analyst-feedback,
.lab-theme .analyst-feedback {
    background: var(--lab-header-bubble-bg) !important;
    border: 1.5px solid var(--lab-header-bubble-border) !important;
    color: var(--lab-header-bubble-color) !important;
}
/* ==========================================================================
   PRIORIDAD DE Z-INDEX PARA SUB-MODALES Y VENTANAS EMERGENTES (AL FRENTE DEL TODO)
   ========================================================================== */
#export-modal,
#change-password-modal,
#delete-account-modal,
#storage-info-modal,
#export-confirm-modal {
    z-index: 25000 !important;
}
/* ==========================================================================
   ESTILO BLANCO EXCLUSIVO MODO LABORATORIO PARA VENTANAS EMERGENTES (.lab-modal-content)
   ========================================================================== */
.modal-content.lab-modal-content {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
}

.modal-content.lab-modal-content h3 {
    color: #0f172a !important;
}

.modal-content.lab-modal-content p {
    color: #334155 !important;
}

#storage-info-close-btn {
    background: #ff6500 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(255, 101, 0, 0.35) !important;
}

#storage-info-close-btn:hover {
    background: #e05900 !important;
    transform: scale(1.04) !important;
    box-shadow: 0 6px 18px rgba(255, 101, 0, 0.5) !important;
}
/* Real-time Authentication Input Validation */
.auth-input-valid {
    border-color: #22c55e !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.35) !important;
}

.auth-input-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.35) !important;
}

.auth-status-icon.valid {
    color: #22c55e !important;
}

.auth-status-icon.invalid {
    color: #ef4444 !important;
}

.auth-feedback-text.valid {
    color: #22c55e !important;
}

.auth-feedback-text.invalid {
    color: #ef4444 !important;
}

/* ===== Tutorial de Primera Respuesta ===== */
#tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #08080c80;
    z-index: 99999;
}
#tutorial-title {
    position: fixed;
    top: 14px;
    left: 16px;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    font-family: var(--font-body);
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    z-index: 100001;
}
#tutorial-skip {
    position: fixed;
    top: 12px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    font-size: 1rem;
    cursor: pointer;
    font-family: var(--font-body);
    z-index: 100001;
}
#tutorial-skip:hover {
    background: rgba(255,255,255,0.25);
}
#tutorial-next {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--accent-teal, #2dd4bf);
    color: #000;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: var(--font-body);
    z-index: 100001;
    box-shadow: 0 6px 20px rgba(45,212,191,0.35);
}
#tutorial-next:hover {
    filter: brightness(1.1);
}
.tutorial-frame {
    position: fixed;
    border: 2.5px solid #2dd4bf;
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 24px 4px rgba(45,212,191,0.6);
    pointer-events: none;
    z-index: 100000;
    animation: tutorial-frame-pulse 1.4s ease-in-out infinite;
}
@keyframes tutorial-frame-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 16px 3px rgba(45,212,191,0.45); }
    50% { box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 28px 6px rgba(45,212,191,0.75); }
}
.tutorial-bubble {
    position: fixed;
    background: #0f1220;
    border: 1.5px solid #2dd4bf;
    color: #fff;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    font-family: var(--font-body);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    z-index: 100001;
}
.tutorial-bubble.above::after {
    content: '';
    position: absolute;
    left: 30px;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #2dd4bf;
}
.tutorial-bubble:not(.above)::after {
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #2dd4bf;
}

.tutorial-bubble.no-arrow::after {
    display: none;
}

/* ===== Modal Unlock con estilo neon (tutorial) ===== */
#unlock-scenarios-modal .modal-content {
    animation: unlock-neon-pulse 2.2s ease-in-out infinite;
}
@keyframes unlock-neon-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(45,212,191,0.35), 0 8px 30px rgba(0,0,0,0.5); }
    50% { box-shadow: 0 0 32px rgba(45,212,191,0.65), 0 8px 30px rgba(0,0,0,0.5); }
}
#unlock-scenarios-password:focus {
    border-color: #2dd4bf !important;
    box-shadow: 0 0 12px rgba(45,212,191,0.45);
}
#unlock-scenarios-submit-btn:hover {
    filter: brightness(1.1);
}
/* Titulo Principal de Ejercicios en Blanco para Modo Personalizado y Laboratorio */
body.lab-theme .message-wrapper.scenario-header .message-bubble strong,
.lab-theme .message-wrapper.scenario-header .message-bubble strong,
.message-wrapper.scenario-header .message-bubble strong {
    color: #ffffff !important;
}

/* ===== Modal Analisis Profundo con estilo neon (tutorial) ===== */
#deep-analysis-modal .modal-content {
    animation: unlock-neon-pulse 2.2s ease-in-out infinite;
}
#analysis-query:focus {
    border-color: #2dd4bf !important;
    box-shadow: 0 0 12px rgba(45,212,191,0.45);
}
#btn-submit-analysis:hover {
    filter: brightness(1.1);
}

/* ===== Selector de idioma a pantalla completa (neon) ===== */
#lang-selector-modal {
    z-index: 100000;
}
.lang-selector-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0c14f5;
    display: flex;
    flex-direction: column;
    padding: 22px clamp(16px, 4vw, 48px);
    box-sizing: border-box;
    z-index: 100001;
}
.lang-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.lang-selector-header h3 {
    margin: 0;
    color: #2dd4bf;
    text-shadow: 0 0 12px rgba(45, 212, 191, 0.6);
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
}
.lang-selector-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(45, 212, 191, 0.5);
    font-size: 1.1rem;
    cursor: pointer;
    font-family: var(--font-body);
}
.lang-selector-close:hover {
    background: rgba(45, 212, 191, 0.25);
}
#lang-selector-search {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    border-radius: 10px;
    border: 1.5px solid rgba(45, 212, 191, 0.4);
    background: #08080c;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    margin-bottom: 18px;
}
#lang-selector-search:focus {
    border-color: #2dd4bf;
    box-shadow: 0 0 14px rgba(45, 212, 191, 0.45);
}
#lang-selector-search::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.lang-selector-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 8px;
}
.lang-selector-section {
    margin: 14px 0 4px 0;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2dd4bf;
    opacity: 0.85;
    font-family: var(--font-body);
}
.lang-selector-section:first-child {
    margin-top: 0;
}
.lang-selector-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1.05rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}
.lang-selector-row:hover {
    background: rgba(45, 212, 191, 0.1);
    border-color: rgba(45, 212, 191, 0.5);
}
.lang-selector-row.current {
    border-color: #2dd4bf;
    background: rgba(45, 212, 191, 0.12);
    box-shadow: 0 0 14px rgba(45, 212, 191, 0.25);
}
.lang-selector-row.unavailable {
    opacity: 0.45;
    cursor: default;
}
.lang-selector-row.unavailable:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
.lang-selector-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lang-selector-endonym {
    font-weight: 600;
}
.lang-selector-english {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}
.lang-selector-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.lang-selector-check {
    color: #2dd4bf;
    font-weight: 700;
}
.lang-selector-soon {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}


/* ===== RTL (arabe, urdu): solo alineacion de texto, SIN invertir layout ===== */
.rtl-lang .message-bubble,
.rtl-lang .lang-selector-row,
.rtl-lang .lang-selector-names,
.rtl-lang .lang-selector-endonym,
.rtl-lang .lang-selector-english,
.rtl-lang .analyst-feedback,
.rtl-lang #analysis-results-content,
.rtl-lang .analysis-section,
.rtl-lang .analysis-section h4,
.rtl-lang .analysis-section p,
.rtl-lang .tutorial-bubble,
.rtl-lang .stat-label,
.rtl-lang .stat-value,
.rtl-lang .modal-content h3,
.rtl-lang .modal-content p,
.rtl-lang .exit-modal-title,
.rtl-lang .exit-modal-desc,
.rtl-lang .auth-feedback-text,
.rtl-lang .lab-balloon,
.rtl-lang input,
.rtl-lang textarea,
.rtl-lang select {
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
}
.rtl-lang input::placeholder,
.rtl-lang textarea::placeholder {
    text-align: right;
}
.rtl-lang .message-bubble p,
.rtl-lang .analysis-section p,
.rtl-lang .modal-content p {
    text-align: right;
}