@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* THEME */
:root{
  --font:'Poppins',sans-serif;

  /* Blue theme like the mock */
  --bg-1:#e9f0ff;
  --bg-2:#c9dcff;
  --panel:#ffffff;
  --panel-soft:#f3f6ff;

  --primary:#3a6ff8;
  --primary-600:#2f5fe0;
  --accent:#ffb200;     /* VS & highlights */
  --text:#0d1b2a;
  --text-soft:#5a6a8a;
  --shadow: 0 4px 6px rgba(27,56,120,.08), 
          0 12px 24px rgba(27,56,120,.12),
          0 20px 40px rgba(27,56,120,.06);
  --shadow-hover: 0 8px 12px rgba(27,56,120,.12), 
                  0 16px 32px rgba(27,56,120,.15),
                  0 24px 48px rgba(27,56,120,.08);
  --shadow-small: 0 2px 4px rgba(27,56,120,.06),
                  0 4px 8px rgba(27,56,120,.08);
  --btn-lift: 3px;
  --btn-lift-hover: 5px;
}

/* BASE */
*{box-sizing:border-box}
html,body{height:100%}
body {
  margin: 0;
  padding: 24px;
  font-family: var(--font);
  color: var(--text);
  text-align: center;
  background: linear-gradient(135deg, 
    #e9f0ff 0%, 
    #c9dcff 25%, 
    #3a6ff8 50%, 
    #5c86ff 75%, 
    #c9dcff 90%,
    #e9f0ff 100%);
  background-size: 400% 400%;
  animation: gradientWave 45s ease infinite;
  position: relative;
}

@keyframes gradientWave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Subtle floating orbs for depth */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  opacity: 0.03;
  pointer-events: none;
}

body::before {
  width: 80vw;
  height: 80vw;
  background: radial-gradient(circle, #ffffff 0%, transparent 70%);
  top: -40vw;
  left: -20vw;
  animation: floatOrb 40s ease-in-out infinite;
}

body::after {
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, #3a6ff8 0%, transparent 70%);
  bottom: -30vw;
  right: -15vw;
  animation: floatOrb 50s ease-in-out infinite reverse;
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -30px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* Pokemon Image Loading - Subtle fade-in only */
img.pokemon-loading {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}


.container{max-width:1100px;margin:0 auto}

/* HEADINGS */
h1{
  font-size:2.4rem;
  letter-spacing:.4px;
  margin:0 0 8px;
  color: var(--text);
  text-shadow: 0 2px 4px rgba(255,255,255,0.8),
               0 1px 2px rgba(255,255,255,0.4);
  position: relative;
}
h2{font-size:1.25rem;color:var(--text);margin:12px 0 6px}
h3{font-size:1.05rem;margin:10px 0 4px}
p{margin:.25rem 0}

/* MENU (index.html) */
.settings{
  display:flex;justify-content:center;gap:1.25rem;
  margin:16px 0 20px;color:#000000(--text-soft);font-weight:600
}
.settings input{margin-right:.4rem}

.category-buttons,.menu-buttons,.button-row,.button-group{
  display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap
}
.category-buttons{margin-top:18px}

/* =========================================================
   NEW 3‑D BUTTONS (no HTML changes required)
   Works for: button, .menu-button, .category-button, .gen-btn
   ========================================================= */
/* === Modern Button Styling (requires <span class="button_top">) === */
button,
.menu-button,
.category-button,
.gen-btn {
  --button_radius: 0.75em;
  --button_color: #e8e8e8;
  --button_outline_color: #000000;
  font-size: 17px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  border-radius: var(--button_radius);
  background: var(--button_outline_color);
  padding: 0; /* padding is handled on .button_top */
}

button .button_top,
.menu-button .button_top,
.category-button .button_top,
.gen-btn .button_top {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--button_outline_color);
  border-radius: var(--button_radius);
  padding: 0.75em 1.5em;
  background: var(--button_color);
  color: var(--button_outline_color);
  transform: translateY(calc(-1 * var(--btn-lift)));        /* exact lift */
  transition: transform 0.1s ease;
}

button:hover .button_top,
.menu-button:hover .button_top,
.category-button:hover .button_top,
.gen-btn:hover .button_top {
  transform: translateY(calc(-1 * var(--btn-lift-hover)));  /* exact hover lift */
}

button:active .button_top,
.menu-button:active .button_top,
.category-button:active .button_top,
.gen-btn:active .button_top {
  transform: translateY(0);
}

/* Compact variant for popup action buttons */
button.compact,
.menu-button.compact,
.category-button.compact,
.gen-btn.compact {
  --button_radius: 0.5em;
  font-size: 13px;
}

button.compact .button_top,
.menu-button.compact .button_top,
.category-button.compact .button_top,
.gen-btn.compact .button_top {
  padding: 0.45em 0.9em;
}

/* Dropdown item styling */
button.dropdown-item {
  width: 100%;
  margin: 4px 0;
  font-size: 14px;
}

button.dropdown-item .button_top {
  text-align: left;
  padding: 0.6em 1em;
}

/* Power-Ups button - ensure it matches other buttons in the row */
#btnPowerUps {
  min-width: max-content;
}

