/* ===== TERASTAL EFFECTS ===== */

/* Terastal badge — gradient purple/blue pin */
.terastal-badge {
    background: linear-gradient(135deg, #6a0dad, #1a4fff, #a855f7);
    color: white;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: bold;
    margin-left: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(140, 60, 255, 0.7);
    border: 1px solid rgba(200, 150, 255, 0.4);
    animation: terastalBadgePulse 2s infinite ease-in-out;
}
@keyframes terastalBadgePulse {
    0%, 100% { box-shadow: 0 0 6px rgba(140,60,255,0.6); }
    50% { box-shadow: 0 0 16px rgba(140,60,255,1), 0 0 30px rgba(100,80,255,0.5); }
}

/* Terastal sprite glow — color set dynamically via JS */
.terastal-sprite {
    animation: terastalGlow 2s infinite ease-in-out;
}
@keyframes terastalGlow {
    0%, 100% { filter: var(--tera-filter-low); }
    50% { filter: var(--tera-filter-high); }
}

/* Sparkle particle */
.tera-sparkle {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    animation: teraSparkleAnim var(--dur) ease-out forwards;
    z-index: 999;
}
@keyframes teraSparkleAnim {
    0%   { transform: translate(-50%,-50%) scale(0) rotate(0deg); opacity: 1; }
    40%  { transform: translate(-50%,-50%) scale(1.4) rotate(180deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0) rotate(360deg); opacity: 0; }
}

/* Glitter shimmer overlay on sprite */
.tera-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 50%;
    animation: teraShimmer 1.5s infinite linear;
    z-index: 2;
}
@keyframes teraShimmer {
    0%   { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 0%, transparent 60%); }
    25%  { background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.35) 0%, transparent 60%); }
    50%  { background: radial-gradient(circle at 70% 80%, rgba(255,255,255,0.35) 0%, transparent 60%); }
    75%  { background: radial-gradient(circle at 20% 70%, rgba(255,255,255,0.35) 0%, transparent 60%); }
    100% { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 0%, transparent 60%); }
}

/* ========== ENHANCED BATTLE IMPACT EFFECTS ========== */
@keyframes floatUp {
    0% { transform: translateY(0) scale(1.4) rotate(-3deg); opacity: 1; }
    30% { transform: translateY(-30px) scale(1.6) rotate(2deg); opacity: 1; }
    70% { transform: translateY(-70px) scale(1.2) rotate(-1deg); opacity: 0.7; }
    100% { transform: translateY(-110px) scale(0.7) rotate(0deg); opacity: 0; }
}
@keyframes floatUpCrit {
    0% { transform: translateY(0) scale(2) rotate(-5deg); opacity: 1; }
    20% { transform: translateY(-20px) scale(2.4) rotate(3deg); opacity: 1; }
    100% { transform: translateY(-120px) scale(0.9) rotate(1deg); opacity: 0; }
}
@keyframes critStampAnim {
    0% { transform: translate(-50%,-50%) scale(3) rotate(-8deg); opacity: 0; }
    15% { transform: translate(-50%,-50%) scale(1.1) rotate(2deg); opacity: 1; }
    70% { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(0.8) rotate(0deg); opacity: 0; }
}
@keyframes shockwaveExpand {
    0% { transform: translate(-50%,-50%) scale(0); opacity: 1; width: 20px; height: 20px; }
    100% { transform: translate(-50%,-50%) scale(1); opacity: 0; width: 200px; height: 200px; }
}
@keyframes hitFlash {
    0% { opacity: 0; }
    15% { opacity: 0.35; }
    100% { opacity: 0; }
}

