/* ui.css — one button system for every bonusplay.tv page (2026-10-23).
   dchan: "update bonusplay.tv to have the same ux-design through the entire
   website". Each page still carries its own inline <style>; this file is
   linked AFTER it on every page, so the rules here win and every button reads
   the same. Roles (semantic set, 2026-10-23):
     primary   .btn.primary, nav .cta      gold fill, dark text — the one main action
     secondary everything else             grey fill, line border, white text
     claim     .claim-pill                 Discord blurple #5865F2 fill (bonus-codes.html; green until 2026-10-25, briefly site blue)
     danger    .acc-btn.danger             red outline (account.html)
   Shape: 8px corners, 44px minimum height (touch target), 14px/700 text.
   Brand buttons (Google white, Discord blurple) keep their own colours. */

.btn, .acc-btn, .load-more, .copy, .alerts-ctl button,
.state .btn, .fam-empty .btn, .emailin button, nav .cta, .drawer .cta {
  border-radius: 8px;
  min-height: 44px;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color .12s, border-color .12s, color .12s;
}
.acc-btn, .load-more, .copy, .alerts-ctl button, .state .btn, .fam-empty .btn, .emailin button {
  font-family: inherit;
  font-size: 14px;
}

/* secondary: the default for any button that is not the page's main action */
.btn:not(.primary):not(.google):not(.discord), .acc-btn:not(.primary):not(.danger),
.load-more, .copy, .alerts-ctl button, .state .btn, .fam-empty .btn {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
}
@media (hover: hover) {
  .btn:not(.primary):not(.google):not(.discord):hover, .acc-btn:not(.primary):not(.danger):hover,
  .load-more:hover, .copy:hover, .alerts-ctl button:hover, .state .btn:hover, .fam-empty .btn:hover {
    border-color: var(--ink-faint);
    color: var(--ink);
    text-decoration: none;
  }
}

/* primary: gold */
.btn.primary, .acc-btn.primary, .emailin button, nav .cta, .drawer .cta {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg);
}
@media (hover: hover) {
  .btn.primary:hover, .acc-btn.primary:hover, .emailin button:hover, nav .cta:hover, .drawer .cta:hover {
    filter: none;
    background-image: linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14));
    text-decoration: none;
  }
}

/* one focus ring everywhere: 2px gold, 2px gap, keyboard only */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* page titles: the same size and weight on every content page */
main .sec-head h1, main > h1, .acc-in h1 {
  font-size: clamp(32px, 4vw, 42px);
  line-height: 1.05;
}

/* the same size on every page (page rules were 12.5–15px; body raises specificity over them) */
body nav .cta { font-size: 13px; }
body .btn { font-size: 15px; }
body .copy { border-radius: 8px; }
/* the account sign-in hero keeps its larger title (dchan, 2026-10-22: same size as degenhud.com/account) */
body .offer .copy { border-radius: 8px; }
/* .btn.small (home page sections) stays the compact 13px size on purpose */
/* the same breathing room under the nav on every page whose main opens with its title block */
body main > .sec-head { padding-top: 40px; }

/* ── colour roles, enforced (2026-10-23, dchan: "the button colors are still mix matched") ──
   success = sends you to play / claim on Stake: green, white text (Play Now, Join, Claim). */
body .join-btn:not([aria-disabled="true"]) {
  background: var(--green);
  border: 1px solid var(--green);
  color: #fff;
  border-radius: 8px;
  min-height: 44px;
  filter: none;
}
@media (hover: hover) {
  body .join-btn:not([aria-disabled="true"]):hover {
    filter: none;
    background-image: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12));
    text-decoration: none;
  }
}
/* gold is the ONE main action: section links on the home page are secondary */
body .btn.primary.small {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
}
@media (hover: hover) { body .btn.primary.small:hover { background-image: none; border-color: var(--ink-faint); } }
/* one secondary look: grey fill + line border (the signed-out claim pill was see-through) */
body .claim-pill.lock { background: var(--surface-2); border-color: var(--line); color: var(--ink); }

/* ── PRIMARY IS BLUE (2026-10-23, dchan: "Primary, have it blue") ──
   Buttons: #2563eb with white text (5.2:1). Links and the focus ring use the
   lighter #60a5fa, which reads on the near-black page (darker blue does not).
   Gold #fcc803 stays the BRAND colour: logo, headings, eyebrows, section bars. */
