/* ============================================================
   Brand skin for the member area.

   Every colour in here comes from a token in tokens.css, which is
   compiled per brand from that brand's design-system file. No hex
   literals: a value written here would follow SBO14K onto every
   other brand that ships this codebase.

   Loaded after base.css, so it wins on order rather than on
   !important. Green stays reserved for money-positive states.

   Fills are flat. The page is the brand's background, a panel is the
   brand's surface, and the primary is spent on the things a player is
   meant to press or is currently on — one colour, at full strength,
   rather than the same colour fading into a darker one under a glow.
   ============================================================ */

/* ---------- Typography ----------
   The one number the whole type scale hangs off. Every font-size in these
   sheets is in rem now, so this is the only place a brand has to say "our
   face runs small" — and theme.typography.baseSize is where it says it.

   That mattered the moment a second brand arrived. A px scale is a scale for
   exactly one typeface: the same 15px is comfortable in Anuphan and cramped in
   a face with a smaller x-height, and the fix used to be 253 edits. Note what
   this does *not* fix — a face whose glyphs are wider still wraps differently,
   and no root size repairs that. This makes the size adjustable, not the
   metrics identical.

   Bootstrap sizes its padding, its gutters and its components in rem as well,
   so moving this moves the layout with the text rather than leaving the text
   to outgrow its boxes. That is the intended behaviour and it is worth knowing
   before turning the knob.

   The fallback is 16px, which is what a browser gives an unstyled document:
   this brand's --base-size is 16px, so today the declaration changes nothing
   at all. It is the handle, not the change. */
html {
    font-size: var(--base-size, 16px);
}

/* sbo14k.com serves Anuphan for both body and headings. The base sheet
   (base.css) points its own font-family declarations at
   var(--font-body), and its scale was divided by
   0.75 — DB Heavent Condensed rendered far smaller per px than Anuphan,
   so the old scale ran hot. This block stays as a safety net over
   Bootstrap's defaults. `i` and ::before are deliberately NOT listed:
   all 180 icons in the views sit on <i>, and they keep their own face.

   `div` is not listed either, and that is load-bearing. A div inherits its
   face from body like everything else, so listing it changed nothing except
   to make the brand face unrefusable — and .crypto-address-text asks for
   monospace on purpose, because a wallet address is read character by
   character. With div in the list the address rendered in Anuphan, where a
   capital I and a lowercase l are the same stroke. Measured: dropping it
   moves exactly one computed value across the 1,973 the gallery renders. */
body,
p,
a,
span,
small,
label,
li,
td,
th,
button,
input,
optgroup,
select,
textarea,
option,
.btn,
input.form-control,
textarea.form-control,
select.form-control,
.custom-select {
    font-family: var(--font-body) !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading) !important;
}

/* ---------- Base ---------- */
body {
    background-color: var(--bg) !important;
    /* The brand's page glow: brightest at the top centre, falling to the
       background colour it is written against. */
    background-image: var(--grad-page);
    background-repeat: no-repeat;
    color: var(--text);
    /* one notch under sbo14k's 16px --base-size so unstyled text matches
       the rescaled 15px body copy of the dashboard sheet */
    /* font-size: 0.875rem; */
    /* Thai needs headroom for tone marks above and vowels below */
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
p,
a,
span,
small,
label,
li,
td,
th,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text);
}

.text-muted,
.history-link-text,
small.text-muted {
    color: var(--text-dim) !important;
}

hr {
    border-color: var(--border);
}

/* base.css paints this the dark end of the red ramp, which on a dark panel is
   a link nobody can find at the moment they have lost their password. */
a.forgot {
    color: var(--accent-400);
}

a:hover {
    color: var(--accent-400);
}

/* ---------- Header / Navbar ----------
   The bar itself is styled further down, under "HEADER — sticky bar":
   a translucent scrim over a backdrop blur. A second .navbar rule used to sit
   here painting a flat gradient, at the same specificity and earlier in the
   file, so it never once reached the screen. It cost an afternoon: the scale
   it named was tinted, nothing moved, and the tint looked broken. */

/* a:link is named because base.css names it, and would otherwise out-specify
   this — which is what the !important here used to be for, and why the hover
   colour below never showed. */
.top-nav ul li a,
.top-nav ul li a:link,
.top-nav ul li i,
.top-nav ul li p {
    color: var(--text-soft);
}

/* ---------- Slide / Hero ---------- */
.slide {
    background: var(--navy-950);
}

/* ---------- Content surface ----------
   The brand's card fill, on the brand's page. */
.container.content {
    background: var(--grad-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    color: var(--text);
}

/* ---------- Page title ----------
   The heading every member page opens with (17 views share this markup).
   Left-aligned, like the section headings under it, and marked the same
   way — a bar before the text — but in the brand's button fill and a size
   up, so the page title outranks the .dash-heading sections without a
   centred banner and an underline of its own. The views hard-code
   .text-center on the row; the heading is a flex row, so justify-content
   decides where the title sits, not text-align. */
.row.text-center.page-title {
    position: relative;
    overflow: visible;
    margin: 0 0 6px;
    padding: 2px 0 0;
    background: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.page-title h3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    color: var(--text);
    font-size: 1.375rem;
    font-weight: 700;
    /* no tracking: it pulls Thai clusters apart from their tone marks */
    letter-spacing: normal;
    line-height: 1.35;
}
.page-title h3::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 1.1em;
    border-radius: 999px;
    background: var(--grad-button);
}
@media (max-width: 575.98px) {
    .row.text-center.page-title {
        margin: 0 0 4px !important;
        padding: 2px 0 0 !important;
    }
    .page-title h3 {
        gap: 8px;
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
    }
}

/* ---------- Contact list (LINE / Telegram) — phones ----------
   On small screens hide the oversized channel logo and right-size the
   heading + caption so the text breathes and fills the row cleanly. */
@media (max-width: 575.98px) {
    .list-contact-left .icon-history-box {
        display: none !important;
    }
    .list-contact-left {
        width: 56% !important;
    }
    .list-contact-right {
        width: 44% !important;
        padding-left: 6px;
    }
    .list-contact-left h5 {
        font-size: 0.8125rem !important;
        line-height: 1.4 !important;
        margin-top: 3px !important;
    }
    .list-contact-left p.chanel {
        font-size: 0.6875rem !important;
        line-height: 1.45 !important;
        margin-bottom: 0 !important;
    }
    /* keep the CTA button readable and contained in the narrow column */
    .list-contact-right .btn-line {
        font-size: 0.75rem !important;
        padding: 7px 8px !important;
        line-height: 1.2 !important;
        white-space: normal;
    }
    .list-contact-right p {
        margin-top: 6px !important;
    }
}

