/* ═══════════════════════════════════════════════════════════════════
   "The Midnight Salon" design system
   Deep felt greens · antique gold foil · engraved serif capitals
   Loaded after style.css — owns the global theme for every page.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Surfaces — green-black felt, darkest to lightest */
    --hr-black:   #070A08;
    --hr-felt-950:#0A0E0B;
    --hr-felt-900:#0C110D;
    --hr-felt-800:#101812;
    --hr-felt-700:#15201A;
    --hr-felt-600:#1B2A21;

    /* Gold foil ramp */
    --hr-gold-100:#F7EDD3;
    --hr-gold-200:#F2E3BC;
    --hr-gold-300:#E8CE93;
    --hr-gold-400:#D9B979;
    --hr-gold-500:#C9A961;
    --hr-gold-600:#A8853F;
    --hr-gold-700:#7D6128;

    /* Ink */
    --hr-cream:  #F1EBDD;
    --hr-parch:  #B9BFAF;   /* muted body text, green-grey  */
    --hr-muted:  #77816F;
    --hr-faint:  #4D564A;

    /* Accents */
    --hr-emerald:#3FA372;   /* wins, active, success        */
    --hr-crimson:#B33A46;   /* card-suit red, live signals  */

    /* Lines */
    --hr-line:        rgba(201,169,97,.16);
    --hr-line-strong: rgba(201,169,97,.38);
    --hr-line-faint:  rgba(201,169,97,.08);

    --hr-font-display: 'Cinzel', 'Times New Roman', serif;
    --hr-font-body:    'Jost', 'Futura', sans-serif;

    --hr-shadow-card: 0 18px 40px -18px rgba(0,0,0,.75);
    --hr-glow-gold:   0 0 32px rgba(201,169,97,.18);
}

/* ── Global canvas ─────────────────────────────────────────────── */

body {
    font-family: var(--hr-font-body);
    color: var(--hr-parch);
    background-color: var(--hr-black);
}

/* Overrides the old navy radial from style.css (loaded before us).
   Three layers: warm table-lamp glow, felt base, film grain.       */
.main-gradient-bg {
    background:
        radial-gradient(ellipse 120% 70% at 50% -20%, rgba(201,169,97,.075) 0%, transparent 55%),
        radial-gradient(ellipse 90% 100% at 85% 110%, rgba(31,79,58,.20) 0%, transparent 60%),
        linear-gradient(180deg, var(--hr-felt-900) 0%, var(--hr-black) 100%);
    position: relative;
}
.main-gradient-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* Scrollbars — brass on felt */
::-webkit-scrollbar       { width: 9px; }
::-webkit-scrollbar-track { background: var(--hr-felt-950); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--hr-gold-700), #574517);
    border-radius: 8px;
    border: 2px solid var(--hr-felt-950);
}
::-webkit-scrollbar-thumb:hover { background: var(--hr-gold-600); }

