/* Brawzo — gaming site. Art direction follows the Skill Masters app: Titan One, chunky pills, neon frames. */

:root {
  --ink: #1d0040;
  --ink-2: #2d0054;
  --plum: #3f176e;
  --violet: #9038a3;
  --lilac: #cc8cda;
  --pink: #ff34dd;
  --hot: #ff4fa3;
  --gold-1: #fff36b;
  --gold-2: #fec92d;
  --gold-3: #fba609;
  --mint-1: #44ffd7;
  --mint-2: #00d18f;
  --orange: #ff8000;
  --text: #ffffff;
  --text-2: #f3dcff;
  --font-game: "Titan One", "Baloo 2", sans-serif;
  --font-body: "Baloo 2", system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wrap: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ink); color: var(--text);
  font-family: var(--font-body); font-weight: 600; font-size: 17px; line-height: 1.5;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--gold-2); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(var(--wrap), calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--gold-2); color: var(--ink); text-decoration: none; }
.skip-link:focus { top: 16px; }

/* ── Page background: app stripes + stars ────────────── */
.page-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(255, 52, 221, 0.22), transparent 60%),
    radial-gradient(800px 600px at 90% 40%, rgba(68, 255, 215, 0.12), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(255, 128, 0, 0.16), transparent 60%),
    linear-gradient(180deg, #24004d 0 3px, transparent 3px 11.4px) 0 0 / 58px 11.4px,
    var(--ink);
}
.page-bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: color-dodge;
  background: url("assets/art/stars.png") 0 0 / 265px 375px repeat, url("assets/art/stars.png") 132px -112px / 265px 375px repeat;
  animation: stars-drift 60s linear infinite;
}
@keyframes stars-drift { to { background-position: 265px 375px, 397px 263px; } }

