/* ======================================================================
   HEADER ACCOUNT AFFORDANCES  (Kartoosh parity, mobile + desktop)
   ----------------------------------------------------------------------
   The gold Deposit pill, the balance shown as plain text rather than the
   username in a dark pill, and the mobile balance chip + profile icon.

   This file used to be profile-panel.css and also carried the Kartoosh
   profile overlay: the full-screen panel, its balance/bonus cards, the
   grouped accordion nav, the promo box, and the styles for the iframe that
   hosted profile.php. All of that is deleted. pages/profile.php is now
   linked directly from the header, so there is no overlay, no frame and no
   chrome-injection CSS - the profile page brings its own profile.css.

   Everything below is still live: these are the profile/account links in
   the header, which now navigate instead of opening a panel.
   ====================================================================== */

/* ---------- desktop header ---------- */
.tb-deposit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    background: #f8c524;
    color: #000205;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.tb-deposit-btn:hover {
    background: #ffd23f;
}

.tb-deposit-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 16px;
}

.tb-balance {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    padding: 0 4px;
}

.tb-balance:hover {
    color: #f8c524;
}

/* Kartoosh shows the username in the avatar menu, not in the bar. */
.topbar .tb-account {
    display: none;
}

@media (min-width: 901px) {
    .tb-account {
        display: none;
    }
}

@media (max-width: 900px) {
    /* Mobile shows the balance as plain text, like Kartoosh, and hides the gold
       Deposit pill. Note there is currently no Deposit control in the mobile
       header at all: the pill used to be justified by the panel's own Deposit
       button, and that button was dropped from the panel before the panel was
       removed. Worth revisiting separately - unhiding the pill here is a
       one-line change, but it needs a layout check at 360px first. */
    .tb-deposit-btn {
        display: none;
    }

    .tb-balance {
        display: inline-flex;
        align-items: center;
        height: 28px;
        padding: 0 8px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.08);
        font-size: 13px;
    }

    /* The mobile chip used to carry .btn .s-small .sign-in, which painted it as a
       gold button. Kartoosh shows the balance as plain white text. The chip
       picked up its gold from a rule in joker-mobile.css, which loads after
       this file, so the override needs !important to win. */
    .hdr-user-bc .hdr-user-chip,
    .hdr-user-bc a.hdr-user-chip {
        display: inline-flex !important;
        align-items: center;
        height: auto !important;
        min-height: 0;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        color: #ffffff !important;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
        cursor: pointer;
    }

    .hdr-user-bc .hdr-user-chip:hover,
    .hdr-user-bc a.hdr-user-chip:hover {
        background: transparent !important;
        color: #f8c524 !important;
    }

    .hdr-user-bc .hdr-user-chip span {
        background: transparent !important;
        color: inherit !important;
    }

    /* Kartoosh keeps a profile icon immediately right of the mobile balance.
       Plain white glyph on nothing, matching the balance's weight, with a tap
       target large enough for a thumb. joker-mobile.css loads later, so the
       properties it could repaint are forced. */
    .hdr-user-bc .hdr-profile-btn,
    .hdr-user-bc a.hdr-profile-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 26px !important;
        min-width: 26px;
        height: 26px !important;
        min-height: 0;
        margin-left: 6px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50%;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        color: #ffffff !important;
        line-height: 0;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .hdr-user-bc .hdr-profile-btn svg,
    .hdr-user-bc a.hdr-profile-btn svg {
        width: 19px;
        height: 19px;
        display: block;
        fill: currentColor;
        pointer-events: none;
    }

    .hdr-user-bc .hdr-profile-btn:hover,
    .hdr-user-bc .hdr-profile-btn:focus-visible,
    .hdr-user-bc a.hdr-profile-btn:hover,
    .hdr-user-bc a.hdr-profile-btn:focus-visible {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        outline: none;
    }

    .hdr-user-bc .hdr-profile-btn:active,
    .hdr-user-bc a.hdr-profile-btn:active {
        background: rgba(255, 255, 255, 0.16) !important;
    }
}