::selection { background: rgba(201,169,97,.85); color: #171208; }

/* ── Typography helpers ────────────────────────────────────────── */

.hr-display {
    font-family: var(--hr-font-display);
    color: var(--hr-cream);
    letter-spacing: .04em;
}

.hr-overline {
    font-family: var(--hr-font-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--hr-gold-500);
}

/* Gold-foil text — subtle vertical sheen */
.hr-foil {
    background: linear-gradient(175deg, #F2E3BC 8%, #D9B979 36%, #A8853F 62%, #E8CE93 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Buttons ───────────────────────────────────────────────────── */

.hr-btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .78rem 1.7rem;
    font-family: var(--hr-font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #171208;
    background: linear-gradient(160deg, #EFDCA9 0%, #D9B979 38%, #B8934B 72%, #D9B979 100%);
    border: 1px solid rgba(247,237,211,.45);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 28px -12px rgba(201,169,97,.55), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hr-btn-gold::after {           /* foil shine sweep */
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -80%;
    width: 55%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
}
.hr-btn-gold:hover  { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 16px 34px -12px rgba(201,169,97,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.hr-btn-gold:hover::after { left: 120%; }
.hr-btn-gold:active { transform: translateY(0) scale(.985); }

.hr-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .78rem 1.7rem;
    font-family: var(--hr-font-body);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hr-gold-300);
    background: transparent;
    border: 1px solid var(--hr-line-strong);
    border-radius: 2px;
    cursor: pointer;
    transition: all .18s ease;
}
.hr-btn-ghost:hover {
    border-color: var(--hr-gold-500);
    background: rgba(201,169,97,.07);
    color: var(--hr-gold-200);
}

/* ── Deco section divider ──────────────────────────────────────── */

.hr-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.hr-divider .hr-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hr-line-strong));
}
.hr-divider .hr-rule:last-child {
    background: linear-gradient(90deg, var(--hr-line-strong), transparent);
}
.hr-diamond {
    width: 7px; height: 7px;
    background: var(--hr-gold-500);
    transform: rotate(45deg);
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(201,169,97,.5);
}
.hr-diamond--sm { width: 4px; height: 4px; opacity: .7; }

/* ── Panel / framed surface ────────────────────────────────────── */

.hr-panel {
    background: linear-gradient(170deg, var(--hr-felt-800) 0%, var(--hr-felt-900) 100%);
    border: 1px solid var(--hr-line);
    box-shadow: var(--hr-shadow-card);
    position: relative;
}
/* double hairline inset frame */
.hr-panel--framed::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid var(--hr-line-faint);
    pointer-events: none;
}

/* Gold corner ticks (place on a relative parent) */
.hr-corners::before,
.hr-corners::after,
.hr-corners > .hr-corner-b::before,
.hr-corners > .hr-corner-b::after {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    border-color: var(--hr-gold-500);
    border-style: solid;
    opacity: .85;
    z-index: 3;
}
.hr-corners::before                 { top: 10px; left: 10px;  border-width: 1px 0 0 1px; }
.hr-corners::after                  { top: 10px; right: 10px; border-width: 1px 1px 0 0; }
.hr-corners > .hr-corner-b::before  { bottom: 10px; left: 10px;  border-width: 0 0 1px 1px; }
.hr-corners > .hr-corner-b::after   { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }

/* ═══ HERO — The Marquee ═══════════════════════════════════════ */

.hr-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 90% 130% at 12% 50%, rgba(201,169,97,.10) 0%, transparent 55%),
        radial-gradient(ellipse 60% 120% at 88% 50%, rgba(31,79,58,.35) 0%, transparent 65%),
        linear-gradient(165deg, #131D16 0%, #0B100C 70%, #080B08 100%);
    border: 1px solid var(--hr-line);
    box-shadow: var(--hr-shadow-card), var(--hr-glow-gold);
}

/* engraved sunburst rays behind the chip */
.hr-hero-rays {
    position: absolute;
    top: 50%; right: -12%;
    width: 620px; height: 620px;
    transform: translateY(-50%);
    background: repeating-conic-gradient(
        from 0deg,
        rgba(201,169,97,.06) 0deg 4deg,
        transparent 4deg 12deg
    );
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 68%);
    mask-image: radial-gradient(circle, black 0%, transparent 68%);
    animation: hrRaysTurn 90s linear infinite;
    pointer-events: none;
}

/* floating suit glyphs */
.hr-suit {
    position: absolute;
    font-size: 1rem;
    color: var(--hr-gold-500);
    opacity: .10;
    animation: hrSuitFloat 9s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
}

