/* ═══════════════════════════════════════════════════════════════════════
   Blood & Nectar — client shell
   ---------------------------------------------------------------------
   THE single source of truth for the web client's chrome: tokens, the
   League-style top bar, the sub-tab strip, panels, buttons, the loader.
   Extracted verbatim from the collection screen (the agreed target look)
   so /game/, /game/collection.html, /talents/ and /history/ cannot drift
   apart again.

   Pages link it as  <link rel="stylesheet" href="/game/shell.css?v=1">
   and keep only their OWN layout rules in a local <style>.
   Bump the ?v= when you edit this file — .css is not in battleApi's
   no-store list, so browsers will otherwise keep a stale copy.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Alegreya+Sans:wght@400;500;700;800;900&display=swap');
/* The top bar, shared verbatim with /game/. @import must stay up here:
   CSS ignores @import that appears after any rule. */
@import url('/game/shell-topbar.css?v=4');

:root{
  --bg:#010a13;--bg2:#030a12;--gold:#c8aa6e;--gold-lt:#f0e6d2;--gold-dk:#785a28;--gold-d2:#463714;
  --gold-dim:rgba(200,170,110,0.45);--teal:#0ac8b9;--green:#5fd478;--blue:#0397ab;--red:#e5544b;
  --text:#f0e6d2;--text-m:#a09b8c;--text-d:#5b5a56;
  --panel:#07111d;--panel2:#0c1a28;--border:rgba(200,170,110,.15);
  --fd:'Cinzel Decorative',serif;--fu:'Alegreya Sans',sans-serif;
  --c-common:#8c9aa8;--c-uncommon:#2dc98e;--c-rare:#0984e3;--c-epic:#9b59b6;--c-legendary:#c8aa6e;
  --win:#5fd478;--loss:#e5544b;--draw:#8c9aa8;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{background:var(--bg);color:var(--text);font-family:var(--fu);display:flex;flex-direction:column;}

/* ═══ LEAGUE-STYLE TOP BAR ═══ */
/* The bar lives in shell-topbar.css (imported at the top of this file) so
   /game/ can wear the identical bar without inheriting the global resets
   above. Edit the bar THERE, not here. */

/* ═══ SUB-TAB STRIP ═══ */
.sub-tabs{
  display:flex;align-items:stretch;height:44px;min-height:44px;
  background:rgba(3,10,18,.9);border-bottom:1px solid var(--border);padding:0 12px;
  overflow-x:auto;scrollbar-width:none;
}
.sub-tabs::-webkit-scrollbar{display:none;}
.sub-tab{
  display:flex;align-items:center;padding:0 18px;cursor:pointer;white-space:nowrap;
  font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--text-m);border-bottom:2px solid transparent;border-top:none;border-left:none;border-right:none;
  background:none;transition:color .15s,border-color .15s;
}
.sub-tab:hover{color:var(--text);}
.sub-tab.active{color:var(--gold);border-bottom-color:var(--gold);}
.sub-tabs .spacer{margin-left:auto;display:flex;align-items:center;gap:10px;padding-left:12px;}

/* ═══ BODY / PANELS ═══ */
/* --bn-friends-w is set on <html> by web/game/friends.js: the rail's width
   while it is open, 0px while collapsed, and unset entirely on pages that
   never mount it. Reserving the space here (rather than letting the fixed
   rail sit on top of the content) is what stops the last column of cards
   hiding behind it. */
.app-body{display:flex;flex:1;overflow:hidden;padding-right:var(--bn-friends-w,0px);transition:padding-right .22s ease;}
.view-panel{display:none;flex:1;overflow:hidden;}
.view-panel.active{display:flex;}
.scroll-pane{flex:1;overflow-y:auto;padding:24px;}
.scroll-pane::-webkit-scrollbar,.rail::-webkit-scrollbar{width:6px;}
.scroll-pane::-webkit-scrollbar-thumb,.rail::-webkit-scrollbar-thumb{background:rgba(200,170,110,.2);border-radius:3px;}

/* ═══ LEFT RAIL (filters) ═══ */
.rail{
  width:230px;min-width:230px;background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:20px 0;overflow-y:auto;
}
.rail-totals{display:flex;padding:0 18px 18px;gap:12px;border-bottom:1px solid var(--border);}
.rail-total{flex:1;text-align:center;}
.rail-total .num{font-family:var(--fd);font-size:26px;font-weight:900;color:var(--gold);line-height:1;}
.rail-total .lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-d);margin-top:6px;}
.rail-sec{padding:16px 18px 4px;}
.rail-sec-lbl{font-family:var(--fd);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(200,170,110,.35);margin-bottom:10px;}
.rail-search{
  width:100%;background:rgba(3,10,18,.8);border:1px solid rgba(200,170,110,.2);border-radius:2px;
  color:var(--text);font-family:var(--fu);font-size:13px;padding:8px 12px;outline:none;
}
.rail-search:focus{border-color:rgba(200,170,110,.5);}
.rail-search::placeholder{color:var(--text-d);}
.rail-pill{
  display:block;width:100%;text-align:left;padding:8px 12px;margin-bottom:5px;cursor:pointer;
  background:rgba(3,10,18,.5);border:1px solid var(--border);border-radius:3px;
  font-family:var(--fd);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-m);
  transition:all .15s;
}
.rail-pill:hover{border-color:rgba(200,170,110,.4);color:var(--text);}
.rail-pill.active{color:var(--gold);border-color:var(--gold);background:rgba(200,170,110,.08);}
.rail-pill.c-common.active{color:var(--c-common);border-color:var(--c-common);}
.rail-pill.c-uncommon.active{color:var(--c-uncommon);border-color:var(--c-uncommon);}
.rail-pill.c-rare.active{color:var(--c-rare);border-color:var(--c-rare);}
.rail-pill.c-epic.active{color:var(--c-epic);border-color:var(--c-epic);}
.rail-pill.c-legendary.active{color:var(--c-legendary);border-color:var(--c-legendary);}
.rail-pills-row{display:flex;flex-wrap:wrap;gap:5px;}
.rail-pills-row .rail-pill{width:auto;flex:1 1 44%;margin-bottom:0;text-align:center;padding:7px 6px;letter-spacing:1px;}