/* Mobile: ensure Power-Ups button matches other buttons */
@media (max-width: 768px) {
  #btnPowerUps {
    width: 100% !important;
    min-height: 44px !important;
  }

  #btnPowerUps .button_top {
    width: 100%;
    padding: 12px 14px;
    box-sizing: border-box;
  }

  /* Make the wrapper div full width too */
  .button-row > div[style*="position: relative"] {
    width: 100%;
    display: block !important;
  }
}

/* Power-Ups dropdown container */
#powerUpsDropdown {
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}

/* Override compact styling for dropdown items to match main buttons */
#powerUpsDropdown button.dropdown-item {
  width: 100%;
  margin: 4px 0;
  font-size: 16px;
  /* Remove compact class effects */
  min-height: auto;
}

#powerUpsDropdown button.dropdown-item .button_top {
  text-align: left;
  padding: 0.8em 1.2em;
  font-size: inherit;
}

/* Mobile improvements for power-ups dropdown */
@media (max-width: 768px) {
  #powerUpsDropdown {
    /* Center the dropdown and prevent overflow */
    left: 50% !important;
    transform: translateX(-50%);
    right: auto;
    min-width: 0 !important;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 6px !important;
  }

  /* Ensure dropdown buttons are easier to tap on mobile */
  #powerUpsDropdown button.dropdown-item {
    min-height: 44px;
    font-size: 15px;
  }

  #powerUpsDropdown button.dropdown-item .button_top {
    padding: 0.8em 1.2em;
  }
}

/* Selected buttons */
.menu-button.selected .button_top,
.gen-btn.selected .button_top {
  background:#fff;
  color:var(--primary);
  border-color:var(--primary);
}

/* Alt variant */
.button-row .alt {
  --button_color:#ffffff;
  --button_outline_color:var(--primary);
}
.button-row .alt .button_top {
  color: var(--primary);
  padding: 0.75em 1.5em;
  border-radius: var(--button_radius);
  vertical-align: middle;
  transform: translateY(calc(-1 * var(--btn-lift)));        /* same lift */
  transition: transform 0.1s ease;
}
.button-row .alt:hover .button_top {
  transform: translateY(calc(-1 * var(--btn-lift-hover)));  /* same hover lift */
}
.button-row .alt:active .button_top {
  transform: translateY(0);
}


/* ========================================================= */