/* ── The Golden Chip ── */
.hr-chip {
    position: relative;
    width: 190px; height: 190px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.16), transparent 45%),
        conic-gradient(from 20deg,
            #201A0C 0deg 24deg,  #C9A961 24deg 30deg,
            #201A0C 30deg 84deg, #C9A961 84deg 90deg,
            #201A0C 90deg 144deg,#C9A961 144deg 150deg,
            #201A0C 150deg 204deg,#C9A961 204deg 210deg,
            #201A0C 210deg 264deg,#C9A961 264deg 270deg,
            #201A0C 270deg 324deg,#C9A961 324deg 330deg,
            #201A0C 330deg 360deg);
    border: 3px solid var(--hr-gold-500);
    box-shadow:
        0 24px 60px -18px rgba(0,0,0,.9),
        0 0 44px rgba(201,169,97,.22),
        inset 0 0 0 1px rgba(0,0,0,.6);
    animation: hrChipTurn 26s linear infinite;
}
.hr-chip-inner {
    position: absolute;
    inset: 26px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.10), transparent 50%),
        linear-gradient(160deg, #17110a, #241a0d);
    border: 1px dashed rgba(201,169,97,.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hr-chip-inner span {
    font-family: var(--hr-font-display);
    font-weight: 700;
    font-size: 3.4rem;
    line-height: 1;
    animation: hrChipCounter 26s linear infinite;  /* keep monogram upright */
}

@keyframes hrChipTurn    { to { transform: rotate(360deg);  } }
@keyframes hrChipCounter { to { transform: rotate(-360deg); } }
@keyframes hrRaysTurn    { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes hrSuitFloat {
    0%,100% { transform: translateY(0)    rotate(-6deg); }
    50%     { transform: translateY(-14px) rotate(6deg); }
}

/* hero entrance choreography */
@keyframes hrRise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hr-rise    { opacity: 0; animation: hrRise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hr-rise-1  { animation-delay: .05s; }
.hr-rise-2  { animation-delay: .16s; }
.hr-rise-3  { animation-delay: .27s; }
.hr-rise-4  { animation-delay: .38s; }
.hr-rise-5  { animation-delay: .5s;  }

/* hero stat block */
.hr-stat-num {
    font-family: var(--hr-font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--hr-gold-300);
    line-height: 1;
}
.hr-stat-lbl {
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--hr-muted);
    margin-top: .35rem;
}

/* ═══ GAME CARDS — The Floor ═══════════════════════════════════ */

.hr-game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background: linear-gradient(170deg, var(--hr-felt-700), var(--hr-felt-900));
    border: 1px solid var(--hr-line);
    border-radius: 3px;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .25s ease;
    opacity: 0;
    animation: hrRise .55s cubic-bezier(.2,.7,.2,1) forwards;
}
/* stagger the floor reveal */
.hr-game-card:nth-child(1)  { animation-delay: .05s; }
.hr-game-card:nth-child(2)  { animation-delay: .09s; }
.hr-game-card:nth-child(3)  { animation-delay: .13s; }
.hr-game-card:nth-child(4)  { animation-delay: .17s; }
.hr-game-card:nth-child(5)  { animation-delay: .21s; }
.hr-game-card:nth-child(6)  { animation-delay: .25s; }
.hr-game-card:nth-child(7)  { animation-delay: .29s; }
.hr-game-card:nth-child(8)  { animation-delay: .33s; }
.hr-game-card:nth-child(9)  { animation-delay: .37s; }
.hr-game-card:nth-child(10) { animation-delay: .41s; }
.hr-game-card:nth-child(n+11) { animation-delay: .45s; }

.hr-game-card:hover {
    transform: translateY(-6px);
    border-color: var(--hr-line-strong);
    box-shadow: 0 22px 44px -16px rgba(0,0,0,.85), 0 0 30px rgba(201,169,97,.14);
}
.hr-game-card:active { transform: translateY(-2px) scale(.98); }

/* shine sweep across the card face */
.hr-game-card::after {
    content: '';
    position: absolute;
    top: 0; bottom: 40%;
    left: -90%;
    width: 60%;
    background: linear-gradient(100deg, transparent, rgba(242,227,188,.09), transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
    pointer-events: none;
    z-index: 2;
}
.hr-game-card:hover::after { left: 130%; }

.hr-game-face {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* dark felt scrim keeps admin-set gradients muted + on-theme */
    background:
        linear-gradient(180deg, rgba(9,13,10,.55) 0%, rgba(9,13,10,.75) 100%),
        radial-gradient(ellipse 80% 70% at 50% 42%, rgba(201,169,97,.10), transparent 70%);
}
.hr-game-face img {
    width: 74%;
    height: 74%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.6));
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    position: relative;
    z-index: 1;
}
.hr-game-card:hover .hr-game-face img { transform: scale(1.07) translateY(-2px); }

/* hairline between face and plaque */
.hr-game-meta {
    border-top: 1px solid var(--hr-line-faint);
    background: rgba(7,10,8,.65);
    padding: .5rem .55rem .55rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    position: relative;
    z-index: 1;
}
.hr-game-name {
    font-family: var(--hr-font-body);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hr-cream);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
@media (min-width: 640px) { .hr-game-name { font-size: .64rem; } }

.hr-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .52rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.hr-tag--active { color: var(--hr-emerald); }
.hr-tag--play   { color: var(--hr-faint); transition: color .2s ease; }
.hr-game-card:hover .hr-tag--play { color: var(--hr-gold-400); }

.hr-tag-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    animation: hrPulse 2.2s ease-in-out infinite;
}
@keyframes hrPulse {
    0%,100% { opacity: 1;  transform: scale(1);  }
    50%     { opacity: .35; transform: scale(.6); }
}

