/* ─────────────────────────────────────────────────────────────────────────
   bunker-switcher.css — the ONE cross-store navigation shell.
   Served from https://bunkertcg.com/static/bunker-switcher.css, loaded by
   every storefront: BB (:5008), UB (/raw :5016), TT (/riftbound :5013).

   Adian, 2026-10-25 (round 2): "make it look nicer ... sleek and not like its
   just placed there." So: the bar is glass over the page rather than a second
   opaque slab, the sheet grows out of the bar instead of dropping on top of it,
   and the tiles are one quiet surface with a lantern edge on the live one.

   Namespaced .bk-* throughout. No bare element selectors — this file lands on
   top of three stylesheets written in isolation and a reset would detonate one.
   Tokens duplicated as --bk-* so the file is standalone on every origin.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --bk-night:#0b0b0e;
  --bk-wood:#15161b;
  --bk-cream:#f4f5f7;
  --bk-lantern:#f0b95a;
  --bk-lantern-low:#d49b3f;
  --bk-leaf:#5ed39b;
  --bk-line:rgba(244,245,247,.10);
  --bk-line-soft:rgba(244,245,247,.06);
  --bk-muted:rgba(244,245,247,.55);
  --bk-bar-h:60px;
  --bk-ease:cubic-bezier(.22,.61,.36,1);
}

/* ── The bar. Only injected on stores with no header of their own (UB).
   Glass, not a slab: the page scrolls under it and stays visible. ───────── */
.bk-bar{
  position:sticky;top:0;z-index:9000;
  display:flex;align-items:center;
  height:var(--bk-bar-h);padding:0 22px;
  background:color-mix(in srgb, var(--bk-night) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--bk-line);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box;
}
@supports not (backdrop-filter:blur(1px)){
  .bk-bar{background:var(--bk-night)}
}
.bk-bar *{box-sizing:border-box}

/* ── The crest. Same object in the bar and in the open sheet, so opening the
   menu feels like the header expanding rather than a dialog appearing. ──── */
.bk-crest{
  display:inline-flex;align-items:center;gap:11px;
  background:none;border:0;margin:0;padding:6px 10px 6px 6px;
  border-radius:11px;cursor:pointer;color:var(--bk-cream);
  font:inherit;line-height:1;
  transition:background .18s var(--bk-ease);
}
.bk-crest:hover,.bk-crest:focus-visible{background:rgba(244,245,247,.06)}
.bk-crest:focus-visible{outline:2px solid var(--bk-lantern);outline-offset:2px}

/* the mark sits in a soft ring so it reads as a crest, not a pasted favicon */
.bk-crest img{
  width:28px;height:28px;flex:0 0 auto;display:block;
  border-radius:8px;
  box-shadow:0 0 0 1px rgba(244,245,247,.12), 0 1px 6px rgba(0,0,0,.5);
}
.bk-crest-txt{display:flex;flex-direction:column;gap:3px;text-align:left}
.bk-crest-txt b{
  font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  line-height:1;
}
.bk-crest-txt span{
  font-size:10.5px;font-weight:500;color:var(--bk-muted);line-height:1;
  letter-spacing:.01em;
}
.bk-crest-caret{
  width:7px;height:7px;margin-left:3px;align-self:center;flex:0 0 auto;
  border-right:1.6px solid var(--bk-muted);
  border-bottom:1.6px solid var(--bk-muted);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s var(--bk-ease),border-color .18s var(--bk-ease);
}
.bk-crest:hover .bk-crest-caret{border-color:var(--bk-cream)}
.bk-crest[aria-expanded="true"] .bk-crest-caret{
  transform:rotate(225deg) translate(-2px,-2px);
  border-color:var(--bk-lantern);
}

