/* Corruptomon - Estilos */
/* Tema: oscuro retro "Game Boy battle", acento purple + gold */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-primary: #9b59b6;
    --color-primary-dark: #7d3c98;
    --color-gold: #ffd700;
    --color-bg: #1a1a2e;
    --color-bg-light: #16213e;
    --color-bg-panel: #0f0f1e;
    --color-text: #e8e8f0;
    --color-text-muted: #8888aa;
    --color-success: #2ecc71;
    --color-danger: #e74c3c;
    --color-warning: #f39c12;
    --color-border: rgba(155, 89, 182, 0.5);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-light) 100%);
    min-height: 100vh;
    color: var(--color-text);
    overflow-x: hidden;
    touch-action: manipulation;
}

/* ===== SCREENS ===== */
.screen {
    display: none;
    flex-direction: column;
    min-height: 100vh;
}

.screen.active {
    display: flex;
}

/* ===== START SCREEN ===== */
#start-screen {
    background: linear-gradient(135deg, #2c1654 0%, #1a1a2e 60%, #0d0d1a 100%);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.start-content {
    background: rgba(0, 0, 0, 0.5);
    border: 4px solid var(--color-primary);
    border-radius: 4px;
    padding: 32px 28px;
    text-align: center;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 0 30px rgba(155, 89, 182, 0.4);
}

#start-screen h1 {
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(1.4rem, 6vw, 2rem);
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--color-gold);
    text-shadow: 3px 3px 0 #000, -1px -1px 0 rgba(155,89,182,0.8);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.start-subtitle {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    color: var(--color-primary);
    margin-bottom: 16px;
    letter-spacing: 1px;
}

.start-intro {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

.start-note {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    margin-top: 8px;
}

/* Starter selection */
#starter-selection h4 {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.65rem;
    color: var(--color-gold);
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#starter-list {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.start-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

.back-to-menu {
    display: inline-block;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.back-to-menu:hover {
    color: #fff;
}

/* Landing footer */
.landing-footer {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.landing-kofi {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #ff5f5f, #c41e3a);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    transition: transform 0.2s;
    animation: kofi-float 3s ease-in-out infinite;
}

.landing-kofi:hover {
    transform: scale(1.05);
}

@keyframes kofi-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ===== GAME HEADER ===== */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 3px solid var(--color-primary);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.65rem;
    color: var(--color-gold);
}

/* ===== BUTTONS ===== */
.btn {
    font-family: 'Courier New', Courier, monospace;
    padding: 10px 20px;
    border: 3px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 0.7rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn--lg {
    padding: 14px 28px;
    font-size: 0.8rem;
    width: 100%;
}

.btn--small {
    padding: 5px 10px;
    font-size: 0.6rem;
    min-height: 32px;
}

.btn--start {
    background: linear-gradient(180deg, #9b59b6 0%, #7d3c98 100%);
    color: #fff;
    border-color: #5b2c6f;
    box-shadow: 0 4px 0 #4a235a;
}

.btn--start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #4a235a;
}

.btn--start:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #4a235a;
}

.btn--secondary {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.25);
    display: inline-flex;
}

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

.btn--warning {
    background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%);
    color: #fff;
    border-color: #7f0000;
    box-shadow: 0 4px 0 #7f0000;
}

.btn--warning:hover {
    transform: translateY(-2px);
}

.btn--menu {
    background: transparent;
    color: #fff;
    border: none;
    font-size: 1.2rem;
    padding: 6px 10px;
    cursor: pointer;
    min-height: 44px;
}

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

.btn--kofi {
    background: linear-gradient(135deg, #ff5f5f, #c41e3a);
    color: #fff;
    border-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

.btn--kofi:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,95,95,0.4);
}

/* Battle-specific button */
.btn--battle {
    background: rgba(155, 89, 182, 0.15);
    color: #fff;
    border: 3px solid var(--color-primary);
    font-size: 0.65rem;
    min-height: 48px;
    padding: 10px 8px;
}

.btn--battle:hover {
    background: rgba(155, 89, 182, 0.35);
    transform: translateY(-1px);
}

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

.btn--battle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Tab buttons */
.tab-btn {
    background: rgba(255,255,255,0.06);
    color: var(--color-text-muted);
    border: 2px solid rgba(255,255,255,0.15);
    font-size: 0.55rem;
    min-height: 32px;
    padding: 4px 10px;
}

