@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 12px 24px rgba(27,56,120,.15);
  --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(180deg, #e9f0ff 0%, #c9dcff 50%, #3a6ff8 100%);
}



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

/* HEADINGS */
h1{font-size:2.4rem;letter-spacing:.4px;margin:0 0 8px}
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:var(--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;
}

/* 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(180deg,#ffc94d,#ff9d00);
  padding:.35rem .75rem;border-radius:14px;box-shadow:0 8px 18px rgba(255,157,0,.25);
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}

/* CARD */
.pokemon-card,.panel{
  background:var(--panel);
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:var(--shadow);
  border:4px solid #d2deff;               /* blue frame */
  outline:1px solid #eef3ff;               /* inner line for depth */
  transition:transform .1s ease, box-shadow .1s ease;
}
.pokemon-card:hover{transform:translateY(-2px)}
/* 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;
}

.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 .35s ease
}
#remaining-text{color:#000000;text-shadow:0 1px 0 rgba(0,0,0,.25)}

/* RESULT / CHAMPION */
.result-container{margin-top:10px}
.champion-card{background:transparent;box-shadow:none;border:none;padding:0;margin:0 auto 10px}
.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)}}

.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: 28px;
}
.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{margin-top:6px}

/* ====== 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:var(--panel-soft); border:4px solid #d2deff; outline:1px solid #eef3ff;
  border-radius:18px; box-shadow:var(--shadow); width:min(760px,92vw)
}
.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}

/* 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: 640px) {

  /* 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;
    padding: 12px 14px;
  }
  .button-row, .button-group, .menu-buttons, .category-buttons {
    gap: 10px;
    width: 100%;
  }

  /* 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, slightly less padding */
  .pokemon-card { 
    width: min(92vw, 440px); 
    padding: 14px 14px 12px; 
  }
  .matchup-img-wrap { 
  width: min(70vw, 260px); 
  }


  /* 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;
  }
}

/* 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(20px, 5.5vw, 24px); margin: 6px 0 8px; }
  .matchup-container, #matchup { gap: 10px; margin-top: 6px; }
  #vs-text { font-size: .95rem; padding: .22rem .5rem; }
  .pokemon-card { width: min(88vw, 380px); padding: 12px 12px 10px; border-width: 3px; border-radius: 14px; }
  .matchup-img-wrap { width: min(58vw, 220px); }
  .pokemon-card p { font-size: .95rem; margin-top: 8px; }
  .progress-wrap { width: 100%; height: 18px; margin: 12px auto 6px; }
  body { padding: 12px; }
}
/* Apply 3-D hover/press behavior to mini-btns and saved.html buttons */
.mini-btn,
#btnClearFilters,
#btnClearAll,
#saved-rows button {
  position: relative;
  transform: translateY(-0.2em);
  transition: transform 0.1s ease;
}

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

.mini-btn:active,
#btnClearFilters:active,
#btnClearAll:active,
#saved-rows button:active {
  transform: translateY(0);
}
.skel {
  background: rgba(0,0,0,0.06);
  border-radius: 12px;
  height: 280px;
  width: 280px;
  animation: pulse 1s infinite ease-in-out;
}
@keyframes pulse {
  0% { opacity: .6 } 50% { opacity: .3 } 100% { opacity: .6 }
}
.pkr-label{
  min-height: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}