/* MATCHUP LAYOUT */
.matchup-container,#matchup{
  display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;margin-top:22px
}
#vs-text{
  font-weight:900;
  font-size:1.6rem;
  color:#fff;
  background:linear-gradient(135deg,#ffc94d,#ff9d00);
  padding:.35rem .75rem;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(255,157,0,.25),
             inset 0 1px 0 rgba(255,255,255,.4);
  text-shadow:0 1px 0 rgba(0,0,0,.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  position: relative;
  overflow: hidden;
}
#vs-text::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, 
    transparent, 
    rgba(255,255,255,.1), 
    transparent);
  transform: rotate(45deg);
  animation: vsGlint 3s ease-in-out infinite;
}
@keyframes vsGlint {
  0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* CARD */
.pokemon-card,.panel{
  background:var(--panel);
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:var(--shadow);
  border:4px solid #d2deff;
  outline:1px solid #eef3ff;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInUp 0.5s ease-out;
}
.pokemon-card:hover{
  transform:translateY(-4px);
  box-shadow: var(--shadow-hover);
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Reserve a square box so images can't push layout around */
.matchup-img-wrap{
  width: min(65vw, 220px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  margin: 0 auto;
}
/* Make the image fit without distortion */
.matchup-img-wrap > img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* When the right card is "recycling" (right became left while new right loads) */
#right.recycling img {
  opacity: .45;
  /* REMOVED transform: scale(.96); to prevent layout shift */
  filter: saturate(.7);
  transition: opacity .15s ease, filter .15s ease;
}
#right.recycling .pkr-label {
  opacity: .6;
  transition: opacity .15s ease;
}

.pokemon-card p{font-weight:700;margin-top:10px}

/* PROGRESS BAR */
.progress-wrap{width:min(880px,92vw);height:22px;margin:18px auto 8px;
  background:#1c2e66;border-radius:14px;padding:3px;box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.progress{
  height:100%; width:0%;
  background:linear-gradient(90deg,#5c86ff,#3a6ff8);
  border-radius:12px; 
  transition:width .5s cubic-bezier(0.4, 0, 0.6, 1);
  position: relative;
  overflow: hidden;
}
.progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255,255,255,0.3), 
    transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
#remaining-text{
  color:#0d1b2a;
  text-shadow: 0 1px 3px rgba(255,255,255,0.9),
               0 2px 8px rgba(255,255,255,0.7);
  font-weight: 600;
}

/* RESULT / CHAMPION */
.result-container{margin-top:10px}
.champion-card{
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2),
              inset 0 2px 4px rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  padding: 8px;  /* <- Reduced from 20px to 8px */
  margin: 0 auto 10px;
  position: relative;
  width: fit-content;
  max-width: 400px;
  display: inline-block;
}
.champion-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255,255,255,0.1) 0%, 
    transparent 100%);
  border-radius: 24px;
  pointer-events: none;
}
.champion-image-wrapper{position:relative;display:inline-block}
.champion-img{width:320px;max-width:80vw;animation:pulse 2s infinite ease-in-out}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* === MICRO-ANIMATIONS === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.confetti{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:360px;max-width:90vw;pointer-events:none;opacity:0;z-index:2;
  animation:confettiIn .7s ease-out .15s forwards, confettiOut .7s ease-in 2.9s forwards;
}
@keyframes confettiIn{from{opacity:0}to{opacity:1}}
@keyframes confettiOut{from{opacity:1}to{opacity:0}}

.champion-text{color:var(--accent);font-weight:800;margin:6px 0 12px}
.runner-ups{gap:18px;margin-top:14px}
.rounds-text{font-size:.9rem;color:var(--text-soft);margin-top:6px}

/* BUTTONS FOOTER */
.button-row{margin-top:18px}

/* breathing room under result action buttons */
.result-container .button-group{
  margin-top: 18px;
  margin-bottom: 60px;  /* Increased from 28px for more buffer */
}
.button-row { align-items: flex-end; }

/* UTILS */
.panel-soft{background:var(--panel-soft)}
.hide{display:none!important}

/* RESPONSIVE — small tweaks */
@media (max-width:700px){
  .matchup-img-wrap{ width:180px }
  .champion-img{width:280px}
  #vs-text{font-size:1.3rem}
} /* <-- fixed: properly close this media query */

/* ====== MULTI-PAGE FLOW ====== */
.page{display:none}
.page.active{display:block}

/* Loading page */
#loading-page{
  /* no display here so .page/.active rules can control visibility */
  flex-direction:column;align-items:center;justify-content:center;
  min-height:70vh;gap:20px;
}