.floating-damage {
    position: absolute;
    font-weight: 900;
    font-size: 1.6rem;
    pointer-events: none;
    z-index: 1000;
    animation: floatUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    white-space: nowrap;
    font-family: 'Impact', sans-serif;
}
.floating-damage.critical {
    font-size: 2.2rem;
    animation: floatUpCrit 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hit-shockwave {
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(255,150,0,0.9);
    pointer-events: none;
    z-index: 999;
    animation: shockwaveExpand 0.6s ease-out forwards;
}
.hit-flash-overlay {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    pointer-events: none;
    z-index: 998;
    animation: hitFlash 0.4s ease-out forwards;
}
.crit-stamp {
    position: absolute;
    font-family: 'Impact', sans-serif;
    font-size: 1.8rem;
    color: #fff;
    text-shadow: 0 0 20px #ffaa00, 3px 3px 0 #cc0000;
    pointer-events: none;
    z-index: 1001;
    animation: critStampAnim 1.2s ease-out forwards;
    white-space: nowrap;
}
.super-effective-stamp {
    position: absolute;
    font-family: 'Impact', sans-serif;
    font-size: 1.6rem;
    color: #fff;
    text-shadow: 0 0 20px #44ff88, 3px 3px 0 #004400;
    pointer-events: none;
    z-index: 1001;
    animation: critStampAnim 1.2s ease-out forwards;
    white-space: nowrap;
}
.shake-effect { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.shake-effect-hard { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; transform: scale(1.1); }

/* --- Overwrite in <style> block --- */
.terastal-sprite {
    animation: teraGlowAnim 2s infinite alternate ease-in-out !important;
}

@keyframes teraGlowAnim {
    from { filter: var(--tera-filter-low) brightness(1); }
    to { filter: var(--tera-filter-high) brightness(1.3); }
}

/* Coin display dark theme */
body.dark-theme #coin-display {
    background: #2d2f3e;
    color: #ffd700;
    border: 1px solid #ffd70033;
}

/* ===== TEAM ICONS BAR ===== */
#battle-team-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 2px;
}

.team-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    overflow: hidden;
    background: rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: filter 0.3s, border-color 0.3s, transform 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    position: relative;
}

.team-icon-wrap img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Active pokemon gets a glowing white border */
.team-icon-wrap.is-active {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 2px 8px rgba(0,0,0,0.4);
    transform: scale(1.12);
}

/* Fainted pokemon turns gray */
.team-icon-wrap.is-fainted {
    filter: grayscale(100%) brightness(0.5);
    border-color: rgba(255,255,255,0.2);
    box-shadow: none;
}

/* Small fainted X overlay */
.team-icon-wrap.is-fainted::after {
    content: '✕';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 900;
    color: rgba(255,80,80,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* ========== DATA SAVER MODE ========== */
/* Data Saver Mode - Reduces data usage */
body.data-saver-mode .btl-sprite,
body.data-saver-mode .encounter-sprite,
body.data-saver-mode .poke-card-img-wrap img {
    image-rendering: crisp-edges;
    filter: none !important;
}

/* Disable all battle effects */
body.data-saver-mode .floating-damage,
body.data-saver-mode .hit-shockwave,
body.data-saver-mode .hit-flash-overlay,
body.data-saver-mode .impact-particle,
body.data-saver-mode .crit-stamp,
body.data-saver-mode .super-effective-stamp {
    display: none !important;
}

/* Disable animations */
body.data-saver-mode .terastal-sprite,
body.data-saver-mode .evolution-animate,
body.data-saver-mode .shake-effect,
body.data-saver-mode .shake-effect-hard {
    animation: none !important;
}

/* Simplify damage numbers */
body.data-saver-mode .floating-damage {
    display: block !important;
    font-size: 0.9rem !important;
    background: rgba(0,0,0,0.7);
    padding: 2px 6px;
    border-radius: 4px;
    animation: none !important;
}

/* Disable background effects */
body.data-saver-mode .hit-flash-overlay {
    display: none !important;
}

/* Use lower quality images */
body.data-saver-mode img {
    image-rendering: pixelated;
}

/* Disable particle effects */
body.data-saver-mode .impact-particle,
body.data-saver-mode .hit-shockwave {
    display: none !important;
}

/* Disable music prompt animation */
body.data-saver-mode .music-prompt {
    animation: none !important;
}

/* Data Saver Mode - Music disabled indicator */
body.data-saver-mode #volume-toggle {
    opacity: 0.6;
    cursor: not-allowed;
}

body.data-saver-mode #volume-toggle:hover::after {
    content: " (Disabled in Data Saver)";
    font-size: 0.7rem;
    position: absolute;
    background: rgba(0,0,0,0.8);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Optional: Show a visual indicator that music is disabled */
body.data-saver-mode::after {
    content: "📱 Data Saver: Music OFF";
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #2ecc71;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    z-index: 9999;
    pointer-events: none;
    font-weight: bold;
}

/* HP and EXP Bar Styles for Modals */
.hp-bar-container, .exp-bar-container {
    margin: 6px 0;
}

.hp-bar-label, .exp-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    margin-bottom: 2px;
    color: var(--text-light);
}