/* ── Titles ──────────────────────────────────────────── */
.gold-title {
  position: relative; display: inline-block; font-family: var(--font-game); font-weight: 400;
  line-height: 1.02; letter-spacing: -0.01em;
  color: var(--ink); -webkit-text-stroke: 10px var(--ink);
  filter: drop-shadow(0 5px 0 rgba(29, 0, 64, 0.85)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
/* Gold fill drawn on top of the dark outline. */
.gold-title::after {
  content: attr(data-text); position: absolute; inset: 0; -webkit-text-stroke: 0;
  background: var(--gold-fill, linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 48%, var(--gold-3) 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gold-title--pink { --gold-fill: linear-gradient(180deg, #ffd6fb 0%, #ff7ae6 45%, #e01fc0 100%); }
h2.gold-title { font-size: clamp(36px, 5vw, 64px); }

.ribbon {
  position: relative; display: inline-block; margin-bottom: 18px; padding: 8px 26px;
  font-family: var(--font-game); font-size: 16px; letter-spacing: 0.02em; color: #fff;
  background: linear-gradient(180deg, #ff7ae6, #c21fa6); border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 3px 4px rgba(255,255,255,.6), 0 5px 0 var(--ink);
  -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill;
  transform: rotate(-2deg);
}
.ribbon--gold { background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); color: var(--ink); -webkit-text-stroke: 0; }

.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto 70px; }
.sec-head p { margin-top: 14px; font-size: 22px; font-weight: 700; color: var(--text-2); }

/* ── Buttons (Skill Masters PlayButton) ──────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 7px; border-radius: 60px; text-decoration: none; cursor: pointer; border: 0;
  background: linear-gradient(180deg, var(--lilac) 0%, var(--violet) 100%);
  box-shadow: 0 5px 0 rgba(29, 0, 64, 0.9), 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 0 2px 1px #fff;
  transition: transform 0.35s var(--spring), filter 0.2s;
}
.btn > span {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-width: 150px; height: 56px; padding: 0 30px; border-radius: 50px; border: 1px solid #000;
  font-family: var(--font-game); font-size: 22px; white-space: nowrap; color: #fff;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  background: linear-gradient(0deg, var(--mint-2) 0%, var(--mint-1) 100%);
  box-shadow: 0 0 8px 0 #fff, inset 0 0 0 2px var(--ink), inset 0 0 3px 4px #fff;
}
.btn > span::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.4; mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(0deg, #24004d 0 1.8px, transparent 1.8px 6.84px);
}
.btn > span::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-20deg); animation: shine 3.6s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.btn:hover { transform: translateY(-4px) scale(1.04); filter: brightness(1.06); }
.btn:active { transform: translateY(2px) scale(0.97); }
.btn--pink > span { background: linear-gradient(180deg, #f7d5fe 0%, #c854e3 100%); color: var(--ink); -webkit-text-stroke: 0; }
.btn--pink > span::after { display: none; }
.btn--sm > span { height: 42px; min-width: 0; padding: 0 20px; font-size: 17px; -webkit-text-stroke-width: 2.5px; }
.btn--sm { padding: 5px; }

/* ── Header ──────────────────────────────────────────── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background 0.3s, box-shadow 0.3s; }
.site-header.is-scrolled { background: rgba(29, 0, 64, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 0 rgba(0,0,0,.25), 0 1px 0 rgba(204,140,218,.3); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 4px 0 var(--ink)); transition: transform 0.5s var(--spring); }
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.1); }
.brand__word { font-family: var(--font-game); font-size: 28px; letter-spacing: 0.02em; color: var(--gold-2); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; filter: drop-shadow(0 3px 0 var(--ink)); }
.nav__links { display: flex; gap: 6px; }
.nav__links a {
  padding: 8px 18px; border-radius: 40px; text-decoration: none; font-family: var(--font-game); font-size: 17px; color: #fff;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; transition: transform 0.3s var(--spring), background 0.2s;
}
.nav__links a:hover { transform: translateY(-2px) rotate(-2deg); background: rgba(255,255,255,.08); }
.nav__links a.is-active { color: var(--gold-2); }
.menu-btn {
  display: none; position: relative; width: 48px; height: 48px; border-radius: 46px; border: 2px solid #000; cursor: pointer;
  background: linear-gradient(180deg, #ecaafb 0%, #ae30cb 100%); box-shadow: inset 0 0 2px #fff, 0 4px 0 var(--ink);
}
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 3px; border-radius: 3px; background: #fff; transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
.menu-btn span:nth-child(1) { top: 18px; }
.menu-btn span:nth-child(2) { top: 26px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

/* ── Hero stage ──────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 150px 0 120px; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; isolation: isolate; }
.hero__rays {
  position: absolute; left: 50%; top: 52%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; z-index: -2;
  background: repeating-conic-gradient(from 0deg, rgba(255, 122, 230, 0.16) 0deg 7deg, transparent 7deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 45%); mask-image: radial-gradient(circle, #000 8%, transparent 45%);
  animation: spin 80s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero__spots { position: absolute; left: 50%; top: -40px; width: min(1400px, 140%); transform: translateX(-50%); z-index: -1; opacity: 0.85; mix-blend-mode: screen; animation: spot-sway 7s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes spot-sway { from { transform: translateX(-50%) rotate(-2deg); } to { transform: translateX(-50%) rotate(2deg); } }
.curtain { position: absolute; top: 0; width: clamp(140px, 19vw, 300px); height: auto; z-index: 2; pointer-events: none; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
.curtain--l { left: 0; transform: scaleX(-1); animation: curtain-l 9s ease-in-out infinite; transform-origin: 50% 0; }
.curtain--r { right: 0; animation: curtain-r 9s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes curtain-l { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) skewX(2deg); } }
@keyframes curtain-r { 50% { transform: skewX(2deg); } }

.bulbs { position: absolute; pointer-events: none; }
.bulbs--top { left: 0; right: 0; top: 84px; height: 18px; z-index: 1; }
.bulbs::before, .bulbs::after { content: ""; position: absolute; inset: 0; }
.bulbs--top::before { background: radial-gradient(circle, #fffbd6 0 3px, #ffd23a 4px, rgba(255,179,0,0) 8px) 0 50% / 36px 18px repeat-x; animation: bulb-a 1.2s steps(1) infinite; }
.bulbs--top::after { background: radial-gradient(circle, #fffbd6 0 3px, #ffd23a 4px, rgba(255,179,0,0) 8px) 18px 50% / 36px 18px repeat-x; animation: bulb-b 1.2s steps(1) infinite; }
@keyframes bulb-a { 0% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes bulb-b { 0% { opacity: 0.25; } 50% { opacity: 1; } }

.confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -30px; width: var(--w, 10px); height: var(--h, 16px); border-radius: 3px;
  background: var(--c, var(--gold-2)); opacity: 0.9;
  animation: fall var(--t, 9s) linear infinite; animation-delay: var(--dl, 0s);
}
@keyframes fall {
  0% { transform: translate3d(0, -40px, 0) rotate(0deg); }
  100% { transform: translate3d(var(--dx, 60px), 110vh, 0) rotate(var(--rot, 540deg)); }
}

.floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.floater {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: auto;
  translate: var(--px, 0) var(--py, 0); transition: translate 0.6s var(--ease);
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.45));
  animation: bob 6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-22px) rotate(calc(var(--r, 0deg) * -1)); }
}
.pcard {
  aspect-ratio: 5 / 7; border-radius: 10px; display: block; color: #5b04a8; font-family: var(--font-game);
  background: linear-gradient(0deg, #b1b3ff, #eafffb); box-shadow: inset 0 0 0 3px #fff;
}
.pcard b { position: absolute; left: 12%; top: 8%; font-size: calc(var(--s) * 0.34); line-height: 1; font-weight: 400; }
.pcard i { position: absolute; right: 12%; bottom: 6%; font-style: normal; font-size: calc(var(--s) * 0.5); line-height: 1; }
.pcard--red { color: #d70820; }

.hero__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__pill {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; margin-bottom: 22px; border-radius: 40px;
  background: rgba(29, 0, 64, 0.75); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 4px 0 rgba(0,0,0,.3);
  font-family: var(--font-game); font-size: 16px; color: var(--gold-2);
}
.avatars { display: flex; }
.avatars img { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--violet); margin-left: -10px; background: var(--ink); }
.avatars img:first-child { margin-left: 0; }
.hero__title { display: flex; flex-direction: column; align-items: center; font-size: clamp(48px, 8.4vw, 118px); }
.hero__title .gold-title { font-size: inherit; }
.hero__title .gold-title--pink { margin-top: -4px; animation: wiggle 4s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) scale(1.03); } }
.hero__lede { max-width: 600px; margin: 24px auto 34px; font-size: 21px; font-weight: 600; color: var(--text-2); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.hero__lede strong { color: #fff; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }

.lineup { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 3vw, 48px); margin-top: 54px; padding-bottom: 26px; }
.lineup__item { position: relative; z-index: 1; display: block; width: clamp(110px, 16vw, 200px); animation: lineup-bob 3s ease-in-out infinite; animation-delay: var(--b, 0s); transition: transform 0.4s var(--spring); }
.lineup__item--big { width: clamp(130px, 19vw, 240px); }
.lineup__item img, .lineup__item svg { width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)); }
.lineup__item:hover { transform: scale(1.12) rotate(-4deg); animation-play-state: paused; }
@keyframes lineup-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
.lineup__floor { position: absolute; left: 50%; bottom: 0; width: 110%; height: 60px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 210, 58, 0.55), rgba(255, 52, 221, 0.25) 45%, transparent 70%); filter: blur(6px); }

.wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 90px; z-index: 3; }
.wave path { fill: #2a0757; }

/* ── Pop-in reveal ───────────────────────────────────── */
.pop, .reveal { opacity: 0; transform: translateY(40px) scale(0.92); transition: opacity 0.7s var(--ease), transform 0.9s var(--spring); transition-delay: var(--d, 0ms); }
.pop.in, .reveal.in { opacity: 1; transform: none; }

/* ── Games ───────────────────────────────────────────── */
.games { position: relative; overflow-x: clip; padding: 90px 0 110px; background: linear-gradient(180deg, #2a0757, transparent 400px); }
.games__list { display: grid; gap: 56px; }
.game {
  --c1: #470047; --c2: #30001d; --edge: #ffbcf3; --glow: #ff007d; --base: #74004c;
  position: relative; display: grid; grid-template-columns: 1fr 1.05fr; border-radius: 40px; isolation: isolate;
  border: 3px solid var(--edge);
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 0 14px var(--glow), 0 0 4px #fff, 0 12px 0 var(--base), 0 30px 60px rgba(0,0,0,.45);
  transition: transform 0.5s var(--spring);
}
.game::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 14px 3px var(--glow); }
.game:hover { transform: translateY(-8px) rotate(-0.4deg); }
.game--ludo { --c1: #751200; --c2: #4e0000; --edge: #fff9bc; --glow: #ff8000; --base: #c53e00; }
.game--sol { --c1: #0b4c66; --c2: #04263a; --edge: #bcffec; --glow: #00e1ff; --base: #005574; }
.game--reverse .game__info { order: 2; }
.game--reverse .game__stage { order: 1; }

.game__info { position: relative; padding: 56px 56px 60px; display: flex; flex-direction: column; align-items: flex-start; }
.game__art {
  width: 210px; height: auto; margin: -110px 0 6px -20px; filter: drop-shadow(0 20px 20px rgba(0,0,0,.5));
  animation: art-float 4.5s ease-in-out infinite; transition: transform 0.5s var(--spring);
}
.game--reverse .game__art { animation-delay: -1.5s; }
.game--sol .game__art { animation-delay: -3s; }
.game__art--logo { aspect-ratio: 1; }
.game:hover .game__art { transform: scale(1.08) rotate(-6deg); }
@keyframes art-float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -14px; rotate: 3deg; } }
.badge { display: inline-block; padding: 4px 14px; margin-bottom: 10px; border-radius: 30px; font-family: var(--font-game); font-size: 14px; letter-spacing: 0.04em; box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink); }
.badge--live { color: var(--ink); background: linear-gradient(180deg, var(--mint-1), var(--mint-2)); animation: live 1.6s ease-in-out infinite; }
.badge--new { color: var(--ink); background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { transform: scale(1.1); } }
.game__title {
  font-family: var(--font-game); font-weight: 400; font-size: clamp(44px, 5vw, 66px); line-height: 1;
  color: #fff; -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; filter: drop-shadow(0 5px 0 var(--ink));
}
.game__line { margin: 16px 0 20px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; line-height: 1.2; color: var(--gold-2); text-shadow: 0 3px 0 var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 5px 14px; border-radius: 30px; font-size: 15px; font-weight: 700; color: #fff; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); }

.game__stage {
  position: relative; display: grid; place-items: center; min-height: 480px; padding: 60px 40px; overflow: hidden;
  border-radius: 0 37px 37px 0; perspective: 1200px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.16), transparent 62%);
}
.game--reverse .game__stage { border-radius: 37px 0 0 37px; }
.stage__rays {
  position: absolute; left: 50%; top: 50%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.09) 0deg 8deg, transparent 8deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 5%, transparent 40%); mask-image: radial-gradient(circle, #000 5%, transparent 40%);
  animation: spin 50s linear infinite;
}
.game--reverse .stage__rays { animation-direction: reverse; }
.turn-badge {
  position: absolute; top: 22px; left: 50%; z-index: 4; transform: translateX(-50%);
  padding: 6px 18px; border-radius: 30px; white-space: nowrap;
  font-family: var(--font-game); font-size: 15px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  background: linear-gradient(180deg, #ecaafb, #ae30cb); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 4px 2px rgba(255,255,255,.7), 0 4px 0 var(--ink);
}
.tilt { position: relative; z-index: 1; transition: transform 0.6s var(--ease); transform-style: preserve-3d; will-change: transform; }

/* ── Players ─────────────────────────────────────────── */
.crowd { position: relative; padding: 40px 0 120px; }
.crowd__inner {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px;
  padding: 56px 64px; border-radius: 40px; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #ff4fa3 0%, #9038a3 45%, #3f176e 100%);
  border: 3px solid #ffd6fb; box-shadow: 0 0 14px #ff34dd, 0 12px 0 #5a0a5e, 0 30px 60px rgba(0,0,0,.45);
}
.crowd__inner::before {
  content: ""; position: absolute; left: 25%; top: 50%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; z-index: -1;
  background: repeating-conic-gradient(rgba(255,255,255,.1) 0 6deg, transparent 6deg 14deg);
  -webkit-mask-image: radial-gradient(circle, #000 6%, transparent 38%); mask-image: radial-gradient(circle, #000 6%, transparent 38%);
  animation: spin 60s linear infinite;
}
.crowd__num .gold-title { font-size: clamp(64px, 9vw, 120px); }
.crowd__label { font-family: var(--font-game); font-size: clamp(26px, 3vw, 38px); color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; margin-top: 4px; }
.crowd__sub { margin: 10px 0 28px; font-size: 21px; color: #fff; }
.crowd__sub strong { color: var(--gold-1); }
.crowd__art { position: relative; height: 420px; }
.crowd__world { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; border-radius: 28px; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink); transform: rotate(2deg); }
.bubble {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 40px;
  background: #fff; color: var(--ink); font-family: var(--font-game); font-size: 18px;
  box-shadow: 0 5px 0 var(--ink), 0 14px 24px rgba(0,0,0,.35);
  animation: bubble-bob 4s ease-in-out infinite;
}
.bubble img { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--violet); }
.bubble::after { content: ""; position: absolute; left: 30px; bottom: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.bubble--1 { left: -26px; top: 30px; }
.bubble--2 { right: -14px; top: 150px; animation-delay: -1.3s; }
.bubble--3 { left: 30px; bottom: 34px; animation-delay: -2.6s; }
.crowd__emote { position: absolute; right: 24px; bottom: -20px; width: 110px; animation: bubble-bob 3s ease-in-out infinite; filter: drop-shadow(0 10px 12px rgba(0,0,0,.4)); }
@keyframes bubble-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }

/* ── Platform ────────────────────────────────────────── */
.platform { position: relative; padding: 60px 0 120px; overflow-x: clip; }
.platform__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; }
.platform__visual { position: relative; }
.platform__rays {
  position: absolute; left: 50%; top: 50%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; z-index: -1;
  background: repeating-conic-gradient(rgba(254, 201, 45, 0.16) 0 7deg, transparent 7deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 45%); mask-image: radial-gradient(circle, #000 8%, transparent 45%);
  animation: spin 70s linear infinite reverse;
}
.speech {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 30px;
  background: #fff; color: var(--ink); font-family: var(--font-game); font-size: 16px; white-space: nowrap;
  box-shadow: 0 5px 0 var(--ink), 0 14px 24px rgba(0,0,0,.35); animation: bubble-bob 4.2s ease-in-out infinite;
}
.speech img { width: 40px; height: 40px; object-fit: contain; }
.speech b { font-weight: 400; }
.speech--1 { top: 10%; left: -4%; }
.speech--2 { top: 48%; right: -6%; animation-delay: -1.4s; }
.speech--3 { bottom: 14%; left: -2%; animation-delay: -2.8s; }
.platform__logo { width: 220px; margin-bottom: 18px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); animation: art-float 5s ease-in-out infinite; }
.platform__lede { margin: 16px 0 34px; font-size: 21px; color: var(--text-2); max-width: 520px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tile {
  --t1: #00d18f; --t2: #006f6a;
  position: relative; padding: 22px 22px 22px 108px; min-height: 112px; border-radius: 24px; text-align: left;
  background: linear-gradient(160deg, var(--t1), var(--t2)); border: 3px solid rgba(255,255,255,.8);
  box-shadow: 0 7px 0 var(--ink), 0 18px 30px rgba(0,0,0,.35);
  transition: transform 0.45s var(--spring);
}
.tile:hover { transform: translateY(-6px) rotate(-1.5deg) scale(1.02); }
.tile img { position: absolute; left: 10px; top: 50%; width: 92px; transform: translateY(-50%); filter: drop-shadow(0 8px 8px rgba(0,0,0,.4)); transition: transform 0.45s var(--spring); }
.tile:hover img { transform: translateY(-50%) scale(1.15) rotate(-10deg); }
.tile h4 { font-family: var(--font-game); font-weight: 400; font-size: 20px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; margin-bottom: 4px; }
.tile p { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; }
.tile--pink { --t1: #ff4fa3; --t2: #9b0f78; }
.tile--gold { --t1: #fec92d; --t2: #d86a00; }
.tile--violet { --t1: #a45cff; --t2: #4b1aa3; }

/* ── Contact stage card ──────────────────────────────── */
.contact { padding: 40px 0 120px; overflow-x: clip; }
.stage-card {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 150px 40px 70px; text-align: center; border-radius: 40px; isolation: isolate; margin-top: 90px;
  background: radial-gradient(circle at 50% 0%, #b02aa0 0%, #4b0f74 55%, #24004d 100%);
  border: 3px solid var(--gold-2); box-shadow: 0 0 16px rgba(254,201,45,.7), 0 12px 0 #8a4a00, 0 30px 60px rgba(0,0,0,.45);
}
.stage-card .gold-title { font-size: clamp(34px, 4.6vw, 60px); max-width: 880px; }
.stage-card p { max-width: 560px; margin: 18px auto 32px; font-size: 21px; color: var(--text-2); }
.stage-card__star { position: absolute; left: 50%; top: -110px; width: 250px; transform: translateX(-50%); filter: drop-shadow(0 16px 20px rgba(0,0,0,.5)); animation: star-pulse 3s ease-in-out infinite; }
@keyframes star-pulse { 0%, 100% { transform: translateX(-50%) rotate(-4deg) scale(1); } 50% { transform: translateX(-50%) rotate(4deg) scale(1.06); } }
.trumpet { position: absolute; top: 20px; width: 190px; filter: drop-shadow(0 14px 16px rgba(0,0,0,.45)); }
.trumpet--l { left: -40px; transform: scaleX(-1) rotate(-12deg); animation: toot-l 2.4s ease-in-out infinite; }
.trumpet--r { right: -40px; transform: rotate(-12deg); animation: toot-r 2.4s ease-in-out infinite; }
@keyframes toot-l { 0%, 100% { transform: scaleX(-1) rotate(-12deg); } 50% { transform: scaleX(-1) rotate(-4deg) scale(1.08); } }
@keyframes toot-r { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-4deg) scale(1.08); } }
.stage-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.stage-card__mail { display: inline-block; margin-top: 22px; color: var(--gold-1); font-weight: 700; text-decoration: none; }
.stage-card__mail:hover { text-decoration: underline; }
.bulbs--frame { inset: 10px; border-radius: 30px; }
.bulbs--frame::before, .bulbs--frame::after {
  border-radius: inherit;
  background:
    radial-gradient(circle, #fffbd6 0 3px, #ffd23a 4px, rgba(255,179,0,0) 7px) 0 0 / 34px 14px repeat-x,
    radial-gradient(circle, #fffbd6 0 3px, #ffd23a 4px, rgba(255,179,0,0) 7px) 0 100% / 34px 14px repeat-x;
}
.bulbs--frame::before { animation: bulb-a 1.2s steps(1) infinite; }
.bulbs--frame::after { background-position: 17px 0, 17px 100%; animation: bulb-b 1.2s steps(1) infinite; }

/* ── Footer ──────────────────────────────────────────── */
.site-footer { padding: 50px 0 40px; background: #12002a; box-shadow: 0 -6px 0 #2d0054; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__links a { text-decoration: none; font-weight: 700; color: var(--text-2); transition: color 0.2s; }
.footer__links a:hover { color: var(--gold-2); }
.footer__legal { width: 100%; font-size: 14px; color: rgba(243, 220, 255, 0.55); }

/* ── Kept components (game boards, Solitaire screen, lobby phone) ── */
/* Backgammon board */
.bgm-board { position: relative; width: 100%; max-width: 520px; aspect-ratio: 3216 / 2220; }
.bgm-board > img { width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.bgm-checker {
  position: absolute; width: 6.4%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: left 0.7s var(--ease), top 0.7s var(--ease);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}
.bgm-checker.is-moving { z-index: 5; filter: drop-shadow(0 10px 12px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255, 79, 216, 0.8)); }
.bgm-checker img { width: 100%; height: 100%; }
.dice {
  position: absolute; left: 74%; top: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 8px; z-index: 4;
}
.die {
  width: 34px; height: 34px; border-radius: 9px; background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 -3px 0 rgba(0,0,0,.12);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 5px;
}
.die i { width: 6px; height: 6px; border-radius: 50%; background: #2a1050; place-self: center; opacity: 0; }
.die.roll { animation: die-roll 0.6s var(--ease); }
@keyframes die-roll {
  0% { transform: rotate(0) scale(1); }
  40% { transform: rotate(200deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Ludo board */
.ludo-board { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; }
.ludo-board > img { width: 100%; height: 100%; border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.ludo-token {
  position: absolute; width: 6.6%; aspect-ratio: 1; transform: translate(-50%, -60%);
  transition: left 0.28s var(--ease), top 0.28s var(--ease);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.4));
}
.ludo-token.hop { animation: hop 0.28s var(--ease); }
@keyframes hop {
  50% { transform: translate(-50%, -110%); }
}
.ludo-token img { width: 100%; height: 100%; }

/* Solitaire game screen (Figma 6288:1510), drawn at design size 402 × 874 and scaled to fit. */
.sg-device {
  --sg-w: 260px;
  position: relative; width: var(--sg-w); aspect-ratio: 402 / 874; flex: none;
  border-radius: 20px;
  box-shadow: 0 0 0 6px #1a0b38, 0 0 0 7px rgba(255,255,255,.12), 0 30px 70px rgba(0,0,0,.6);
}
.sg-screen {
  position: absolute; left: 0; top: 0; width: 402px; height: 874px;
  border-radius: 20px; overflow: hidden;
  transform: scale(var(--sg-scale, 0.6468)); transform-origin: 0 0;
  font-family: "Titan One", sans-serif; letter-spacing: -0.3px; line-height: 1.1;
  background: #0b2a3a;
}
.sg-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.sg-vignette {
  position: absolute; inset: 0; border-radius: 20px;
  background:
    radial-gradient(312.5px 679.42px at 201px 437px, rgba(7, 2, 40, 0) 67.129%, rgba(7, 2, 40, 1) 100%),
    linear-gradient(180deg, rgba(97, 0, 74, 0.2) 0%, rgba(0, 0, 0, 0) 35.641%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(97, 0, 74, 0.2) 100%);
}

.sg-btn {
  position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 16px; white-space: nowrap;
}
.sg-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.sg-btn--icon, .sg-btn--undo { background: linear-gradient(180deg, #f7d5fe, #c854e3); border-radius: 46px; }
.sg-btn--icon::after, .sg-btn--undo::after { box-shadow: inset 0 0 4px 2px #fff, inset 0 0 0 2px #000; }
.sg-btn img { position: relative; display: block; }
.sg-settings { right: 20px; top: 60px; padding: 8px; }

.sg-stats { position: absolute; left: 12px; top: 111px; width: 378px; display: flex; justify-content: space-between; }
.sg-pill {
  position: relative; width: 104px; height: 48px; padding: 4px; border-radius: 50px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #ecaafb, #ae30cb);
  box-shadow: inset 0 0 4px 0 #fff;
  filter: drop-shadow(0 -1px 1px rgba(46, 46, 110, 0.2));
}
.sg-pill__well {
  flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 24px;
  background: #2d0054; box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.85);
  color: #fff; font-size: 16px;
}
.sg-pill__well--time { font-family: "Baloo 2", sans-serif; font-weight: 600; letter-spacing: -0.2px; line-height: 1.2; }
.sg-pill__label {
  position: absolute; left: 50%; bottom: 3.5px; transform: translate(-50%, 50%);
  color: #ffea00; font-size: 16px; line-height: 1;
}

.sg-board {
  position: absolute; left: 12px; top: 200px; padding: 5px; border-radius: 10px;
  background: linear-gradient(180deg, #ecaafb, #ae30cb);
  box-shadow: inset 0 0 2px 0 #fff, inset 0 0 2px 0 #fff;
  filter: drop-shadow(0 3px 4.5px rgba(0, 45, 74, 0.4)) drop-shadow(0 3px 1px rgba(0, 45, 74, 0.4));
}
.sg-board__well {
  position: relative; display: flex; gap: 4px; padding: 6px; border-radius: 8px; overflow: hidden;
  background: #2d0054;
}
.sg-board__well::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(29, 0, 64, 0.2), inset 0 0 0 1px #ae30cb, inset 0 0 0 1px #fff;
}
.sg-slot {
  position: relative; width: 46.984px; height: 64px; border-radius: 4px;
  background: rgba(174, 135, 222, 0.2); border: 0.889px solid rgba(174, 135, 222, 0.4);
  display: grid; place-items: center;
}
.sg-slot span { font-size: 37.33px; line-height: 1; letter-spacing: -2px; color: rgba(174, 135, 222, 0.4); transform: translate(-0.38px, 2px); }
.sg-lights { position: absolute; display: block; }
.sg-lights img { position: absolute; display: block; max-width: none; }
.sg-lights--left, .sg-lights--right { top: 0; width: 5px; height: 86px; }
.sg-lights--left { left: 0; }
.sg-lights--right { right: -0.06px; }
.sg-lights--left img, .sg-lights--right img { top: 0; left: -3px; width: 11px; height: 86px; }
.sg-lights--top, .sg-lights--bottom { left: 0; width: 222px; height: 5px; }
.sg-lights--top { top: 0; }
.sg-lights--bottom { bottom: 0; }
.sg-lights--top > span, .sg-lights--bottom > span {
  position: absolute; left: 108.5px; top: -108.5px; width: 5px; height: 222px; transform: rotate(-90deg);
}
.sg-lights--top img, .sg-lights--bottom img { top: 0; left: -3px; width: 11px; height: 222px; }

.sg-stock {
  position: absolute; left: 337.143px; top: 207px; width: 52.857px; height: 72px;
  display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate;
  box-shadow: 0 3px 9px 0 rgba(0, 45, 74, 0.4), 0 3px 2px 0 rgba(89, 4, 108, 0.4);
}
.sg-stock img { width: 52.857px; height: 72px; flex: none; margin-bottom: -71px; position: relative; }
.sg-stock img:last-child { margin-bottom: 0; }
.sg-stock img:nth-child(1) { z-index: 6; } .sg-stock img:nth-child(2) { z-index: 5; } .sg-stock img:nth-child(3) { z-index: 4; }
.sg-stock img:nth-child(4) { z-index: 3; } .sg-stock img:nth-child(5) { z-index: 2; } .sg-stock img:nth-child(6) { z-index: 1; }

.sg-cards { position: absolute; inset: 0; filter: drop-shadow(0 3px 9px rgba(0, 45, 74, 0.4)) drop-shadow(0 3px 2px #002d4a); }
.sg-card {
  position: absolute; left: 0; top: 0; width: 52.857px; height: 72px;
  transform-origin: 0 0; perspective: 600px;
  transition: left 0.6s var(--ease), top 0.6s var(--ease), transform 0.6s var(--ease);
}
.sg-card.is-moving { z-index: 100 !important; }
.sg-card__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.5s var(--ease); }
.sg-card.is-up .sg-card__inner { transform: rotateY(180deg); }
.sg-card__back, .sg-card__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sg-card__back img { position: absolute; top: -3px; left: -2px; width: 56.857px; height: 76px; max-width: none; display: block; }
.sg-card__face {
  transform: rotateY(180deg); border-radius: 4px; overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), linear-gradient(0deg, #7d81ff 0%, #dcfff8 100%);
  box-shadow: inset 0 0 3px 0 #fff;
  filter: drop-shadow(0 -1px 1px rgba(46, 46, 110, 0.2));
  color: #5b04a8;
}
.sg-card--red .sg-card__face { color: #d70820; }
.sg-card__shine { position: absolute; left: calc(50% + 0.07px); top: -61px; width: 175px; height: 101px; transform: translateX(-50%); display: block; max-width: none; }
.sg-card__big { position: absolute; left: 26px; top: calc(50% + 4px); transform: translate(-50%, -42%); font-size: 42px; line-height: 1; letter-spacing: -2px; white-space: nowrap; }
.sg-card__small { position: absolute; left: 2px; top: calc(50% - 26.5px); transform: translateY(-42%); font-size: 16px; line-height: 1; letter-spacing: -0.3px; white-space: nowrap; }
.sg-card__suit { position: absolute; right: 2.04px; top: 3px; width: 11.817px; height: 12px; display: block; }

.sg-actions {
  position: absolute; left: 50%; top: 782px; transform: translateX(-50%);
  display: flex; gap: 16px; align-items: center;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.5));
}
.sg-actions .sg-btn { position: relative; }
.sg-btn--submit {
  height: 52px; padding: 0 32px; border-radius: 40px; color: #00373a;
  background: linear-gradient(0deg, #00d18f, #96ffde);
}
.sg-btn--submit::after { box-shadow: inset 0 0 0 2px #000, inset 0 0 3px 4px #fff; }
.sg-btn--undo { height: 40px; padding: 0 24px 0 20px; gap: 4px; color: #1e0024; }
.sg-undo-icon { position: relative; width: 24px; height: 24px; flex: none; }
.sg-undo-icon img { position: absolute; left: 4.204px; top: 1.989px; width: 15.798px; height: 20.002px; max-width: none; }



.device {
  position: relative; width: min(320px, 80%); margin: 0 auto; aspect-ratio: 402 / 874;
  border-radius: 44px; padding: 10px; box-sizing: content-box;
  background: linear-gradient(160deg, #2a1656, #0d0620);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 50px 100px rgba(0,0,0,.6), 0 0 120px rgba(164, 92, 255, 0.35);
  animation: device-float 8s ease-in-out infinite;
}

/* Skill Masters lobby — mirrors apps/client LobbyPage + AppShell chrome at the 402 × 874 design size. */
.lb-screen {
  position: absolute; left: 10px; top: 10px; width: 402px; height: 874px;
  border-radius: calc(36px / var(--lb-scale, 0.796)); overflow: hidden; isolation: isolate;
  transform: scale(var(--lb-scale, 0.796)); transform-origin: 0 0;
  background: #1d0040; font-family: "Titan One", sans-serif;
}
.lb-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-header {
  position: absolute; left: 20.1px; width: 361.8px; top: 0; height: 48px; padding-top: 16px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; z-index: 3;
}
.lb-avatar {
  width: 48px; height: 48px; padding: 6px; border-radius: 999px; box-sizing: border-box; flex: none;
  background: linear-gradient(180deg, #cc8cda 0%, #9038a3 100%);
  box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.75);
}
.lb-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
.lb-menu {
  position: relative; width: 40px; height: 40px; box-sizing: border-box; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 46px; border: 2px solid #000;
  background: linear-gradient(180deg, #ecaafb 0%, #ae30cb 100%);
  box-shadow: inset 0 0 2px 0 #fff;
}
.lb-menu svg { display: block; }

.lb-content {
  position: absolute; inset: 0; padding: 80px 22px 0;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.lb-logo-row { display: flex; gap: 16px; align-items: center; justify-content: center; }
.lb-logo-row img { flex: none; display: block; }
.lb-logo { object-fit: contain; }

.lb-card { position: relative; width: 358px; height: 326px; flex: none; }
.lb-card__frame {
  position: absolute; left: 0; right: 0; top: 0; height: 286px; box-sizing: border-box;
  border-radius: 30px; border: 2px solid; overflow: hidden;
}
.lb-card__frame::before, .lb-card__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.lb-card__frame::before {
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 358 286' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.4'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(22.145 0 0 18.103 179 143)'><stop stop-color='rgba(255,255,255,1)' offset='0.50481'/><stop stop-color='rgba(255,255,255,0)' offset='0.57692'/><stop stop-color='rgba(255,255,255,0)' offset='0.69712'/><stop stop-color='rgba(255,255,255,1)' offset='0.8'/><stop stop-color='rgba(255,255,255,0)' offset='0.87981'/></radialGradient></defs></svg>");
}
.lb-card--backgammon .lb-card__frame {
  border-color: #ffbcf3; background: linear-gradient(0deg, #30001d 0%, #470047 100%);
  box-shadow: 0 0 8px 0 #ff007d, 0 0 8px 0 #fff, 0 8px 0 0 #74004c;
}
.lb-card--backgammon .lb-card__frame::after { box-shadow: inset 0 0 9px 2px #ff34dd, inset 0 0 3px 4px #832d0e; }
.lb-card--ludo .lb-card__frame {
  border-color: #fff9bc; background: linear-gradient(180deg, #751200 0%, #4e0000 100%);
  box-shadow: 0 0 8px 0 #ff8000, 0 0 8px 0 #fff, 0 8px 0 0 #c53e00;
}
.lb-card--ludo .lb-card__frame::after { box-shadow: inset 0 0 9px 2px #ffc234, inset 0 0 3px 4px #200e83; }
.lb-card__logo { position: absolute; left: 50%; top: 10px; width: 222px; height: 222px; transform: translateX(-50%); object-fit: contain; }
.lb-card__lights { position: absolute; top: 210px; width: 6px; height: 34px; overflow: hidden; }
.lb-card__lights--l { left: 8px; }
.lb-card__lights--r { right: 8px; }
.lb-card__lights img { position: absolute; left: -11px; top: -11px; width: 28px; height: 56px; max-width: none; }
.lb-card__dots { position: absolute; top: 126px; display: flex; flex-direction: column; gap: 8px; }
.lb-card__dots--l { left: 8px; }
.lb-card__dots--r { right: 8px; }
.lb-card__dots i { width: 6px; height: 6px; border-radius: 50%; background: #fff; filter: blur(0.5px); }
.lb-card--backgammon .lb-card__dots i { box-shadow: 0 0 4px 0 #f0f, 0 0 11px 0 #ff00d9; }
.lb-card--ludo .lb-card__dots i { box-shadow: 0 0 4px 0 #0df, 0 0 11px 0 #00ffe5; }

.lb-play { position: absolute; left: 50%; top: 284px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.lb-play__knob { position: absolute; top: 50%; width: 33.941px; height: 33.941px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; }
.lb-play__knob::before {
  content: ""; width: 24px; height: 24px; border-radius: 3px; transform: rotate(45deg);
  background: linear-gradient(180deg, #cc8cda 0%, #9038a3 100%);
  box-shadow: 0 4px 1px 0 rgba(0, 0, 0, 0.25), inset 0 0 2px 1px #fff;
}
.lb-play__knob--l { left: -9.94px; }
.lb-play__knob--r { right: -10px; }
.lb-play__outer {
  position: relative; display: flex; padding: 8px; border-radius: 46px; overflow: hidden;
  background: linear-gradient(180deg, #cc8cda 0%, #9038a3 100%);
  box-shadow: 0 4px 1px 0 rgba(0, 0, 0, 0.25);
}
.lb-play__outer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 2px 1px #fff; pointer-events: none; }
.lb-play__inner {
  position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 140px; height: 55px; padding: 16px 32px; border-radius: 50px; border: 1px solid #000;
  background: linear-gradient(0deg, #00d18f 0%, #44ffd7 100%);
  box-shadow: 0 0 8px 0 #fff, 0 0 0 2px #1d0040 inset, 0 0 3px 4px #fff inset, 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.lb-play__inner::before {
  content: ""; position: absolute; inset: 0; border-radius: 50px; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, #24004d 0px, #24004d 1.8px, transparent 1.8px, transparent 6.84px);
  background-size: 34.8px 6.84px; opacity: 0.4; mix-blend-mode: overlay;
}
.lb-play__label {
  position: relative; font-size: 32px; line-height: 32.6px; color: #fff; white-space: nowrap;
  -webkit-text-stroke: 3px #1d0040; paint-order: stroke fill;
}

.lb-nav {
  position: absolute; left: 20.1px; width: 361.8px; bottom: 16px; height: 104px; z-index: 3;
  border-radius: 9999px; overflow: hidden;
  box-shadow: 0 0 10.5px rgba(3, 0, 16, 0.75), 0 10px 8px rgba(3, 0, 16, 0.75);
}
.lb-nav__bar { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.lb-nav__row { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.lb-nav__tab { position: relative; width: 72px; height: 72px; flex: none; display: flex; align-items: center; justify-content: center; }
.lb-nav__icon { position: relative; width: 56px; height: 56px; object-fit: contain; }
.lb-nav__icon--shop { width: 72px; height: 72px; }
.lb-nav__glow { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); }
.lb-nav__label {
  position: absolute; left: 50%; top: 61.5px; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: 16px; line-height: 12px; letter-spacing: -0.5px; color: #ffea00;
  -webkit-text-stroke: 2px #1d0040; paint-order: stroke fill;
  text-shadow: -1px -1px 0 #1d0040, 1px -1px 0 #1d0040, -1px 1px 0 #1d0040, 1px 1px 0 #1d0040;
}
.device::before {
  content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 20px; margin-left: -15%;
  border-radius: 20px; background: #05010c; z-index: 2;
}
@keyframes device-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-16px) rotate(1deg); }
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1080px) {
  .platform__grid { grid-template-columns: 1fr; gap: 80px; }
  .platform__copy { order: -1; text-align: center; }
  .platform__copy .platform__lede { margin-left: auto; margin-right: auto; }
  .platform__logo { margin: 0 auto 18px; }
}
@media (max-width: 920px) {
  .nav__links { display: none; }
  .menu-btn { display: block; }
  .nav__links.is-open {
    display: flex; flex-direction: column; position: absolute; top: 84px; left: 16px; right: 16px; padding: 14px; gap: 4px;
    border-radius: 24px; background: linear-gradient(180deg, #4b0f74, #24004d); border: 3px solid var(--lilac); box-shadow: 0 8px 0 var(--ink), 0 30px 60px rgba(0,0,0,.5);
  }
  .nav__links.is-open a { padding: 14px 16px; font-size: 22px; }
  .game, .game--reverse { grid-template-columns: 1fr; }
  .game--reverse .game__info { order: 1; }
  .game--reverse .game__stage { order: 2; }
  .game__stage, .game--reverse .game__stage { border-radius: 0 0 37px 37px; min-height: 0; padding: 80px 20px 40px; }
  .crowd__inner { grid-template-columns: 1fr; padding: 44px 28px; text-align: center; }
  .crowd__art { height: 340px; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  body { font-size: 16px; }
  .hero { padding: 120px 0 110px; }
  .bulbs--top { top: 76px; }
  .nav { height: 76px; }
  .brand__word { font-size: 24px; }
  .curtain { width: 110px; }
  .floater { width: calc(var(--s) * 0.6); }
  .hero__lede { font-size: 18px; }
  .btn > span { height: 50px; min-width: 0; padding: 0 22px; font-size: 19px; }
  .game__info { padding: 40px 24px 36px; }
  .game__art { width: 150px; margin-top: -80px; }
  .tiles { grid-template-columns: 1fr; }
  .crowd__art { height: 280px; }
  .bubble { font-size: 15px; }
  .bubble img { width: 38px; height: 38px; }
  .bubble--1 { left: -8px; }
  .bubble--2 { right: -8px; }
  .speech { display: none; }
  .stage-card { padding: 120px 20px 54px; }
  .stage-card__star { width: 190px; top: -86px; }
  .trumpet { width: 110px; top: 40px; }
  .trumpet--l { left: -24px; }
  .trumpet--r { right: -24px; }
  .die { width: 26px; height: 26px; padding: 4px; border-radius: 7px; }
  .die i { width: 4px; height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pop, .reveal { opacity: 1; transform: none; }
  .confetti { display: none; }
}