/* only flex when active */
#loading-page.active{
  display:flex;
}
.logo {
  display: block;       /* just a wrapper */
  margin: 0 auto 0px;  /* center horizontally, add space below */
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.logo img {
  display: block;
  max-width: 600px;   /* increase this to make it “slightly larger” */
  width: 100%;
  height: auto;
  margin: 0 auto;
}


.menu-buttons{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Primary action area - the main buttons */
.menu-primary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-primary button {
  width: 100%;
  font-size: 19px;
}

.menu-primary button .button_top {
  padding: 1em 1.75em;
}

/* Secondary actions - smaller buttons in a grid */
.menu-secondary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-top: 12px;
  border-top: 2px solid rgba(58, 111, 248, 0.1);
}

.menu-secondary button {
  width: 100%;
  font-size: 15px;
}

.menu-secondary button .button_top {
  padding: 0.8em 1.2em;
}

/* Mobile: stack secondary buttons vertically */
@media (max-width: 480px) {
  .menu-secondary {
    grid-template-columns: 1fr;
  }
}
/* Achievement notification bubble */
.notification-bubble {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff3b30;
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  animation: pulse-notification 2s infinite;
  z-index: 10;
  border: 2px solid white;
}

@keyframes pulse-notification {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ====== CONFIG PAGE ====== */
#config-page{max-width:880px;margin:0 auto}
#config-page h1{margin-top:6px}

.config-section,
#extra-options{
  text-align:left; margin:14px auto; padding:16px;
  background: linear-gradient(135deg, 
    rgba(243, 246, 255, 0.95) 0%,
    rgba(243, 246, 255, 0.85) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:3px solid rgba(210, 222, 255, 0.6);
  outline:1px solid rgba(255, 255, 255, 0.8);
  border-radius:18px; 
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
  width:min(760px,92vw);
  position: relative;
  overflow: hidden;
}
.config-section::before,
#extra-options::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    #3a6ff8, #5c86ff, #a8c5ff, #ffffff, #5c86ff, #3a6ff8);
  border-radius: 18px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
}
.config-section:hover::before,
#extra-options:hover::before {
  opacity: 0.12;  /* <- Also reduced opacity slightly for subtlety */
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.config-section:hover::before,
#extra-options:hover::before {
  opacity: 0.15;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.config-section label,
#extra-options label{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--text)
}
.settings{margin-top:12px}

/* Inputs */
select{
  appearance:none; outline:none; border:2px solid #d2deff; background:#fff;
  border-radius:12px; padding:10px 12px; font-family:var(--font); font-weight:600;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.04)
}
select:focus{border-color:var(--primary)}
input[type="checkbox"]{
  width:18px;height:18px;border-radius:4px;border:2px solid #cdd9ff;cursor:pointer
}

/* Type pickers layout */
#extra-options > div{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
#type2Wrap{display:inline-block}

/* Footer buttons */
#btnStartRanking{margin-top:10px}
#btnBackToMenu{margin-left:10px}

@media (max-width: 768px) {
  /* Force proper button alignment on config page */
  .button-row #btnStartRanking,
  .button-row #btnBackToMenu {
    margin: 10px auto 0 auto !important; /* Center with auto margins */
    width: 100%;
    display: block;
  }
  
  .button-row {
    flex-direction: column;
    align-items: center; /* Center the flex items */
    width: 100%;
  }
}

/* Mobile tweaks for config page */
@media (max-width:700px){
  .logo{font-size:1.6rem}
  .config-section,#extra-options{padding:14px}
}

/* --- Compact placements row --- */
.compact-grid{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin:18px auto 6px;
  max-width:980px;
}

/* Smaller, side-by-side cards for placements */
.compact-card{
  padding:12px 12px 10px;
  border-width:3px;
  width:220px;
}
.compact-card img{
  width:140px;
  height:auto;          /* ← prevents “tall” stretch from height=256 */
  max-width:100%;
}

.compact-grid .rounds-text{font-size:.85rem;margin-top:4px}
.placement-tag{font-size:.85rem;color:var(--accent);font-weight:700;margin-top:4px}

/* Mobile: stack neatly */
@media (max-width:700px){
  .compact-card{ width:46%; }
  .compact-card img{ width:120px; height:auto; }  /* ← keep aspect on mobile */
}

/* ===== Saved Rankings horizontal bars ===== */
.saved-row{ padding:12px 14px; text-align:left; }
.saved-row-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;
}

.saved-row-slots{
  display:flex; align-items:stretch; justify-content:space-between;
  gap:10px;
}
.saved-slot{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;           /* center sprite + text vertically */
  gap:10px;
  border:2px solid #dfe7ff;
  border-radius:12px;
  padding:8px 10px 8px;         /* tighter padding */
  padding-top:26px;             /* room for the label badge */
  background:var(--panel-soft);
  height:130px;                 /* fixed compact height */
}
.saved-slot.empty{ opacity:.6 }

/* Make the label a small badge so it doesn't add height */
.saved-label{
  position:absolute;
  top:6px; left:10px;
  font-size:.8rem;
  font-weight:700;
  color:var(--accent);
  line-height:1;
  pointer-events:none;
}

/* Manage Saves modal: make each slot a column and pin actions to bottom */
#manageSavesModal .slot-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height: 240px;      /* tweak to taste */
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:12px;
}

