/* ==========================================================================
   The shell: one header for the whole app. Wordmark, section stubs, balance slip,
   a row that changes with the section, and a live ticker.
   ========================================================================== */

.top { display: contents; }
/* The header is two pinned layers: the top bar, and under it the section's own menu (and the voucher banner while there is one). On a short screen the
   second layer lets go and scrolls away (see the max-height rule below). layout.js measures both, so nothing here guesses a height. */
.top-bar { position: sticky; top: 0; z-index: 51; background: var(--bg); }
.top-rest { position: sticky; top: var(--bar-h); z-index: 50; background: var(--bg); border-bottom: var(--bw) solid var(--line); }
.top-main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); height: 70px; display: flex; align-items: center; gap: 22px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 800; font-size: 29px; letter-spacing: -.065em; line-height: 1; flex: none; text-transform: lowercase; }
.wordmark .logo-mark { filter: drop-shadow(3px 3px 0 var(--shadow-c)); transition: transform .1s; }
.wordmark:hover .logo-mark { transform: rotate(-6deg); }

/* section stubs: the active one is a paper slip */
.sections { display: flex; gap: 8px; align-items: center; }
.sec { height: 40px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--text-2); border: var(--bw) solid transparent; border-radius: var(--r-1); transition: .08s; }
.sec:hover { color: var(--text); border-color: var(--line); }
.sec.on { background: var(--paper); color: var(--paper-ink); border-color: #0E0C0A; box-shadow: 3px 3px 0 var(--lime-shadow); transform: rotate(-1.2deg); }
[data-theme="light"] .sec.on { background: var(--text); color: var(--inv); box-shadow: 3px 3px 0 var(--lime-shadow); }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 15px; height: 15px; }
.search input { width: 230px; height: 38px; padding: 0 38px 0 34px; background: var(--bg-2); color: var(--text); border: var(--bw) solid var(--line); border-radius: var(--r-1); outline: none; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transition: .1s; }
.search input::placeholder { color: var(--text-3); }
.search input:focus { border-color: var(--focus); box-shadow: 3px 3px 0 var(--lime-shadow); }
.search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font: 500 11px var(--f-mono); color: var(--text-3); border: 1.5px solid var(--line-soft); border-radius: 2px; padding: 0 5px; }

/* the balance is a little ticket stub */
.balance { display: flex; align-items: stretch; background: var(--paper); color: var(--paper-ink); border: var(--bw) solid #0E0C0A; border-radius: var(--r-1); box-shadow: 3px 3px 0 var(--shadow-c); padding: 4px 14px; }
[data-theme="light"] .balance { background: var(--slip); }
.balance > div { display: flex; flex-direction: column; justify-content: center; line-height: 1.12; }
.balance > div + div { border-left: 1.5px dashed var(--paper-line); margin-left: 14px; padding-left: 14px; }
.balance .lbl { font-size: 9.5px; color: var(--paper-mute); }
.balance b { font-size: 18px; font-weight: 700; letter-spacing: -.04em; min-width: 9ch; white-space: nowrap; }   /* min-width: the header must not jitter as digits change */
.balance b.sm { font-size: 13px; font-weight: 500; color: var(--paper-mute); min-width: 8ch; }

/* row two: changes with the section */
.subnav { border-top: var(--bw) solid var(--line-soft); }
.subnav:empty { display: none; }
.subnav-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; min-height: 44px; }
.subnav-in::-webkit-scrollbar { display: none; }
/* On a computer screen the second row wraps onto another line when it is too long (the Casino has twelve entries), instead of
   scrolling sideways. Phones and tablets keep the swipeable single row. */