/* Common "white panel" surfaces inside the content area → dark cards */
.card,
.affiliate-box,
.stat-content,
.cards-box,
.modal-content,
.list-group-item,
.tnm-top-reward,
.tnm-current-reward,
.tnm-player {
    background: var(--grad-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text);
    box-shadow: var(--shadow-card) !important;
}

.card-header {
    background-color: var(--navy-800);
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

/* ---------- Buttons ----------
   The brand file states its buttons in full — fill, text, hover fill, hover
   text and radius — under theme.buttons, and publishes them as --theme-btn-*.
   These read those, so a brand that changes its button in its own editor
   changes it here.

   One filled style, flat. No glow underneath: a shadow in the button's own
   colour made every CTA look lit from below and none of them look pressed. */
.btn:focus,
.btn.focus {
    box-shadow: var(--focus-ring);
}

.btn-red,
.btn-green {
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
    border-color: transparent;
    border-radius: var(--theme-btn-radius);
    box-shadow: none;
}
.btn-red:hover,
.btn-green:hover {
    background: var(--theme-btn-hbg);
    color: var(--theme-btn-htext);
    border-color: transparent;
    box-shadow: none;
}

/* Withdraw / secondary → outlined on dark */
.btn-silver,
.btn-zinc {
    background: transparent !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--theme-btn-radius);
}
.btn-silver:hover,
.btn-zinc:hover {
    background: var(--card-hover) !important;
    border-color: var(--primary) !important;
    color: var(--text) !important;
}

.btn-gold {
    background: var(--theme-btn-bg) !important;
    color: var(--theme-btn-text);
    border-color: transparent !important;
}
.btn-gold:hover {
    background: var(--theme-btn-hbg) !important;
    color: var(--theme-btn-htext);
}

/* Primary fills — the brand's button gradient, with its primaryInk on top.
   The brand states no hover for it, so hover lifts the same fill. */
.btn-blue,
.btn-blue:hover {
    background: var(--grad-button);
    color: var(--primary-ink);
    border-color: transparent;
}
.btn-blue:hover {
    filter: brightness(1.1);
}

/* The brand's outline variant, as its own site paints it: a ring of its `bg`
   drawn inside the box, a label of its `text`, and its hover fill and ink. */
.btn-outline-red {
    color: var(--theme-btn-outline-text);
    border-color: transparent;
    border-radius: var(--theme-btn-radius);
    box-shadow: inset 0 0 0 1.5px var(--theme-btn-outline-ring);
    background: transparent;
}
.btn-outline-red:hover {
    background: var(--theme-btn-outline-hbg);
    color: var(--theme-btn-outline-htext);
    border-color: transparent;
    box-shadow: none;
}

/* Bootstrap primary + success (inline magenta in template) + bg-primary.
   The primary's fill carries no flag, so .btn.inactive and the per-button
   colours a view sets inline still win over it. */
.btn-primary,
.btn-success {
    border: 1px solid transparent !important;
    color: var(--primary-ink) !important;
}
.btn-primary {
    background: var(--grad-button);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--grad-button);
    filter: brightness(1.1);
}
/* btn-success had leftover magenta from the base sheet — pull every
   state onto the primary for consistency */
.btn-success,
.btn-success:focus,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background: var(--grad-button) !important;
    border-color: transparent !important;
    color: var(--primary-ink) !important;
}
.btn-success:hover {
    background: var(--grad-button) !important;
    border-color: transparent !important;
    color: var(--primary-ink) !important;
    filter: brightness(1.1);
}
.bg-primary {
    background: var(--grad-button) !important;
}

/* LINE button — money-positive green, same flat treatment as the other CTAs */
.btn-line,
a.btn-line {
    background: var(--green-500);
    border: 1px solid transparent;
    color: var(--primary-ink);
    box-shadow: none;
}
.btn-line:hover {
    background: var(--green-600);
    color: var(--primary-ink);
}
.btn-line i,
.btn-line .fa-line {
    color: var(--primary-ink);
}

/* ---------- Forms ---------- */
input.form-control,
textarea.form-control,
select,
select.form-control,
.custom-select,
.input-group-text {
    background-color: var(--navy-900) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text) !important;
}
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--text-dim);
}
input.form-control:focus,
textarea.form-control:focus,
select:focus,
select.form-control:focus,
.custom-select:focus {
    background-color: var(--navy-900) !important;
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
    color: var(--text) !important;
}
.input-group-text {
    background-color: var(--navy-800) !important;
}
option {
    background-color: var(--navy-900);
    color: var(--text);
}
label {
    color: var(--text-soft);
}

/* ---------- Alerts ----------
   A flat tint of the state colour and a rule of it down the leading edge. */
.alert {
    border: 1px solid var(--border-strong);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    box-shadow: none;
}
.alert-danger {
    background: var(--red-500-a10);
    border-color: var(--red-500-a40);
    border-left-color: var(--red-500);
}
.alert-danger,
.alert-danger * {
    color: var(--red-100);
}
.alert-warning {
    background: var(--accent-500-a12);
    border-color: var(--accent-500-a40);
    border-left-color: var(--accent-500);
}
.alert-warning,
.alert-warning * {
    color: var(--gold-400);
}
.alert-success {
    background: var(--green-500-a12);
    border-color: var(--green-500-a40);
    border-left-color: var(--green-500);
}
.alert-success,
.alert-success * {
    color: var(--green-400);
}
.alert-info {
    background: var(--primary-a12);
    border-color: var(--primary-a40);
    border-left-color: var(--primary);
}
.alert-info,
.alert-info * {
    color: var(--blue-400);
}

/* ---------- Tables ---------- */
.table,
.table td,
.table th {
    color: var(--text);
    border-color: var(--border) !important;
}
.table thead th {
    border-bottom-color: var(--border-strong) !important;
    color: var(--text-soft);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.025);
}
.table-hover tbody tr:hover {
    background-color: var(--card-hover);
    color: var(--text);
}
/* The heading bar of a ranking: the brand's rankBar */
tr.reward-table-head,
.tnm-reward-header.card-header,
.tnm-rank-header.card-header {
    background: var(--grad-rank-bar);
}

