/* Happy Hour */
.hh-card { position: relative; overflow: hidden; margin-top: 12px; padding: 14px 16px 16px; border-radius: 22px; cursor: pointer; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.08); }
.hh-card.live { border-color: rgba(251,191,36,.45); background: radial-gradient(120% 140% at 0% 0%, rgba(251,191,36,.22), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(236,72,153,.18), transparent 60%), #120d14; }
.hh-glow { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(251,191,36,.12), transparent 30%); animation: hhSpin 8s linear infinite; pointer-events: none; }
@keyframes hhSpin { to { transform: rotate(360deg); } }
.hh-card > * { position: relative; }
.hh-row { display: flex; justify-content: space-between; align-items: center; }
.hh-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #fbbf24; color: #1c1404; }
.hh-badge i { width: 6px; height: 6px; border-radius: 50%; background: #1c1404; animation: hhBlink 1.2s infinite; }
.hh-badge.soon { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
@keyframes hhBlink { 50% { opacity: .2; } }
.hh-left { color: rgba(255,255,255,.6); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hh-card.live .hh-left { color: #fde68a; }
.hh-title { display: block; margin-top: 10px; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.hh-card.live .hh-title { font-size: 24px; background: linear-gradient(90deg, #fde68a, #fbbf24, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hh-card p { margin: 4px 0 0; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.45; }
.hh-go { display: inline-flex; margin-top: 12px; padding: 9px 16px; border-radius: 12px; background: #fbbf24; color: #1c1404; font-size: 14px; font-weight: 800; }
.hh-lobby { display: flex; align-items: center; gap: 12px; margin: 12px 0 2px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(110deg, rgba(251,191,36,.2), rgba(236,72,153,.12)); border: 1px solid rgba(251,191,36,.4); }
.hh-lobby > b, #hhpill b, #hhtoast b { display: grid; place-items: center; flex: none; font-weight: 900; color: #1c1404; background: #fbbf24; border-radius: 10px; }
.hh-lobby > b { width: 40px; height: 40px; font-size: 16px; }
.hh-lobby span { display: flex; flex-direction: column; } .hh-lobby strong { color: #fff; font-size: 14.5px; } .hh-lobby small { color: rgba(255,255,255,.6); font-size: 12px; }
#hhpill { position: fixed; z-index: 900; left: 50%; top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 58px); transform: translate(-50%, -150%); display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 99px; background: rgba(20,14,6,.92); border: 1px solid rgba(251,191,36,.5); box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .4s cubic-bezier(.2,.9,.2,1.1); pointer-events: none; }
#hhpill.on { transform: translate(-50%, 0); }
#hhpill b { width: 26px; height: 22px; border-radius: 99px; font-size: 11px; }
#hhpill span { color: #fde68a; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
#hhpill em { font-style: normal; color: rgba(255,255,255,.6); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
#hhtoast { position: fixed; z-index: 950; left: 50%; bottom: calc(var(--sab, env(safe-area-inset-bottom, 0px)) + 110px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 99px; background: rgba(20,14,6,.95); border: 1px solid rgba(251,191,36,.55); color: #fde68a; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; }
#hhtoast b { width: 26px; height: 22px; border-radius: 99px; font-size: 11px; }
#hhtoast span { color: #fff; font-variant-numeric: tabular-nums; }
#hhtoast.on { animation: hhToast 1.8s ease forwards; }
@keyframes hhToast { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.9); } 12%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
/* referral auto-pay */
.rf-auto { margin: 0; color: rgba(255,255,255,.45); font-size: 12px; }
#rftoast { position: fixed; z-index: 1001; left: 50%; top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 10px); transform: translate(-50%, -150%); width: min(92vw, 420px); box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(12,26,18,.96); border: 1px solid rgba(74,222,128,.45); box-shadow: 0 12px 40px rgba(0,0,0,.5); transition: transform .45s cubic-bezier(.2,.9,.2,1.1); }
#rftoast.on { transform: translate(-50%, 0); }
#rftoast i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #4ade80; }
#rftoast svg { width: 18px; height: 18px; fill: none; stroke: #052e16; stroke-width: 2; stroke-linecap: round; }
#rftoast span { display: flex; flex-direction: column; } #rftoast b { color: #fff; font-size: 14px; } #rftoast small { color: #86efac; font-size: 12.5px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .hh-glow, .hh-badge i { animation: none; } }
/* compact pill that sits in the middle of the casino top bar */
#hhpill { top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 7px); padding: 3px 10px 3px 3px; gap: 6px; }
#hhpill b { height: 24px; width: 28px; }
body.hh-on #cs .nb-t { opacity: 0 !important; }