:root{
    --bg:#f7f7ff;
    --surface:#ffffff;
    --surface2:#f2f5ff;

    --text:#101425;
    --muted:#5b6784;
    --border:#cfd6ef;

    --primary:#2f5bff;
    --accent:#18b79a;
    --warn:#ffb020;
    --bad:#ff3d6b;

    --radius:10px;
    --shadow: 0 10px 0 rgba(12,18,38,.06), 0 18px 34px rgba(12,18,38,.10);
    --shadow2: 0 6px 0 rgba(12,18,38,.05), 0 10px 18px rgba(12,18,38,.08);

    --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:
      linear-gradient(0deg, rgba(10,18,32,.03) 1px, transparent 1px) 0 0/100% 3px,
      radial-gradient(900px 520px at 12% -10%, rgba(47,91,255,.14), transparent 60%),
      radial-gradient(900px 520px at 90% 0%, rgba(24,183,154,.10), transparent 55%),
      linear-gradient(180deg, #fafbff 0%, #eef2ff 55%, #f7f7ff 100%);
  }

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

  .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(255,255,255,.88);
    backdrop-filter: blur(10px);
    border-bottom:var(--px) solid var(--border);
    box-shadow: 0 4px 0 rgba(12,18,38,.05);
  }
  .headerbar{
    border-bottom:var(--px) solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,248,255,.92));
  }
  .menubar{
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,246,255,.90));
  }
  .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:10px;
    border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #ffffff, #eef3ff);
    box-shadow: var(--shadow2);
    display:grid;place-items:center;
    font-weight:1000;color:var(--primary);
    font-size:12px;
    letter-spacing:.2px;
  }
  .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 var(--border);
    background: linear-gradient(180deg, #ffffff 0%, #f2f6ff 100%);
    color:var(--text);
    padding:7px 10px;
    border-radius:12px;
    cursor:pointer;
    font-weight:1000;
    font-size:11.5px;
    user-select:none;
    box-shadow: 0 3px 0 rgba(12,18,38,.18), 0 10px 18px rgba(12,18,38,.10);
    transition: transform .05s ease, filter .12s ease, border-color .12s ease;
  }
  .btn:hover{filter:brightness(1.02);border-color:#bcc7ea}
  .btn:active{
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(12,18,38,.18), 0 8px 14px rgba(12,18,38,.10);
  }
  .btn.primary{
    border-color:rgba(47,91,255,.55);
    background: linear-gradient(180deg, rgba(47,91,255,.18), rgba(47,91,255,.06));
    color:#0f2a87;
  }
  .btn.accent{
    border-color:rgba(24,183,154,.55);
    background: linear-gradient(180deg, rgba(24,183,154,.18), rgba(24,183,154,.06));
    color:#0b5f52;
  }
  .btn.warn{
    border-color:rgba(255,176,32,.60);
    background: linear-gradient(180deg, rgba(255,176,32,.22), rgba(255,176,32,.08));
    color:#7a4c00;
  }
  .btn.bad{
    border-color:rgba(255,61,107,.55);
    background: linear-gradient(180deg, rgba(255,61,107,.18), rgba(255,61,107,.06));
    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(12,18,38,.14), 0 8px 12px rgba(12,18,38,.08);
  }

  .pill{
    border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #ffffff, #f3f6ff);
    padding:5px 9px;
    border-radius:999px;
    color:var(--muted);
    font-size:11px;
    font-weight:1000;
    white-space:nowrap;
    box-shadow: 0 3px 0 rgba(12,18,38,.10);
  }
  .kbd{
    font-family:var(--mono);
    font-size:10px;
    padding:2px 6px;
    border-radius:9px;
    border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    color:var(--muted);
    box-shadow: 0 2px 0 rgba(12,18,38,.08);
  }

  /* Help icon + panel (for every table) */
  .helpBtn{
    width:22px;height:22px;
    border-radius:999px;
    border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    box-shadow: 0 2px 0 rgba(12,18,38,.12);
    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.02);border-color:#bcc7ea;color:var(--text)}
  .helpBtn:active{transform: translateY(1px)}
  .helpOverlay{
    position:fixed;inset:0;
    background: rgba(10,18,32,.38);
    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 var(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 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 var(--border);
    background: linear-gradient(180deg, #ffffff 0%, #f1f5ff 100%);
  }
  .helpPanelHead b{font-size:12px}
  .helpClose{
    border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    border-radius:12px;
    padding:7px 10px;
    cursor:pointer;
    font-weight:1000;
    font-size:11px;
    box-shadow: 0 2px 0 rgba(12,18,38,.12);
  }
  .helpBody{padding:10px;font-size:12px;color:var(--text);line-height:1.5}
  .helpBody .noteBox{
    border:var(--px) dashed #cdd6f5;
    background: linear-gradient(180deg, #fff, #f7f9ff);
    padding:10px;border-radius:12px;
    box-shadow: 0 2px 0 rgba(12,18,38,.08);
  }

  .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 var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 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,.8), inset 0 -1px 0 rgba(10,18,32,.06);
    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 var(--border);
    background: linear-gradient(180deg, #ffffff 0%, #f1f5ff 100%);
    flex-wrap:wrap;
    position:relative;
  }
  .phead::after{
    content:"";
    position:absolute;left:0;right:0;bottom:-2px;height:2px;
    background: linear-gradient(90deg,
      rgba(47,91,255,.40),
      rgba(24,183,154,.35),
      rgba(255,176,32,.30),
      rgba(255,61,107,.28)
    );
    opacity:.55;
  }
  .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 var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    border-radius:999px;
    padding:6px 10px;
    box-shadow: 0 2px 0 rgba(12,18,38,.12);
    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 var(--border);
    background: linear-gradient(180deg, #fff, #eef3ff);
    position:relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    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, #fff, #e8eeff);
    border:var(--px) solid rgba(47,91,255,.35);
    box-shadow: 0 2px 0 rgba(12,18,38,.18);
    transition: left .12s ease, background .12s ease, border-color .12s ease;
  }
  .switch input:checked + .track{
    border-color: rgba(24,183,154,.55);
    background: linear-gradient(180deg, rgba(24,183,154,.18), rgba(24,183,154,.06));
  }
  .switch input:checked + .track .dot{
    left:18px;
    border-color: rgba(24,183,154,.55);
    background: linear-gradient(180deg, #ffffff, rgba(24,183,154,.14));
  }
  .switch .lbl{white-space:nowrap}
  .switch .hint{font-size:10px;font-weight:1000;color:var(--muted);opacity:.85}

  .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 var(--border);
    border-radius:12px;
    background: linear-gradient(180deg, #ffffff, #f6f8ff);
    padding:8px;
    cursor:pointer;
    position:relative;
    min-height: var(--slot-minh);
    box-shadow: 0 3px 0 rgba(12,18,38,.14), 0 10px 16px rgba(12,18,38,.09);
    transition: transform .05s ease, border-color .12s ease, filter .12s ease;
  }
  .slot:hover{border-color:#bcc7ea;filter:brightness(1.01)}
  .slot:active{transform: translateY(2px)}
  .slot.active{
    border-color: rgba(24,183,154,.75);
    box-shadow:
      0 0 0 3px rgba(24,183,154,.18) inset,
      0 3px 0 rgba(12,18,38,.14),
      0 10px 16px rgba(12,18,38,.09);
  }
  .slot.enemyActive{
    border-color: rgba(255,176,32,.80);
    box-shadow:
      0 0 0 3px rgba(255,176,32,.18) inset,
      0 3px 0 rgba(12,18,38,.14),
      0 10px 16px rgba(12,18,38,.09);
  }

  .sprBox{
    width:100%;
    display:grid;place-items:center;
    border-radius:10px;
    border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #ffffff, #edf3ff);
    height:50px;
    overflow:hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  }
  .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 var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    color:var(--muted);
    box-shadow: 0 2px 0 rgba(12,18,38,.08);
  }
  .tag.on{border-color:rgba(24,183,154,.55);background:rgba(24,183,154,.10);color:#0b5f52}
  .tag.warn{border-color:rgba(255,176,32,.60);background:rgba(255,176,32,.12);color:#7a4c00}
  .tag.leg{border-color:rgba(47,91,255,.60);background:rgba(47,91,255,.10);color:#102a87}

  .xbtn{
    position:absolute;top:7px;right:7px;
    border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    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(12,18,38,.12);
  }
  .slot:hover .xbtn{opacity:1;transform: translateY(0)}
  .xbtn:hover{filter:brightness(1.02)}

  .ddBtn{
    position:absolute;top:7px;left:7px;
    border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    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(12,18,38,.12);
  }
  .ddBtn:hover{opacity:1;filter:brightness(1.02);border-color:#bcc7ea}
  .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 var(--border);
    background: linear-gradient(180deg, #fff, #f4f7ff);
    padding:8px 9px;
    font-weight:900;
    box-shadow: var(--shadow2);
    font-size:11.5px;
  }

  .quickBar{
    margin-top:10px;
    border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #fff, #f6f8ff);
    border-radius:12px;
    padding:8px;
    box-shadow: 0 3px 0 rgba(12,18,38,.10), 0 10px 16px rgba(12,18,38,.08);
    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 var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    cursor:pointer;font-weight:1000;font-size:11px;color:var(--muted);
    box-shadow: 0 2px 0 rgba(12,18,38,.12);
    transition: transform .05s ease, filter .12s ease, border-color .12s ease;
  }
  .qbtn:active{transform: translateY(2px)}
  .qbtn.on{border-color:rgba(24,183,154,.60);background:rgba(24,183,154,.10);color:#0b5f52}
  .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 var(--border);
    background: linear-gradient(180deg, #fff, #f7f9ff);
    border-radius:12px;
    padding:8px;
    box-shadow: 0 3px 0 rgba(12,18,38,.10), 0 10px 14px rgba(12,18,38,.08);
    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 var(--border);
    background: linear-gradient(180deg, #fff, #f4f7ff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  }
  .statTable{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:520px;
  }
  .statTable th,.statTable td{
    padding:6px 8px;
    border-bottom:1px solid #eef2ff;
    border-right:1px solid #f2f5ff;
    font-size:11px;
    white-space:nowrap;
  }
  .statTable th{
    background: linear-gradient(180deg, #fff, #f1f5ff);
    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 var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    color:var(--muted);
    box-shadow: 0 2px 0 rgba(12,18,38,.08);
  }

  .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 var(--border);
    background: linear-gradient(180deg, #fff, #edf3ff);
    display:grid;place-items:center;
    overflow:hidden;
    box-shadow: 0 3px 0 rgba(12,18,38,.12), 0 10px 16px rgba(12,18,38,.08);
    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 var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    cursor:pointer;font-weight:1000;font-size:10.75px;color:var(--muted);
    box-shadow: 0 2px 0 rgba(12,18,38,.12);
  }
  .tbtn.on{border-color:rgba(24,183,154,.60);background:rgba(24,183,154,.10);color:#0b5f52}
  .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 var(--border);
    background: linear-gradient(180deg, #fff, #f7f9ff);
    border-radius:12px;
    padding:7px;
    box-shadow: 0 3px 0 rgba(12,18,38,.10), 0 10px 14px rgba(12,18,38,.08);
    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 var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    color:var(--text);
    outline:none;
    font-size:var(--ed-input);
    box-shadow: 0 2px 0 rgba(12,18,38,.10);
  }
  input:focus, select:focus{
    border-color: rgba(47,91,255,.70);
    box-shadow: 0 0 0 4px rgba(47,91,255,.14), 0 2px 0 rgba(12,18,38,.10);
  }

  .ivEvWrap{
    margin-top: var(--ed-gap);
    border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #fff, #f7f9ff);
    border-radius:12px;
    padding:8px;
    box-shadow: 0 3px 0 rgba(12,18,38,.10), 0 10px 14px rgba(12,18,38,.08);
  }
  /* 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 var(--border);
    background: linear-gradient(180deg, #fff, #f4f7ff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  }
  .ivEvTable{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:620px;
  }
  .ivEvTable th,.ivEvTable td{
    padding:6px 8px;
    border-bottom:1px solid #eef2ff;
    border-right:1px solid #f2f5ff;
    font-size:11px;
    white-space:nowrap;
  }
  .ivEvTable th{
    background: linear-gradient(180deg, #fff, #f1f5ff);
    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 var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    color:var(--muted);
    font-weight:1000;
    box-shadow: 0 2px 0 rgba(12,18,38,.08);
  }
  .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 var(--border);
    background: linear-gradient(180deg, #fff, #f7f9ff);
    border-radius:12px;
    padding:7px;
    box-shadow: 0 3px 0 rgba(12,18,38,.10), 0 10px 14px rgba(12,18,38,.08);
  }
  .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 var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    color:var(--muted);
    white-space:nowrap;
    box-shadow: 0 2px 0 rgba(12,18,38,.08);
  }
  .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 var(--border);
    border-radius:12px;
    background:
      linear-gradient(0deg, rgba(10,18,32,.03) 1px, transparent 1px) 0 0/100% 4px,
      linear-gradient(180deg, #ffffff, #f7f9ff);
    box-shadow: 0 3px 0 rgba(12,18,38,.10), 0 12px 18px rgba(12,18,38,.10);
    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 var(--border);
    background: linear-gradient(180deg, #fff, #f6f8ff);
    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(12,18,38,.10), 0 10px 14px rgba(12,18,38,.08);
    transition: transform .05s ease, filter .12s ease, border-color .12s ease;
  }
  .mon:hover{filter:brightness(1.02);border-color:#bcc7ea}
  .mon:active{transform: translateY(2px)}

  .mon .mspr{
    width:var(--dex-spr-box);
    height:var(--dex-spr-box);
    border-radius:10px;
    border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #fff, #edf3ff);
    display:grid;
    place-items:center;
    overflow:hidden;
    flex:0 0 auto;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  }
  .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 var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    color:var(--muted);
    box-shadow: 0 2px 0 rgba(12,18,38,.08);
  }
  .mb.leg{border-color:rgba(47,91,255,.60);background:rgba(47,91,255,.10);color:#102a87}
  .mb.fem{border-color:rgba(24,183,154,.60);background:rgba(24,183,154,.10);color:#0b5f52}

  .tableWrap{
    overflow:auto;border-radius:12px;border:var(--px) solid var(--border);
    background: linear-gradient(180deg, #fff, #f7f9ff);
    box-shadow: 0 3px 0 rgba(12,18,38,.10), 0 10px 14px rgba(12,18,38,.08);
  }
  table{border-collapse:separate;border-spacing:0;width:100%;min-width:860px}
  th,td{padding:6px 8px;border-bottom:1px solid #eef2ff;border-right:1px solid #f2f5ff;font-size:11px}
  th{
    position:sticky;top:0;
    background: linear-gradient(180deg, #fff, #f3f6ff);
    z-index:2;text-align:left;
    box-shadow: 0 2px 0 rgba(12,18,38,.08);
  }
  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(24,183,154,.14); color:#0b5f52}
  .m05{background: rgba(24,183,154,.09); color:#0b5f52}
  .m1{ background: rgba(47,91,255,.06); color: var(--muted); }
  .m2{background: rgba(255,176,32,.14); color:#7a4c00}
  .m4{background: rgba(255,61,107,.14); color:#7c0f2b}
  .m025{background: rgba(24,183,154,.07); color:#0b5f52}

  .barFill{
    height:100%;
    width:0%;
    background: linear-gradient(90deg, rgba(47,91,255,.55), rgba(24,183,154,.55));
  }

  .note{
    margin-top:10px;
    font-size:10.75px;color:var(--muted);line-height:1.5;
    border:var(--px) dashed #cdd6f5;
    background: linear-gradient(180deg, #fff, #f7f9ff);
    padding:8px 9px;border-radius:12px;
    box-shadow: 0 2px 0 rgba(12,18,38,.08);
  }

  .toast{
    position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
    background: rgba(16,20,37,.92);
    border:var(--px) solid rgba(255,255,255,.22);
    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 var(--border);
    background: linear-gradient(180deg, #fff, #f7f9ff);
    border-radius:12px;
    padding:10px;
    box-shadow: 0 3px 0 rgba(12,18,38,.10), 0 10px 14px rgba(12,18,38,.08);
  }
  .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 var(--border);
    background: linear-gradient(180deg, #fff, #f3f6ff);
    overflow:hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  }
  .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 var(--border);
    background: linear-gradient(180deg, #fff, #f5f7ff);
    color: var(--text);
    box-shadow: 0 2px 0 rgba(12,18,38,.08);
    max-width: 100%;
  }
  /* ===========================
   MOBILE: FIT ANALYSIS TABLE TO SCREEN (NO SCROLL)
   =========================== */

@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;
  }

}


/* ================= 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 (Professional)
   ============================== */
.rankCard{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, var(--surface), var(--surface2));
  box-shadow: var(--shadow2);
  padding:12px;
}

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

.rankTitle{
  font-size:13px;
  letter-spacing:.2px;
}

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

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

.rankGrade{
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(47,91,255,.10);
}

.rankScore{
  font-weight:1000;
  font-size:18px;
  line-height:1;
}

.rankBar{
  margin-top:10px;
  height:10px;
  border-radius:999px;
  background:rgba(16,20,37,.08);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
}

.rankBarFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .25s ease;
}

.rankMetrics{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.rankMetric{
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.55);
  padding:8px 10px;
}

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

.mVal{
  font-size:13px;
  font-weight:900;
}

.rankNotes{
  margin-top:10px;
  display:grid;
  gap:8px;
}

.rankNote{
  font-size:12px;
  color:var(--text);
  background:rgba(255,255,255,.50);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 10px;
}

.rankNote b{
  margin-right:6px;
}

@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);
}