/* main content area inside the card */
#manageSavesModal .slot-body{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:120px;       /* space for VS/art or "Empty Slot" */
  text-align:center;
  color:#9ca3af;
}

/* actions pinned to bottom & centered */
#manageSavesModal .slot-actions{
  margin-top:auto;        /* pushes actions to bottom */
  display:flex;
  justify-content:center; /* center horizontally */
  gap:8px;
}


/* Core content sits on one line: sprite + text */
.saved-core{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

/* Ultra-tight horizontal bar slots */
.saved-slot{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  border:2px solid #dfe7ff;
  border-radius:12px;
  background:var(--panel-soft);
  height:110px;           /* shorter overall height */
  padding:4px 8px 4px 8px; /* minimal padding */
}
.saved-slot.empty{ opacity:.6 }

/* Label as small badge above sprite/text */
.saved-label{
  position:absolute;
  top:4px; left:8px;
  font-size:.75rem;
  font-weight:700;
  color:var(--accent);
  line-height:1;
}

/* Keep content centered vertically */
.saved-core{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin-top:12px; /* small offset so label doesn't overlap */
}

/* Big sprite without forcing height to grow */
.saved-sprite{
  width:100px;
  height:100px;
  image-rendering: pixelated;
  flex-shrink:0;
}

/* Text is snug next to sprite */
.saved-text{
  line-height:1.1;
  flex:1;
}
.saved-name{ font-weight:700; font-size:.9rem; }
.saved-meta{ font-size:.75rem; color:var(--text-soft); }

/* Mobile stacking still works */
@media (max-width: 720px){
  .saved-row-slots{ flex-direction:column; }
}

/* === MOBILE IMPROVEMENTS (phones only; desktop untouched) === */
@media (max-width: 768px) {

  /* Global safety: no sideways scroll + fluid media */
  html, body { overflow-x: hidden; }
  img, canvas, svg, video { max-width: 100%; height: auto; display: block; }

  /* Body/container breathing room */
  body { padding: 14px; }
  .container { padding: 0 6px; }

  /* Title scale + tighter spacing */
  h1 { 
    font-size: clamp(22px, 6.3vw, 28px); 
    line-height: 1.15; 
    margin: 8px 0 10px;
    word-break: break-word;
  }
  h2 { font-size: clamp(18px, 5vw, 22px); }
  h3 { font-size: clamp(16px, 4.5vw, 19px); }
  body, p, li, button, input, select { font-size: clamp(14px, 4vw, 16px); }

  /* Buttons go full width with comfy tap targets */
  .category-button, .menu-button, button {
    width: 100%;
    min-height: 44px;
  }
  
  /* Apply mobile sizing to the .button_top spans */
  .category-button .button_top, 
  .menu-button .button_top, 
  button .button_top {
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box;
  }

  .button-row {
    margin-top: 0px !important;
    margin-bottom: 4px !important;
    gap: 4px !important;
  }

  /* Stack the matchup cards; center VS between them */
  .matchup-container, #matchup {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
  }
  #vs-text {
    display: inline-block;
    align-self: center;
    margin: 2px auto;
    font-size: 1rem;
    padding: .28rem .6rem;
  }

  /* Cards scale to viewport - UNIFIED FOR BOTH STARTERS AND RANKER */
  .pokemon-card { 
    width: min(82vw, 280px) !important;
    min-height: 180px !important;
    padding: 6px 8px 4px !important;
    border-width: 3px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Unified image sizing within cards */
  .pokemon-card img,
  .matchup-img-wrap img {
    width: min(40vw, 180px) !important;
    height: min(40vw, 180px) !important;
    object-fit: contain;
  }
  
  /* The wrapper itself should match image size */
  .matchup-img-wrap { 
    width: min(40vw, 180px) !important;
    height: min(40vw, 180px) !important;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
  }

  /* Progress bar fills width */
  .progress-wrap { width: 100%; margin-left: 0; margin-right: 0; }

  /* Champion/confetti sizing */
  .champion-img { width: min(75vw, 300px); }
  .confetti { width: min(85vw, 360px); }

  /* Config sections */
  .config-section, #extra-options {
    width: 100%;
    padding: 12px;
  }
  .settings { flex-wrap: wrap; gap: 10px; }

  /* Compact placements: single column on narrow phones */
  .compact-card { width: 100%; }
  .compact-card img { width: 120px; margin: 0 auto; }

  /* Saved rankings: vertical stack, auto height */
  .saved-row { padding: 10px 12px; }
  .saved-row-slots { flex-direction: column; gap: 10px; }
  .saved-slot { height: auto; padding: 10px; }
  .saved-label { top: 6px; left: 10px; font-size: .8rem; }
  .saved-core { margin-top: 18px; gap: 10px; }
  .saved-sprite { width: 84px; height: 84px; }
  .saved-name { font-size: .95rem; }
  .saved-meta { font-size: .8rem; }

  /* Breathing room under result buttons */
  .result-container .button-group {
    margin-top: 14px;
    margin-bottom: 22px;
  }

  /* Prevent long names from blowing layout */
  .saved-name, .saved-meta, .pokemon-card p, .placement-tag, .rounds-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: clamp(16px, 4.2vw, 20px);
    margin: 2px 0 8px;
  }
  
  .pokemon-card {
    width: min(82vw, 280px);  /* Match starters exactly */
    padding: 2px 8px 2px;
    border-width: 2px;
    border-radius: 12px;
    min-height: 180px;        /* Match starters exactly */
  }
  
  .matchup-img-wrap {
    width: min(55vw, 200px);  /* Smaller images */
  }
  
  .matchup-container, #matchup {
    gap: 6px;
    margin-top: 2px;
  }
  
  #vs-text {
    font-size: .75rem;
    padding: .15rem .4rem;
    margin: 2px 0;
    border-radius: 10px;
  }
  
  .progress-wrap {
    height: 14px;
    margin: 4px auto 2px;
  }
  
  #remaining-text {
    font-size: .8rem;
    margin: 2px 0 2px;
  }
  
  .pokemon-card p {
    font-size: .85rem;
    margin-top: 6px;
    margin-bottom: 0;
  }
  
  body {
    padding: 8px 6px;
  }
  
  .container {
    padding: 0 2px;
  }
  
  .button-row {
    margin-top: 0px !important;
    margin-bottom: 4px !important;
    gap: 4px !important;
  }
}