.tab-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary-dark);
}

/* ===== MAP SCREEN ===== */
#map-screen {
    background: var(--color-bg);
}

.zones-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 70px;
}

/* Zone card */
.zone-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.05);
    border: 3px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-height: 64px;
}

.zone-card:hover:not(.locked) {
    background: rgba(155, 89, 182, 0.15);
    border-color: var(--color-primary);
}

.zone-card.locked {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.zone-card.cleared {
    border-color: var(--color-gold);
    background: rgba(255, 215, 0, 0.06);
}

.zone-icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.zone-info {
    flex: 1;
}

.zone-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.zone-trama {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.zone-levels {
    font-size: 0.65rem;
    color: var(--color-primary);
    margin-top: 2px;
}

.zone-state {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Bottom Nav */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 20, 0.97);
    border-top: 3px solid var(--color-primary);
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    z-index: 200;
}

.nav-item {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    padding: 4px 12px;
    font-size: 0.65rem;
    font-family: 'Courier New', Courier, monospace;
    transition: color 0.15s;
    min-height: 44px;
    justify-content: center;
}

.nav-item:hover,
.nav-item.active {
    color: var(--color-primary);
}

/* ===== BATTLE SCREEN ===== */
#battle-screen {
    background: linear-gradient(180deg, #0d0d1e 0%, #1a1a2e 100%);
    padding-bottom: 0;
}

.battle-arena {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-bottom: 3px solid var(--color-primary);
    background: rgba(0,0,0,0.3);
}

/* Combatant layout */
.combatant {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.combatant.enemy {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.combatant.ally {
    flex-direction: row;
    justify-content: flex-start;
}

.combatant-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 140px;
    max-width: 200px;
}

.combatant.enemy .combatant-info {
    align-items: flex-end;
    text-align: right;
}

.combatant.ally .combatant-info {
    align-items: flex-start;
    text-align: left;
}

#enemy-name, #ally-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#enemy-level, #ally-level {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    font-family: 'Courier New', Courier, monospace;
}

#enemy-hp-text, #ally-hp-text {
    font-size: 0.6rem;
    color: var(--color-text-muted);
    font-family: 'Courier New', Courier, monospace;
}

/* HP Bar */
.hp-bar {
    width: 120px;
    height: 10px;
    background: rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
}

.hp-fill {
    height: 100%;
    background: var(--color-success);
    width: 100%;
    transition: width 0.4s ease, background 0.4s ease;
}

.hp-fill.hp-mid {
    background: var(--color-warning);
}

.hp-fill.hp-low {
    background: var(--color-danger);
}

/* Portrait */
.portrait {
    width: 90px;
    height: 90px;
    border: 3px solid var(--color-primary);
    border-radius: 3px;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

.portrait .portrait-emoji {
    font-size: 64px;
    line-height: 1;
}

/* Enemy portrait top-right, ally bottom-left from battle screen perspective */
.combatant.enemy .portrait {
    border-color: var(--color-danger);
    align-self: flex-start;
}

.combatant.ally .portrait {
    border-color: var(--color-primary);
    align-self: flex-end;
}

.portrait.back {
    /* Ally shows from behind — slightly muted border */
    border-color: var(--color-primary-dark);
    opacity: 0.95;
}

/* Battle Log */
.battle-log {
    padding: 10px 14px;
    background: rgba(0,0,0,0.5);
    border-bottom: 2px solid rgba(155, 89, 182, 0.3);
    min-height: 3.5em;
    font-size: 0.85rem;
    color: var(--color-text);
    line-height: 1.5;
    font-family: 'Courier New', Courier, monospace;
}

/* Battle Menus */
.battle-menus {
    padding: 12px;
    flex: 1;
}

.battle-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ===== TEAM SCREEN ===== */
#team-screen {
    background: var(--color-bg);
}

.team-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
}

.team-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 3px solid rgba(155,89,182,0.3);
    border-radius: 3px;
    min-height: 64px;
}

.team-card:hover {
    background: rgba(155, 89, 182, 0.12);
    border-color: var(--color-primary);
}

.team-portrait {
    width: 48px;
    height: 48px;
    border: 2px solid var(--color-primary);
    border-radius: 2px;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 28px;
    image-rendering: pixelated;
}

.team-info {
    flex: 1;
}