/* Reward / tournament value text remained dark on now-dark cards → lighten */
.tnm-top-reward h4,
.tnm-current-reward h4,
.tnm-player h4,
.dashboard-title h4,
.step-label {
    color: var(--text-soft);
}
.tnm-top-reward h3 {
    color: var(--accent-400);
}
.tnm-current-reward h3 {
    color: var(--blue-400);
}
.tnm-player h3 {
    color: var(--green-400);
}

/* ---------- Pagination ---------- */
.page-link {
    background-color: var(--navy-900) !important;
    border-color: var(--border) !important;
    color: var(--blue-400) !important;
}
.page-link:hover {
    background-color: var(--card-hover) !important;
    color: var(--text) !important;
}
.page-item.active .page-link {
    background: var(--grad-button) !important;
    border-color: var(--primary) !important;
    color: var(--primary-ink) !important;
}
.page-item.disabled .page-link {
    background-color: var(--navy-950) !important;
    color: var(--text-dim) !important;
}

/* ---------- Badges ---------- */
.badge-warning {
    background-color: var(--gold-500);
    color: var(--accent-ink);
}
.badge-secondary {
    background-color: var(--wash-2);
    color: var(--text-soft);
}

/* ---------- Footer ---------- */
footer {
    color: var(--text-dim);
}
footer.text-muted,
footer.text-muted p {
    color: var(--text-dim) !important;
}
.fix-nav-bottom-active,
.fix-nav-bottom-active:hover {
    background: var(--theme-btn-bg) !important;
    animation: none !important;
}
.site-footer-mobile .fix-nav-bottom-active a,
.site-footer-mobile .fix-nav-bottom-active i,
.site-footer-mobile .fix-nav-bottom-active p {
    color: var(--theme-btn-text);
}

/* ---------- Modals / SweetAlert ---------- */
.modal-content {
    background: var(--grad-card) !important;
    border: 1px solid var(--border-strong) !important;
}
.modal-header,
.modal-footer {
    border-color: var(--border);
}
.modal-backdrop {
    background-color: var(--ink-deep);
}
.close {
    color: var(--text-soft);
    text-shadow: none;
}
.swal2-popup {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border-strong);
}
.swal2-title,
.swal2-html-container,
.swal2-content {
    color: var(--text) !important;
}
/* keep line breaks from back-office textarea text */
.swal-pre-line {
    white-space: pre-line;
}

/* ---------- Misc surfaces that used the navy bg image ---------- */
.t-countdown li,
.tnm-reward-header.card-header,
.tnm-rank-header.card-header {
    box-shadow: var(--shadow-card);
}

/* ---------- Striped list rows (history / auth lists) ---------- */
.bg-even {
    background-color: var(--wash);
}
.bg-odd {
    background-color: var(--wash-2);
}

/* ---------- Auth (login / register) ---------- */
.btn-auth-register {
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
    border-color: transparent;
    box-shadow: none;
}
.btn-auth-register:hover {
    background: var(--theme-btn-hbg);
    color: var(--theme-btn-htext);
    border-color: transparent;
}
.login h4,
.register h4,
.reset-password h4 {
    color: var(--text);
}

/* ============================================================
   HEADER — sticky bar
   The page's own colour, a hair short of opaque over a blur, and one rule
   under it. No sheen and no halo behind the logo: the logo is the brand, and
   it reads better against a bar that is not competing with it.
   ============================================================ */
.header {
    position: relative;
    z-index: 300;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 300;
    padding: 10px 0;
    background: var(--scrim);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    overflow: visible;
}
.navbar .col-8 {
    position: relative;
}
.header-logo {
    position: relative;
    z-index: 1;
}

/* ---------- Top-nav ----------
   One action either side of the logo, each a pill with its icon beside its
   label, sat on the bar's centre line rather than hanging from its top. The
   left one hugs the left edge and the right one the right, so the logo is
   the only thing in the middle. On phones the label goes (base.css hides it)
   and the pill becomes a 44px round icon button, the smallest comfortable
   tap target. */
.navbar > .container {
    align-items: center;
}
.top-nav {
    margin-top: 0;
}
.top-nav ul {
    display: flex;
}
.navbar .col-2:first-child .top-nav ul {
    justify-content: flex-start;
}
.navbar .col-2:last-child .top-nav ul {
    justify-content: flex-end;
}
.top-nav ul li a {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px 0 14px;
    border-radius: 999px;
    background: var(--wash);
    border: 1px solid var(--border);
    white-space: nowrap;
    text-decoration: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}
.top-nav ul li i {
    width: 1.125em;
    font-size: 1.0625rem;
    line-height: 1;
    text-align: center;
}
.top-nav ul li p {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
}
.top-nav ul li a:hover {
    background: var(--card-hover);
    border-color: var(--primary);
}
.top-nav ul li a:hover,
.top-nav ul li a:hover i,
.top-nav ul li a:hover p {
    color: var(--accent-400);
}

/* Between phone and desktop the columns are too narrow for a label beside
   an icon, so the pill stacks them — still one compact block, no slack. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .top-nav ul li a {
        flex-direction: column;
        gap: 3px;
        height: auto;
        padding: 7px 12px;
        border-radius: var(--radius);
    }
    .top-nav ul li p {
        font-size: 0.8125rem;
    }
}

@media (max-width: 575px) {
    .navbar {
        padding: 6px 0;
    }
    .top-nav ul li a {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
    }
    .top-nav ul li i {
        font-size: 1.25rem;
    }
}

/* ============================================================
   FOOTER — desktop brand block
   ============================================================ */
.site-footer-desktop {
    position: relative;
    margin-top: 36px;
    padding: 30px 0 0px; /* bottom room for the fixed bottom-nav */
    background: var(--navy-900);
    border-top: 1px solid var(--border);
}
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.footer-logo {
    max-width: 150px;
    margin: 0 auto;
}
.footer-tagline {
    color: var(--text-soft);
    font-size: 1.0625rem;
    margin: 0;
}
.footer-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0 14px;
}
.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--wash);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.875rem;
    transition:
        border-color 0.2s ease,
        color 0.2s ease;
}
.footer-badge:hover {
    border-color: var(--primary);
    color: var(--text);
}
.footer-badge i {
    color: var(--accent-400);
}
.footer-copy {
    color: var(--text-dim);
    font-size: 0.8125rem;
    margin: 8px 0 0;
    letter-spacing: normal;
}

