/* $WHALE game pages: Bull or Bear (bb-), Daily Whale Drop (ch-, dd-), Invite Race (rc-).
   Animations use transform/opacity only; loops sit in overlays (closed = not rendered) or cards (.offscreen pauses them). */
:root { --bull: #22e07a; --bear: #ff4d5e; --gold: #ffc542; }

/* shared: game card peeks */
.bb-peek, .dd-peek, .rc-peek { position: absolute; pointer-events: none; }
.bb-card .cl-top, .dd-card .cl-top, .rc-card .cl-top { position: relative; }
.bb-card .cl-top, .dd-card .cl-top, .rc-card .cl-top { align-items: flex-start; }
.bb-card h3, .dd-card h3, .rc-card h3 { padding-right: 70px; min-height: 44px; display: flex; align-items: center; }
.g-act { width: 100%; justify-content: center; margin-top: 14px; padding: 13px; font-size: 16px; }

/* ================= Bull or Bear ================= */
.bb-peek { right: -6px; top: -8px; width: 64px; transform: rotate(10deg); animation: peekA 3.4s ease-in-out infinite; }
.bb-peek.b2 { right: 46px; top: -12px; width: 50px; opacity: .85; transform: rotate(-12deg); animation: peekB 3.4s ease-in-out infinite; }
@keyframes peekA { 50% { transform: rotate(4deg) translateY(-6px); } }
@keyframes peekB { 50% { transform: rotate(-6deg) translateY(4px); } }
.bb-tick { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0 !important; font-size: 12.5px !important; font-variant-numeric: tabular-nums; }
.bb-tick b { color: #fff; font-weight: 600; }
.bb-calls { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.bb-calls li { display: grid; grid-template-columns: 24px 40px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); font-size: 14px; animation: rise .4s var(--ease) both; }
.bb-calls img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.bb-calls span { color: var(--dim); }
.bb-calls em { font-style: normal; font-weight: 600; color: var(--dim); }
.bb-calls li.w em { color: var(--bull); } .bb-calls li.l em { color: var(--bear); }

.bb-fx { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 16px 20px; overflow-y: auto; animation: fadeIn .25s both;
  background: linear-gradient(180deg, rgba(3, 3, 10, .35) 0, rgba(3, 3, 10, .75) min(28vw, 250px), #03030a min(60vw, 520px)), url('../media/bvb-800.webp') center top / min(100%, 900px) auto no-repeat, #03030a; }
.bb-fx > * { width: 100%; max-width: 440px; position: relative; }
.bb-glow { position: absolute !important; left: 50%; top: 30%; width: 520px !important; max-width: none !important; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(171, 159, 242, .22), transparent 65%); pointer-events: none; animation: gl 3s ease-in-out infinite; }
@keyframes gl { 50% { transform: scale(1.15); opacity: .7; } }
.bb-fx.shake > .bb-chart { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.bb-x { position: absolute !important; right: 14px; top: max(12px, env(safe-area-inset-top)); width: 38px !important; height: 38px; border-radius: 50%; background: var(--bubble); color: var(--dim); font-size: 16px; z-index: 3; }
.bb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 46px; }
.bb-head p { margin: 0; font-size: 14px; color: var(--dim); }
.bb-head b { color: #fff; font-variant-numeric: tabular-nums; }
.bb-won b { color: var(--bull); }
.bb-dots { display: flex; gap: 6px; }
.bb-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); transition: transform .4s var(--spring); }
.bb-dots i.live { border-color: var(--iris); animation: blink 1.2s ease-in-out infinite; }
.bb-dots i.w { background: var(--bull); border-color: var(--bull); transform: scale(1.15); } .bb-dots i.l { background: var(--bear); border-color: var(--bear); }
@keyframes blink { 50% { opacity: .3; } }
.bb-coins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bb-coins button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); font-weight: 700; font-size: 15px; transition: transform .15s, opacity .2s; }
.bb-coins button img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.bb-coins button.on { border-color: var(--iris); background: rgba(171, 159, 242, .12); }
.bb-coins button:disabled:not(.on) { opacity: .35; } .bb-coins button:not(:disabled):active { transform: scale(.95); }
.bb-chart { border-radius: 20px; border: 1px solid var(--line); background: rgba(10, 10, 22, .85); padding: 14px 14px 0; overflow: hidden; }
.bb-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bb-price span { font-size: 13px; font-weight: 700; color: var(--iris); }
.bb-price b { font-family: var(--display); font-size: clamp(30px, 9vw, 40px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bb-price em { flex-basis: 100%; font-style: normal; font-size: 13px; font-weight: 600; color: var(--dim); min-height: 18px; }
.bb-price em.good { color: var(--bull); } .bb-price em.bad { color: var(--bear); }
.bb-chart svg { display: block; width: calc(100% + 28px); margin: 6px -14px 0; height: 130px; }
.bb-line { fill: none; stroke: var(--iris); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bb-area { fill: url(#bbg); }
.bb-entry { stroke: rgba(255, 255, 255, .55); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.bb-chart.up .bb-line { stroke: var(--bull); } .bb-chart.down .bb-line { stroke: var(--bear); }
.bb-live { position: absolute; right: 14px; top: 12px; text-align: right; }
.bb-live b { display: block; font-family: var(--display); font-size: 38px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.bb-live span { font-size: 12px; color: var(--dim); }
.bb-bar { height: 4px; margin: 0 -14px; background: var(--line); overflow: hidden; }
.bb-bar i { display: block; height: 100%; background: var(--iris); transform-origin: left; transform: scaleX(0); }
.bb-res { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: rgba(3, 3, 10, .82); animation: resIn .45s var(--spring) both; }
@keyframes resIn { from { opacity: 0; transform: scale(.85); } }
.bb-res b { font-family: var(--display); font-size: clamp(28px, 9vw, 40px); font-weight: 900; letter-spacing: -.02em; }
.bb-res span { font-size: 18px; font-weight: 700; } .bb-res small { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.bb-res.w b, .bb-res.w span { color: var(--bull); } .bb-res.l b { color: var(--bear); } .bb-res.p b { color: var(--iris); }
.bb-q { margin: 0; text-align: center; font-size: 15px; font-weight: 600; min-height: 20px; }
.bb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bb-side { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 8px 12px; border-radius: 20px; border: 2px solid; overflow: hidden; transition: transform .15s, opacity .2s; }
.bb-side img { width: 96px; height: 96px; animation: sideBob 2.6s ease-in-out infinite; }
.bb-side.bear img { animation-delay: -1.3s; }
@keyframes sideBob { 50% { transform: translateY(-6px) scale(1.04); } }
.bb-side span { font-family: var(--display); font-size: 26px; font-weight: 900; letter-spacing: .02em; line-height: 1.1; }
.bb-side small { font-size: 13px; font-weight: 600; opacity: .85; }
.bb-side.bull { border-color: var(--bull); background: linear-gradient(180deg, rgba(34, 224, 122, .2), rgba(34, 224, 122, .04)); color: var(--bull); }
.bb-side.bear { border-color: var(--bear); background: linear-gradient(180deg, rgba(255, 77, 94, .2), rgba(255, 77, 94, .04)); color: var(--bear); }
.bb-side:not(:disabled):active { transform: scale(.96); } .bb-side:disabled { opacity: .5; }
.bb-side.hit { animation: hit .5s var(--spring); }
@keyframes hit { 30% { transform: scale(.92); } }
.bb-done { text-align: center; }
.bb-done p { margin: 0 0 10px; font-size: 16px; } .bb-done b { color: var(--bull); }
@media (max-height: 700px) { .bb-chart svg { height: 96px; } .bb-side img { width: 72px; height: 72px; } .bb-side span { font-size: 22px; } }

/* ================= Daily Whale Drop ================= */
.dd-peek { right: -4px; top: -6px; width: 64px; animation: peekA 3s ease-in-out infinite; }
.dd-card.ready .dd-peek { animation: chestWiggle 2.4s ease-in-out infinite; }
@keyframes chestWiggle { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-8deg) scale(1.06); } 82% { transform: rotate(7deg) scale(1.06); } 88% { transform: rotate(-4deg); } }
.dd-cal { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.dd-cal li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 7px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); text-align: center; min-width: 0; }
.dd-cal span { font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.dd-cal img { width: 34px; height: 34px; opacity: .45; filter: grayscale(.6); }
.dd-cal b { font-size: 10.5px; font-weight: 600; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dd-cal li.got { border-color: rgba(171, 159, 242, .45); background: rgba(171, 159, 242, .1); }
.dd-cal li.got img { opacity: 1; filter: none; } .dd-cal li.got b { color: #fff; }
.dd-cal li.ready { border-color: var(--iris); background: rgba(171, 159, 242, .16); animation: rdy 1.6s ease-in-out infinite; }
.dd-cal li.ready img { opacity: 1; filter: none; animation: chestWiggle 2.4s ease-in-out infinite; } .dd-cal li.ready b { color: var(--iris); }
@keyframes rdy { 50% { transform: translateY(-3px); } }
.dd-cal li.gold { border-color: rgba(255, 197, 66, .4); } .dd-cal li.gold b { color: var(--gold); }
.dd-next { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--dim); }
.dd-next b { color: #fff; font-variant-numeric: tabular-nums; font-size: 16px; }
.dd-tot { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--dim); } .dd-tot b { color: var(--iris); }

.ch-fx { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 16px; background: radial-gradient(70% 50% at 50% 45%, #0d1430, #03030a 70%); overflow: hidden; animation: fadeIn .25s both; }
@keyframes fadeIn { from { opacity: 0; } }
.ch-glow { position: absolute; left: 50%; top: 46%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient(circle, rgba(80, 160, 255, .3), transparent 65%); animation: gl 3s ease-in-out infinite; pointer-events: none; }
.ch-fx.gold .ch-glow, .ch-fx.burst .ch-glow { background: radial-gradient(circle, rgba(255, 197, 66, .45), transparent 65%); }
.ch-rays { position: absolute; left: 50%; top: 46%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 210, 100, .12) 0 7deg, transparent 7deg 20deg); opacity: 0; pointer-events: none; }
.ch-fx.burst .ch-rays { opacity: 1; animation: rays 7s linear infinite, fadeIn .5s both; }
@keyframes rays { to { transform: rotate(360deg); } }
.ch-day { position: relative; margin: 0; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.ch-fx.gold .ch-day { color: var(--gold); }
.ch-box { position: relative; width: min(300px, 72vw); aspect-ratio: 1; padding: 0; animation: bobc 2.4s ease-in-out infinite; }
@keyframes bobc { 50% { transform: translateY(-10px); } }
.ch-box img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 24px; -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%); mask-image: radial-gradient(circle, #000 55%, transparent 72%); }
.ch-open { opacity: 0; transform: scale(.9); }
.ch-box.shake { animation: shk .1s linear 8; }
@keyframes shk { 25% { transform: translateX(-7px) rotate(-4deg); } 75% { transform: translateX(7px) rotate(4deg); } }
.ch-box.opened { animation: none; }
.ch-box.opened .ch-closed { opacity: 0; transition: opacity .25s; }
.ch-box.opened .ch-open { opacity: 1; transform: scale(1.06); transition: opacity .25s, transform .6s var(--spring); }
.ch-coins { position: absolute; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; }
.ch-coins i { position: absolute; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #ffc542 55%, #b07a00); opacity: 0; animation: coinOut 1.6s var(--d) cubic-bezier(.15, .7, .3, 1) forwards; }
.ch-coins i:nth-child(3n) { background: radial-gradient(circle at 35% 35%, #d8f0ff, #3aa0ff 55%, #0b3e8a); }
@keyframes coinOut { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--x) * 42vw), calc(var(--y) * 38vh)) rotate(var(--r)) scale(1); } }
.ch-val { position: relative; margin: 0; text-align: center; animation: resIn .5s var(--spring) both; }
.ch-val b { display: block; font-family: var(--display); font-size: 48px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--gold); }
.ch-val span { font-size: 14px; color: var(--dim); }
.ch-hint { position: relative; margin: 0; min-height: 20px; font-size: 14px; color: var(--dim); animation: blink 1.6s ease-in-out infinite; }
.ch-done { position: relative; width: 100%; max-width: 340px; }
@keyframes resIn { from { opacity: 0; transform: scale(.85); } }

/* ================= Invite Race ================= */
.rc-peek { right: -6px; top: -10px; width: 72px; animation: peekA 3.2s ease-in-out infinite; }
.rc-card .cl-top p b { color: #fff; }
.rc-ends { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--dim); }
.rc-ends { line-height: 1.6; } .rc-ends b { color: #fff; font-size: 16px; font-variant-numeric: tabular-nums; } .rc-ends b.gold { color: var(--gold); }
.rc-pod { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; }
.rc-pod > div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 0; text-align: center; min-width: 0; }
.rc-pod b { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-pod em { font-style: normal; font-size: 11.5px; color: var(--dim); }
.rc-pod i { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin-top: 4px; border-radius: 12px 12px 0 0; font-style: normal; background: linear-gradient(180deg, rgba(171, 159, 242, .28), rgba(171, 159, 242, .05)); }
.rc-pod i span { font-family: var(--display); font-weight: 900; font-size: 20px; line-height: 1; }
.rc-pod i small { margin-top: 3px; font-size: 11.5px; font-weight: 700; color: #fff; }
.rc-pod .p1 i { height: 74px; background: linear-gradient(180deg, rgba(255, 197, 66, .45), rgba(255, 197, 66, .06)); }
.rc-pod .p1 i span { color: var(--gold); font-size: 26px; }
.rc-pod .p2 i { height: 58px; } .rc-pod .p3 i { height: 48px; }
.rc-pod .p1 .rc-av { width: 54px; height: 54px; border: 2px solid var(--gold); animation: crown 2.6s ease-in-out infinite; }
@keyframes crown { 50% { transform: translateY(-4px); } }
.rc-av { width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--avatar); color: var(--avatar-text); font-weight: 700; }
.rc-av img { width: 100%; height: 100%; object-fit: cover; }
.rc-av.sm { width: 30px; height: 30px; font-size: 13px; }
.rc-go { margin-top: 14px; }
.rc-board .rh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-board h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.rc-board .pulse { background: #4ade80; }
.rc-board .rt b { color: #fff; font-variant-numeric: tabular-nums; }
.rc-board ol { list-style: none; margin: 12px 0 0; padding: 0; }
.rc-board li { display: grid; grid-template-columns: 24px 30px minmax(0, 1fr) auto 52px; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.rc-board.last li { grid-template-columns: 24px minmax(0, 1fr) auto 52px; }
.rc-board li:first-child { border-top: 0; }
.rc-board li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rc-board .faint { color: var(--faint); font-weight: 400; }
.rc-board .rk { font-family: var(--display); font-weight: 800; color: var(--dim); text-align: center; }
.rc-board li.top .rk { color: var(--gold); }
.rc-board em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-board small { text-align: right; color: var(--iris); font-weight: 600; }
.rc-board li.me { background: rgba(171, 159, 242, .08); border-radius: 10px; }
/* the art has dark square backgrounds: fade the corners into the card */
.bb-peek, .dd-peek, .rc-peek, .bb-side img, .dd-cal img { -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%); mask-image: radial-gradient(circle, #000 58%, transparent 71%); }
/* center the game vertically, but scroll from the top on short screens */
.bb-head { margin-top: auto; } .bb-fx::after { content: ''; margin-bottom: auto; }
/* the "ready" glow fades a border layer's opacity (compositor only) instead of animating border-color */
.crash-card.ready { animation: none; border-color: rgba(171, 159, 242, .25); }
.crash-card.ready::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(171, 159, 242, .75); pointer-events: none; will-change: opacity; animation: glowO 2.4s ease-in-out infinite; }
@keyframes glowO { 50% { opacity: .15; } }

/* ================= instant-win games: shared ================= */
.cw-fx, .sc-fx, .wh-fx { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 16px 22px; overflow-y: auto; background: radial-gradient(80% 60% at 50% 35%, #0f1d4a, #03050f 75%); animation: fadeIn .25s both; }
.cw-fx > *, .sc-fx > *, .wh-fx > * { position: relative; }
.cw-fx > :first-child + *, .sc-fx > :first-child + *, .wh-fx > :first-child + * { margin-top: 0; }
.cw-conf { position: fixed !important; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 11; }
.cw-x { position: absolute !important; right: 14px; top: max(12px, env(safe-area-inset-top)); width: 38px; height: 38px; border-radius: 50%; background: var(--bubble); color: var(--dim); font-size: 16px; z-index: 12; }
.cw-usd { margin: 0; font-family: var(--display); font-size: clamp(48px, 14vw, 64px); font-weight: 900; letter-spacing: -.02em; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1; }
.cw-tok { margin: 4px 0 12px; font-size: 14px; color: var(--dim); }
.cw-card .cw-peek, .sc-peek { position: absolute; right: -4px; top: -6px; width: 72px; pointer-events: none; animation: peekA 3s ease-in-out infinite; }
.cw-card h3, .sc-cardp h3, .wh-card h3 { padding-right: 70px; min-height: 44px; display: flex; align-items: center; }
.cw-card .cl-top, .sc-cardp .cl-top, .wh-card .cl-top { align-items: flex-start; }
.cw-card .t-ic, .sc-cardp .t-ic, .wh-card .t-ic { font-size: 20px; }

/* ================= Whale Claw ================= */
.cw-head { width: 100%; max-width: 420px; display: flex; align-items: center; justify-content: space-between; padding-right: 50px; margin-top: auto; }
.cw-title { font-family: var(--display); font-size: 24px; font-weight: 900; letter-spacing: .02em; background: linear-gradient(100deg, #8fe9ff, #ab9ff2 50%, #ffc542); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cw-timer { min-width: 46px; text-align: center; padding: 6px 12px; border-radius: 99px; background: rgba(255, 197, 66, .14); color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.cw-box { z-index: 1; isolation: isolate; width: 100%; max-width: 420px; aspect-ratio: 3 / 3.6; border-radius: 22px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: url('../media/tank-720.webp') center / cover, #050a1c; box-shadow: 0 0 0 3px #1d2c5c, 0 0 0 6px #0b1230, 0 0 50px rgba(58, 160, 255, .35); }
.cw-rail { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(180deg, #9aa6c4, #3b4566); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); z-index: 6; }
.cw-car { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 7; will-change: transform; }
.cw-car::before { content: ''; position: absolute; left: -22px; top: 2px; width: 44px; height: 16px; border-radius: 6px; background: linear-gradient(180deg, #ffd76a, #b07a00); }
.cw-cable { position: absolute; left: -1.5px; top: 16px; width: 3px; height: 40px; background: linear-gradient(90deg, #6c7591, #e5e9f5, #6c7591); transform-origin: 50% 0; }
.cw-claw { position: absolute; left: -48px; top: 50px; width: 96px; }
.cw-claw > img { width: 96px; height: auto; transform-origin: 50% 20%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.cw-held { position: absolute; left: 50%; top: 58px; width: 82px; margin-left: -41px; }
.cw-held img { width: 100%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.cw-pile { position: absolute; left: 22%; right: 3%; bottom: 3%; height: 52%; z-index: 3; }
.cw-pile .pl { position: absolute; width: 27%; max-width: 104px; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); pointer-events: none; }
.cw-chute { position: absolute; left: 2%; bottom: 0; width: 18%; height: 30%; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, rgba(255, 197, 66, .25), rgba(4, 6, 15, .95)); border: 2px solid rgba(255, 197, 66, .55); border-bottom: 0; z-index: 4; display: grid; place-items: start center; padding-top: 6px; }
.cw-chute span { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--gold); }
.cw-glass { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06) 85%, rgba(255, 255, 255, 0) 100%); }
.cw-hint { margin: 0; font-size: 14px; color: var(--dim); min-height: 20px; }
.cw-ctl { width: 100%; max-width: 420px; display: grid; grid-template-columns: 76px 1fr 76px; gap: 10px; margin-bottom: auto; }
.cw-arrow { height: 64px; border-radius: 20px; background: var(--bubble); font-size: 26px; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .1s; }
.cw-arrow:active { transform: scale(.94); background: var(--bubble-hover); }
.cw-drop { height: 64px; border-radius: 20px; font-family: var(--display); font-size: 26px; font-weight: 900; letter-spacing: .06em; color: #2a1700; background: linear-gradient(180deg, #ffe08a, #ffc542 55%, #d99a0b); box-shadow: 0 8px 0 #8a5d00, 0 14px 30px rgba(255, 197, 66, .35); transition: transform .1s, box-shadow .1s; }
.cw-drop:active { transform: translateY(6px); box-shadow: 0 2px 0 #8a5d00; }
.cw-win { position: fixed !important; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 16px; text-align: center; background: rgba(3, 5, 15, .9); animation: fadeIn .3s both; }
.cw-win > * { position: relative; }
.cw-rays { position: absolute !important; left: 50%; top: 38%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 210, 100, .14) 0 7deg, transparent 7deg 20deg); animation: rays 8s linear infinite; pointer-events: none; }
.cw-prize { width: min(240px, 60vw); height: auto; filter: drop-shadow(0 20px 40px rgba(58, 160, 255, .45)); animation: prizeIn .7s var(--spring) both; }
@keyframes prizeIn { from { opacity: 0; transform: scale(.3) rotate(-20deg); } }
.cw-tier { margin: 0; font-family: var(--display); font-size: 30px; font-weight: 900; letter-spacing: .04em; color: #fff; animation: resIn .5s .2s var(--spring) both; }
.cw-win.t-mega .cw-tier { color: #7fffd4; } .cw-win.t-jackpot .cw-tier { color: var(--gold); text-shadow: 0 0 30px rgba(255, 197, 66, .6); }
.cw-win .btn-w { width: 100%; max-width: 340px; }
@media (max-height: 700px) { .cw-box { aspect-ratio: 3 / 3.1; } .cw-arrow, .cw-drop { height: 54px; } }

/* ================= Whale Scratch ================= */
.sc-card { width: 100%; max-width: 380px; margin-top: auto; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #ffd76a, #e2a514); padding: 8px; box-shadow: 0 20px 60px rgba(255, 197, 66, .3); }
.sc-top { position: relative; border-radius: 18px 18px 0 0; overflow: hidden; }
.sc-top img { width: 100%; height: 120px; object-fit: cover; }
.sc-top div { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px; text-align: center; background: linear-gradient(180deg, transparent, rgba(4, 6, 15, .9)); }
.sc-top b { display: block; font-family: var(--display); font-size: 26px; font-weight: 900; letter-spacing: .03em; color: var(--gold); text-shadow: 0 2px 0 #6b4a00; }
.sc-top span { font-size: 13px; font-weight: 700; color: #fff; }
.sc-play { position: relative; background: #0b1230; padding: 10px; }
.sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-cell { aspect-ratio: 1; border-radius: 14px; background: linear-gradient(180deg, #16224a, #0b1230); border: 1px solid #23356b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sc-cell img { width: 52%; height: auto; border-radius: 50%; }
.sc-cell b { font-family: var(--display); font-size: 22px; font-weight: 900; }
.sc-grid.won .sc-cell { opacity: .35; transition: opacity .4s; }
.sc-grid.won .sc-cell.hit { opacity: 1; border-color: var(--gold); background: linear-gradient(180deg, rgba(255, 197, 66, .35), #1a1a10); animation: hitPop .6s var(--d) var(--spring) both; }
.sc-grid.won .sc-cell.hit b { color: var(--gold); }
@keyframes hitPop { 40% { transform: scale(1.12); } }
.sc-foil { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 14px; touch-action: none; cursor: grab; transition: opacity .45s; }
.sc-foil.gone { opacity: 0 !important; pointer-events: none; }
.sc-hint { margin: 0; padding: 10px 0 2px; text-align: center; font-size: 15px; font-weight: 800; color: #2a1700; background: transparent; }
.sc-all { display: block; margin: 0 auto 4px; padding: 6px 10px; font-size: 13px; color: #4a3300; text-decoration: underline; text-underline-offset: 3px; }
.sc-win { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: auto; animation: resIn .5s var(--spring) both; }
.sc-k { margin: 0 0 4px; font-family: var(--display); font-size: 18px; font-weight: 900; letter-spacing: .06em; color: #fff; }
.sc-win .btn-w { width: 100%; }
.sc-cardp .sc-peek { width: 70px; transform: rotate(10deg); }

/* ================= Spin the Whale ================= */
.wh-title { margin: auto 0 0; font-family: var(--display); font-size: 26px; font-weight: 900; letter-spacing: .02em; }
.wh-title b { color: var(--gold); }
.wh-stage { position: relative; width: min(88vw, 400px); aspect-ratio: 1; }
.wh-glow { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(58, 160, 255, .35), transparent 65%); animation: gl 3s ease-in-out infinite; }
.wh-wheel { position: absolute; inset: 0; will-change: transform; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); }
.wh-wheel svg { width: 100%; height: 100%; display: block; }
.wh-wheel .bulb { fill: #fff3b8; } .wh-wheel .bulb.b1 { animation: bulb 1s steps(1) infinite; } .wh-wheel .bulb.b0 { animation: bulb 1s steps(1) .5s infinite; }
@keyframes bulb { 50% { opacity: .25; } }
.wh-wheel path.won { animation: segWin .5s ease-in-out 4 alternate; }
@keyframes segWin { to { opacity: .55; } }
.wh-ptr { position: absolute; left: 50%; top: -4%; width: 13%; margin-left: -6.5%; z-index: 3; transform-origin: 50% 30%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.wh-ptr.flick { animation: flick .14s ease-out; }
@keyframes flick { 40% { transform: rotate(-16deg); } }
.wh-hub { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; margin: -13% 0 0 -13%; border-radius: 50%; z-index: 2; background: radial-gradient(circle at 35% 30%, #fff3b8, #ffc542 50%, #b07a00); box-shadow: 0 0 0 5px #04060f, 0 0 30px rgba(255, 197, 66, .6); display: grid; place-items: center; overflow: hidden; }
.wh-hub img { position: absolute; inset: 8%; width: 84%; height: 84%; border-radius: 50%; object-fit: cover; opacity: .9; }
.wh-hub span { position: relative; font-family: var(--display); font-weight: 900; font-size: clamp(16px, 4.6vw, 22px); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.wh-hint { margin: 0; font-size: 15px; font-weight: 700; color: var(--dim); min-height: 20px; }
.wh-btn { width: 100%; max-width: 380px; height: 64px; margin-bottom: auto; border-radius: 20px; font-family: var(--display); font-size: 26px; font-weight: 900; letter-spacing: .08em; color: #2a1700; background: linear-gradient(180deg, #ffe08a, #ffc542 55%, #d99a0b); box-shadow: 0 8px 0 #8a5d00, 0 14px 30px rgba(255, 197, 66, .35); transition: transform .1s, box-shadow .1s; }
.wh-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #8a5d00; }
.wh-card .wh-peek { position: absolute; right: -16px; top: -16px; width: 92px; opacity: .9; animation: wspin 14s linear infinite; pointer-events: none; }
.wh-card .wh-peek svg { width: 100%; display: block; }
@keyframes wspin { to { transform: rotate(360deg); } }
.sc-fx::after, .wh-fx::after, .cw-fx::after { content: ''; margin-bottom: auto; }
.sc-win { margin-bottom: 0; }
.sc-top img { height: 140px; }
.sc-top span { font-size: 14px; letter-spacing: .04em; }

/* Spin the Whale: big wins + Latest spins board */
.sc-win.huge .cw-usd { font-size: clamp(56px, 16vw, 76px); text-shadow: 0 0 40px rgba(255, 197, 66, .6); }
.sc-win.huge .sc-k { color: var(--gold); font-size: 22px; animation: hitPop .8s var(--spring) both; }
.spins-card .rh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spins-card h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.spins-card .pulse { background: var(--gold); }
.spins-card .rt b { color: var(--gold); }
.spins { list-style: none; margin: 12px 0 0; padding: 0; max-height: 520px; overflow-y: auto; overscroll-behavior: contain; }
.spins li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.spins li:first-child { border-top: 0; }
.spins li.empty { display: block; color: var(--dim); font-size: 14px; text-align: center; padding: 14px 0; }
.spins li.new { animation: recvIn .6s var(--spring) both; }
.spins .av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--avatar); color: var(--avatar-text); font-weight: 600; font-size: 15px; }
.spins .av img { width: 100%; height: 100%; object-fit: cover; }
.spins .rw { min-width: 0; } .spins .rw p { margin: 0; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spins .rw span { font-size: 12.5px; color: var(--dim); }
.spins .amt { color: #fff; }
.spins .sv { min-width: 52px; text-align: center; padding: 5px 9px; border-radius: 99px; background: var(--bubble); font-size: 13px; font-weight: 800; }
.spins li.big .sv { background: linear-gradient(180deg, #ffe08a, #ffc542); color: #2a1700; box-shadow: 0 0 16px rgba(255, 197, 66, .4); }
.spins li.big .amt { color: var(--gold); }
@keyframes recvIn { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
/* Spin the Whale: 6-hour free spins + daily streak */
.wh-card .wk { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wh-card .wk li { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); font-size: 12px; font-weight: 700; color: var(--faint); }
.wh-card .wk li.on { border-color: rgba(58, 160, 255, .6); background: rgba(58, 160, 255, .16); color: #fff; }
.wh-card .wk li.gold { border-color: rgba(255, 197, 66, .5); color: var(--gold); }
.wh-card .wk li.gold.on { background: linear-gradient(180deg, #ffe08a, #ffc542); color: #2a1700; }
.wh-card .wcd { color: #fff; font-variant-numeric: tabular-nums; }
.g-act.gold { background: linear-gradient(180deg, #ffe08a, #ffc542); color: #2a1700; }
.wh-fx.golden .wh-glow { background: radial-gradient(circle, rgba(255, 197, 66, .45), transparent 65%); }
.wh-fx.golden .wh-title b { text-shadow: 0 0 24px rgba(255, 197, 66, .7); }

/* ================= Whale Rank ================= */
.rk-cardp .rk-row { display: flex; justify-content: center; gap: 4px; margin: -4px 0 10px; }
.rk-cardp .rk-row img { width: 19%; max-width: 76px; height: auto; -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%); mask-image: radial-gradient(circle, #000 58%, transparent 71%); animation: rkBob 2.8s ease-in-out infinite; }
.rk-cardp .rk-row img:nth-child(2) { animation-delay: -.5s; } .rk-cardp .rk-row img:nth-child(3) { animation-delay: -1s; } .rk-cardp .rk-row img:nth-child(4) { animation-delay: -1.5s; } .rk-cardp .rk-row img:nth-child(5) { animation-delay: -2s; }
@keyframes rkBob { 50% { transform: translateY(-6px); } }
.rk-form { margin-top: 14px; display: flex; gap: 8px; }
.rk-form .fld { flex: 1; }
.rk-form .go { padding: 12px 22px; font-size: 16px; }
.rk-cardp .rk-peek { position: absolute; right: -6px; top: -8px; width: 76px; pointer-events: none; -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%); mask-image: radial-gradient(circle, #000 58%, transparent 71%); animation: peekA 3s ease-in-out infinite; }
.rk-cardp h3 { padding-right: 72px; }
.rk-share2 { margin-top: 14px; }
.rk-fx { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; background: radial-gradient(70% 50% at 50% 40%, #0d1a44, #03050f 75%); overflow-y: auto; animation: fadeIn .25s both; }
.rk-scan { display: flex; flex-direction: column; align-items: center; }
.rk-sonar { position: relative; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(58, 160, 255, .5); background: radial-gradient(circle, rgba(58, 160, 255, .12), transparent 70%); overflow: hidden; }
.rk-sonar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(58, 160, 255, .5); opacity: 0; animation: rkPing 2.1s ease-out infinite; }
.rk-sonar i:nth-child(2) { animation-delay: .7s; } .rk-sonar i:nth-child(3) { animation-delay: 1.4s; }
@keyframes rkPing { from { transform: scale(.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.rk-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(58, 160, 255, .55), transparent 25%); animation: rays 1.6s linear infinite; }
.rk-av { position: relative; margin-top: -160px; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--avatar); color: var(--avatar-text); font-size: 30px; font-weight: 800; box-shadow: 0 0 0 4px #03050f, 0 0 30px rgba(58, 160, 255, .6); }
.rk-av img { width: 100%; height: 100%; object-fit: cover; }
.rk-h { margin: 90px 0 0; font-family: var(--display); font-size: 24px; font-weight: 800; }
.rk-log { list-style: none; margin: 12px 0 0; padding: 0; min-height: 150px; text-align: center; font-size: 15px; color: var(--dim); }
.rk-log li { animation: rise .3s var(--ease) both; padding: 3px 0; } .rk-log li.ok { color: #4ade80; font-weight: 700; }
.rk-card { position: relative; width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 18px 20px; border-radius: 28px; border: 2px solid rgba(58, 160, 255, .45); background: linear-gradient(180deg, #121a35, #080c1c); animation: resIn .55s var(--spring) both; overflow: hidden; }
.rk-card > * { position: relative; }
.rk-glow { position: absolute !important; left: 50%; top: 32%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(58, 160, 255, .3), transparent 62%); pointer-events: none; }
.rk-card.r-shark { border-color: rgba(127, 216, 255, .7); } .rk-card.r-whale { border-color: var(--gold); box-shadow: 0 0 60px rgba(255, 197, 66, .35); }
.rk-card.r-whale .rk-glow { background: radial-gradient(circle, rgba(255, 197, 66, .4), transparent 62%); }
.rk-k { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.rk-img { width: min(220px, 56vw); height: auto; margin-top: 6px; -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%); mask-image: radial-gradient(circle, #000 58%, transparent 71%); animation: prizeIn .7s var(--spring) both; }
.rk-name { margin: 0; font-family: var(--display); font-size: 38px; font-weight: 900; letter-spacing: .02em; }
.rk-card.r-whale .rk-name { color: var(--gold); text-shadow: 0 0 30px rgba(255, 197, 66, .6); }
.rk-who { margin: 0 0 12px; color: var(--dim); font-size: 15px; }
.rk-stats { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rk-stats li { padding: 7px 11px; border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: 12px; color: var(--dim); }
.rk-stats li b { display: block; font-size: 16px; color: #fff; }
.rk-stats li.tag { align-self: center; background: rgba(255, 197, 66, .15); color: var(--gold); font-weight: 700; }
.rk-share { display: block; width: 100%; margin-bottom: 10px; padding: 13px; border-radius: 99px; background: var(--bubble); font-weight: 700; }
.rk-card .btn-w { width: 100%; }