/* ==========================================================
   Pokémon Team Builder — GBA Theme (FULL CSS)
   ✅ Same classes + structure as your provided CSS
   ✅ Same responsiveness (including your mobile no-scroll table-fit)
   ========================================================== */

:root{
  /* ===== GBA THEME COLORS ===== */
  --bg:#e6f3c8;        /* “screen” tint */
  --surface:#f3f8de;   /* panel surface */
  --surface2:#dcedb6;  /* secondary */

  --text:#162816;
  --muted:#3e5a3f;
  --border:#2f4a2f;

  --primary:#3d6bff;   /* gba blue */
  --accent:#2fbf6f;    /* gba green */
  --warn:#ffb020;
  --bad:#ff3d6b;

  --radius:8px;

  /* “pixel depth” shadows */
  --shadow: 0 6px 0 rgba(19,33,19,.35), 0 14px 24px rgba(19,33,19,.22);
  --shadow2: 0 4px 0 rgba(19,33,19,.28), 0 10px 16px rgba(19,33,19,.18);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --slot-minh: 92px;
  --slot-spr: 42px;

  --dex-row-h: 74px;
  --dex-cols: 8;
  --dex-rows: 6;
  --dex-gap: 6px;
  --dex-spr: 30px;
  --dex-spr-box: 38px;

  --ed-pad: 8px;
  --ed-gap: 8px;
  --ed-font: 11.25px;
  --ed-label: 10.25px;
  --ed-input: 10.75px;
  --ed-sprbox: 56px;
  --ed-spr: 48px;

  --px: 2px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    /* subtle pixel grid */
    linear-gradient(0deg, rgba(22,40,22,.08) 1px, transparent 1px) 0 0/100% 4px,
    linear-gradient(90deg, rgba(22,40,22,.06) 1px, transparent 1px) 0 0/4px 100%,
    /* bezel corner tints */
    radial-gradient(900px 520px at 12% -10%, rgba(128, 86, 255, .18), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(255, 197, 92, .18), transparent 55%),
    /* screen gradient */
    linear-gradient(180deg, #f0f7d6 0%, #e6f3c8 55%, #dcedb6 100%);
}

.container{width:100%;max-width:none;margin:0 auto;padding:10px 12px}

/* Force consistent border width (keeps your layout) */
.panel,
.btn,
.pill,
.slot,
.cardIn,
.moveBox,
.dexViewport,
.mon,
.tableWrap,
.statCard,
.statWrap,
.ivEvWrap,
input[type="text"], input[type="number"], select,
.sprBox, .mspr, .bigSpr{
  border-width: var(--px) !important;
}

/* ===== TOP AREA (HEADER + MENU BAR SEPARATE) ===== */
.topbar{
  position:sticky;top:0;z-index:30;
  background: rgba(243,248,222,.92);
  backdrop-filter: blur(8px);
  border-bottom:var(--px) solid rgba(47,74,47,.98);
  box-shadow: 0 4px 0 rgba(19,33,19,.28);
}
.headerbar{
  border-bottom:var(--px) solid rgba(47,74,47,.98);
  background: linear-gradient(180deg, rgba(243,248,222,.98), rgba(224,237,191,.92));
}
.menubar{
  background: linear-gradient(180deg, rgba(224,237,191,.95), rgba(210,228,170,.92));
}
.toprow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;gap:10px;align-items:center;min-width:240px}