/* Slightly wider phones / small tablets */
@media (max-width: 768px) {
  .progress-wrap { width: 100%; }
  .config-section, #extra-options { width: min(700px, 100%); }
}

/* === MOBILE TUNE: smaller cards/title, tighter spacing === */
@media (max-width: 640px) {
  /* Title tighter + smaller */
  h1 {
    font-size: clamp(20px, 5.5vw, 24px);
    line-height: 1.15;
    margin: 6px 0 8px;
  }

  /* Stack matchups (we already do), reduce gaps */
  .matchup-container, #matchup {
    gap: 10px;
    margin-top: 6px;
  }

  /* VS pill smaller */
  #vs-text {
    font-size: .95rem;
    padding: .22rem .5rem;
    margin: 0 auto;
  }

  /* Cards narrower with less padding */
  .pokemon-card {
    width: min(88vw, 380px);
    padding: 12px 12px 10px;
    border-width: 3px;         /* slimmer border helps perceived size */
    border-radius: 14px;
  }

  /* Images clearly smaller */
  .pokemon-card img {
    width: min(58vw, 220px);
    max-width: 100%;
    height: auto;
  }

  /* Name size down a notch */
  .pokemon-card p {
    font-size: 0.95rem;
    margin-top: 8px;
  }

  /* Progress bar: shorter & full width */
  .progress-wrap {
    width: 100%;
    height: 18px;
    margin: 12px auto 6px;
  }

  /* Reduce general body padding a touch */
  body { padding: 12px; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(15px, 4vw, 18px); margin: 1px 0 6px; }
  .matchup-container, #matchup { gap: 4px; margin-top: 2px; }
  #vs-text { font-size: .7rem; padding: .12rem .35rem; margin: 1px 0; }
  .pokemon-card { width: min(82vw, 280px); padding: 6px 8px 4px; border-width: 2px; border-radius: 12px; }
  .matchup-img-wrap { width: min(40vw, 140px); }
  .pokemon-card p { font-size: .8rem; margin-top: 4px; margin-bottom: 0; }
  .progress-wrap { width: 100%; height: 12px; margin: 6px auto 3px; border-radius: 10px; }
  .progress { border-radius: 8px; }
  #remaining-text { font-size: .75rem; margin: 3px 0 4px; line-height: 1.1; }
  body { padding: 8px 6px; }
  .container { padding: 0 2px; }
}
/* Apply 3-D hover/press behavior to mini-btns and saved.html buttons */
.mini-btn,
#btnClearFilters,
#btnClearAll,
#saved-rows button {
  position: relative;
  transition: transform 0.1s ease;
}

