/* ========================================= */
/* Summoner's Battle - Defense — Styles      */
/* ========================================= */

/* --- Main Styles --- */
* { box-sizing: border-box; }

html, body {
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    overflow: hidden;
    background-color: #121212;
    color: #e0e0e0;
    font-family: 'Baloo 2', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
    user-select: none;
    touch-action: manipulation;
}



	#mainContainer {
	    display: flex;
	    flex-direction: row;
	    gap: 8px;
	    position: relative;
	    width: 100vw;
	    height: 100vh;
	    align-items: center;
	    justify-content: center;
	    padding: 6px;
	    overflow: hidden;
	}
	@media (orientation: portrait) {
	    #mainContainer {
	        flex-direction: column;
	        align-items: stretch;
	        padding: 4px;
	        gap: 4px;
	    }
	}


/* DEBUG PANEL */
#debugPanel { display:none; }
.cheat-btn {
    background: #333; border: 1px solid #666; color: white;
    cursor: pointer; padding: 5px 12px; font-weight: bold; font-size: 0.9rem;
    border-radius: 4px; transition: 0.2s; min-width: 80px;
}
.cheat-btn:hover { background: #555; transform: scale(1.05); }
.cheat-gold { color: gold; border-color: gold; }
.cheat-max { color: cyan; border-color: cyan; }
.cheat-speed { color: #ff4081; border-color: #ff4081; }
.cheat-speed.active { background: #ff4081; color: white; }

/* --- NUEVO: ESTILOS MODO FARMEO --- */
#farmControl {
    margin-bottom: 15px; background: #1a2e1a; padding: 10px 25px;
    border-radius: 30px; border: 2px solid #2e7d32;
    display: none; align-items: center; gap: 15px;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
}
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #444; transition: .4s; border-radius: 24px;
}
.slider:before {
    position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px;
    background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: #4caf50; }
input:checked + .slider:before { transform: translateX(26px); }
/* ---------------------------------- */

#mapSelectionScreen {
	    position: fixed; inset: 0;
	    background: #0a0a0a; z-index: 100;
	    display: none; flex-direction: column; align-items: center;
	    padding: 8px;
	    overflow: hidden;
	    box-sizing: border-box;
	}
	@media (orientation: portrait) {
	    #mapSelectionScreen { overflow-y: auto !important; }
	}

	.map-grid { 
	    display: grid; 
	    grid-template-columns: repeat(5, 1fr); 
	    gap: 15px; 
	    margin-top: 20px;
	    padding-bottom: 30px; /* Espacio al final */
	}
.map-btn {
    width: 90px; height: 90px; background: #333; border: 2px solid #555;
    color: white; font-weight: bold; cursor: pointer; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: 0.2s; padding: 5px;
}
.map-btn:hover { background: #444; border-color: #d4af37; transform: scale(1.05); }
.map-btn.locked { opacity: 0.3; cursor: not-allowed; background: #222; border-color: #333; }
.map-info { font-size: 0.65rem; margin-top: 5px; text-align: center;}

.power-ok { color: #00ff00; }
.power-bad { color: #ff3333; }

.game-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
}
@media (orientation: portrait) {
    .game-area {
        flex: 1 1 auto;
        width: 100%;
        align-items: flex-start;
        justify-content: center;
        overflow: hidden;
    }
}
canvas {
    background-color: #0a0a0a; border: 3px solid #444;
    border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.5);
    cursor: crosshair;
    display: block;
}
/* RPG side panel */
.rpg-panel {
    background: #1e1e1e;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #333;
    display: none;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}
@media (orientation: portrait) {
    .rpg-panel {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 38vh !important;
        flex-direction: column;
        padding: 6px;
    }
    .char-list {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        margin-bottom: 4px !important;
        padding-bottom: 4px !important;
        max-height: none !important;
    }
    .char-card {
        min-width: 110px !important;
        flex-shrink: 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 5px !important;
        font-size: 0.75rem !important;
    }
    .upgrade-section {
        display: none !important;
    }
    .header-stats {
        font-size: 0.72rem !important;
        padding: 4px 6px !important;
        margin-bottom: 4px !important;
    }
    .game-area {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }
}

/* ===== PORTRAIT: ALL FIXED SCREENS ===== */
@media (orientation: portrait) {
    #zoneHub { padding: 8px !important; padding-top: 40px !important; overflow-y: auto !important; justify-content: flex-start !important; }
    .zone-grid { grid-template-columns: 1fr 1fr !important; gap: 7px !important; margin-top: 8px !important; }
    .zone-card { padding: 10px 6px !important; }
    .zone-card .zi { font-size: 1.4rem !important; }
    .zone-card .zn { font-size: 0.78rem !important; }
    .zone-card .zd { font-size: 0.58rem !important; }
    .zone-stat { font-size: 0.62rem !important; }
    .hub-btn { padding: 7px 6px !important; font-size: 0.75rem !important; }
    .hub-btn-icon { font-size: 0.85rem !important; }
    #subZoneScreen { padding: 10px 8px !important; padding-top: 40px !important; overflow-y: auto !important; }
    .sub-card { padding: 10px !important; }
    .floor-grid { grid-template-columns: repeat(5,1fr) !important; gap: 5px !important; }
    #mapSelectionScreen { overflow-y: auto !important; padding: 6px !important; padding-top: 40px !important; }
    .map-node { width: 34px !important; height: 34px !important; font-size: 0.6rem !important; }
    .node-num { font-size: 0.68rem !important; }
    .node-diff { font-size: 0.5rem !important; }
    .action-btn { padding: 8px 14px !important; font-size: 0.9rem !important; }
    #battleControls { gap: 8px !important; bottom: 10px !important; }
    .modal-inner { max-height: 85vh !important; }
    #heroCollectionModal { padding: 8px !important; }
    #heroCollGrid { grid-template-columns: repeat(4,1fr) !important; }
    #statsModal > div { width: 90vw !important; padding: 16px !important; }
    #globalResourceBar { font-size: 0.62rem !important; padding: 4px 6px !important; top: 6px !important; right: 6px !important; }
    #btnToggleDebug { right: 8px !important; top: calc(50% - 80px) !important; left: auto !important; padding: 4px 7px !important; font-size: 0.7rem !important; }
    .world-panel { border-radius: 6px; }
    .action-btn[onclick*="exportSave"], .action-btn[onclick*="importSave"] { padding: 4px 8px !important; font-size: 0.7rem !important; }
    /* Compact zone hub header in portrait */
    #zhHeader { margin-bottom: 4px !important; }
    #zhHeader > div:first-child > div:first-child { font-size: 0.85rem !important; }
    #zhHeader > div:first-child > div:last-child  { font-size: 0.65rem !important; }
    #zhHeader > div:last-child { font-size: 0.62rem !important; line-height: 1.4 !important; }
    /* Hub action buttons grid: 3 columns in portrait */
    #zoneHub > div:last-child { grid-template-columns: 1fr 1fr 1fr !important; gap: 5px !important; margin-top: 6px !important; }
    /* Hide h3 "Héroes" title in portrait to save space */
    .rpg-panel h3 { display: none !important; }
    /* Make export/import row horizontal and compact */
    .rpg-panel > .action-btn { display: inline-block !important; padding: 4px 10px !important; font-size: 0.68rem !important; margin: 0 2px !important; }
    /* Compact wave/power display */
    .header-stats span { font-size: 0.68rem !important; }
}
#msgOverlay {
    position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    padding: 5px 14px; border-radius: 20px;
    pointer-events: none; white-space: nowrap;
    opacity: 0; transition: opacity 0.4s; text-align: center; z-index: 10;
}
#battleControls {
    position: absolute; bottom: 20px; left: 0; width: 100%;
    display: flex; justify-content: center; gap: 15px;
    pointer-events: none;
}
.action-btn {
    pointer-events: auto; padding: 5px 10px; font-size: 0.72rem;
    font-weight: bold; border: none; border-radius: 5px; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5); transition: transform 0.1s;
}
.action-btn:active { transform: scale(0.95); }
#btnStart { background: #d4af37; color: #000; border: 2px solid #fff; }
#btnStart:hover { background: #ffd700; }
#btnClear { background: #b71c1c; color: white; border: 2px solid #ff8a80; }
#btnClear:hover { background: #d32f2f; }

