/* === RESET & BASE === */
:root {
    --base-font: clamp(12px, 3vw, 16px);
    --heading-font: clamp(18px, 5vw, 32px);
    --btn-height: max(48px, 8vh);
    --card-width: max(80px, 20vw);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow-x: hidden; font-family: 'Segoe UI', Arial, sans-serif; background: #0a0a14; color: #e0e0e0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.game-btn { transition: all 0.15s ease; }
.game-btn:hover { transform: translateY(-2px) scale(1.03); }
@keyframes counterPop { 0%{transform:scale(1)} 50%{transform:scale(1.3);color:#FFD700} 100%{transform:scale(1)} }
.counter-pop { animation:counterPop 0.3s ease-out; }
@keyframes screenFlashWhite { 0%{opacity:0.6} 100%{opacity:0} }
.screen-flash { position:fixed;inset:0;background:#fff;pointer-events:none;z-index:9998;animation:screenFlashWhite 0.3s ease-out forwards; }
.screen-flash-gold { position:fixed;inset:0;background:#FFD700;pointer-events:none;z-index:9998;animation:screenFlashWhite 0.4s ease-out forwards; }
@keyframes textWobble { 0%{transform:scale(0.3) rotate(-5deg);opacity:0} 60%{transform:scale(1.1) rotate(2deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} }
.text-wobble { animation:textWobble 0.5s ease-out; }
img { user-select: none; -webkit-user-drag: none; }

/* === GAME CONTAINER === */
#game-container {
    width: 100%; max-width: 480px; height: 100vh;
    margin: 0 auto; display: flex; flex-direction: column;
    position: relative; overflow: hidden; background: #12121e;
}

/* === TOP BAR === */
#top-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; background: #1a1a2e;
    border-bottom: 2px solid #333; z-index: 10;
    flex-shrink: 0; min-height: 40px; overflow: hidden;
}
.currency { display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; }
.currency-icon { width: 20px; height: 20px; image-rendering: pixelated; }
#gold-amount { color: #ffd700; }
#diamond-amount { color: #7df9ff; }
#dps-display { font-size: 11px; color: #aaa; margin-left: auto; flex-shrink: 1; white-space: nowrap; overflow: hidden; }
#dps-amount { color: #ff6b6b; font-weight: 700; }
#zone-display { font-size: 11px; text-align: right; margin-left: 4px; line-height: 1.2; flex-shrink: 1; min-width: 0; overflow: hidden; }
#zone-name { display: block; color: #8f8; font-weight: 700; font-size: 12px; }
#stage-label { color: #aaa; font-size: 10px; }
.top-btn { width: 28px; height: 28px; cursor: pointer; margin-left: 6px; }
.top-btn img { width: 100%; height: 100%; filter: invert(0.8); }

/* === BATTLE VIEW === */
#battle-view {
    flex: 1; position: relative; overflow: hidden;
    display: flex; min-height: 0;
}
#battle-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    image-rendering: pixelated; opacity: 0.35;
}
#team-area {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 4px; z-index: 2;
}
.team-hero-slot {
    width: 48px; height: 48px; position: relative;
    border: 2px solid #555; border-radius: 6px;
    background: rgba(0,0,0,0.5); overflow: hidden;
}
.team-hero-slot.active { border-color: #4f4; }
.team-hero-slot img {
    width: 48px; height: 64px; object-fit: cover;
    object-position: 0 0; image-rendering: pixelated;
}
.team-hero-hp {
    position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: #333;
}
.team-hero-hp-fill { height: 100%; background: #4f4; transition: width 0.3s; }

/* === ENEMY === */
#vs-area {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    z-index: 2; text-align: center;
}
#enemy-container { text-align: center; }
#enemy-name-bar {
    font-size: 13px; font-weight: 700; color: #ff6b6b;
    margin-bottom: 4px; text-shadow: 0 0 6px rgba(255,0,0,0.5);
}
#enemy-hp-bar-container {
    width: 140px; height: 14px; background: #333; border-radius: 7px;
    overflow: hidden; position: relative; margin: 0 auto 6px;
    border: 1px solid #555;
}
#enemy-hp-bar {
    height: 100%; background: linear-gradient(90deg, #ff4444, #ff6b6b);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 7px;
    position: relative;
}
#enemy-hp-bar::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, transparent 60%, rgba(255,255,255,0.15));
}
#enemy-hp-text {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: 9px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 2px #000;
}
#enemy-sprite-wrap { width: 120px; height: 120px; margin: 0 auto; position: relative; }
#enemy-sprite {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255,0,0,0.3));
    animation: enemyIdle 1s ease-in-out infinite alternate;
}
@keyframes enemyIdle { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } }
.enemy-hit { animation: enemyHit 0.15s ease-out !important; }
@keyframes enemyHit { 0% { filter: brightness(3); transform: translateX(5px); } 100% { filter: brightness(1); transform: translateX(0); } }
.enemy-die { animation: enemyDie 0.4s ease-out forwards !important; }
@keyframes enemyDie { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.3) rotate(20deg); } }