/* ============================================================
   FOOTER — fixed bottom navigation
   Same bar as the header, the other way up. Four plain items and, in the
   middle, the action pressed most: play for a member, register for a
   visitor. It is a raised disc in the brand's button fill, where a thumb
   lands without reaching. The middle slot used to hold the logo, which the
   header already shows.
   ============================================================ */
.site-footer-mobile {
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: var(--scrim);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.6);
}
.site-footer-mobile ul {
    align-items: flex-end;
}
.site-footer-mobile li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}
.site-footer-mobile a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-height: 56px;
    padding: 8px 2px 6px;
    color: var(--text-soft);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease;
}
.site-footer-mobile i {
    width: auto;
    height: 22px;
    padding: 0;
    margin: 0;
    color: inherit;
    font-size: 1.125rem;
    transition: color 0.2s ease;
}
.site-footer-mobile a:hover,
.site-footer-mobile a:hover i {
    color: var(--accent-400);
    text-decoration: none;
}
/* the route a player is on */
.site-footer-mobile a.active,
.site-footer-mobile a.active i {
    color: var(--accent-400);
    font-weight: 600;
}

/* the middle action */
.site-footer-mobile .nav-cta {
    color: var(--text);
    font-weight: 600;
}
.nav-cta__disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-top: -26px;
    border-radius: 50%;
    background: var(--theme-btn-bg);
    /* a ring of the bar's own colour, so the disc reads as rising out of it */
    box-shadow:
        0 0 0 4px var(--bg),
        var(--shadow-raised);
    transition: transform 0.15s ease;
}
.site-footer-mobile .nav-cta__disc i {
    height: auto;
    color: var(--theme-btn-text);
    font-size: 1.375rem;
}
/* the play glyph's weight sits left of its box */
.site-footer-mobile .nav-cta__disc .fa-play {
    margin-left: 3px;
}
.site-footer-mobile .nav-cta:hover .nav-cta__disc {
    background: var(--theme-btn-hbg);
    transform: translateY(-2px);
}
.site-footer-mobile .nav-cta:hover .nav-cta__disc i {
    color: var(--theme-btn-htext);
}

@media (min-width: 768px) {
    .site-footer-mobile a {
        font-size: 0.8125rem;
    }
    .site-footer-mobile i {
        font-size: 1.25rem;
    }
}

/* ============================================================
   WALLET — CurrentCredit.vue
   The balance card, on the dashboard and on the deposit, withdraw and game
   pages. Built from the same parts as the dashboard around it: the brand's
   card fill, a heading with a tinted icon chip, round icon buttons, and
   the brand's own button for the one action that matters here.

   The balance is the headline: large, tabular so the digits do not jump
   when it refreshes, in --figure-ink — the accent while the accent can be
   read on this card, the body ink when it cannot. Deposit is the only
   filled thing on the card; withdraw is outlined beside it.
   ============================================================ */
.wallet {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-top: 14px;
    padding: 18px 20px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--grad-card);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card);
}
.wallet--linked {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
/* a bar of the accent along the top, the same mark the menu tiles carry */
.wallet::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    width: 64px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--accent-500);
}
.wallet__balance {
    min-width: 0;
}
.wallet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.wallet__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 0.875rem;
    font-weight: 500;
}
.wallet__label-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent-500-a12);
    border: 1px solid var(--accent-500-a30);
    color: var(--accent-400);
    font-size: 0.8125rem;
}
.wallet__label-icon i {
    color: inherit;
}
.wallet__refresh {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: var(--wash-2);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.8125rem;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        color 0.2s ease;
}
.wallet__refresh i {
    color: inherit;
}
.wallet__refresh:hover,
.wallet__refresh:focus {
    border-color: var(--primary);
    color: var(--accent-400);
    outline: none;
}
.wallet__refresh:disabled {
    cursor: default;
}
.wallet__amount {
    margin: 8px 0 0;
    color: var(--figure-ink);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.wallet__transfer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin-top: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--accent-500-a12);
    border: 1px solid var(--accent-500-a40);
    color: var(--accent-400);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}
.wallet__transfer i {
    color: inherit;
}
.wallet__transfer--negative {
    background: var(--wash-2);
    border-color: var(--border);
    color: var(--text-soft);
}
.wallet__actions {
    display: grid;
    gap: 10px;
}
.wallet__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border-radius: var(--theme-btn-radius);
    border: 1px solid transparent;
    /* Sized to sit level with the rest of the card rather than to clear
       WCAG's large-text floor: at 19px bold the brand's ink (3.57 on the dark
       end of its own gradient) passed everywhere, and the buttons were the
       loudest thing on every page. At this size the right end of the deposit
       label is under 4.5 — design:check reports it, and the fix it names
       (a narrower gradient) lives in the brand file. */
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.1s ease;
}
.wallet__btn i {
    color: inherit;
}
.wallet__btn:hover {
    text-decoration: none;
}
.wallet__btn:active {
    transform: translateY(1px);
}
.wallet__btn--deposit {
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
}
.wallet__btn--deposit:hover {
    background: var(--theme-btn-hbg);
    color: var(--theme-btn-htext);
}
.wallet__btn--withdraw {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}
.wallet__btn--withdraw:hover {
    background: var(--card-hover);
    border-color: var(--primary);
    color: var(--text);
}
/* On a phone the card is a strip, not a hero: balance on the left, deposit
   and withdraw on the right, one row — on every page, the dashboard
   included. At full height it was the biggest thing on each page it sat
   on. The button labels stay at 19px bold — the size that keeps the
   brand's ink readable on its own gradient. */