#btnMenu {
    background: #2a2a2a; color: white; border: 1px solid #555;
    padding: 4px 10px; cursor: pointer; border-radius: 5px; font-weight: bold; font-size: 0.76rem;
}
#btnMenu:hover { background: #444; border-color: white; }

#confirmModal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 200;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 10px;
}
.modal-box {
    background: #222; border: 2px solid #d4af37; padding: 20px;
    border-radius: 10px; text-align: center; box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
.modal-btn-row { display: flex; gap: 20px; justify-content: center; margin-top: 20px; }
.modal-btn {
    padding: 8px 20px; cursor: pointer; font-weight: bold; border-radius: 4px; border: none;
}
.btn-yes { background: #b71c1c; color: white; }
.btn-yes:hover { background: #d32f2f; }
.btn-no { background: #333; color: white; }
.btn-no:hover { background: #555; }

.header-stats {
    background: #000; padding: 4px 6px; border-radius: 5px;
    display: flex; justify-content: space-between; margin-bottom: 6px;
    font-size: 0.7rem; border: 1px solid #444; align-items: center; flex-shrink: 0;
    gap: 6px;
}
.char-list { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; margin-bottom: 8px; }
.char-card {
    background: #2c2c2c; padding: 8px; border-radius: 5px;
    border: 1px solid #444; cursor: pointer; display: flex;
    align-items: center; justify-content: space-between;
}
.char-card.active { border-color: gold; background: #3a3a2a; }
.char-card.locked { opacity: 0.4; pointer-events: none; filter: grayscale(1); }
.upgrade-section { background: #252525; padding: 8px; border-radius: 5px; border-top: 2px solid #444; }
.stat-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 0.85rem; }
button.upg-btn {
    background: #005500; color: white; border: none; padding: 4px 8px;
    border-radius: 3px; cursor: pointer; font-size: 0.78rem; min-width: 70px;
}
button.upg-btn:disabled { background: #333; color: #bbb; cursor: not-allowed; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }

/* ===== PORTRAIT WARNING — disabled, portrait now supported ===== */
#portraitWarning { display: none !important; }

/* ===== RESPONSIVE FONT & SPACING ===== */
@media (max-height: 500px) {
    .header-stats { font-size: 0.75rem; padding: 6px; }
    .char-card { padding: 5px; }
    .stat-row { font-size: 0.75rem; margin-bottom: 4px; }
    button.upg-btn { padding: 3px 6px; font-size: 0.7rem; }
    .upgrade-section { padding: 6px; }
}

/* Mobile: hide some rpg-panel buttons to save space */
@media (max-width: 700px) {
    .rpg-panel .action-btn { padding: 6px 12px; font-size: 0.85rem; }
    .cheat-btn { padding: 4px 8px; font-size: 0.78rem; min-width: 60px; }
    #debugPanel { max-width: 260px; gap: 5px; padding: 5px 8px; }
}
	/* achievements badge is now inside hub btn */
	.export-btn {
	    background: #333;
	    border: 1px solid #777;
	    color: white;
	    padding: 6px 10px;
	    border-radius: 5px;
	    cursor: pointer;
	    font-size: 0.85rem;
	}
	/* --- ESTILOS DE ERAS DE REINOS --- */

	/* 1-5: Sobrio (Plateado/Azul) */
	.era-sobrio { border-color: #90a4ae !important; background: #263238 !important; }

	/* 6-10: Oscuridad (Violeta/Sombrío) */
	.era-oscuro { border-color: #4a148c !important; background: #1a0033 !important; box-shadow: inset 0 0 10px #4a148c; }

	/* 11-15: Oscuridad Total (Negro/Vacío) — DESBLOQUEADO */
	.era-vacio {
	    border-color: #9e9e9e !important;
	    background: #111111 !important;
	    box-shadow: 0 0 10px rgba(180,180,180,0.15), inset 0 0 8px #000;
	    color: #ccc !important;
	}
	.era-vacio .map-info { filter: brightness(0.9); }

	/* 11-15: BLOQUEADO — claramente distinto */
	.map-btn.locked.era-vacio {
	    border-color: #222 !important;
	    background: #050505 !important;
	    box-shadow: none !important;
	    color: #bbb !important;
	    opacity: 0.45 !important;
	}
	.map-btn.locked.era-vacio .map-info { filter: brightness(0.4); }

	/* 16-20: Infernal (Rojo/Lava) */
	.era-infernal { 
	    border-color: #b71c1c !important; 
	    background: #2b0000 !important; 
	    box-shadow: inset 0 0 15px #ff0000, 0 0 10px #ff5722;
	    animation: pulse-infernal 2s infinite;
	}

	@keyframes pulse-infernal {
	    0% { border-color: #b71c1c; }
	    50% { border-color: #ff5722; box-shadow: inset 0 0 20px #ff0000, 0 0 20px #ff5722; }
	    100% { border-color: #b71c1c; }
	}

    /* ===== SISTEMA DE ZONAS ===== */
    #zoneHub {
position:fixed; inset:0;
background:#0a0a0a; z-index:102; display:none;
flex-direction:column; align-items:center; justify-content:flex-start;
overflow-y:auto; padding:12px 16px; box-sizing:border-box;
    }
    .zone-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:560px; margin-top:15px; }
    .zone-card {
background:#12122a; border:2px solid #444; border-radius:10px;
padding:12px 10px; text-align:center; cursor:pointer;
transition:0.2s; display:flex; flex-direction:column; align-items:center; gap:4px;
    }
    .zone-card:hover { transform:scale(1.03); background:#1e1e3a; }
    .zone-card .zi { font-size:1.8rem; line-height:1; }
    .zone-card .zn { font-weight:bold; font-size:0.88rem; color:#e0e0e0; }
    .zone-card .zd { font-size:0.64rem; color:#bbb; line-height:1.25; }
    .zone-card.zc-adv { border-color:#2e7d32; } .zone-card.zc-adv:hover { border-color:#66bb6a; }
    .zone-card.zc-dng { border-color:#0288d1; } .zone-card.zc-dng:hover { border-color:#29b6f6; }
    .zone-card.zc-aby { border-color:#4a148c; } .zone-card.zc-aby:hover { border-color:#ab47bc; }
    .zone-card.zc-twr { border-color:#d4af37; } .zone-card.zc-twr:hover { border-color:#ffd700; }
    .zone-card.zc-wb  { border-color:#b71c1c; } .zone-card.zc-wb:hover  { border-color:#ff5252; }
    .zone-card.zc-exile { border-color:#f9a825; } .zone-card.zc-exile:hover { border-color:#ffd54f; }
    .zone-card.zc-rift { border-color:#0288d1; } .zone-card.zc-rift:hover { border-color:#29b6f6; }
    .zone-card.zc-rift { animation: pulse-rift 3s infinite; }
    @keyframes pulse-rift {
0%,100% { box-shadow: 0 0 6px rgba(2,136,209,0.3); }
50%      { box-shadow: 0 0 16px rgba(41,182,246,0.6); }
    }
    .zone-card.zc-wb  { animation: pulse-wb 3s infinite; }
    @keyframes pulse-wb {
0%,100% { box-shadow: 0 0 6px rgba(183,28,28,0.4); }
50%      { box-shadow: 0 0 18px rgba(255,82,82,0.7); }
    }
    .zone-stat { font-size:0.72rem; color:#aaa; margin-top:4px; }

    /* Hub action buttons */
    .hub-btn {
display:flex; align-items:center; justify-content:center; gap:6px;
padding:9px 10px; border-radius:8px; cursor:pointer; font-weight:bold;
font-size:0.82rem; border:1px solid; transition:0.18s;
letter-spacing:0.2px;
    }
    .hub-btn:hover { transform:translateY(-1px); filter:brightness(1.15); }
    .hub-btn:active { transform:translateY(0); filter:brightness(0.95); }
    .hub-btn-icon { font-size:1rem; }
    .hub-btn-blue  { background:#111830; border-color:#3f51b5; color:#90caf9; }
    .hub-btn-purple{ background:#1a0a2a; border-color:#7b1fa2; color:#ce93d8; }
    .hub-btn-green { background:#0a1a0a; border-color:#388e3c; color:#a5d6a7; }
    .hub-btn-pink  { background:#1a0a14; border-color:#c2185b; color:#f48fb1; }
    .hub-btn-gold  { background:#1a1400; border-color:#b8860b; color:#ffd700; }
    /* Sub-zone screen (dungeons / abyss / tower selection) */
    #subZoneScreen {
position:fixed; inset:0;
background:#0a0a0a; z-index:103; display:none;
flex-direction:column; align-items:center; padding:15px;
overflow-y:auto; box-sizing:border-box;
    }
    .sub-back { align-self:flex-start; background:#333; border:1px solid #666; color:#ddd;
padding:4px 12px; border-radius:5px; cursor:pointer; font-size:0.85rem; margin-bottom:12px; }
    .sub-back:hover { background:#555; }
    .sub-card {
width:100%; max-width:440px; background:#1e1e1e; border:2px solid #444;
border-radius:10px; padding:14px; margin-bottom:10px; cursor:pointer; transition:0.15s;
display:flex; align-items:center; gap:14px;
    }
    .sub-card:hover { border-color:gold; background:#252525; }
    .sub-card.locked-zone { opacity:0.4; cursor:not-allowed; }
    .sub-card .sc-icon { font-size:2rem; }
    .sub-card .sc-body { flex:1; }
    .sub-card .sc-name { font-weight:bold; font-size:0.95rem; }
    .sub-card .sc-desc { font-size:0.72rem; color:#aaa; margin-top:3px; }
    /* Floor grid for tower */
    .floor-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; max-width:440px; margin-top:12px; }
    .floor-btn { background:#12122a; border:1px solid #333; border-radius:6px;
padding:8px 3px; text-align:center; cursor:pointer; font-size:0.78rem; transition:0.15s; }
    .floor-btn:hover:not(.floor-locked) { border-color:gold; }
    .floor-btn.floor-cleared { border-color:#2e7d32; background:#0a1a0a; color:#66bb6a; }
    .floor-btn.floor-locked  { opacity:0.3; cursor:not-allowed; }
    .floor-btn.floor-current { border-color:gold; background:#1a1400; }
    /* Element badges */
    .eb { display:inline-block; padding:2px 7px; border-radius:10px; font-size:0.65rem; font-weight:bold; vertical-align:middle; }
    .eb-water { background:#01579b; color:#81d4fa; }
    .eb-fire  { background:#7f0000; color:#ffcc80; }
    .eb-wind  { background:#1b5e20; color:#b9f6ca; }
    .eb-yan   { background:#4a2e00; color:#ffe082; }
    .eb-yin   { background:#1a0030; color:#e040fb; }
    /* Rune badges */
    .rb { display:inline-block; padding:1px 6px; border-radius:8px; font-size:0.62rem;
background:#1a1a1a; border:1px solid #555; color:#aaa; }
    .rb-1  { background:#1a1a1a; border-color:#555;    color:#aaa; }
    .rb-2  { background:#0d2b0d; border-color:#4caf50; color:#81c784; }
    .rb-3  { background:#0a1f2e; border-color:#29b6f6; color:#81d4fa; }
    .rb-4  { background:#1a0a2a; border-color:#ce93d8; color:#e1bee7; }
    .rb-5  { background:#2a1e00; border-color:#1e88e5; color:#64b5f6; }
    .rb-6  { background:#1a0a2a; border-color:#8e24aa; color:#ce93d8; box-shadow:0 0 6px rgba(142,36,170,0.35); }
    .rb-7  { background:#1a0a2a; border-color:#8e24aa; color:#ce93d8; box-shadow:0 0 8px rgba(142,36,170,0.5); }
    .rb-8  { background:#2a1200; border-color:#f57c00; color:#ffb74d; box-shadow:0 0 8px rgba(245,124,0,0.4); }
    .rb-9  { background:#2a1200; border-color:#f57c00; color:#ffb74d; box-shadow:0 0 10px rgba(245,124,0,0.55); }
    .rb-10 { background:#2a1e00; border-color:#d4af37; color:#d4af37; box-shadow:0 0 12px rgba(212,175,55,0.6); }
    /* Awakening modal */
    .awk-row { display:flex; align-items:center; gap:10px; padding:8px;
border:1px solid #333; border-radius:8px; margin-bottom:7px; background:#252525; }
    .awk-elem-btn { padding:4px 10px; border-radius:6px; border:none; cursor:pointer; font-size:0.8rem; font-weight:bold; transition:0.15s; }
    .awk-elem-btn:hover { filter:brightness(1.3); }
    .awk-water { background:#0288d1; color:white; }
    .awk-fire  { background:#c62828; color:white; }
    .awk-wind  { background:#2e7d32; color:white; }
    .awk-reset { background:#555; color:#ddd; }
    /* ===== WORLD MAP ADVENTURE ===== */
    .world-panel {
position: relative; width: 100%;
padding-bottom: 66.67%; /* 1024/1536 = 2:3 ratio */
border-radius: 8px; overflow: hidden; flex-shrink: 0;
    }
    .world-panel img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block; border-radius: 8px;
    }
    .world-label {
position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,0.7); color: gold; font-weight: bold;
font-size: 0.78rem; padding: 2px 12px; border-radius: 20px;
border: 1px solid rgba(212,175,55,0.5); white-space: nowrap; z-index: 2;
    }
    .map-node {
position: absolute; transform: translate(-50%, -50%);
width: clamp(38px, 8vw, 58px);
height: clamp(38px, 8vw, 58px);
border-radius: 50%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
cursor: pointer; border: 2px solid rgba(255,255,255,0.8);
background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
transition: 0.2s; z-index: 3; text-align: center;
box-shadow: 0 0 12px rgba(255,255,255,0.25);
    }
    .map-node:hover:not(.node-locked) { transform: translate(-50%,-50%) scale(1.15); box-shadow: 0 0 20px gold; }
    .map-node.node-locked { opacity: 0.4; cursor: not-allowed; border-color: #555; box-shadow: none; }
    .map-node.node-current { border-color: gold; box-shadow: 0 0 18px gold; animation: pulse-node 1.5s infinite; }
    .map-node.node-cleared { border-color: #4caf50; box-shadow: 0 0 12px #4caf50; }
    @keyframes pulse-node { 0%,100% { box-shadow: 0 0 12px gold; } 50% { box-shadow: 0 0 24px gold, 0 0 40px rgba(212,175,55,0.4); } }
    .map-node .node-num { font-weight: bold; font-size: clamp(0.55rem, 1.5vw, 0.8rem); color: white; line-height: 1; }
    .map-node .node-diff { font-size: clamp(0.4rem, 1vw, 0.55rem); margin-top: 2px; line-height: 1; }

    /* Sub-zone and zone hub responsive */
    .zone-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:520px; margin-top:10px; }
    .zone-card { padding:12px 8px; gap:4px; }
    .sub-card { padding:10px 12px; }
    .floor-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; max-width:440px; margin-top:10px; }
    .floor-btn { padding:6px 2px; font-size:0.72rem; }

    @media (max-height: 480px) {
#zoneHub { padding:10px; justify-content:flex-start; }
#zoneHub h1 { font-size:1rem; margin-bottom:4px; }
.zone-grid { gap:6px; margin-top:6px; }
.zone-card { padding:8px; }
.zone-card .zi { font-size:1.4rem; }
.zone-card .zn { font-size:0.82rem; }
.sub-card { padding:7px 10px; }
.sub-card .sc-icon { font-size:1.4rem; }
    }

@keyframes logoGlow { from{filter:drop-shadow(0 0 20px rgba(212,175,55,0.3))} to{filter:drop-shadow(0 0 40px rgba(212,175,55,0.7))} }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes fadeOut { from{opacity:1} to{opacity:0;pointer-events:none} }
/* === DESIGN SYSTEM === */
:root {
    --gold: #d4af37;
    --gold-light: #ffd700;
    --gold-dim: rgba(212,175,55,0.15);
    --purple: #ce93d8;
    --blue: #42a5f5;
    --green: #4caf50;
    --red: #ef5350;
    --cyan: #26c6da;
    --card-bg: rgba(255,255,255,0.04);
    --card-border: rgba(255,255,255,0.08);
    --surface: #111118;
    --surface2: #18181f;

    /* Bevel variables */
    --bevel-light: rgba(255,255,255,0.18);
    --bevel-dark:  rgba(0,0,0,0.55);
    --press-depth: 2px;
}

/* Safe keyframes */
@keyframes sbIn   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes sbInL  { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes sbInR  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes sbPop  { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
@keyframes sbGlow { 0%,100%{box-shadow:0 0 10px var(--gold-dim),0 4px 0 #1a0c00,0 5px 8px rgba(0,0,0,0.6)} 50%{box-shadow:0 0 22px rgba(212,175,55,0.4),0 4px 0 #1a0c00,0 5px 8px rgba(0,0,0,0.6)} }
@keyframes sbPulse{ 0%,100%{opacity:1} 50%{opacity:0.55} }
@keyframes sbPress{ 0%{transform:translateY(0)} 40%{transform:translateY(var(--press-depth))} 100%{transform:translateY(0)} }
@keyframes mainMenuIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes btnPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }

/* === 3D BEVEL CARD BUTTON === */
/* Creates depth with: top-left light edge + bottom-right dark edge + drop shadow */
.sb-card {
    position:relative; overflow:hidden; cursor:pointer;
    border-radius:14px; padding:14px 16px;
    background:linear-gradient(160deg, #1e1e28 0%, #141420 100%);
    border:1px solid rgba(255,255,255,0.12);
    /* 3D bevel: top-left highlight, bottom-right shadow, depth shadow */
    box-shadow:
        inset 0 1px 0 var(--bevel-light),
        inset 1px 0 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 var(--bevel-dark),
        inset -1px 0 0 rgba(0,0,0,0.3),
        0 4px 0 rgba(0,0,0,0.5),
        0 6px 12px rgba(0,0,0,0.4);
    transition: box-shadow 0.08s, transform 0.08s;
    -webkit-tap-highlight-color:transparent;
    will-change: transform;
}
/* Top-left shine overlay */
.sb-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 50%);
    border-radius:14px; pointer-events:none;
}
/* Press down: compress 3D depth */
.sb-card:active {
    transform:translateY(3px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 1px 0 0 rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        inset -1px 0 0 rgba(0,0,0,0.2),
        0 1px 0 rgba(0,0,0,0.5),
        0 2px 4px rgba(0,0,0,0.4);
}

/* === GOLD HERO BUTTON (Zonas) === */
.sb-btn-gold {
    background:linear-gradient(160deg, #2a1800 0%, #1c1000 100%);
    border:1px solid rgba(212,175,55,0.5);
    color:var(--gold-light);
    box-shadow:
        inset 0 1px 0 rgba(255,215,0,0.25),
        inset 1px 0 0 rgba(255,215,0,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.6),
        inset -1px 0 0 rgba(0,0,0,0.3),
        0 4px 0 #110800,
        0 6px 14px rgba(0,0,0,0.6),
        0 0 20px rgba(212,175,55,0.12);
}
.sb-btn-gold:active {
    transform:translateY(4px);
    box-shadow:
        inset 0 2px 0 rgba(0,0,0,0.3),
        0 0 0 rgba(0,0,0,0),
        0 1px 4px rgba(0,0,0,0.5),
        0 0 12px rgba(212,175,55,0.08);
}

/* === ZONES GRID === */
.zone-card {
    background:linear-gradient(160deg, #1a1a24 0%, #111118 100%);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:10px 8px;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    text-align:center;
    cursor:pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 3px 0 rgba(0,0,0,0.45),
        0 5px 8px rgba(0,0,0,0.35);
    transition: box-shadow 0.08s, transform 0.08s;
    -webkit-tap-highlight-color:transparent;
}
.zone-card:active {
    transform:translateY(3px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 0 0 rgba(0,0,0,0),
        0 2px 4px rgba(0,0,0,0.3);
}
.zc-adv  { border-color:rgba(212,175,55,0.3); } .zc-adv:active  { border-color:#d4af37; }
.zc-dng  { border-color:rgba(41,182,246,0.3); } .zc-dng:active  { border-color:#29b6f6; }
.zc-aby  { border-color:rgba(123,31,162,0.4); } .zc-aby:active  { border-color:#7b1fa2; }
.zc-rift { border-color:rgba(0,172,193,0.3); } .zc-rift:active { border-color:#00acc1; }
.zc-exile{ border-color:rgba(249,168,37,0.3); } .zc-exile:active{ border-color:#f9a825; }
.zc-twr  { border-color:rgba(206,147,216,0.3); } .zc-twr:active { border-color:#ce93d8; }
.zc-wb   { border-color:rgba(239,83,80,0.3); }   .zc-wb:active   { border-color:#ef5350; }

/* === HERO MODAL POP EFFECT === */
#heroDetailModal .modal-inner,
#heroUpgradeModal > div,
#heroPickerModal > div,
#heroCollectionModal .modal-inner { animation:sbPop 0.2s cubic-bezier(0.34,1.3,0.64,1); }

/* === SHOP/STATS MODAL SLIDE === */
.modal-overlay.visible .modal-inner { animation:sbIn 0.25s cubic-bezier(0.22,1,0.36,1); }

/* === ALL BUTTONS GET PRESS EFFECT === */
button:not(.sb-card):not(.sb-btn-gold):not(.zone-card):not([style*="background:none"]):not([style*="background: none"]) {
    transition: transform 0.08s, box-shadow 0.08s;
}
button:not(.sb-card):not(.sb-btn-gold):not(.zone-card):active {
    transform:translateY(2px);
}

/* --- Modal & Shop Styles --- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Baloo 2', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
    color: #e0e0e0;
    backdrop-filter: blur(3px);
}
.modal-overlay.visible { display: flex; }
.modal-inner {
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 20px;
    width: 480px;
    max-width: 95vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.8);
    position: relative;
}
.modal-inner::-webkit-scrollbar { width: 6px; }
.modal-inner::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
/* Shop items compactos */
.shop-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 8px 10px;
    border: 1px solid #333; border-radius: 8px; margin-bottom: 6px;
    background: #252525;
}
.shop-item-info { flex: 1; }
.shop-item-info b { font-size: 0.9rem; }
.shop-item-info small { color: #888; font-size: 0.75rem; display: block; }
.shop-item-btn {
    background: #1a237e; color: white; border: 1px solid #3f51b5;
    padding: 5px 10px; border-radius: 5px; cursor: pointer;
    font-size: 0.8rem; white-space: nowrap;
}
.shop-item-btn:hover { background: #283593; }
/* Achievement items compactos */
.ach-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border: 1px solid #333;
    border-radius: 8px; margin-bottom: 6px; background: #252525;
}
.ach-icon { font-size: 1.5rem; }
.ach-info { flex: 1; font-size: 0.82rem; }
.ach-info b { display: block; }
.ach-bar-wrap { background: #333; border-radius: 4px; height: 5px; margin-top: 4px; }
.ach-bar { background: gold; height: 5px; border-radius: 4px; }
.ach-claim-btn {
    background: #b8860b; color: white; border: none;
    padding: 5px 10px; border-radius: 5px; cursor: pointer;
    font-size: 0.8rem; white-space: nowrap;
}
.ach-claim-btn:hover { background: #daa520; }

/* ===== MAIN MENU SLIDE CAROUSEL ===== */
#mmSlider { scrollbar-width:none; touch-action:pan-x; cursor:grab; }
#mmSlider::-webkit-scrollbar { display:none; }
#mmSlider.is-dragging { cursor:grabbing; scroll-snap-type:none; }

.mm-slide {
    min-width:100%;
    width:100%;
    height:100%;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:175px 28px 72px;
    box-sizing:border-box;
    position:relative;
    overflow:hidden;
    user-select:none;
}
.mm-glow {
    position:absolute;
    inset:0;
    pointer-events:none;
}
.mm-img {
    width:100px;
    height:100px;
    object-fit:contain;
    margin-bottom:16px;
    filter:drop-shadow(0 0 22px currentColor);
    animation:mm-float 4.5s ease-in-out infinite;
    flex-shrink:0;
}
.mm-emoji {
    font-size:4.5rem;
    margin-bottom:16px;
    line-height:1;
    animation:mm-float 4.5s ease-in-out infinite;
}
@keyframes mm-float {
    0%,100% { transform:translateY(0px); }
    50%      { transform:translateY(-9px); }
}
.mm-name {
    font-family:'Cinzel Decorative',serif;
    font-size:1.35rem;
    font-weight:bold;
    letter-spacing:0.04em;
    text-align:center;
    margin-bottom:10px;
    text-shadow:0 0 18px currentColor;
}
.mm-desc {
    font-size:0.75rem;
    color:#999;
    text-align:center;
    line-height:1.55;
    max-width:290px;
    margin-bottom:12px;
}
.mm-stat {
    font-size:0.7rem;
    font-weight:bold;
    color:#777;
    margin-bottom:22px;
    letter-spacing:0.05em;
    min-height:18px;
}
.mm-btn {
    background:transparent;
    border:2px solid;
    border-radius:12px;
    padding:12px 40px;
    font-size:0.88rem;
    font-weight:bold;
    letter-spacing:0.12em;
    cursor:pointer;
    transition:background 0.18s, transform 0.12s;
    font-family:'Cinzel Decorative',serif;
}
.mm-btn:active { transform:scale(0.96); }
.mm-btn:hover  { background:rgba(255,255,255,0.06); }

.mm-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#222;
    display:inline-block;
    transition:background 0.2s, transform 0.2s;
}
.mm-dot.active {
    background:#d4af37;
    transform:scale(1.4);
}

/* ===== ZONES SLIDER (from previous session) ===== */
#zoneSlider { scrollbar-width:none; touch-action:pan-x; cursor:grab; }
#zoneSlider::-webkit-scrollbar { display:none; }
#zoneSlider.is-dragging { cursor:grabbing; scroll-snap-type:none; }
.zs-slide {
    min-width:100%;
    width:100%;
    height:100%;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:80px 28px 60px;
    box-sizing:border-box;
    position:relative;
    overflow:hidden;
    user-select:none;
}
.zs-glow { position:absolute;inset:0;pointer-events:none; }
.zs-img {
    width:110px;height:110px;object-fit:contain;margin-bottom:18px;
    filter:drop-shadow(0 0 24px currentColor);
    animation:zs-float 4s ease-in-out infinite;flex-shrink:0;
}
@keyframes zs-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.zs-emoji { font-size:5rem;margin-bottom:18px;animation:zs-float 4s ease-in-out infinite; }
.zs-name {
    font-family:'Cinzel Decorative',serif;font-size:1.45rem;font-weight:bold;
    letter-spacing:0.04em;text-align:center;margin-bottom:10px;
    text-shadow:0 0 20px currentColor;
}
.zs-desc { font-size:0.78rem;color:#aaa;text-align:center;line-height:1.55;max-width:300px;margin-bottom:14px; }
.zs-stat { font-size:0.72rem;font-weight:bold;color:#888;margin-bottom:24px;letter-spacing:0.06em; }
.zs-btn {
    background:transparent;border:2px solid;border-radius:12px;padding:13px 42px;
    font-size:0.9rem;font-weight:bold;letter-spacing:0.12em;cursor:pointer;
    transition:background 0.18s,transform 0.12s;font-family:'Cinzel Decorative',serif;
}
.zs-btn:active{transform:scale(0.96)} .zs-btn:hover{background:rgba(255,255,255,0.06)}
.zs-dot { width:7px;height:7px;border-radius:50%;background:#333;display:inline-block;transition:background 0.2s,transform 0.2s; }
.zs-dot.active { background:#d4af37;transform:scale(1.4); }

/* Slider touch overrides */
.mm-slide, .zs-slide { touch-action:pan-x; }