/* Entrances (city/intro.js): a teaser of what is inside, over a room as you walk in from the city (Casino, Games, Cases,
   Marketplace, Bank).
   Casino timeline (DaCity look): sign 0–1.1 s, Gambling 1.15–3.1 s, DaCity Pack 3.2–4.9 s (the pack rips 3.65 s),
   "Step inside" and the chip shower 4.95 s, the scene fades at 5.55 s and the doors open 5.7–6.3 s. */
.bi { position: fixed; inset: 0; z-index: 9999; overflow: hidden; cursor: pointer; font-family: Oswald, Inter, system-ui, sans-serif; color: #fff; }
.bi.bi-out { animation: bi-fade-out .5s ease forwards; }
@keyframes bi-fade-out { to { opacity: 0; } }
.bi.bi-reduce * { animation-duration: .01s !important; animation-delay: 0s !important; }

/* Golden art deco doors behind the scene: they show once the scene fades and slide open onto the room */
.bi-door { position: absolute; top: 0; bottom: 0; width: 50.5%; animation: bi-door .6s cubic-bezier(.7, 0, .3, 1) 5.7s forwards;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 230, 160, .35) 46px 48px),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 220, 140, .35), transparent 70%),
    linear-gradient(180deg, #6a4310, #c89432 18%, #f0cf72 50%, #b07d24 82%, #5a3a0c);
  box-shadow: inset 0 0 0 6px #3a250a, inset 0 0 0 9px #e9c56a, inset 0 0 60px rgba(0, 0, 0, .45); }
.bi-door.l { left: 0; }
.bi-door.r { right: 0; animation-name: bi-door-r; }
.bi-door::after { content: ''; position: absolute; top: 46%; width: 14px; height: 90px; border-radius: 7px; background: linear-gradient(#fff6d6, #b8892c); box-shadow: 0 0 12px rgba(255, 220, 140, .8); }
.bi-door.l::after { right: 22px; }
.bi-door.r::after { left: 22px; }
@keyframes bi-door { to { transform: translateX(-102%); } }
@keyframes bi-door-r { to { transform: translateX(102%); } }

/* Scene and backdrop */
.bi-scene { position: absolute; inset: 0; animation: bi-in .35s ease both, bi-scene-out .4s ease-in 5.55s forwards; }
@keyframes bi-in { from { opacity: 0; } }
@keyframes bi-scene-out { to { opacity: 0; transform: scale(1.12); } }
.bi-skip { position: absolute; right: 18px; bottom: 14px; margin: 0; font: 500 11px Inter, system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

/* The neon sign: big in the middle, then it rises to the top as the games come on */
.bi-head { position: absolute; left: 0; right: 0; top: 50%; text-align: center; transform: translateY(-50%); animation: bi-head-up .55s cubic-bezier(.6, 0, .3, 1) 1.05s forwards; }
@keyframes bi-head-up { to { top: 4%; transform: translateY(0) scale(.55); } }
.bi-top { margin: 0; color: #ffd9f0; font: 500 15px Inter, system-ui, sans-serif; letter-spacing: 6px; text-transform: uppercase; animation: bi-in .5s ease .15s both; }
.bi-word { margin: 4px 0 0; font: 700 clamp(70px, 12vw, 150px)/1 Oswald, Inter, sans-serif; letter-spacing: .12em; }
.bi-word span { display: inline-block; color: #3a1030; -webkit-text-stroke: 2px #5a1a48; animation: bi-ignite .6s steps(1) forwards; animation-delay: calc(.2s + var(--i) * .08s); }
@keyframes bi-ignite {
  0% { color: #fff0fa; text-shadow: 0 0 10px #ff3ea5, 0 0 30px #ff3ea5, 0 0 60px #ff3ea5; -webkit-text-stroke: 2px #ff9ad5; }
  14% { color: #3a1030; text-shadow: none; -webkit-text-stroke: 2px #5a1a48; }
  28%, 100% { color: #fff0fa; text-shadow: 0 0 8px #ff3ea5, 0 0 24px #ff3ea5, 0 0 54px #ff1f8f, 0 0 90px rgba(255, 31, 143, .6); -webkit-text-stroke: 2px #ff9ad5; }
}


/* Playing cards */
.bi-card { position: relative; display: inline-grid; place-items: center; width: 40px; height: 56px; border-radius: 6px; background: #fbf8f2; color: #1a1426;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45); font: 700 16px/1 Oswald, Inter, sans-serif; }
.bi-card b { position: absolute; top: 4px; left: 5px; font-size: 13px; }
.bi-card i { font-style: normal; font-size: 24px; }
.bi-card.red { color: #d8243c; }
/* Blackjack: the second card turns over, 21! */
.bi-bj { display: flex; gap: 6px; }
.bi-bj .flip { animation: bi-flip .5s ease 1.7s both; }
@keyframes bi-flip { 0% { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, #3b8bff 0 5px, #1d4fb0 5px 10px); color: transparent; }
  50% { transform: rotateY(90deg); background: repeating-linear-gradient(45deg, #3b8bff 0 5px, #1d4fb0 5px 10px); color: transparent; } 51%, 100% { transform: none; } }
.bi-21 { position: absolute; right: 6px; top: 2px; font: 700 22px Oswald, Inter, sans-serif; font-style: normal; color: #ffd23f; text-shadow: 0 0 10px rgba(255, 210, 63, .8); opacity: 0; animation: bi-pop .4s cubic-bezier(.2, 1.6, .4, 1) 2.1s forwards; }
@keyframes bi-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
/* Roulette: the wheel spins, the ball runs the other way */
.bi-wheel { width: 84px; height: 84px; border-radius: 50%; position: relative; animation: bi-turn 1.6s linear infinite;
  background: radial-gradient(circle, #2a1a0a 0 18%, #c8901c 19% 23%, transparent 24%), repeating-conic-gradient(#c8263c 0 10deg, #161616 10deg 20deg);
  box-shadow: 0 0 0 5px #8a5a1c, 0 0 0 7px #e7b23a, 0 4px 14px rgba(0, 0, 0, .5); }
.bi-wheel::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#1e8a4a 0 10deg, transparent 10deg); }
.bi-wheel i { position: absolute; inset: -2px; animation: bi-turn .7s linear infinite reverse; }
.bi-wheel i::after { content: ''; position: absolute; top: 6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; }
@keyframes bi-turn { to { transform: rotate(360deg); } }
/* Poker: a royal flush fans out */
.bi-fan { position: relative; width: 120px; height: 70px; }
.bi-fan .bi-card { position: absolute; left: 40px; top: 8px; transform-origin: 50% 120%; animation: bi-fan .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.bi-fan .bi-card:nth-child(1) { --a: -30deg; animation-delay: 1.65s; }
.bi-fan .bi-card:nth-child(2) { --a: -15deg; animation-delay: 1.73s; }
.bi-fan .bi-card:nth-child(3) { --a: 0deg; animation-delay: 1.81s; }
.bi-fan .bi-card:nth-child(4) { --a: 15deg; animation-delay: 1.89s; }
.bi-fan .bi-card:nth-child(5) { --a: 30deg; animation-delay: 1.97s; }
@keyframes bi-fan { from { opacity: 0; transform: rotate(0) translateY(20px); } to { opacity: 1; transform: rotate(var(--a)); } }
/* Slots: three reels roll and stop on 7 */
.bi-reels { display: flex; gap: 5px; }
.bi-reel { --h: 44px; width: 34px; height: var(--h); overflow: hidden; border-radius: 6px; background: linear-gradient(#d9d3e6, #fff 30%, #fff 70%, #cfc7dc);
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, .35), inset 0 -4px 6px rgba(0, 0, 0, .35), 0 0 0 2px #ffd23f; }
.bi-strip { display: flex; flex-direction: column; animation: bi-spin calc(.9s + var(--k) * .22s) cubic-bezier(.3, .1, .2, 1.1) 1.5s both; }
.bi-strip b { height: var(--h); display: grid; place-items: center; font: 700 18px/1 Oswald, Inter, sans-serif; color: #2a0b45; }
.bi-strip b.seven { color: #e0163f; font-size: 26px; }
@keyframes bi-spin { 0% { transform: translateY(0); filter: blur(0); } 15%, 80% { filter: blur(2px); } 100% { transform: translateY(calc(var(--h) * -7)); filter: blur(0); } }
/* Plinko: a ball bounces down the pegs into the gold slot */
.bi-plinko { position: relative; width: 96px; height: 90px; }
.bi-plinko i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #c9d6ff; box-shadow: 0 0 6px #7fa8ff;
  top: calc(10px + var(--row) * 18px); left: calc(48px - (var(--n) - 1) * 9px + var(--k) * 18px - 3px); }
.bi-plinko u { position: absolute; left: 30px; bottom: 0; width: 36px; height: 10px; border-radius: 3px; background: linear-gradient(#ffd23f, #c8901c); box-shadow: 0 0 10px rgba(255, 210, 63, .8); }
.bi-plinko b { position: absolute; top: -4px; left: 43px; width: 10px; height: 10px; border-radius: 50%; background: #ff3ea5; box-shadow: 0 0 8px #ff3ea5; animation: bi-drop 1.2s linear 1.7s both; }
@keyframes bi-drop { 0% { transform: translate(0, 0); } 20% { transform: translate(-9px, 18px); } 40% { transform: translate(0, 36px); } 60% { transform: translate(9px, 54px); } 80% { transform: translate(0, 70px); } 100% { transform: translate(0, 78px); } }
/* Flip: a gold coin spins */
.bi-coin { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; animation: bi-coinflip .7s linear infinite;
  background: radial-gradient(circle at 35% 30%, #fff6d6, #ffd23f 35%, #c8901c 75%); box-shadow: inset 0 0 0 4px #e7b23a, 0 6px 14px rgba(0, 0, 0, .45); }
.bi-coin b { font: 700 32px Oswald, Inter, sans-serif; color: #8a5a10; }
@keyframes bi-coinflip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scaleX(.2); } 100% { transform: rotateY(0); } }
/* Jackpot: the pot rolls up (intro.js counts) */
.bi-pot { display: grid; gap: 2px; }
.bi-pot b { font: 700 30px Oswald, Inter, sans-serif; color: #ffd23f; text-shadow: 0 0 12px rgba(255, 210, 63, .8); font-variant-numeric: tabular-nums; }
.bi-pot small { font: 600 11px Inter, system-ui, sans-serif; letter-spacing: 4px; color: #e9dcff; }
/* Arena: two glowing fighters clash */
.bi-arena { display: flex; align-items: center; gap: 4px; }
.bi-arena i { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #22e4d9 40%, #0a6a70); box-shadow: 0 0 14px #22e4d9; animation: bi-clash-l .6s ease-in-out 3.85s infinite alternate; }
.bi-arena i:last-child { background: radial-gradient(circle at 35% 30%, #fff, #ff3ea5 40%, #7a0a40); box-shadow: 0 0 14px #ff3ea5; animation-name: bi-clash-r; }
.bi-arena b { font: 700 24px Oswald, Inter, sans-serif; color: #fff; text-shadow: 0 0 10px #ff3ea5; }
@keyframes bi-clash-l { to { transform: translateX(10px) scale(1.1); } }
@keyframes bi-clash-r { to { transform: translateX(-10px) scale(1.1); } }

/* Finale: "Step inside", a jackpot flash and a shower of chips and coins */
.bi-final { position: absolute; left: 0; right: 0; top: 50%; text-align: center; opacity: 0; transform: translateY(-40%); animation: bi-final .45s cubic-bezier(.2, 1.3, .4, 1) 5.05s forwards; }
@keyframes bi-final { to { opacity: 1; transform: translateY(-50%); } }
.bi-final p { margin: 0; font: 500 18px Inter, system-ui, sans-serif; letter-spacing: 5px; text-transform: uppercase; color: #ffd9f0; }
.bi-final h3 { margin: 6px 0; font: 700 clamp(54px, 9vw, 110px)/1 Oswald, Inter, sans-serif; letter-spacing: 6px; text-transform: uppercase;
  background: linear-gradient(90deg, #ff3ea5, #ff8a3d 50%, #ffd23f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255, 62, 165, .6)); }
.bi-final small { font: 500 12px Inter, system-ui, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #b9a3d4; }

/* ---------- Casino in the DaCity look: sunset sky over a neon grid, the DaCity CASINO sign like the hub's logo,
   then Gambling (its games in tiles) and DaCity Pack (a foil pack rips open and the cards fan out), "Step inside". */
.bc-sky { position: absolute; inset: 0; background:
  radial-gradient(ellipse 60% 45% at 50% 62%, rgba(255, 138, 61, .55), transparent 70%),
  linear-gradient(180deg, #0c0420 0%, #2a0b4a 42%, #7a1a6e 66%, #ff6a5c 86%, #ffb347 100%); }
.bc-horizon { position: absolute; inset: 0 0 34% 0; overflow: hidden; animation: bc-dim .4s ease 4.85s forwards; }
@keyframes bc-dim { to { opacity: .35; } }
.bc-sun { position: absolute; left: 50%; bottom: -24%; width: min(52vw, 520px); aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #ffe29a, #ffb347 35%, #ff3ea5 75%, #b04dff);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 20px); mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 20px);
  opacity: .85; animation: bc-sun 6s ease-out both; }
@keyframes bc-sun { from { transform: translate(-50%, 18%); opacity: 0; } to { transform: translate(-50%, 0); opacity: .85; } }
.bc-grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 34%; transform-origin: 50% 0; transform: perspective(320px) rotateX(64deg);
  background: linear-gradient(180deg, rgba(20, 4, 36, .2), #140424 70%),
    repeating-linear-gradient(90deg, rgba(255, 62, 165, .75) 0 2px, transparent 2px 80px), repeating-linear-gradient(180deg, rgba(255, 62, 165, .75) 0 2px, transparent 2px 60px);
  animation: bc-grid .8s linear infinite; }
@keyframes bc-grid { to { background-position: 0 0, 0 0, 0 60px; } }
.bc-grid::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #ffb347, #ff6a5c 30%, #ff3ea5 55%, #b04dff 80%, #3ad7e6); box-shadow: 0 0 18px #ff3ea5; }
.bc-streaks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bc-streaks i { position: absolute; left: -30%; top: var(--y); width: 30%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--c)); box-shadow: 0 0 10px var(--c);
  animation: bc-streak 1.1s cubic-bezier(.5, 0, .5, 1) var(--d) infinite; }
@keyframes bc-streak { to { transform: translateX(460%); } }

/* The sign: the DaCity badge, DACITY in white, CASINO in the sunset gradient, slanted like the hub's top bar logo */
.bc-sign { position: absolute; left: 0; right: 0; top: 50%; display: flex; flex-direction: column; align-items: center; transform: translateY(-50%);
  animation: bc-sign-up .55s cubic-bezier(.6, 0, .3, 1) 1.05s forwards; }
@keyframes bc-sign-up { to { top: 3%; transform: translateY(0) scale(.5); } }
.bc-sign-row { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.bc-d { display: grid; place-items: center; width: clamp(74px, 10vw, 120px); aspect-ratio: 1; border-radius: 28%; font: 700 clamp(50px, 7vw, 84px)/1 Oswald, Inter, sans-serif; color: #fff;
  background: linear-gradient(160deg, #ffb347, #ff3ea5 55%, #7b3cff); box-shadow: 0 0 0 2px rgba(255, 255, 255, .3), 0 0 40px rgba(255, 62, 165, .7); text-shadow: 0 2px 4px rgba(0, 0, 0, .35);
  animation: bc-slam .5s cubic-bezier(.2, 1.6, .4, 1) .1s both; }
@keyframes bc-slam { from { opacity: 0; transform: scale(2.4) rotate(-14deg); } to { opacity: 1; transform: none; } }
.bc-sign h2 { margin: 0; font: 700 clamp(64px, 11vw, 150px)/1 Oswald, Inter, sans-serif; text-transform: uppercase; letter-spacing: .02em; transform: skewX(-8deg); white-space: nowrap; }
.bc-sign h2 span, .bc-sign h2 b { display: inline-block; animation: bc-sweep .45s cubic-bezier(.2, 1.2, .4, 1) both; }
.bc-sign h2 span { color: #fff; text-shadow: 0 4px 0 #12061f, 0 0 30px rgba(255, 255, 255, .25); animation-delay: .3s; }
.bc-sign h2 b { margin-left: .18em; animation-delay: .42s; }
@keyframes bc-sweep { from { opacity: 0; transform: translateX(60px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.bc-sign h2 b, .bc-panel h3 b, .bc-final h3 { background: linear-gradient(90deg, #ffb347, #ff6a5c 30%, #ff3ea5 55%, #b04dff 80%, #3ad7e6); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px rgba(255, 62, 165, .55)); }
.bc-line { display: block; width: min(70vw, 760px); height: 4px; margin-top: 14px; border-radius: 4px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #ffb347, #ff6a5c 30%, #ff3ea5 55%, #b04dff 80%, #3ad7e6); box-shadow: 0 0 16px #ff3ea5; animation: bc-line .5s ease-out .6s forwards; }
@keyframes bc-line { to { transform: scaleX(1); } }

/* A game panel: dark glass with a sunset edge, slanted in from the right, out to the left */
.bc-panel { position: absolute; left: 50%; top: 57%; width: min(1060px, 92vw); padding: 24px 28px 22px; border-radius: 22px; opacity: 0; transform: translate(-50%, -50%) translateX(60vw) skewX(-10deg);
  background: linear-gradient(180deg, rgba(24, 6, 44, .94), rgba(40, 10, 62, .94)); box-shadow: 0 0 0 1px rgba(255, 120, 200, .45), 0 0 50px rgba(255, 62, 165, .35), 0 30px 80px rgba(0, 0, 0, .6); }
.bc-panel::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #ffb347, #ff6a5c 30%, #ff3ea5 55%, #b04dff 80%, #3ad7e6); box-shadow: 0 0 14px #ff3ea5; }
.bc-gambling { animation: bc-panel-in .5s cubic-bezier(.2, 1.15, .4, 1) 1.15s forwards, bc-panel-out .4s cubic-bezier(.6, 0, .9, .4) 3.05s forwards; }
.bc-pack { animation: bc-panel-in .5s cubic-bezier(.2, 1.15, .4, 1) 3.2s forwards, bc-panel-out .35s cubic-bezier(.6, 0, .9, .4) 4.75s forwards; }
@keyframes bc-panel-in { 0% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes bc-panel-out { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -50%) translateX(-70vw) skewX(10deg); } }
.bc-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.bc-brand img { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 0 30px rgba(255, 62, 165, .6); }
.bc-gambling .bc-brand img { animation: bc-slam .5s cubic-bezier(.2, 1.6, .4, 1) 1.3s both; }
.bc-pack .bc-brand img { animation: bc-slam .5s cubic-bezier(.2, 1.6, .4, 1) 3.35s both; }
.bc-panel h3 { margin: 0; font: 700 54px/1 Oswald, Inter, sans-serif; text-transform: uppercase; letter-spacing: .02em; color: #fff; transform: skewX(-8deg); text-shadow: 0 3px 0 #12061f; }
.bc-panel h3 b { font-weight: 700; text-shadow: none; }
.bc-brand p { margin: 6px 0 0; font: 500 16px Inter, system-ui, sans-serif; color: #f1ddff; }
.bc-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; }
.bc-tile { opacity: 0; transform: translateY(18px) scale(.9); border-radius: 16px; padding: 12px 10px 10px; text-align: center;
  background: radial-gradient(ellipse at 50% 25%, rgba(255, 62, 165, .2), rgba(12, 2, 26, .5) 70%); box-shadow: inset 0 0 0 1px rgba(255, 120, 200, .35);
  animation: bc-tile .4s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.bc-gambling .bc-tile { animation-delay: calc(1.4s + var(--t) * .1s); }
.bc-pack .bc-tile { animation-delay: calc(3.45s + var(--t) * .1s); }
@keyframes bc-tile { to { opacity: 1; transform: none; } }
.bc-tile p { margin: 8px 0 0; font: 600 15px Oswald, Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.bc-art { position: relative; height: 96px; display: grid; place-items: center; }

/* DaCity Pack: a foil pack with the badge on it; its top tears off and five cards fly out into a fan */
.bc-packrow { display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 14px; align-items: stretch; }
.bc-side { display: grid; gap: 14px; }
.bc-side.right { align-content: center; }
.bc-rip { position: relative; height: 250px; }
.bc-foil { position: absolute; left: 50%; top: 18px; width: 128px; height: 196px; margin-left: -64px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #3ad7e6, #b04dff 35%, #ff3ea5 60%, #ffb347); box-shadow: 0 0 0 3px #fff, 0 0 40px rgba(255, 62, 165, .65), 0 12px 24px rgba(0, 0, 0, .5);
  animation: bc-foil-in .5s cubic-bezier(.2, 1.4, .4, 1) 3.3s both, bc-foil-shake .25s ease-in-out 3.45s 2, bc-foil-out .35s ease-in 4.15s forwards; }
.bc-foil img { position: absolute; left: 50%; top: 52%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 20px; }
.bc-foil::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); transform: translateX(-120%); animation: bc-shine .7s ease 3.4s 2; }
.bc-foil b { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 700 15px Oswald, Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.bc-top { position: absolute; left: 50%; top: 18px; width: 128px; height: 30px; margin-left: -64px; z-index: 2; border-radius: 10px 10px 0 0;
  background: linear-gradient(135deg, #fff, #ffd9f0); clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 84% 70%, 76% 100%, 68% 70%, 60% 100%, 52% 70%, 44% 100%, 36% 70%, 28% 100%, 20% 70%, 12% 100%, 4% 70%, 0 100%);
  animation: bc-foil-in .5s cubic-bezier(.2, 1.4, .4, 1) 3.3s both, bc-tear .55s cubic-bezier(.3, 0, .7, 1) 3.65s forwards; }
@keyframes bc-foil-in { from { opacity: 0; transform: translateY(60px) scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes bc-foil-shake { 50% { transform: rotate(-3deg) scale(1.03); } }
@keyframes bc-tear { to { transform: translate(140px, -120px) rotate(38deg); opacity: 0; } }
@keyframes bc-foil-out { to { transform: translateY(90px) scale(.8); opacity: 0; } }
@keyframes bc-shine { to { transform: translateX(120%); } }
.bc-cards i { position: absolute; left: 50%; top: 40px; width: 70px; height: 98px; margin-left: -35px; border-radius: 8px; transform-origin: 50% 130%; opacity: 0;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .55), transparent 40%), linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 0 0 3px #fff, 0 0 18px var(--c1), 0 8px 16px rgba(0, 0, 0, .45);
  animation: bc-card .5s cubic-bezier(.2, 1.4, .4, 1) calc(3.8s + var(--n) * .07s) forwards; }
.bc-cards i::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 30px Oswald, Inter, sans-serif; color: rgba(255, 255, 255, .9); }
.bc-cards i.gold { --c1: #ffd23f; --c2: #c8901c; box-shadow: 0 0 0 3px #fff6c4, 0 0 30px #ffd23f, 0 8px 16px rgba(0, 0, 0, .45); }
@keyframes bc-card { from { opacity: 0; transform: translateY(60px) scale(.5); } to { opacity: 1; transform: rotate(var(--a)) translateY(-14px); } }

/* Finale: both badges, "Step inside", a flash and a shower of chips in the sunset colours */
.bc-final::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(980px, 110vw); height: 150%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(14, 3, 30, .88), rgba(14, 3, 30, .6) 45%, transparent 72%); }
.bc-final .bc-badges { display: flex; justify-content: center; gap: 18px; margin-bottom: 10px; }
.bc-final .bc-badges img { width: 74px; height: 74px; border-radius: 22px; box-shadow: 0 0 30px rgba(255, 62, 165, .6); }
.bc-final h3 { color: transparent; transform: skewX(-8deg); }
.bc-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 230, 245, .9), rgba(255, 62, 165, .35) 40%, transparent 70%); animation: bc-flash .6s ease-out 4.95s; }
@keyframes bc-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.bc-rain { position: absolute; inset: 0; pointer-events: none; }
.bc-rain i { position: absolute; top: -8%; left: var(--x); width: 34px; height: 34px; border-radius: 50%; opacity: 0; transform: scale(var(--s));
  background: radial-gradient(circle, #fff 0 22%, var(--c) 23% 58%, #fff 59% 66%, var(--c) 67%); box-shadow: 0 0 0 2px rgba(0, 0, 0, .25), 0 0 12px var(--c);
  animation: bc-fall 1s cubic-bezier(.4, 0, .9, .6) calc(4.95s + var(--d)) forwards; }
@keyframes bc-fall { 0% { opacity: 1; transform: translateY(0) rotate(0) scale(var(--s)); } 100% { opacity: 1; transform: translateY(115vh) rotate(var(--r)) scale(var(--s)); } }

/* The casino's doors in the DaCity look: night purple with a sunset seam and neon handles */
.bi-casino .bi-door { background:
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(255, 62, 165, .12) 22px 24px),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 62, 165, .3), transparent 70%),
    linear-gradient(180deg, #1a0630, #3a0d55 50%, #1a0630);
  box-shadow: inset 0 0 0 4px #12041f, inset 0 0 0 6px rgba(255, 120, 200, .55), inset 0 0 60px rgba(0, 0, 0, .45); }
.bi-casino .bi-door::after { background: linear-gradient(#ffb347, #ff3ea5 55%, #b04dff); box-shadow: 0 0 16px #ff3ea5; }

@media (max-width: 760px) {
  .bc-panel { padding: 16px 12px 14px; top: 58%; }
  .bc-brand img { width: 50px; height: 50px; border-radius: 15px; }
  .bc-panel h3 { font-size: 32px; }
  .bc-brand p { font-size: 13px; }
  .bc-tiles { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bc-tile { min-width: 0; overflow: hidden; padding: 8px 4px; }
  .bc-art { height: 74px; transform: scale(.72); }
  .bc-tile p { font-size: 12px; }
  .bc-packrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bc-side { display: contents; }
  .bc-rip { grid-column: 1 / -1; height: 200px; order: -1; }
}

/* ---------- Games: Ocean Drive at night (timeline: hotels light up 0.3–1.3 s, the Six City sign 0.8 s, the car 1.6–3.0 s
   with the cops' lights 1.8–3.0 s, "Hit the gas" 3.3 s, the headlights flare 4.0 s, white-out 4.5–4.9 s, then the room) ---------- */
.bi-games .bi-scene { animation: bi-in .35s ease both; }
.bg-drive { background: #07021a; }
.bg-sky { position: absolute; inset: 0 0 26% 0; background: linear-gradient(180deg, #05011a 0%, #1a0838 42%, #4a1460 72%, #a8326e 92%, #ff7a6a 100%); }
.bg-sky i { position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .2; animation: bg-twinkle 1.6s ease-in-out var(--d) infinite alternate; }
@keyframes bg-twinkle { to { opacity: .9; } }
.bg-sky .bg-moon { left: 74%; top: 12%; width: min(9vw, 84px); height: min(9vw, 84px); opacity: 1; animation: none;
  background: radial-gradient(circle at 35% 35%, #fff6e6, #ffd9b0 60%, #ffb38a); box-shadow: 0 0 40px rgba(255, 210, 170, .55), 0 0 120px rgba(255, 120, 160, .35); }
/* Art deco hotels: dark fronts with lit windows, neon outlines and signs that flicker on one by one */
.bg-hotels { position: absolute; left: 0; right: 0; bottom: 26%; height: 58%; }
.bg-hotels b { position: absolute; bottom: 0; left: var(--x); width: var(--w); height: var(--h); border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(90deg, transparent 0 14%, rgba(10, 4, 24, .9) 14% 20%), repeating-linear-gradient(180deg, rgba(255, 214, 140, .32) 0 8px, transparent 8px 18px), linear-gradient(180deg, #2a1046, #12061f);
  box-shadow: inset 0 0 0 2px #1d0a33; animation: bg-neon .7s steps(1) calc(.3s + var(--i) * .12s) forwards; }
.bg-hotels b::before { content: ''; position: absolute; left: 22%; right: 22%; bottom: 100%; height: 14%; border-radius: 6px 6px 0 0; background: #1a0a30;
  box-shadow: inset 0 0 0 2px #1d0a33; animation: bg-neon .7s steps(1) calc(.36s + var(--i) * .12s) forwards; }
.bg-hotels em { position: absolute; left: 0; right: 0; top: 10%; text-align: center; font: 700 clamp(12px, 2vw, 22px)/1 Oswald, Inter, sans-serif; letter-spacing: 3px; font-style: normal;
  color: #2a1440; animation: bg-sign .8s steps(1) calc(.6s + var(--i) * .12s) forwards; }
@keyframes bg-neon {
  0% { box-shadow: inset 0 0 0 2px var(--c), 0 0 18px var(--c); }
  20% { box-shadow: inset 0 0 0 2px #1d0a33; }
  40%, 100% { box-shadow: inset 0 0 0 2px var(--c), 0 0 14px var(--c), 0 0 40px color-mix(in srgb, var(--c) 45%, transparent); }
}
@keyframes bg-sign {
  0%, 30% { color: #fff; text-shadow: 0 0 8px var(--c), 0 0 22px var(--c); }
  15%, 45% { color: #2a1440; text-shadow: none; }
  60%, 100% { color: #fff; text-shadow: 0 0 8px var(--c), 0 0 22px var(--c), 0 0 44px var(--c); }
}
/* Ocean Drive: a pink sidewalk, wet asphalt with the neon in it and a dashed line */
.bg-street { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, #1a0d2c, #0a0614); }
.bg-walk { position: absolute; left: 0; right: 0; top: 0; height: 12%; background: linear-gradient(180deg, #e88ab6, #8a3a6a); box-shadow: 0 3px 0 #3a1430; }
.bg-glow { position: absolute; left: 0; right: 0; top: 16%; bottom: 0; filter: blur(14px); opacity: .55;
  background: linear-gradient(90deg, transparent 4%, #ff4fa3 8% 14%, transparent 18% 24%, #22e4d9 27% 32%, transparent 36% 58%, #22e4d9 62% 68%, transparent 72%, #ff8a3d 76% 80%, transparent 84%, #b04dff 88% 93%, transparent 97%); }
.bg-dash { position: absolute; left: 0; right: 0; top: 60%; height: 4px; background: repeating-linear-gradient(90deg, #ffd23f 0 46px, transparent 46px 96px); opacity: .8; }
/* Palms swaying in the warm wind */
.bg-palm { position: absolute; bottom: 20%; left: var(--x); width: calc(min(13vw, 140px) * var(--s)); transform-origin: 50% 100%; animation: bg-sway 2.4s ease-in-out var(--d) infinite alternate; }
.bg-palm.r { transform: scaleX(-1); animation-name: bg-sway-r; }
@keyframes bg-sway { from { transform: rotate(-2deg); } to { transform: rotate(2.5deg); } }
@keyframes bg-sway-r { from { transform: scaleX(-1) rotate(-2deg); } to { transform: scaleX(-1) rotate(2.5deg); } }
/* The Six City sign flickers on over the street */
.bg-sign { position: absolute; left: 0; right: 0; top: 5%; text-align: center; }
.bg-sign img { width: min(34vw, 300px); height: auto; opacity: 0; animation: bg-logo .8s steps(1) .8s forwards; }
@keyframes bg-logo {
  0% { opacity: 1; filter: drop-shadow(0 0 18px #ff4fa3); }
  12% { opacity: .15; filter: none; }
  25%, 100% { opacity: 1; filter: drop-shadow(0 0 14px #ff4fa3) drop-shadow(0 0 40px rgba(34, 228, 217, .55)); }
}
.bg-sign p { margin: 6px 0 0; font: 600 clamp(12px, 1.6vw, 16px) Inter, system-ui, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #ffd9f0;
  text-shadow: 0 0 10px rgba(255, 79, 163, .8); opacity: 0; animation: bi-glow .5s ease 1.4s forwards, bi-fade-out .3s ease 3.05s forwards; }
/* The cops' lights wash in from both sides while the car comes in */
.bg-cop { position: absolute; top: 0; bottom: 0; width: 45%; opacity: 0; pointer-events: none; animation: bg-cop .4s steps(1) 1.8s 3; }
.bg-cop.l { left: 0; background: linear-gradient(90deg, rgba(255, 40, 60, .5), transparent); }
.bg-cop.r { right: 0; background: linear-gradient(270deg, rgba(40, 110, 255, .5), transparent); animation-delay: 2s; }
@keyframes bg-cop { 0% { opacity: 1; } 50% { opacity: 0; } }
/* The car: in from the left, it brakes in the middle of the street; its headlights flare up into the white-out */
.bg-car { position: absolute; bottom: 5%; left: -40%; width: min(46vw, 420px); transform: translateX(-50%); animation: bg-car-in 1.4s cubic-bezier(.15, .6, .25, 1) 1.6s forwards; }
.bg-car svg { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 16px rgba(255, 62, 165, .45)); }
@keyframes bg-car-in { to { left: 50%; } }
.bg-wheel { animation: bg-wheel .25s linear infinite 1.6s; animation-iteration-count: 6; }
@keyframes bg-wheel { to { transform: rotate(360deg); } }
.bg-tail { animation: bg-brake .3s steps(1) 2.85s 3; }
@keyframes bg-brake { 0% { fill: #ff6a7a; filter: drop-shadow(0 0 6px #ff2a4a); } 50% { fill: #ff2a4a; filter: none; } }
.bg-beam { position: absolute; left: 92%; top: 38%; width: 140%; height: 140%; transform: translateY(-50%); transform-origin: 0 50%; opacity: .55;
  clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%); background: linear-gradient(90deg, rgba(255, 248, 214, .9), rgba(255, 248, 214, 0));
  animation: bg-flare .6s ease-in 4s forwards; }
@keyframes bg-flare { to { opacity: 1; transform: translateY(-50%) scale(3, 4); } }
.bg-flash { position: absolute; inset: 0; background: radial-gradient(circle at 60% 80%, #fffdf2, #fff3d6 50%, #ffd9ec); opacity: 0; pointer-events: none; animation: bi-glow .4s ease-in 4.5s forwards; }
/* Finale */
.bi-final-games { top: 50%; animation-delay: 3.3s; }
.bi-final-games p { color: #ffe0f0; text-shadow: 0 0 10px rgba(255, 79, 163, .8); }
.bi-final-games h3 { background: linear-gradient(90deg, #ff4fa3, #ffd23f 50%, #22e4d9); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(255, 79, 163, .55)); }

@media (max-width: 760px) {
  .bg-hotels em { letter-spacing: 1px; }
  .bg-car { width: 70vw; }
  .bg-sign img { width: 52vw; }
  .bg-palm { width: calc(20vw * var(--s)); }
  .bi-final-games h3 { font-size: 14vw; letter-spacing: 2px; }
  .bi-final-games p { letter-spacing: 3px; font-size: 14px; }
}

/* ---------- Cases: a chest opening (timeline: sign 0–1.1 s, the chest drops 1.1 s, shakes 1.7–2.45 s with light leaking out,
   the lid bursts off with rays and a flash 2.5 s, items fly out 2.6–3.4 s, the legendary one 3.3–4.1 s, "Open a case"
   4.2 s, the scene fades at 4.95 s and the golden doors open 5.05–5.65 s) ---------- */
.bi-cases .bi-scene { animation: bi-in .35s ease both, bi-scene-out .4s ease-in 4.95s forwards; }
.bi-cases .bi-door { animation-delay: 5.05s; }
.bk-bg { position: absolute; inset: 0; background:
  radial-gradient(ellipse 45% 40% at 50% 60%, rgba(255, 210, 63, .16), transparent 70%),
  repeating-conic-gradient(from 0deg at 50% 60%, rgba(255, 255, 255, .025) 0 6deg, transparent 6deg 12deg),
  linear-gradient(180deg, #0c0420 0%, #1c0a3a 55%, #2c0f4a 100%); }
.bi-word-cases span { animation-name: bi-ignite-gold; }
.bi-cases .bi-top { color: #ffe9a0; }
.bk-stage { position: absolute; left: 50%; top: 60%; width: min(54vmin, 400px); aspect-ratio: 300 / 340; transform: translate(-50%, -50%); animation: bk-stage-away .4s ease-in 4.05s forwards; }
@keyframes bk-stage-away { to { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
/* The chest: drops in and bounces, shakes harder and harder, the lid bursts off, then it steps back for the legendary */
.bk-chest { position: absolute; inset: 0; opacity: 0; transform: translateY(-70vh); animation: bk-drop .55s cubic-bezier(.3, 1.4, .5, 1) 1.1s forwards, bk-shake .75s ease-in 1.7s, bk-back .4s ease 3.25s forwards; }
.bk-chest svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 24px rgba(255, 210, 63, .35)); }
@keyframes bk-drop { 0% { opacity: 1; transform: translateY(-70vh); } 70% { opacity: 1; transform: translateY(0) scaleY(.9); } 100% { opacity: 1; transform: none; } }
@keyframes bk-shake {
  0%, 100% { transform: none; } 10% { transform: rotate(-2deg); } 20% { transform: rotate(2deg); } 30% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); }
  50% { transform: rotate(-4deg) scale(1.02); } 60% { transform: rotate(4deg) scale(1.03); } 70% { transform: rotate(-6deg) scale(1.05); } 80% { transform: rotate(6deg) scale(1.06); } 90% { transform: rotate(-3deg) scale(1.08); }
}
@keyframes bk-back { to { opacity: .35; transform: translateY(8%) scale(.86); } }
.bk-lid { transform-box: fill-box; transform-origin: 50% 100%; animation: bk-lid .6s cubic-bezier(.2, .8, .3, 1) 2.5s forwards; }
@keyframes bk-lid { to { transform: translate(-60px, -230px) rotate(-38deg); opacity: 0; } }
/* Light leaking from the seam while it shakes */
.bk-sparks { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.bk-sparks i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 20px var(--c); opacity: 0;
  animation: bk-spark .7s ease-out var(--d) forwards; }
@keyframes bk-spark { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.2); } }
/* Rays and a flash when the lid goes */
.bk-rays { position: absolute; left: 50%; top: 42%; width: 0; height: 0; transform: scale(.2); opacity: 0;
  animation: bk-rays-in .5s ease-out 2.5s forwards, bk-spin 6s linear 2.5s infinite; }
.bk-rays i { position: absolute; left: calc(min(6vmin, 46px) / -2); top: 0; width: min(6vmin, 46px); height: min(62vmin, 470px); transform-origin: 50% 0; transform: rotate(var(--a));
  background: linear-gradient(180deg, rgba(255, 236, 150, .55), rgba(255, 210, 63, 0)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
@keyframes bk-rays-in { to { opacity: 1; transform: scale(1); } }
@keyframes bk-spin { to { rotate: 360deg; } }
.bk-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 56%, #fffbe6, rgba(255, 220, 120, .75) 30%, transparent 70%);
  animation: bc-flash .6s ease-out 2.5s forwards; }
/* Items fly out by rarity */
.bk-items { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.bk-item { position: absolute; left: calc(min(11vmin, 84px) / -2); top: calc(min(11vmin, 84px) / -2); width: min(11vmin, 84px); aspect-ratio: 1; border-radius: 16px; padding: 6%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 35%, #1a0c30), #140826); box-shadow: 0 0 0 3px var(--c), 0 0 22px var(--c);
  opacity: 0; transform: scale(.2); animation: bk-fly .55s cubic-bezier(.2, 1.2, .4, 1) calc(2.6s + var(--d)) forwards, bk-item-out .3s ease-in 3.4s forwards; }
.bk-item svg { width: 100%; height: 100%; }
@keyframes bk-fly { 0% { opacity: 1; transform: translate(0, 0) scale(.2); } 100% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(1); } }
@keyframes bk-item-out { from { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(1); } to { opacity: 0; transform: translate(calc(var(--tx) * 1.3), calc(var(--ty) * 1.3)) rotate(var(--r)) scale(.7); } }
/* The legendary one rises out of the chest in gold */
.bk-legend { position: absolute; left: 50%; top: 30%; width: 70%; transform: translate(-50%, 30%) scale(.2); opacity: 0; text-align: center;
  animation: bk-legend .6s cubic-bezier(.2, 1.4, .4, 1) 3.3s forwards; }
@keyframes bk-legend { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.bk-legend-art { width: 62%; margin: 0 auto; aspect-ratio: 1; border-radius: 22px; padding: 7%; background: radial-gradient(circle, #5a3a10, #1c0e22);
  box-shadow: 0 0 0 4px #ffd23f, 0 0 40px #ffd23f, 0 0 100px rgba(255, 210, 63, .6); }
.bk-legend-art svg { width: 100%; height: 100%; }
.bk-legend p { margin: 12px 0 0; font: 700 13px Inter, system-ui, sans-serif; letter-spacing: 5px; text-transform: uppercase; color: #ffd23f; }
.bk-legend h4 { margin: 2px 0 0; font: 700 clamp(22px, 4vmin, 34px)/1.1 Oswald, Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #fff8e0; text-shadow: 0 0 18px #ffb000; }
/* Finale */
.bi-final-cases { animation-delay: 4.2s; }
.bi-final-cases h3 { background: linear-gradient(90deg, #ffe9a0, #ffd23f 40%, #ff3ea5); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(255, 210, 63, .55)); }
.bi-final-cases p { color: #ffe9a0; }
@media (max-width: 760px) {
  .bk-stage { width: 70vw; }
  .bk-item { width: 15vw; left: -7.5vw; top: -7.5vw; }
  .bi-final-cases h3 { font-size: 14vw; letter-spacing: 2px; }
}

/* ---------- Bank: a vault (timeline: sign 0–1.1 s, the vault door 1.1 s, wheel 1.3–2.3 s, it opens 2.4 s, chart 1.4–3.2 s,
   tape from 1.6 s, coins and notes 2.8 s, "Step inside" 4.1 s, the scene fades 4.95 s, steel doors 5.05–5.65 s) ---------- */
.bi-bank .bi-scene { animation: bi-in .35s ease both, bi-scene-out .4s ease-in 4.95s forwards; }
.bi-bank .bi-door { animation-delay: 5.05s;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, .06) 46px 48px),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 220, 140, .18), transparent 70%),
    linear-gradient(180deg, #1c2133, #3a4258 18%, #5a6480 50%, #343b52 82%, #151a28);
  box-shadow: inset 0 0 0 6px #0e1220, inset 0 0 0 9px #e9c56a, inset 0 0 60px rgba(0, 0, 0, .5); }
.bi-vault-bg { position: absolute; inset: 0; background:
  radial-gradient(ellipse 50% 45% at 50% 55%, rgba(255, 210, 63, .18), transparent 70%),
  repeating-linear-gradient(90deg, transparent 0 119px, rgba(255, 210, 63, .08) 119px 120px),
  repeating-linear-gradient(0deg, transparent 0 119px, rgba(255, 210, 63, .08) 119px 120px),
  linear-gradient(180deg, #07051a 0%, #160a33 55%, #241048 100%); }
.bi-word-bank span { animation-name: bi-ignite-gold; }
@keyframes bi-ignite-gold {
  0% { color: #fff8e0; text-shadow: 0 0 10px #ffd23f, 0 0 30px #ffb000; -webkit-text-stroke: 2px #ffe9a0; }
  14% { color: #2a1c06; text-shadow: none; -webkit-text-stroke: 2px #4a3410; }
  28%, 100% { color: #fff8e0; text-shadow: 0 0 8px #ffd23f, 0 0 24px #ffb000, 0 0 54px #ff8a00, 0 0 90px rgba(255, 176, 0, .55); -webkit-text-stroke: 2px #ffe9a0; }
}
.bi-bank .bi-top { color: #ffe9a0; }
/* Candle chart climbing behind the vault (a picture, no prices) */
.bi-candles { position: absolute; left: 6%; right: 6%; bottom: 18%; top: 22%; opacity: .55; animation: bi-candles-dim .5s ease 3.9s forwards; }
@keyframes bi-candles-dim { to { opacity: .2; } }
.bi-candles b { position: absolute; left: calc(var(--i) * 4.5%); bottom: var(--y); width: 2.2%; height: var(--h); border-radius: 2px; opacity: 0; transform: scaleY(0);
  animation: bi-candle .25s ease-out calc(1.4s + var(--i) * .08s) forwards; }
.bi-candles b::before { content: ''; position: absolute; left: 50%; top: -30%; bottom: -30%; width: 2px; margin-left: -1px; background: inherit; opacity: .7; }
.bi-candles b.up { background: #4fdc8a; box-shadow: 0 0 10px rgba(79, 220, 138, .6); }
.bi-candles b.down { background: #ff5c8a; box-shadow: 0 0 10px rgba(255, 92, 138, .6); }
@keyframes bi-candle { to { opacity: 1; transform: none; } }
/* The vault door: rings and bolts, a spoked wheel that spins, then it swings open onto a glow */
.bi-vault { position: absolute; left: 50%; top: 56%; width: min(46vh, 380px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.7); opacity: 0; perspective: 900px;
  animation: bi-vault-in .5s cubic-bezier(.2, 1.3, .4, 1) 1.1s forwards, bi-vault-away .4s ease-in 3.9s forwards; }
@keyframes bi-vault-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes bi-vault-away { to { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } }
.bi-vault-glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, #fff6d6, #ffd23f 35%, rgba(255, 176, 0, .2) 70%, transparent 75%);
  opacity: 0; animation: bi-glow .5s ease 2.5s forwards; }
@keyframes bi-glow { from { opacity: 0; } to { opacity: 1; } }
.bi-vault-door { position: absolute; inset: 0; border-radius: 50%; transform-origin: 2% 50%;
  background: radial-gradient(circle, #6a7290 0 18%, #3a4258 19% 30%, #8a93b0 31% 33%, #2a3044 34% 58%, #9aa3c0 59% 61%, #343b52 62% 86%, #e9c56a 87% 90%, #6a4310 91%);
  box-shadow: 0 0 0 4px #1a1f30, 0 0 40px rgba(255, 210, 63, .35), 0 20px 50px rgba(0, 0, 0, .6);
  animation: bi-vault-open .9s cubic-bezier(.6, 0, .3, 1) 2.4s forwards; }
@keyframes bi-vault-open { to { transform: rotateY(-105deg); filter: brightness(.6); } }
.bi-vault-bolts i { position: absolute; left: 50%; top: 50%; width: 7%; height: 7%; margin: -3.5%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d6, #e9c56a 45%, #8a5a10); transform: rotate(var(--a)) translateY(-205%); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.bi-vault-wheel { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); animation: bi-wheel 1s cubic-bezier(.5, 0, .3, 1) 1.3s both; }
@keyframes bi-wheel { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(-540deg); } }
.bi-vault-wheel i { position: absolute; left: 50%; top: 0; bottom: 0; width: 9%; margin-left: -4.5%; border-radius: 6px; background: linear-gradient(90deg, #8a5a10, #ffd23f, #8a5a10); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.bi-vault-wheel i:nth-child(2) { transform: rotate(60deg); } .bi-vault-wheel i:nth-child(3) { transform: rotate(120deg); }
.bi-vault-wheel b { position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffd23f 45%, #c88400); color: #2a1400; font: 700 clamp(18px, 3.4vh, 30px) Oswald, Inter, sans-serif; box-shadow: 0 0 0 3px #6a4310, 0 0 18px rgba(255, 210, 63, .7); }
/* Coins and dollar notes burst out of the vault */
.bi-burst { position: absolute; left: 50%; top: 56%; width: 0; height: 0; pointer-events: none; }
.bi-burst i { position: absolute; left: -17px; top: -17px; opacity: 0; animation: bi-burst 1.3s cubic-bezier(.15, .7, .3, 1) calc(2.8s + var(--d)) forwards; }
.bi-burst i.coin { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d6, #ffd23f 35%, #c8901c 75%); box-shadow: inset 0 0 0 3px #e7b23a, 0 4px 8px rgba(0, 0, 0, .4); }
.bi-burst i.coin::after { content: 'D'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 16px Oswald, Inter, sans-serif; color: #8a5a10; }
.bi-burst i.bill { width: 52px; height: 26px; border-radius: 4px; background: linear-gradient(135deg, #7fe6a5, #2fa865); box-shadow: inset 0 0 0 2px #1d7a45, 0 4px 8px rgba(0, 0, 0, .4); }
.bi-burst i.bill::after { content: '$'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 16px Oswald, Inter, sans-serif; color: #0d4a26; }
@keyframes bi-burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(1); } }
/* DACITY / USD tape along the bottom */
.bi-tape { position: absolute; left: 0; right: 0; bottom: 6%; height: 42px; overflow: hidden; background: rgba(13, 4, 32, .78); border-block: 1px solid rgba(255, 210, 63, .45);
  opacity: 0; animation: bi-glow .4s ease 1.6s forwards; }
.bi-tape div { display: flex; width: max-content; animation: bi-tape 6s linear 1.6s infinite; }
.bi-tape span { padding: 0 28px; font: 700 15px/42px "Courier New", ui-monospace, monospace; letter-spacing: 3px; color: #ffd23f; white-space: nowrap; }
.bi-tape span:nth-child(3n+2) { color: #4fdc8a; } .bi-tape span:nth-child(3n) { color: #ff8ab0; }
@keyframes bi-tape { to { transform: translateX(-50%); } }
/* Finale */
.bi-final-bank { animation-delay: 4.1s; }
.bi-final-bank h3 { background: linear-gradient(90deg, #ffe9a0, #ffd23f 45%, #4fdc8a); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(255, 210, 63, .55)); }
.bi-final-bank p { color: #ffe9a0; }
@media (max-width: 760px) {
  .bi-vault { width: min(62vw, 300px); }
  .bi-tape { height: 34px; } .bi-tape span { font-size: 12px; line-height: 34px; padding: 0 18px; }
  .bi-candles { left: 2%; right: 2%; }
}

/* ---------- Marketplace: a night market (timeline: sign 0–1.1 s, awnings drop 1.1–1.6 s, bulbs light 1.3–2.0 s, items slide
   onto the counters 1.6–2.4 s, collections tape from 2.4 s, SOLD and coins 2.9–3.6 s, "Browse the stalls" 4.1 s, the scene
   fades 4.95 s and a shop shutter rolls up 5.05–5.65 s) ---------- */
.bi-marketplace .bi-scene { animation: bi-in .35s ease both, bi-scene-out .4s ease-in 4.95s forwards; }
/* One roller shutter instead of the two doors */
.bi-marketplace .bi-door.l { width: 100%; animation: bm-shutter .6s cubic-bezier(.7, 0, .3, 1) 5.05s forwards;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .1) 0 2px, transparent 2px 22px, rgba(0, 0, 0, .35) 22px 24px),
    linear-gradient(180deg, #1a2a3a, #2c4458 45%, #1d3040);
  box-shadow: inset 0 -10px 0 #0f1a24, inset 0 -13px 0 #22e4d9, inset 0 0 80px rgba(0, 0, 0, .5); }
.bi-marketplace .bi-door.l::after { left: 50%; right: auto; top: auto; bottom: 22px; width: 120px; height: 12px; margin-left: -60px; border-radius: 6px;
  background: linear-gradient(#e8fffd, #22e4d9); box-shadow: 0 0 14px rgba(34, 228, 217, .8); }
.bi-marketplace .bi-door.r { display: none; }
@keyframes bm-shutter { to { transform: translateY(-102%); } }
.bm-bg { position: absolute; inset: 0; background:
  radial-gradient(ellipse 60% 38% at 50% 78%, rgba(34, 228, 217, .16), transparent 70%),
  radial-gradient(ellipse 40% 30% at 18% 20%, rgba(255, 62, 165, .14), transparent 70%),
  linear-gradient(180deg, #0a0420 0%, #170a34 55%, #22093a 100%); }
.bi-word-market span { animation-name: bi-ignite-teal; }
.bi-marketplace .bi-top { color: #bff8f3; }
@keyframes bi-ignite-teal {
  0% { color: #f0fffd; text-shadow: 0 0 10px #22e4d9, 0 0 30px #22e4d9; -webkit-text-stroke: 2px #9ff5ee; }
  14% { color: #06302c; text-shadow: none; -webkit-text-stroke: 2px #0f4a44; }
  28%, 100% { color: #f0fffd; text-shadow: 0 0 8px #22e4d9, 0 0 24px #22e4d9, 0 0 54px #0fb8ae, 0 0 90px rgba(15, 184, 174, .55); -webkit-text-stroke: 2px #9ff5ee; }
}
/* A string of bulbs across the stalls */
.bm-bulbs { position: absolute; left: 4%; right: 4%; top: 30%; height: 40px; display: flex; justify-content: space-between;
  border-top: 2px solid rgba(255, 255, 255, .18); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.bm-bulbs i { position: relative; top: calc(14px * sin(var(--i) / 23 * 3.1416)); width: 12px; height: 16px; border-radius: 50% 50% 45% 45%;
  background: #3a2a4a; animation: bm-bulb .25s steps(1) calc(1.3s + var(--i) * .03s) forwards; }
@keyframes bm-bulb { to { background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 24px var(--c); } }
/* Three stalls: a striped awning drops, the counter holds three items */
.bm-stalls { position: absolute; left: 50%; bottom: 15%; width: min(94vw, 980px); transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4%;
  animation: bm-stalls-away .4s ease-in 3.9s forwards; }
@keyframes bm-stalls-away { to { opacity: .25; transform: translateX(-50%) translateY(6%) scale(.92); } }
.bm-awning { height: min(9vh, 70px); transform-origin: 50% 0; transform: scaleY(0); animation: bm-awning .45s cubic-bezier(.2, 1.4, .4, 1) calc(1.1s + var(--s) * .12s) forwards;
  background: repeating-linear-gradient(90deg, var(--c) 0 12.5%, #fff 12.5% 25%);
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 50% 0, #000 0 10px, transparent 10.5px) 0 100% / 12.5% 10px repeat-x;
  mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 50% 0, #000 0 10px, transparent 10.5px) 0 100% / 12.5% 10px repeat-x;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
@keyframes bm-awning { to { transform: scaleY(1); } }
.bm-counter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8%; padding: 8% 7% 9%; margin-top: -4px; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #2a1240, #160828); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent), 0 0 26px color-mix(in srgb, var(--c) 30%, transparent);
  opacity: 0; animation: bi-glow .3s ease calc(1.25s + var(--s) * .12s) forwards; }
.bm-item { position: relative; aspect-ratio: 1; border-radius: 12px; padding: 10%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 35%, #1a0a2b), #12061f 75%);
  box-shadow: inset 0 0 0 2px var(--c), 0 0 14px color-mix(in srgb, var(--c) 45%, transparent);
  opacity: 0; transform: translateY(-40px) scale(.6); animation: bm-item .45s cubic-bezier(.2, 1.4, .4, 1) var(--d) forwards; }
.bm-item svg { width: 100%; height: 100%; }
@keyframes bm-item { to { opacity: 1; transform: none; } }
.bm-tag { position: absolute; right: -8%; top: -10%; padding: 2px 6px; border-radius: 6px; background: #fff; color: #12061f; font: 700 clamp(8px, 1.1vw, 11px) Inter, sans-serif;
  letter-spacing: 1px; font-style: normal; transform: rotate(8deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.bm-item.sold { animation: bm-item .45s cubic-bezier(.2, 1.4, .4, 1) var(--d) forwards, bm-sold .5s ease 2.95s forwards; }
@keyframes bm-sold { 40% { transform: scale(1.15); } to { transform: scale(1); box-shadow: inset 0 0 0 3px #ffd23f, 0 0 30px rgba(255, 210, 63, .8); } }
.bm-stamp { position: absolute; left: 50%; top: 50%; padding: 2px 8px; border: 3px solid #ff3e6c; border-radius: 6px; color: #ff3e6c; background: rgba(18, 6, 31, .6);
  font: 700 clamp(14px, 2.2vw, 22px) Oswald, Inter, sans-serif; letter-spacing: 2px; opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.6);
  animation: bm-stamp .25s cubic-bezier(.5, 0, .7, 1.4) 2.9s forwards; }
@keyframes bm-stamp { to { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
/* Coins pop out of the sold item */
.bm-coins { position: absolute; left: 50%; bottom: 27%; width: 0; height: 0; }
.bm-coins i { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff6d6, #ffd23f 40%, #c8901c 80%); box-shadow: inset 0 0 0 2px #e7b23a;
  animation: bm-coin .9s cubic-bezier(.2, .8, .4, 1) calc(3.05s + var(--d)) forwards; }
@keyframes bm-coin { 0% { opacity: 1; transform: translate(0, 0) scale(.5); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1); } }
/* Collections tape along the bottom */
.bm-tape { position: absolute; left: 0; right: 0; bottom: 4%; height: 38px; overflow: hidden; background: rgba(10, 4, 32, .8); border-block: 1px solid rgba(34, 228, 217, .45);
  opacity: 0; animation: bi-glow .4s ease 2.4s forwards; }
.bm-tape div { display: flex; width: max-content; animation: bi-tape 7s linear 2.4s infinite; }
.bm-tape span { padding: 0 26px; font: 700 14px/38px Oswald, Inter, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #9ff5ee; white-space: nowrap; }
.bm-tape span:nth-child(3n+2) { color: #ff8ad0; } .bm-tape span:nth-child(3n) { color: #ffe07a; }
/* Finale */
.bi-final-market { animation-delay: 4.1s; }
.bi-final-market h3 { background: linear-gradient(90deg, #9ff5ee, #22e4d9 40%, #ff3ea5); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(34, 228, 217, .55)); }
.bi-final-market p { color: #bff8f3; }
@media (max-width: 760px) {
  .bm-stalls { bottom: 18%; gap: 3%; }
  .bm-awning { height: 44px; }
  .bm-counter { gap: 6%; padding: 9% 6%; }
  .bm-tag { display: none; }
  .bm-bulbs { top: 34%; } .bm-bulbs i { width: 8px; height: 11px; }
  .bi-final-market h3 { font-size: 12vw; letter-spacing: 2px; }
  .bi-final-market p { letter-spacing: 3px; font-size: 14px; }
}