@media (max-width: 575px) {
    /* the balance half dissolves into the card's grid so the transfer chip,
       when there is one, can take a row of its own under both halves */
    .wallet,
    .wallet--linked {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "head actions"
            "amount actions"
            "transfer transfer";
        column-gap: 10px;
        row-gap: 0;
        margin-top: 10px;
        padding: 12px 12px 12px 14px;
    }
    .wallet__balance {
        display: contents;
    }
    .wallet__head {
        grid-area: head;
    }
    .wallet__amount {
        grid-area: amount;
    }
    .wallet__transfer {
        grid-area: transfer;
        justify-self: start;
    }
    .wallet__actions {
        grid-area: actions;
        align-self: center;
    }
    .wallet::before {
        left: 14px;
        width: 40px;
        height: 2px;
    }
    .wallet__head {
        justify-content: flex-start;
        gap: 6px;
    }
    .wallet__label {
        min-width: 0;
        overflow: hidden;
        font-size: 0.75rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .wallet__label-icon {
        display: none;
    }
    .wallet__refresh {
        width: 24px;
        height: 24px;
        font-size: 0.625rem;
    }
    .wallet__amount {
        margin-top: 2px;
        font-size: 1.5rem;
    }
    .wallet__transfer {
        margin-top: 6px;
        padding: 3px 9px;
        font-size: 0.6875rem;
    }
    .wallet__actions {
        grid-auto-flow: column;
        gap: 6px;
    }
    .wallet__btn {
        height: 36px;
        padding: 0 14px;
        font-size: 0.9375rem;
    }
    .wallet .wallet__btn i {
        display: none;
    }
}
@media (max-width: 359.98px) {
    .wallet__amount {
        font-size: 1.3125rem;
    }
    .wallet__btn {
        padding: 0 10px;
    }
}

/* ============================================================
   DASHBOARD — dashboard.blade.php and dashboard/navigation.blade.php
   A lobby, read top to bottom in the order a player acts: who am I, what
   have I got, play, then everything else. One primary block (play), one
   accent block (deposit, in the wallet card — see WALLET above), and a grid of tiles
   whose icons carry the accent — the colour that means money and prizes on
   a casino page — so the tiles read as a set without competing with the
   two things that should be pressed first.
   ============================================================ */
.dash {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dash > .wallet,
.dash > .alert {
    margin: 0;
}
.dash > .page-title {
    margin-bottom: 0;
}

/* --- who am I --- */
.dash-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dash-profile__avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--grad-button);
    color: var(--primary-ink);
    font-size: 1.125rem;
}
.dash-profile__avatar i {
    color: inherit;
}
.dash-profile__id {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.dash-profile__id small {
    color: var(--text-dim);
    font-size: 0.8125rem;
}
.dash-profile__id strong {
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-profile__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.dash-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--wash);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}
.dash-chip i,
.dash-chip span {
    color: inherit;
}
.dash-chip:hover {
    background: var(--card-hover);
    border-color: var(--primary);
    color: var(--text);
    text-decoration: none;
}

/* --- play ---
   The one banner on the page. Brand button gradient, the play disc with a
   slow pulse (off under reduced motion), and three outsized glyphs —
   dice, a club, a ball — faded into the right edge as the only decoration,
   so it reads as a games banner without needing an image per brand. */
.dash-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dash-play {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 116px;
    padding: 20px 24px;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius);
    background: var(--grad-button);
    color: var(--primary-ink);
    text-decoration: none;
    box-shadow: var(--shadow-raised);
    transition:
        transform 0.15s ease,
        filter 0.2s ease;
}
.dash-play:hover {
    color: var(--primary-ink);
    text-decoration: none;
    transform: translateY(-2px);
    filter: brightness(1.08);
}
.dash-play__icon {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary-ink);
    color: var(--primary);
    font-size: 1.5rem;
}
.dash-play__icon::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--primary-ink);
    opacity: 0;
    animation: dash-pulse 2.4s ease-out infinite;
}
@keyframes dash-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }
    80%,
    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}
.dash-play__icon i {
    margin-left: 4px; /* the play glyph's weight sits left of its box */
    color: inherit;
}
.dash-play__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.dash-play__label {
    color: inherit;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.15;
}
.dash-play__desc {
    color: inherit;
    font-size: 0.875rem;
    opacity: 0.85;
}
.dash-play__go {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid currentColor;
    color: inherit;
    font-size: 1rem;
    transition: transform 0.2s ease;
}
.dash-play__go i {
    color: inherit;
}
.dash-play:hover .dash-play__go {
    transform: translateX(3px);
}
.dash-play__art {
    position: absolute;
    top: 0;
    right: 56px;
    bottom: 0;
    z-index: -1;
    width: 220px;
    pointer-events: none;
}
.dash-play__art i {
    position: absolute;
    color: var(--primary-ink);
    opacity: 0.12;
}
.dash-play__art i:nth-child(1) {
    top: -14px;
    right: 18px;
    font-size: 5.5rem;
    transform: rotate(18deg);
}
.dash-play__art i:nth-child(2) {
    bottom: -18px;
    right: 112px;
    font-size: 4.25rem;
    transform: rotate(-16deg);
}
.dash-play__art i:nth-child(3) {
    bottom: 8px;
    right: -26px;
    font-size: 3.25rem;
    opacity: 0.09;
}
@media (prefers-reduced-motion: reduce) {
    .dash-play__icon::after {
        animation: none;
    }
}

/* --- everything else ---
   Each tile wears one of three colours, by what it gives: gold for prizes
   and bonuses, the primary for events, green for money coming back. That
   is the whole of the variety, and it is what turns a grid of identical
   boxes into a set of things worth opening. */
.dash-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 -2px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
}
.dash-heading::before {
    content: "";
    width: 4px;
    height: 1em;
    border-radius: 999px;
    background: var(--accent-500);
}
.dash-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
/* The three tones, shared with the affiliate page's stat cards. */
.dash-tile,
.aff-stat {
    --tile: var(--accent-500);
    --tile-ink: var(--accent-ink);
    --tile-soft: var(--accent-500-a12);
    --tile-edge: var(--accent-500-a40);
}
.dash-tile--blue,
.aff-stat--blue {
    --tile: var(--primary);
    --tile-ink: var(--primary-ink);
    --tile-soft: var(--primary-a12);
    --tile-edge: var(--primary-a40);
}
.dash-tile--green,
.aff-stat--green {
    --tile: var(--green-500);
    --tile-ink: var(--green-900);
    --tile-soft: var(--green-500-a12);
    --tile-edge: var(--green-500-a40);
}
.dash-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* icons line up across a row when a label wraps */
    gap: 10px;
    min-height: 108px;
    padding: 18px 10px 14px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--grad-card);
    border: 1px solid var(--border);
    text-align: center;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}
