:root {
  --bg: #080a09;
  --panel: #111512;
  --panel-2: #171c18;
  --line: rgba(255,255,255,.09);
  --text: #f7fff4;
  --muted: #9fa9a1;
  --green: #53fc18;
  --green-2: #1ccf00;
  --danger: #ff4d68;
  --gold: #ffd35a;
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 4%, rgba(83,252,24,.09), transparent 27rem),
    radial-gradient(circle at 0% 48%, rgba(83,252,24,.04), transparent 35rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; opacity: .035; pointer-events: none; z-index: 100; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.site-header {
  height: 82px; padding: 0 clamp(20px, 5vw, 84px); display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 30; background: rgba(8,10,9,.82); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; letter-spacing: .08em; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--green); color: #081006; display: grid; place-items: center; font-weight: 950; font-size: 22px; box-shadow: 0 0 30px rgba(83,252,24,.22); transform: skew(-6deg); }
.brand strong, .brand small { display: block; line-height: 1; }
.brand strong { font-size: 15px; }
.brand small { font-size: 9px; color: var(--green); margin-top: 5px; letter-spacing: .35em; }
.site-header nav { display: flex; align-items: center; gap: 30px; color: var(--muted); font-size: 14px; }
.site-header nav a:hover { color: var(--text); }
.admin-nav-link {
  padding: 6px 14px; border-radius: 999px; background: rgba(255,211,90,.12);
  border: 1px solid rgba(255,211,90,.4); color: var(--gold) !important;
  font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.admin-nav-link:hover { background: rgba(255,211,90,.22); }
.account { min-width: 170px; display: flex; justify-content: flex-end; }
.account-profile { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--panel-2); }
.account-profile div { display: grid; }
.account-profile strong { font-size: 13px; }
.account-profile span { color: var(--green); font-size: 12px; font-weight: 800; }
.icon-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 19px; padding: 7px; }
.button { border: 1px solid var(--line); border-radius: 12px; min-height: 46px; padding: 0 18px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 800; transition: .2s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary { background: var(--green); color: #071005; border-color: var(--green); box-shadow: 0 12px 40px rgba(83,252,24,.12); }
.button.primary:hover:not(:disabled) { background: #70ff42; }
.button.ghost { background: rgba(255,255,255,.035); }
.button:disabled { opacity: .4; cursor: not-allowed; }
.button.full { width: 100%; }
.hero { min-height: 680px; max-width: 1400px; margin: 0 auto; padding: 100px clamp(20px, 6vw, 90px) 70px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow, .kicker { font-size: 11px; letter-spacing: .24em; font-weight: 900; color: var(--green); }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.live-dot.online { background: var(--green); box-shadow: 0 0 14px var(--green); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
h1 { font-size: clamp(58px, 8vw, 112px); line-height: .84; letter-spacing: -.07em; margin: 26px 0 30px; max-width: 820px; }
h1 span { color: transparent; -webkit-text-stroke: 2px var(--green); text-shadow: 0 0 60px rgba(83,252,24,.08); }
.hero p { max-width: 640px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.earn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-top: 48px; max-width: 700px; }
.earn-grid div { padding: 19px; background: rgba(12,15,13,.92); }
.earn-grid strong, .earn-grid span { display: block; }
.earn-grid strong { font-size: 20px; color: var(--green); }
.earn-grid span { color: var(--muted); font-size: 11px; margin-top: 5px; }
.hero-orbit { position: relative; min-height: 500px; display: grid; place-items: center; }
.hero-chip { width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 32% 28%, #b7ff9e, var(--green) 45%, #169b00); border: 10px solid #21331e; outline: 2px dashed rgba(255,255,255,.5); outline-offset: -19px; box-shadow: 0 0 120px rgba(83,252,24,.24), inset -20px -20px 40px rgba(0,0,0,.32); transform: rotate(-12deg); }
.hero-chip-logo { width: 72%; height: 72%; object-fit: contain; transform: rotate(12deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.orbit { position: absolute; border: 1px solid rgba(83,252,24,.24); border-radius: 50%; }
.orbit-one { width: 390px; height: 390px; animation: spin 18s linear infinite; }
.orbit-two { width: 560px; height: 260px; transform: rotate(-28deg); border-style: dashed; animation: spin2 24s linear infinite; }
.orbit-one:before, .orbit-two:before { content: ''; width: 12px; height: 12px; background: var(--green); border-radius: 50%; position: absolute; left: 50%; top: -6px; box-shadow: 0 0 20px var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin2 { to { transform: rotate(332deg); } }
.section { max-width: 1400px; margin: 0 auto; padding: 80px clamp(20px, 6vw, 90px); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: -.045em; margin: 10px 0 0; }
.status-pill { padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }
.status-pill.earning { color: var(--green); border-color: rgba(83,252,24,.35); }
.stream-shell { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: 0 45px 120px rgba(0,0,0,.32); }
.stream-shell iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }
.stream-meta { min-height: 76px; display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; gap: 15px; }
.stream-meta div:first-child { display: grid; }
.stream-meta span { font-weight: 800; }
.stream-meta small { color: var(--muted); margin-top: 4px; }
.heartbeat { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.heartbeat span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.chat-on-kick-link {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: rgba(83,252,24,.12); border: 1px solid rgba(83,252,24,.35); color: var(--green);
  white-space: nowrap;
}
.chat-on-kick-link:hover { background: rgba(83,252,24,.22); }
.fine-print { color: #788079; font-size: 12px; line-height: 1.6; max-width: 900px; margin: 16px 0 0; }
.balance-card { background: var(--green); color: #071005; padding: 13px 18px; border-radius: 14px; min-width: 150px; text-align: right; }
.balance-card span { font-size: 9px; letter-spacing: .18em; font-weight: 900; display: block; }
.balance-card strong { font-size: 25px; }
.game-tabs { display: inline-flex; gap: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 5px; margin-bottom: 20px; }
.game-tab { border: 0; background: transparent; color: var(--muted); font-weight: 800; padding: 11px 20px; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.game-tab.active { background: var(--green); color: #071005; }
.game-panel { display: none; }
.game-panel.active { display: block; }
.game-card { display: grid; grid-template-columns: minmax(290px, .68fr) minmax(500px, 1.32fr); min-height: 640px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); overflow: hidden; }
.game-info { padding: clamp(26px, 4vw, 50px); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.game-label { font-size: 10px; color: var(--green); letter-spacing: .2em; font-weight: 900; }
.game-info h3 { font-size: 38px; letter-spacing: -.04em; margin: 12px 0; }
.game-info p { color: var(--muted); line-height: 1.65; margin: 0 0 28px; }
.bet-label { color: var(--muted); font-size: 12px; font-weight: 800; margin-bottom: 14px; }
.bet-control { display: grid; grid-template-columns: 50px 1fr 50px; height: 52px; margin-top: 9px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bet-control button { border: 0; background: var(--panel-2); color: var(--text); cursor: pointer; }
.bet-control input { min-width: 0; width: 100%; background: #0c0f0d; color: var(--text); border: 0; text-align: center; font-size: 18px; font-weight: 900; outline: none; }
.bet-control input::-webkit-inner-spin-button { display: none; }
.bet-label + .bet-label { margin-top: 22px; }
.risk-select { width: 100%; height: 52px; margin-top: 9px; border: 1px solid var(--line); border-radius: 12px; background: #0c0f0d; color: var(--text); font-size: 16px; font-weight: 900; padding: 0 16px; outline: none; cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) center, calc(100% - 17px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.risk-select:focus { border-color: var(--green); }
.result-message { min-height: 56px; margin-top: 17px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 15px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.result-message.win { color: var(--green); border-color: rgba(83,252,24,.28); }
.result-message.loss { color: #ff8698; border-color: rgba(255,77,104,.28); }
.plinko-stage { background: radial-gradient(circle at 50% 35%, rgba(83,252,24,.08), transparent 47%), #0b0e0c; padding: 30px 25px 20px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
#plinkoCanvas { width: 100%; height: auto; max-height: 560px; }
.blackjack-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.table-felt { min-width: 0; padding: 35px; background: radial-gradient(ellipse at center, #184527, #0f2618 62%, #07120b); display: flex; flex-direction: column; justify-content: space-between; align-items: center; box-shadow: inset 0 0 120px rgba(0,0,0,.45); }
.hand-zone { width: 100%; text-align: center; min-height: 205px; }
.hand-zone > span { font-size: 11px; letter-spacing: .2em; color: rgba(255,255,255,.65); font-weight: 900; }
.hand-zone b { color: var(--gold); margin-left: 7px; }
.card-hand { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; min-height: 170px; padding-top: 20px; perspective: 800px; }
.playing-card { width: 105px; height: 145px; border-radius: 10px; background: #f7f5ed; color: #111; box-shadow: -10px 14px 20px rgba(0,0,0,.25); padding: 9px; display: flex; flex-direction: column; justify-content: space-between; font-weight: 900; font-size: 25px; border: 2px solid rgba(0,0,0,.16); transform: rotate(var(--rotation)); transform-style: preserve-3d; }
.playing-card.red { color: #d52035; }
.playing-card.hidden { background: repeating-linear-gradient(45deg, #132518, #132518 8px, #53fc18 8px, #53fc18 10px); color: transparent; border: 5px solid #f7f5ed; }
.playing-card .bottom { transform: rotate(180deg); align-self: flex-end; }
.playing-card.deal-in { animation: cardDeal .6s cubic-bezier(.4,0,.2,1) both; animation-delay: var(--deal-delay, 0s); }
.playing-card.flip-reveal { animation: cardFlipReveal .45s ease both; animation-delay: var(--deal-delay, 0s); }
/* Slides in from a fixed "shoe" position off to the upper right of the felt,
   rather than just fading up from below -- reads clearly as a dealt card
   instead of the card simply materializing in place. Kept inside .game-card's
   overflow:hidden bounds so the slide never visibly clips. The old easing
   curve (.16,.85,.2,1) front-loaded ~85-90% of the travel into the first
   16-35% of the duration, so by the time opacity finished fading in the card
   had already arrived at its resting spot -- reading as instant no matter
   how far it traveled. This curve spends most of its progress in the middle
   of the timeline instead, so the slide stays visibly in motion the whole
   way, not just for a few leftover milliseconds. */
@keyframes cardDeal {
  0% { opacity: 0; transform: translate(150px, -70px) rotate(calc(var(--rotation) + 26deg)) scale(.76); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--rotation)) scale(1); }
}
@keyframes cardFlipReveal {
  0% { transform: rotate(var(--rotation)) rotateY(-180deg); }
  100% { transform: rotate(var(--rotation)) rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .playing-card.deal-in, .playing-card.flip-reveal { animation: none; }
}
.table-logo { text-align: center; font-weight: 950; font-size: 28px; color: rgba(255,255,255,.12); line-height: .8; letter-spacing: .1em; }
.table-logo small { font-size: 9px; letter-spacing: .45em; }
.leaderboard-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.leaderboard-row { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 14px; min-height: 74px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.leaderboard-row:last-child { border-bottom: 0; }
.rank { font-size: 18px; color: var(--muted); font-weight: 900; }
.leader-user { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.leader-user img { width: 40px; height: 40px; border-radius: 50%; background: var(--panel-2); }
.leader-points { color: var(--green); font-weight: 950; }
.empty { padding: 30px; color: var(--muted); text-align: center; }
.rules-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); padding: 1px; border-radius: var(--radius); overflow: hidden; margin-bottom: 80px; }
.rules-strip div { background: var(--panel); padding: 25px; }
.rules-strip strong, .rules-strip span { display: block; }
.rules-strip span { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }
footer { border-top: 1px solid var(--line); padding: 34px clamp(20px, 6vw, 90px); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 12px; }
.brand.mini { color: var(--text); }
.brand.mini .brand-mark { width: 32px; height: 32px; font-size: 17px; border-radius: 9px; }
.mini-player {
  position: fixed;
  z-index: 60;
  right: 22px;
  bottom: 22px;
  width: min(410px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(83,252,24,.32);
  border-radius: 17px;
  background: #080b09;
  box-shadow: 0 28px 90px rgba(0,0,0,.58), 0 0 42px rgba(83,252,24,.08);
  transform-origin: bottom right;
  animation: mini-player-in .24s ease-out;
}
.mini-player[hidden] { display: none; }
@keyframes mini-player-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.mini-player-bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px 8px 13px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(83,252,24,.09), rgba(255,255,255,.02));
}
.mini-player-status { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mini-player-status > span:last-child { min-width: 0; display: grid; }
.mini-player-status strong { font-size: 10px; letter-spacing: .13em; color: var(--text); }
.mini-player-status small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.mini-live-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: pulse 1.6s infinite; }
.mini-player-controls { display: flex; align-items: center; gap: 4px; }
.mini-control {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.055);
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.mini-control:hover { color: var(--text); background: rgba(255,255,255,.1); }
.mini-player-body { display: block; }
.mini-player iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; background: #000; }
.mini-player-footer { min-height: 34px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #788079; font-size: 9px; }
.mini-playing { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.mini-playing i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.mini-player.collapsed { width: 265px; }
.mini-player.collapsed .mini-player-bar { border-bottom: 0; }
.mini-player.collapsed .mini-player-body { display: none; }
.mini-player-visible .toast { bottom: 315px; }
.toast { position: fixed; z-index: 70; right: 24px; bottom: 24px; max-width: 360px; background: #eefbe9; color: #10200d; padding: 14px 18px; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.35); font-size: 13px; font-weight: 750; transform: translateY(30px); opacity: 0; pointer-events: none; transition: .25s ease; }
.toast.show { transform: translateY(0); opacity: 1; }
@media (max-width: 1000px) {
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-orbit { min-height: 390px; }
  .game-card { grid-template-columns: 1fr; }
  .game-info { border-right: 0; border-bottom: 1px solid var(--line); }
  .plinko-stage, .table-felt { min-height: 620px; }
}
@media (max-width: 650px) {
  .site-header { height: 70px; padding-inline: 14px; }
  .account { min-width: auto; }
  .account-profile div { display: none; }
  .hero { min-height: auto; padding-top: 60px; }
  h1 { font-size: 58px; }
  .hero-actions { flex-direction: column; }
  .earn-grid { grid-template-columns: 1fr; }
  .hero-orbit { min-height: 300px; transform: scale(.75); margin-block: -30px; }
  .section { padding-block: 55px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .stream-meta { align-items: flex-start; flex-direction: column; }
  .game-card { min-height: 0; }
  .plinko-stage { min-height: 460px; padding-inline: 8px; }
  .table-felt { min-height: 530px; padding: 25px 10px; }
  .playing-card { width: 78px; height: 112px; font-size: 20px; }
  .card-hand { gap: 8px; }
  .rules-strip { grid-template-columns: 1fr; }
  footer { flex-direction: column; align-items: flex-start; }
  .mini-player { right: 12px; bottom: 12px; width: calc(100vw - 24px); border-radius: 14px; }
  .mini-player.collapsed { width: min(265px, calc(100vw - 24px)); }
  .mini-player-visible .toast { left: 12px; right: 12px; bottom: 265px; max-width: none; }
}