/* Sanctum Gold — mobile category bar + bottom sheet (v1.9.131, assets/catbar.js).
 * Loaded on game category pages only. Theme tokens, so light and dark both work. */

.sg-catbar{display:none}
@media(max-width:860px){
  .sg-header.sg-catbar-on .sg-search-mobile{display:none}
  .sg-header.sg-catbar-on .sg-catbar{display:block}
  .sg-catbar{box-sizing:border-box;border-bottom:1px solid var(--border);background:var(--header-bg)}
  .sg-catbar-in{display:flex;align-items:center;gap:8px;height:100%}
  .sg-catbar-search{
    flex:none;width:42px;height:42px;border:none;border-radius:10px;cursor:pointer;
    background:var(--btn-bg);color:var(--btn-text); /* v1.9.156: same as the buttons */
    display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
  }
  .sg-catbar-search svg{width:19px;height:19px}
  .sg-catbar-tab{
    flex:1;min-width:0;height:42px;position:relative;display:flex;flex-direction:column;justify-content:center;
    padding:3px 34px 3px 11px;border:1.5px solid var(--border-gold);border-radius:10px;
    background:rgba(249,115,22,.07);color:var(--text);text-align:left;font-family:var(--font-body);
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .sg-catbar-top{display:block;font-size:11.5px;line-height:1.25;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sg-catbar-game{color:var(--gold);font-weight:700}
  .sg-catbar-dot{margin:0 4px;color:var(--muted2)}
  .sg-catbar-srv{font-weight:600}
  .sg-catbar-srv::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:4px;vertical-align:1px}
  .sg-catbar-srv.is-none{color:var(--red);font-weight:700}
  /* v1.9.158: on the dark header bar the red needs to be brighter (was 3.3:1) */
  .sg-header .sg-catbar-srv.is-none{color:#ff7a7f}
  .sg-catbar-srv.is-none::before{background:var(--red)}
  /* "<parent> › <category>": the parent gives way first, the category stays readable */
  .sg-catbar-cat{display:flex;align-items:baseline;min-width:0;font-size:15px;line-height:1.3;font-weight:700;white-space:nowrap}
  .sg-catbar-par{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-weight:600}
  .sg-catbar-par:empty{display:none}
  .sg-catbar-gt{flex:none;margin:0 5px;color:var(--gold)}
  .sg-catbar-leaf{flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .sg-catbar-chev{position:absolute;right:13px;top:50%;width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:translateY(-70%) rotate(45deg)}
}

/* ---------- bottom sheet ---------- */
/* lock the page root only: overflow on <body> would make it a scroll box and unstick the header */
html.sg-sheet-lock{overflow:hidden}
.sg-sheet[hidden]{display:none}
.sg-sheet{position:fixed;inset:0;z-index:300}
.sg-sheet-shade{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.sg-sheet-panel{
  position:absolute;left:0;right:0;bottom:0;max-height:80vh;display:flex;flex-direction:column;
  background:var(--card);color:var(--text);border-radius:18px 18px 0 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.25);font-family:var(--font-body);
  padding:10px 0 calc(14px + env(safe-area-inset-bottom));
  animation:sg-sheet-up .2s ease-out;
}
@keyframes sg-sheet-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sg-sheet-panel{animation:none}}
/* v1.9.135 (owner: 65%): the category list keeps one height (65% of the screen) so its top edge
 * stays put while moving between levels; longer lists scroll inside. The server list still fits
 * its rows. */
.sg-sheet[data-kind="cat"] .sg-sheet-panel{height:65vh;height:65dvh;max-height:none}
.sg-sheet-grab{width:44px;height:5px;border-radius:9px;background:var(--border);margin:0 auto 8px;flex:none}
.sg-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;flex:none}
.sg-sheet-head h3{margin:0;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em}
.sg-sheet-x{flex:none;width:36px;height:36px;border:1px solid var(--border);border-radius:8px;background:none;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer}
.sg-sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 0;overscroll-behavior:contain}
.sg-sheet-where{margin:4px 0 10px;color:var(--muted);font-size:.86rem;line-height:1.45}
.sg-sheet-where b{color:var(--text)}
.sg-sheet-srvlink{border:none;background:none;padding:0;font:inherit;font-weight:700;color:var(--gold);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sg-sheet-srvlink.is-none{color:var(--red)}
.sg-sheet-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.sg-sheet-crumb{border:1px solid var(--border-gold);background:rgba(249,115,22,.07);color:var(--gold);border-radius:999px;padding:5px 11px;font:600 .82rem var(--font-body);cursor:pointer}
.sg-sheet-crumb.is-cur{background:var(--text);border-color:var(--text);color:var(--card)}
.sg-sheet-sep{color:var(--muted2);font-size:.8rem}
.sg-sheet-list{display:flex;flex-direction:column}
.sg-sheet-row{
  display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:10px 12px;margin:0;
  border:1.5px solid transparent;border-bottom-color:var(--border);border-radius:10px;
  background:none;color:var(--text);font:400 .97rem var(--font-body);text-align:left;cursor:pointer;
}
.sg-sheet-row:hover{background:var(--surface2)}
.sg-sheet-name{flex:1;min-width:0}
.sg-sheet-more{color:var(--gold);font-weight:700;font-size:1.1rem;line-height:1}
.sg-sheet-row.is-all{font-weight:700}
.sg-sheet-row.is-back{font-weight:700} /* v1.9.135: "‹ <group>" = back one level */
.sg-sheet-back{flex:none;color:var(--gold);font-weight:700;font-size:1.35rem;line-height:1;margin-top:-2px}
.sg-sheet-row.is-path{font-weight:700;color:var(--gold)}
.sg-sheet-row.is-empty .sg-sheet-name{opacity:.55}
.sg-sheet-row.is-active{background:rgba(249,115,22,.1);border-color:var(--gold-light);color:var(--gold);font-weight:700}
.sg-sheet-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green)}
.sg-sheet-switch{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 4px;padding:12px;border-radius:10px;background:var(--surface2);font-weight:600;font-size:.95rem;cursor:pointer}
.sg-sheet-switch input{position:absolute;opacity:0;width:1px;height:1px}
.sg-sheet-switch-track{flex:none;position:relative;width:42px;height:24px;border-radius:999px;background:var(--border);transition:background .15s}
.sg-sheet-switch-track::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.sg-sheet-switch input:checked + .sg-sheet-switch-track{background:var(--gold-light)}
.sg-sheet-switch input:checked + .sg-sheet-switch-track::after{transform:translateX(18px)}
.sg-sheet-switch input:focus-visible + .sg-sheet-switch-track{outline:2px solid var(--gold-light);outline-offset:2px}

