* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; width: 100%; -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
#app *, #app *::before, #app *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
img[alt="TrainerWire"] { transition: none !important; }
.dex-toggle { transition: transform 0.3s ease !important; }
input, select, textarea { font-size: 16px !important; }
body { overflow-x: hidden; }
::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes slideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 2000px; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes countdownTick { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes heroGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 20px 2px rgba(255,255,255,0.05); } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes badgeBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes liveDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.4; } }
@keyframes sonarPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(3.5); opacity: 0; } }
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes flameWisp1 { 0%,100% { transform:rotate(-20deg) scaleY(1); opacity:0.7; } 33% { transform:rotate(-15deg) scaleY(1.1); opacity:0.9; } 66% { transform:rotate(-22deg) scaleY(0.95); opacity:0.6; } }
@keyframes flameWisp2 { 0%,100% { transform:rotate(15deg) scaleY(1); opacity:0.65; } 40% { transform:rotate(20deg) scaleY(1.12); opacity:0.85; } 70% { transform:rotate(12deg) scaleY(0.9); opacity:0.55; } }
@keyframes flameWisp3 { 0%,100% { transform:rotate(-5deg) scaleY(1); opacity:0.8; } 50% { transform:rotate(-2deg) scaleY(1.08); opacity:0.95; } }
@keyframes flameWisp4 { 0%,100% { transform:rotate(-35deg) scaleY(1) translateX(0); opacity:0.5; } 50% { transform:rotate(-30deg) scaleY(1.1) translateX(-3px); opacity:0.7; } }
@keyframes flameWisp5 { 0%,100% { transform:rotate(30deg) scaleY(1) translateX(0); opacity:0.5; } 50% { transform:rotate(35deg) scaleY(1.08) translateX(3px); opacity:0.7; } }

@keyframes sparkle { 0%,100% { opacity:0.4;transform:scale(0.8); } 50% { opacity:1;transform:scale(1); } }
@keyframes boostedShiny { 0% { opacity:0.6;transform:scale(0.7) rotate(0deg); } 25% { opacity:1;transform:scale(1.2) rotate(10deg); } 50% { opacity:0.8;transform:scale(0.9) rotate(-5deg); } 75% { opacity:1;transform:scale(1.15) rotate(8deg); } 100% { opacity:0.6;transform:scale(0.7) rotate(0deg); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes alertPulse { 0%,100% { opacity:1; } 50% { opacity:0.7; } }

@keyframes navDropIn { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
/* Current dropdown */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-btn { padding: 7px 14px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s ease; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 170px; border-radius: 12px; display: none; z-index: 200; padding-top: 8px; }
.nav-dropdown-menu-inner { border-radius: 12px; padding: 6px; display: flex; flex-direction: column; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { display: flex; flex-direction: column; animation: navDropIn 0.18s ease; }
.nav-dropdown-item { padding: 10px 14px; border-radius: 8px; border: none; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.15s ease; white-space: nowrap; display: flex; align-items: center; gap: 8px; }

button:active { transform: scale(0.97) !important; }
button { transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* Card flip */
.flip-card { cursor: pointer; position: relative; }
.flip-card-front { position: relative; border-radius: 12px; overflow: hidden; }
.flip-card-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.3s ease !important; }
.flip-card.flipped .flip-card-front { opacity: 0; pointer-events: none; transition: opacity 0.3s ease !important; }
.flip-card.flipped .flip-card-back { opacity: 1; pointer-events: auto; }

/* Accordion (max-height transition — JS sets explicit pixel values) */
/* !important needed because #app * sets transition shorthand at higher specificity */
.acc-trigger { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; font-family: inherit; width: 100%; text-align: left; background: transparent; }
.acc-trigger:active { transform: none !important; }
.acc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.acc-chevron { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; flex-shrink: 0; }
.acc-trigger[data-open="true"] .acc-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .acc-content, .acc-chevron { transition: none !important; }
}