.logo{
  width:32px;height:32px;
  border-radius:6px;
  border:var(--px) solid rgba(47,74,47,.98);
  background: linear-gradient(180deg, #fff7c7 0%, #ffd57d 100%);
  box-shadow: 0 3px 0 rgba(19,33,19,.30), 0 10px 14px rgba(19,33,19,.18);
  display:grid;place-items:center;
  font-weight:1000;color:#2b2b2b;
  font-size:12px;
  letter-spacing:.2px;
  text-transform:uppercase;
}
.brand b{font-size:12px;display:block}
.brand span{font-size:10.5px;color:var(--muted);display:block;margin-top:1px}

.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

.btn{
  border:var(--px) solid rgba(47,74,47,.98);
  background: linear-gradient(180deg, #fdfbe8 0%, #e6f3c8 100%);
  color:var(--text);
  padding:7px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:1000;
  font-size:11.5px;
  user-select:none;
  box-shadow: 0 3px 0 rgba(19,33,19,.34), 0 10px 16px rgba(19,33,19,.18);
  transition: transform .05s ease, filter .12s ease, border-color .12s ease;
}
.btn:hover{filter:brightness(1.03)}
.btn:active{
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(19,33,19,.34), 0 8px 14px rgba(19,33,19,.18);
}
.btn.primary{
  border-color:rgba(61,107,255,.75);
  background: linear-gradient(180deg, rgba(61,107,255,.24), rgba(61,107,255,.10));
  color:#14319b;
}
.btn.accent{
  border-color:rgba(47,191,111,.75);
  background: linear-gradient(180deg, rgba(47,191,111,.22), rgba(47,191,111,.10));
  color:#0f5a34;
}
.btn.warn{
  border-color:rgba(255,176,32,.80);
  background: linear-gradient(180deg, rgba(255,176,32,.26), rgba(255,176,32,.10));
  color:#6e4300;
}
.btn.bad{
  border-color:rgba(255,61,107,.75);
  background: linear-gradient(180deg, rgba(255,61,107,.24), rgba(255,61,107,.10));
  color:#7c0f2b;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.mini{
  padding:6px 9px;
  border-radius:999px;
  font-size:10.75px;
  box-shadow: 0 2px 0 rgba(19,33,19,.28), 0 8px 12px rgba(19,33,19,.16);
}

.pill{
  border:var(--px) solid rgba(47,74,47,.92);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  padding:5px 9px;
  border-radius:999px;
  color:var(--muted);
  font-size:11px;
  font-weight:1000;
  white-space:nowrap;
  box-shadow: 0 2px 0 rgba(19,33,19,.22);
}
.kbd{
  font-family:var(--mono);
  font-size:10px;
  padding:2px 6px;
  border-radius:9px;
  border:var(--px) solid rgba(47,74,47,.85);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  color:var(--muted);
  box-shadow: 0 2px 0 rgba(19,33,19,.18);
}

/* Help icon + panel (for every table) */
.helpBtn{
  width:22px;height:22px;
  border-radius:999px;
  border:var(--px) solid rgba(47,74,47,.92);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  box-shadow: 0 2px 0 rgba(19,33,19,.22);
  cursor:pointer;
  font-weight:1000;
  font-size:12px;
  color:var(--muted);
  display:grid;place-items:center;
  padding:0;
  flex:0 0 auto;
}
.helpBtn:hover{filter:brightness(1.03);color:var(--text)}
.helpBtn:active{transform: translateY(1px)}
.helpOverlay{
  position:fixed;inset:0;
  background: rgba(18,30,18,.55);
  backdrop-filter: blur(6px);
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.helpOverlay.show{display:flex}
.helpPanel{
  width: min(720px, 100%);
  max-height: min(80vh, 620px);
  overflow:auto;
  border:var(--px) solid rgba(47,74,47,.98);
  border-radius: 12px;
  background: linear-gradient(180deg, #f7fbe6 0%, #eef6d0 100%);
  box-shadow: var(--shadow);
  position:relative;
}
.helpPanelHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 10px 9px;
  border-bottom:var(--px) solid rgba(47,74,47,.98);
  background: linear-gradient(180deg, #fff7c7, #ffd57d);
}
.helpPanelHead b{font-size:12px}
.helpClose{
  border:var(--px) solid rgba(47,74,47,.92);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  border-radius:10px;
  padding:7px 10px;
  cursor:pointer;
  font-weight:1000;
  font-size:11px;
  box-shadow: 0 2px 0 rgba(19,33,19,.22);
}
.helpBody{padding:10px;font-size:12px;color:var(--text);line-height:1.5}
.helpBody .noteBox{
  border:var(--px) dashed rgba(47,74,47,.40);
  background: linear-gradient(180deg, #fdfbe8, #eef6d0);
  padding:10px;border-radius:12px;
  box-shadow: 0 2px 0 rgba(19,33,19,.16);
}

.row2{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:12px;
  align-items:start;
  margin-top:12px;
}
@media (max-width: 980px){ .row2{grid-template-columns:1fr} }

.panel{
  border:var(--px) solid rgba(47,74,47,.98);
  border-radius: var(--radius);
  background:
    linear-gradient(0deg, rgba(22,40,22,.05) 1px, transparent 1px) 0 0/100% 5px,
    linear-gradient(180deg, #f7fbe6 0%, #eef6d0 100%);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.panel::before{
  content:"";
  position:absolute;inset:0;
  border-radius: calc(var(--radius) - 2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(19,33,19,.12);
  pointer-events:none;
}
.phead{
  display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
  padding:8px 9px 7px;
  border-bottom:var(--px) solid rgba(47,74,47,.98);
  background: linear-gradient(180deg, #fff7c7, #ffd57d);
  flex-wrap:wrap;
  position:relative;
}
.phead::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background: linear-gradient(90deg,
    rgba(128, 86, 255, .55),
    rgba(61,107,255,.45),
    rgba(47,191,111,.45),
    rgba(255,176,32,.45)
  );
  opacity:.35;
}
.phead b{font-size:12px}
.phead span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.pbody{padding:9px}

.switchRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.switch{
  display:inline-flex;align-items:center;gap:8px;
  border:var(--px) solid rgba(47,74,47,.92);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  border-radius:999px;
  padding:6px 10px;
  box-shadow: 0 2px 0 rgba(19,33,19,.22);
  font-size:11px;
  font-weight:1000;
  color:var(--muted);
  user-select:none;
}
.switch input{display:none}
.switch .track{
  width:34px;height:18px;border-radius:999px;
  border:var(--px) solid rgba(47,74,47,.85);
  background: linear-gradient(180deg, #f7fbe6, #dcedb6);
  position:relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  flex:0 0 auto;
}
.switch .dot{
  position:absolute;top:50%;left:2px;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;
  background: linear-gradient(180deg, #ffffff, #e9f0ff);
  border:var(--px) solid rgba(61,107,255,.55);
  box-shadow: 0 2px 0 rgba(19,33,19,.30);
  transition: left .12s ease, background .12s ease, border-color .12s ease;
}
.switch input:checked + .track{
  border-color: rgba(47,191,111,.75);
  background: linear-gradient(180deg, rgba(47,191,111,.28), rgba(47,191,111,.10));
}
.switch input:checked + .track .dot{
  left:18px;
  border-color: rgba(47,191,111,.75);
  background: linear-gradient(180deg, #ffffff, rgba(47,191,111,.18));
}
.switch .lbl{white-space:nowrap}
.switch .hint{font-size:10px;font-weight:1000;color:var(--muted);opacity:.9}

.teamRow{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:8px;
}
@media (max-width: 980px){ .teamRow{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 520px){ .teamRow{grid-template-columns: repeat(2, 1fr)} }

.slot{
  border:var(--px) solid rgba(47,74,47,.95);
  border-radius:10px;
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  padding:8px;
  cursor:pointer;
  position:relative;
  min-height: var(--slot-minh);
  box-shadow: 0 3px 0 rgba(19,33,19,.30), 0 10px 14px rgba(19,33,19,.18);
  transition: transform .05s ease, border-color .12s ease, filter .12s ease;
}
.slot:hover{filter:brightness(1.02)}
.slot:active{transform: translateY(2px)}
.slot.active{
  border-color: rgba(47,191,111,.95);
  box-shadow:
    0 0 0 3px rgba(47,191,111,.18) inset,
    0 3px 0 rgba(19,33,19,.30),
    0 10px 14px rgba(19,33,19,.18);
}
.slot.enemyActive{
  border-color: rgba(255,176,32,.95);
  box-shadow:
    0 0 0 3px rgba(255,176,32,.18) inset,
    0 3px 0 rgba(19,33,19,.30),
    0 10px 14px rgba(19,33,19,.18);
}

.sprBox{
  width:100%;
  display:grid;place-items:center;
  border-radius:10px;
  border:var(--px) solid rgba(47,74,47,.95);
  background: linear-gradient(180deg, #f7fbe6, #dcedb6);
  height:50px;
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.sprBox img{width:var(--slot-spr);height:var(--slot-spr);object-fit:contain;image-rendering:pixelated}

.slot b{
  display:block;margin-top:6px;font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.slot .sub{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

.tag{
  font-size:10px;
  font-weight:1000;
  padding:2px 6px;
  border-radius:999px;
  border:var(--px) solid rgba(47,74,47,.85);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  color:var(--muted);
  box-shadow: 0 2px 0 rgba(19,33,19,.18);
}
.tag.on{border-color:rgba(47,191,111,.75);background:rgba(47,191,111,.14);color:#0f5a34}
.tag.warn{border-color:rgba(255,176,32,.80);background:rgba(255,176,32,.16);color:#6e4300}
.tag.leg{border-color:rgba(61,107,255,.75);background:rgba(61,107,255,.14);color:#14319b}

.xbtn{
  position:absolute;top:7px;right:7px;
  border:var(--px) solid rgba(47,74,47,.92);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  color:var(--text);
  border-radius:10px;
  padding:4px 6px;
  font-weight:1000;
  cursor:pointer;
  opacity:0;
  transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease, filter .12s ease;
  font-size:11px;
  box-shadow: 0 2px 0 rgba(19,33,19,.22);
}
.slot:hover .xbtn{opacity:1;transform: translateY(0)}
.xbtn:hover{filter:brightness(1.03)}

.ddBtn{
  position:absolute;top:7px;left:7px;
  border:var(--px) solid rgba(47,74,47,.92);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  border-radius:10px;
  padding:4px 6px;
  font-weight:1000;
  cursor:pointer;
  opacity:.92;
  transition: opacity .12s ease, filter .12s ease, border-color .12s ease;
  font-size:11px;
  box-shadow: 0 2px 0 rgba(19,33,19,.22);
}
.ddBtn:hover{opacity:1;filter:brightness(1.03)}
.ddWrap{
  position:absolute;left:7px;right:7px;top:36px;
  z-index:10;
  display:none;
}
.ddWrap.open{display:block}
.ddSelect{
  width:100%;
  border-radius:12px;
  border:var(--px) solid rgba(47,74,47,.92);
  background: linear-gradient(180deg, #f7fbe6, #e6f3c8);
  padding:8px 9px;
  font-weight:900;
  box-shadow: var(--shadow2);
  font-size:11.5px;
}

.quickBar{
  margin-top:10px;
  border:var(--px) solid rgba(47,74,47,.95);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  border-radius:12px;
  padding:8px;
  box-shadow: 0 3px 0 rgba(19,33,19,.26), 0 10px 16px rgba(19,33,19,.16);
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;
}
.quickLeft{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.qbtn{
  padding:7px 10px;border-radius:999px;border:var(--px) solid rgba(47,74,47,.85);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  cursor:pointer;font-weight:1000;font-size:11px;color:var(--muted);
  box-shadow: 0 2px 0 rgba(19,33,19,.20);
  transition: transform .05s ease, filter .12s ease, border-color .12s ease;
}
.qbtn:active{transform: translateY(2px)}
.qbtn.on{border-color:rgba(47,191,111,.80);background:rgba(47,191,111,.14);color:#0f5a34}
.qbtn:disabled{opacity:.55;cursor:not-allowed}
.qmeta{font-size:11px;color:var(--muted);font-weight:1000}

#editorPanel .pbody{ padding: var(--ed-pad); }
#editorPanel .phead b{ font-size:11.5px; }
#editorPanel .phead span{ font-size:10.5px; }

.statCard{
  border:var(--px) solid rgba(47,74,47,.95);
  background: linear-gradient(180deg, #fdfbe8, #eef6d0);
  border-radius:12px;
  padding:8px;
  box-shadow: 0 3px 0 rgba(19,33,19,.26), 0 10px 14px rgba(19,33,19,.16);
  margin-bottom: var(--ed-gap);
}
.statTop{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-bottom:8px;
}
.statTop b{font-size:11.5px}
.statTop .miniMeta{font-size:10.5px;color:var(--muted);font-weight:1000}
.statTitleRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.statWrap{
  overflow:auto;
  border-radius:12px;
  border:var(--px) solid rgba(47,74,47,.95);
  background: linear-gradient(180deg, #f7fbe6, #eef6d0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.statTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:520px;
}
.statTable th,.statTable td{
  padding:6px 8px;
  border-bottom:1px solid rgba(47,74,47,.14);
  border-right:1px solid rgba(47,74,47,.10);
  font-size:11px;
  white-space:nowrap;
}
.statTable th{
  background: linear-gradient(180deg, #fff7c7, #ffd57d);
  text-align:left;
  font-weight:1000;
  position:sticky;top:0;
  z-index:1;
}
.statTable td:last-child,.statTable th:last-child{border-right:none}
.statTable tr:last-child td{border-bottom:none}
.bstPill{
  font-family:var(--mono);
  font-weight:1000;
  padding:2px 8px;
  border-radius:999px;
  border:var(--px) solid rgba(47,74,47,.85);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  color:var(--muted);
  box-shadow: 0 2px 0 rgba(19,33,19,.16);
}

.editorTop{
  display:flex;gap:var(--ed-gap);align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.editorLeft{display:flex;gap:var(--ed-gap);align-items:center;min-width:240px}
.bigSpr{
  width:var(--ed-sprbox);height:var(--ed-sprbox);border-radius:12px;
  border:var(--px) solid rgba(47,74,47,.95);
  background: linear-gradient(180deg, #f7fbe6, #dcedb6);
  display:grid;place-items:center;
  overflow:hidden;
  box-shadow: 0 3px 0 rgba(19,33,19,.26), 0 10px 16px rgba(19,33,19,.16);
  flex:0 0 auto;
}
.bigSpr img{width:var(--ed-spr);height:var(--ed-spr);image-rendering:pixelated;object-fit:contain}
.ename b{font-size:12px}
.ename span{display:block;font-size:10.5px;color:var(--muted);margin-top:1px;word-break:break-word}

.toggles{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.tbtn{
  padding:6px 10px;border-radius:999px;border:var(--px) solid rgba(47,74,47,.85);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  cursor:pointer;font-weight:1000;font-size:10.75px;color:var(--muted);
  box-shadow: 0 2px 0 rgba(19,33,19,.20);
}
.tbtn.on{border-color:rgba(47,191,111,.80);background:rgba(47,191,111,.14);color:#0f5a34}
.tbtn:disabled{opacity:.55;cursor:not-allowed}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--ed-gap);margin-top:var(--ed-gap)}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--ed-gap);margin-top:var(--ed-gap)}
@media (max-width: 760px){ .grid2,.grid3{grid-template-columns:1fr} }

.cardIn{
  border:var(--px) solid rgba(47,74,47,.95);
  background: linear-gradient(180deg, #fdfbe8, #eef6d0);
  border-radius:12px;
  padding:7px;
  box-shadow: 0 3px 0 rgba(19,33,19,.26), 0 10px 14px rgba(19,33,19,.16);
  min-width:0;
}
.label{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:var(--ed-label);color:var(--muted);font-weight:1000;margin-bottom:4px;
}

input[type="text"], input[type="number"], select{
  width:100%;
  padding:7px 8px;
  border-radius:11px;
  border:var(--px) solid rgba(47,74,47,.92);
  background: linear-gradient(180deg, #f7fbe6, #e6f3c8);
  color:var(--text);
  outline:none;
  font-size:var(--ed-input);
  box-shadow: 0 2px 0 rgba(19,33,19,.18);
}
input:focus, select:focus{
  border-color: rgba(61,107,255,.85);
  box-shadow: 0 0 0 4px rgba(61,107,255,.18), 0 2px 0 rgba(19,33,19,.18);
}

.ivEvWrap{
  margin-top: var(--ed-gap);
  border:var(--px) solid rgba(47,74,47,.95);
  background: linear-gradient(180deg, #fdfbe8, #eef6d0);
  border-radius:12px;
  padding:8px;
  box-shadow: 0 3px 0 rgba(19,33,19,.26), 0 10px 14px rgba(19,33,19,.16);
}
/* DEFAULT HIDE ADVANCED IV/EV */
.isHidden{display:none !important;}

.ivEvHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-bottom:8px;
}
.ivEvHead b{font-size:11.5px}
.ivEvBtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ivEvMeta{font-size:10.5px;color:var(--muted);font-weight:1000}
.ivEvTitleRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ivEvTableWrap{
  overflow:auto;
  border-radius:12px;
  border:var(--px) solid rgba(47,74,47,.95);
  background: linear-gradient(180deg, #f7fbe6, #eef6d0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.ivEvTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:620px;
}
.ivEvTable th,.ivEvTable td{
  padding:6px 8px;
  border-bottom:1px solid rgba(47,74,47,.14);
  border-right:1px solid rgba(47,74,47,.10);
  font-size:11px;
  white-space:nowrap;
}
.ivEvTable th{
  background: linear-gradient(180deg, #fff7c7, #ffd57d);
  text-align:left;
  font-weight:1000;
  position:sticky;top:0;
  z-index:1;
}
.ivEvTable td:last-child,.ivEvTable th:last-child{border-right:none}
.ivEvTable tr:last-child td{border-bottom:none}
.statKey{
  font-family:var(--mono);
  font-weight:1000;
  color:var(--muted);
}
.tinyNum{
  width:88px;
  padding:6px 8px;
  border-radius:11px;
  font-size:11px;
}
.evTotalPill{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 9px;border-radius:999px;
  border:var(--px) solid rgba(47,74,47,.85);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  color:var(--muted);
  font-weight:1000;
  box-shadow: 0 2px 0 rgba(19,33,19,.16);
}
.evTotalPill b{color:var(--text);font-family:var(--mono);font-size:11px}

.movesHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top: var(--ed-gap);
}
.movesHead .left{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.movesHead .right{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}

.moves{display:grid;grid-template-columns:1fr 1fr;gap:var(--ed-gap);margin-top:var(--ed-gap)}
@media (max-width: 760px){ .moves{grid-template-columns:1fr} }
.moveBox{
  border:var(--px) solid rgba(47,74,47,.95);
  background: linear-gradient(180deg, #fdfbe8, #eef6d0);
  border-radius:12px;
  padding:7px;
  box-shadow: 0 3px 0 rgba(19,33,19,.26), 0 10px 14px rgba(19,33,19,.16);
}
.moveBox .mhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.moveBox .mhead b{font-size:11px}
.chip{
  font-size:9.75px;font-weight:1000;
  padding:2px 8px;border-radius:999px;
  border:var(--px) solid rgba(47,74,47,.85);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  color:var(--muted);
  white-space:nowrap;
  box-shadow: 0 2px 0 rgba(19,33,19,.16);
}
.moveInfo{margin-top:5px;font-size:10.5px;color:var(--muted);line-height:1.35}
.moveInfo .k{color:var(--text);font-weight:1000}

.controls{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;
}
.controls .left{display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex:1}
.controls .right{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.field{min-width:160px;flex:1}
.field.search{min-width:280px;flex:2}
.smallMeta{margin-top:8px;font-size:10.75px;color:var(--muted);word-break:break-word}

.dexViewport{
  margin-top:10px;
  border:var(--px) solid rgba(47,74,47,.98);
  border-radius:12px;
  background:
    linear-gradient(0deg, rgba(22,40,22,.05) 1px, transparent 1px) 0 0/100% 5px,
    linear-gradient(180deg, #f7fbe6, #eef6d0);
  box-shadow: 0 3px 0 rgba(19,33,19,.26), 0 12px 18px rgba(19,33,19,.16);
  overflow-y:auto;
  overflow-x:hidden;
  height: calc((var(--dex-row-h) * var(--dex-rows)) + (var(--dex-gap) * (var(--dex-rows) + 1)));
  padding: var(--dex-gap);
  scrollbar-gutter: stable;
}

.dex{
  display:grid;
  grid-template-columns: repeat(var(--dex-cols), minmax(0, 1fr));
  gap: var(--dex-gap);
  align-content:start;
}
@media (max-width: 1180px){ :root{--dex-cols:7} }
@media (max-width: 1040px){ :root{--dex-cols:6} }
@media (max-width: 920px){  :root{--dex-cols:5} }
@media (max-width: 760px){  :root{--dex-cols:4; --dex-row-h: 72px} }
@media (max-width: 560px){  :root{--dex-cols:3; --dex-row-h: 70px} }
@media (max-width: 420px){  :root{--dex-cols:2; --dex-row-h: 68px} }

.mon{
  border:var(--px) solid rgba(47,74,47,.92);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  border-radius:12px;
  padding:5px;
  cursor:pointer;
  user-select:none;
  height: var(--dex-row-h);
  display:flex;
  gap:6px;
  align-items:center;
  position:relative;
  min-width:0;
  box-shadow: 0 2px 0 rgba(19,33,19,.22), 0 10px 14px rgba(19,33,19,.14);
  transition: transform .05s ease, filter .12s ease, border-color .12s ease;
}
.mon:hover{filter:brightness(1.02)}
.mon:active{transform: translateY(2px)}

.mon .mspr{
  width:var(--dex-spr-box);
  height:var(--dex-spr-box);
  border-radius:10px;
  border:var(--px) solid rgba(47,74,47,.95);
  background: linear-gradient(180deg, #f7fbe6, #dcedb6);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.mon img{
  width:var(--dex-spr);
  height:var(--dex-spr);
  image-rendering:pixelated;
  object-fit:contain;
}
.mtext{min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.12}
.mnum{
  font-size:9.5px;
  font-weight:1000;
  color:var(--muted);
  font-family:var(--mono);
  letter-spacing:.2px;
}
.mname{
  font-size:10.5px;
  font-weight:1000;
  color:var(--text);
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break:break-word;
}

.monBadges{
  position:absolute;top:5px;right:5px;
  display:flex;gap:5px;align-items:center;
}
.mb{
  font-size:9px;font-weight:1000;
  padding:2px 6px;border-radius:999px;
  border:var(--px) solid rgba(47,74,47,.85);
  background: linear-gradient(180deg, #fdfbe8, #e6f3c8);
  color:var(--muted);
  box-shadow: 0 2px 0 rgba(19,33,19,.16);
}
.mb.leg{border-color:rgba(61,107,255,.75);background:rgba(61,107,255,.14);color:#14319b}
.mb.fem{border-color:rgba(47,191,111,.75);background:rgba(47,191,111,.14);color:#0f5a34}

.tableWrap{
  overflow:auto;border-radius:12px;border:var(--px) solid rgba(47,74,47,.98);
  background: linear-gradient(180deg, #f7fbe6, #eef6d0);
  box-shadow: 0 3px 0 rgba(19,33,19,.22), 0 10px 14px rgba(19,33,19,.14);
}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:860px}
th,td{padding:6px 8px;border-bottom:1px solid rgba(47,74,47,.14);border-right:1px solid rgba(47,74,47,.10);font-size:11px}
th{
  position:sticky;top:0;
  background: linear-gradient(180deg, #fff7c7, #ffd57d);
  z-index:2;text-align:left;
  box-shadow: 0 2px 0 rgba(19,33,19,.16);
}
td:last-child, th:last-child{border-right:none}
tr:last-child td{border-bottom:none}
.typeCell{font-weight:1000}
.mult{font-family:var(--mono);font-weight:1000}
.m0{background: rgba(47,191,111,.20); color:#0f5a34}
.m05{background: rgba(47,191,111,.12); color:#0f5a34}
.m1{ background: rgba(61,107,255,.08); color: var(--muted); }
.m2{background: rgba(255,176,32,.20); color:#6e4300}
.m4{background: rgba(255,61,107,.18); color:#7c0f2b}
.m025{background: rgba(47,191,111,.09); color:#0f5a34}

.barFill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(61,107,255,.70), rgba(47,191,111,.70));
}

.note{
  margin-top:10px;
  font-size:10.75px;color:var(--muted);line-height:1.5;
  border:var(--px) dashed rgba(47,74,47,.40);
  background: linear-gradient(180deg, #fdfbe8, #eef6d0);
  padding:8px 9px;border-radius:12px;
  box-shadow: 0 2px 0 rgba(19,33,19,.16);
}

.toast{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  background: rgba(22,40,22,.92);
  border:var(--px) solid rgba(255,255,255,.18);
  color: #fff;
  padding:8px 12px;border-radius:999px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 18px 34px rgba(0,0,0,.22);
  font-size:11px;font-weight:1000;
  opacity:0;pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
  z-index:80;
  max-width:min(900px, calc(100vw - 24px));
  text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}

.tag.type, .typePill{
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:999px;
  font-weight:1000; font-size:10.5px; line-height:1;
  color:#fff; border:none;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.25);
}
.type--Normal  { background:linear-gradient(#B5B59A,#9C9C7C); }
.type--Fire    { background:linear-gradient(#F5AC78,#EE8130); }
.type--Water   { background:linear-gradient(#9DB7F5,#6390F0); }
.type--Electric{ background:linear-gradient(#FAE078,#F7D02C); color:#3b2f00; text-shadow:none; }
.type--Grass   { background:linear-gradient(#A7DB8D,#7AC74C); }
.type--Ice     { background:linear-gradient(#BCE6E6,#96D9D6); color:#0b3f42; text-shadow:none; }
.type--Fighting{ background:linear-gradient(#D67873,#C22E28); }
.type--Poison  { background:linear-gradient(#C183C1,#A33EA1); }
.type--Ground  { background:linear-gradient(#EBD69D,#E2BF65); color:#4b3a00; text-shadow:none; }
.type--Flying  { background:linear-gradient(#C6B7F5,#A98FF3); }
.type--Psychic { background:linear-gradient(#FA92B2,#F95587); }
.type--Bug     { background:linear-gradient(#C6D16E,#A6B91A); }
.type--Rock    { background:linear-gradient(#D1C17D,#B6A136); color:#4a3a00; text-shadow:none; }
.type--Ghost   { background:linear-gradient(#A292BC,#735797); }
.type--Dragon  { background:linear-gradient(#A27DFA,#6F35FC); }
.type--Dark    { background:linear-gradient(#A29288,#705746); }
.type--Steel   { background:linear-gradient(#D6D6E8,#B7B7CE); color:#2f2f4a; text-shadow:none; }
.type--Fairy   { background:linear-gradient(#F4BDC9,#D685AD); }
.type--Stellar{
  background: linear-gradient(135deg, #9bf7ff 0%, #7c8cff 30%, #c58bff 60%, #ffd27a 100%);
  color:#1a1430;
  text-shadow:none;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.40);
}
.type--Unknown, .type--Null{ background: linear-gradient(#9aa3b2,#6f7a8c); }

.analysisGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:start;
}
@media (max-width: 980px){ .analysisGrid{ grid-template-columns: 1fr; } }
.analysisGrid .tableWrap{ min-width:0; }
.analysisGrid table{ min-width: 720px; }
@media (max-width: 980px){ .analysisGrid table{ min-width: 860px; } }

.cmpGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width: 980px){ .cmpGrid{grid-template-columns:1fr} }
.cmpCard{
  border:var(--px) solid rgba(47,74,47,.95);
  background: linear-gradient(180deg, #fdfbe8, #eef6d0);
  border-radius:12px;
  padding:10px;
  box-shadow: 0 3px 0 rgba(19,33,19,.26), 0 10px 14px rgba(19,33,19,.16);
}
.cmpTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cmpTitle b{font-size:12px}
.cmpLine{margin-top:8px;font-size:11px;color:var(--muted);line-height:1.45}
.cmpBars{margin-top:10px;display:grid;gap:8px}
.barRow{display:grid;grid-template-columns: 78px 1fr 48px;gap:8px;align-items:center}
.barLabel{font-size:10.5px;color:var(--muted);font-weight:1000}
.barTrack{
  height:12px;border-radius:999px;border:var(--px) solid rgba(47,74,47,.90);
  background: linear-gradient(180deg, #f7fbe6, #dcedb6);
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.barFill{height:100%;width:0%}
.barVal{font-family:var(--mono);font-weight:1000;font-size:10.5px;color:var(--muted)}

.formRow{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  flex-wrap:wrap;
}
.formSel{
  font: inherit;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 10px;
  border: var(--px) solid rgba(47,74,47,.92);
  background: linear-gradient(180deg, #f7fbe6, #e6f3c8);
  color: var(--text);
  box-shadow: 0 2px 0 rgba(19,33,19,.16);
  max-width: 100%;
}

/* ===========================
   MOBILE: FIT ANALYSIS TABLE TO SCREEN (NO SCROLL)
   (kept exactly as your logic)
   =========================== */
@media (max-width: 720px){

  /* allow grid children to shrink properly */
  .analysisGrid > div{
    min-width: 0;
  }

  /* table should NOT force width */
  .analysisGrid table{
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
  }

  /* tighter cells */
  .analysisGrid th,
  .analysisGrid td{
    font-size: 10px;
    padding: 4px 5px;
    white-space: normal;     /* allow wrapping */
    word-break: break-word;
  }

  /* make type column compact */
  .analysisGrid .typeCell{
    font-size: 9.5px;
  }

  /* compact multiplier text */
  .analysisGrid .mult{
    font-size: 9.5px;
  }

  /* reduce pill size inside tables */
  .analysisGrid .typePill{
    font-size: 9px;
    padding: 2px 6px;
  }

  /* reduce header text slightly */
  .analysisGrid th{
    font-size: 9.75px;
  }

  /* tighten panel spacing */
  #analysisPanel .pbody{
    padding: 7px;
  }
}
/* ==============================
   FIX: IV/EV show button not clickable (GBA theme)
   ============================== */

/* Ensure no decorative layer can steal clicks */
.panel::before,
.slot::before,
.dexViewport::before,
.tableWrap::before,
.statWrap::before,
.ivEvWrap::before{
  pointer-events: none !important;
}

/* Lift the IV/EV section above any overlays */
.ivEvWrap{
  position: relative;
  z-index: 5;
}

/* Lift the header + its buttons even more */
.ivEvHead,
.ivEvTitleRow,
.ivEvBtns{
  position: relative;
  z-index: 6;
}

/* Make sure buttons receive pointer events */
.ivEvBtns .btn,
.ivEvBtns .tbtn,
.ivEvHead .btn,
.ivEvHead .tbtn{
  pointer-events: auto !important;
}
/* ================= STYLISH FOOTER ================= */

.siteFooter{
  margin-top:24px;
  position:relative;
  background:var(--surface);
  border-top:1px solid var(--border);
  overflow:hidden;
}

/* top gradient glow line */
.siteFooter::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  opacity:.9;
}

.footerInner{
  display:flex;
  justify-content:space-between;
  gap:28px;
  padding:22px 0;
  flex-wrap:wrap;
}

/* LEFT SIDE */
.footerLeft{
  max-width:720px;
}

.footerLegal{
  font-size:12.5px;
  line-height:1.65;
  color:var(--muted);
}

.footerCopy{
  margin-top:10px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.3px;
}

/* RIGHT SIDE LINKS */
.footerRight{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:flex-start;
}

/* modern pill links */
.footerRight a{
  position:relative;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
  background:var(--surface2);
  border:1px solid var(--border);
  transition:.18s ease;
}

/* hover */
.footerRight a:hover{
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

/* subtle separator on large screens */
@media (min-width: 900px){
  .footerLeft{
    padding-right:30px;
    border-right:1px dashed var(--border);
  }
}

/* 📱 MOBILE */
@media (max-width:700px){

  .footerInner{
    flex-direction:column;
    gap:16px;
  }

  .footerRight{
    justify-content:flex-start;
    gap:10px;
  }

  .footerRight a{
    font-size:12px;
    padding:5px 10px;
  }

}.footerInner{
  display:flex;
  justify-content:space-between;
  gap:28px;
  padding:22px clamp(16px, 4vw, 42px);
  flex-wrap:wrap;
}
/* =========================================
   HELP / MODAL OVERLAYS ( ? , Saves, Clear, Import/Export )
   Uses: .helpOverlay .helpPanel .helpPanelHead .helpBody .noteBox
   ========================================= */

.helpOverlay{
  position:fixed;
  inset:0;
  display:none;                 /* hidden by default */
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(12,18,38,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:9999;
}

.helpOverlay.isOpen{
  display:flex;                 /* show when JS adds .isOpen */
}

.helpPanel{
  width:min(720px, 100%);
  max-height:min(78vh, 740px);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  box-shadow: 0 24px 60px rgba(12,18,38,.25);
  transform: translateY(8px) scale(.98);
  opacity:0;
  transition: transform .18s ease, opacity .18s ease;
}

.helpOverlay.isOpen .helpPanel{
  transform: translateY(0) scale(1);
  opacity:1;
}

.helpPanelHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface2), var(--surface));
}

.helpPanelHead b{
  font-size:14px;
  letter-spacing:.2px;
}

.helpClose{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.helpClose:hover{
  transform: translateY(-1px);
  background:var(--surface2);
}
.helpClose:active{
  transform: translateY(0);
}

.helpBody{
  padding:14px;
  overflow:auto; /* scroll inside modal if content is long */
  max-height:calc(78vh - 58px);
}

/* The text box where your guide content appears */
.noteBox{
  border:1px solid rgba(47,91,255,.25);
  background:rgba(47,91,255,.06);
  color:var(--text);
  padding:12px 12px;
  border-radius:12px;
  line-height:1.45;
  font-size:13px;
  white-space:pre-line; /* IMPORTANT: keeps \n line breaks from HELP_TEXT */
}

/* Optional subtle highlight for warnings (works with your clear popup too) */
.noteBox.warnBox{
  border-color: rgba(255,176,32,.28);
  background: rgba(255,176,32,.10);
}

/* Optional subtle highlight for danger */
.noteBox.dangerBox{
  border-color: rgba(255,61,107,.30);
  background: rgba(255,61,107,.10);
}

/* Help ? button style (so the ? looks good everywhere) */
.helpBtn{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  line-height:1;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.helpBtn:hover{
  transform: translateY(-1px);
  background:var(--surface2);
  border-color: rgba(47,91,255,.35);
}
.helpBtn:active{
  transform: translateY(0);
}

/* Make modal comfy on small screens */
@media (max-width: 520px){
  .helpOverlay{ padding:12px; }
  .helpPanel{
    max-height:84vh;
    border-radius:calc(var(--radius) + 4px);
  }
  .helpPanelHead{
    padding:12px;
  }
  .helpBody{
    padding:12px;
    max-height:calc(84vh - 54px);
  }
  .noteBox{
    font-size:12.5px;
    padding:10px;
  }
}.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Logo image */
.siteLogo{
  height:38px;
  width:auto;
  display:block;
}

/* Optional text styling */
.brandText b{
  font-size:18px;
  line-height:1;
}

/* 📱 Mobile */
@media (max-width:600px){
  .siteLogo{
    height:30px;
  }

  .brandText b{
    font-size:16px;
  }
}
/* ==============================
   TEAM RANK — GBA THEME
   (same classes, GBA-style pixels)
   ============================== */

.rankCard{
  margin-top:12px;
  border:2px solid var(--border);
  border-radius:12px;
  background:linear-gradient(180deg, var(--surface), var(--surface2));
  box-shadow: var(--shadow2);
  padding:12px;
  position:relative;
}

/* subtle “pixel frame” vibe */
.rankCard::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px dashed rgba(0,0,0,.18);
  border-radius:10px;
  pointer-events:none;
  opacity:.6;
}

.rankTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.rankTitle{
  font-size:13px;
  letter-spacing:.2px;
  color:var(--text);
}

.rankSub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}

.rankScoreBox{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* badge = “cartridge label” */
.rankGrade{
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:2px solid var(--border);
  background:rgba(0,0,0,.10);
  color:var(--text);
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}

.rankScore{
  font-weight:1000;
  font-size:18px;
  line-height:1;
  color:var(--text);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

/* progress bar = “GBA meter” */
.rankBar{
  margin-top:10px;
  height:12px;
  border-radius:999px;
  background:rgba(0,0,0,.10);
  overflow:hidden;
  border:2px solid var(--border);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18);
}

.rankBarFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:
    linear-gradient(90deg, var(--primary), var(--accent));
  /* pixel-ish highlight */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    0 2px 0 rgba(0,0,0,.10);
  transition: width .25s ease;
}

/* Metrics = “menu tiles” */
.rankMetrics{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.rankMetric{
  border:2px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.22);
  padding:8px 10px;
  box-shadow: 0 3px 0 rgba(0,0,0,.10);
}

.mLabel{
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
}

.mVal{
  font-size:13px;
  font-weight:900;
  color:var(--text);
  text-shadow: 0 1px 0 rgba(255,255,255,.20);
}

/* Notes = “dialog boxes” */
.rankNotes{
  margin-top:10px;
  display:grid;
  gap:8px;
}

.rankNote{
  font-size:12px;
  color:var(--text);
  background:rgba(255,255,255,.18);
  border:2px solid var(--border);
  border-radius:12px;
  padding:8px 10px;
  box-shadow: 0 3px 0 rgba(0,0,0,.10);
}

.rankNote b{
  margin-right:6px;
  color:var(--primary);
}

/* Mobile */
@media (max-width: 720px){
  .rankMetrics{ grid-template-columns: 1fr; }
  .rankScore{ font-size:16px; }
}
/* ==========================================================
   Pokémon Team Builder — SEO Headings (Single File)
   ✅ Compact tool-UI heading sizes (won’t break layout)
   ✅ Works with your theme variables (light/dark/gba/neon/etc.)
   ✅ Responsive + modal + panel + rank + analysis tuning
   ========================================================== */

/* ==============================
   1) Base Heading Reset + Scale
   ============================== */

h1,h2,h3,h4{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  line-height:1.25;
  letter-spacing:.2px;
}

h1{
  font-size:18px;
  font-weight:800;
}

h2{
  font-size:14px;
  font-weight:700;
}

h3{
  font-size:12.8px;
  font-weight:700;
}

h4{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

/* ==============================
   2) Header (Brand) H1 + Intro
   ============================== */

.brandText h1{
  font-size:16px;
  font-weight:800;
  white-space:nowrap;
}

.seoIntro{
  margin:6px 0 0;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.35;
  max-width:720px;
}

/* ==============================
   3) Panel Headings (replaces old <b>)
   ============================== */

.phead h2{
  font-size:13.5px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:6px;
}

/* ==============================
   4) Rank Card Headings
   ============================== */

.rankTitle{
  font-size:12.5px;
  font-weight:800;
}

/* ==============================
   5) Stats / IV-EV / Moves Headings
   ============================== */

.statTitleRow h3{
  font-size:12.5px;
  font-weight:800;
}

.ivEvTitleRow h3{
  font-size:12.5px;
  font-weight:800;
}

/* Your inserted moves H3 (above moves list) */
#editorPanel h3{
  /* keep editor section headings compact */
  font-size:12.5px;
  font-weight:800;
}

/* If you used an H3 directly above moves */
#editorPanel .pbody > h3{
  margin:14px 0 6px;
}

/* ==============================
   6) Analysis Section Headings
   ============================== */

.analysisGrid h3{
  font-size:12.2px;
  font-weight:800;
}

.analysisGrid h4{
  font-size:11.8px;
  font-weight:700;
  color:var(--muted);
}

/* Comparison blocks */
.cmpCard h4{
  font-size:12px;
  font-weight:800;
  color:var(--text);
}

/* ==============================
   7) Overlays / Modals Headings
   ============================== */

.helpPanelHead h2{
  font-size:13.5px;
  font-weight:800;
}

/* ==============================
   8) Optional: Make headings look like tool labels
   ============================== */

.phead h2,
.rankTitle,
.statTitleRow h3,
.ivEvTitleRow h3{
  text-transform:none;
}

/* ==============================
   9) Mobile Responsive Scale
   ============================== */

@media (max-width:768px){

  h1{font-size:16px;}
  h2{font-size:13px;}
  h3{font-size:12.2px;}
  h4{font-size:11.5px;}

  .brandText h1{
    white-space:normal;
  }

  /* Keep header clean on mobile */
  .seoIntro{
    display:none;
  }

}
/* Same styling as .slot.active (or customize) */
.slot.opponentActive{
  outline: 2px solid var(--warn);
  box-shadow: 0 0 0 4px rgba(255,176,32,.15);
}