/* ---------- v1.9.132: picked category as a tile (phones, owner pick "5") ----------
 * ≤899px = the category boxes' own phone width. The tile replaces the collapsed box; with no
 * category picked the full box shows as before. Phones have no out-of-stock switch. */
.sg-cattile{display:none}
@media(max-width:899px){
  .sg-cattile{
    display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:12px 16px 12px 12px;
    border:1px solid var(--border);border-radius:14px;background:var(--surface);
    box-shadow:0 2px 8px rgba(0,0,0,.07);color:var(--text);text-align:left;font-family:var(--font-body);
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .sg-cattile[hidden]{display:none}
  .sg-cattile:active{background:var(--surface2)}
  .sg-cattile-ic{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(249,115,22,.12);color:var(--gold);display:grid;place-items:center}
  .sg-cattile-ic svg{width:22px;height:22px}
  .sg-cattile-t{flex:1;min-width:0}
  .sg-cattile-path{display:block;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sg-cattile-path:empty{display:none}
  .sg-cattile-name{display:block;font-size:1.05rem;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sg-cattile-go{flex:none;width:9px;height:9px;border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(-45deg);margin-right:4px}
  /* D2R: a picked category shows only the tile (the box, list and switch stay in the page) */
  .sg-d2r-side.has-selection{border:0!important;padding:0!important;background:none!important;box-shadow:none!important}
  .sg-d2r-side.has-selection > :not(.sg-cattile){display:none!important}
  /* D4/POE2 */
  /* no out-of-stock switch on phones */
  .sg-d2r-oos-form{display:none!important}
}

/* ---------- v1.9.133 (owner pick "A"): server + category in one card (phones) ----------
 * When a server is chosen AND a category is picked, the server box ("Server ● name Change")
 * and the category tile draw as one card: server row on top, category row below. Same controls
 * and taps as before (Change opens the servers in place, the tile opens the category list).
 * Otherwise (no server yet, a game's main page) both look as before. */
@media(max-width:899px){
  [data-sg-d2r]:has(.sg-d2r-side.has-selection) .sg-d2r-stack.sg-srv.is-chosen,
  .sg-market:has(.sg-market-side.sg-has-pick) .sg-realmbar.sg-srv.is-chosen{
    margin-bottom:0!important;padding:0!important;border:1px solid var(--border);border-bottom:0;
    border-radius:14px 14px 0 0;background:var(--surface);overflow:hidden;
  }
  [data-sg-d2r]:has(.sg-d2r-side.has-selection) .sg-d2r-stack.is-chosen > .sg-srv-row,
  .sg-market:has(.sg-market-side.sg-has-pick) .sg-realmbar.is-chosen > .sg-srv-row{
    margin:0;border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;background:none;padding:11px 16px;gap:10px;
  }
  [data-sg-d2r]:has(.sg-d2r-side.has-selection) .sg-d2r-stack.is-chosen .sg-srv-lbl,
  .sg-market:has(.sg-market-side.sg-has-pick) .sg-realmbar.is-chosen .sg-srv-lbl{
    position:static;width:auto;height:auto;clip:auto;overflow:visible;
    font-family:var(--font-body);font-weight:500;letter-spacing:0;text-transform:none;font-size:.8rem;color:var(--muted);min-width:46px;
  }
  [data-sg-d2r]:has(.sg-d2r-side.has-selection) .sg-d2r-stack.is-chosen .sg-srv-chip,
  .sg-market:has(.sg-market-side.sg-has-pick) .sg-realmbar.is-chosen .sg-srv-chip{
    flex:1;background:none;border:0;padding:0;font-size:.95rem;
  }
  [data-sg-d2r]:has(.sg-d2r-side.has-selection) .sg-d2r-stack.is-chosen .sg-srv-change,
  .sg-market:has(.sg-market-side.sg-has-pick) .sg-realmbar.is-chosen .sg-srv-change{
    border:0;padding:4px 0 4px 8px;font-size:.92rem;
  }
  /* the servers, when Change opens them, sit inside the card */
  [data-sg-d2r]:has(.sg-d2r-side.has-selection) .sg-d2r-stack.is-chosen.is-open .sg-srv-full,
  .sg-market:has(.sg-market-side.sg-has-pick) .sg-realmbar.is-chosen.is-open .sg-srv-full{
    padding:12px;border-bottom:1px solid var(--border);margin:0;
  }
  /* the category row: the tile, joined under the server row */
  [data-sg-d2r]:has(.sg-d2r-stack.is-chosen) .sg-d2r-side.has-selection .sg-cattile,
  .sg-market:has(.sg-realmbar.is-chosen) .sg-market-side.sg-has-pick .sg-cattile{
    border-top:0;border-radius:0 0 14px 14px;box-shadow:0 2px 8px rgba(0,0,0,.07);
  }
  /* D2R: keep the page's 18px gutter on the server part and close the gap above the tile */
  [data-sg-d2r]:has(.sg-d2r-side.has-selection) .sg-d2r-stack.sg-srv.is-chosen{margin:0 18px!important}
  /* v1.9.134: inside the D2R main page's marketplace (a category picked there loads in place) the
   * stack has no gutter of its own — the card spans the full width like the tile */
  #sg-marketplace [data-sg-d2r]:has(.sg-d2r-side.has-selection) .sg-d2r-stack.sg-srv.is-chosen{margin:0!important}
  [data-sg-d2r]:has(.sg-d2r-side.has-selection):has(.sg-d2r-stack.is-chosen) .sg-d2r-layout{margin-top:0}
  .sg-market:has(.sg-market-side.sg-has-pick):has(.sg-realmbar.is-chosen) .sg-market-tools{margin-bottom:0}
  .sg-market:has(.sg-market-side.sg-has-pick):has(.sg-realmbar.is-chosen) .sg-market-body{row-gap:20px}
  .sg-market:has(.sg-market-side.sg-has-pick):has(.sg-realmbar.is-chosen) .sg-market-side{margin-top:0}
}

/* v1.9.136 (owner): no "N products" line above the D4/POE2 product grid on phones — matches D2R
 * and the category list (no counts on mobile). Desktop keeps it. */
@media(max-width:899px){ .sg-market-count{display:none} }