/* ═══ WINNERS MARQUEE ══════════════════════════════════════════ */

.hr-marquee-wrap {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--hr-line-faint);
    border-bottom: 1px solid var(--hr-line-faint);
    background: rgba(9,13,10,.55);
    padding: .7rem 0;
}
.hr-marquee-fade-l,
.hr-marquee-fade-r {
    position: absolute;
    top: 0; bottom: 0;
    width: 70px;
    z-index: 10;
    pointer-events: none;
}
.hr-marquee-fade-l { left: 0;  background: linear-gradient(90deg, var(--hr-felt-950), transparent); }
.hr-marquee-fade-r { right: 0; background: linear-gradient(-90deg, var(--hr-felt-950), transparent); }

.hr-ticker-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: linear-gradient(170deg, var(--hr-felt-700), var(--hr-felt-900));
    border: 1px solid var(--hr-line);
    border-radius: 999px;
    padding: .32rem .95rem .32rem .4rem;
    margin: 0 .45rem;
    flex-shrink: 0;
}
.hr-ticker-chip img {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--hr-line-strong);
    background: var(--hr-felt-900);
}
.hr-ticker-name  { font-size: .6rem;  font-weight: 600; letter-spacing: .1em;  text-transform: uppercase; color: var(--hr-cream); }
.hr-ticker-game  { font-size: .54rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--hr-muted); }
.hr-ticker-time  { font-size: .52rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--hr-faint); }
.hr-ticker-amt   { font-family: var(--hr-font-display); font-size: .72rem; font-weight: 700; color: var(--hr-gold-300); }

@keyframes hrMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.hr-marquee {
    display: flex;
    width: max-content;
    animation: hrMarquee 42s linear infinite;
}
.hr-marquee:hover { animation-play-state: paused; }

/* ═══ NAVBAR ═══════════════════════════════════════════════════ */

.hrnav {
    background: rgba(8,11,9,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--hr-line);
    box-shadow: 0 14px 40px -18px rgba(0,0,0,.9);
}
/* gold hairline glint along the bottom edge */
.hrnav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(201,169,97,.55) 50%, transparent 95%);
    pointer-events: none;
}

.hrnav-brand-name {
    font-family: var(--hr-font-display);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--hr-cream);
    line-height: 1;
    white-space: nowrap;
}
.hrnav-brand-sub {
    font-size: .46rem;
    font-weight: 600;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--hr-gold-600);
    margin-top: .22rem;
}

/* wallet chips in the nav */
.hrnav-wallet {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: linear-gradient(170deg, var(--hr-felt-700), var(--hr-felt-900));
    border: 1px solid var(--hr-line);
    border-radius: 999px;
    padding: .42rem .85rem;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hrnav-wallet:hover { border-color: var(--hr-line-strong); box-shadow: 0 0 18px rgba(201,169,97,.15); }
.hrnav-wallet-lbl { font-size: .52rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--hr-muted); }
.hrnav-wallet-amt { font-family: var(--hr-font-display); font-size: .82rem; font-weight: 700; color: var(--hr-gold-300); white-space: nowrap; }
.hrnav-wallet--bonus .hrnav-wallet-amt { color: var(--hr-emerald); }
.hrnav-wallet-plus {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(160deg, #EFDCA9, #B8934B);
    color: #171208;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hrnav-icon-btn {
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hr-muted);
    background: transparent;
    border: 1px solid var(--hr-line);
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
}
.hrnav-icon-btn:hover { color: var(--hr-gold-300); border-color: var(--hr-line-strong); background: rgba(201,169,97,.06); }

.hrnav-signin {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--hr-parch);
    background: none;
    border: none;
    cursor: pointer;
    transition: color .2s ease;
    white-space: nowrap;
}
.hrnav-signin:hover { color: var(--hr-gold-300); }