@media (min-width: 1001px) { .subnav-in { flex-wrap: wrap; overflow-x: visible; } .subnav-in .sub { min-height: 44px; } }
.sub { display: flex; align-items: center; gap: 8px; padding: 0 13px; font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1.5px; transition: color .1s; }
.sub:hover { color: var(--text); }
.sub.on { color: var(--text); border-bottom-color: var(--lime); }
[data-theme="light"] .sub.on { border-bottom-color: var(--text); }
.sub svg.ph { width: 14px; height: 14px; }
.sub-ico { line-height: 0; } .sub-ico .sticker { border-radius: 2px; }
.sub-sep { width: 1.5px; margin: 12px 10px; background: var(--line); flex: none; }
.sub-kicker { display: flex; align-items: center; white-space: nowrap; flex: none; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); }
.nav-spacer { flex: 1; }
/* The Casino's second row: the games scroll sideways (with the lime arrow tab on the edge where there is more) and what you have made stays on the right. */
.subnav-split.subnav-in { flex-wrap: nowrap; overflow-x: visible; }
.sub-scroll { display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sub-scroll::-webkit-scrollbar { display: none; }
.subnav-split .profit { flex: none; }
.profit { display: flex; align-items: center; gap: 8px; font-size: 13px; padding-left: 14px; }
.profit .lbl { margin-left: 8px; } .profit .lbl:first-child { margin-left: 0; }
.profit b { font-weight: 700; }

/* ticker */
.ticker { border-top: 1.5px dashed var(--line-soft); background: var(--bg-2); overflow: hidden; height: 34px; display: flex; align-items: center; }
.ticker-track { display: flex; align-items: center; width: max-content; animation: marquee var(--dur, 40s) linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.tk { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .035em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.tk b { font-weight: 700; color: var(--text); } .tk b.up { color: var(--pos); } .tk b.down { color: var(--neg); }
.tk-sep { display: inline-block; width: 7px; height: 7px; background: var(--lime); transform: rotate(45deg); margin: 0 24px; flex: none; }
[data-theme="light"] .tk-sep { background: var(--text); }
@keyframes marquee { to { transform: translateX(-50%); } }

.search-mobile { display: none; padding: 10px var(--gutter) 4px; }
.search-mobile input { width: 100%; height: 38px; padding: 0 12px; background: var(--bg-2); color: var(--text); border: var(--bw) solid var(--line); border-radius: var(--r-1); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; outline: none; }
.search-mobile input:focus { border-color: var(--focus); box-shadow: 3px 3px 0 var(--lime-shadow); }

@media (max-width: 1180px) { .hide-md { display: none !important; } }
@media (max-width: 820px) {
  .hide-sm { display: none !important; }
  .top-main { gap: 10px; height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 8px; }
  .wordmark { font-size: 25px; }
  .top-main { justify-content: space-between; }
  .top-right { margin-left: 0; }
  .balance b { min-width: 8ch; }
  .sections { order: 3; width: 100%; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .sec { padding: 0 12px; height: 36px; font-size: 11.5px; }
  .top-right { gap: 8px; }
  .balance { padding: 3px 10px; } .balance b { font-size: 16px; }
  .subnav-in { padding: 0 8px; }
}

/* A short screen (under 800px of visible height: any 1366x768 laptop, and most 1440x900 and 1536x864 ones once the browser's own bars are
   taken off): the header would take a third of what you can see, so only its top bar stays pinned. The second row (the section's menu)
   scrolls away with the page, and comes back as soon as you scroll up. The numbers come from layout.js (--bar-h, --head-h). */
@media (max-height: 800px) {
  .top-rest { position: static; }
  .top-bar { border-bottom: var(--bw) solid var(--line); }        /* the bar is what stays on screen, so it carries the line under the header */
  .subnav { border-top: 0; }
}

/* ---------- sign in ---------- */
.auth { min-height: var(--view-h); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 520px); }
.auth-side { padding: 44px 56px; display: flex; flex-direction: column; justify-content: center; gap: 22px; background: var(--bg-2); border-right: var(--bw) solid var(--line); }
.auth-side h1 { font-size: clamp(40px, 5.6vw, 82px); letter-spacing: -.05em; line-height: .94; max-width: 12ch; }
.auth-side h1 em { font-style: normal; color: var(--lime); }
[data-theme="light"] .auth-side h1 em { color: var(--lime-deep); }
.auth-side p { color: var(--text-2); font-size: 17px; max-width: 38ch; }
.auth-stickers { display: flex; gap: 20px; margin-top: 12px; }
.auth-stickers .sticker { box-shadow: var(--sh-2); border-radius: var(--r-1); }
.auth-card { position: relative; align-self: center; margin: 36px; padding: 34px 32px 28px; border: var(--bw) solid #0E0C0A; border-radius: var(--r-1); box-shadow: 8px 8px 0 var(--lime-shadow); }
.auth-card .lede::before, .auth-card .lede::after { content: ''; position: absolute; bottom: -10.5px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 1.5px solid #0E0C0A; }
.auth-card .lede::before { left: -42px; } .auth-card .lede::after { right: -42px; }
.auth-terms { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 12px; font-size: 14px; line-height: 1.4; cursor: pointer; } .auth-terms input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--lime); } .auth-terms a { text-decoration: underline; }
.auth-card h2 { font-size: 44px; letter-spacing: -.05em; margin: 8px 0 8px; }
.auth-card .lede { position: relative; color: var(--paper-mute); margin: 0 0 26px; padding-bottom: 20px; border-bottom: 1.5px dashed var(--paper-line); }
.auth-swap { text-align: center; margin: 20px 0 0; color: var(--paper-mute); font-size: 14px; }
.auth-swap a { color: var(--paper-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 820px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-side { padding: 32px 22px; border-right: 0; border-bottom: var(--bw) solid var(--line); gap: 14px; }
  .auth-stickers .sticker { width: 60px; height: 60px; }
  .auth-card { margin: 26px 16px 40px; }
}

@media (max-width: 640px) { .wordmark span { display: none; } }

/* ---------- the rescue voucher banner (sits under the header while it applies) ---------- */
.voucher-bar { display: none; }
.voucher-bar.on, .voucher-bar.used { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); border-top: var(--bw) solid #0E0C0A; color: #10140A; font-size: 14px; }
.voucher-bar.on { background: var(--lime); }
.voucher-bar.used { background: #CFC3A8; }
.vb-tag { padding: 2px 10px; border: 2px dashed #0E0C0A; font: 700 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-1.5deg); flex: none; }
.vb-msg { flex: 1 1 260px; } .vb-msg b { font-family: var(--f-mono); letter-spacing: -.02em; }
.vb-btn { background: #0E0C0A; color: var(--lime); border-color: #0E0C0A; box-shadow: 3px 3px 0 var(--lime-shadow); flex: none; }
.vb-btn:hover { background: #0E0C0A; color: #fff; }
@media (max-width: 820px) {
  .voucher-bar.on, .voucher-bar.used { padding: 6px var(--gutter); gap: 10px; font-size: 12.5px; flex-wrap: nowrap; }
  .voucher-bar.on .vb-msg { display: none; } .voucher-bar.on .vb-tag { flex: 1; text-align: center; }
  .voucher-bar.used .vb-tag { display: none; } .voucher-bar.used .vb-msg { flex: 1 1 auto; line-height: 1.3; }
}

/* two accounts in the header */
a.balance { text-decoration: none; cursor: pointer; }
a.balance:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-c); }
.balance .lbl .short { display: none; }
.balance b { min-width: 8.5ch; }
/* ---------- the header on a computer screen ----------
   It has to fit at every width from 821px up, with nothing cut off and nothing to scroll sideways. It gets there in steps:
     1500px and wider   one row: everything, the search box and both balances side by side (up to 1560px wide)
     1280px to 1499px   one row: the search box moves to its own bar under the header and the two balances stack
     821px to 1279px    two rows: the section tabs drop to a row of their own under the wordmark and the buttons
   (820px and narrower is the phone layout, below.) */
@media (min-width: 821px) {
  .top-main { max-width: min(100%, 1560px); gap: 16px; }
  .top-right { gap: 10px; }
  .sec { padding: 0 9px; letter-spacing: .1em; font-size: 12px; }
  .search input { width: 150px; }
  .balance b { font-size: 16px; min-width: 8ch; }
  .balance > div + div { margin-left: 10px; padding-left: 10px; }
}
@media (max-width: 1499px) { .search { display: none; } .search-mobile { display: block; } }           /* (the search box leaves the top bar and gets a bar of its own) */
@media (max-width: 1499px) {                       /* the two balances stack on every screen narrower than this, phones included */
  a.balance { flex-direction: column; padding: 3px 10px; gap: 1px; }
  .balance > div, .balance > div + div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; padding: 0; border: 0; }
  .balance > div + div { border-top: 1.5px dashed var(--paper-line); padding-top: 1px; }
  .balance b, .balance b.sm { font-size: 13px; min-width: 8ch; text-align: right; }
  .balance .lbl .full { display: none; } .balance .lbl .short { display: inline; }
}
@media (min-width: 821px) and (max-width: 1279px) {
  .top-main { height: auto; flex-wrap: wrap; padding-top: 10px; row-gap: 4px; }
  .sections { order: 3; width: 100%; gap: 6px; padding-bottom: 6px; }
  .top-right { margin-left: auto; }
}
@media (max-width: 820px) { .balance .lbl .full { display: none; } .balance .lbl .short { display: inline; } .balance b { min-width: 7.5ch; font-size: 12.5px; } }
/* very narrow phones: the right-hand group of the header has to fit inside the screen (375px and down) */
#btn-ig-m { display: none; }                                         /* the phone copy of the Instagram icon: it sits in the top row beside the logo, where there is room (an id, so that the icon's own display rule cannot win) */
@media (max-width: 480px) {
  #btn-ig { display: none; } #btn-ig-m { display: inline-grid; margin-left: auto; }
  .top-right { gap: 4px; min-width: 0; max-width: 100%; }
  .top-right .icon-nav { width: 27px; height: 36px; }
  a.balance { padding: 3px 6px; } .balance > div, .balance > div + div { gap: 6px; }
  .balance b, .balance b.sm { min-width: 7ch; font-size: 12px; }           /* (a balance is never split over two lines, so the box has to be able to hold $999,999.99) */
  #btn-deposit { padding-left: 8px; padding-right: 8px; font-size: 11px; }
}
/* 320px phones: the Friends icon is also in the account menu, and "Add funds" shortens to "Funds" */
@media (max-width: 360px) {
  #btn-friends, .dep-add { display: none; }
  .balance b, .balance b.sm { min-width: 6.6ch; font-size: 11.5px; }
  .balance .lbl { font-size: 8.5px; letter-spacing: .08em; }
  a.balance { padding: 3px 6px; } .balance > div, .balance > div + div { gap: 6px; }
  #btn-deposit { padding-left: 8px; padding-right: 8px; font-size: 11px; }
}
/* segmented choice (used by the deposit box) */
.seg { display: grid; gap: 8px; }
.seg-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: var(--bw) solid var(--line); border-radius: var(--r-1); cursor: pointer; }
.seg-opt:has(input:checked) { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 8%, transparent); }
.seg-opt input { margin-top: 4px; accent-color: var(--lime); }
.seg-opt b { display: block; font-size: 14px; } .seg-opt small { display: block; color: var(--text-3); font-size: 12px; line-height: 1.35; }

/* an announcement in the moving bar: a loud pill, so it cannot be mistaken for a bet or a win */
.tk-ann { display: inline-flex; align-items: center; gap: 9px; padding: 3px 12px 3px 4px; background: var(--verm); color: var(--verm-ink); border: 1.5px solid #0E0C0A; border-radius: 99px; box-shadow: 2px 2px 0 #0E0C0A; font-weight: 700; letter-spacing: .03em; }
.tk-ann .tk-ann-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; background: var(--paper); color: var(--verm-deep); border-radius: 99px; font-size: 11px; letter-spacing: .12em; }
.tk-ann .tk-ann-tag svg { width: 13px; height: 13px; }
.tk-ann b, .tk-ann .tk-ann-text { color: var(--verm-ink); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .tk-ann .tk-ann-tag svg { animation: tkHorn 2.4s ease-in-out infinite; transform-origin: 30% 60%; } }
@keyframes tkHorn { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg) scale(1.15); } 88% { transform: rotate(9deg) scale(1.1); } }