.team-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.team-level {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    font-family: 'Courier New', Courier, monospace;
}

.team-hp-mini {
    width: 80px;
    height: 6px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 1px;
    overflow: hidden;
    margin-top: 4px;
}

.team-hp-mini .hp-fill {
    height: 100%;
}

/* Dex grid */
.dex-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding-bottom: 20px;
}

.dex-cell {
    aspect-ratio: 1;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    cursor: default;
    font-size: 1.5rem;
    image-rendering: pixelated;
}

.dex-cell.dex-seen {
    filter: grayscale(1) brightness(0.4);
}

.dex-cell-name {
    font-size: 0.5rem;
    font-family: 'Courier New', Courier, monospace;
    color: var(--color-text-muted);
    text-align: center;
    text-transform: uppercase;
    word-break: break-word;
    line-height: 1.2;
}

/* ===== SHOP SCREEN ===== */
#shop-screen {
    background: var(--color-bg);
}

.shop-intro {
    padding: 8px 14px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.shop-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
}

.shop-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 3px solid rgba(155,89,182,0.2);
    border-radius: 3px;
    min-height: 56px;
}

.shop-item:hover {
    background: rgba(155, 89, 182, 0.1);
}

.shop-item-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

.shop-item-info {
    flex: 1;
}

.shop-item-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.shop-item-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.shop-item-price {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.65rem;
    color: var(--color-gold);
    white-space: nowrap;
    margin-right: 8px;
}

/* ===== STATUS BADGES ===== */
.status-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 0.6rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-badge.imputado {
    background: rgba(231, 76, 60, 0.25);
    border: 1px solid var(--color-danger);
    color: #ff6b6b;
}

.status-badge.amnesia {
    background: rgba(155, 89, 182, 0.25);
    border: 1px solid var(--color-primary);
    color: #c39bd3;
}

.status-badge.filtrado {
    background: rgba(243, 156, 18, 0.2);
    border: 1px solid var(--color-warning);
    color: #f8c471;
}

.status-badge.aforado {
    background: rgba(46, 204, 113, 0.2);
    border: 1px solid var(--color-success);
    color: #82e0aa;
}

/* ===== MODALS ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.82);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 16px;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: linear-gradient(180deg, #1e1038 0%, #1a1a2e 100%);
    border: 4px solid var(--color-primary);
    border-radius: 4px;
    padding: 24px 20px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(155, 89, 182, 0.5);
}

/* Pause Modal */
.pause-content h3 {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    font-weight: 900;
    color: var(--color-gold);
    margin-bottom: 20px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.pause-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.font-scale-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.font-scale-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Help Modal */
.help-content {
    max-height: 85vh;
    overflow-y: auto;
    max-width: 500px;
}

.help-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--color-gold);
    text-align: center;
    margin-bottom: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.help-section {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(155,89,182,0.2);
    border-radius: 3px;
    margin-bottom: 6px;
    overflow: hidden;
}

.help-section summary {
    padding: 10px 12px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    transition: background 0.15s;
}

.help-section summary::-webkit-details-marker { display: none; }

.help-section summary::after {
    content: '▸';
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    transition: transform 0.2s;
}

.help-section[open] summary::after {
    transform: rotate(90deg);
}

.help-section summary:hover {
    background: rgba(155, 89, 182, 0.1);
}

.help-section-body {
    padding: 8px 12px 12px;
    font-size: 0.82rem;
    color: var(--color-text);
    line-height: 1.5;
    border-top: 1px solid rgba(155,89,182,0.15);
}

.help-section-body p { margin-bottom: 6px; }

.help-content .btn--start {
    margin-top: 14px;
}