.hrnav-user-name {
    font-family: var(--hr-font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--hr-cream);
}
.hrnav-user-role {
    font-size: .5rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--hr-gold-500);
}

/* ═══ SIDEBAR ══════════════════════════════════════════════════ */

#sidebar {
    background: linear-gradient(180deg, var(--hr-felt-900) 0%, var(--hr-felt-950) 100%);
    border-right: 1px solid var(--hr-line);
}

.sb-section-label {
    font-family: var(--hr-font-body);
    font-size: .54rem;
    font-weight: 600;
    color: var(--hr-gold-600);
    text-transform: uppercase;
    letter-spacing: .34em;
    padding: 1.15rem .95rem .4rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sb-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--hr-line), transparent);
}

.sb-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .58rem .95rem;
    margin: .12rem .45rem;
    border-radius: 2px;
    border: 1px solid transparent;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--hr-muted);
    text-decoration: none;
    transition: all .18s ease;
    position: relative;
}
.sb-link:hover {
    color: var(--hr-cream);
    background: rgba(201,169,97,.05);
}
.sb-link.active {
    color: var(--hr-gold-300);
    background: linear-gradient(90deg, rgba(201,169,97,.12), rgba(201,169,97,.02));
    border-color: var(--hr-line);
}
.sb-link.active::before {
    content: '';
    position: absolute;
    left: -0.45rem;
    top: 18%; bottom: 18%;
    width: 2px;
    background: var(--hr-gold-500);
    box-shadow: 0 0 8px rgba(201,169,97,.6);
}
.sb-link svg { flex-shrink: 0; opacity: .55; transition: opacity .18s; }
.sb-link:hover svg  { opacity: .85; }
.sb-link.active svg { opacity: 1; color: var(--hr-gold-400); }

.sb-link-sm {
    display: block;
    padding: .34rem .95rem;
    margin: .05rem .45rem;
    border-radius: 2px;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--hr-faint);
    text-decoration: none;
    transition: color .15s;
}
.sb-link-sm:hover  { color: var(--hr-parch); }
.sb-link-sm.active { color: var(--hr-gold-400); }

.sb-user-card {
    margin: 0 .55rem;
    padding: .7rem .75rem;
    border-radius: 2px;
    background: linear-gradient(170deg, var(--hr-felt-700), var(--hr-felt-900));
    border: 1px solid var(--hr-line);
    display: flex;
    align-items: center;
    gap: .6rem;
    transition: border-color .15s;
}
.sb-user-card:hover { border-color: var(--hr-line-strong); }

.sb-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--hr-line-strong);
    flex-shrink: 0;
}

.sb-btn-primary {
    width: 100%;
    padding: .7rem;
    background: linear-gradient(160deg, #EFDCA9 0%, #D9B979 38%, #B8934B 72%, #D9B979 100%);
    color: #171208;
    font-family: var(--hr-font-body);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .22em;
    border: 1px solid rgba(247,237,211,.4);
    border-radius: 2px;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 10px 24px -12px rgba(201,169,97,.5);
}
.sb-btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }

.sb-btn-ghost {
    width: 100%;
    padding: .65rem;
    background: transparent;
    border: 1px solid var(--hr-line);
    color: var(--hr-muted);
    font-family: var(--hr-font-body);
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .22em;
    border-radius: 2px;
    cursor: pointer;
    transition: all .18s ease;
}
.sb-btn-ghost:hover { border-color: var(--hr-line-strong); color: var(--hr-gold-300); }

#sidebar .custom-scrollbar::-webkit-scrollbar { width: 3px; }
#sidebar .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
#sidebar .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(201,169,97,.28); border-radius: 3px; border: none; }

/* ═══ BOTTOM NAV (mobile) ══════════════════════════════════════ */

#bottom-nav {
    background: rgba(7,10,8,.96);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-top: 1px solid var(--hr-line);
    box-shadow: 0 -12px 36px rgba(0,0,0,.6);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
#bottom-nav::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 2px;
    background: rgba(201,169,97,.5);
    border-radius: 0 0 4px 4px;
    filter: blur(3px);
}