/* a bar of the tile's colour along its top edge, drawn out from the
   centre on hover */
.dash-tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--tile);
    opacity: 0;
    transform: scaleX(0.4);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}
.dash-tile:hover {
    background: var(--tile-soft);
    border-color: var(--tile-edge);
    text-decoration: none;
    transform: translateY(-3px);
}
.dash-tile:hover::before {
    opacity: 1;
    transform: scaleX(1);
}
.dash-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--tile);
    color: var(--tile-ink);
    font-size: 1.125rem;
    box-shadow: 0 0 0 4px var(--tile-soft);
    transition: transform 0.2s ease;
}
.dash-tile__icon i {
    color: inherit;
}
.dash-tile:hover .dash-tile__icon {
    transform: scale(1.06) rotate(-4deg);
}
.dash-tile__label {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

/* --- the affiliate offer, as a banner of its own --- */
.dash-offer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius);
    background: var(--grad-card);
    border: 1px solid var(--green-500-a35);
    text-decoration: none;
    transition:
        transform 0.15s ease,
        background 0.2s ease;
}
.dash-offer:hover {
    background: var(--green-500-a12);
    text-decoration: none;
    transform: translateY(-2px);
}
.dash-offer__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--green-500);
    color: var(--green-900);
    font-size: 1.25rem;
}
.dash-offer__icon i {
    color: inherit;
}
.dash-offer__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dash-offer__text strong {
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
}
.dash-offer__text small {
    color: var(--text-dim);
    font-size: 0.8125rem;
}
.dash-offer__go,
.dash-offer__go i {
    color: var(--green-400);
}

/* --- LINE login, until it is linked --- */
.dash-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--grad-card);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.dash-line:hover {
    border-color: var(--green-500);
    text-decoration: none;
}
.dash-line__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--green-500);
    color: var(--primary-ink);
    font-size: 1.375rem;
}
.dash-line__icon i {
    color: inherit;
}
.dash-line__label {
    flex: 1 1 auto;
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 500;
}
.dash-line__go {
    color: var(--text-dim);
}

@media (max-width: 575px) {
    .dash-tiles {
        gap: 8px;
    }
    .dash-tile {
        min-height: 96px;
        padding: 16px 6px 12px;
        gap: 8px;
    }
    .dash-tile__icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 0.9375rem;
        box-shadow: 0 0 0 3px var(--tile-soft);
    }
    .dash-tile__label {
        font-size: 0.8125rem;
    }
}
@media (max-width: 575px) {
    .dash {
        gap: 12px;
    }
    .dash-profile {
        flex-wrap: wrap;
    }
    .dash-profile__actions {
        width: 100%;
        margin-left: 0;
    }
    .dash-chip {
        flex: 1 1 0;
        justify-content: center;
    }
    .dash-play {
        min-height: 96px;
        padding: 16px;
        gap: 14px;
    }
    .dash-play__icon {
        width: 52px;
        height: 52px;
        font-size: 1.25rem;
    }
    .dash-play__label {
        font-size: 1.375rem;
    }
    .dash-play__desc {
        font-size: 0.75rem;
    }
    .dash-play__go {
        width: 34px;
        height: 34px;
    }
    .dash-play__art {
        right: 30px;
        width: 160px;
    }
    .dash-offer {
        padding: 12px 14px;
    }
}

/* ============================================================
   AFFILIATE — user/affiliate/index.blade.php
   Built from the dashboard's parts: a hero card like the wallet for the
   commission waiting to be moved, stat cards in the dashboard tiles' three
   tones, plain cards with the dashboard's section heading for the link and
   the reports, and link rows like its offer banner. The refund page still
   uses the older affiliate-* classes in base.css; nothing here touches them.
   ============================================================ */
.aff {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.aff > .page-title,
.aff > .alert {
    margin-bottom: 0;
}

/* --- hero --- */
.aff-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--grad-card);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card);
}
.aff-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    width: 64px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--accent-500);
}
.aff-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 0.875rem;
    font-weight: 500;
}
.aff-label__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent-500-a12);
    border: 1px solid var(--accent-500-a30);
    color: var(--accent-400);
    font-size: 0.8125rem;
}
.aff-label__icon i {
    color: inherit;
}
.aff-hero__amount {
    margin: 8px 0 0;
    color: var(--figure-ink);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.aff-hero__action form {
    margin: 0;
}
.aff-hero__btn {
    width: 100%;
    cursor: pointer;
}
.aff-hero__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.aff-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--red-500-a10);
    border: 1px solid var(--red-500-a28);
    color: var(--red-100);
    font-size: 0.8125rem;
    line-height: 1.45;
}
.aff-notice i,
.aff-notice span {
    color: inherit;
}
.aff-notice i {
    margin-top: 2px;
}

/* --- stats --- */
.aff-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.aff-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--grad-card);
    border: 1px solid var(--border);
}
.aff-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
    border-radius: 10px;
    background: var(--tile);
    color: var(--tile-ink);
    font-size: 0.9375rem;
    box-shadow: 0 0 0 3px var(--tile-soft);
}
.aff-stat__icon i {
    color: inherit;
}
.aff-stat__label {
    color: var(--text-dim);
    font-size: 0.8125rem;
    line-height: 1.3;
}
.aff-stat__value {
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.aff-stat__value small {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 500;
}

/* --- cards --- */
.aff-card {
    padding: 16px 18px 18px;
    border-radius: var(--radius);
    background: var(--grad-card);
    border: 1px solid var(--border);
}
.aff-card .dash-heading {
    margin: 0 0 12px;
}
.aff-card--flush {
    padding-bottom: 6px;
}

/* --- share --- */
.aff-share__label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-dim);
    font-size: 0.8125rem;
}
.aff-share__field {
    display: flex;
    gap: 8px;
}
.aff-share__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    cursor: copy;
}
.aff-share__copy {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--grad-button);
    color: var(--primary-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.aff-share__copy i,
.aff-share__copy span {
    color: inherit;
}
.aff-share__copy:hover {
    filter: brightness(1.1);
}
.aff-share__channels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.aff-share__channel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    border-radius: 999px;
    background: var(--wash);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition:
        border-color 0.2s ease,
        color 0.2s ease;
}
.aff-share__channel i {
    color: inherit;
    font-size: 1rem;
}
.aff-share__channel:hover {
    border-color: var(--primary);
    color: var(--text);
    text-decoration: none;
}