/* Confirm Modal */
.confirm-content h3 {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    color: var(--color-warning);
    margin-bottom: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.confirm-content p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

.confirm-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Result Modal */
.result-content h3 {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    color: var(--color-gold);
    margin-bottom: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#result-body {
    font-size: 0.85rem;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 16px;
    text-align: left;
}

.result-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Ranking Modal */
.ranking-content {
    width: 520px;
    max-width: 95%;
}

.ranking-content h3 {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: var(--color-gold);
    margin-bottom: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ranking-nick-info {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.ranking-list {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(155, 89, 182, 0.4);
    border-radius: 3px;
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 14px;
    text-align: left;
}

.ranking-row {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    gap: 6px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    align-items: center;
    font-size: 0.82rem;
}

.ranking-row:last-child { border-bottom: none; }

.ranking-row.is-me {
    background: rgba(155, 89, 182, 0.18);
    color: var(--color-gold);
}

.ranking-row.is-top1 .ranking-rank { color: var(--color-gold); }
.ranking-row.is-top2 .ranking-rank { color: #c0c0c0; }
.ranking-row.is-top3 .ranking-rank { color: #cd7f32; }

.ranking-rank {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.6rem;
    color: var(--color-primary);
    font-weight: 700;
}

.ranking-nick {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-score {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.58rem;
    color: var(--color-success);
    white-space: nowrap;
}

.ranking-time {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-align: right;
    white-space: nowrap;
}

.ranking-loading,
.ranking-empty,
.ranking-error {
    text-align: center;
    color: var(--color-text-muted);
    padding: 20px;
    font-size: 0.82rem;
}

.ranking-error { color: var(--color-danger); }

.ranking-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Nickname Modal */
.nickname-content {
    width: 420px;
    max-width: 95%;
}

.nickname-content h3 {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: var(--color-gold);
    margin-bottom: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nickname-input {
    width: 100%;
    padding: 12px 14px;
    margin: 14px 0 6px;
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid rgba(155, 89, 182, 0.6);
    border-radius: 3px;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    text-align: center;
    box-sizing: border-box;
}

.nickname-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(155,89,182,0.4);
}

.nickname-error {
    color: var(--color-danger);
    font-size: 0.78rem;
    margin-bottom: 10px;
}

.nickname-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* ===== SAVE INDICATOR ===== */
#save-indicator {
    position: fixed;
    bottom: 70px;
    right: 16px;
    background: rgba(155, 89, 182, 0.9);
    color: #fff;
    padding: 8px 14px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-family: 'Courier New', Courier, monospace;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3000;
    pointer-events: none;
}

#save-indicator.show {
    opacity: 1;
}

/* ===== KO-FI FLOATING ===== */
.kofi-floating {
    display: none;
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom));
    right: 15px;
    z-index: 550;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff5f5f, #c41e3a);
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    font-size: 1.4rem;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    animation: kofi-float 3s ease-in-out infinite;
}

@media (max-width: 480px) {
    .kofi-floating { display: flex; }
}

/* ===== RESPONSIVE: mobile-first base, center on tablet+ ===== */
@media (min-width: 768px) {
    .screen {
        max-width: 720px;
        margin: 0 auto;
    }

    .game-header {
        border-radius: 0;
    }

    .modal-content {
        max-width: 500px;
    }

    .battle-arena {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }

    .portrait {
        width: 140px;
        height: 140px;
    }

    .portrait .portrait-emoji {
        font-size: 100px;
    }

    .hp-bar {
        width: 160px;
    }

    .dex-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .battle-menu {
        grid-template-columns: repeat(4, 1fr);
    }

    #save-indicator {
        bottom: 20px;
    }
}

/* ===== PREFERS-REDUCED-MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== DYNAMICALLY-GENERATED UI CLASSES ===== */

/* --- Start / Starter selection --- */

/* .start-intro: readable paragraph on the start screen */
.start-intro {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* #starter-list: row of 3 on wide screens (mobile-first flex-wrap already set above) */
@media (min-width: 768px) {
    #starter-list {
        flex-wrap: nowrap;
        justify-content: center;
    }
}

/* .starter-card: button card for picking a starter */
.starter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    background: rgba(155, 89, 182, 0.1);
    border: 3px solid var(--color-border);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    width: 110px;
    min-height: 44px;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    color: var(--color-text);
}

.starter-card:hover,
.starter-card:focus {
    background: rgba(155, 89, 182, 0.3);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    outline: none;
}

.starter-card:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
}

/* .starter-name and .starter-desc inside starter-card */
.starter-name {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    line-height: 1.2;
}

.starter-desc {
    font-size: 0.62rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* --- Portrait containers --- */

/* .starter-portrait: ~110px square in starter cards */
.starter-portrait {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

/* .team-portrait: the JS creates this as a 48px block; bump to ~64px per spec
   (existing rule sets 48px — we override to 64px here, after the existing rule) */
.team-portrait {
    width: 64px;
    height: 64px;
    font-size: 36px;
}

/* .dex-portrait: ~80px square inside .dex-cell */
.dex-portrait {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    image-rendering: pixelated;
}

/* .result-portrait: ~120px square inside result modal body */
.result-portrait {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid var(--color-primary);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.4);
    margin: 10px auto;
    image-rendering: pixelated;
}

/* .portrait-img: fills any portrait container (starter/team/dex/result/.portrait) */
.portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    image-rendering: auto;
    display: block;
}