.bnav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 9px;
    position: relative;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.bnav-icon-wrap {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    background: transparent;
}
.bnav-btn.active .bnav-icon-wrap {
    background: rgba(201,169,97,.12);
    box-shadow: 0 0 14px rgba(201,169,97,.18);
}
.bnav-btn .bnav-icon { transition: transform .2s ease, color .2s ease; color: var(--hr-faint); }
.bnav-btn.active .bnav-icon { color: var(--hr-gold-400); }

.bnav-label {
    font-family: var(--hr-font-body);
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--hr-faint);
    transition: color .2s ease;
}
.bnav-btn.active .bnav-label { color: var(--hr-gold-400); }

.bnav-deposit {
    flex: 1.2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}
.bnav-deposit-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 3px 8px 9px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bnav-deposit-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(160deg, #EFDCA9 0%, #D9B979 40%, #B8934B 100%);
    border: 1px dashed rgba(23,18,8,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 22px rgba(201,169,97,.45), 0 0 0 3px rgba(201,169,97,.14);
    transition: transform .2s ease, box-shadow .2s ease;
    margin-top: -12px;
}
.bnav-deposit-inner:active .bnav-deposit-icon { transform: scale(.9); }
.bnav-deposit-label {
    font-family: var(--hr-font-body);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--hr-gold-400);
}

@keyframes bnav-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.bnav-btn:active .bnav-icon-wrap { animation: bnav-pop .22s ease-out; }

/* ═══ FOOTER ═══════════════════════════════════════════════════ */

.hr-footer {
    border-top: 1px solid var(--hr-line);
    background: var(--hr-felt-950);
    position: relative;
    width: 100%;
}
.hr-footer::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 8%, rgba(201,169,97,.4) 50%, transparent 92%);
}
.hr-footer-link {
    font-family: var(--hr-font-body);
    font-size: .58rem;
    font-weight: 500;
    color: var(--hr-faint);
    text-transform: uppercase;
    letter-spacing: .22em;
    text-decoration: none;
    transition: color .18s ease;
}
.hr-footer-link:hover { color: var(--hr-gold-400); }

/* mobile: extra bottom padding for fixed bottom nav */
.hr-footer { padding-bottom: 4.5rem; }
.hr-ft-desktop { display: none; }
@media (min-width: 1024px) {
    .hr-footer { padding-bottom: 0; }
    .hr-ft-desktop { display: inline; }
}

/* ═══ FORMS ════════════════════════════════════════════════════ */

.hr-label {
    display: block;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--hr-muted);
    margin-bottom: .4rem;
}