.hp-bar, .exp-bar {
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

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

.exp-fill {
    background: #a855f7;
    height: 100%;
    transition: width 0.3s ease;
}

/* Dark theme overrides */
body.dark-theme .hp-bar,
body.dark-theme .exp-bar {
    background: #3d4050;
}

body.dark-theme .hp-fill {
    background: #4cd964;
}

body.dark-theme .exp-fill {
    background: #a855f7;
}

/* ========== CARD-STYLE SCROLLABLE NAVIGATION ========== */
.card-nav {
    background: transparent;
    padding: 12px 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden;
}

/* Header with logo and hamburger */
.nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--primary-dark);
    flex-shrink: 0;
}
.logo img {
    height: 40px;
    width: auto;
    border-radius: 12px;
}

/* Hamburger button */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
    flex-shrink: 0;
    margin-left: auto;
}
.hamburger span {
    width: 100%;
    height: 3px;
    background: var(--text-dark);
    border-radius: 4px;
    transition: all 0.3s ease;
}
.hamburger.open span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
}
.hamburger.open span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* Collapsible container */
.nav-collapsible {
    transition: max-height 0.4s ease-out, opacity 0.2s ease;
    overflow: hidden;
    width: 100%;
}

/* On desktop: always expanded, hamburger hidden */
@media (min-width: 769px) {
    .nav-collapsible {
        max-height: none !important;
        opacity: 1 !important;
    }
    .hamburger {
        display: none !important;
    }
}

/* On mobile: collapsible hidden by default, hamburger visible */
@media (max-width: 768px) {
    .nav-collapsible {
        max-height: 0;
        opacity: 0;
    }
    .nav-collapsible.open {
        max-height: 500px;
        opacity: 1;
    }
    .hamburger {
        display: flex;
    }
}

/* Each card */
.nav-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 8px 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}
.nav-card:last-child {
    margin-bottom: 0;
}

/* Scrollable row inside card */
.nav-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    padding: 6px 0;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
}
.nav-row::-webkit-scrollbar {
    height: 4px;
}
.nav-row::-webkit-scrollbar-track {
    background: var(--border);
    border-radius: 4px;
}
.nav-row::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

/* Items inside rows */
.nav-link, .nav-item, .volume-btn, .btn-outline {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 40px;
    transition: 0.2s;
    color: var(--text-dark);
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.nav-link:hover, .nav-item:hover {
    background: #eef2ff;
    color: var(--primary);
}
.volume-btn {
    background: rgba(255,255,255,0.8);
    width: 36px;
    height: 36px;
    justify-content: center;
}
.volume-btn:hover {
    background: white;
    transform: scale(1.05);
}
#user-display {
    background: #eef2ff;
    padding: 4px 10px;
    border-radius: 40px;
    gap: 8px;
}
#level-display, #coin-display {
    background: #fef9e3;
    color: #b45309;
    padding: 4px 12px;
    border-radius: 40px;
    font-weight: bold;
    font-size: 0.85rem;
}
.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
}
.btn-outline:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Dark theme adjustments */
body.dark-theme .nav-card {
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
body.dark-theme .nav-link:hover,
body.dark-theme .nav-item:hover {
    background: #2d2f3e;
    color: var(--primary);
}
body.dark-theme #user-display {
    background: #2d2f3e;
    color: var(--text-dark);
}
body.dark-theme #level-display,
body.dark-theme #coin-display {
    background: #1e2230;
    color: #fbbf24;
}
body.dark-theme .volume-btn {
    background: rgba(30,35,50,0.8);
}
body.dark-theme .volume-btn:hover {
    background: var(--primary);
    color: white;
}

/* Responsive */
@media (max-width: 600px) {
    .nav-card {
        padding: 6px 10px;
    }
    .nav-link, .nav-item {
        padding: 4px 10px;
        font-size: 0.8rem;
    }
    .volume-btn {
        width: 32px;
        height: 32px;
    }
}

/* ========== DESKTOP NAVIGATION COLLAPSE ========== */
/* Desktop collapse button */
.nav-collapse-btn {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 40px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--text-dark);
    flex-shrink: 0;
}

.nav-collapse-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.05);
}

/* When navigation is collapsed on desktop */
body.nav-collapsed .nav-collapsible {
    display: none;
}

/* On mobile, the collapse button is hidden (use hamburger instead) */
@media (max-width: 768px) {
    .nav-collapse-btn {
        display: none;
    }
}

/* On desktop, show collapse button, hide hamburger */
@media (min-width: 769px) {
    .hamburger {
        display: none !important;
    }
    .nav-collapse-btn {
        display: flex;
    }
}

/* Optional: Smooth transition when collapsing */
.nav-collapsible {
    transition: all 0.3s ease;
}

/* When collapsed, show a minimal bar with just the logo and expand button */
body.nav-collapsed .nav-header {
    margin-bottom: 0;
}

/* Floating expand button when nav is collapsed */
body.nav-collapsed .card-nav {
    position: relative;
}

