/* THEME: black / gold / purple / white. Classic dark-casino felt.
   Colour meanings (use them consistently):
     GOLD    = primary action + selected + the brand (Play, Join, Sit, picks, tabs)
     PURPLE  = secondary / social (Mulligan, share, community) and the felt
     WHITE   = text + neutral outline buttons
     GREEN   = MONEY ONLY (cash slides, pots, payouts, "paid", winnings)
     RED     = live / destructive
   Loaded after site.css so it re-skins every page; page files (dash/mulligan/invite) load after this. */
:root {
  --night: #07050c;
  --bg2: #120c1e;
  --panel: rgba(255, 255, 255, .035);
  --panel2: rgba(255, 255, 255, .07);
  --felt: #222224;
  --felt2: #3e3f41;
  --gold: #f5c542;
  --gold2: #d9a014;
  --cash: #f5c542;
  --cash2: #d9a014;
  --violet: #797b80;
  --violet2: #4d4e51;
  --violet-l: #c2c6cf;
  --pink: #797b80;
  --money: #2fd67b;
  --money-d: #0f5a34;
  --ice: #f5c542;
  --red: #ff5a5f;
  --ink: #f6f0e4;
  --mute: #adb1b9;
  --line: rgba(255, 255, 255, .1);
  --lip: rgba(0, 0, 0, .5);
  --r: 14px;
  --wrap: 1100px;
  --f-head: 'Outfit', 'Inter', system-ui, sans-serif;
  --f-chunk: 'Outfit', 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --f-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
body { background: #07050c; color: var(--ink); font-size: 15px; line-height: 1.45; }
body::before {
  background:
    radial-gradient(760px 460px at 100% 0, rgba(121, 123, 128, .30), transparent 65%),
    radial-gradient(640px 440px at 0 55%, rgba(245, 197, 66, .08), transparent 65%),
    linear-gradient(180deg, #0c0716 0%, #05030a 70%);
}
/* felt grain + a faint gold diamond lattice */
body::after {
  opacity: .9;
  background-image:
    radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.2px),
    repeating-linear-gradient(30deg, rgba(245, 197, 66, .035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-30deg, rgba(245, 197, 66, .035) 0 1px, transparent 1px 46px);
  background-size: 3px 3px, auto, auto;
}
.wrap { width: min(var(--wrap), 100% - 24px); }
section { padding: 26px 0; }
.tight { padding: 14px 0; }
.lp > .lp-bg { display: none; }
footer.site.lp > .lp-bg { display: block; opacity: .5; }

/* type: serif headlines for the classy casino feel */
h1, h2, h3 { font-family: var(--f-serif); font-weight: 800; text-transform: none; letter-spacing: 0; line-height: 1.08; }
h1 { font-size: clamp(30px, 5vw, 46px); }
h2 { font-size: clamp(21px, 2.6vw, 28px); }
h3 { font-size: 18px; }
.eyebrow { font: 800 11px var(--f-body); letter-spacing: .18em; color: var(--gold); }
.eyebrow::before { width: 14px; height: 2px; }
.lead { font-size: 15px; color: var(--mute); max-width: 62ch; }
.neon { color: var(--violet-l); text-shadow: 0 0 18px rgba(121, 123, 128, .6); }
.five { color: var(--gold); text-shadow: 0 0 14px rgba(245, 197, 66, .45); }
.gold { color: var(--gold); }
.cash { color: var(--violet-l); }
.sec-head { margin-bottom: 12px; gap: 12px; }
.sec-head > div { gap: 4px; }
.sec-head .lead { margin-top: 2px; font-size: 13.5px; }

/* BUTTONS: gold = primary, purple = secondary, ghost = neutral, money = green */
.btn { padding: 10px 18px; border-radius: 999px; font: 700 14px var(--f-body); letter-spacing: 0; text-transform: none; color: #1a1200; background: linear-gradient(180deg, #ffd964, #e0a216); box-shadow: 0 3px 12px rgba(245, 197, 66, .22), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 5px 16px rgba(245, 197, 66, .32), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn:active { transform: none; box-shadow: 0 1px 4px rgba(245, 197, 66, .3); }
.btn.gold { background: linear-gradient(180deg, #ffd964, #e0a216); color: #1a1200; }
.btn.pink, .btn.purple { background: linear-gradient(180deg, #a1a4ad, #5b5d60); color: #fff; box-shadow: 0 3px 12px rgba(121, 123, 128, .35), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn.ghost { background: rgba(255, 255, 255, .05); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.btn.ghost:hover { background: rgba(255, 255, 255, .1); }
.btn.money { background: linear-gradient(180deg, #4be38c, #19a65a); color: #03210f; box-shadow: 0 3px 12px rgba(47, 214, 123, .28), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn.sm { padding: 7px 14px; font-size: 13px; }

/* header */
.ticker { background: #000; border-bottom: 1px solid rgba(245, 197, 66, .15); height: 26px; }
.ticker-track { height: 26px; font: 500 12px var(--f-body); color: #b9bdc6; gap: 34px; }
.ticker-track b { color: var(--gold); }
.ticker-track i { color: var(--money); }
header.site { background: rgba(7, 5, 12, .88); border-bottom: 1px solid rgba(245, 197, 66, .2); }
header.site .wrap { height: 52px; gap: 14px; }
.logo svg { width: 32px; height: 32px; filter: none; }
.logo .wm { font: 800 20px/.85 var(--f-serif); letter-spacing: .02em; color: var(--gold); text-shadow: none; }
.logo .wm small { font: 700 8.5px var(--f-body); letter-spacing: .5em; color: var(--violet-l); margin-top: 4px; }
nav.main { margin-left: 2px; }
nav.main a { font: 600 14px var(--f-body); padding: 6px 11px; border-radius: 999px; color: var(--mute); }
nav.main a:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
nav.main a.on { color: var(--gold); background: rgba(245, 197, 66, .12); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 10px 10px 0 0; }
.bank { background: #000; border: 1px solid rgba(245, 197, 66, .4); color: var(--gold); padding: 3px 4px 3px 12px; font-size: 14px; }
.bank .av { width: 26px; height: 26px; background: linear-gradient(135deg, #ffd964, #e0a216); color: #1a1200; }
.burger { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--ink); font-size: 18px; }

/* surfaces */
.card { background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)), #110b1c; border: 1px solid rgba(245, 197, 66, .17); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); color: var(--ink); backdrop-filter: none; }
.chip { background: rgba(255, 255, 255, .1); color: var(--ink); padding: 3px 10px; font: 800 10px var(--f-body); letter-spacing: .1em; }
.chip.live { background: #696c70; color: #fff; }
.chip.live::before { background: #fff; }
.chip.open { background: rgba(245, 197, 66, .18); color: var(--gold); }
.chip.soon { background: rgba(255, 255, 255, .08); color: var(--mute); }
.chip.new { background: linear-gradient(90deg, #ffd964, #e0a216); color: #1a1200; }
.chip.ad { background: rgba(0, 0, 0, .5); color: #fff; }
.pill { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--mute); padding: 7px 15px; font: 700 13px var(--f-body); }
.pill.on { background: var(--gold); border-color: var(--gold); color: #1a1200; box-shadow: none; }

/* page headers & rows: tight */
.page-hero { padding: 20px 0 10px; }
.page-hero h1 { font-size: clamp(30px, 5vw, 44px); margin: 6px 0 6px; }
.page-hero .lead { font-size: 15px; }
.crumb { font: 700 11px var(--f-body); letter-spacing: .12em; color: var(--mute); }
.grid { gap: 12px; }
.game { transition: transform .15s; }
.game:hover { transform: translateY(-3px); border-color: rgba(245, 197, 66, .5); }
.game .art { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #222224, #0c0818); }
.game .art .emoji { font-size: 60px; filter: none; }
.game .body { padding: 12px 14px 14px; gap: 5px; }
.game .body p { color: var(--mute); font-size: 13px; }
.game .meta { font: 600 12px var(--f-body); color: var(--mute); }
.game .meta b { color: var(--gold); }
.game h3 { font-size: 18px; }
.levels { gap: 12px; }
.level { transition: transform .15s; }
.level:hover { transform: translateY(-3px); border-color: rgba(245, 197, 66, .5); }
.level .art { aspect-ratio: 16 / 9; }
.level .art .cd { background: rgba(0, 0, 0, .75); color: var(--gold); }
.level .body { padding: 10px 14px 14px; gap: 3px; }
.level h3 { font-size: 17px; }
.level p { font-size: 12.5px; color: var(--mute); }
.level .tiers span { background: rgba(245, 197, 66, .14); color: var(--gold); font-size: 11px; }
.level.hr { border-color: rgba(245, 197, 66, .6); }
.level.hr h3 { color: var(--gold); }
.ladder { gap: 10px; }
.rung { padding: 12px 8px 14px; background: linear-gradient(180deg, #0f5a34, #06210f); border: 1px solid rgba(47, 214, 123, .35); border-radius: 14px; }
.rung svg { max-width: 96px; filter: none; }
.rung b { font: 800 16px var(--f-serif); letter-spacing: 0; }
.rung .bk { color: var(--gold); font-size: 13px; }
.rung small { color: #a9dcbf; font-size: 12px; margin-top: 3px; }
.steps { gap: 10px; }
.step { padding: 14px; }
.step::before { width: 30px; height: 30px; border-radius: 10px; font: 800 17px var(--f-serif); box-shadow: none; transform: none; margin-bottom: 8px; }
.step h3 { font-size: 16px; }
.step p { color: var(--mute); font-size: 13px; }
.split { gap: 24px; }
.poster { border-radius: 14px; border: 1px solid rgba(245, 197, 66, .3); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); transform: none; }
.poster:hover { transform: none; }
.checks { gap: 7px; margin: 12px 0 16px; }
.checks li { font-size: 14px; color: var(--ink); }
.checks li::before { width: 20px; height: 20px; border-radius: 7px; font-size: 12px; background: var(--gold); color: #1a1200; }
.promo { padding: 16px; min-height: 0; gap: 6px; }
.promo .big { font: 800 40px/1 var(--f-serif); text-shadow: none; color: var(--gold); }
.promo p { font-size: 13px; color: #e9e1f6; }
.promo .em { font-size: 100px; opacity: .13; }
.promo .btn { margin-top: 6px; }
.promo.a { background: linear-gradient(135deg, #0f5a34, #06210f); border-color: rgba(47, 214, 123, .4); } /* money */
.promo.a .big { color: #7dffb4; }
.promo.b { background: linear-gradient(135deg, #37383b, #141515); }
.promo.c { background: linear-gradient(135deg, #6b4a00, #1a1203); }
.promo.d { background: linear-gradient(135deg, #262628, #0c0818); }
.promo.e { background: linear-gradient(135deg, #2a2108, #070503); }
.promo.f { background: linear-gradient(135deg, #303133, #0d0820); }
.tbl { grid-template-columns: 56px 1.4fr 1fr 1fr auto; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)), #110b1c; border: 1px solid rgba(245, 197, 66, .14); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.tbl:hover { transform: none; border-color: var(--gold); }
.tbl .th { width: 56px; height: 42px; border-radius: 10px; }
.tbl h4 { font: 700 15px var(--f-head); }
.tbl small { color: var(--mute); font-size: 12px; }
.tbl .stk { color: var(--gold); font-size: 14px; }
.tbl-list { gap: 8px; }
.seats i { width: 16px; height: 16px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.seats i.f { background: var(--gold); border-color: #fff3c4; box-shadow: none; }
.seats span { color: var(--mute); font-size: 13px; }
.ad { padding: 14px 16px; min-height: 0; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); border: 0; }
.ad:hover { transform: translateY(-2px); }
.ad .brand { font: 800 24px/1 var(--f-serif); text-shadow: none; }
.ad .brand small { font: 700 10px var(--f-body); }
.ad p { font-size: 13px; }
.ad .em { font-size: 80px; }
.ad .disc { font-size: 10px; }
.banner27 { border-radius: 12px; border: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); height: 64px; }
.banner27 .slide { padding: 0 58px 0 16px; gap: 14px; } /* room on the right for the Ad tag */
.banner27 .brand { font: 800 24px var(--f-serif); text-shadow: none; }
.banner27 p { font-size: 14px; font-weight: 700; }
.social { padding: 12px 14px; gap: 12px; }
.social .ic { width: 42px; height: 42px; font-size: 20px; }
.social b { font: 700 15px var(--f-head); }
.social small { color: var(--mute); font-size: 12px; }
.social .n { font: 800 22px var(--f-head); color: var(--gold); }
.social .n small { font-size: 9px; color: var(--mute); }
.board { gap: 6px; }
.row, .lb .r, .pay-row, .pool-row, .stats3 div, .tb, .how div, .d-grid4 div { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.row { padding: 8px 14px 8px 10px; gap: 12px; border-radius: 12px; grid-template-columns: 30px 40px 1fr auto; }
.row .face { width: 40px; height: 40px; font-size: 22px; border-radius: 12px; box-shadow: none; }
.row .rk { font: 800 22px var(--f-head); }
.row b { font: 700 15px var(--f-head); }
.row small { color: var(--mute); font-size: 12px; }
.row .amt { font: 800 20px var(--f-head); color: var(--money); }
.row.you { background: rgba(245, 197, 66, .12); border-color: var(--gold); }
.clips { gap: 10px; }
.clip { border-radius: 12px; border: 1px solid rgba(245, 197, 66, .2); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.post { padding: 12px 14px; }
.post .who { font: 700 14px var(--f-head); }
.post p { color: #e4dcf2; font-size: 14px; }
.feed { gap: 8px; }
.phone { box-shadow: 0 0 0 2px #343638, 0 10px 24px rgba(0, 0, 0, .55); }
.store { background: #000; border: 1px solid rgba(245, 197, 66, .5); color: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); padding: 7px 18px 7px 12px; }
.store small { color: var(--mute); }
.store b { font: 700 17px var(--f-head); }
.feat-card { padding: 14px; gap: 4px; }
.feat-card .ic { font-size: 30px; filter: none; }
.feat-card h3 { font-size: 16px; }
.feat-card p { color: var(--mute); font-size: 13px; }
.weapons { gap: 10px; }
.weapon { padding: 14px 10px; }
.weapon .ic { font-size: 36px; filter: none; }
.weapon h3 { font-size: 16px; }
.weapon p { color: var(--mute); font-size: 12px; }
.weapon .odds { color: var(--gold); font-size: 13px; }
.rooms .shot { border-radius: 16px; border: 1px solid rgba(245, 197, 66, .25); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); width: 190px; }
.table td { background: rgba(255, 255, 255, .05); padding: 10px 14px; font: 600 13px var(--f-body); }
.table th { color: var(--mute); font: 700 10px var(--f-body); }
.table td b { color: var(--gold); }
.table { border-spacing: 0 5px; }
.wait input, .field input, .field select { background: #0e0a18; color: var(--ink); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 11px 14px; font: 600 15px var(--f-body); }
.wait input:focus, .field input:focus { border-color: var(--gold); }
.field label { color: var(--mute); font: 700 10px var(--f-body); }
.modal { background: rgba(0, 0, 0, .75); }
.modal h3 { font-size: 28px; }
.quick a { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--ink); }
.quick a:hover { background: var(--gold); color: #1a1200; }

/* footer */
footer.site { margin-top: 18px; padding: 28px 0 20px; background: #030206; border-top: 1px solid rgba(245, 197, 66, .25); color: #cfc6e6; }
.foot-grid { gap: 20px; }
.foot-grid h5 { font: 800 11px var(--f-body); color: var(--gold); margin-bottom: 8px; }
.foot-grid a { color: var(--mute); padding: 2px 0; font-size: 13px; }
.foot-grid a:hover { color: #fff; }
.foot-grid p { color: var(--mute); font-size: 13px; margin-top: 8px; }
.legal { margin-top: 20px; padding-top: 14px; border-top-color: rgba(255, 255, 255, .1); color: #898c91; font-size: 12px; }
.legal .age { width: 36px; height: 36px; border-width: 2px; font: 800 14px var(--f-head); }

/* floor map labels */
.spot .lab rect { fill: #000; stroke: rgba(245, 197, 66, .6); }
.spot.hot .lab rect { fill: var(--gold); }
.spot.s-play .lab rect { fill: var(--gold); stroke: #fff3c4; }
.spot.s-play .lab text { fill: #1a1200; }
@media (max-width: 900px) {
  nav.main { top: 52px; background: rgba(7, 5, 12, .98); }
  nav.main a { color: var(--ink); }
  .tbl { grid-template-columns: 50px 1fr auto; }
}
@media (max-width: 640px) {
  section { padding: 18px 0; }
  .banner27 { height: 56px; }
  /* one line on phones: brand, then the pitch (cut short if it has to be), then the call to action */
  .banner27 .slide { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 14px 4px; }
  .banner27 .brand { font-size: 16px; white-space: nowrap; }
  .banner27 p { flex: 1; min-width: 0; margin: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .banner27 .chip { top: 4px; right: 8px; font-size: 8px; padding: 2px 6px; }
  .banner27 .dots { bottom: 3px; } .banner27 .dots i { width: 5px; height: 5px; }
}
.neonB { filter: drop-shadow(0 0 8px #f5c542); }
.neonB2 { filter: drop-shadow(0 0 8px #797b80); }
/* compact quick-link row under the floor map */
.quick { gap: 6px; margin-top: 8px; }
.quick a { padding: 7px 4px; font-size: 11px; border-radius: 12px; }
.quick a span { font-size: 18px; }
@media (max-width: 900px) { .quick { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .quick { grid-template-columns: repeat(4, 1fr); } .quick a:first-child { grid-column: span 4; background: var(--gold); color: #1a1200; display: flex; align-items: center; justify-content: center; gap: 8px; } .quick a:first-child span { display: inline; } }

/* WORDMARK: heavy cut-out letters, a black cat padding along behind them */
.logo .wm { position: relative; display: block; font: 400 25px/1 'Archivo Black', 'Outfit', sans-serif; letter-spacing: .02em; color: var(--gold); text-shadow: none; padding: 1px 3px 0; }
.logo .wm b { position: relative; z-index: 2; font: inherit; color: var(--gold); -webkit-text-stroke: 5px #07050c; paint-order: stroke fill; }
.logo .wm small { position: relative; z-index: 2; display: block; font: 700 8.5px var(--f-body); letter-spacing: .5em; color: var(--violet-l); margin-top: 2px; line-height: 1; padding-left: 2px; }
.logo .wm-cat { position: absolute; left: -2px; right: -2px; top: -4px; height: 30px; z-index: 1; overflow: hidden; pointer-events: none; }
.logo .wm-cat::before { content: ''; position: absolute; inset: 3px 0; background: radial-gradient(closest-side, rgba(121, 123, 128, .6), transparent); }
.logo .wm-cat svg { position: absolute; left: -48px; top: 1px; width: 50px; height: 27px; filter: drop-shadow(0 0 4px rgba(194, 198, 207, .9)); animation: catwalk 8s linear infinite; }
@keyframes catwalk { 0% { left: -52px; } 100% { left: 100%; } }
.cat-b { animation: catbob .5s ease-in-out infinite alternate; }
@keyframes catbob { to { transform: translateY(-1.5px); } }
.cat-b .lg { transform-box: fill-box; transform-origin: 50% 0; animation: catleg .5s ease-in-out infinite alternate; }
.cat-b .lg.l2 { animation-direction: alternate-reverse; }
@keyframes catleg { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
.cat-b .tail { transform-box: fill-box; transform-origin: 100% 100%; animation: cattail 1.4s ease-in-out infinite alternate; }
@keyframes cattail { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
footer.site .logo .wm b { -webkit-text-stroke-color: #030206; }
@media (max-width: 640px) { .logo .wm { font-size: 21px; } .logo .wm-cat { height: 25px; } .logo .wm-cat svg { height: 23px; width: 43px; } }
@media (prefers-reduced-motion: reduce) { .logo .wm-cat svg, .cat-b, .cat-b .lg, .cat-b .tail { animation: none !important; } .logo .wm-cat svg { left: 30%; } }

/* profile chip: photo shows even on phones */
a.bank { display: flex; align-items: center; gap: 8px; text-decoration: none; }
a.bank[hidden] { display: none !important; }
.bank .av { background-size: cover; background-position: center; border-radius: 50%; font-size: 15px; }
@media (max-width: 900px) { a.bank { display: flex !important; padding: 2px; background: none; border: 0; } a.bank[hidden] { display: none !important; } a.bank .bt { display: none; } a.bank .av { width: 34px; height: 34px; border: 2px solid var(--gold); } }
.chip.sport { background: rgba(121, 123, 128, .92); color: #fff; }
/* bigger cat so it reads above and below the heavy letters */
.logo .wm-cat { top: -11px; height: 44px; overflow: visible; clip-path: inset(-6px 0 -6px 0); }
.logo .wm-cat::before { inset: 0 -4px; background: radial-gradient(closest-side, rgba(121, 123, 128, .75), transparent); }
.logo .wm-cat svg { top: 0; width: 78px; height: 42px; animation-duration: 9s; }
@keyframes catwalk { 0% { left: -84px; } 100% { left: 100%; } }
@media (max-width: 640px) { .logo .wm-cat { top: -9px; height: 38px; } .logo .wm-cat svg { width: 66px; height: 36px; } }

/* ---- final wordmark: the cat walks INSIDE the gold lettering (painted into the text fill) ---- */
.logo .wm { font: 400 22px/1 'Archivo Black', 'Outfit', sans-serif; letter-spacing: .03em; padding: 0; }
.logo .wm b { color: transparent; -webkit-text-stroke: 0; paint-order: normal; background: var(--cat) no-repeat -70px 52% / 44px 24px, linear-gradient(180deg, #ffe58a 0%, #f5c542 55%, #d9a014 100%); -webkit-background-clip: text; background-clip: text; animation: catpan 7s linear infinite; }
@keyframes catpan { from { background-position: -70px 52%, 0 0; } to { background-position: calc(100% + 70px) 52%, 0 0; } }
.logo .wm small { font-size: 7.5px; margin-top: 1px; }
.logo .wm-cat { display: none; }
@media (prefers-reduced-motion: reduce) { .logo .wm b { animation: none; background-position: 40% 52%, 0 0; } }

/* ---- much smaller header: no Play button, no menu button ---- */
header.site .wrap { height: 42px; gap: 10px; }
.logo svg { width: 26px; height: 26px; }
.bank { padding: 2px 3px 2px 10px; font-size: 13px; }
.bank .av, a.bank .av { width: 26px; height: 26px; }
.burger { display: none !important; }
#signin { padding: 5px 12px; font-size: 12px; }
.tabbar { display: none; }
@media (max-width: 900px) {
  header.site .wrap { height: 38px; }
  nav.main { display: none !important; }
  .logo svg { width: 24px; height: 24px; }
  .logo .wm { font-size: 19px; }
  a.bank .av { width: 28px; height: 28px; border-width: 2px; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(7, 5, 12, .96); border-top: 1px solid rgba(245, 197, 66, .3); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); backdrop-filter: blur(10px); }
  .tabbar a { flex: 1; display: grid; justify-items: center; gap: 0; padding: 3px 0; border-radius: 10px; font: 700 9.5px var(--f-body); color: var(--mute); text-decoration: none; letter-spacing: .02em; }
  .tabbar a span { font-size: 19px; line-height: 1.2; filter: grayscale(.6); }
  .tabbar a.on { color: var(--gold); background: rgba(245, 197, 66, .1); }
  .tabbar a.on span { filter: none; }
  body { padding-bottom: 58px; }
  footer.site { margin-bottom: 0; }
}

/* ---- cat: a Blender-rendered low-poly walk cycle (img/cat-walk.webp) painted into the gold letters ---- */
.logo .wm b { background: url(../img/cat-walk.webp) no-repeat -60px 52% / auto 128%, linear-gradient(180deg, #ffe58a 0%, #f5c542 55%, #d9a014 100%); -webkit-background-clip: text; background-clip: text; animation: catpan 6.5s linear infinite; }
@keyframes catpan { from { background-position: -56px 52%, 0 0; } to { background-position: calc(100% + 56px) 52%, 0 0; } }

/* ---- nav: Home / BANK / CREW / spinning 3D dice + Games ---- */
nav.main a { display: inline-flex; align-items: center; font: 700 13px var(--f-body); letter-spacing: .04em; padding: 6px 12px; }
.die3d { display: inline-block; width: 16px; height: 16px; perspective: 70px; margin-right: 7px; vertical-align: middle; }
.die3d .cube { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; animation: dice3d 4.5s linear infinite; }
.die3d i { position: absolute; inset: 0; background-color: #f6f0e4; border: 1px solid #cbbd98; border-radius: 3px; backface-visibility: visible; }
.die3d .f1 { transform: translateZ(8px); background-image: radial-gradient(circle at 50% 50%, #120a00 16%, transparent 18%); }
.die3d .f2 { transform: rotateY(90deg) translateZ(8px); background-image: radial-gradient(circle at 28% 28%, #120a00 16%, transparent 18%), radial-gradient(circle at 72% 72%, #120a00 16%, transparent 18%); }
.die3d .f3 { transform: rotateY(180deg) translateZ(8px); background-image: radial-gradient(circle at 25% 25%, #120a00 15%, transparent 17%), radial-gradient(circle at 50% 50%, #120a00 15%, transparent 17%), radial-gradient(circle at 75% 75%, #120a00 15%, transparent 17%); }
.die3d .f4 { transform: rotateY(-90deg) translateZ(8px); background-image: radial-gradient(circle at 27% 27%, #120a00 15%, transparent 17%), radial-gradient(circle at 73% 27%, #120a00 15%, transparent 17%), radial-gradient(circle at 27% 73%, #120a00 15%, transparent 17%), radial-gradient(circle at 73% 73%, #120a00 15%, transparent 17%); }
.die3d .f5 { transform: rotateX(90deg) translateZ(8px); background-image: radial-gradient(circle at 27% 27%, #120a00 14%, transparent 16%), radial-gradient(circle at 73% 27%, #120a00 14%, transparent 16%), radial-gradient(circle at 50% 50%, #120a00 14%, transparent 16%), radial-gradient(circle at 27% 73%, #120a00 14%, transparent 16%), radial-gradient(circle at 73% 73%, #120a00 14%, transparent 16%); }
.die3d .f6 { transform: rotateX(-90deg) translateZ(8px); background-image: radial-gradient(circle at 27% 25%, #120a00 14%, transparent 16%), radial-gradient(circle at 73% 25%, #120a00 14%, transparent 16%), radial-gradient(circle at 27% 50%, #120a00 14%, transparent 16%), radial-gradient(circle at 73% 50%, #120a00 14%, transparent 16%), radial-gradient(circle at 27% 75%, #120a00 14%, transparent 16%), radial-gradient(circle at 73% 75%, #120a00 14%, transparent 16%); }
@keyframes dice3d { 0% { transform: rotateX(-25deg) rotateY(0deg); } 100% { transform: rotateX(335deg) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .die3d .cube { animation: none; transform: rotateX(-25deg) rotateY(-30deg); } }

/* bottom bar is gone for now */
.tabbar { display: none !important; }
body { padding-bottom: 0 !important; }
@media (max-width: 900px) {
  header.site .wrap { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo r" "nav nav"; height: auto; row-gap: 0; padding-top: 3px; align-items: center; }
  header.site .logo { grid-area: logo; height: 36px; }
  header.site .hdr-r { grid-area: r; }
  nav.main { grid-area: nav; display: grid !important; grid-template-columns: repeat(4, 1fr); position: static; margin: 0; padding: 0 0 3px; gap: 3px; background: none; border: 0; }
  nav.main a { justify-content: center; padding: 6px 0; font-size: 12.5px; border-radius: 10px; color: var(--mute); }
  nav.main a.on { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 10px 10px 0 0; background: rgba(245, 197, 66, .1); }
}

/* ---- drag + swipe feel ---- */
.d-track, .sb-track { cursor: grab; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; user-select: none; -webkit-user-select: none; }
.d-track.dragging, .sb-track.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.d-slide, .sb-card { scroll-snap-stop: always; -webkit-user-drag: none; }
.d-slide img, .d-slide video, .sb-card img { pointer-events: none; -webkit-user-drag: none; }
.sb-card { scroll-snap-type: none; }
.sb-track { scroll-snap-type: x proximity; }

/* ---- the Home / BANK / CREW / Games bar lives at the bottom on phones ---- */
@media (max-width: 900px) {
  header.site { backdrop-filter: none; -webkit-backdrop-filter: none; }
  header.site .wrap { display: flex; grid-template-columns: none; grid-template-areas: none; height: 38px; padding-top: 0; }
  header.site .logo { height: auto; }
  nav.main { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 90; margin: 0; padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); gap: 4px; background: rgba(7, 5, 12, .97); border-top: 1px solid rgba(245, 197, 66, .35); }
  nav.main a { padding: 11px 0; font-size: 13.5px; letter-spacing: .05em; border-radius: 12px; box-shadow: none; }
  nav.main a.on { background: rgba(245, 197, 66, .14); box-shadow: inset 0 2px 0 var(--gold); border-radius: 12px; }
  body { padding-bottom: 64px !important; }
}

/* ---- glide sliders: JS does the physics, so no CSS snapping or smooth-scroll fighting it ---- */
.d-track, .sb-track { scroll-snap-type: none !important; scroll-behavior: auto !important; touch-action: pan-y pinch-zoom; cursor: grab; }
.d-track.dragging, .sb-track.dragging { cursor: grabbing; }
.d-slide, .sb-card { scroll-snap-align: none; scroll-snap-stop: normal; }

/* ---- background: a slow shifting gradient (black / violet / gold) ---- */
body::before {
  background:
    radial-gradient(760px 460px at 100% 0, rgba(121, 123, 128, .26), transparent 65%),
    radial-gradient(640px 440px at 0 55%, rgba(245, 197, 66, .08), transparent 65%),
    linear-gradient(125deg, #0a0614 0%, #1d1d1e 20%, #07050c 42%, #2a1a05 60%, #121313 80%, #0a0614 100%);
  background-size: auto, auto, 320% 320%;
  animation: bgshift 28s ease-in-out infinite alternate;
}
@keyframes bgshift { 0% { background-position: 0 0, 0 0, 0% 30%; } 50% { background-position: 0 0, 0 0, 70% 80%; } 100% { background-position: 0 0, 0 0, 100% 20%; } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ---- cat sized so the WHOLE walk shows inside the letters, legs included ---- */
.logo .wm b { background: url(../img/cat-walk.webp) no-repeat -60px 58% / auto 66%, linear-gradient(180deg, #ffe58a 0%, #f5c542 55%, #d9a014 100%); -webkit-background-clip: text; background-clip: text; animation: catpan 7s linear infinite; }
@keyframes catpan { from { background-position: -50px 58%, 0 0; } to { background-position: calc(100% + 50px) 58%, 0 0; } }

/* ---- ADS: animated, spicy, and the whole thing is the button ---- */
.banner27 { position: relative; }
.banner27 .slide { text-decoration: none; cursor: pointer; overflow: hidden; }
.banner27 .slide.on .brand { animation: adin .55s cubic-bezier(.2, 1.2, .3, 1) both; }
.banner27 .slide.on p { animation: adup .5s .12s both; }
.banner27 .slide.on .go { animation: adup .5s .22s both; }
.banner27 .brand .em, .ad .em { display: inline-block; }
.banner27 .slide.on .brand .em { animation: adwig 1.1s ease-in-out infinite; transform-origin: 50% 80%; }
.banner27 .go { margin-left: auto; flex: none; font: 800 12px var(--f-body); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.banner27 .go i { font-style: normal; display: inline-block; animation: adnudge 1s ease-in-out infinite; }
.hot .shine, .banner27 .shine { position: absolute; top: 0; bottom: 0; width: 38%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent); transform: skewX(-20deg); animation: adshine 3.4s ease-in-out infinite; pointer-events: none; }
.banner27 { animation: adglow 2.6s ease-in-out infinite; }
@keyframes adin { from { opacity: 0; transform: translateX(-26px); } }
@keyframes adup { from { opacity: 0; transform: translateY(10px); } }
@keyframes adwig { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-14deg) scale(1.15); } 40% { transform: rotate(12deg) scale(1.15); } 60% { transform: rotate(-6deg); } }
@keyframes adnudge { 50% { transform: translateX(4px); } }
@keyframes adshine { 0% { left: -60%; } 45%, 100% { left: 140%; } }
@keyframes adglow { 0%, 100% { box-shadow: 0 3px 10px rgba(0, 0, 0, .4); } 50% { box-shadow: 0 3px 22px rgba(245, 197, 66, .45); } }
.banner27.slim .go { font-size: 10px; }
.banner27.slim .go i { font-size: 13px; }
/* grid ad cards */
.ad.hot { cursor: pointer; overflow: hidden; animation: adcard 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.5s); }
.ad .cta { margin-top: auto; align-self: flex-start; font: 800 14px var(--f-body); letter-spacing: .03em; text-transform: uppercase; }
.ad .cta i { font-style: normal; display: inline-block; animation: adnudge 1s ease-in-out infinite; }
.ad.hot .em { animation: adwig 2.2s ease-in-out infinite; }
.ad .brand { animation: adbrand 2.8s ease-in-out infinite; }
@keyframes adcard { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes adbrand { 50% { letter-spacing: .02em; } }
@media (prefers-reduced-motion: reduce) { .banner27, .banner27 *, .ad.hot, .ad.hot * { animation: none !important; } }

/* ---- wider: use the whole app width ---- */
.wrap { width: min(1320px, 100% - 16px); }
.wt-wrap, .pf-wrap, .mg-wrap { max-width: 1000px; }
@media (max-width: 640px) { .wrap { width: calc(100% - 12px); } }
section { padding-left: 0; padding-right: 0; }

/* ---- bank balance next to the profile photo ---- */
.bank .bal { font: 800 13px var(--f-head); color: var(--money); letter-spacing: .01em; }
.bank .bt { color: var(--ink); font: 700 12px var(--f-body); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.bank { padding: 2px 3px 2px 10px; background: #000; border: 1px solid rgba(245, 197, 66, .45); border-radius: 999px; }
@media (max-width: 900px) {
  a.bank { padding: 2px 3px 2px 9px !important; background: #000 !important; border: 1px solid rgba(245, 197, 66, .45) !important; gap: 6px; }
  a.bank .bt { display: none !important; }
  a.bank .av { width: 26px !important; height: 26px !important; border: 0 !important; }
}

/* ---- bottom / top nav: real icons ---- */
nav.main a { position: relative; display: inline-flex; align-items: center; gap: 7px; }
nav.main a .ni { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.2, 1.5, .4, 1), filter .25s, color .2s; overflow: visible; }
nav.main a .ni .fl { fill: rgba(255, 255, 255, .06); }
nav.main a .ni text { stroke: none; fill: currentColor; font-family: 'Outfit', sans-serif; font-weight: 800; }
nav.main a .ni .dl { font-size: 4.2px; fill: #120a00; }
nav.main a .ni .co { fill: currentColor; stroke: none; }
nav.main a .ni .ds { font-size: 4px; opacity: .85; }
nav.main a .ni .back { opacity: .55; }
nav.main a .ni .sh { stroke-width: 1.5; }
nav.main a.on { color: var(--gold); }
nav.main a.on .ni { filter: drop-shadow(0 0 5px rgba(245, 197, 66, .75)); transform: translateY(-1px) scale(1.08); }
nav.main a.on .ni .fl { fill: rgba(245, 197, 66, .2); }
nav.main a:active .ni { transform: scale(.88); }

/* ---- the dice: crisp SVG pips, shaded faces, one smooth constant-speed tumble ---- */
.die3d { --s: 18px; --h: calc(var(--s) / 2); width: var(--s); height: var(--s); perspective: 110px; margin: 0; display: inline-block; flex: none; vertical-align: middle; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.die3d .cube { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; animation: dice3d 7s linear infinite; will-change: transform; }
.die3d i { position: absolute; inset: 0; border: 0; border-radius: 0; background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.die3d .f1 { transform: translateZ(var(--h)); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fffaf0'/><stop offset='1' stop-color='%23e9dfc6'/></linearGradient></defs><rect width='100' height='100' rx='20' fill='url(%23g)' stroke='%23c9b98e' stroke-width='3'/><circle cx='50' cy='50' r='9.5' fill='%23140c02'/></svg>"); filter: brightness(1); }
.die3d .f2 { transform: rotateY(90deg) translateZ(var(--h)); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fffaf0'/><stop offset='1' stop-color='%23e9dfc6'/></linearGradient></defs><rect width='100' height='100' rx='20' fill='url(%23g)' stroke='%23c9b98e' stroke-width='3'/><circle cx='29' cy='29' r='9.5' fill='%23140c02'/><circle cx='71' cy='71' r='9.5' fill='%23140c02'/></svg>"); filter: brightness(0.9); }
.die3d .f3 { transform: rotateY(180deg) translateZ(var(--h)); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fffaf0'/><stop offset='1' stop-color='%23e9dfc6'/></linearGradient></defs><rect width='100' height='100' rx='20' fill='url(%23g)' stroke='%23c9b98e' stroke-width='3'/><circle cx='27' cy='27' r='9.5' fill='%23140c02'/><circle cx='50' cy='50' r='9.5' fill='%23140c02'/><circle cx='73' cy='73' r='9.5' fill='%23140c02'/></svg>"); filter: brightness(0.8); }
.die3d .f4 { transform: rotateY(-90deg) translateZ(var(--h)); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fffaf0'/><stop offset='1' stop-color='%23e9dfc6'/></linearGradient></defs><rect width='100' height='100' rx='20' fill='url(%23g)' stroke='%23c9b98e' stroke-width='3'/><circle cx='29' cy='29' r='9.5' fill='%23140c02'/><circle cx='71' cy='29' r='9.5' fill='%23140c02'/><circle cx='29' cy='71' r='9.5' fill='%23140c02'/><circle cx='71' cy='71' r='9.5' fill='%23140c02'/></svg>"); filter: brightness(0.86); }
.die3d .f5 { transform: rotateX(90deg) translateZ(var(--h)); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fffaf0'/><stop offset='1' stop-color='%23e9dfc6'/></linearGradient></defs><rect width='100' height='100' rx='20' fill='url(%23g)' stroke='%23c9b98e' stroke-width='3'/><circle cx='29' cy='29' r='9.5' fill='%23140c02'/><circle cx='71' cy='29' r='9.5' fill='%23140c02'/><circle cx='50' cy='50' r='9.5' fill='%23140c02'/><circle cx='29' cy='71' r='9.5' fill='%23140c02'/><circle cx='71' cy='71' r='9.5' fill='%23140c02'/></svg>"); filter: brightness(0.96); }
.die3d .f6 { transform: rotateX(-90deg) translateZ(var(--h)); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fffaf0'/><stop offset='1' stop-color='%23e9dfc6'/></linearGradient></defs><rect width='100' height='100' rx='20' fill='url(%23g)' stroke='%23c9b98e' stroke-width='3'/><circle cx='29' cy='24' r='9.5' fill='%23140c02'/><circle cx='71' cy='24' r='9.5' fill='%23140c02'/><circle cx='29' cy='50' r='9.5' fill='%23140c02'/><circle cx='71' cy='50' r='9.5' fill='%23140c02'/><circle cx='29' cy='76' r='9.5' fill='%23140c02'/><circle cx='71' cy='76' r='9.5' fill='%23140c02'/></svg>"); filter: brightness(0.74); }
@keyframes dice3d { from { transform: rotate3d(1, 1, .35, 0deg); } to { transform: rotate3d(1, 1, .35, 360deg); } }
nav.main a.on .die3d { filter: drop-shadow(0 0 6px rgba(245, 197, 66, .8)); }
@media (prefers-reduced-motion: reduce) { .die3d .cube { animation: none; transform: rotate3d(1, 1, .35, 40deg); } }

@media (max-width: 900px) {
  nav.main { gap: 2px; padding: 8px 8px calc(7px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: linear-gradient(180deg, rgba(21, 22, 23, .97), rgba(7, 5, 12, .98)); border-top: 1px solid rgba(245, 197, 66, .4); box-shadow: 0 -10px 30px rgba(0, 0, 0, .55), 0 -1px 0 rgba(121, 123, 128, .35); backdrop-filter: blur(14px); }
  nav.main a { flex-direction: column; justify-content: center; gap: 3px; padding: 7px 0 5px; font: 800 10.5px var(--f-body); letter-spacing: .08em; text-transform: uppercase; border-radius: 14px; color: var(--mute); box-shadow: none; background: none; }
  nav.main a .ni { width: 25px; height: 25px; }
  nav.main a .die3d { --s: 22px; margin: 1px 0 1px; }
  nav.main a.on { color: var(--gold); background: radial-gradient(60% 90% at 50% 0, rgba(245, 197, 66, .22), transparent 75%); box-shadow: none; border-radius: 14px; }
  nav.main a.on::before { content: ''; position: absolute; top: -9px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 4px 4px; background: var(--gold); box-shadow: 0 0 12px var(--gold), 0 0 24px rgba(245, 197, 66, .6); }
  body { padding-bottom: 76px !important; }
}

/* iPhone: sit the tab bar lower, hugging the home indicator instead of floating above a full safe-area gap */
@media (max-width: 900px) {
  nav.main { padding-bottom: max(4px, calc(env(safe-area-inset-bottom) - 18px)) !important; }
  body { padding-bottom: calc(66px + max(0px, env(safe-area-inset-bottom) - 18px)) !important; }
}