:root { --primary: #2563eb; --primary-hi: #1d4ed8; --link: #60a5fa; }
/* Primary buttons are Discord's "Blurple" (2026-10-25, dchan: "update the other blue
   buttons to the same color" as Claim): #5865F2, hover #4752C4, white text (~4.3:1,
   bold labels; Discord's own buttons are the same). Links keep #60a5fa. */
html:root { --primary: #5865f2; --primary-hi: #4752c4; }
body .btn.primary, body .acc-btn.primary, body .emailin button, body nav .cta, body .drawer .cta,
body button.primary, body .send, body .frame .empty .cta,
body .seg button[aria-pressed=true], body .filters button[aria-pressed="true"] {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
}
@media (hover: hover) {
  body .btn.primary:hover, body .acc-btn.primary:hover, body .emailin button:hover, body nav .cta:hover,
  body .drawer .cta:hover, body button.primary:hover, body .send:hover, body .frame .empty .cta:hover {
    background: var(--primary-hi);
    background-image: none;
    border-color: var(--primary-hi);
    color: #fff;
    filter: none;
  }
}
/* links in text read blue; the focus ring follows */
body main p a:not([class]), body main li a:not([class]), body .fine a, body .sec-sub a:not([class]), body .acc-err a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--link); }

/* ── TEXT IS NEVER GOLD (2026-10-23, dchan: "instead of yellow font, can we have
   typical website default font color for text") ── Body text, headings, labels,
   counters and codes read in the normal text colour; gold stays only on the
   logo and small decorative marks (dots, bars), and links are blue. */
body .tile-card .name, body .codes-cta .codes-count, body .codes-link b,
body .offer h2, body .offer h2 a, body .offer .display a, body .nopurchase, body .nopurchase span, body .offer .code, body span.code,
body .ct-card h2, body .acc-hero .eyebrow, body .eyebrow,
body .bonus-card .v.code, body .bonus-card .v.code span, body .bc-modal .ticket .v,
body .sec-head .eyebrow, body .fam-head h2 { color: var(--ink); }
body .bonus-card .v.code { font-weight: 600; }
/* higher-specificity page rules (.offer .nopurchase, the Watch sidebar counter) */
body .offer .nopurchase, body .offer .nopurchase span, body .side .codes a.codes-link b, body .side .codes b { color: var(--ink); }

/* ── top menu: two-row strip (2026-10-23, dchan: "update top menu using strip") ──
   Row 1 = brand + page links + account; row 2 = the category tabs, replacing the
   Category dropdown. Tabs system (ux-design): one row that never wraps — it
   scrolls sideways with a fade on the cut edge — and the focus ring is not the
   active colour. It stays visible on mobile, so the drawer no longer repeats it.
   The active tab is set by auth.js from the section in view (home page only).
   Off for now (dchan 2026-10-23: "remove the 2nd row menu for now") — the pages
   are back on the Category dropdown; these rules only apply when a .cats row exists. */
html:has(nav .cats) { scroll-padding-top: 116px; }
nav .cats { border-top: 1px solid var(--line); }
nav .cats-row {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none;
}
nav .cats-row::-webkit-scrollbar { display: none; }
nav .cats-row a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13.5px; color: var(--ink-dim); white-space: nowrap;
  text-decoration: underline 2px transparent; text-underline-offset: 6px; transition: color .12s, text-decoration-color .12s;
}
/* the underline sits right under the label (dchan 2026-10-23), not on the strip's bottom edge */
nav .cats-row a[aria-current="true"] { color: var(--ink); text-decoration-color: var(--accent); }
nav .cats-row a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 4px; }
@media (hover: hover) { nav .cats-row a:hover { color: var(--accent); } }
nav .cats-row.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
nav .cats-row.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
nav .cats-row.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
@media (max-width: 720px) {
  nav .cats-row { padding: 0 16px; gap: 20px; }
}

/* ── professional pass (ux-audit 2026-10-23) ──
   One content width on every page: the home page was 1240px and the codes
   page 1120px, so the logo and menu jumped sideways between pages. */