body.nav-collapsed .nav-collapse-btn {
    position: fixed;
    top: 12px;
    right: 20px;
    z-index: 1001;
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

body.nav-collapsed .nav-collapse-btn:hover {
    transform: scale(1.05);
    background: var(--primary-dark);
}

/* Add or verify these CSS rules exist */
.hp-bar {
    background: #e2e8f0;
    height: 8px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}

.hp-fill {
    height: 100%;
    background: var(--success);
    width: 100%;
    transition: width 0.3s;
}

.hp-bar-container {
    margin: 8px 0;
}

.hp-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    margin-bottom: 2px;
}

/* Add or verify these CSS rules exist */
.hp-bar {
    background: #e2e8f0;
    height: 8px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
}

.hp-fill {
    height: 100%;
    background: var(--success);
    width: 100%;
    transition: width 0.3s;
}

.hp-bar-container {
    margin: 8px 0;
}

.hp-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    margin-bottom: 2px;
}


@keyframes galacticFadeIn{from{opacity:0;transform:scale(0.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes countdown{from{width:100%}to{width:0%}}
@keyframes starTwinkle{0%,100%{opacity:0.2;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@keyframes pulse{0%,100%{box-shadow:0 0 20px rgba(100,150,255,0.4),0 0 60px rgba(80,100,255,0.2)}50%{box-shadow:0 0 40px rgba(100,180,255,0.7),0 0 100px rgba(80,130,255,0.4)}}

.gal-overlay{position:fixed;inset:0;background:rgba(0,0,20,0.7);display:flex;align-items:center;justify-content:center;z-index:99999;backdrop-filter:blur(4px);}
.gal-modal{
  position:relative;
  background:linear-gradient(135deg,#060b1a 0%,#0a1628 40%,#0d1f3c 70%,#0a1020 100%);
  border:1px solid rgba(100,160,255,0.3);
  border-radius:20px;
  padding:36px 32px 28px;
  width:340px;max-width:90vw;
  text-align:center;
  animation:galacticFadeIn 0.6s cubic-bezier(.22,1,.36,1) both, pulse 4s ease-in-out infinite;
  overflow:hidden;
}
.gal-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:20px;}
.gal-star{position:absolute;border-radius:50%;background:#fff;animation:starTwinkle var(--d,3s) ease-in-out infinite var(--dl,0s);}
.gal-ring{position:absolute;border-radius:50%;border:1px solid rgba(100,160,255,0.1);pointer-events:none;animation:rotateSlow var(--spd,20s) linear infinite;}
.gal-close{position:absolute;top:14px;right:16px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,0.6);font-size:16px;transition:all .2s;}
.gal-close:hover{background:rgba(255,80,80,0.2);border-color:rgba(255,80,80,0.4);color:#ff8080;}
.gal-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;margin-bottom:16px;animation:floatUp 3s ease-in-out infinite;}
.gal-icon-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(100,180,255,0.5);animation:rotateSlow 6s linear infinite;}
.gal-icon-ring2{position:absolute;inset:-8px;border-radius:50%;border:1px dashed rgba(100,180,255,0.2);animation:rotateSlow 10s linear infinite reverse;}
.gal-icon-core{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(100,180,255,0.3),rgba(30,80,200,0.6));border:1px solid rgba(100,180,255,0.4);display:flex;align-items:center;justify-content:center;font-size:26px;}
.gal-title{font-size:1.15rem;font-weight:700;color:#fff;margin:0 0 10px;text-shadow:0 0 20px rgba(100,180,255,0.6);letter-spacing:0.3px;}
.gal-sub{font-size:0.82rem;color:rgba(180,210,255,0.75);line-height:1.6;margin:0 0 6px;}
.gal-sub strong{color:rgba(200,230,255,0.95);}
.gal-divider{height:1px;margin:16px 0;background:linear-gradient(90deg,transparent,rgba(100,160,255,0.3),transparent);}
.gal-btn{position:relative;overflow:hidden;width:100%;padding:12px 20px;background:linear-gradient(135deg,rgba(50,100,255,0.25),rgba(100,60,255,0.25));border:1px solid rgba(100,160,255,0.5);border-radius:30px;color:#c8e0ff;font-size:0.88rem;font-weight:700;cursor:pointer;letter-spacing:0.5px;transition:all .3s;margin-bottom:12px;}
.gal-btn:hover{background:linear-gradient(135deg,rgba(50,120,255,0.4),rgba(120,80,255,0.4));border-color:rgba(150,200,255,0.8);color:#fff;box-shadow:0 0 20px rgba(80,130,255,0.4);transform:translateY(-2px);}
.gal-btn-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.06) 50%,transparent 70%);transform:translateX(-100%);transition:transform .5s;}
.gal-btn:hover .gal-btn-shine{transform:translateX(100%);}
.gal-timer-bar-wrap{height:3px;border-radius:2px;background:rgba(255,255,255,0.08);overflow:hidden;margin-bottom:10px;}
.gal-timer-bar{height:100%;border-radius:2px;background:linear-gradient(90deg,rgba(80,130,255,0.8),rgba(150,100,255,0.8));animation:countdown var(--dur,10s) linear forwards;}
.gal-note{font-size:0.68rem;color:rgba(150,180,220,0.5);letter-spacing:0.3px;}

/* Catch Area Centering */
.catch-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.catch-buttons-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.catch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 40px;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

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

.catch-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

#catch-chance {
    text-align: center;
    margin-top: 4px;
}

/* ========== ANNOUNCEMENT BANNER ========== */
.announcement-banner {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: 10001;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    white-space: nowrap;
    max-width: 90vw;
    overflow-x: auto;
    pointer-events: none;
    font-family: 'Segoe UI', system-ui, sans-serif;
    letter-spacing: 0.5px;
}

.announcement-banner.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.announcement-banner i {
    margin-right: 10px;
    font-size: 1rem;
}

body.dark-theme .announcement-banner {
    background: linear-gradient(135deg, #5a4ad1, #8b7de8);
    box-shadow: 0 10px 30px rgba(90, 74, 209, 0.4);
}

@media (max-width: 768px) {
    .announcement-banner {
        font-size: 0.75rem;
        padding: 8px 16px;
        white-space: normal;
        text-align: center;
        max-width: 85vw;
        top: 60px;
    }
}

/* Add this to your existing CSS */
@keyframes scrollBanner {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes ledBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px #00ff88; }
    50% { opacity: 0.3; box-shadow: 0 0 2px #00ff88; }
}

.announcement-banner.show {
    opacity: 1 !important;
}

/* Style variants for different banner types */
.announcement-banner.banner-style-success #banner-message,
.announcement-banner.banner-style-success #banner-message-duplicate {
    color: #55efc4 !important;
    text-shadow: 0 0 5px rgba(85, 239, 196, 0.8), 0 0 10px rgba(85, 239, 196, 0.4), 0 0 20px rgba(85, 239, 196, 0.2) !important;
}

.announcement-banner.banner-style-warning #banner-message,
.announcement-banner.banner-style-warning #banner-message-duplicate {
    color: #fdcb6e !important;
    text-shadow: 0 0 5px rgba(253, 203, 110, 0.8), 0 0 10px rgba(253, 203, 110, 0.4), 0 0 20px rgba(253, 203, 110, 0.2) !important;
}

.announcement-banner.banner-style-danger #banner-message,
.announcement-banner.banner-style-danger #banner-message-duplicate {
    color: #ff7675 !important;
    text-shadow: 0 0 5px rgba(255, 118, 117, 0.8), 0 0 10px rgba(255, 118, 117, 0.4), 0 0 20px rgba(255, 118, 117, 0.2) !important;
}

/* ===== BATTLE SPRITE — SHINY (gold shimmer, distinct from terastal) ===== */
.btl-sprite-shiny {
    animation: btlShinyGlow 2.5s ease-in-out infinite;
}

@keyframes btlShinyGlow {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7))
                drop-shadow(0 0 12px rgba(255, 180, 0, 0.4))
                brightness(1.05);
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(255, 215, 0, 1))
                drop-shadow(0 0 32px rgba(255, 200, 0, 0.7))
                drop-shadow(0 0 6px rgba(255, 255, 200, 0.5))
                brightness(1.15);
    }
}

/* ===== BATTLE SPRITE — SHINY + TERASTAL (gold + type color alternating) ===== */
.btl-sprite-shiny-tera {
    /* terastal-sprite handles the filter animation already via --tera-filter vars */
    /* this class adds a rotating hue overlay via outline trick */
    outline: none;
    position: relative;
}

/* The terastalGlow keyframe is already on .terastal-sprite, 
   but for shiny-tera we override the CSS vars to include gold blending
   (done in JS above). This class is a marker for any additional CSS needed. */
.btl-sprite-shiny-tera::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, rgba(255,215,0,0.15) 0%, transparent 65%);
    pointer-events: none;
    animation: shinyTeraOverlay 3s ease-in-out infinite;
}

@keyframes shinyTeraOverlay {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}