.hr-input, .hr-select, .hr-textarea {
    width: 100%;
    background: rgba(7,10,8,.85);
    border: 1px solid var(--hr-line);
    border-radius: 2px;
    color: var(--hr-cream);
    font-family: var(--hr-font-body);
    font-size: .85rem;
    padding: .7rem .85rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.hr-input:focus, .hr-select:focus, .hr-textarea:focus {
    border-color: var(--hr-gold-500);
    box-shadow: 0 0 0 1px rgba(201,169,97,.22);
}
.hr-input::placeholder, .hr-textarea::placeholder { color: var(--hr-faint); }
.hr-select option { background: var(--hr-felt-900); color: var(--hr-cream); }

/* amount / numeric display inputs — engraved serif numerals */
.hr-input--amount {
    font-family: var(--hr-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--hr-gold-300);
    letter-spacing: .04em;
}

/* form feedback boxes */
.hr-alert {
    padding: .6rem .8rem;
    border-radius: 2px;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .04em;
    border: 1px solid;
}
.hr-alert--error   { color: #D98A93; border-color: rgba(179,58,70,.4);  background: rgba(179,58,70,.1); }
.hr-alert--success { color: var(--hr-emerald); border-color: rgba(63,163,114,.35); background: rgba(63,163,114,.08); }
.hr-alert--info    { color: var(--hr-gold-300); border-color: var(--hr-line-strong); background: rgba(201,169,97,.07); }

/* ═══ TABS & PAGINATION — contract with static/js/main.js ═══════
   main.js toggles .hr-tab-active on tab buttons and .hr-page-active
   on pagination buttons. Filterable sections carry .hr-filter-section. */

.hr-tab {
    padding: .5rem 1.05rem;
    font-family: var(--hr-font-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--hr-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}
.hr-tab:hover { color: var(--hr-cream); }
.hr-tab.hr-tab-active {
    color: #171208;
    background: linear-gradient(160deg, #EFDCA9 0%, #D9B979 45%, #B8934B 100%);
    border-color: rgba(247,237,211,.4);
    box-shadow: 0 8px 18px -8px rgba(201,169,97,.5);
}

.hr-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 .5rem;
    font-family: var(--hr-font-body);
    font-size: .68rem;
    font-weight: 600;
    color: var(--hr-muted);
    background: transparent;
    border: 1px solid var(--hr-line);
    border-radius: 2px;
    cursor: pointer;
    transition: all .18s ease;
}
.hr-page-btn:hover { color: var(--hr-gold-300); border-color: var(--hr-line-strong); }
.hr-page-btn.hr-page-active {
    color: #171208;
    background: linear-gradient(160deg, #EFDCA9, #D9B979 45%, #B8934B);
    border-color: rgba(247,237,211,.4);
}

/* ═══ TABLES ═══════════════════════════════════════════════════ */

.hr-table { width: 100%; border-collapse: collapse; }
.hr-table thead th {
    font-family: var(--hr-font-body);
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hr-gold-600);
    text-align: left;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--hr-line);
    white-space: nowrap;
}
.hr-table tbody td {
    padding: .78rem .85rem;
    font-size: .78rem;
    color: var(--hr-parch);
    border-bottom: 1px solid var(--hr-line-faint);
}
.hr-table tbody tr { transition: background .15s ease; }
.hr-table tbody tr:hover { background: rgba(201,169,97,.04); }
.hr-td-amount { font-family: var(--hr-font-display); font-weight: 700; color: var(--hr-gold-300); }

/* ═══ STATUS BADGES ════════════════════════════════════════════ */

.hr-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .24rem .62rem;
    border-radius: 999px;
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    border: 1px solid;
    white-space: nowrap;
}
.hr-badge--success { color: var(--hr-emerald);  border-color: rgba(63,163,114,.35); background: rgba(63,163,114,.08); }
.hr-badge--pending { color: var(--hr-gold-400); border-color: var(--hr-line-strong); background: rgba(201,169,97,.08); }
.hr-badge--failed  { color: #D98A93;            border-color: rgba(179,58,70,.4);   background: rgba(179,58,70,.1); }
.hr-badge--neutral { color: var(--hr-muted);    border-color: var(--hr-line);       background: rgba(255,255,255,.02); }

/* ═══ MODAL SHELL ══════════════════════════════════════════════ */

.hr-modal-overlay {
    background: rgba(4,7,5,.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hr-modal {
    background: linear-gradient(168deg, #131D16 0%, #0B100C 100%);
    border: 1px solid var(--hr-line-strong);
    border-radius: 4px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.9), 0 0 50px rgba(201,169,97,.1);
}
.hr-modal-title {
    font-family: var(--hr-font-display);
    color: var(--hr-cream);
    letter-spacing: .08em;
}
.hr-close-btn {
    width: 30px; height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--hr-line);
    color: var(--hr-muted);
    cursor: pointer;
    transition: all .18s ease;
}
.hr-close-btn:hover { color: var(--hr-gold-300); border-color: var(--hr-line-strong); }

/* payment / method selection tiles */
.hr-tile {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem .95rem;
    background: linear-gradient(170deg, var(--hr-felt-700), var(--hr-felt-900));
    border: 1px solid var(--hr-line);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease;
}
.hr-tile:hover {
    border-color: var(--hr-line-strong);
    box-shadow: 0 0 20px rgba(201,169,97,.12);
    transform: translateY(-1px);
}
.hr-tile.hr-tile-active {
    border-color: var(--hr-gold-500);
    background: linear-gradient(90deg, rgba(201,169,97,.12), rgba(201,169,97,.03));
}

/* ═══ ACCESSIBILITY ════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .hr-chip, .hr-chip-inner span, .hr-hero-rays, .hr-suit,
    .hr-marquee, .hr-rise, .hr-game-card,
    .hr-btn-gold::after, .hr-game-card::after {
        animation: none !important;
        transition: none !important;
    }
    .hr-rise, .hr-game-card { opacity: 1 !important; }
}

:focus-visible {
    outline: 2px solid var(--hr-gold-500);
    outline-offset: 2px;
}