.mini-btn:hover,
#btnClearFilters:hover,
#btnClearAll:hover,
#saved-rows button:hover {
  transform: translateY(-0.2em);
}

.filters select,
.filters .mini-btn {
  height: 40px;
  box-sizing: border-box;
}

.mini-btn:active,
#btnClearFilters:active,
#btnClearAll:active,
#saved-rows button:active {
  transform: translateY(0);
}
.skel {
  background: linear-gradient(
    90deg,
    rgba(58, 111, 248, 0.05) 0%,
    rgba(92, 134, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(92, 134, 255, 0.1) 80%,
    rgba(58, 111, 248, 0.05) 100%
  );
  background-size: 200% 100%;
  border-radius: 18px;
  height: 280px;
  width: 280px;
  position: relative;
  overflow: hidden;
  border: 4px solid rgba(210, 222, 255, 0.3);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
  animation: shimmerSkeleton 2s infinite ease-in-out;
}

@keyframes shimmerSkeleton {
  0% { 
    background-position: -200% 0;
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% { 
    background-position: 200% 0;
    opacity: 0.7;
  }
}

/* Premium loading dots for any loading text */
.loading-dots::after {
  content: '';
  animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}

/* Add a pulse ring effect to skeleton cards */
.skel::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(58, 111, 248, 0.3);
  border-radius: 18px;
  transform: translate(-50%, -50%);
  animation: pulseRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseRing {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
  }
}

/* Enhance the loading page with a subtle bounce */
#loading-page > .logo {
  animation: gentleBounce 2s ease-in-out infinite;
}

@keyframes gentleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes pulse {
  0% { opacity: .6 } 50% { opacity: .3 } 100% { opacity: .6 }
}
.pkr-label{
  min-height: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
/* Landscape phones - ultra compact */
@media (max-width: 896px) and (max-height: 414px) {
  h1 { font-size: 14px; margin: 1px 0 4px; }
  .matchup-container, #matchup { gap: 4px; margin-top: 1px; }
  .pokemon-card { padding: 4px 6px 3px; }
  .matchup-img-wrap { width: min(35vw, 120px); }
  #vs-text { font-size: .65rem; padding: .1rem .3rem; margin: 0; }
  .progress-wrap { height: 10px; margin: 4px auto 2px; }
  #remaining-text { font-size: .7rem; margin: 2px 0 3px; }
}

/* Fix save modal buttons on mobile */
@media (max-width: 768px) {
  #saveSlotModal .slot-card,
  #manageSavesModal .slot-card {
    padding: 8px !important;
  }
  
  #saveSlotModal .slot-body,
  #manageSavesModal .slot-body {
    flex-direction: column !important;
    gap: 8px !important;
    min-height: auto !important;
  }
  
  /* Stack buttons vertically on small screens */
  #saveSlotModal .slot-actions,
  #manageSavesModal .slot-actions {
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
  }
  
  #saveSlotModal .slot-actions button,
  #manageSavesModal .slot-actions button {
    width: 100% !important;
    min-height: 36px !important;
  }
}

/* Make manage saves modal mobile friendly */
@media (max-width: 768px) {
  #manageSavesModal > div {
    width: 95% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }
  
  #manageSlotsGrid {
    grid-template-columns: 1fr !important; /* Single column on mobile */
    gap: 8px !important;
  }
  
  #manageSavesModal h3 {
    font-size: 1.1rem !important;
    margin: 0 0 8px 0 !important;
  }
  
  #manageSavesModal p {
    font-size: 0.9rem !important;
    margin: 0 0 12px 0 !important;
  }
  
  /* Bottom buttons area */
  #manageSavesModal > div > div:last-child {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  
  #manageSavesModal > div > div:last-child > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  
  #manageSavesModal button {
    width: 100% !important;
    min-height: 44px !important;
  }
}

/*undo from here if needed*/

/* Prevent layout shift during form loading */
.matchup-container {
  min-height: 400px; /* Lock the container height */
  align-items: flex-start; /* Prevent vertical centering shifts */
}