body .wrap { max-width: 1200px; }
/* Footer links: the 12px touch padding was inline-block, which pushed the
   commas away ("Disclaimer ,") and broke the line height. Inline padding keeps
   the tap area without moving the text. */
body .fine a { display: inline; padding: 10px 0; }
/* Home page before the first video: bonus codes lead, empty video rows hide. */
body.novideo header, body.novideo #rows { display: none; }
body.novideo #codes { padding-top: 48px; padding-bottom: 48px; }
body.novideo #codes .codes-cta .btn.primary.small { background: var(--primary); border-color: var(--primary); color: #fff; font-size: 15px; padding: 0 24px; }
@media (hover: hover) { body.novideo #codes .codes-cta .btn.primary.small:hover { background: var(--primary-hi); border-color: var(--primary-hi); } }
body .codes-lede { margin: -4px 0 20px; color: var(--ink-dim); font-size: 15px; text-align: center; }

/* ── Top bar as tabs, like degenhud.com (2026-10-23, dchan: "ux-restyle it
   similar to degenhud.com"). Links run the full bar height so the current
   page's 2px underline sits on the bar's bottom line; 600 weight with a
   little tracking; muted idle, white on hover and when current. Gold, the
   brand colour, is the underline (degenhud uses its own brand colour there).
   Desktop only: phones keep the burger menu. */
@media (min-width: 800px) {
  body nav .links { align-self: stretch; gap: 0; }
  body nav .links a {
    height: 100%; min-height: 0; box-sizing: border-box; padding: 0 14px;
    font-size: 14px; font-weight: 600; letter-spacing: .04em;
    color: var(--ink-dim); border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s, border-color .15s; text-decoration: none;
  }
  body nav .links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
  body nav .links a:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 2px; }
  body nav .links + * , body nav .links ~ .cta { margin-left: 10px; }
}
@media (min-width: 800px) and (hover: hover) {
  body nav .links a:hover { color: var(--ink); }
}

/* ── Site footer (2026-10-23, dchan: "update footer with new details") ──
   Four columns on desktop: brand line, Site, Legal, Help; then the
   independence disclaimer and © on a base row. Two columns on tablets, one
   on phones. Left-aligned, unlike the old centred block. Links are 44px
   tall for touch, with no gap before commas (no inline lists now). */
body footer.site-foot { text-align: left; padding: 56px 0 32px; border-top: 1px solid var(--line); }
body .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
body .foot-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; letter-spacing: .02em; text-decoration: none; }
body .foot-logo img { width: 28px; height: 28px; object-fit: contain; }
body .foot-brand p { margin: 12px 0 0; color: var(--ink-dim); font-size: 14px; line-height: 1.6; max-width: 30em; }
body .foot-col { display: flex; flex-direction: column; align-items: flex-start; }
body .foot-col h2 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
body .foot-col a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink-dim); font-size: 14px; text-decoration: none; }
body .foot-note { margin: 6px 0 0; color: var(--ink-faint); font-size: 12.5px; line-height: 1.5; }
body .foot-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; }
body .foot-base p { margin: 0; color: var(--ink-faint); font-size: 12.5px; line-height: 1.6; max-width: 62em; }
body .foot-copy { flex: none; white-space: nowrap; }
@media (hover: hover) { body .foot-col a:hover, body .foot-logo:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
body .foot-col a:focus-visible, body .foot-logo:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px; }
@media (max-width: 880px) { body .foot-grid { grid-template-columns: 1fr 1fr; } body .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) {
  body .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  body .foot-col a { min-height: 44px; }
  body .foot-base { flex-direction: column; gap: 12px; }
}
/* The Site / Legal columns are <nav>s: undo the top bar's nav rules (sticky, blur, bottom border). */
body footer nav.foot-col { position: static; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: auto; height: auto; }

/* ── mobile bottom navigation (2026-10-24, dchan: "On mobile, can we have a bottom
   navigation bar instead") ──
   Under 800px the burger and the top Sign In give way to a five-tab bar: Home,
   Codes, Join, Account, More (More opens the existing drawer). ux-design
   Navigation patterns: 3–5 primary destinations, visible, in thumb reach.
   Fixed under every overlay (drawer 100, sheets 120). Active tab = gold icon
   and label plus aria-current, so the state is never colour alone. */