/* --- tables --- */
.aff-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.aff-table th,
.aff-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
}
.aff-table th:first-child,
.aff-table td:first-child {
    padding-left: 0;
    text-align: left;
    white-space: normal;
}
.aff-table th:last-child,
.aff-table td:last-child {
    padding-right: 0;
}
.aff-table th {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 600;
}
.aff-table td {
    color: var(--text);
    font-size: 0.875rem;
}
.aff-table tbody tr:last-child td {
    border-bottom: 0;
}
.aff-table__total td {
    color: var(--figure-ink);
    font-weight: 700;
}
.aff-table__total td:first-child {
    color: var(--text);
}

/* --- notes --- */
.aff-note {
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--primary-a12);
    border: 1px solid var(--primary-a25);
}
.aff-note__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--blue-400);
    font-size: 0.875rem;
    font-weight: 600;
}
.aff-note__title i {
    color: inherit;
}
.aff-note ul {
    margin: 0;
    padding-left: 18px;
}
.aff-note li {
    color: var(--text-soft);
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* --- history links --- */
.aff-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.aff-link,
.row-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--grad-card);
    border: 1px solid var(--border);
    text-decoration: none;
    transition:
        border-color 0.2s ease,
        transform 0.15s ease;
}
.aff-link:hover,
.row-link:hover {
    border-color: var(--primary);
    text-decoration: none;
    transform: translateY(-2px);
}
.aff-link__icon,
.row-link__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-a16);
    color: var(--blue-400);
    font-size: 0.875rem;
}
.aff-link__icon i,
.row-link__icon i {
    color: inherit;
}
.aff-link__label,
.row-link__label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}
.aff-link__go,
.row-link__go {
    color: var(--text-dim);
    font-size: 0.75rem;
}

@media (max-width: 767.98px) {
    .aff-links {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 575px) {
    .aff {
        gap: 12px;
    }
    .aff-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }
    .aff-hero__amount {
        font-size: 2.125rem;
    }
    /* one row each: icon, label, figure — three columns are too narrow
       for a label and a number side by side */
    .aff-stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .aff-stat {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
    }
    .aff-stat__icon {
        margin-bottom: 0;
    }
    .aff-stat__value {
        font-size: 1.1875rem;
        white-space: nowrap;
    }
    .aff-card {
        padding: 14px 14px 16px;
    }
    .aff-share__copy span {
        display: none;
    }
    .aff-share__channels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   DEPOSIT / WITHDRAW — deposit.blade.php, withdraw.blade.php
   Same stack as the dashboard (.dash): the wallet strip, then the ways to
   move money as a list of method cards, then the player's bank account,
   then a row to the history. Each method card is the trigger of its Vue
   component (QrDeposit, Pay2CoinDeposit, AttachSlip, BankWithdraw,
   CryptoWithdraw) and opens that component's modal; the main method of
   each page carries the brand's button fill on its icon.
   ============================================================ */
.method-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.method-list .dash-heading {
    margin: 0 0 2px;
}
.method-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 12px 16px;
    border-radius: var(--radius);
    /* a fill of its own, so a method reads as something to press rather
       than as one more panel among the cards around it */
    background: var(--accent-500-a8);
    border: 1px solid var(--accent-500-a30);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        filter 0.2s ease,
        transform 0.15s ease;
}
.method-card:hover {
    background: var(--accent-500-a12);
    border-color: var(--accent-500);
    transform: translateY(-2px);
}
.method-card:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}
.method-card__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--accent-500-a12);
    color: var(--accent-400);
    font-size: 1.0625rem;
}
.method-card__icon i {
    color: inherit;
}
.method-card__label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}
.method-card__go {
    color: var(--text-dim);
    font-size: 0.8125rem;
}
.method-card--primary,
.method-card--primary:hover {
    background: var(--grad-button);
    border-color: transparent;
}
.method-card--primary:hover {
    filter: brightness(1.08);
}
.method-card--primary .method-card__icon {
    background: var(--primary-ink);
    color: var(--primary);
}
.method-card--primary .method-card__label,
.method-card--primary .method-card__go {
    color: var(--primary-ink);
}

/* the player's bank account */
.acct-card {
    padding: 16px 18px;
    border-radius: var(--radius);
    background: var(--grad-card);
    border: 1px solid var(--border);
}
.acct-card .dash-heading {
    margin: 0 0 14px;
    font-size: 0.9375rem;
}
.acct-card__body {
    display: flex;
    align-items: center;
    gap: 16px;
}
.acct-card__logo .thbanks {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 1.75rem;
}
.acct-card__logo .thbanks:before {
    padding: 0;
}
.acct-card__rows {
    display: grid;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
    margin: 0;
}
.acct-card__rows > div {
    display: flex;
    gap: 10px;
    align-items: baseline;
}
.acct-card__rows dt {
    flex: 0 0 72px;
    color: var(--text-dim);
    font-size: 0.8125rem;
    font-weight: 400;
}
.acct-card__rows dd {
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.acct-card__number {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
.acct-card__note {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.acct-card__line {
    color: var(--accent-400);
    font-weight: 600;
    text-transform: uppercase;
}
@media (max-width: 575px) {
    .method-card {
        min-height: 58px;
        padding: 10px 14px;
    }
    .method-card__label {
        font-size: 0.9375rem;
    }
    .acct-card {
        padding: 14px;
    }
    .acct-card__logo .thbanks {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        font-size: 1.5rem;
    }
}

/* ============================================================
   AUTH — auth/login.blade.php
   The dashboard's parts again: a card in the brand's card fill with the
   accent mark on its top edge, a heading with a round icon, fields with
   their icon inside, the brand's own button to submit, and the register
   offer as a row link underneath. LINE login keeps LINE's green.
   ============================================================ */
.auth {
    max-width: 480px;
    margin: 0 auto;
}
.auth-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 22px 24px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--grad-card);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card);
}
.auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    width: 64px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--accent-500);
}
.auth-card > .alert {
    margin: 0;
}
.auth-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.auth-card__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--grad-button);
    color: var(--primary-ink);
    font-size: 1.125rem;
}
.auth-card__icon i {
    color: inherit;
}
.auth-card__title {
    margin: 0;
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}
.auth-card__sub {
    margin: 2px 0 0;
    color: var(--text-dim);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}