/* ═══ CONTENT TOOLBAR ═══ */
.pane-main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.pane-toolbar{
  display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--border);
  background:rgba(7,17,29,.7);flex-shrink:0;
}
.pane-toolbar .title{font-family:var(--fd);font-size:13px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;}
.pane-toolbar .count{margin-left:auto;font-size:12px;color:var(--text-d);letter-spacing:1px;}

/* ═══ SECTION HEADS / CARDS ═══ */
.sec-head{font-family:var(--fd);font-size:11px;letter-spacing:3px;color:rgba(200,170,110,.5);margin-bottom:10px;text-transform:uppercase;}
.panel-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:20px;}
.empty-note{padding:60px;text-align:center;color:var(--text-d);font-size:14px;letter-spacing:1px;}

/* ═══ BUTTONS ═══ */
.btn-primary,.btn-secondary{
  font-family:var(--fd);font-size:10px;letter-spacing:3px;text-transform:uppercase;
  padding:11px 20px;border-radius:2px;cursor:pointer;transition:all .2s;border:1px solid transparent;
}
.btn-primary{background:linear-gradient(135deg,var(--gold-dk),var(--gold-d2));border-color:var(--gold-dk);color:var(--gold-lt);}
/* :not(:disabled) — a dimmed button that still lights up under the cursor reads
   as clickable, which is the one thing it is not. */
.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--gold),var(--gold-dk));}
.btn-secondary{background:transparent;border-color:rgba(200,170,110,.25);color:rgba(200,170,110,.6);}
.btn-secondary:hover:not(:disabled){border-color:var(--gold);color:var(--gold);}
.btn-primary:disabled,.btn-secondary:disabled{opacity:.4;cursor:not-allowed;}

/* ═══ SELECTS / INPUTS ═══ */
.bn-select,.bn-input{
  font-family:var(--fu);font-size:13px;background:rgba(3,10,18,.8);color:var(--text);
  border:1px solid rgba(200,170,110,.2);border-radius:2px;padding:9px 12px;outline:none;min-width:220px;
}
.bn-select:focus,.bn-input:focus{border-color:rgba(200,170,110,.5);}

/* ═══ MODAL ═══ */
.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.78);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px;}
.modal-overlay.open{display:flex;}
.modal{
  background:linear-gradient(165deg,#0b1826,#050b12);border:1.5px solid rgba(200,170,110,.28);border-radius:8px;
  width:560px;max-width:95vw;max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;
}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid rgba(200,170,110,.12);}
.modal-title{font-family:var(--fd);font-size:15px;letter-spacing:3px;color:var(--gold);}
.modal-close{background:none;border:none;color:var(--text-d);cursor:pointer;font-size:20px;transition:color .2s;}
.modal-close:hover{color:var(--gold);}
.modal-body{display:flex;gap:24px;padding:24px;}
.modal-actions{display:flex;gap:10px;padding:18px 24px;border-top:1px solid rgba(200,170,110,.12);}

/* ═══ TOAST ═══ */
.bn-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);z-index:400;max-width:540px;
  background:linear-gradient(165deg,#0b1826,#050b12);border:1px solid var(--gold-dk);border-radius:4px;
  padding:12px 20px;color:var(--text);font-size:13px;line-height:1.6;text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.bn-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.bn-toast.err{border-color:var(--red);}

/* ═══ LOADER — shown ONCE per session, see shell.js ═══ */
.loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:var(--bg);z-index:300;}
.loading.hidden{display:none;}
.loading .spin{width:34px;height:34px;border:3px solid rgba(200,170,110,.2);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite;}
.loading .txt{font-family:var(--fd);font-size:11px;letter-spacing:4px;color:var(--gold-dim);text-transform:uppercase;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ═══ SIGN-IN / GATE CARD ═══ */
.gate{position:fixed;inset:0;background:rgba(1,10,19,.97);display:none;align-items:center;justify-content:center;z-index:250;padding:24px;}
.gate.open{display:flex;}
.gate .gate-card{max-width:460px;text-align:center;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:36px 32px;}
.gate .gate-title{font-family:var(--fd);font-size:16px;letter-spacing:3px;color:var(--gold);margin-bottom:16px;text-transform:uppercase;}
.gate p{color:var(--text-m);font-size:13px;line-height:1.7;}
.gate p + p{margin-top:12px;}
.gate b{color:var(--gold);}