/* .portrait img (existing .portrait already handles the ally/enemy battle portraits) */
.portrait .portrait-img {
    image-rendering: pixelated;
}

/* .portrait-emoji inside portrait containers: big centered emoji */
.starter-portrait .portrait-emoji,
.dex-portrait .portrait-emoji,
.result-portrait .portrait-emoji {
    font-size: 64px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-portrait .portrait-emoji {
    font-size: 40px;
    line-height: 1;
}

/* .silhouette: dark silhouette modifier for portrait containers */
.silhouette .portrait-img,
.silhouette .portrait-emoji {
    filter: brightness(0) contrast(0.8);
    opacity: 0.85;
}

/* --- Type chip --- */

/* .type-chip: small inline pill with inline bg color */
.type-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    line-height: 1.5;
}

/* --- Pokédex (Corruptódex) modifiers --- */

/* .dex-caught: fully visible, purple border */
.dex-cell.dex-caught {
    border-color: var(--color-primary);
    filter: none;
}

/* .dex-unknown: very dim, dashed border, not interactable visually */
.dex-cell.dex-unknown {
    filter: brightness(0.35) saturate(0);
    border: 2px dashed rgba(255, 255, 255, 0.15);
}

/* .dex-counter: full-width counter line, gold */
.dex-counter {
    grid-column: 1 / -1;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.65rem;
    color: var(--color-gold);
    text-align: center;
    padding: 4px 0 8px;
    letter-spacing: 1px;
}

/* .dex-name: bold short name in dex cells */
.dex-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    word-break: break-word;
    line-height: 1.2;
}

/* .dex-desc: small grey description in dex cells (caught) */
.dex-desc {
    font-size: 0.48rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.3;
}

/* --- Result modal sub-text --- */

/* .result-sub: smaller grey centered text under result portrait */
.result-sub {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 6px;
}

/* --- Battle flash animation --- */

/* .hit-flash: brief damage flash on .portrait */
@keyframes hit-flash {
    0%   { filter: brightness(2) saturate(0); }
    60%  { filter: brightness(1.5) saturate(0.3); }
    100% { filter: brightness(1) saturate(1); }
}

.portrait.hit-flash {
    animation: hit-flash 0.3s ease-out forwards;
}

/* --- Battle menu move/item buttons --- */

/* .btn--battle with .move-name / .move-meta children: flex column, left-aligned */
.btn--battle {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
}

.move-name {
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.move-meta {
    font-size: 0.6rem;
    color: var(--color-text-muted);
    line-height: 1.2;
}

/* .btn--back: back button spanning both grid columns */
.btn--battle.btn--back {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    flex-direction: row;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-muted);
    font-size: 0.65rem;
}

.btn--battle.btn--back:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* .btn--buy: compact gold-accented buy button */
.btn--buy {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.08) 100%);
    color: var(--color-gold);
    border: 2px solid rgba(255, 215, 0, 0.5);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn--buy:hover {
    background: rgba(255, 215, 0, 0.3);
    border-color: var(--color-gold);
}

/* .menu-empty: grey italic message inside battle menus (items/switch empty state) */
.menu-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.75rem;
    padding: 10px 8px;
    line-height: 1.5;
}

/* .battle-menu with 5+ buttons: grid auto-rows keep usable height */
.battle-menu {
    grid-auto-rows: minmax(48px, auto);
}

/* --- Map zone-card sub-elements (new structure from mapa.js) --- */

/* .zone-head: flex row — emoji | titles column | state right */
.zone-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* .zone-emoji: large emoji icon in zone-head */
.zone-emoji {
    font-size: 2rem;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
    line-height: 1;
}

/* .zone-titles: column of name + trama */
.zone-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

/* .zone-name already defined above (Courier, uppercase) — ensure truncation */
/* Existing .zone-name covers font; add overflow guard */
.zone-titles .zone-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* .zone-trama: gold small text (already defined as muted; upgrade to gold) */
.zone-titles .zone-trama {
    color: var(--color-gold);
    font-size: 0.7rem;
}