/* ── The sheet ─────────────────────────────────────────────────────────── */
.bk-sheet{
  position:fixed;inset:0;z-index:9500;
  display:none;
  background:rgba(4,4,6,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  animation:bk-fade .22s var(--bk-ease);
}
.bk-sheet.bk-open{display:block}
.bk-sheet *{box-sizing:border-box}
@keyframes bk-fade{from{opacity:0}to{opacity:1}}

.bk-sheet-panel{
  position:relative;
  /* a hair of lantern warmth at the top edge, fading out — this is what stops
     it reading as a grey box dropped on the page */
  background:
    radial-gradient(120% 140% at 12% -20%, rgba(240,185,90,.09), transparent 58%),
    linear-gradient(180deg, #121318 0%, var(--bk-night) 100%);
  border-bottom:1px solid var(--bk-line);
  box-shadow:0 26px 60px -20px rgba(0,0,0,.85);
  padding:16px 22px 26px;
  max-height:100dvh;overflow-y:auto;
  animation:bk-grow .28s var(--bk-ease);
  transform-origin:top center;
}
/* the lantern hairline — the sheet is "lit" from the bar above it */
.bk-sheet-panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,185,90,.55) 18%,rgba(240,185,90,.14) 60%,transparent);
}
@keyframes bk-grow{
  from{opacity:0;transform:translateY(-12px) scaleY(.985)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .bk-sheet,.bk-sheet-panel{animation:none}
  .bk-crest-caret,.bk-store{transition:none}
}

.bk-sheet-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:calc(var(--bk-bar-h) - 16px);margin-bottom:14px;
}
.bk-sheet-top .bk-crest{cursor:default;padding-left:6px}
.bk-sheet-top .bk-crest:hover{background:none}
.bk-x{
  width:36px;height:36px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--bk-line);
  background:rgba(244,245,247,.03);color:var(--bk-muted);
  font-size:15px;line-height:1;cursor:pointer;
  transition:color .18s var(--bk-ease),border-color .18s var(--bk-ease),background .18s var(--bk-ease);
}
.bk-x:hover{color:var(--bk-cream);border-color:var(--bk-lantern-low);background:rgba(244,245,247,.07)}
.bk-x:focus-visible{outline:2px solid var(--bk-lantern);outline-offset:2px}

.bk-kicker{
  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,245,247,.38);
  margin:0 0 13px;padding:0;
}

/* ── Tiles ─────────────────────────────────────────────────────────────── */
.bk-stores{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
  margin:0;padding:0;list-style:none;
}
.bk-store{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(244,245,247,.045),rgba(244,245,247,.015));
  border:1px solid var(--bk-line-soft);
  color:var(--bk-cream);text-decoration:none;
  transition:border-color .2s var(--bk-ease),transform .2s var(--bk-ease),
             background .2s var(--bk-ease),box-shadow .2s var(--bk-ease);
}
/* the sweep that lights the tile from its own left edge on hover */
.bk-store::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 0% 50%, rgba(240,185,90,.13), transparent 62%);
  opacity:0;transition:opacity .2s var(--bk-ease);
}
.bk-store:hover{
  border-color:rgba(240,185,90,.42);
  transform:translateY(-3px);
  box-shadow:0 14px 28px -16px rgba(0,0,0,.9);
}
.bk-store:hover::after{opacity:1}
.bk-store:focus-visible{outline:2px solid var(--bk-lantern);outline-offset:2px}

/* the store you are on — a lantern rule down the left edge, nothing shouty */
.bk-store[aria-current="page"]{
  border-color:rgba(240,185,90,.34);
  background:linear-gradient(180deg,rgba(240,185,90,.09),rgba(240,185,90,.025));
}
.bk-store[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:2.5px;
  border-radius:0 3px 3px 0;background:var(--bk-lantern);
}
.bk-store[aria-current="page"] .bk-badge{
  background:var(--bk-lantern);color:#17120a;border-color:transparent;
  box-shadow:0 2px 10px -2px rgba(240,185,90,.55);
}

.bk-badge{
  width:40px;height:40px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:11px;
  background:rgba(244,245,247,.05);
  border:1px solid var(--bk-line-soft);
  font-size:12.5px;font-weight:800;letter-spacing:.05em;
  color:var(--bk-lantern);
  transition:background .2s var(--bk-ease),color .2s var(--bk-ease);
}
.bk-store-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.bk-store-name{
  font-size:14px;font-weight:700;line-height:1.15;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-store-sub{
  font-size:11.5px;color:var(--bk-muted);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-here{
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bk-lantern);margin-top:1px;
}

/* no storefront yet (NB, Naruto) — present, obviously not clickable */
.bk-store.bk-soon{opacity:.38;pointer-events:none;background:none}
.bk-store.bk-soon .bk-badge{color:var(--bk-muted)}

/* ── Bunker-wide links ─────────────────────────────────────────────────── */
.bk-links{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  margin-top:20px;padding-top:15px;
  border-top:1px solid var(--bk-line-soft);
}
.bk-links a{
  position:relative;
  font-size:12.5px;font-weight:600;color:var(--bk-muted);text-decoration:none;
  letter-spacing:.005em;
  transition:color .18s var(--bk-ease);
}
.bk-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;
  background:var(--bk-lantern);transition:right .22s var(--bk-ease);
}
.bk-links a:hover{color:var(--bk-cream)}
.bk-links a:hover::after{right:0}

@media (max-width:560px){
  :root{--bk-bar-h:54px}
  .bk-bar{padding:0 14px}
  .bk-sheet-panel{padding:12px 14px 20px}
  .bk-stores{grid-template-columns:1fr;gap:8px}
  .bk-store{padding:12px 14px}
  .bk-links{gap:6px 16px}
}

/* lock the page behind the open sheet */
.bk-lock{overflow:hidden!important}