/* LUXE: black, shiny gold, diamond platinum. Loaded last on every page.
   Gold = action + brand. Platinum = secondary + outlines. Green = money only. Red = live / destructive. */
:root {
  --night: #040405;
  --bg2: #0d0d10;
  --felt: #121316;
  --felt2: #1f2126;
  --gold: #f6cf5f;
  --gold2: #c8931a;
  --cash: #f6cf5f;
  --cash2: #c8931a;
  --violet: #d3dae8;
  --violet2: #8f99ab;
  --violet-l: #eef2f9;
  --pink: #d3dae8;
  --ink: #f8f5ee;
  --mute: #a7abb6;
  --line: rgba(255, 255, 255, .11);
  --gold-metal: linear-gradient(180deg, #fff3b8 0%, #f8d567 22%, #e3a91e 56%, #b9840f 100%);
  --plat-metal: linear-gradient(180deg, #ffffff 0%, #e6ecf6 30%, #aab4c6 62%, #dfe6f1 100%);
  --press: cubic-bezier(.3, 1.7, .5, 1);
}

/* ---- the room: black with faint gold + diamond light ---- */
body { background: #040405; }
body::before {
  background:
    radial-gradient(700px 420px at 100% 0, rgba(220, 230, 250, .10), transparent 65%),
    radial-gradient(640px 440px at 0 60%, rgba(246, 207, 95, .09), transparent 65%),
    radial-gradient(500px 300px at 50% 100%, rgba(246, 207, 95, .05), transparent 70%),
    linear-gradient(180deg, #0a0a0d 0%, #030304 75%) !important;
  background-size: auto !important; animation: none !important;
}
body::after { opacity: .5; }

/* ---- header + bottom nav: black glass with a gold hairline ---- */
header.site { background: linear-gradient(180deg, rgba(14, 14, 18, .94), rgba(5, 5, 7, .9)); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(246, 207, 95, .65), rgba(235, 240, 250, .5), rgba(246, 207, 95, .65), transparent) 1; }
nav.main { background: linear-gradient(180deg, rgba(18, 18, 22, .97), rgba(4, 4, 6, .98)) !important; border-top: 1px solid rgba(246, 207, 95, .4) !important; box-shadow: 0 -10px 30px rgba(0, 0, 0, .6), 0 -1px 0 rgba(255, 255, 255, .08) !important; }
nav.main a { transition: transform .15s var(--press), color .2s; }
nav.main a:active { transform: scale(.92); }
nav.main a.on { color: var(--gold) !important; text-shadow: 0 0 12px rgba(246, 207, 95, .55); }
nav.main a.on svg { filter: drop-shadow(0 0 6px rgba(246, 207, 95, .7)); }

/* ---- the logo: white glass lettering, a black low-poly cat walking through it, and a reflection ---- */
.logo .wm { position: relative; }
.logo .rfwrap { position: absolute; left: 0; right: 0; top: 100%; height: 8px; overflow: hidden; pointer-events: none; margin-top: 1px; }
.logo .rf { display: block; font: inherit; font-style: normal; letter-spacing: .035em; line-height: 1; transform: scaleY(-1); color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 28%, #b7c4d9 49%, #f7faff 52%, #cdd8ea 80%, #ffffff 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)); opacity: .55; }
.logo .wm b {
  color: transparent !important;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 49%, rgba(200, 225, 255, .5) 54%, transparent 62%) no-repeat -150% 0 / 55% 100%,
    linear-gradient(180deg, #ffffff 0%, #eef4ff 28%, #b7c4d9 49%, #f7faff 52%, #cdd8ea 80%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  animation: glassrun 7s linear infinite;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)) drop-shadow(0 2px 7px rgba(150, 185, 255, .38));
  letter-spacing: .035em;
}
.logo .wm small { color: #cfd6e4 !important; text-shadow: 0 0 6px rgba(200, 220, 255, .5); letter-spacing: .55em; }
@keyframes glassrun {
  0% { background-position: -150% 0, 0 0; }
  100% { background-position: 250% 0, 0 0; }
}
/* the cat (frames driven by js/logocat.js) sits on top of the glass; its rim light keeps him readable on black */
.logo .lc { position: absolute; left: 0; top: 0; display: none; pointer-events: none; z-index: 4; background: url(../img/cat-sheet.webp) no-repeat; will-change: transform; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
footer.site .logo .lc { display: none !important; }
footer.site .logo .rfwrap { display: none; }
@media (prefers-reduced-motion: reduce) { .logo .wm b { animation: none; background-position: 150% 0, 0 0; } }
header.site .wrap { height: 44px; } @media (max-width: 900px) { header.site .wrap { height: 44px !important; } }
/* iPhone home-screen app: the page draws up under the status bar (clock + battery), so there's no empty black band above the logo.
   Safari and desktop have no inset, so nothing changes there. */
header.site { padding-top: max(0px, calc(env(safe-area-inset-top) - 15px)); background: linear-gradient(180deg, #050507, #0b0b0f); }

/* ---- buttons: polished gold metal, platinum outlines, a shine that sweeps, and a satisfying press ---- */
.btn, .btn.gold { position: relative; overflow: hidden; background: var(--gold-metal) !important; color: #221500 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(110, 70, 0, .45), 0 6px 18px rgba(246, 207, 95, .24), 0 1px 0 rgba(0, 0, 0, .5) !important;
  transition: transform .14s var(--press), box-shadow .14s, filter .2s !important; -webkit-tap-highlight-color: transparent; }
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .65), transparent); transform: skewX(-18deg); pointer-events: none; }
.btn:hover::after { animation: sheen .8s ease; }
@keyframes sheen { to { left: 130%; } }
.btn:hover { filter: brightness(1.05); transform: translateY(-1px) !important; }
.btn:active { transform: translateY(1px) scale(.965) !important; box-shadow: inset 0 2px 4px rgba(110, 70, 0, .5), 0 2px 8px rgba(246, 207, 95, .2) !important; filter: brightness(.97); }
.btn.ghost, .btn.pink, .btn.purple { background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03)) !important; color: #f4f7fc !important; text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(220, 230, 248, .5), inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 14px rgba(0, 0, 0, .4) !important; }
.btn.ghost::after, .btn.pink::after, .btn.purple::after { background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent); }
.btn.money { background: linear-gradient(180deg, #5ff0a0, #17a057) !important; color: #03210f !important; }
.btn:disabled, .btn[disabled] { filter: grayscale(.6) brightness(.7); }
.mini { transition: transform .13s var(--press); } .mini:active { transform: scale(.94); }
.mini.gold { background: var(--gold-metal); color: #221500; border-color: transparent; }

/* ripple (added by sfx.js on press) */
.rip { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); animation: rip .55s ease-out forwards; z-index: 5; }
@keyframes rip { to { transform: scale(1); opacity: 0; } }
.d-btn, .tabs button, .pmode button, .chips button, .pool-row, .nt-row, .paybtn { position: relative; overflow: hidden; }

/* ---- cards + panels: dark glass with a platinum top edge ---- */
.card, .pool-row, .stats3 > div, .how > div, .mg-me, .nt, .sheet, .late-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important;
  border-color: rgba(220, 228, 244, .14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 30px rgba(0, 0, 0, .4); }
.pool-row { transition: transform .15s var(--press), border-color .2s; } .pool-row:active { transform: scale(.985); } .pool-row:hover { border-color: rgba(246, 207, 95, .5) !important; }
.sheet { background: linear-gradient(180deg, #17181c, #0a0a0c) !important; border-color: rgba(246, 207, 95, .4) !important; }
.tabs { background: linear-gradient(180deg, #121316, #07070a); border-color: rgba(220, 228, 244, .14); }
.tabs button.on { background: var(--gold-metal) !important; color: #221500 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 #8a5e00 !important; }
.chips button.on, .pmode button.on { background: var(--gold-metal) !important; color: #221500 !important; }
.mg-title span { color: var(--gold); text-shadow: 0 0 20px rgba(246, 207, 95, .5); }
.badge { background: rgba(246, 207, 95, .15); color: var(--gold); border: 1px solid rgba(246, 207, 95, .35); }
.codechip { border-color: rgba(246, 207, 95, .6) !important; color: var(--gold) !important; }

/* home dashboard tiles */
.d-btn.fantasy::before { background: radial-gradient(circle at 85% 20%, rgba(246, 207, 95, .5), transparent 45%), linear-gradient(135deg, #3a3b41, #0b0b0d) !important; }
.d-btn { border: 1px solid rgba(220, 228, 244, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 26px rgba(0, 0, 0, .5); transition: transform .16s var(--press), border-color .2s; }
.d-btn:hover { border-color: rgba(246, 207, 95, .6); } .d-btn:active { transform: scale(.97); }
.sb-card, .banner27 { border-color: rgba(220, 228, 244, .16); }

/* chat: your bubbles are gold, theirs are smoked glass */
.cm.mine .bub { background: var(--gold-metal) !important; color: #1d1200; border-color: rgba(255, 240, 180, .6) !important; }
.cm.mine .ct { color: #1d1200; } .cm.mine .ct a { color: #5a3a00; } .cm.mine .ctime { color: rgba(40, 25, 0, .55); }
.bub { background: linear-gradient(180deg, #202126, #14151a); }
.lg-send { background: var(--gold-metal) !important; }

/* switches + toggles */
.nt-row.on .sw { background: var(--gold-metal) !important; }

/* sound button in the header */
.snd { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(220, 228, 244, .3); background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); color: #eef2f9; display: grid; place-items: center; padding: 0; cursor: pointer; transition: transform .14s var(--press); }
.snd:active { transform: scale(.88); } .snd svg { width: 16px; height: 16px; } .snd.off { color: #777c88; }

/* focus + selection */
::selection { background: rgba(246, 207, 95, .35); }

/* ===== bottom bar: animated icons ===== */
/* $ BANK: a glowing green money sign that breathes, with sparkles that twinkle */
nav.main a[data-k="bank"] { color: #46f49c; }
nav.main a[data-k="bank"] .ni { stroke-width: 1.7; filter: drop-shadow(0 0 4px rgba(70, 244, 156, .7)); animation: mglow 2.6s ease-in-out infinite; }
nav.main a[data-k="bank"] .ni .dsg { font-size: 15px; font-weight: 900; stroke: none; fill: currentColor; }
nav.main a[data-k="bank"] .ni .ring { fill: rgba(70, 244, 156, .1); }
nav.main a[data-k="bank"] .ni .sp { stroke-width: 1.3; opacity: 0; animation: twinkle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
nav.main a[data-k="bank"] .ni .s2 { animation-delay: 1.4s; }
nav.main a[data-k="bank"].on { color: #7dffbb; background: radial-gradient(60% 90% at 50% 0, rgba(70, 244, 156, .2), transparent 75%) !important; }
nav.main a[data-k="bank"].on::before { background: #46f49c !important; box-shadow: 0 0 12px #46f49c, 0 0 24px rgba(70, 244, 156, .6) !important; }
@keyframes mglow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(70, 244, 156, .55)); } 50% { filter: drop-shadow(0 0 10px rgba(70, 244, 156, 1)); } }
@keyframes twinkle { 0%, 55%, 100% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1); } }

/* SETTINGS: a gold gear, a little dim, turning slowly; ghost copies lag behind it and fade out like a motion trail */
nav.main a .gear { position: relative; display: inline-block; width: 18px; height: 18px; flex: none; }
nav.main a .gear .gr { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; fill-rule: evenodd; stroke: none; transform-origin: 50% 50%; animation: gspin 5s linear infinite; }
nav.main a .gear .g0 { color: #b8923a; opacity: .86; }
nav.main a .gear .g1 { --lag: 14deg; color: #d8ad45; opacity: .3; }
nav.main a .gear .g2 { --lag: 28deg; color: #d8ad45; opacity: .15; }
nav.main a .gear .g3 { --lag: 42deg; color: #d8ad45; opacity: .07; }
nav.main a[data-k="settings"].on .gear .g0 { color: #f6cf5f; opacity: 1; filter: drop-shadow(0 0 4px rgba(246, 207, 95, .7)); }
@keyframes gspin { from { transform: rotate(calc(var(--lag, 0deg) * -1)); } to { transform: rotate(calc(360deg - var(--lag, 0deg))); } }
@media (max-width: 900px) { nav.main a .gear { width: 25px; height: 25px; } }

/* the other icons come alive too */
nav.main a.on .ni { animation: navbob 2.8s ease-in-out infinite; }
nav.main a[data-k="bank"].on .ni { animation: mglow 2.6s ease-in-out infinite; }
@keyframes navbob { 0%, 100% { transform: translateY(-1px) scale(1.08); } 50% { transform: translateY(-3px) scale(1.12); } }
nav.main a[data-k="mulligan"] .ni .back { animation: crewsway 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes crewsway { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
nav.main a:active .gear { transform: scale(.88); }
@media (prefers-reduced-motion: reduce) { nav.main a .gear .gr, nav.main a .ni, nav.main a .ni .sp { animation: none !important; } nav.main a .gear .g1, nav.main a .gear .g2, nav.main a .gear .g3 { display: none; } }
/* five items in the bar */
@media (max-width: 900px) { nav.main { grid-template-columns: repeat(5, 1fr) !important; } nav.main a { font-size: 10px !important; letter-spacing: .05em !important; } }

/* ===== the half-screen ad spot: today it advertises itself ===== */
.ad-half { max-width: 560px; margin: 0 auto; }
.ah { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; aspect-ratio: 6 / 5; max-height: 360px; width: 100%; padding: 22px; border-radius: 26px; overflow: hidden; color: #201400; text-decoration: none;
  background: linear-gradient(135deg, #fff6c4 0%, #f6cf5f 30%, #d9a014 62%, #8a5e00 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 20px 50px rgba(246, 207, 95, .25), 0 0 0 1px rgba(255, 230, 150, .5); transition: transform .18s var(--press); isolation: isolate; }
.ah:active { transform: scale(.975); }
.ah-ring { position: absolute; inset: -60%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 255, 255, .85) 70%, transparent 82%); animation: ahspin 5s linear infinite; opacity: .55; }
@keyframes ahspin { to { transform: rotate(360deg); } }
.ah::before { content: ''; position: absolute; inset: 3px; border-radius: 23px; background: linear-gradient(150deg, #ffe48a, #e0a928 55%, #9b6a08); z-index: -1; }
.ah .chip.ad { position: absolute; top: 14px; right: 14px; background: rgba(0, 0, 0, .35); color: #fff; }
.ah-k { font: 800 11px var(--f-body); letter-spacing: .28em; opacity: .7; }
.ah-h { font: 800 clamp(40px, 13vw, 68px)/.88 var(--f-head); letter-spacing: -.01em; text-shadow: 0 2px 0 rgba(255, 255, 255, .45); }
.ah-p { display: flex; align-items: center; gap: 10px; } .ah-p i { font: 800 28px var(--f-head); font-style: normal; background: #1a1000; color: #f6cf5f; padding: 4px 16px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); animation: ahpulse 2.2s ease-in-out infinite; } .ah-p em { font-style: normal; font-weight: 700; font-size: 13px; }
@keyframes ahpulse { 50% { transform: scale(1.07); box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 0 4px rgba(26, 16, 0, .15); } }
.ah-b { align-self: flex-start; font: 800 14px var(--f-body); background: #1a1000; color: #f6cf5f; padding: 11px 18px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.ah-c { position: absolute; font: 800 26px var(--f-head); color: rgba(26, 16, 0, .22); animation: ahfloat 5s ease-in-out infinite; z-index: -1; }
.ah-c.c1 { right: 14%; top: 22%; } .ah-c.c2 { right: 6%; top: 52%; animation-delay: -1.5s; font-size: 34px; } .ah-c.c3 { right: 24%; bottom: 14%; animation-delay: -3s; } .ah-c.c4 { right: 40%; top: 10%; animation-delay: -2.2s; font-size: 20px; }
@keyframes ahfloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(8deg); } }
.ah .shine { position: absolute; top: 0; bottom: 0; width: 38%; left: -60%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-18deg); animation: avsheen 4.5s ease-in-out infinite; pointer-events: none; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ah-ring, .ah-c, .ah-p i, .ah .shine { animation: none !important; } }
@keyframes avsheen { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* ===== half-width ad tile: same size as the Play UNLUCKY5 tile ===== */
.d-btn.adtile { color: #201400; text-decoration: none; border-color: rgba(255, 230, 150, .6); isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 10px 26px rgba(246, 207, 95, .22); }
.d-btn.adtile::before { background: linear-gradient(135deg, #fff6c4 0%, #f6cf5f 34%, #d9a014 66%, #8a5e00 100%) !important; z-index: -2; }
.d-btn.adtile::after { background: radial-gradient(60% 90% at 85% 15%, rgba(255, 255, 255, .55), transparent 60%) !important; }
.d-btn.adtile b { font: 800 17px/1 var(--f-head); letter-spacing: .01em; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.d-btn.adtile .chip.ad { background: rgba(0, 0, 0, .35); color: #fff; font-size: 8px; padding: 2px 7px; }
.d-btn.adtile .adp { display: flex; align-items: center; gap: 7px; } .d-btn.adtile .adp i { font: 800 14px var(--f-head); font-style: normal; background: #1a1000; color: #f6cf5f; padding: 2px 10px; border-radius: 999px; animation: ahpulse 2.2s ease-in-out infinite; }
.d-btn.adtile .adp small { color: #3b2a00; font-weight: 700; font-size: 10.5px; }
.d-btn.adtile .shine { position: absolute; top: 0; bottom: 0; width: 38%; left: -60%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-18deg); animation: avsheen 4.5s ease-in-out infinite; pointer-events: none; }
@media (max-width: 900px) { .d-btn.night { grid-column: auto !important; } }
@media (prefers-reduced-motion: reduce) { .d-btn.adtile .adp i, .d-btn.adtile .shine { animation: none !important; } }

/* banner ads: only the slide you can see takes taps (the hidden ones are stacked on top of it) */
.banner27 .slide { pointer-events: none; }
.banner27 .slide.on { pointer-events: auto; }

/* smaller spinning dice in the bar */
nav.main a .die3d { --s: 13px !important; margin: 5px 0 4px !important; }
@media (min-width: 901px) { nav.main a .die3d { --s: 12px !important; margin: 0 4px 0 0 !important; } }

/* ===== Games: what plays now is big, what's coming is small ===== */
.gp-feat { position: relative; display: flex; align-items: flex-end; gap: 12px; min-height: 170px; padding: 16px; border-radius: 20px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; border: 1px solid rgba(246, 207, 95, .35); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); transition: transform .16s var(--press); }
.gp-feat:active { transform: scale(.985); }
.gp-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: -2; }
.gp-feat::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .1) 70%); }
.gp-feat .chip { position: absolute; top: 12px; left: 12px; }
.gp-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.gp-txt b { font: 800 32px/1 var(--f-head); letter-spacing: .01em; }
.gp-txt small { font: 600 13px var(--f-body); color: #e8e2d4; }
.gn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.gn-tile { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 14px; min-height: 150px; border-radius: 18px; text-decoration: none; color: var(--ink); overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 32%, #121216), #0b0b0e 72%); border: 1px solid color-mix(in srgb, var(--c) 45%, rgba(255, 255, 255, .08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px rgba(0, 0, 0, .45); transition: transform .16s var(--press), border-color .2s; }
.gn-tile:hover { border-color: var(--c); }
.gn-tile:active { transform: scale(.97); }
.gn-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: color-mix(in srgb, var(--c) 38%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px color-mix(in srgb, var(--c) 35%, transparent); }
.gn-t b { display: block; font: 800 17px/1.1 var(--f-head); }
.gn-t small { display: block; margin-top: 4px; font: 500 12px/1.35 var(--f-body); color: var(--mute); }
.gn-go { justify-self: start; font: 800 12px var(--f-body); color: #221500; background: var(--gold-metal); padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.gs { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 12px 2px 4px; border-top: 1px solid rgba(255, 255, 255, .07); opacity: .65; }
.gs-l { font: 800 10px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.gs-row { display: flex; gap: 6px; flex-wrap: wrap; }
.gs-chip { font: 600 11px var(--f-body); color: var(--mute); padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; }
@media (max-width: 640px) { .gn-grid { grid-template-columns: 1fr 1fr; } .gn-tile { min-height: 140px; padding: 12px; } .gp-feat { min-height: 150px; } }

/* the Games tab's low-poly die */
.lpd { width: 27px; height: 27px; flex: none; display: block; filter: saturate(.75) brightness(.86) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); transition: filter .25s, transform .3s var(--press); }
nav.main a:hover .lpd { filter: saturate(.95) brightness(1) drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); transform: rotate(-8deg) scale(1.06); }
nav.main a.on .lpd { filter: drop-shadow(0 0 7px rgba(246, 207, 95, .75)) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); animation: lpdhop 3.6s ease-in-out infinite; }
nav.main a:active .lpd { transform: scale(.88) rotate(12deg); }
@keyframes lpdhop { 0%, 82%, 100% { transform: none; } 88% { transform: translateY(-4px) rotate(-12deg); } 94% { transform: translateY(0) rotate(6deg); } }
@media (min-width: 901px) { .lpd { width: 20px; height: 20px; } }
@media (prefers-reduced-motion: reduce) { nav.main a.on .lpd { animation: none; } }

/* the count on your picture in the header */
a.bank { position: relative; }
.fr-hb { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; font: 800 10px/1 var(--f-body); font-style: normal; color: #fff; background: linear-gradient(180deg, #ff5a6e, #d0122f); box-shadow: 0 0 0 2px #07050c; pointer-events: none; }

/* ---------- the top bar (2026-10 refresh): a money pill with a spinning coin, your picture in a gold ring ---------- */
header.site { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
header.site::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, #f6cf5f 30%, #fff3b8 50%, #f6cf5f 70%, transparent); background-size: 200% 100%; opacity: .55; animation: hdrsheen 6s linear infinite; pointer-events: none; }
@keyframes hdrsheen { to { background-position: -200% 0; } }
a.bank { gap: 0 !important; padding: 3px 3px 3px 4px !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)) !important; border: 1px solid rgba(246, 207, 95, .45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .4) !important; text-decoration: none; }
a.bank .bal { display: inline-flex !important; align-items: center; gap: 6px; padding: 0 10px 0 4px; font: 800 15px/1 var(--f-head) !important; color: #9ff5c4 !important; text-shadow: 0 0 10px rgba(70, 244, 156, .45); }
a.bank .bal::before { content: '$'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 900 12px/1 var(--f-body); color: #3b2a00; background: radial-gradient(circle at 35% 30%, #fff6c8, #f6cf5f 45%, #b9840f); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 0 10px rgba(246, 207, 95, .5); animation: hdrcoin 4s ease-in-out infinite; text-shadow: none; }
@keyframes hdrcoin { 0%, 80%, 100% { transform: rotateY(0); } 90% { transform: rotateY(180deg); } }
a.bank .bt { order: 3; padding: 0 8px; font: 700 12.5px var(--f-body); color: #e9e4d8; }
a.bank .av { order: 4; width: 32px !important; height: 32px !important; box-shadow: 0 0 0 2px #0b0a10, 0 0 0 3.5px #f6cf5f, 0 0 14px rgba(246, 207, 95, .4); border: 0 !important; }
@media (max-width: 900px) { a.bank { padding: 3px 3px 3px 4px !important; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)) !important; border: 1px solid rgba(246, 207, 95, .45) !important; } a.bank .av { width: 30px !important; height: 30px !important; } }
@media (prefers-reduced-motion: reduce) { header.site::after, a.bank .bal::before { animation: none; } }

/* ---------- the loading screen: a tip from the catalogue while the floor loads (js/site.js, D.tips) ---------- */
html.ucs-on, html.ucs-on body { overflow: hidden; }
.ucs { --tc: #f6cf5f; position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 14px; padding: max(18px, env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)); background: radial-gradient(90% 60% at 50% 0, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%), #07050c; animation: ucsin .35s ease both; }
.ucs.out { animation: ucsout .4s ease forwards; pointer-events: none; }
@keyframes ucsin { from { opacity: 0; } }
@keyframes ucsout { to { opacity: 0; transform: scale(1.03); } }
.ucs-card { align-self: center; width: min(420px, 100%); max-height: 100%; overflow: hidden; display: flex; flex-direction: column; border-radius: 28px; background: #121018; border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent); box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 0 60px color-mix(in srgb, var(--tc) 25%, transparent); animation: ucscard .55s cubic-bezier(.2, 1.3, .4, 1) .1s both; }
@keyframes ucscard { from { opacity: 0; transform: translateY(30px) scale(.94); } }
.ucs-pic { position: relative; flex: none; height: min(36vh, 300px); background: #222 center / cover; }
.ucs-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, #121018); }
.ucs-pic { animation: ucskb 9s ease-out both; }
@keyframes ucskb { from { background-size: 118% auto; } }
.ucs-pic.sea { display: flex; align-items: center; justify-content: center; gap: 22px; font-size: 54px; background: linear-gradient(180deg, #2ec4ef, #0f63a8); }
.ucs-pic.sea i { font-style: normal; animation: ucsbob 2.4s ease-in-out infinite; } .ucs-pic.sea i:nth-child(2) { animation-delay: .5s; font-size: 34px; } .ucs-pic.sea i:nth-child(3) { animation-delay: 1s; }
@keyframes ucsbob { 50% { transform: translateY(-14px); } }
.ucs-k { position: absolute; left: 16px; bottom: 14px; z-index: 1; padding: 5px 12px; border-radius: 999px; font: 800 11px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #120c02; background: var(--tc); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.ucs-body { display: grid; gap: 10px; padding: 6px 20px 18px; overflow-y: auto; }
.ucs-body h2 { margin: 0; font: 900 30px/1.05 var(--f-serif); color: #fff; }
.ucs-body p { margin: 0; font: 500 14.5px/1.5 var(--f-body); color: #d9d4c6; }
.ucs-body ul { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.ucs-body li { padding: 8px 12px; border-radius: 12px; font: 700 13px var(--f-body); color: #f1ede4; background: rgba(255, 255, 255, .05); border-left: 3px solid var(--tc); animation: ucsli .4s ease both; }
.ucs-body li:nth-child(1) { animation-delay: .35s; } .ucs-body li:nth-child(2) { animation-delay: .45s; } .ucs-body li:nth-child(3) { animation-delay: .55s; }
@keyframes ucsli { from { opacity: 0; transform: translateX(-12px); } }
.ucs-btns { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.ucs-btns .btn { flex: 1; padding: 14px; font-size: 16px; text-align: center; }
.ucs-skip { padding: 12px 16px; border: 0; background: none; color: var(--mute); font: 700 14px var(--f-body); cursor: pointer; }
.ucs-all { justify-self: center; font: 600 12px var(--f-body); color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.ucs-load { display: grid; justify-items: center; gap: 8px; width: min(260px, 80%); }
.ucs-logo { font: 400 22px/1 'Bebas Neue', var(--f-head); letter-spacing: .14em; color: #fff; }
.ucs-logo b { font-weight: 400; color: #f6cf5f; }
.ucs-bar { display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.ucs-bar b { display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--gold-metal); transform-origin: left; animation: ucsbar 2.2s cubic-bezier(.3, .6, .4, 1) both; box-shadow: 0 0 10px rgba(246, 207, 95, .7); }
@keyframes ucsbar { from { transform: scaleX(.04); } }
.ucs-in { margin-top: 4px; width: 100%; padding: 13px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: var(--mute); font: 800 15px var(--f-body); letter-spacing: .02em; cursor: default; transition: background .3s, color .3s, transform .13s var(--press); }
.ucs.ready .ucs-in { cursor: pointer; color: #221500; border-color: transparent; background: var(--gold-metal); box-shadow: 0 5px 0 #7a5200, 0 10px 26px rgba(246, 207, 95, .35); animation: ucsgo 1.8s ease-in-out infinite; }
.ucs.ready .ucs-in:active { transform: translateY(3px); box-shadow: 0 2px 0 #7a5200; }
@keyframes ucsgo { 50% { box-shadow: 0 5px 0 #7a5200, 0 10px 34px rgba(246, 207, 95, .65); } }
@media (prefers-reduced-motion: reduce) { .ucs, .ucs *, .ucs-pic { animation: none !important; } }
/* tips.html: the whole catalogue */
.tips { padding: 18px 0 30px; }
.tp-top h1 { margin: 6px 0 4px; font: 900 40px/1 var(--f-serif); }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 18px; }
.tp { --tc: #f6cf5f; overflow: hidden; border-radius: 22px; background: #121018; border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); animation: ucscard .5s ease both; animation-delay: calc(var(--i) * 60ms); }
.tp-pic { position: relative; height: 170px; background: #222 center / cover; }
.tp-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, #121018); }
.tp-pic.sea { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 44px; background: linear-gradient(180deg, #2ec4ef, #0f63a8); }
.tp-pic.sea i { font-style: normal; }
.tp-pic span { position: absolute; left: 14px; bottom: 10px; z-index: 1; padding: 4px 10px; border-radius: 999px; font: 800 10px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #120c02; background: var(--tc); }
.tp-b { display: grid; gap: 8px; padding: 6px 16px 16px; }
.tp-b h2 { margin: 0; font: 900 24px/1.1 var(--f-serif); color: #fff; }
.tp-b p { margin: 0; font: 500 13.5px/1.5 var(--f-body); color: #d9d4c6; }
.tp-b ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.tp-b li { padding: 6px 10px; border-radius: 10px; font: 700 12.5px var(--f-body); background: rgba(255, 255, 255, .05); border-left: 3px solid var(--tc); }
.tp-b .btn { justify-self: start; margin-top: 4px; }

/* ---------- the logo (2026-10): just the wordmark, bigger and hard left, no chip and no reflection,
   and the cat walks INSIDE the white letters (it multiplies, so it only shows where it crosses them) ---------- */
header.site .logo > svg { display: none !important; }
header.site .logo .rfwrap { display: none !important; }
header.site .wrap { padding-left: 10px !important; }
header.site .logo { margin-left: 0 !important; gap: 0 !important; }
header.site .logo .wm { font-size: 28px !important; line-height: .92 !important; padding: 0 !important; }
header.site .logo .wm small { font-size: 9.5px !important; letter-spacing: .68em !important; margin-top: 2px !important; padding-left: 2px; }
header.site .logo .lc { filter: none !important; mix-blend-mode: multiply; z-index: 3; }
header.site { isolation: isolate; }
@media (max-width: 900px) {
  header.site .wrap { height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  header.site .logo .wm { font-size: 26px !important; }
}
nav.main a .gear2 { display: inline-block; flex: none; width: 20px; height: 20px; filter: grayscale(.55) brightness(.8) drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); transition: filter .25s, transform .3s; }
nav.main a .gear2 .g-rot { transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.2, .9, .3, 1.2); }
nav.main a:hover .gear2 .g-rot { transform: rotate(45deg); }
nav.main a.on .gear2 { filter: drop-shadow(0 0 6px rgba(246, 207, 95, .7)) drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
nav.main a.on .gear2 .g-rot { animation: gear2spin 8s linear infinite; }
@keyframes gear2spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { nav.main a .gear2 { width: 26px; height: 26px; margin: 2px 0 1px; } }
@media (prefers-reduced-motion: reduce) { nav.main a.on .gear2 .g-rot { animation: none; } }

/* ---------- the logo, take 3 (2026-10-27): the letters are a window. The walking cat (img/cat-walk.webp, animated)
   is painted INTO the white glass lettering, so you only ever see him through the letters as he strolls past.
   The sprite cat that walked on top (.lc) is retired in the header. The bar is slimmer too. ---------- */
header.site .logo .lc { display: none !important; }
header.site .logo .wm b {
  filter: none !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; /* clean letters: no white outline, no glow */
  background:
    url(../img/cat-walk.webp) no-repeat -60px 62% / auto 118%,
    linear-gradient(180deg, #ffffff 0%, #eef4ff 28%, #c9d4e6 49%, #f7faff 52%, #dbe4f2 80%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: catwin 9s linear infinite; /* !important would freeze the pan: important declarations beat animations */
}
@keyframes catwin {
  0% { background-position: -60px 62%, 0 0; }
  100% { background-position: calc(100% + 60px) 62%, 0 0; }
}
header.site .logo .wm small { text-shadow: none !important; }
header.site .wrap { height: 38px !important; }
header.site .logo .wm { font-size: 27px !important; line-height: .88 !important; }
header.site .logo .wm small { font-size: 8px !important; margin-top: 1px !important; }
@media (max-width: 900px) {
  header.site .wrap { height: 38px !important; }
  header.site .logo .wm { font-size: 25px !important; }
}
/* the profile bubble matches the green dino: emerald glass instead of gold */
a.bank { background: linear-gradient(180deg, rgba(52, 211, 153, .22), rgba(6, 78, 59, .35)) !important; border-color: rgba(74, 222, 128, .6) !important; box-shadow: inset 0 1px 0 rgba(187, 247, 208, .25), 0 0 14px rgba(34, 197, 94, .25), 0 6px 18px rgba(0, 0, 0, .4) !important; padding: 2px 2px 2px 3px !important; }
a.bank .av { background: radial-gradient(circle at 35% 30%, #bbf7d0, #22c55e 55%, #166534); width: 28px !important; height: 28px !important; box-shadow: 0 0 0 2px #04130c, 0 0 0 3.5px #4ade80, 0 0 14px rgba(74, 222, 128, .5) !important; }
a.bank .bt { color: #d1fae5 !important; }
@media (max-width: 900px) { a.bank { background: linear-gradient(180deg, rgba(52, 211, 153, .22), rgba(6, 78, 59, .35)) !important; border-color: rgba(74, 222, 128, .6) !important; } a.bank .av { width: 27px !important; height: 27px !important; } }
@media (prefers-reduced-motion: reduce) { header.site .logo .wm b { animation: none; background-position: 40% 62%, 0 0; } }
footer.site .logo .wm b { filter: none !important; }

/* The settings gear and the Games die sit still; they turn only while you point at them. */
nav.main a .gear .gr, nav.main a.on .gear2 .g-rot, .die3d .cube { animation-play-state: paused; }
nav.main a:hover .gear .gr, nav.main a:hover .gear2 .g-rot, a:hover .die3d .cube, button:hover .die3d .cube { animation-play-state: running; }

/* header controls, slimmer: a small theme switch and a neat balance pill */
.theme-tg { width: 50px !important; height: 26px !important; margin-right: 6px !important; border-width: 1px !important; }
.theme-tg span { font-size: 12px !important; }
.theme-tg .k { top: 2px !important; left: 2px !important; width: 22px !important; height: 20px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .4) !important; }
html[data-theme="sea"] .theme-tg .k { transform: translateX(24px) !important; }
a.bank { padding: 2px 2px 2px 3px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 10px rgba(0, 0, 0, .35) !important; }
a.bank .bal { gap: 5px !important; padding: 0 8px 0 2px !important; font-size: 13.5px !important; }
a.bank .bal::before { width: 18px !important; height: 18px !important; font-size: 10.5px !important; }
a.bank .bt { padding: 0 6px !important; font-size: 12px !important; }
a.bank .av { width: 24px !important; height: 24px !important; }

/* the theme button: one round button showing where it takes you (a jellyfish to go under the sea, a slot machine to come back). A tap spins it */
.theme-btn { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%), linear-gradient(160deg, #3fd0ff, #6b4bff); box-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 14px rgba(80,180,255,.45); animation: thBob 2.6s ease-in-out infinite; }
.theme-btn span { grid-area: 1 / 1; transition: transform .3s, opacity .3s; }
.theme-btn .b { opacity: 0; transform: scale(.4); }
html[data-theme="sea"] .theme-btn { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), rgba(255,255,255,0) 55%), linear-gradient(160deg, #f8d877, #e0457b); box-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 14px rgba(246,207,95,.5); }
html[data-theme="sea"] .theme-btn .a { opacity: 0; transform: scale(.4); }
html[data-theme="sea"] .theme-btn .b { opacity: 1; transform: none; }
.theme-btn.go { animation: thGo .5s cubic-bezier(.3, 1.5, .5, 1); }
.theme-btn:active { transform: scale(.88); }
@keyframes thBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2px) rotate(4deg); } }
@keyframes thGo { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.3) rotate(200deg); } 100% { transform: scale(1) rotate(360deg); } }