.auth-field label {
    display: block;
    margin: 0 0 6px;
    color: var(--text-soft);
    font-size: 0.875rem;
    font-weight: 500;
}
.auth-field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.auth-field__label-row .forgot {
    font-size: 0.8125rem;
    font-weight: 500;
}
.auth-field__control {
    position: relative;
}
.auth-field__icon {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    color: var(--text-dim);
    font-size: 1rem;
    pointer-events: none;
    transform: translateY(-50%);
    transition: color 0.2s ease;
}
.auth-field__control .form-control {
    height: 50px;
    padding-left: 42px;
    padding-right: 14px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
}
.auth-field__control:focus-within .auth-field__icon {
    color: var(--accent-400);
}
.auth-field__control--toggle .form-control {
    padding-right: 48px;
}
.auth-field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transform: translateY(-50%);
}
.auth-field__toggle i {
    color: inherit;
}
.auth-field__toggle:hover,
.auth-field__toggle:focus {
    color: var(--text);
    outline: none;
}

.auth-submit,
.auth-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: var(--theme-btn-radius);
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.1s ease;
}
.auth-submit i,
.auth-line i {
    color: inherit;
}
.auth-submit {
    margin-top: 4px;
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
}
.auth-submit:hover {
    background: var(--theme-btn-hbg);
    color: var(--theme-btn-htext);
}
.auth-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.auth-submit:active,
.auth-line:active {
    transform: translateY(1px);
}
.auth-submit:focus,
.auth-line:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}
/* LINE's own green, the same token the bottom-bar and contact buttons use */
.auth-line,
.auth-line:hover {
    background: var(--green-500);
    color: var(--primary-ink);
    text-decoration: none;
}
.auth-line:hover {
    background: var(--green-600);
}
.auth-line i {
    font-size: 1.25rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dim);
    font-size: 0.8125rem;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border);
}
.auth-divider span {
    color: inherit;
}
.auth .row-link__label strong {
    color: var(--accent-400);
}
@media (max-width: 575px) {
    .auth-card {
        padding: 18px 16px 20px;
    }
    .auth-card__title {
        font-size: 1.25rem;
    }
}

/* ============================================================
   CONTACT — floating LINE / Telegram buttons, bottom right
   ============================================================ */
.contact-float {
    /* design:keep — LINE's and Telegram's own colours, not this brand's. A
       button that opens LINE has to look like LINE on whatever brand ships
       this codebase, so these stay off the palette. Same reasoning as the
       contact page and the KYC card. */
    --channel-line: #06c755;
    --channel-line-ring: rgba(6, 199, 85, 0.45);
    --channel-tg: #29a9eb;

    position: fixed;
    right: 12px;
    /* clear of the fixed bottom nav, which is on every page in this layout */
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    z-index: 9990;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contact-float__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.375rem;
    text-decoration: none;
    box-shadow: var(--shadow-raised);
    transition:
        transform 0.18s ease,
        filter 0.2s ease;
}
.contact-float__btn:hover,
.contact-float__btn:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.06);
}
.contact-float__btn--line {
    background: var(--channel-line);
}
.contact-float__btn--tg {
    background: var(--channel-tg);
}
/* one quiet ring on the first channel, so the stack is noticed once */
.contact-float__btn--line::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: sbg-contact-ring 2.8s ease-out infinite;
    pointer-events: none;
}
@keyframes sbg-contact-ring {
    0% {
        box-shadow: 0 0 0 0 var(--channel-line-ring);
    }
    70%,
    100% {
        box-shadow: 0 0 0 14px transparent;
    }
}
/* name of the channel, on hover — pointer devices only */
.contact-float__label {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translate(8px, -50%);
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}
@media (hover: hover) {
    .contact-float__btn:hover .contact-float__label,
    .contact-float__btn:focus .contact-float__label {
        opacity: 1;
        transform: translate(0, -50%);
    }
}
@media (min-width: 768px) {
    .contact-float {
        right: 18px;
        bottom: calc(104px + env(safe-area-inset-bottom, 0px));
        gap: 12px;
    }
    .contact-float__btn {
        width: 54px;
        height: 54px;
        font-size: 1.5rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .contact-float__btn--line::after {
        animation: none;
    }
}

/* Index (SEO) footer text block — readable on dark */
.footer-text {
    margin: 0 auto 14px;
    padding: 16px 18px;
    max-width: 920px;
    border-radius: var(--radius);
    background: var(--wash);
    border: 1px solid var(--border);
}
.footer-text p {
    color: var(--text-dim);
    font-size: 0.75rem;
    line-height: 1.75;
    margin: 0;
}
.footer-text a {
    color: var(--blue-400);
}
.footer-text a:hover {
    color: var(--accent-400);
}
.footer-copyright p {
    color: var(--text-dim);
}

/* History link */
.history-link-text {
    transition: color 0.2s ease;
}
.history-link-text:hover {
    color: var(--accent-400) !important;
}

/* ---------- QR deposit modal ---------- */
/* QR image needs a white field to scan */
.qr-image {
    /* design:keep — this white is a scanner requirement, not a brand choice.
       The quiet zone around a QR code has to stay white or readers start
       failing on it, so this rule does not follow the palette. */
    background: #fff;
    border: 6px solid #fff;
    border-radius: var(--radius);
    box-shadow:
        0 0 0 1px var(--border-strong),
        var(--shadow-card);
}

/* Receiver / amount box */
.deposit-box {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--wash);
    color: var(--text);
    box-shadow: none;
}

/* Quick-amount chips — modern interactive pills */
.badge.pointer:hover,
.badge-secondary.pointer:hover {
    background: var(--grad-button);
    color: var(--primary-ink);
    border-color: transparent;
}
#modal-qr .badge {
    font-size: 100%;
}

/* ---------- Solid background utilities on dark ---------- */
.bg-danger {
    background: var(--red-600) !important;
}
.bg-warning {
    background: var(--theme-btn-bg) !important;
}
.text-danger {
    color: var(--red-400) !important;
}
.text-success {
    color: var(--green-400) !important;
}