/* === TAP ZONE === */
#tap-zone {
    position: absolute; inset: 0; z-index: 5; cursor: pointer;
}
#tap-zone:active { cursor: crosshair; }

/* === DAMAGE NUMBERS === */
#damage-numbers { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.dmg-num {
    position: absolute; font-weight: 900; font-size: 18px;
    color: #ffd700; text-shadow: 0 1px 3px #000, 0 0 8px rgba(255,200,0,0.5);
    animation: dmgFloat 1s ease-out forwards; pointer-events: none;
    white-space: nowrap;
}
.dmg-num.crit { font-size: 26px; color: #ff4444; animation: dmgCrit 1s ease-out forwards; }
.dmg-num.tap { color: #7df9ff; font-size: 22px; animation: dmgTap 0.8s ease-out forwards; }
.dmg-num.heal { color: #4f4; animation: dmgHeal 1s ease-out forwards; }
@keyframes dmgFloat {
    0% { opacity: 1; transform: translateY(0) scale(1.3); }
    15% { transform: translateY(-10px) scale(1); }
    60% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-60px) scale(0.6); }
}
@keyframes dmgTap {
    0% { opacity: 1; transform: translateY(0) scale(1.5); }
    20% { transform: translateY(-15px) scale(1); }
    100% { opacity: 0; transform: translateY(-50px) scale(0.5); }
}
@keyframes dmgCrit {
    0% { opacity: 1; transform: translateY(0) scale(2); }
    15% { transform: translateY(-10px) scale(1.2); text-shadow: 0 0 20px #ff0000; }
    60% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-70px) scale(0.5); }
}
@keyframes dmgHeal {
    0% { opacity: 1; transform: translateY(0) scale(1.2); }
    60% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-50px) scale(0.7); }
}

