:root{
  /* Inspired by the club crest: monochrome grey/white base, single gold accent. */
  --bb-bg: #1b1b1b;
  --bb-card-bg: #262626;
  --bb-card-bg-alt: #2f2f2f;
  --bb-border: #3d3d3d;
  --bb-border-light: #4a4a4a;
  --bb-text: #f5f5f5;
  --bb-text-muted: #9a9a9a;
  --bb-accent: #ffdd00;
  --bb-accent-text: #1b1b1b;
  --bb-danger: #c0604f;
  --bb-danger-bg: #3a2a26;
  --bb-ok: #7fbf8f;
  --bb-ok-bg: #223028;

  /* Competition colours, per division/competition */
  --div-eliza: #28427c;
  --div-2a: #bc3532;
  --div-2b: #990000;
  --div-3a: #6aa84f;
  --div-3b: #274e13;
  --div-facup: #0a2f85;
  --div-ecl: #111111;
  --div-roddy: #ffdd00;
}

#app{color:var(--bb-text);}
.bb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:8px;border:1px solid var(--bb-accent);background:var(--bb-accent);color:var(--bb-accent-text);font-size:14px;font-weight:600;cursor:pointer;}
.bb-btn:hover{background:#e6c700;border-color:#e6c700;}
.bb-btn:disabled{opacity:0.5;cursor:not-allowed;}
.bb-btn.ghost{background:transparent;color:var(--bb-text);border:1px solid var(--bb-border-light);}
.bb-btn.ghost:hover{background:var(--bb-card-bg-alt);}
.bb-input,.bb-select{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:8px;border:1px solid var(--bb-border);background:#151515;font-size:14px;color:var(--bb-text);}
.bb-input:focus,.bb-select:focus{outline:none;border-color:var(--bb-accent);box-shadow:0 0 0 2px rgba(255,221,0,0.25);}
.bb-card{background:var(--bb-card-bg);border:1px solid var(--bb-border);border-radius:12px;padding:16px 18px;}
.bb-tab{padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;color:var(--bb-text-muted);}
.bb-tab.active{background:var(--bb-accent);color:var(--bb-accent-text);border-color:var(--bb-accent);font-weight:600;}
.bb-tab:hover:not(.active){background:var(--bb-card-bg-alt);color:var(--bb-text);}
/* Division/competition-specific active-tab colouring -- overrides the generic gold
   active state so each competition reads at a glance by its own colour. Text stays
   white on all of these since they're all dark enough for contrast. */
.bb-tab.active.div-eliza{background:var(--div-eliza);color:#fff;border-color:var(--div-eliza);}
.bb-tab.active.div-2a{background:var(--div-2a);color:#fff;border-color:var(--div-2a);}
.bb-tab.active.div-2b{background:var(--div-2b);color:#fff;border-color:var(--div-2b);}
.bb-tab.active.div-3a{background:var(--div-3a);color:#fff;border-color:var(--div-3a);}
.bb-tab.active.div-3b{background:var(--div-3b);color:#fff;border-color:var(--div-3b);}
.bb-tab.active.div-facup{background:var(--div-facup);color:#fff;border-color:var(--div-facup);}
.bb-tab.active.div-ecl{background:var(--div-ecl);color:#fff;border-color:var(--bb-border-light);}
.bb-tab.active.div-roddy{background:var(--div-roddy);color:#1b1b1b;border-color:var(--div-roddy);}
.bb-outcome{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:8px;border:1px solid var(--bb-border);cursor:pointer;margin-bottom:6px;}
.bb-outcome:hover{background:var(--bb-card-bg-alt);}
.bb-outcome.selected{background:#3a3316;border-color:var(--bb-accent);}
.bb-odds{font-weight:700;color:var(--bb-accent);min-width:44px;text-align:right;}
.bb-slip{position:fixed;bottom:0;left:0;right:0;background:#151515;border-top:1px solid var(--bb-border);padding:12px 16px;z-index:50;}
.bb-slip-inner{max-width:820px;margin:0 auto;}
table.bb-table{width:100%;border-collapse:collapse;font-size:13px;}
table.bb-table th{text-align:left;color:var(--bb-text-muted);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--bb-border);}
table.bb-table td{padding:8px;border-bottom:1px solid #333;vertical-align:top;color:var(--bb-text);}
.bb-pill{display:inline-block;font-size:11px;padding:2px 9px;border-radius:99px;font-weight:500;}
/* A thin coloured accent stripe, placed above a division/competition's market
   content so the section reads by colour even away from the tab bar itself. */
.bb-div-stripe{height:4px;border-radius:2px;margin-bottom:14px;}
.bb-div-stripe.div-eliza{background:var(--div-eliza);}
.bb-div-stripe.div-2a{background:var(--div-2a);}
.bb-div-stripe.div-2b{background:var(--div-2b);}
.bb-div-stripe.div-3a{background:var(--div-3a);}
.bb-div-stripe.div-3b{background:var(--div-3b);}
.bb-div-stripe.div-facup{background:var(--div-facup);}
.bb-div-stripe.div-ecl{background:var(--div-ecl);border:1px solid var(--bb-border-light);}
.bb-div-stripe.div-roddy{background:var(--div-roddy);}
.bb-div-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;margin-bottom:14px;}
.bb-div-banner-name{font-size:18px;font-weight:800;letter-spacing:0.02em;}
.bb-div-banner.div-eliza{background:var(--div-eliza);color:#fff;}
.bb-div-banner.div-2a{background:var(--div-2a);color:#fff;}
.bb-div-banner.div-2b{background:var(--div-2b);color:#fff;}
.bb-div-banner.div-3a{background:var(--div-3a);color:#fff;}
.bb-div-banner.div-3b{background:var(--div-3b);color:#fff;}
.bb-div-banner.div-facup{background:var(--div-facup);color:#fff;}
.bb-div-banner.div-ecl{background:var(--div-ecl);color:#fff;border:1px solid var(--bb-border-light);}
.bb-div-banner.div-roddy{background:var(--div-roddy);color:#1b1b1b;}

/* Side banners: allocated space for a future logo image, defaulting to plain
   "BILBBET" text until one's provided. Same layered-fallback pattern as the
   team/division/competition logos -- the image sits on top and only ever
   shows itself if it actually loads; the text underneath is otherwise what's
   visible. Only shown on wide viewports since there's no room for them once
   the main content column (max 820px) plus margins doesn't leave space. */
.bb-side-banner{
  display:none;
  position:fixed; top:0; bottom:0; width:140px;
  background:var(--bb-card-bg); border-left:1px solid var(--bb-border); border-right:1px solid var(--bb-border);
  align-items:center; justify-content:center;
}
.bb-side-banner-left{left:0;}
.bb-side-banner-right{right:0;}
.bb-side-banner-fallback{
  color:var(--bb-text-muted); font-family:system-ui,sans-serif; font-weight:700;
  letter-spacing:3px; font-size:15px; writing-mode:vertical-rl; text-orientation:mixed;
}
.bb-side-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
@media (min-width: 1150px){
  .bb-side-banner{display:flex;}
}

/* Thick grey outline framing the main betting-markets column, separating it
   visually from the side banner slots either side of it on wide screens. */
.bb-content-frame{
  border-left:6px solid var(--bb-border-light);
  border-right:6px solid var(--bb-border-light);
  min-height:100vh;
  box-sizing:border-box;
}
@media (min-width: 1150px){
  .bb-content-frame{margin-left:140px; margin-right:140px;}
}

/* Read Me link: draws the eye before login, then settles down once someone's
   logged in (no reason to keep flashing at a returning, familiar punter). */
@keyframes bb-readme-flash{
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.bb-readme-flash{
  animation: bb-readme-flash 1.4s ease-in-out infinite;
}