.pokemon-card {
  min-height: 320px; /* Already exists, but ensure it's set */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Lock the button row position */
#ingame-controls {
  position: relative;
  z-index: 10;
  margin-top: 20px !important; /* Consistent spacing */
}

/* Ensure progress container doesn't shift */
#progress-container {
  min-height: 60px; /* Reserve space even when updating */
}

/* For mobile, adjust the heights */
@media (max-width: 768px) {
  .matchup-container {
    min-height: auto; /* Let it stack naturally on mobile */
  }
  
  #progress-container {
    min-height: 50px;
  }
}

/* Prevent layout shifts during card transitions */
.pokemon-card {
  /* Lock the dimensions to prevent shifting */
  flex-shrink: 0;
  transition: none !important; /* Disable the transition that might cause shifts */
}

/* Ensure matchup container doesn't resize */
.matchup-container, #matchup {
  align-items: center !important; /* Keep cards centered */
  min-width: 100%; /* Prevent horizontal shifting */
}

/* Lock card positions during recycling */
#left, #right {
  position: relative;
  flex-shrink: 0;
}

/* Mobile: extra stability */
@media (max-width: 768px) {
  .pokemon-card {
    transform: none !important; /* Prevent any transform-based shifts */
  }
  
  /* Ensure VS text doesn't cause shifts */
  #vs-text {
    flex-shrink: 0;
    align-self: center !important;
  }
}

/* Save Progress Modal - Compact Version with fixes */
#saveSlotModal .slot-card {
  background: var(--panel-soft);
  border: 2px solid #d2deff;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#saveSlotModal .slot-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%; /* Ensure full width */
}

#saveSlotModal .slot-info {
  flex: 1;
  text-align: left;
  min-width: 0; /* Critical for text truncation */
  overflow: hidden; /* Prevent overflow */
}

#saveSlotModal .slot-label {
  font-weight: 700;
  color: var(--text);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* Ensure it respects container */
}

#saveSlotModal .slot-meta {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#saveSlotModal .slot-remaining {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VS display with larger sprites */
#saveSlotModal .slot-vs-display {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#saveSlotModal .slot-vs-display img {
  width: 72px !important;
  height: 72px !important;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  object-fit: contain;
}

#saveSlotModal .slot-vs-display .vs-text {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
  padding: 0 4px;
}

/* Actions - keep inline on desktop */
#saveSlotModal .slot-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Mobile - better layout */
@media (max-width: 768px) {
  #saveSlotModal .slot-body {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  #saveSlotModal .slot-info {
    width: 100%;
    text-align: center;
  }
  
  #saveSlotModal .slot-vs-display {
    justify-content: center;
    width: 100%;
  }
  
  #saveSlotModal .slot-vs-display img {
    width: 64px !important;
    height: 64px !important;
  }
  
  /* Keep buttons side by side and centered */
  #saveSlotModal .slot-actions {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    gap: 12px;
    margin-top: 8px;
  }
  
  /* Match the style of other buttons */
  #saveSlotModal .slot-actions button {
    flex: 0 1 auto;
    min-width: 100px;
  }
}

/* Modal container fixes */
#saveSlotModal {
  /* Ensure modal takes full viewport on mobile */
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  overflow: auto !important; /* Allow modal background to scroll */
}

/* Modal content box */
#saveSlotModal > div {
  padding: 16px !important;
  max-width: 720px !important;
  width: min(720px, 94%) !important;
  max-height: 90vh !important; /* Prevent exceeding viewport */
  overflow-y: auto !important; /* Make content scrollable */
  margin: auto !important; /* Center in viewport */
  position: relative !important;
}

/* Ensure slots container is scrollable */
#saveSlotsGrid {
  max-height: calc(90vh - 150px); /* Account for header/buttons */
  overflow-y: auto;
  gap: 8px !important;
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
  #saveSlotModal > div {
    max-height: 85vh !important; /* Slightly less on mobile */
    margin: 20px auto !important; /* Add some margin */
  }
  
  #saveSlotsGrid {
    max-height: calc(85vh - 180px); /* Less space on mobile */
  }
}

/* Save-A-Mon Modal Choice Cards */
.save-a-mon-choice:hover .pokemon-card {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary);
}

.save-a-mon-choice .pokemon-card {
  transition: all 0.2s ease;
  margin: 0;
}