/* === PARTICLES === */
#particles-container { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.particle {
    position: absolute; width: 12px; height: 12px;
    pointer-events: none; animation: particleBurst 0.6s ease-out forwards;
}
@keyframes particleBurst {
    0% { opacity: 1; transform: translate(0,0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}
.gold-particle {
    width: 16px; height: 16px; animation: goldFly 0.8s ease-in forwards;
}
@keyframes goldFly {
    0% { opacity: 1; transform: translate(0,0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

/* === STAGE PROGRESS === */
#stage-progress {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 16px; background: rgba(0,0,0,0.6);
    border-radius: 8px; overflow: hidden; z-index: 3;
    border: 1px solid #444;
}
#stage-progress-bar {
    height: 100%; background: linear-gradient(90deg, #4488ff, #66aaff);
    transition: width 0.3s; border-radius: 8px;
}
#stage-progress-text {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: 10px; font-weight: 700;
    text-shadow: 0 1px 2px #000;
}

/* === BOOST INDICATOR === */
#boost-indicator {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(90deg, #ffd700, #ffaa00);
    color: #000; font-weight: 900; font-size: 14px;
    padding: 4px 16px; border-radius: 12px; z-index: 7;
    animation: boostPulse 0.5s ease-in-out infinite alternate;
}
@keyframes boostPulse { 0% { transform: translateX(-50%) scale(1); } 100% { transform: translateX(-50%) scale(1.05); } }

/* === BOTTOM NAV === */
#bottom-nav {
    display: flex; flex-shrink: 0; background: #1a1a2e;
    border-top: 2px solid #333; z-index: 10;
}
.nav-tab {
    flex: 1; text-align: center; padding: 10px 2px;
    font-size: 11px; font-weight: 700; cursor: pointer;
    color: #888; transition: all 0.2s; user-select: none;
    border-top: 2px solid transparent;
}
.nav-tab:hover { color: #ccc; background: rgba(255,255,255,0.03); }
.nav-tab.active { color: #4f4; border-top-color: #4f4; background: rgba(0,255,0,0.05); }
.nav-tab.notify::after {
    content: ''; display: inline-block; width: 6px; height: 6px;
    background: #ff4444; border-radius: 50%; margin-left: 3px; vertical-align: top;
}

/* === PANELS === */
#panel-container {
    position: absolute; top: 40px; bottom: 48px; left: 0; right: 0;
    z-index: 8; pointer-events: none;
}
.panel {
    position: absolute; inset: 0; background: #12121eee;
    overflow-y: auto; padding: 12px; pointer-events: auto;
    animation: panelSlide 0.2s ease-out;
}
@keyframes panelSlide { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.panel.hidden { display: none; }
.panel h2 { font-size: 18px; color: #ffd700; margin-bottom: 10px; text-align: center; }

/* === HERO GRID === */
.hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hero-card {
    background: #1a1a2e; border: 2px solid #333; border-radius: 8px;
    padding: 6px; text-align: center; cursor: pointer;
    transition: all 0.15s; position: relative;
}
.hero-card:hover { border-color: #666; transform: translateY(-2px); }
.hero-card.locked { opacity: 0.4; filter: grayscale(1); }
.hero-card .hero-thumb {
    width: 48px; height: 48px; margin: 0 auto 4px;
    image-rendering: pixelated; overflow: hidden;
}
.hero-card .hero-thumb img { width: 48px; height: 64px; object-fit: cover; object-position: 0 0; }
.hero-card .hero-name { font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-card .hero-level { font-size: 8px; color: #aaa; }
.hero-card .hero-stars { font-size: 10px; color: #ffd700; }
.hero-card.rarity-common { border-color: #555; }
.hero-card.rarity-rare { border-color: #4488ff; }
.hero-card.rarity-epic { border-color: #aa44ff; }
.hero-card.rarity-legendary { border-color: #ffd700; box-shadow: 0 0 8px rgba(255,215,0,0.3); }

/* === HERO DETAIL === */
.hero-detail {
    background: #1a1a2e; border-radius: 10px; padding: 16px;
    max-width: 380px; margin: 0 auto;
}
.hero-detail-header { display: flex; gap: 12px; margin-bottom: 12px; }
.hero-detail-sprite { width: 64px; height: 64px; image-rendering: pixelated; overflow: hidden; border-radius: 8px; background: #111; }
.hero-detail-sprite img { width: 64px; height: 85px; object-fit: cover; object-position: 0 0; }
.hero-detail-info { flex: 1; }
.hero-detail-info h3 { font-size: 16px; margin-bottom: 2px; }
.hero-detail-info .rarity-tag {
    display: inline-block; padding: 1px 8px; border-radius: 8px;
    font-size: 10px; font-weight: 700;
}
.rarity-tag.common { background: #555; }
.rarity-tag.rare { background: #2244aa; }
.rarity-tag.epic { background: #7722bb; }
.rarity-tag.legendary { background: #aa7700; color: #ffd700; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 8px 0; }
.hero-stat { font-size: 11px; padding: 3px 6px; background: #222; border-radius: 4px; }
.hero-stat span { font-weight: 700; }
.hero-stat .hp { color: #4f4; }
.hero-stat .atk { color: #ff6b6b; }
.hero-stat .def { color: #66aaff; }
.hero-stat .spd { color: #ffaa44; }
.hero-equip-slots { display: flex; gap: 6px; margin: 8px 0; }
.equip-slot {
    width: 44px; height: 44px; background: #222; border: 2px solid #444;
    border-radius: 6px; cursor: pointer; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.equip-slot img { width: 36px; height: 36px; }
.equip-slot .slot-label { font-size: 8px; color: #666; position: absolute; bottom: 1px; }
.hero-detail-actions { display: flex; gap: 8px; margin-top: 8px; }

/* === TEAM PANEL === */
.team-formation {
    display: flex; justify-content: center; gap: 10px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.team-slot {
    width: 72px; height: 90px; background: #1a1a2e; border: 2px dashed #444;
    border-radius: 10px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.2s; position: relative;
}
.team-slot.filled { border-style: solid; border-color: #4f4; }
.team-slot:hover { border-color: #888; }
.team-slot .slot-num { font-size: 10px; color: #666; }
.team-slot img { width: 48px; height: 64px; image-rendering: pixelated; object-fit: cover; object-position: 0 0; }
.team-slot .slot-name { font-size: 9px; font-weight: 700; margin-top: 2px; }
.formation-select { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.formation-btn {
    padding: 6px 14px; border-radius: 6px; background: #222;
    border: 1px solid #444; cursor: pointer; font-size: 11px;
    color: #aaa; font-weight: 700;
}
.formation-btn.active { background: #1a3a1a; border-color: #4f4; color: #4f4; }
.synergy-list { margin-top: 12px; }
.synergy-item { font-size: 11px; padding: 4px 8px; background: #1a1a2e; border-radius: 4px; margin-bottom: 4px; }
.synergy-item.active { color: #ffd700; background: #2a2a1e; }

/* === EQUIPMENT PANEL === */
.equip-list { display: flex; flex-direction: column; gap: 6px; }
.equip-item {
    display: flex; align-items: center; gap: 8px;
    background: #1a1a2e; border: 1px solid #333; border-radius: 8px;
    padding: 8px; cursor: pointer; transition: all 0.15s;
}
.equip-item:hover { border-color: #666; }
.equip-item img { width: 36px; height: 36px; }
.equip-item-info { flex: 1; }
.equip-item-info .item-name { font-size: 12px; font-weight: 700; }
.equip-item-info .item-stats { font-size: 10px; color: #aaa; }
.equip-item-info .item-slot { font-size: 9px; color: #888; text-transform: uppercase; }
.equip-filter { display: flex; gap: 6px; margin-bottom: 10px; justify-content: center; }
.filter-btn {
    padding: 4px 10px; border-radius: 12px; background: #222;
    border: 1px solid #444; cursor: pointer; font-size: 10px; color: #aaa;
}
.filter-btn.active { background: #1a2a3a; border-color: #4488ff; color: #4488ff; }

/* === SUMMON PANEL === */
.summon-area { text-align: center; padding: 10px; }
.summon-banner {
    background: linear-gradient(135deg, #1a1a3e, #2a1a4e);
    border: 2px solid #aa44ff; border-radius: 12px;
    padding: 20px; margin-bottom: 16px;
}
.summon-banner h3 { color: #ffd700; font-size: 18px; margin-bottom: 6px; }
.summon-banner p { font-size: 11px; color: #aaa; }
.summon-pity { font-size: 11px; color: #ff6b6b; margin-top: 6px; }
.summon-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.summon-result {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin-top: 16px; min-height: 100px;
}
.summon-card {
    width: 70px; text-align: center; animation: summonReveal 0.5s ease-out;
    animation-fill-mode: both;
}
.summon-card img {
    width: 48px; height: 64px; image-rendering: pixelated;
    object-fit: cover; object-position: 0 0;
    border-radius: 6px; border: 2px solid #333;
}
.summon-card .s-name { font-size: 9px; font-weight: 700; margin-top: 2px; }
.summon-card .s-rarity { font-size: 8px; }
.summon-card.rarity-legendary img { border-color: #ffd700; box-shadow: 0 0 12px rgba(255,215,0,0.6); }
.summon-card.rarity-epic img { border-color: #aa44ff; box-shadow: 0 0 8px rgba(170,68,255,0.4); }
.summon-card.rarity-rare img { border-color: #4488ff; }
@keyframes summonReveal {
    0% { opacity: 0; transform: scale(0.3) rotateY(180deg); }
    60% { transform: scale(1.15) rotateY(0); }
    100% { opacity: 1; transform: scale(1) rotateY(0); }
}

/* === ZONES PANEL === */
.zone-list { display: flex; flex-direction: column; gap: 8px; }
.zone-card {
    display: flex; align-items: center; gap: 10px;
    background: #1a1a2e; border: 2px solid #333; border-radius: 10px;
    padding: 10px; cursor: pointer; transition: all 0.2s;
}
.zone-card:hover { border-color: #666; }
.zone-card.active { border-color: #4f4; background: #1a2a1a; }
.zone-card.locked { opacity: 0.4; cursor: not-allowed; }
.zone-card .zone-thumb {
    width: 60px; height: 40px; border-radius: 6px; overflow: hidden;
    image-rendering: pixelated; flex-shrink: 0;
}
.zone-card .zone-thumb img { width: 100%; height: 100%; object-fit: cover; }
.zone-card .zone-info { flex: 1; }
.zone-card .zone-info h4 { font-size: 13px; margin-bottom: 2px; }
.zone-card .zone-info p { font-size: 10px; color: #aaa; }
.zone-card .zone-progress-mini {
    width: 60px; height: 8px; background: #333; border-radius: 4px; overflow: hidden;
}
.zone-card .zone-progress-mini div { height: 100%; background: #4488ff; border-radius: 4px; }

/* === OVERLAYS === */
#overlay-container {
    position: absolute; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
}
#overlay-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
#overlay-content {
    position: relative; z-index: 1; max-width: 380px; width: 90%;
    max-height: 80vh; overflow-y: auto;
}
#offline-overlay {
    position: absolute; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.8);
}
#offline-panel {
    background: #1a1a2e; border: 2px solid #ffd700; border-radius: 12px;
    padding: 20px; text-align: center; max-width: 320px;
}
#offline-panel h2 { color: #ffd700; margin-bottom: 12px; }
#offline-results { font-size: 13px; margin-bottom: 16px; line-height: 1.8; }
.offline-line { display: flex; align-items: center; justify-content: center; gap: 6px; }
.offline-line img { width: 18px; height: 18px; }

/* === SETTINGS === */
#settings-overlay {
    position: absolute; inset: 0; z-index: 55;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.8);
}
#settings-panel {
    background: #1a1a2e; border: 2px solid #555; border-radius: 12px;
    padding: 20px; max-width: 320px; width: 90%;
}
#settings-panel h2 { text-align: center; color: #ffd700; margin-bottom: 16px; }
.setting-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 12px; font-size: 13px;
}
.setting-row input {
    flex: 1; background: #222; border: 1px solid #444; border-radius: 4px;
    color: #eee; padding: 4px 8px; font-size: 12px;
}
.toggle-btn {
    padding: 4px 12px; border-radius: 12px; cursor: pointer;
    font-size: 11px; font-weight: 700;
}
.toggle-btn.on { background: #1a3a1a; color: #4f4; border: 1px solid #4f4; }
.toggle-btn.off { background: #3a1a1a; color: #f44; border: 1px solid #f44; }

/* === BUTTONS === */
.game-btn {
    display: inline-block; padding: 10px 24px; background: linear-gradient(180deg, #3a5a3a, #2a4a2a);
    border: 2px solid #4f4; border-radius: 8px; color: #4f4;
    font-weight: 700; font-size: 14px; cursor: pointer;
    text-align: center; user-select: none; transition: all 0.15s;
}
.game-btn:hover { background: linear-gradient(180deg, #4a6a4a, #3a5a3a); transform: translateY(-1px); }
.game-btn:active { transform: translateY(1px); }
.game-btn.small { padding: 5px 12px; font-size: 11px; }
.game-btn.blue { background: linear-gradient(180deg, #2a3a5a, #1a2a4a); border-color: #4488ff; color: #4488ff; }
.game-btn.purple { background: linear-gradient(180deg, #3a2a5a, #2a1a4a); border-color: #aa44ff; color: #aa44ff; }
.game-btn.gold { background: linear-gradient(180deg, #4a3a1a, #3a2a0a); border-color: #ffd700; color: #ffd700; }
.game-btn.danger { background: linear-gradient(180deg, #4a1a1a, #3a0a0a); border-color: #f44; color: #f44; }
.game-btn.prestige-color { background: linear-gradient(180deg, #3a2a5a, #2a1a4a); border-color: #ff88ff; color: #ff88ff; }
.game-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* === MISC === */
.hidden { display: none !important; }
.text-gold { color: #ffd700; }
.text-red { color: #ff6b6b; }
.text-blue { color: #4488ff; }
.text-green { color: #4f4; }
.text-purple { color: #aa44ff; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

@media(max-width:640px){
    /* === CONTAINER === */
    #game-container{max-width:100vw;overflow-x:hidden}

    /* Move a11y button above bottom nav so it doesn't overlap tabs */
    #a11y-toggle{bottom:56px!important}

    /* === TOP BAR: readable currency/DPS/zone === */
    #top-bar{gap:2px;padding:5px 4px;flex-wrap:wrap;min-height:38px;overflow:hidden;justify-content:center;}
    .currency{font-size:12px;gap:2px}
    .currency-icon{width:16px;height:16px}
    #dps-display{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    #dps-label{display:none;}
    #dps-amount{font-size:11px}
    #zone-display{font-size:9px;max-width:80px;overflow:hidden;text-overflow:ellipsis;margin-left:0;}
    #zone-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .top-btn{width:30px;height:30px;min-width:30px}

    /* === NAV TABS: all visible, 48px+ tap targets === */
    .nav-tab{
        padding:8px 2px;
        font-size:clamp(9px,2.2vw,12px);
        min-height:48px;
        display:flex;align-items:center;justify-content:center;
        touch-action:manipulation;
    }

    #top-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 4px;
        padding: 6px;
        min-height: unset;
    }
    
    #gold-display, #diamond-display {
        justify-content: flex-start;
    }
    
    #dps-display, #zone-display {
        justify-content: flex-start;
        text-align: left;
        margin: 0;
    }
    
    #settings-btn {
        position: absolute;
        top: 6px;
        right: 6px;
        margin: 0;
    }

    /* === BATTLE VIEW === */
    #battle-view{min-height:200px}
    #team-area{left:4px;gap:3px}
    .team-hero-slot{width:44px;height:44px}
    .team-hero-slot img{width:44px;height:58px}
    .team-hero-hp{height:5px}
    #vs-area{right:12px}
    #enemy-sprite-wrap{width:100px;height:100px}
    #enemy-name-bar{font-size:14px}
    #enemy-hp-bar-container{width:120px;height:14px}
    #enemy-hp-text{font-size:10px}
    #stage-progress{width:180px;height:16px;bottom:4px}
    #stage-progress-text{font-size:10px}
    #help-text{display:none}
    #boost-indicator{font-size:12px;padding:4px 12px}

    /* === DAMAGE NUMBERS: readable === */
    .dmg-num{font-size:16px}
    .dmg-num.crit{font-size:22px}
    .dmg-num.tap{font-size:20px}

    /* Speed/Auto buttons */
    #battle-actions-extra{
        position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
        flex-wrap:wrap;gap:4px;max-width:92vw;z-index:3;
    }
    #battle-actions-extra .game-btn{
        min-height:36px;font-size:11px;padding:6px 10px;
    }
    #auto-advance-toggle{white-space:nowrap;font-size:10px!important}

    /* === PANELS: scrollable overflow === */
    .panel{padding:10px 8px;overflow-y:auto;-webkit-overflow-scrolling:touch}
    .panel h2{font-size:16px;margin-bottom:8px}

    /* === HERO GRID: readable stats === */
    .hero-grid{grid-template-columns:repeat(3,1fr);gap:6px}
    .hero-card{padding:6px}
    .hero-card .hero-thumb{width:44px;height:44px}
    .hero-card .hero-thumb img{width:44px;height:58px}
    .hero-card .hero-name{font-size:9px}
    .hero-card .hero-level{font-size:8px}
    .hero-card .hero-stars{font-size:10px}

    /* === HERO DETAIL === */
    .hero-detail{padding:12px;max-width:100%}
    .hero-detail-header{gap:8px}
    .hero-detail-sprite{width:56px;height:56px}
    .hero-detail-sprite img{width:56px;height:74px}
    .hero-detail-info h3{font-size:15px}
    .hero-stats{grid-template-columns:1fr 1fr;gap:3px}
    .hero-stat{font-size:11px;padding:4px 6px}
    .hero-equip-slots{gap:6px}
    .equip-slot{width:44px;height:44px}
    .hero-detail-actions{gap:6px;flex-wrap:wrap}

    /* === TEAM PANEL === */
    .team-formation{gap:8px}
    .team-slot{width:64px;height:82px}
    .team-slot img{width:44px;height:58px}
    .team-slot .slot-num{font-size:10px}
    .team-slot .slot-name{font-size:9px}
    .formation-select{gap:6px}
    .formation-btn{padding:8px 12px;font-size:12px;min-height:40px}
    .synergy-item{font-size:11px;padding:5px 8px}

    /* === EQUIPMENT PANEL === */
    .equip-filter{gap:6px;flex-wrap:wrap}
    .filter-btn{padding:6px 12px;font-size:11px;min-height:36px}
    .equip-item{padding:8px;gap:8px}
    .equip-item img{width:32px;height:32px}
    .equip-item-info .item-name{font-size:12px}
    .equip-item-info .item-stats{font-size:10px}

    /* === SUMMON PANEL === */
    .summon-banner{padding:14px}
    .summon-banner h3{font-size:16px}
    .summon-banner p{font-size:11px}
    .summon-pity{font-size:11px}
    .summon-buttons{gap:8px;flex-wrap:wrap}
    .summon-card{width:64px}
    .summon-card img{width:44px;height:58px}
    .summon-card .s-name{font-size:9px}

    /* === ZONES PANEL === */
    .zone-card{padding:10px;gap:8px}
    .zone-card .zone-thumb{width:52px;height:36px}
    .zone-card .zone-info h4{font-size:13px}
    .zone-card .zone-info p{font-size:11px}

    /* === BUTTONS: 48px+ min-height === */
    .game-btn{padding:10px 18px;font-size:13px;min-height:48px;touch-action:manipulation}
    .game-btn.small{padding:7px 12px;font-size:11px;min-height:40px}

    /* === SETTINGS === */
    #settings-panel{max-width:95vw;padding:14px}
    .setting-row{font-size:12px;flex-wrap:wrap;gap:6px}
    #settings-close{min-height:48px}

    /* === OVERLAYS === */
    #overlay-content{max-width:95vw;width:95%}

    /* === HERO SELECT MODAL === */
    .hero-select-grid{grid-template-columns:repeat(4,1fr);gap:5px}
    .hero-select-item{padding:5px}
    .hero-select-item img{width:34px;height:45px}
    .hero-select-item .hs-name{font-size:8px}
}

/* Click ripple - expanding rings */
.click-ripple {
    position: absolute; width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid #ffd700; pointer-events: none; z-index: 6;
    animation: rippleOut 0.5s ease-out forwards;
    box-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.click-ripple::after {
    content: '';
    position: absolute; inset: -4px; border-radius: 50%;
    border: 1px solid rgba(255,215,0,0.4);
    animation: rippleOut2 0.6s ease-out 0.05s forwards;
    opacity: 0;
}
@keyframes rippleOut {
    0% { opacity: 1; transform: translate(-50%,-50%) scale(0.2); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(2.5); }
}
@keyframes rippleOut2 {
    0% { opacity: 0.6; transform: scale(0.3); }
    100% { opacity: 0; transform: scale(3); }
}

/* Gold float - coin floats up when earned */
.gold-float-text {
    position: absolute; pointer-events: none; z-index: 7;
    font-weight: 900; font-size: 14px; color: #ffd700;
    text-shadow: 0 1px 3px #000;
    display: flex; align-items: center; gap: 3px;
    animation: goldFloatUp 1.2s ease-out forwards;
}
.gold-float-text img { width: 14px; height: 14px; }
@keyframes goldFloatUp {
    0% { opacity: 1; transform: translateY(0) scale(1.2); }
    30% { transform: translateY(-20px) scale(1); opacity: 1; }
    100% { opacity: 0; transform: translateY(-60px) scale(0.7); }
}

/* Hero portrait level-up flash */
.hero-level-up {
    animation: heroLevelFlash 0.8s ease-out;
}
@keyframes heroLevelFlash {
    0% { filter: brightness(1); box-shadow: none; }
    20% { filter: brightness(3); box-shadow: 0 0 20px rgba(255,215,0,0.8); }
    50% { filter: brightness(2); box-shadow: 0 0 30px rgba(255,215,0,0.6); }
    100% { filter: brightness(1); box-shadow: none; }
}

/* Zone transition slide */
.zone-transition {
    position: absolute; inset: 0; z-index: 20;
    pointer-events: none;
    animation: zoneSlide 0.6s ease-in-out;
}
@keyframes zoneSlide {
    0% { opacity: 0; transform: translateX(100%); }
    30% { opacity: 1; transform: translateX(0); background: rgba(0,0,0,0.8); }
    70% { opacity: 1; transform: translateX(0); background: rgba(0,0,0,0.8); }
    100% { opacity: 0; transform: translateX(-100%); }
}

/* Prestige golden burst */
.prestige-burst {
    position: fixed; inset: 0; z-index: 100;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, rgba(255,150,0,0.2) 40%, transparent 70%);
    animation: prestigeBurst 1.5s ease-out forwards;
}
@keyframes prestigeBurst {
    0% { opacity: 0; transform: scale(0.3); }
    15% { opacity: 1; transform: scale(1.1); }
    40% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* Prestige star particles */
.prestige-star {
    position: fixed; pointer-events: none; z-index: 101;
    width: 8px; height: 8px; background: #ffd700;
    border-radius: 50%; box-shadow: 0 0 6px #ffd700;
    animation: prestigeStarFly 1.5s ease-out forwards;
}
@keyframes prestigeStarFly {
    0% { opacity: 1; transform: translate(0,0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}

/* Summon gacha reveal */
.summon-reveal-overlay {
    position: absolute; inset: 0; z-index: 55;
    background: radial-gradient(circle, rgba(170,68,255,0.3) 0%, rgba(0,0,0,0.9) 70%);
    display: flex; align-items: center; justify-content: center;
    animation: summonRevealBg 0.5s ease-out;
}
@keyframes summonRevealBg {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Boss special styling */
.boss-enemy #enemy-name-bar { color: #ffd700; font-size: 15px; }
.boss-enemy #enemy-hp-bar { background: linear-gradient(90deg, #ff4400, #ffd700); }
.boss-enemy #enemy-sprite { animation: bossIdle 0.8s ease-in-out infinite alternate; }
@keyframes bossIdle { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-8px) scale(1.05); } }

/* Hero select modal in team panel */
.hero-select-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.hero-select-item {
    text-align: center; cursor: pointer; padding: 4px;
    background: #222; border-radius: 6px; border: 1px solid #333;
    transition: all 0.15s;
}
.hero-select-item:hover { border-color: #4f4; }
.hero-select-item.in-team { border-color: #ff6b6b; opacity: 0.5; }
.hero-select-item img { width: 36px; height: 48px; image-rendering: pixelated; object-fit: cover; object-position: 0 0; }
.hero-select-item .hs-name { font-size: 8px; }

/* Prestige glow */
.prestige-glow { animation: prestigeGlow 2s ease-in-out infinite; }
@keyframes prestigeGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(255,136,255,0.3); }
    50% { box-shadow: 0 0 25px rgba(255,136,255,0.6); }
}

/* Level up flash */
.level-up-flash {
    position: absolute; inset: 0; background: rgba(255,215,0,0.3);
    border-radius: inherit; pointer-events: none;
    animation: levelFlash 0.5s ease-out forwards;
}
@keyframes levelFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* === PROFESSIONAL JUICE EFFECTS === */

/* Crit damage number - bigger, golden, with glow */
.dmg-num.crit {
    color: #ffd700 !important;
    font-size: 28px !important;
    text-shadow: 0 0 12px rgba(255,215,0,0.8), 0 2px 6px rgba(0,0,0,0.8) !important;
    animation: critPop 1.2s ease-out forwards !important;
}
.dmg-num.crit-label {
    color: #ff4444 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-shadow: 0 0 8px #ff0000, 0 2px 4px rgba(0,0,0,0.8) !important;
    animation: critLabelPop 1s ease-out forwards !important;
}
@keyframes critPop {
    0% { opacity: 1; transform: scale(2.5) translateY(0); }
    15% { opacity: 1; transform: scale(1.2) translateY(-10px); }
    100% { opacity: 0; transform: scale(0.7) translateY(-60px); }
}
@keyframes critLabelPop {
    0% { opacity: 1; transform: scale(3) translateY(0); }
    20% { opacity: 1; transform: scale(1) translateY(-15px); }
    100% { opacity: 0; transform: scale(0.5) translateY(-50px); }
}

/* Expanding click ripple */
.click-ripple {
    position: absolute; pointer-events: none; z-index: 50;
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    transform: translate(-50%, -50%);
    animation: rippleExpand 0.5s ease-out forwards;
}
.click-ripple.inner {
    border-color: rgba(255,200,100,0.5);
    animation: rippleExpand 0.35s ease-out forwards;
}
@keyframes rippleExpand {
    0% { width: 10px; height: 10px; opacity: 0.8; }
    100% { width: 80px; height: 80px; opacity: 0; }
}

/* Death burst particles */
@keyframes deathBurst {
    0% { opacity: 1; transform: translate(0,0) scale(1.5); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}
.death-burst {
    position: absolute; pointer-events: none; z-index: 55;
    animation: deathBurst 0.5s ease-out forwards;
}

/* Hero level-up gold flash overlay */
.hero-levelup-flash {
    position: absolute; inset: 0;
    background: radial-gradient(circle, rgba(255,215,0,0.6), transparent 70%);
    pointer-events: none; border-radius: inherit; z-index: 5;
    animation: heroLevelFlash 0.8s ease-out forwards;
}
@keyframes heroLevelFlash {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.3); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* LEVEL UP! banner */
.levelup-banner {
    position: absolute; top: 35%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px; font-weight: 900; color: #ffd700;
    text-shadow: 0 0 16px rgba(255,215,0,0.6), 0 3px 8px rgba(0,0,0,0.8);
    pointer-events: none; z-index: 200; white-space: nowrap;
    letter-spacing: 3px;
    animation: levelUpBanner 1.3s ease-out forwards;
}
@keyframes levelUpBanner {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(3); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.7) translateY(-20px); }
}

/* Enhanced hero level-up slot animation */
@keyframes heroLvUp {
    0% { box-shadow: 0 0 0 rgba(255,215,0,0); }
    30% { box-shadow: 0 0 20px rgba(255,215,0,0.6), inset 0 0 10px rgba(255,215,0,0.3); }
    100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
}
.hero-level-up { animation: heroLvUp 1.2s ease-out; }

/* Zone transition slide */
.zone-transition {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.9) 70%, transparent);
    pointer-events: none; z-index: 100;
    animation: zoneSlide 0.7s ease-in-out forwards;
}
@keyframes zoneSlide {
    0% { transform: translateX(-100%); opacity: 0; }
    30% { transform: translateX(0); opacity: 1; }
    70% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}