.tabbar { display: none; }
@media (max-width: 799px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; padding: 6px 2px 4px; background: none; border: 0; border-radius: 0;
    color: var(--ink-dim); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar .more svg { fill: currentColor; stroke-width: 1.2; }
  .tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar [aria-current="page"], .tabbar .more[aria-expanded="true"] { color: var(--accent); }
  .tabbar a:active, .tabbar button:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .tabbar a:focus-visible, .tabbar button:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 8px; }
  @media (hover: hover) { .tabbar a:hover, .tabbar button:hover { color: var(--ink); text-decoration: none; } }
  /* the page scrolls clear of the bar */
  body:has(.tabbar) { padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px)); }
  /* the bar replaces these on phones (auth.js injects the Sign In / account pill) */
  body:has(.tabbar) nav .burger, body:has(.tabbar) nav .cta,
  body:has(.tabbar) nav .acct-wrap, body:has(.tabbar) nav .acct-ph { display: none; }
}

/* Phones: the footer shows on the home page only (2026-10-24, dchan: "remove the
   footer from all pages except from home when using mobile view"). The tab bar's
   More menu carries the same links. index.html's body has class="home". */
@media (max-width: 799px) {
  body:has(.tabbar):not(.home) > footer.site-foot { display: none; }
}

/* Menu drawer (2026-10-24, dchan: "In more, can we remove the boarded and just have
   the x"): opening focuses the panel, not the ✕, so no focus ring is drawn on open.
   Tab still reaches the ✕ with its normal ring for keyboard users. */
.drawer:focus { outline: none; }

/* "Play Now" in Title Case, not PLAY NOW (2026-10-24, dchan: "Update button label to
   only uppercase first letter"). The pages' own .join-btn rules set uppercase. */
body .join-btn { text-transform: none; letter-spacing: .02em; }

/* Home Screen app: the bar is the same size as in the browser (the bigger size asked
   for 2026-10-24 was reverted the same day, dchan). viewport-fit=cover on the tab-bar pages makes
   env(safe-area-inset-*) real, so the bar clears the home indicator and landscape
   content clears the notch. */