/* .zone-state: small grey status text on the right */
.zone-head .zone-state {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    font-family: 'Courier New', Courier, monospace;
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

/* .zone-desc: small description paragraph under zone-head */
.zone-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

/* .zone-actions: flex row of action buttons */
.zone-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Zone-card now uses zone-head layout — override old align-items: center on the card */
.zone-card {
    flex-direction: column;
    align-items: stretch;
}

/* --- Team screen sub-elements --- */

/* .team-types: row of type chips + status badges */
.team-types {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* .team-hp: small HP / stats text */
.team-hp {
    font-size: 0.6rem;
    color: var(--color-text-muted);
    font-family: 'Courier New', Courier, monospace;
    margin-top: 2px;
}

/* .team-desc: short grey description */
.team-desc {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}

/* .team-card.ko: knocked-out member */
.team-card.ko {
    filter: grayscale(1);
    opacity: 0.6;
}

/* .team-card.caja: reserve box member — dashed border */
.team-card.caja {
    border-style: dashed;
    border-color: rgba(155, 89, 182, 0.4);
    background: rgba(255, 255, 255, 0.03);
}

/* .caja-title: section heading for the storage box */
.caja-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 4px;
}

/* --- HP bar mini variant (JS adds class "mini" alongside "hp-bar") --- */
.hp-bar.mini {
    width: 100%;
    height: 8px;
    border-radius: 2px;
    margin-top: 4px;
}

/* --- Shop screen dynamic elements --- */

/* .shop-section-title: section heading (like .caja-title) */
.shop-section-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 4px;
}

/* .use-item: slightly dimmer / indented variant of .shop-item */
.use-item {
    margin-left: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(155, 89, 182, 0.15);
}

.use-item:hover {
    background: rgba(155, 89, 182, 0.08);
}

/* .shop-error: red error message */
.shop-error {
    color: var(--color-danger);
    font-size: 0.75rem;
    font-family: 'Courier New', Courier, monospace;
    padding: 8px 14px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 3px;
    text-align: center;
}

/* .shop-emoji: large emoji icon in shop items */
.shop-emoji {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
    line-height: 1;
}

/* .shop-info: flex column that grows in shop item rows */
.shop-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

/* .shop-name: item name in shop */
.shop-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* .shop-desc: small grey description in shop (also used standalone in tienda.js empty state) */
.shop-desc {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    font-style: italic;
    padding: 4px 0;
}

/* ===========================================
   OVERWORLD (mundo caminable estilo Game Boy)
   =========================================== */

#overworld-screen.active {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

#overworld-screen .bottom-nav {
    flex-shrink: 0;
}

.ow-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    min-height: 0;
    overflow: hidden;
}

#ow-canvas {
    max-width: 100%;
    max-height: 60vh;
    height: auto;
    image-rendering: pixelated;
    border: 4px solid #9b59b6;
    border-radius: 4px;
    background: #23233b;
    box-shadow: 0 0 24px rgba(155, 89, 182, 0.25);
}

.ow-dialog {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(92%, 520px);
    background: #1a1a2e;
    border: 3px solid #ffd700;
    border-radius: 6px;
    padding: 10px 14px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #fff;
    z-index: 20;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.ow-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 14px 8px;
    flex-shrink: 0;
    /* La .bottom-nav es position:fixed: dejarle sitio */
    margin-bottom: 56px;
}

.dpad {
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 48px);
    gap: 2px;
}

.dpad-btn {
    background: #2c2c44;
    border: 2px solid #9b59b6;
    border-radius: 8px;
    color: #ffd700;
    font-size: 1.2rem;
    min-height: 44px;
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.dpad-btn:active {
    background: #9b59b6;
    color: #fff;
}

.dpad-btn.up { grid-column: 2; grid-row: 1; }
.dpad-btn.left { grid-column: 1; grid-row: 2; }
.dpad-btn.right { grid-column: 3; grid-row: 2; }
.dpad-btn.down { grid-column: 2; grid-row: 3; }

.ow-hint {
    font-size: 0.7rem;
    color: #888;
    text-align: right;
    max-width: 200px;
}

@media (min-width: 768px) {
    .ow-controls { justify-content: center; }
    .ow-hint { max-width: 320px; }
}