@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-latin-variable.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}@font-face{font-family:Oswald;src:url('/assets/fonts/oswald-latin-variable.woff2') format('woff2');font-style:normal;font-weight:500 700;font-display:swap}

:root {
  --ink: #f7f2de;
  --muted: #8fa69d;
  --jade-950: #04100d;
  --jade-900: #071813;
  --jade-850: #0a211a;
  --jade-800: #0c2b22;
  --jade-700: #124b37;
  --jade: #21b276;
  --jade-light: #7ef0b2;
  --red: #df3a3f;
  --red-dark: #791a22;
  --gold: #e8bd58;
  --gold-light: #fff0a7;
  --line: rgba(230, 197, 111, .15);
  --panel: rgba(10, 36, 28, .84);
  --radius: 24px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Manrope, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--jade-950);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #020806;
  overscroll-behavior: none;
}

body {
  min-width: 300px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% -10%, rgba(35, 175, 114, .18), transparent 34rem),
    linear-gradient(180deg, var(--jade-900), var(--jade-950));
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

button, input { font: inherit; }
button { color: inherit; }
button, [role="button"] { touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:not(:disabled) { cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.ambient i { position: absolute; width: 22rem; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: .12; }
.ambient i:first-child { background: #37e692; top: -12rem; left: -10rem; }
.ambient i:nth-child(2) { background: #e63d49; top: 28%; right: -17rem; }
.ambient i:last-child { background: #f1c55f; bottom: -18rem; left: 10%; }

.eyebrow {
  margin: 0;
  color: var(--gold);
  font: 700 .67rem/1 Oswald, sans-serif;
  letter-spacing: .18em;
}

.glass-panel {
  border: 1px solid rgba(236, 206, 127, .14);
  background: linear-gradient(145deg, rgba(18, 59, 45, .92), rgba(6, 23, 18, .94));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(18px);
}

.primary-button {
  min-height: 52px;
  border: 1px solid #f7dc8b;
  border-radius: 17px;
  color: #281a04;
  background: linear-gradient(135deg, #fff0a0, #d89d30);
  box-shadow: 0 10px 28px rgba(190, 124, 24, .22), inset 0 1px rgba(255,255,255,.8);
  font-weight: 800;
}

.token-coin, .tiny-token {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #ffe89b;
  border-radius: 50%;
  color: #3c2704;
  background: radial-gradient(circle at 35% 28%, #fff5ae 0 10%, #e9ba4d 38%, #a97015 70%, #f1cb65 72% 81%, #7c510d 83%);
  box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 0 0 2px rgba(91,56,2,.22);
  font: 800 .7rem/1 Oswald, sans-serif;
}

.token-coin { width: 30px; height: 30px; }
.tiny-token { width: 20px; height: 20px; font-size: .55rem; }

/* Account gate */
.auth-shell {
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(20px + var(--safe-top)) 18px calc(24px + var(--safe-bottom));
  display: grid;
  grid-template-rows: minmax(160px, 33dvh) auto;
  align-content: center;
  position: relative;
}

.auth-art { position: relative; min-height: 170px; display: grid; place-items: end center; overflow: visible; }
.seal-halo { position: absolute; width: min(75vw, 320px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(35,188,121,.22), transparent 64%); filter: blur(3px); }
.auth-mike { position: relative; z-index: 1; height: clamp(190px, 32dvh, 310px); max-width: 94%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 20px 24px rgba(0,0,0,.45)); animation: hover-emblem 5s ease-in-out infinite; pointer-events: none; }
.floating-token { position: absolute; display: grid; place-items: center; width: 42px; aspect-ratio: 1; border-radius: 50%; border: 3px solid #f4d170; background: #9c2229; box-shadow: 0 10px 25px #0007; color: #fff3c5; font: 700 .9rem Oswald; }
.token-a { left: 13%; bottom: 10%; transform: rotate(-12deg); }
.token-b { right: 12%; top: 15%; transform: rotate(15deg); background: #0e6846; }

.auth-card { position: relative; z-index: 2; padding: 25px 20px 18px; border-radius: 28px; }
.auth-card h1 { margin: 8px 0 10px; font: 700 clamp(2.25rem, 12vw, 3.55rem)/.86 Oswald, sans-serif; letter-spacing: -.055em; text-wrap: balance; }
.auth-card h1 span { color: var(--red); text-shadow: 0 2px #5d1318; }
.token-note { display: flex; align-items: center; gap: 8px; margin: 0; color: #bed0c8; font-size: .74rem; font-weight: 700; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 23px 0 15px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.26); }
.auth-tab { min-height: 42px; border: 0; border-radius: 11px; color: #809990; background: transparent; font-weight: 800; font-size: .82rem; }
.auth-tab.is-active { color: var(--ink); background: rgba(255,255,255,.075); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.auth-form { display: grid; gap: 12px; }
.auth-form label { color: #a8bdb5; font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.auth-form input { width: 100%; height: 50px; margin-top: 6px; padding: 0 15px; border: 1px solid rgba(228,197,111,.15); border-radius: 14px; outline: none; color: var(--ink); background: rgba(2,13,10,.75); box-shadow: inset 0 2px 8px rgba(0,0,0,.18); -webkit-user-select: text; user-select: text; }
.auth-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,189,88,.12); }
.auth-submit { display: flex; align-items: center; justify-content: space-between; padding: 0 17px 0 20px; margin-top: 3px; }
.auth-submit b { font-size: 1.35rem; }
.auth-foot { margin: 12px 0 0; color: #6d877d; text-align: center; font-size: .63rem; }

/* Application frame */
.app-shell {
  width: min(100%, 760px);
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  background:
    radial-gradient(circle at 110% 13%, rgba(195,46,55,.12), transparent 24rem),
    linear-gradient(180deg, #081d16, #05110e);
  box-shadow: 0 0 60px rgba(0,0,0,.44);
}

.topbar {
  height: calc(66px + var(--safe-top));
  padding: calc(11px + var(--safe-top)) 16px 7px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg, rgba(6,24,18,.98) 70%, rgba(6,24,18,0));
}

.brand-button { min-width: 44px; min-height: 44px; padding: 0; border: 0; display: flex; align-items: center; gap: 9px; text-align: left; background: transparent; }
.brand-button img { width: 35px; height: 35px; border-radius: 11px; box-shadow: 0 4px 14px #0008; }
.brand-button span { display: flex; min-width: 0; flex-direction: column; }
.brand-button b { color: var(--red); font: 700 .8rem/1 Oswald; letter-spacing: .03em; }
.brand-button small { margin-top: 3px; color: #f8eab9; font: 600 .62rem/1 Oswald; letter-spacing: .13em; }
.wallet { height: 38px; padding: 0 11px 0 5px; border: 1px solid rgba(232,189,88,.19); border-radius: 999px; display: flex; align-items: center; gap: 7px; background: rgba(8,37,27,.9); }
.wallet .token-coin { width: 27px; height: 27px; }
.wallet strong { font: 700 .87rem Oswald; letter-spacing: .03em; }
.avatar-button { width: 44px; height: 44px; padding: 0; border: 1px solid #c29439; border-radius: 50%; color: #fff0b6; background: linear-gradient(145deg,#a82831,#59141b); font: 700 .7rem Oswald; box-shadow: 0 5px 15px #0007; }

.views { padding: 0 14px calc(88px + var(--safe-bottom)); }
.view { display: none; animation: view-in .28s ease both; }
.view.is-active { display: block; }

.bottom-nav {
  height: calc(70px + var(--safe-bottom));
  padding: 7px 12px calc(7px + var(--safe-bottom));
  border-top: 1px solid rgba(239,205,112,.13);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  position: fixed;
  z-index: 50;
  bottom: 0;
  left: 50%;
  width: min(100%, 760px);
  transform: translateX(-50%);
  background: rgba(5,20,15,.94);
  backdrop-filter: blur(20px);
}
.bottom-nav button { min-height: 52px; padding: 4px; border: 0; border-radius: 14px; display: grid; place-items: center; align-content: center; gap: 3px; color: #69837a; background: transparent; }
.bottom-nav button span { font: 700 1.1rem/1 Oswald; }
.bottom-nav button b { font-size: .62rem; }
.bottom-nav button.is-active { color: var(--gold-light); background: rgba(34,123,84,.15); }
.bottom-nav .nav-club span { display: grid; place-items: center; width: 34px; height: 34px; margin-top: -22px; border: 2px solid #e9c55d; border-radius: 50%; color: #2d1d03; background: linear-gradient(145deg,#fff0a0,#bd781b); box-shadow: 0 6px 20px rgba(212,150,38,.32), 0 0 0 6px #061711; }
.bottom-nav .nav-club b { margin-top: -2px; }

/* Home */
.club-hero { min-height: 258px; margin-top: 3px; border: 1px solid rgba(242,209,117,.18); border-radius: 28px; position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(145deg,#113e2d 0%,#071d17 58%,#311117 130%); box-shadow: 0 22px 50px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05); }
.hero-pattern { position: absolute; inset: 0; opacity: .19; background-image: linear-gradient(45deg, transparent 43%, rgba(245,216,135,.25) 43% 47%, transparent 47% 53%, rgba(245,216,135,.25) 53% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, rgba(245,216,135,.17) 43% 47%, transparent 47% 53%, rgba(245,216,135,.17) 53% 57%, transparent 57%); background-size: 40px 40px; mask-image: linear-gradient(to right, black, transparent 65%); }
.hero-copy { width: 67%; position: relative; z-index: 4; padding: 29px 0 0 22px; }
.hero-copy h2 { margin: 9px 0 15px; font: 700 clamp(2rem,9vw,3.15rem)/.98 Oswald; letter-spacing: -.04em; }
.hero-copy h2 span { display: block; color: var(--gold-light); }
.hero-wallet { display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; }
.hero-wallet .token-coin { grid-row: 1 / 3; }
.hero-wallet strong { font: 700 1.3rem/1 Oswald; }
.hero-wallet small { color: #89a89b; font: 700 .52rem Oswald; letter-spacing: .16em; }
.host-stage { position: absolute; z-index: 2; right: -14px; bottom: 0; width: 50%; height: 94%; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.host-stage img { max-width: none; width: 145%; height: 100%; object-fit: contain; object-position: center bottom; position: relative; z-index: 2; filter: drop-shadow(0 14px 12px rgba(0,0,0,.42)); }
.host-glow { position: absolute; width: 130%; aspect-ratio: 1; bottom: -25%; border-radius: 50%; background: radial-gradient(circle, rgba(230,58,63,.55), rgba(32,173,112,.12) 44%, transparent 70%); }
.host-placeholder { display: none; width: 150px; height: 188px; align-items: center; justify-content: center; border-radius: 80px 80px 0 0; position: relative; z-index: 2; color: rgba(255,237,169,.7); background: radial-gradient(circle at 50% 27%,#ecd67c 0 13%,#1b6a4c 14% 25%,#0b3024 26% 50%,transparent 51%); font-size: 3rem; }
.host-stage.mascot-missing .host-placeholder { display: flex; }
.daily-chip { min-width: 141px; min-height: 56px; padding: 7px 9px; border: 1px solid rgba(255,222,126,.45); border-radius: 18px; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 7px; position: absolute; z-index: 6; left: 18px; bottom: 17px; color: #291802; text-align: left; background: linear-gradient(135deg,#fff1a0,#dda23c); box-shadow: 0 9px 24px rgba(0,0,0,.3); }
.daily-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #ffe9a6; background: #a5282f; box-shadow: inset 0 0 0 2px rgba(255,225,126,.35); }
.daily-chip > span:nth-child(2) { display: flex; flex-direction: column; }
.daily-chip small { font: 700 .48rem Oswald; letter-spacing: .11em; }
.daily-chip b { font: 700 .92rem Oswald; }
.daily-chip i { padding: 3px 5px; border-radius: 7px; color: #ffeab5; background: #5b171b; font: normal 700 .58rem Oswald; }

.section-heading { min-height: 50px; display: flex; align-items: end; justify-content: space-between; padding: 14px 2px 9px; }
.section-heading h3 { margin: 0; font: 600 1.08rem Oswald; letter-spacing: -.01em; }
.section-heading button { border: 0; color: var(--gold); background: transparent; font-size: .72rem; font-weight: 800; }
.section-heading button span { margin-left: 4px; }
.section-heading > span { color: #718b81; font: 700 .56rem Oswald; letter-spacing: .12em; }

.feature-card { width: 100%; min-height: 141px; padding: 19px; border: 1px solid rgba(242,208,118,.25); border-radius: 24px; position: relative; overflow: hidden; text-align: left; background: linear-gradient(125deg,#731922,#321016 57%,#103b2c 135%); box-shadow: 0 16px 35px rgba(0,0,0,.26); }
.feature-card::after { content:""; position:absolute; inset:0; opacity:.12; background: repeating-linear-gradient(135deg,transparent 0 11px,#ffd977 12px 13px,transparent 14px 24px); mask-image:linear-gradient(to left,black,transparent 65%); }
.feature-shine { position: absolute; width: 150px; height: 170px; right: 48px; top: -64px; background: radial-gradient(circle,rgba(255,215,100,.24),transparent 70%); }
.feature-copy { position: relative; z-index: 3; }
.live-pill { width: max-content; padding: 6px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 99px; display: flex; align-items: center; gap: 6px; color: #ffe0a0; background: rgba(0,0,0,.2); font: 700 .53rem Oswald; letter-spacing: .1em; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #67f298; box-shadow: 0 0 8px #67f298; }
.feature-copy h3 { margin: 10px 0 3px; font: 700 2.1rem/.9 Oswald; letter-spacing: -.03em; }
.feature-copy p { margin: 8px 0 0; color: #d7c8ae; font-size: .68rem; }
.feature-copy p b { color: #fff1b1; }
.feature-cards { position: absolute; z-index: 2; right: 52px; bottom: -26px; width: 122px; height: 130px; }
.feature-cards i { width: 70px; height: 100px; padding: 10px; border: 3px solid #f5e5b7; border-radius: 10px; position: absolute; color: #151a18; background: #f7f1dd; box-shadow: 0 7px 15px #0006; font: normal 700 1.4rem Oswald; }
.feature-cards i:first-child { left: 0; transform: rotate(-14deg); }
.feature-cards i:last-child { right: 0; transform: rotate(12deg); color: #be202c; }
.feature-cards i span { display: block; }
.play-circle { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffe39a; border-radius: 50%; position: absolute; z-index: 4; right: 14px; top: 50%; transform: translateY(-50%); color: #251700; background: linear-gradient(145deg,#fff0a0,#d79c30); font-weight: 900; }

.quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 9px; }
.quick-game { min-width: 0; height: 108px; padding: 11px 8px; border: 1px solid rgba(240,207,115,.14); border-radius: 19px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; position: relative; overflow: hidden; text-align: left; background: linear-gradient(145deg,#133d2e,#081b15); }
.quick-game::before { content:""; width: 65px; height: 65px; border-radius: 50%; position:absolute; right:-15px; top:-19px; background:rgba(255,255,255,.06); }
.quick-game .game-mark { display: grid; place-items: center; width: 40px; height: 40px; position:absolute; top:11px; left:10px; border:1px solid rgba(255,255,255,.17); border-radius: 13px; color:#fff0ab; background:rgba(0,0,0,.2); font:700 1.2rem Oswald; }
.quick-game b { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 .76rem Oswald; }
.quick-game small { margin-top:2px; color:#78958a; font-size:.55rem; }
.quick-slot { background:linear-gradient(145deg,#7c2028,#351116); }
.quick-wheel { background:linear-gradient(145deg,#146044,#09251c); }
.quick-card { background:linear-gradient(145deg,#70521c,#291d0a); }
.home-strip { min-height:58px; margin-top:9px; padding:8px 10px; border:1px solid rgba(237,203,110,.11); border-radius:18px; display:flex; align-items:center; justify-content:space-between; background:rgba(11,39,29,.66); }
.home-strip > div { display:flex; align-items:center; gap:9px; }
.home-strip > div > span:last-child { display:flex; flex-direction:column; }
.mini-avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#ffefab; background:linear-gradient(145deg,#a82a32,#56151a); font:700 .65rem Oswald; }
.home-strip small { color:#70897f; font:700 .48rem Oswald; letter-spacing:.11em; }
.home-strip b { font:600 .73rem Oswald; }
.home-strip button { padding:2px 7px; border:0; display:flex; flex-direction:column; align-items:flex-end; background:transparent; }
.home-strip button b { color:var(--gold-light); font-size:.95rem; }

/* Shared page and game cards */
.page-heading { min-height:88px; display:flex; align-items:center; justify-content:space-between; padding:12px 3px 13px; }
.page-heading h2 { margin:5px 0 0; font:700 2.2rem/.9 Oswald; letter-spacing:-.03em; }
.page-chip { padding:7px 9px; border:1px solid var(--line); border-radius:999px; color:#93aa9f; background:rgba(8,34,25,.6); font:700 .54rem Oswald; letter-spacing:.08em; }
.games-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.game-tile { min-height:190px; padding:14px; border:1px solid rgba(242,207,112,.16); border-radius:23px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; position:relative; overflow:hidden; text-align:left; background:#102f25; box-shadow:0 12px 28px rgba(0,0,0,.2); }
.game-tile:first-child { grid-column:1 / -1; min-height:205px; }
.game-tile::after { content:""; position:absolute; width:150px; aspect-ratio:1; right:-70px; top:-70px; border-radius:50%; background:rgba(255,255,255,.06); }
.tile-blackjack { background:linear-gradient(145deg,#781e27,#291015 62%,#0f422f 140%); }
.tile-roulette { background:linear-gradient(145deg,#146044,#071b15); }
.tile-slots { background:linear-gradient(145deg,#6e1b24,#271013); }
.tile-higher { background:linear-gradient(145deg,#745720,#2b1e09); }
.tile-badge { padding:6px 8px; border-radius:99px; color:#ffe6a1; background:rgba(0,0,0,.25); font:700 .5rem Oswald; letter-spacing:.1em; }
.tile-art { height:80px; align-self:stretch; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; }
.cards-art i { width:64px; height:88px; padding:8px; border-radius:9px; color:#171918; background:#f7edd3; box-shadow:0 8px 16px #0006; font:normal 700 1.15rem Oswald; }
.cards-art i:first-child { transform:rotate(-10deg) translate(9px,3px); }
.cards-art i:last-child { color:#bd2430; transform:rotate(9deg) translate(-9px,-2px); }
.wheel-art i { width:82px; aspect-ratio:1; border:8px solid #dcb64f; border-radius:50%; background:conic-gradient(#9e2029 0 10deg,#111 10deg 20deg,#9e2029 20deg 30deg,#111 30deg 40deg,#9e2029 40deg 50deg,#111 50deg 60deg,#9e2029 60deg 70deg,#111 70deg 80deg,#9e2029 80deg 90deg,#111 90deg 100deg,#9e2029 100deg 110deg,#111 110deg 120deg,#9e2029 120deg 130deg,#111 130deg 140deg,#9e2029 140deg 150deg,#111 150deg 160deg,#9e2029 160deg 170deg,#111 170deg 180deg,#9e2029 180deg 190deg,#111 190deg 200deg,#9e2029 200deg 210deg,#111 210deg 220deg,#9e2029 220deg 230deg,#111 230deg 240deg,#9e2029 240deg 250deg,#111 250deg 260deg,#9e2029 260deg 270deg,#111 270deg 280deg,#9e2029 280deg 290deg,#111 290deg 300deg,#9e2029 300deg 310deg,#111 310deg 320deg,#9e2029 320deg 330deg,#111 330deg 340deg,#9e2029 340deg 350deg,#111 350deg); box-shadow:0 10px 20px #0006; }
.slot-art { gap:5px; }
.slot-art i { display:grid; place-items:center; width:48px; height:61px; border:4px solid #d6a238; border-radius:9px; color:#d92d39; background:#fff1bc; font:normal 700 2.2rem Oswald; box-shadow:0 7px 14px #0006; }
.high-art { gap:8px; }
.high-art i { display:grid; place-items:center; width:55px; height:72px; border:2px solid #e6c661; border-radius:12px; color:#ffeda6; background:#173c2e; font:normal 700 2rem Oswald; box-shadow:0 7px 14px #0006; }
.tile-copy { display:flex; flex-direction:column; position:relative; z-index:2; }
.tile-copy b { font:600 1.15rem Oswald; }
.tile-copy small { margin-top:3px; color:#a1b7ae; font-size:.61rem; }
.play-safe { display:flex; align-items:center; justify-content:center; gap:8px; margin:16px 0 0; color:#6f887e; font-size:.58rem; text-align:center; }
.play-safe span { display:grid; place-items:center; width:18px; height:18px; border:1px solid #667f75; border-radius:50%; font:700 .6rem serif; }

.game-topline { min-height:65px; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:8px; }
.game-topline > div { text-align:center; }
.game-topline small { color:var(--gold); font:700 .5rem Oswald; letter-spacing:.13em; }
.game-topline h2 { margin:2px 0 0; font:600 1.15rem/1 Oswald; }
.back-button,.sound-button,.icon-button { width:42px; height:42px; padding:0; border:1px solid rgba(236,202,111,.13); border-radius:14px; display:grid; place-items:center; color:#d8e2db; background:rgba(14,47,36,.72); font-size:1.1rem; }
.sound-button { justify-self:end; }
.table-status { width:max-content; min-height:29px; margin:1px auto 9px; padding:0 10px; border:1px solid rgba(255,255,255,.08); border-radius:99px; display:flex; align-items:center; gap:7px; color:#b5c7bf; background:rgba(0,0,0,.2); font-size:.58rem; }
.table-status i { width:6px; height:6px; border-radius:50%; background:#e5bd55; box-shadow:0 0 7px #e5bd55; }
.table-status b { color:#fff0a8; font:700 .58rem Oswald; }

/* Blackjack */
.blackjack-table { height:clamp(390px,61dvh,520px); border:8px solid #70411c; border-radius:46% 46% 22% 22% / 31% 31% 17% 17%; position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 44%,#197552,#0d4a35 52%,#073224 72%); box-shadow:inset 0 0 0 3px #d6aa47,inset 0 0 50px #001b12,0 14px 34px #0006; }
.blackjack-table::before { content:""; position:absolute; inset:16px; border:1px solid rgba(250,218,128,.27); border-radius:inherit; }
.blackjack-table::after { content:""; position:absolute; inset:0; opacity:.09; background:repeating-radial-gradient(circle at 50% 50%,transparent 0 17px,#ffe295 18px 19px,transparent 20px 38px); }
.table-inlay { position:absolute; z-index:1; top:48%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; color:rgba(255,230,161,.2); white-space:nowrap; }
.table-inlay span { font:600 .72rem Oswald; letter-spacing:.25em; }
.table-inlay b { font:700 1.65rem Oswald; letter-spacing:.1em; }
.table-inlay small { font:500 .38rem Oswald; letter-spacing:.15em; }
.dealer-seat { position:absolute; z-index:4; top:17px; left:50%; width:150px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; }
.dealer-host { width:49px; height:49px; border:2px solid #e9c668; border-radius:50%; overflow:hidden; display:grid; place-items:center; color:#f5dc87; background:#173b2e; box-shadow:0 5px 13px #0007; }
.dealer-host img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.dealer-host span { display:none; font-size:1.25rem; }
.dealer-host.mascot-missing img { display:none; }
.dealer-host.mascot-missing span { display:block; }
.dealer-seat > strong { margin-top:4px; color:#ffeeb1; font:700 .48rem Oswald; letter-spacing:.13em; }
.dealer-seat em { min-width:23px; padding:2px 5px; border-radius:7px; position:absolute; top:57px; right:21px; color:#2d1e04; background:#f0ce70; font:normal 700 .58rem Oswald; text-align:center; }
.hand { min-width:78px; height:74px; display:flex; align-items:flex-start; justify-content:center; position:relative; }
.card-mini { width:39px; height:56px; margin-left:-13px; padding:4px; border:2px solid #eee4c7; border-radius:6px; color:#18201c; background:#f8f1dc; box-shadow:0 5px 10px #0007; font:700 .66rem Oswald; }
.card-mini:first-child { margin-left:0; }
.card-mini.red { color:#bd2531; }
.card-mini.hidden-card { color:#e5c35d; background:repeating-linear-gradient(45deg,#58171d 0 4px,#8c2029 5px 8px); }
.player-seats { position:absolute; z-index:5; inset:0; }
.player-seat { width:85px; min-height:65px; position:absolute; display:flex; flex-direction:column; align-items:center; text-align:center; transition:.2s ease; }
.player-seat:nth-child(1) { bottom:17px; left:50%; transform:translateX(-50%); }
.player-seat:nth-child(2) { bottom:85px; left:4px; }
.player-seat:nth-child(3) { top:112px; left:3px; }
.player-seat:nth-child(4) { top:112px; right:3px; }
.player-seat:nth-child(5) { bottom:85px; right:4px; }
.seat-avatar { width:38px; height:38px; border:2px solid #7fa798; border-radius:50%; display:grid; place-items:center; color:#dcece5; background:linear-gradient(145deg,#245d46,#0c281e); box-shadow:0 5px 13px #0008; font:700 .58rem Oswald; }
.player-seat.is-me .seat-avatar { border-color:#ffdf76; color:#422905; background:linear-gradient(145deg,#fff09b,#c88b25); }
.player-seat.is-turn .seat-avatar { animation:turn-pulse 1.2s infinite; }
.player-seat strong { width:83px; margin-top:3px; overflow:hidden; color:#f5e9c9; text-overflow:ellipsis; white-space:nowrap; font:600 .54rem Oswald; }
.player-seat small { color:#9ab2a8; font:700 .47rem Oswald; }
.seat-bet { padding:2px 5px; border:1px solid #d2a842; border-radius:99px; position:absolute; top:22px; left:57px; color:#3a2504; background:#e4bd56; font:700 .45rem Oswald; }
.seat-status { padding:3px 5px; border-radius:6px; position:absolute; bottom:-10px; color:#fff3b5; background:#8e2029; font:700 .43rem Oswald; letter-spacing:.04em; }
.player-seat .hand { height:31px; position:absolute; top:-30px; transform:scale(.72); }
.bet-spot { min-width:61px; min-height:31px; padding:2px 7px 2px 3px; border:1px dashed rgba(255,228,145,.45); border-radius:99px; position:absolute; z-index:4; left:50%; bottom:97px; transform:translateX(-50%); display:flex; align-items:center; gap:5px; color:#f8e8b2; background:rgba(0,0,0,.22); }
.bet-spot .token-coin { width:24px; height:24px; font-size:.5rem; }
.bet-spot b { font:700 .62rem Oswald; }
.blackjack-controls { min-height:112px; padding-top:11px; }
.bet-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.bet-controls button { height:42px; border:1px solid rgba(240,207,117,.21); border-radius:13px; color:#f9e6a7; background:#123b2d; font:700 .68rem Oswald; }
.bet-controls button.is-selected { color:#321f03; background:linear-gradient(145deg,#ffea92,#c98e27); }
.deal-button { width:100%; margin-top:8px; }
.blackjack-next-round { width:100%; min-height:44px; margin-top:8px; border:1px solid rgba(240,207,117,.24); border-radius:13px; color:#c7d9d1; background:#092a20; font:800 .7rem Manrope,sans-serif; }
.blackjack-next-round.is-selected { border-color:#f0cf75; color:#312007; background:linear-gradient(145deg,#ffe99a,#c9912b); }
.action-controls { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.action-controls button { min-height:59px; border:1px solid rgba(240,207,117,.2); border-radius:17px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#f6e9c4; background:linear-gradient(145deg,#15523c,#0a2d22); }
.action-controls button span { color:#ffe693; font:700 1rem Oswald; }
.action-controls button b { font-size:.63rem; }
.action-controls .stand-action { background:linear-gradient(145deg,#8b242d,#46141a); }

/* Slots */
.slots-view { background:radial-gradient(circle at 50% 31%,rgba(187,40,49,.19),transparent 25rem); }
.slot-machine { width:min(100%,680px); aspect-ratio:3/2; margin:4px auto 0; padding:0; border:0; border-radius:clamp(17px,4.5vw,34px); position:relative; isolation:isolate; overflow:hidden; background:#07130f; box-shadow:0 22px 48px #0009,0 0 0 1px rgba(244,203,91,.17); }
.slot-machine::before { content:""; position:absolute; z-index:5; inset:0; border:1px solid rgba(255,230,145,.13); border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 32px rgba(0,0,0,.28); }
.slot-cabinet-art { width:100%; height:100%; position:absolute; z-index:1; inset:0; display:block; object-fit:cover; pointer-events:none; user-select:none; }
.slot-crown { width:48%; height:20%; position:absolute; z-index:4; left:42%; top:4%; display:flex; align-items:center; justify-content:center; gap:clamp(3px,1.2vw,10px); color:#fff0a0; text-shadow:0 3px #5d2909,0 0 15px rgba(255,216,101,.55); }
.slot-crown span { font:700 clamp(.72rem,4.2vw,1.65rem) Oswald; letter-spacing:.06em; }
.slot-crown b { font:700 clamp(1.25rem,7.6vw,3.15rem) Oswald; }
.slot-crown i { font-style:normal; font-size:clamp(.45rem,2vw,.9rem); }
.slot-screen { width:65.75%; height:46.5%; padding:.55%; border:0; border-radius:8% / 12%; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6%; position:absolute; z-index:3; left:24.15%; top:34%; overflow:hidden; background:transparent; box-shadow:none; }
.reel { border:clamp(1px,.28vw,2px) solid rgba(255,229,148,.72); border-radius:7% / 9%; display:grid; place-items:center; overflow:hidden; color:#c92434; background:linear-gradient(#d9c289,#fff8cf 20%,#fff3bb 73%,#b9924e); box-shadow:inset 0 10px 18px rgba(88,49,5,.22),inset 0 -10px 18px rgba(88,49,5,.27),0 0 9px rgba(255,216,109,.14); text-shadow:0 2px #fff1b8; font:700 clamp(2.35rem,14vw,6.2rem) Oswald; }
.reel.is-spinning span { animation:reel-blur .25s linear infinite; filter:blur(1px); }
.payline { height:6%; position:absolute; z-index:3; top:50%; left:-1%; width:102%; border-top:2px solid rgba(213,39,50,.78); border-bottom:2px solid rgba(213,39,50,.78); transform:translateY(-50%); pointer-events:none; box-shadow:0 0 7px rgba(231,54,64,.28); }
.slot-message { width:42%; height:7%; min-height:0; margin:0; border:1px solid rgba(255,221,124,.3); border-radius:999px; position:absolute; z-index:4; left:46%; top:24.5%; display:grid; place-items:center; overflow:hidden; color:#ffe18a; background:rgba(18,6,8,.82); box-shadow:inset 0 0 10px #0008,0 3px 9px #0005; font:700 clamp(.42rem,1.65vw,.72rem) Oswald; letter-spacing:.08em; white-space:nowrap; }
.slot-dots { display:none; }
.game-bet-panel { max-width:480px; min-height:88px; margin:10px auto 0; padding:10px; border:1px solid rgba(236,201,110,.13); border-radius:22px; display:grid; grid-template-columns:1fr 1.2fr 1fr; align-items:center; gap:8px; background:rgba(9,34,25,.82); }
.stepper { height:55px; display:grid; grid-template-columns:30px 1fr 30px; align-items:center; gap:3px; }
.stepper button { width:30px; height:38px; padding:0; border:1px solid rgba(235,201,110,.16); border-radius:10px; color:#f5dea0; background:#143d2e; }
.stepper span { display:flex; flex-direction:column; align-items:center; }
.stepper small,.last-win small,.potential-win small { color:#728c82; font:700 .45rem Oswald; letter-spacing:.1em; white-space:nowrap; }
.stepper b,.last-win b,.potential-win b { margin-top:3px; color:#ffe99d; font:700 .83rem Oswald; }
.spin-button { width:92px; height:72px; margin:-4px auto; border:3px solid #ffe282; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#ffe8a2; background:radial-gradient(circle at 36% 27%,#ec4b53,#9c2029 55%,#531016); box-shadow:0 7px 0 #541017,0 13px 22px #0008,inset 0 0 0 3px #a86c20; }
.spin-button span { font:700 1.05rem Oswald; letter-spacing:.1em; }
.spin-button small { font-size:.38rem; }
.spin-button:active { transform:translateY(4px); box-shadow:0 3px 0 #541017,0 7px 14px #0008,inset 0 0 0 3px #a86c20; }
.last-win,.potential-win { display:flex; flex-direction:column; align-items:center; }

/* Higher / lower */
.higher-view { background:radial-gradient(circle at 50% 35%,rgba(230,183,76,.11),transparent 22rem); }
.higher-arena { height:330px; position:relative; display:grid; place-items:center; perspective:700px; }
.higher-arena::before { content:""; position:absolute; width:270px; aspect-ratio:1; border:1px solid rgba(231,194,91,.15); border-radius:50%; box-shadow:inset 0 0 50px rgba(28,161,102,.12),0 0 40px rgba(28,161,102,.09); }
.higher-mike { position:absolute; z-index:0; left:max(-18px,calc(50% - 238px)); bottom:4px; width:190px; max-height:304px; object-fit:contain; object-position:left bottom; pointer-events:none; filter:drop-shadow(0 16px 18px rgba(0,0,0,.48)); opacity:.94; }
.playing-card,.next-card { width:155px; height:228px; padding:15px; border:5px solid #e7d8ad; border-radius:17px; position:absolute; color:#161b18; background:linear-gradient(145deg,#fff8de,#e8d8ab); box-shadow:0 24px 35px #0008; }
.playing-card { z-index:3; transform:rotate(-4deg); transition:.35s cubic-bezier(.2,.8,.2,1); }
.playing-card.is-flipping { transform:rotateY(90deg) rotate(-4deg); }
.playing-card span,.playing-card b { display:block; font:700 1.65rem Oswald; }
.playing-card b { position:absolute; right:15px; bottom:12px; transform:rotate(180deg); }
.playing-card i { display:grid; place-items:center; height:125px; font:normal 4.8rem serif; }
.playing-card.red { color:#bd2631; }
.next-card { z-index:1; transform:translate(35px,10px) rotate(8deg); display:grid; place-items:center; color:#f2cc67; background:repeating-linear-gradient(45deg,#5f171e 0 7px,#891f28 8px 14px); }
.next-card i { font:normal 700 4rem Oswald; text-shadow:0 3px #4b0c12; }
.streak-orbit { width:64px; height:64px; border:1px solid #d7ac48; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:absolute; z-index:5; right:2%; top:28px; color:#ffe496; background:#113c2d; box-shadow:0 8px 20px #0008; }
.streak-orbit small { font:700 .44rem Oswald; letter-spacing:.1em; }
.streak-orbit b { font:700 1.2rem Oswald; }
.higher-prompt { margin:0 0 10px; color:#c1d1ca; text-align:center; font-size:.76rem; }
.higher-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.higher-actions button { min-height:72px; border:1px solid rgba(239,204,111,.2); border-radius:21px; display:flex; align-items:center; justify-content:center; gap:12px; background:linear-gradient(145deg,#14513b,#092c21); }
.higher-actions button:first-child { background:linear-gradient(145deg,#7c2029,#3c1116); }
.higher-actions span { color:#ffe69a; font:700 2rem Oswald; }
.higher-actions b { font:700 .85rem Oswald; }
.horizontal-bet { grid-template-columns:1fr 1fr; min-height:71px; }

/* Roulette */
.roulette-view { background:radial-gradient(circle at 50% 35%,rgba(36,177,115,.13),transparent 22rem); }
.roulette-stage { height:310px; position:relative; display:grid; place-items:center; perspective:700px; }
.roulette-wheel { width:255px; aspect-ratio:1; border:14px solid #bf8430; border-radius:50%; position:relative; z-index:2; background:conic-gradient(#0b422f 0 9.72deg,#a11f2a 9.72deg 19.44deg,#121713 19.44deg 29.16deg,#a11f2a 29.16deg 38.88deg,#121713 38.88deg 48.6deg,#a11f2a 48.6deg 58.32deg,#121713 58.32deg 68.04deg,#a11f2a 68.04deg 77.76deg,#121713 77.76deg 87.48deg,#a11f2a 87.48deg 97.2deg,#121713 97.2deg 106.92deg,#a11f2a 106.92deg 116.64deg,#121713 116.64deg 126.36deg,#a11f2a 126.36deg 136.08deg,#121713 136.08deg 145.8deg,#a11f2a 145.8deg 155.52deg,#121713 155.52deg 165.24deg,#a11f2a 165.24deg 174.96deg,#121713 174.96deg 184.68deg,#a11f2a 184.68deg 194.4deg,#121713 194.4deg 204.12deg,#a11f2a 204.12deg 213.84deg,#121713 213.84deg 223.56deg,#a11f2a 223.56deg 233.28deg,#121713 233.28deg 243deg,#a11f2a 243deg 252.72deg,#121713 252.72deg 262.44deg,#a11f2a 262.44deg 272.16deg,#121713 272.16deg 281.88deg,#a11f2a 281.88deg 291.6deg,#121713 291.6deg 301.32deg,#a11f2a 301.32deg 311.04deg,#121713 311.04deg 320.76deg,#a11f2a 320.76deg 330.48deg,#121713 330.48deg 340.2deg,#a11f2a 340.2deg 349.92deg,#121713 349.92deg 360deg); box-shadow:inset 0 0 0 5px #f0cc6d,inset 0 0 0 24px rgba(0,0,0,.55),0 24px 35px #0008; transition:transform 3.8s cubic-bezier(.12,.72,.1,1); }
.roulette-wheel::before { content:""; position:absolute; inset:37px; border:4px solid #d5a94b; border-radius:50%; background:radial-gradient(circle at 38% 32%,#35795c,#0b2a20 70%); box-shadow:inset 0 0 22px #000; }
.roulette-wheel > div { width:79px; aspect-ratio:1; border:5px solid #e6c660; border-radius:50%; display:grid; place-items:center; position:absolute; z-index:2; inset:0; margin:auto; color:#fff0ae; background:linear-gradient(145deg,#1b5a42,#071c15); box-shadow:0 7px 15px #0008; }
.roulette-wheel span { font:700 2.2rem Oswald; }
.roulette-pointer { width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:28px solid #ffe47f;position:absolute;z-index:5;top:14px;filter:drop-shadow(0 4px 4px #0008); }
.roulette-shadow { position:absolute; z-index:0; width:245px; height:60px; bottom:10px; border-radius:50%; background:#0008; filter:blur(15px); }
.roulette-bets { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.roulette-bets button { min-height:47px; padding:4px; border:1px solid rgba(236,201,109,.16); border-radius:13px; display:flex; align-items:center; justify-content:center; gap:5px; color:#bdccc6; background:#102f25; font-size:.64rem; font-weight:800; }
.roulette-bets button.is-selected { border-color:#f0ce72; color:#ffeaa8; box-shadow:inset 0 0 0 1px #b3832f; }
.roulette-bets i { width:10px;height:10px;border-radius:50%; }
.red-dot { background:#c72c36; }
.black-dot { background:#0b0e0d;border:1px solid #73887f; }
.roulette-spin { width:100%; }
.recent-numbers { min-height:34px; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:6px; }
.recent-numbers span { width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:#ece6d3;background:#151a17;font:700 .57rem Oswald; }
.recent-numbers .is-red { background:#a6242d; }
.recent-numbers .is-green { background:#157750; }

/* Social and profile */
.social-card { min-height:150px; padding:20px; border-radius:24px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; }
.social-count { display:flex; flex-direction:column; }
.social-count span { color:#ffeda8; font:700 2.5rem Oswald; }
.social-count small { color:#90a89e; font-size:.65rem; }
.social-card .primary-button { grid-column:1 / -1; }
.avatar-stack { display:flex; padding-left:25px; }
.avatar-stack span { width:37px;height:37px;margin-left:-12px;border:2px solid #173c2e;border-radius:50%;display:grid;place-items:center;color:#fff0b0;background:#8a232b;font:700 .54rem Oswald; }
.avatar-stack span:nth-child(2n) { background:#18583f; }
.leaderboard { margin:0;padding:0;list-style:none;display:grid;gap:7px; }
.leaderboard li { min-height:61px;padding:8px 12px;border:1px solid rgba(235,201,109,.1);border-radius:17px;display:grid;grid-template-columns:28px 39px 1fr auto;align-items:center;gap:8px;background:rgba(12,43,33,.65); }
.leaderboard li.is-me { border-color:rgba(239,202,97,.36);background:linear-gradient(90deg,rgba(107,75,19,.3),rgba(12,43,33,.7)); }
.leaderboard .rank-number { color:#7e978d;font:700 .66rem Oswald; }
.leaderboard .leader-avatar { width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#ffeaa8;background:#81222a;font:700 .55rem Oswald; }
.leaderboard .leader-name { display:flex;flex-direction:column;min-width:0; }
.leaderboard .leader-name b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 .7rem Oswald; }
.leaderboard .leader-name small { color:#718b81;font-size:.5rem; }
.leaderboard .leader-score { display:flex;align-items:center;gap:5px;color:#ffe89f;font:700 .68rem Oswald; }
.leaderboard .leader-score .token-coin { width:20px;height:20px;font-size:.4rem; }
.profile-hero { min-height:128px;padding:20px 4px 14px;display:grid;grid-template-columns:74px 1fr 43px;align-items:center;gap:12px; }
.profile-avatar { width:70px;height:70px;border:3px solid #e4bd59;border-radius:50%;display:grid;place-items:center;color:#fff0b0;background:linear-gradient(145deg,#ad2d36,#55151a);box-shadow:0 10px 22px #0007;font:700 1rem Oswald; }
.profile-hero h2 { margin:5px 0 2px;font:600 1.6rem Oswald; }
.profile-hero > div:nth-child(2) > span { color:#849c92;font-size:.65rem; }
.profile-stats { min-height:83px;border:1px solid rgba(237,202,108,.13);border-radius:20px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;background:rgba(12,43,33,.68); }
.profile-stats div { min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px; }
.profile-stats div + div { border-left:1px solid rgba(235,200,109,.11); }
.profile-stats small { color:#718b81;font:700 .48rem Oswald;letter-spacing:.1em; }
.profile-stats b { color:#ffe89f;font:700 .92rem Oswald; }
.profile-menu { margin-top:11px;border:1px solid rgba(237,202,108,.11);border-radius:22px;overflow:hidden;background:rgba(10,36,28,.78); }
.profile-menu button { width:100%;min-height:67px;padding:9px 13px;border:0;border-bottom:1px solid rgba(237,202,108,.09);display:grid;grid-template-columns:39px 1fr auto;align-items:center;gap:10px;text-align:left;background:transparent; }
.profile-menu button:last-child { border-bottom:0; }
.profile-menu .menu-icon { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#ffe394;background:#174b37;font:700 1rem Oswald; }
.profile-menu button > span:nth-child(2) { display:flex;flex-direction:column; }
.profile-menu button b { font:600 .74rem Oswald; }
.profile-menu button small { margin-top:3px;color:#748e84;font-size:.54rem; }
.profile-menu button > i { color:#7f988e;font:normal 700 .85rem Oswald; }
.toggle { width:37px;height:21px;padding:3px;border-radius:99px;background:#275b46; }
.toggle em { display:block;width:15px;height:15px;border-radius:50%;background:#8ca097;transition:.2s; }
.toggle.is-on { background:#b38329; }
.toggle.is-on em { transform:translateX(16px);background:#fff0ac; }
.profile-disclaimer { max-width:360px;margin:14px auto 0;color:#647e74;text-align:center;font-size:.55rem;line-height:1.5; }

/* Dialogs and feedback */
dialog { width:min(calc(100% - 28px),410px);padding:24px;border:1px solid rgba(243,208,112,.27);border-radius:28px;color:var(--ink);background:linear-gradient(145deg,#123d2e,#061a14 70%);box-shadow:0 30px 80px #000b; }
dialog::backdrop { background:rgba(0,8,6,.78);backdrop-filter:blur(8px); }
.dialog-close { width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:50%;position:absolute;right:13px;top:13px;color:#c4d0ca;background:rgba(0,0,0,.2);font-size:1.25rem; }
.reward-dialog { overflow:hidden;text-align:center; }
.reward-dialog .reward-token { width:92px;height:92px;margin:7px auto 18px;border:5px solid #ffe28a;border-radius:50%;display:grid;place-items:center;position:relative;color:#3a2504;background:radial-gradient(circle at 35% 25%,#fff6ae,#dcaa36 55%,#8d5b10 58%,#e8bd52 73%,#704408 75%);box-shadow:0 16px 35px #0007,0 0 36px rgba(238,195,83,.25);font:700 2rem Oswald; }
.reward-dialog h2,.install-dialog h2 { margin:9px 0 6px;font:700 2rem/.95 Oswald; }
.reward-dialog > p:not(.eyebrow) { margin:0;color:#98afa5;font-size:.72rem; }
.reward-dialog .primary-button,.install-dialog .primary-button { width:100%;margin-top:16px; }
.streak-days { display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:18px; }
.streak-days span { min-width:0;aspect-ratio:1;border:1px solid rgba(236,201,108,.15);border-radius:9px;display:grid;place-items:center;color:#708a80;background:#0a281e;font:700 .52rem Oswald; }
.streak-days span.is-done { color:#2b1b03;background:linear-gradient(145deg,#ffe98e,#c78a27); }
.reward-rays { position:absolute;inset:-45%;opacity:.12;background:repeating-conic-gradient(from 0deg,#ffe170 0 4deg,transparent 4deg 13deg);animation:slow-spin 20s linear infinite; }
.install-dialog { text-align:center; }
.install-dialog > img { width:92px;margin:5px auto 15px;border-radius:24px;box-shadow:0 12px 25px #0007; }
.install-dialog #installInstructions { margin:15px 0 0;color:#a7bbb3;font-size:.7rem;line-height:1.6; }
.install-dialog ol { padding-left:22px;text-align:left; }
.toast-stack { position:fixed;z-index:100;left:50%;bottom:calc(84px + var(--safe-bottom));width:min(calc(100% - 28px),430px);transform:translateX(-50%);display:grid;gap:7px;pointer-events:none; }
.toast { min-height:48px;padding:10px 13px;border:1px solid rgba(244,211,120,.2);border-radius:15px;display:flex;align-items:center;gap:10px;color:#f5eed7;background:rgba(8,34,26,.96);box-shadow:0 10px 30px #0008;animation:toast-in .25s ease both;font-size:.68rem; }
.toast i { width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#301d02;background:#e8bd58;font:normal 800 .7rem Oswald; }
.toast.is-error i { color:#fff;background:#b92732; }

@keyframes hover-emblem { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)} }
@keyframes view-in { from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none} }
@keyframes turn-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,224,113,.55),0 5px 13px #0008}50%{box-shadow:0 0 0 7px rgba(255,224,113,0),0 5px 13px #0008} }
@keyframes reel-blur { from{transform:translateY(-9px)}to{transform:translateY(9px)} }
@keyframes bulb { from{opacity:.25}to{opacity:1} }
@keyframes slow-spin { to{transform:rotate(360deg)} }
@keyframes toast-in { from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none} }

@media (min-width: 620px) {
  body { padding:18px 0; }
  .app-shell { min-height:calc(100dvh - 36px);border:1px solid rgba(235,199,105,.12);border-radius:30px;overflow:hidden; }
  .bottom-nav { bottom:18px;border-radius:0 0 30px 30px; }
  .views { padding-left:24px;padding-right:24px; }
  .club-hero { min-height:290px; }
  .host-stage { width:44%;right:4%; }
  .quick-game { height:125px; }
  .blackjack-table { max-width:560px;margin:0 auto; }
  .blackjack-controls { max-width:560px;margin:0 auto; }
  .games-grid { grid-template-columns:repeat(3,1fr); }
  .game-tile:first-child { grid-column:span 2; }
  .game-tile { min-height:210px; }
}

@media (max-width: 360px) {
  .views { padding-left:10px;padding-right:10px; }
  .topbar { padding-left:11px;padding-right:11px; }
  .brand-button small { display:none; }
  .club-hero { min-height:236px;border-radius:23px; }
  .hero-copy { padding:24px 0 0 17px; }
  .hero-copy h2 { font-size:1.83rem; }
  .daily-chip { left:13px;bottom:13px;min-width:132px;min-height:52px; }
  .quick-game { height:100px;padding:9px 6px; }
  .quick-game .game-mark { width:35px;height:35px; }
  .blackjack-table { height:397px;border-width:6px; }
  .player-seat:nth-child(2) { left:-6px; }
  .player-seat:nth-child(3) { left:-7px; }
  .player-seat:nth-child(4) { right:-7px; }
  .player-seat:nth-child(5) { right:-6px; }
  .slot-screen { height:155px; }
  .game-bet-panel { padding:7px;gap:4px; }
  .spin-button { width:80px;height:66px; }
  .higher-arena { height:290px; }
  .higher-mike { left:-20px; bottom:7px; width:150px; max-height:252px; opacity:.9; }
  .playing-card,.next-card { width:137px;height:203px; }
  .roulette-stage { height:280px; }
  .roulette-wheel { width:225px; }
}

@media (max-height: 650px) and (max-width: 620px) {
  .auth-shell { grid-template-rows:140px auto;align-content:start; }
  .auth-art { min-height:140px; }
  .auth-mike { height:150px; }
  .auth-card { padding-top:19px; }
  .club-hero { min-height:220px; }
  .hero-copy { padding-top:21px; }
  .hero-copy h2 { margin-bottom:10px; }
  .blackjack-table { height:354px; }
  .slot-screen { height:140px; }
  .slot-crown { height:48px; }
  .higher-arena { height:250px; }
  .higher-mike { left:-12px; bottom:5px; width:126px; max-height:218px; opacity:.86; }
  .playing-card,.next-card { width:125px;height:185px; }
  .roulette-stage { height:240px; }
  .roulette-wheel { width:200px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important; }
}


/* Compacte accountpoort voor kleine telefoons; de registratie blijft bewust scrollbaar. */
@media (max-height: 650px) and (max-width: 620px) {
  .auth-shell {
    grid-template-rows: 116px auto;
    min-height: 100dvh;
    padding-top: calc(7px + var(--safe-top));
    padding-bottom: calc(9px + var(--safe-bottom));
  }
  .auth-art { min-height: 116px; }
  .auth-mike { height: 128px; }
  .seal-halo { width: 150px; }
  .floating-token { width: 29px; border-width: 2px; font-size: .62rem; }
  .token-a { left: 21%; bottom: 3%; }
  .token-b { right: 20%; top: 3%; }
  .auth-card { padding: 14px 16px 12px; border-radius: 22px; }
  .auth-card .eyebrow { margin: 0 0 3px; font-size: .57rem; }
  .auth-card h1 { margin: 3px 0 7px; font-size: 1.88rem; line-height: .9; }
  .token-note { font-size: .66rem; }
  .auth-tabs { margin: 12px 0 9px; }
  .auth-form { gap: 7px; }
  .auth-form label { font-size: .63rem; }
  .auth-form input { height: 44px; margin-top: 4px; }
  .auth-submit { min-height: 48px; }
  .auth-foot { margin-top: 8px; font-size: .56rem; line-height: 1.35; }
}