body:has(.tabbar) { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* ── tab bar, social-app style (2026-10-24, dchan: "bottom navigation bar similar to
   Facebook, instagram, Reddit") ──
   Active tab = FILLED icon in white plus a bold label (outline when inactive), not a
   colour change. Account shows the member's photo. A red dot on Codes marks a drop
   that landed since Codes was last opened. The bar slides away while scrolling down
   and returns on scroll up. Icons bounce on tap. */
@media (max-width: 799px) {
  .tabbar { transition: transform .2s ease-out; }
  .tabbar.tb-hide { transform: translateY(100%); transition-timing-function: ease-in; transition-duration: .15s; }
  .tabbar [aria-current="page"] { color: var(--ink); }
  .tabbar [aria-current="page"] span { font-weight: 700; }
  .tabbar [aria-current="page"] svg { fill: currentColor; }
  .tabbar [aria-current="page"] svg path + path { stroke: var(--bg); }   /* the ticket's perforation stays visible */
  .tabbar .more[aria-expanded="true"] { color: var(--ink); }
  .tabbar .ic { position: relative; display: block; line-height: 0; overflow: visible; max-width: none; }
  .tabbar .tb-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--line); }
  .tabbar span.tb-av { display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
  .tabbar [aria-current="page"] .tb-av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
  .tabbar .tb-dot { position: absolute; top: -2px; right: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg); }
  .tabbar .bounce { animation: tb-bounce .22s ease-out; }
  @keyframes tb-bounce { 0% { transform: scale(1); } 40% { transform: scale(.82); } 75% { transform: scale(1.08); } 100% { transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .tabbar, .tabbar.tb-hide { transition: none; }
  .tabbar .bounce { animation: none; }
}

/* ── menu: burger top left, drawer from the left (2026-10-24, dchan: "remove more and
   have it as a hamburger icon on the top left, slides to the right and close when
   tapping on main page again") ──
   The tab bar drops More (4 tabs). On phones the burger comes back, first in the top
   bar and borderless; the drawer enters from the left edge. Tapping the dimmed page
   closes it (each page's drawer handler already does). */
@media (max-width: 799px) {
  .tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body:has(.tabbar) nav .burger { display: flex; order: -1; margin: 0 0 0 -10px; border: 0; background: none; }
  body:has(.tabbar) nav .wrap { gap: 8px; }
}
body .drawer-overlay .drawer { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); }
/* the ✕ sits on the left, near where the burger was tapped */
body .drawer-overlay .drawer .close { align-self: flex-start; margin-left: -12px; }
.drawer-overlay:not([hidden]) { animation: dr-fade .2s ease-out; }
.drawer-overlay:not([hidden]) .drawer { animation: dr-in .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes dr-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes dr-fade { from { background-color: rgba(0, 0, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .drawer-overlay:not([hidden]), .drawer-overlay:not([hidden]) .drawer { animation: none; }
}

/* every page marks its own menu entry (index, bonus-codes and watch lacked the rule) */
.drawer a[aria-current="page"] { color: var(--accent); }

/* ── floating glass tab bar (2026-10-24, dchan sent iOS 26 "Liquid Glass" bars) ──
   A capsule floating above the page instead of a full-width strip: frosted
   translucent fill, hairline rim with a top highlight, soft shadow. The active tab
   sits on its own lighter pill; icons are white, filled when active. */
@media (max-width: 799px) {
  .tabbar {
    left: 12px; right: 12px; margin: 0 auto; max-width: 440px;
    /* Lower (2026-10-25, dchan: "closer to the bottom of display"): into the home-
       indicator area like iOS's own bars, still ~20px clear of the indicator line;
       6px from the edge on phones without one. Was 10px + the whole safe area. */
    bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) - 14px));
    padding: 5px; gap: 2px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(30, 30, 32, .62);
    -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .09);
  }
  .tabbar.tb-hide { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); }
  .tabbar a, .tabbar button { min-height: 54px; border-radius: 999px; color: rgba(240, 240, 240, .82); transition: background-color .15s ease-out, color .15s ease-out; }
  .tabbar [aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
  .tabbar a:active, .tabbar button:active { background: rgba(255, 255, 255, .10); }
  .tabbar a:focus-visible, .tabbar button:focus-visible { border-radius: 999px; outline-offset: -2px; }
  .tabbar [aria-current="page"] .tb-av { box-shadow: 0 0 0 2px rgba(30, 30, 32, .9), 0 0 0 3.5px #fff; }
  .tabbar .tb-dot { box-shadow: 0 0 0 2px rgba(30, 30, 32, .95); }
  body:has(.tabbar) { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ── tab bar collapses to one round button while scrolling down (2026-10-24, dchan:
   "hide bar navigation and only show icon", iOS 26 Safari style) ──
   .tb-mini (set by auth.js) shrinks the capsule into a 56px glass circle at the
   bottom left holding only the current tab's icon (Home when the page has no tab).
   Scrolling up or tapping the circle opens the full bar again. */
@media (max-width: 799px) {
  .tabbar { transition: right .26s cubic-bezier(.2, .8, .2, 1), padding .26s ease-out, transform .2s ease-out, max-width .26s cubic-bezier(.2, .8, .2, 1); }
  /* Step one of the collapse (2026-10-25): smaller, icons only, labels fade out. */
  .tabbar a, .tabbar button { transition: background-color .15s ease-out, color .15s ease-out, min-height .22s ease-out; }
  .tabbar a > span:not(.ic), .tabbar button > span:not(.ic) { max-height: 16px; overflow: hidden; transition: opacity .16s ease-out, max-height .22s ease-out; }
  .tabbar.tb-small:not(.tb-mini) { max-width: 300px; padding: 3px; }
  .tabbar.tb-small:not(.tb-mini) a, .tabbar.tb-small:not(.tb-mini) button { min-height: 42px; }
  .tabbar.tb-small:not(.tb-mini) a > span:not(.ic), .tabbar.tb-small:not(.tb-mini) button > span:not(.ic) { opacity: 0; max-height: 0; }
  .tabbar.tb-mini { right: calc(100% - 68px); margin-left: 0; padding: 0; grid-template-columns: 1fr; height: 56px; background: rgba(66, 66, 70, .82); }
  .tabbar.tb-mini > * { display: none; }
  .tabbar.tb-mini > .tb-show { display: flex; min-height: 54px; background: none; box-shadow: none; padding: 0; }
  .tabbar.tb-mini > .tb-show > span:not(.ic) { display: none; }
  .tabbar.tb-mini .ic svg { width: 26px; height: 26px; fill: currentColor; }
  .tabbar.tb-mini .tb-show { color: #fff; }
  .tabbar.tb-mini svg path + path { stroke: rgba(66, 66, 70, 1); }
  .tabbar.tb-mini .tb-av { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .tabbar { transition: none; } }

/* Offer sentence: the parts that matter in white, the rest stays grey (2026-10-24,
   dchan: "have the font in white in the important wordings"). */
.offer .pitch b { color: #fff; font-weight: 600; }

/* "Affiliate link" under each Play Now button (2026-10-24, dchan: "add Affiliate link
   below Play Now button") — the disclosure where people click. */
.play .aff { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-faint); }

/* ── phone edges (2026-10-25, dchan: "move the container closest to the edge, and
   while using the home app no edge") ──
   Phone browser: 12px gutters (were 16px). Home Screen app (display-mode
   standalone, or html.standalone from auth.js for older iOS): main containers run
   edge to edge like a native list — no side borders, square corners — while text
   keeps 16px from the glass and clears a notch held sideways. Carousel cards,
   callouts, menus and the floating bar keep their own shape. */
@media (max-width: 720px) {
  body .wrap { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}
@media (max-width: 720px) and (display-mode: standalone) {
  body .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  body :is(.bonus-grid,.frame,.upnext,.acc-card,.perk,.ct-card,.offer,.side) { margin-left: calc(-1 * max(16px, env(safe-area-inset-left))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right))); border-radius: 0; border-left-width: 0; border-right-width: 0; }
}
@media (max-width: 720px) {
  html.standalone body .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  html.standalone body :is(.bonus-grid,.frame,.upnext,.acc-card,.perk,.ct-card,.offer,.side) { margin-left: calc(-1 * max(16px, env(safe-area-inset-left))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right))); border-radius: 0; border-left-width: 0; border-right-width: 0; }
}

/* No sideways page pan (2026-10-25, dchan: "on home app, prevent the entire page from
   swiping left or right when grabbing"): anything a few px too wide let the whole page
   slide under a finger. Sideways scrollers inside (rows, carousels, code text) still scroll. */
html, body { overflow-x: clip; overscroll-behavior-x: none; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* ── iPhone-style large title (2026-10-25, dchan: "do we need the page title, since we
   have the bottom bar" → large title) ── Phones: the page's h1 sits left, smaller,
   close under the top bar; once it scrolls under the bar, the bar shows the page's
   name beside the logo in place of BONUSPLAY (auth.js .nav-ttl / html.ttl-up), like
   Mail and Settings. The h1 stays the page's heading for screen readers and search. */
.nav-ttl { display: none; }
@media (max-width: 720px) {
  body main > .sec-head { padding-top: 14px; align-items: flex-start; text-align: left; gap: 8px; margin-bottom: 4px; }
  body main .sec-head h1, body main > h1 { font-size: 28px; }
  body main > .sec-head + .updated { text-align: left; margin: 0 0 18px; }
  nav .brand { position: relative; transition: color .2s ease-out; }
  .nav-ttl { display: block; position: absolute; left: 42px; top: 50%; transform: translateY(-50%); white-space: nowrap;
    color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: 0; opacity: 0; pointer-events: none; transition: opacity .2s ease-out; }
  html.ttl-up nav .brand { color: transparent; }
  html.ttl-up .nav-ttl { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { nav .brand, .nav-ttl { transition: none; } }

/* Magnification (2026-10-25, dchan: "like the Apple dock"): the open bar scales with
   the scroll — auth.js sets --tb-p from 0 (full) to 1 (just before it collapses):
   100% → 82%, from its bottom edge, labels fading out by 60% of the way. The round
   collapsed icon keeps its own size. The fixed .tb-small step this replaces is unused. */
@media (max-width: 799px) {
  .tabbar:not(.tb-mini) { scale: calc(1 - .18 * var(--tb-p, 0)); transform-origin: 50% 100%; }
  .tabbar:not(.tb-mini) a > span:not(.ic), .tabbar:not(.tb-mini) button > span:not(.ic) { opacity: calc(1 - 1.7 * var(--tb-p, 0)); }
}

/* Page titles in Title Case (2026-10-25, dchan: "have the titles match … first letter
   instead of all uppercase"): the h1 text is written in Title Case; this stops the
   display face's capitals so it matches the top-bar title (.nav-ttl). Section
   headings (BONUS DROP …) and the logo keep their capitals. */
main .sec-head h1, main > h1, .acc-in h1 { text-transform: none; letter-spacing: .01em; }

/* ── BonusPlay wordmark (2026-10-25, dchan picked "B": two-tone) ── "Bonus" in the
   page ink, "Play" in the brand yellow, bold system face, beside the money-bag mark.
   Replaces the all-caps BONUSPLAY; text everywhere now reads "BonusPlay". */
body .brand .wm, body .foot-logo .wm { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-transform: none; font-weight: 800; letter-spacing: -.01em; }
body nav .brand .wm, body header.top .brand .wm { font-size: 19px; }
.wm em { font-style: normal; color: var(--accent, #fcc803); transition: color .2s ease-out; }
html.ttl-up nav .brand .wm em { color: transparent; }   /* the large-title swap hides both halves */

/* Play Now label centred (2026-10-25, dchan: "Play Now label in center middle of button"):
   the home page's buttons were inline-block with padding, which left the condensed
   label 4px high (11px over, 15px under). Every page now centres it the same way. */
body .join-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1; min-height: 44px; padding-top: 0; padding-bottom: 0; }

/* Discord's success greens (2026-10-25, dchan: "use the same color palette for Discord
   success color"): #248046 for green buttons (Play Now, Join; hover #1A6334) and
   #23A55A for success marks (claimed stripe, alerts-on bell, "Copied"). Every page sets
   its own --green / --green-ink; html:root wins over them. */
html:root { --green: #248046; --green-ink: #23a55a; }
@media (hover: hover) {
  body .join-btn:not([aria-disabled="true"]):hover { background: #1a6334; border-color: #1a6334; background-image: none; }
}

/* Partner banners smaller (2026-10-25, dchan: "on partners can we reduce the image for
   both stake.us and stake"): a shorter panel (16:5, was 30:13) with the whole banner
   scaled down inside it — the logo shrinks, nothing is cropped; the navy around it is
   the panel's own --logo-navy. Home page and Join pages. */
body .offer .art { aspect-ratio: 4 / 1; object-fit: contain; background: #152137; }   /* 4:1 since 2026-10-25 (dchan: "reduce the height a bit more, keep the same ratio"); the logo keeps its shape */   /* the banners' own navy (#152137 / #162135), so the sides blend */

/* ── Condensed footer (2026-10-25, dchan: "can we condense the footer") ── was 881px
   tall on a phone, 420px on desktop. Desktop: the same four columns, less air.
   Phones: the column headings go and each group's links flow side by side in one
   row (40px targets), the tagline and the legal lines get smaller. Nothing removed. */
body footer.site-foot { padding: 32px 0 20px; }
body .foot-grid { gap: 20px 28px; }
body .foot-brand p { margin-top: 8px; font-size: 13px; line-height: 1.5; }
body .foot-col h2 { margin-bottom: 2px; }
body .foot-col a { min-height: 30px; font-size: 13.5px; }
body .foot-base { margin-top: 20px; padding-top: 14px; gap: 16px; }
body .foot-base p { font-size: 12px; line-height: 1.5; }
@media (max-width: 640px) {
  body footer.site-foot { padding: 20px 0 16px; }
  body .foot-grid { grid-template-columns: 1fr; gap: 10px; }
  body .foot-brand p { display: none; }   /* the logo is enough here; the tagline repeats the page */
  body .foot-col { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 18px; }
  body .foot-col h2 { display: none; }
  body .foot-col a { min-height: 40px; font-size: 13.5px; }
  body .foot-note { flex-basis: 100%; margin: 0; font-size: 12px; }
  body .foot-base { margin-top: 12px; padding-top: 12px; gap: 6px; }
  body .foot-base p { font-size: 11.5px; }
}