/* ================================================================ Games tab */
.gt { position: absolute; left: 0; top: 0; width: 1356px; height: 900px; background: #32256B; }
.gt-tile { position: absolute; width: 401px; height: 330px; border-radius: 40px; overflow: hidden; box-shadow: 0 10px 0 rgba(0, 0, 0, .18); transition: transform .15s; text-align: left; }
.gt-tile:active { transform: scale(.97); }
.gt-tile.wide { width: 826px; }
.gt-word-pinatas { left: 52px; top: 158px; }
.gt-hungry-cloud { left: 902px; top: 158px; }
.gt-party-time { left: 52px; top: 518px; height: 340px; }
.gt-monkey-business { left: 477px; top: 518px; height: 340px; }
.gt-space-trace { left: 902px; top: 518px; height: 340px; }
.gt-art { position: absolute; inset: 0; pointer-events: none; }
.gt-name { position: absolute; left: 32px; bottom: 22px; font-size: 40px; font-weight: 700; z-index: 2; text-shadow: 0 2px 0 rgba(255, 255, 255, .25); }
.gt-word-pinatas .gt-art { left: 330px; }
.gt-pin { position: absolute; }
.gt-hungry-cloud .gt-cloud { position: absolute; left: -10px; top: -6px; transform: scale(.95); transform-origin: 0 0; animation: gtFloat 3s ease-in-out infinite alternate; }
.gt-monkeys { position: absolute; right: -10px; top: -6px; }
.gt-space .st-s { position: absolute; right: -20px; top: -40px; transform: scale(.66); transform-origin: 100% 0; }
@keyframes gtFloat { from { transform: scale(.95) translateY(0); } to { transform: scale(.95) translateY(-12px); } }

/* ================================================================ shared game chrome (kit.mjs) */
.g-screen { background: #221750; overflow: hidden; }
.g-view { position: absolute; inset: 0; overflow: hidden; }
.g-back { position: absolute; left: 40px; top: 36px; width: 96px; height: 96px; display: grid; place-items: center; z-index: 30; }
.g-speaker { position: absolute; width: 112px; height: 112px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 6px 0 rgba(34, 23, 80, .18); z-index: 25; }
.g-speaker svg { width: 70px; height: 62px; }
.g-speaker:active { transform: scale(.95); }
.g-title h1 { margin: 0; font-size: 100px; line-height: 1; color: var(--ink); }
.g-title p { margin: 26px 0 44px; font-size: 36px; line-height: 1.35; font-weight: 600; color: var(--ink); opacity: .85; max-width: 640px; }
.g-title-art { position: absolute; left: 0; top: 0; width: 700px; height: 900px; }
.g-title-col { position: absolute; left: 720px; right: 110px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.g-play { align-self: flex-start; height: 112px; padding: 0 46px 0 56px; border-radius: 999px; background: #FFFFFF; color: var(--navy); font-size: 46px; font-weight: 700; display: inline-flex; align-items: center; gap: 20px; box-shadow: 0 8px 0 rgba(34, 23, 80, .2); }
.g-play.pressed, .g-play:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(34, 23, 80, .2); }
.g-pack { position: absolute; right: 50px; bottom: 44px; display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 18px; border-radius: 28px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 0 rgba(34, 23, 80, .15); }
.g-pack-text { font-size: 28px; font-weight: 700; color: var(--navy); max-width: 190px; line-height: 1.2; }
.g-pack-star { margin: -30px -20px -30px 0; }

/* level select */
.g-levels .g-lv-art { position: absolute; left: 30px; top: 260px; }
.g-lv-title { position: absolute; left: 60px; top: 150px; margin: 0; font-size: 78px; line-height: 1; max-width: 560px; }
.g-lv-scroll { position: absolute; left: 700px; right: 60px; top: 60px; bottom: 0; overflow-y: auto; scrollbar-width: none; padding: 30px 20px 80px; touch-action: pan-y; }
.g-lv-scroll::-webkit-scrollbar { display: none; }
.g-lv-grid { display: grid; grid-template-columns: repeat(3, 230px); gap: 44px; justify-content: center; }
.g-lv-tile { position: relative; width: 230px; height: 230px; border-radius: 40px; background: #FFFFFF; box-shadow: 0 10px 0 var(--edge, rgba(34, 23, 80, .2)); display: grid; place-items: center; }
.g-lv-tile b { font-size: 92px; color: var(--navy); line-height: 1; margin-top: -24px; }
.g-lv-tile:active { transform: translateY(4px); }
.g-lv-star, .g-lv-slot { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; place-items: center; }
.g-lv-slot { width: 70px; height: 70px; border-radius: 50%; border: 5px dashed #CFCBDD; }

/* effects */
.g-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 80; }
.g-confetti i { position: absolute; top: -40px; animation: gFall linear forwards; }
.g-confetti i.dash { width: 30px; height: 11px; border-radius: 6px; }
.g-confetti i.dot { width: 15px; height: 15px; border-radius: 50%; }
@keyframes gFall { from { transform: translate(0, 0) rotate(var(--r)); opacity: 1; } 85% { opacity: 1; } to { transform: translate(var(--dx), 1000px) rotate(calc(var(--r) + 540deg)); opacity: 0; } }
.g-burst { position: absolute; width: 0; height: 0; pointer-events: none; }
.g-burst span { position: absolute; left: 0; top: 0; }
.g-stripes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.g-stripes i { position: absolute; left: -1200px; top: 50%; width: 4000px; border-radius: 999px; }
.g-hand { position: absolute; width: 120px; height: 132px; pointer-events: none; z-index: 40; animation: gTap 1.1s ease-in-out infinite; }
.g-ripple { position: absolute; left: 31px; top: -13px; width: 40px; height: 40px; border-radius: 50%; border: 5px solid #FFFFFF; animation: gRipple 1.1s ease-out infinite; }
@keyframes gTap { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(0, 14px); } }
@keyframes gRipple { 0%, 40% { transform: scale(.2); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.g-end { position: absolute; inset: 0; z-index: 90; background: rgba(34, 23, 80, .55); display: grid; place-items: center; animation: gFade .3s ease-out; }
.g-end-card { position: relative; width: 820px; padding: 120px 60px 60px; border-radius: 50px; background: #FFFFFF; text-align: center; box-shadow: 0 14px 0 rgba(0, 0, 0, .2); animation: gPop .45s cubic-bezier(.34, 1.56, .64, 1); }
.g-end-stars { position: absolute; left: 0; right: 0; top: -70px; display: flex; justify-content: center; align-items: flex-end; gap: 6px; }
.g-end-card h2 { margin: 0; font-size: 64px; color: var(--navy); }
.g-end-card p { margin: 16px 0 0; font-size: 32px; color: rgba(34, 23, 80, .6); font-weight: 600; }
.g-end-btns { display: flex; justify-content: center; gap: 24px; margin-top: 44px; }
.g-end-btn { height: 100px; padding: 0 44px; border-radius: 999px; background: #EFECF8; color: var(--navy); font-size: 38px; font-weight: 700; display: inline-flex; align-items: center; gap: 16px; }
.g-end-btn.primary { background: var(--purple); color: #FFFFFF; }
@keyframes gFade { from { opacity: 0; } }
@keyframes gPop { from { transform: scale(.6); opacity: 0; } }
.g-chip { position: absolute; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 30px; border-radius: 999px; background: #FFFFFF; color: var(--navy); font-family: var(--font-read); font-weight: 700; font-size: 60px; box-shadow: 0 6px 0 rgba(34, 23, 80, .15); z-index: 25; }
.g-chip .g-speaker { position: static; width: 84px; height: 84px; box-shadow: none; background: #EFECF8; }
.g-chip .g-speaker svg { width: 52px; height: 46px; }

/* ================================================================ Hungry Cloud */
.g-cloud .cf-es, .g-cloud .cf-mo, .g-cloud .cf-mc { display: none; }
[data-face="open"] .g-cloud .cf-ms { display: none; }
[data-face="open"] .g-cloud .cf-mo { display: inline; }
[data-face="chew"] .g-cloud .cf-eo, [data-face="chew"] .g-cloud .cf-ms { display: none; }
[data-face="chew"] .g-cloud .cf-es, [data-face="chew"] .g-cloud .cf-mc { display: inline; }
[data-face="happy"] .g-cloud .cf-eo { display: none; }
[data-face="happy"] .g-cloud .cf-es { display: inline; }
.hc-t-cloud { position: absolute; left: 120px; top: 250px; transform: scale(1.3); transform-origin: 0 0; animation: hcFloat 3.2s ease-in-out infinite alternate; }
.hc-bg { position: absolute; left: 0; top: 0; }
.hc-cloud { position: absolute; left: 590px; top: 40px; width: 420px; height: 270px; z-index: 5; animation: hcFloat 3.2s ease-in-out infinite alternate; }
.hc-cloud.chew { animation: hcChew .3s ease-in-out 4 alternate; }
.hc-cloud.shake { animation: hcShake .45s ease-in-out; }
@keyframes hcFloat { from { translate: 0 0; } to { translate: 0 -14px; } }
@keyframes hcChew { from { transform: scale(1, 1); } to { transform: scale(1.06, .94); } }
@keyframes hcShake { 0%, 100% { transform: none; } 20% { transform: translateX(-22px) rotate(-3deg); } 60% { transform: translateX(18px) rotate(3deg); } }
.hc-bubble { position: absolute; left: 1060px; top: 70px; min-width: 190px; height: 190px; padding: 0 34px; border-radius: 40px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-read); font-weight: 700; font-size: 140px; color: var(--navy); z-index: 6; box-shadow: 0 8px 0 rgba(34, 23, 80, .12); }
.hc-bubble::before { content: ''; position: absolute; left: -34px; top: 76px; border: 20px solid transparent; border-right: 26px solid #FFFFFF; }
.hc-letter { position: absolute; width: 190px; height: 218px; z-index: 10; touch-action: none; cursor: grab; }
.hc-letter.dragging { z-index: 20; cursor: grabbing; filter: drop-shadow(0 16px 0 rgba(34, 23, 80, .18)); }
.hc-letter.walker { animation: walkBob .45s ease-in-out infinite alternate; }
.hc-guide { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; }
.hc-dots { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; gap: 22px; z-index: 12; }
.hc-dots i { width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 5px solid #FFFFFF; display: grid; place-items: center; font-family: var(--font-read); font-weight: 700; font-size: 46px; font-style: normal; color: #FFFFFF; }
.hc-dots i.on { background: var(--purple); }
.hc-rainbow { position: absolute; inset: 0; z-index: 60; background: repeating-linear-gradient(-27deg, #FF8FB1 0 150px, #FFD84D 150px 300px, #71F7CA 300px 450px, #8ED3FB 450px 600px, #B9A8FF 600px 750px); display: grid; place-items: center; }
.hc-rainbow .hc-cloud { position: relative; left: auto; top: auto; transform: scale(1.35); cursor: pointer; }
.hc-rainbow .hc-won { position: absolute; left: 1080px; top: 330px; }
.hc-rainbow .g-hand { left: 830px; top: 520px; }

/* ================================================================ Word Piñatas */
.g-hang { position: absolute; animation: wpSwing 2.6s ease-in-out infinite alternate; }
.g-string { position: absolute; width: 4px; background: rgba(255, 255, 255, .9); border-radius: 2px; }
@keyframes wpSwing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.wp-t-pin { position: absolute; }
.wp-t-b .g-hang { animation-delay: -1s; }
.wp-t-c .g-hang { animation-delay: -1.8s; }
.wp-world { position: absolute; left: 0; top: 0; width: 1600px; height: 1800px; transition: transform 1.2s cubic-bezier(.45, 0, .2, 1); }
.wp-world.down { transform: translateY(-900px); }
.wp-sky { position: absolute; left: 0; top: 0; }
.wp-hang { position: absolute; left: 650px; top: 260px; }
.wp-hang.shake .g-hang { animation: wpShakeHard .22s ease-in-out infinite alternate; }
.wp-hang.burst { animation: wpBurst .5s ease-out forwards; }
@keyframes wpShakeHard { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes wpBurst { to { transform: scale(1.6); opacity: 0; } }
.wp-meter { position: absolute; left: 1462px; top: 210px; width: 66px; height: 540px; border-radius: 33px; background: #221750; overflow: hidden; box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25); z-index: 8; }
.wp-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#FFD84D, #FF7DBE); transition: height .5s cubic-bezier(.34, 1.56, .64, 1); }
.wp-meter b { position: absolute; left: 14px; right: 14px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.wp-head { position: absolute; left: 1430px; top: 86px; z-index: 9; }
.wp-candies { position: absolute; inset: 0; z-index: 7; }
.wp-candy { position: absolute; width: 340px; height: 130px; animation: wpBob 2.2s ease-in-out infinite alternate; filter: drop-shadow(0 10px 0 rgba(34, 23, 80, .12)); }
.wp-candy svg { position: absolute; left: 0; top: 0; }
.wp-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font-family: var(--font-read); font-weight: 700; font-size: 60px; color: #FFFFFF; text-shadow: 0 3px 0 rgba(34, 23, 80, .35); white-space: nowrap; pointer-events: none; }
.wp-candy.wrong { animation: wpNo .45s ease-in-out; }
@keyframes wpBob { from { translate: 0 -12px; } to { translate: 0 12px; } }
@keyframes wpNo { 0%, 100% { translate: 0 0; } 20% { translate: -22px 0; } 40% { translate: 18px 0; } 60% { translate: -12px 0; } 80% { translate: 8px 0; } }
.wp-say { left: 744px; top: 36px; }
.wp-drop { position: absolute; width: 120px; height: 46px; z-index: 70; animation: wpDrop 1.8s cubic-bezier(.3, .1, .6, 1) forwards; }
@keyframes wpDrop { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--dx), 620px) rotate(var(--r)); } }

/* ================================================================ Monkey Business */
.g-monkey .mk-happy { display: none; }
.mb-monkey.happy .mk-open { display: none; }
.mb-monkey.happy .mk-happy { display: inline; }
.mb-bg { position: absolute; left: 0; top: 0; }
.mb-monkey { position: absolute; top: 34px; width: 180px; height: 210px; z-index: 3; animation: mbSway 2.8s ease-in-out infinite alternate; transform-origin: 50% 0; }
.mb-monkey:nth-of-type(3) { animation-delay: -1s; }
.mb-monkey:nth-of-type(4) { animation-delay: -2s; }
.mb-monkey.happy { animation: mbCheer .35s ease-in-out 4 alternate; }
@keyframes mbSway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes mbCheer { from { transform: translateY(0); } to { transform: translateY(-16px); } }
.mb-slot { position: absolute; width: 150px; height: 190px; border-radius: 22px; border: 6px dashed rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .25); z-index: 2; }
.mb-slot.given { border: none; background: #FFFFFF; box-shadow: 0 8px 0 rgba(34, 23, 80, .18); display: grid; place-items: center; }
.mb-slot span, .mb-card span { font-family: var(--font-read); font-weight: 700; font-size: 124px; line-height: 1; color: var(--navy); margin-top: -12px; }
.mb-card { position: absolute; width: 150px; height: 190px; border-radius: 22px; background: #FFFDF6; box-shadow: 0 8px 0 rgba(34, 23, 80, .18); display: grid; place-items: center;
  transform: rotate(var(--tilt, 0deg)); touch-action: none; cursor: grab; z-index: 6; transition: box-shadow .2s; }
.mb-card.dragging { z-index: 20; cursor: grabbing; box-shadow: 0 18px 0 rgba(34, 23, 80, .18); }
.mb-card.in { transform: none; box-shadow: 0 8px 0 rgba(34, 23, 80, .18); cursor: default; }
.mb-card.nope { box-shadow: 0 0 0 7px #F85162, 0 8px 0 rgba(34, 23, 80, .18); }
.mb-stone { position: absolute; width: 140px; height: 44px; border-radius: 50%; border: 5px dashed #FFFFFF; background: rgba(255, 255, 255, .18); z-index: 2; }
.mb-stone.on { border-style: solid; background: #8976F6; border-color: #6C57E6; }
.mb-friend { position: absolute; left: 1330px; top: 596px; z-index: 4; }
.g-frog .fr-talk { display: none; }
.talking .g-frog .fr-smile { display: none; }
.talking .g-frog .fr-talk { display: inline; }
.mb-bubble { position: absolute; left: 1180px; top: 470px; padding: 14px 34px 14px 24px; border-radius: 30px; background: #FFFFFF; font-family: var(--font-read); font-weight: 700; font-size: 64px; color: var(--navy);
  display: flex; align-items: center; gap: 14px; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1); z-index: 8; box-shadow: 0 8px 0 rgba(34, 23, 80, .15); }
.mb-bubble.show { opacity: 1; transform: none; }
.mb-bub-spk { width: 44px; height: 44px; border-radius: 50%; background: var(--purple); }
.mb-hopper { position: absolute; z-index: 5; }
.mb-say { left: 744px; top: 700px; }
.mb-level { position: absolute; right: 40px; top: 40px; padding: 10px 26px; border-radius: 999px; background: rgba(34, 23, 80, .75); color: #FFFFFF; font-size: 30px; font-weight: 700; z-index: 10; }

/* ================================================================ Space Trace */
.st-s { position: relative; width: 440px; height: 500px; }
.st-sdot { fill: #7F6BF0; animation: stDot 6s linear infinite; }
@keyframes stDot { 0% { fill: #FFE45C; } 22% { fill: #FFE45C; } 30%, 100% { fill: #7F6BF0; } }
.st-s-rocket { position: absolute; left: 0; top: 0; width: 110px; offset-rotate: auto 90deg; offset-anchor: 50% 41%; animation: stFly 6s linear infinite; }
@keyframes stFly { 0% { offset-distance: 0%; opacity: 1; } 70% { offset-distance: 100%; opacity: 1; } 78%, 100% { offset-distance: 100%; opacity: 0; } }
.g-levels .st-lv-art { transform: scale(.95); transform-origin: 0 0; }
.st-bg { position: absolute; left: 0; top: 0; }
.st-bg .st-tw { animation: stTwinkle 2.4s ease-in-out infinite alternate; }
@keyframes stTwinkle { to { opacity: .15; } }
.st-svg { position: absolute; left: 0; top: 0; touch-action: none; }
.st-track { fill: none; stroke: #2A1C8C; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.st-ink { fill: none; stroke: #FF6DF0; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.st-trail { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .01 5; opacity: 0; transition: opacity .3s; }
.st-trail.on { opacity: .9; animation: stTrail 1s linear infinite; }
@keyframes stTrail { to { stroke-dashoffset: -5.01; } }
.st-rocket { position: absolute; left: 0; top: 0; width: 110px; height: 147px; z-index: 6; pointer-events: none; transform-origin: 55px 60.5px; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .45)); }
.st-rocket.hop { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.st-rocket .rk-flame { animation: stFlame .18s ease-in-out infinite alternate; transform-origin: 60px 114px; }
@keyframes stFlame { to { transform: scaleY(.7); } }
.st-rocket.done { transition: transform 1s ease-in; transform: translate(1500px, -300px) rotate(60deg) !important; }
.st-rings { position: absolute; left: 0; right: 0; top: 48px; display: flex; justify-content: center; gap: 18px; z-index: 5; }
.st-rings i { width: 58px; height: 58px; border-radius: 50%; border: 7px solid var(--c); opacity: .6; }
.st-rings i.done { background: var(--c); opacity: 1; animation: gPop .35s cubic-bezier(.34, 1.56, .64, 1); }
.st-ufo { position: absolute; left: 20px; top: 648px; z-index: 4; animation: stHover 3s ease-in-out infinite alternate; }
.st-ufo .ufo-beam { opacity: 0; transition: opacity .4s; }
.st-ufo.cheer .ufo-beam { opacity: .8; }
.st-ufo.cheer .ufo-arm { animation: stWave .3s ease-in-out infinite alternate; transform-origin: 124px 116px; }
.st-ufo .ufo-lights circle { fill: #FFE45C; animation: stBlink 1.2s steps(2) infinite; }
.st-ufo .ufo-lights circle:nth-child(even) { animation-delay: -.6s; }
@keyframes stHover { to { transform: translateY(-16px); } }
@keyframes stWave { to { transform: rotate(-30deg); } }
@keyframes stBlink { 50% { fill: #FF6DF0; } }

/* ================================================================ Party Time */
.pt-t-art { position: absolute; left: 20px; top: 250px; }
.pt-modes { background: #FF9A3D; }
.pt-modes h1 { position: absolute; left: 0; right: 0; top: 110px; margin: 0; text-align: center; font-size: 60px; color: var(--navy); }
.pt-mode-row { position: absolute; left: 0; right: 0; top: 250px; display: flex; justify-content: center; gap: 50px; }
.pt-mode { width: 380px; height: 460px; border-radius: 44px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 40px 20px 40px; box-shadow: 0 12px 0 rgba(34, 23, 80, .22); transition: transform .15s; }
.pt-mode:active { transform: translateY(6px); }
.pt-mode-art svg { width: 280px; height: 233px; }
.pt-mode-label { color: #FFFFFF; font-size: 42px; font-weight: 700; }
.pt-bg { position: absolute; left: 0; top: 0; }
.pt-belt { position: absolute; left: -20px; right: -20px; top: 488px; height: 64px; background: #2A1F66; border-top: 10px solid #3F2D99; z-index: 2; overflow: hidden; }
.pt-belt-dots { position: absolute; left: 0; top: 14px; width: 3400px; height: 30px; background: radial-gradient(circle at 15px 15px, #5D44C8 11px, transparent 12px) 0 0 / 60px 30px; animation: ptBelt 2s linear infinite; }
@keyframes ptBelt { to { transform: translateX(-60px); } }
.pt-lane { position: absolute; inset: 0; z-index: 3; }
.pt-obj { position: absolute; left: 0; top: 330px; width: 150px; height: 150px; transform: translateX(1640px); animation-name: ptRide; animation-timing-function: linear; animation-fill-mode: forwards; filter: drop-shadow(0 8px 0 rgba(34, 23, 80, .18)); z-index: 3; }
@keyframes ptRide { from { transform: translateX(1640px); } to { transform: translateX(-190px); } }
.pt-obj.nope svg { animation: ptNope .4s ease-in-out; }
@keyframes ptNope { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.pt-box { position: absolute; left: 640px; top: 600px; width: 320px; height: 250px; z-index: 4; transform-origin: 50% 100%; }
.pt-body { position: absolute; left: 10px; right: 10px; top: 50px; bottom: 0; border-radius: 16px; background: #3185FF; display: flex; justify-content: center; align-items: center; gap: 18px; box-shadow: inset 0 -14px 0 rgba(0, 0, 0, .12); }
.pt-lid { position: absolute; left: -6px; right: -6px; top: 0; height: 56px; border-radius: 14px; background: #5EA2FF; transform-origin: 0 100%; transform: rotate(-24deg) translate(-10px, -40px); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); z-index: 2; }
.pt-box.wrapped .pt-lid { transform: none; }
.pt-bow { position: absolute; left: 50%; top: -34px; width: 110px; height: 60px; margin-left: -55px; opacity: 0; transform: scale(.3); transition: all .4s .25s cubic-bezier(.34, 1.56, .64, 1); z-index: 3;
  background: radial-gradient(ellipse 28px 22px at 28px 30px, #FDD782 96%, transparent) , radial-gradient(ellipse 28px 22px at 82px 30px, #FDD782 96%, transparent); }
.pt-box.wrapped .pt-bow { opacity: 1; transform: none; }
.pt-slot { width: 70px; height: 70px; border-radius: 50%; border: 5px dashed rgba(255, 255, 255, .75); display: grid; place-items: center; }
.pt-slot.on { border: none; animation: gPop .35s cubic-bezier(.34, 1.56, .64, 1); }
.pt-gifts { position: absolute; left: 0; right: 0; top: 40px; display: flex; justify-content: center; gap: 26px; z-index: 5; }
.pt-gifts i svg { fill: none; stroke: rgba(34, 23, 80, .35); stroke-width: 4; stroke-dasharray: 8 6; }
.pt-gifts i.on svg { fill: #FF6DA0; stroke: #FFFFFF; stroke-dasharray: none; }
.pt-fuzz { position: absolute; left: -40px; top: 640px; z-index: 5; animation: ptPeek 3s ease-in-out infinite alternate; }
@keyframes ptPeek { from { transform: translateX(-30px) rotate(-6deg); } to { transform: translateX(10px) rotate(4deg); } }
.pt-chip { right: 50px; top: 40px; }
.pt-invite { position: absolute; inset: 0; z-index: 60; background: rgba(34, 23, 80, .6); display: grid; place-content: center; justify-items: center; gap: 24px; }
.pt-invite p { margin: 0; color: #FFFFFF; font-size: 36px; font-weight: 700; }
.pt-env { position: relative; width: 620px; height: 420px; border-radius: 26px; background: #FFE3B8; box-shadow: 0 16px 0 rgba(0, 0, 0, .2); }
.pt-flap { position: absolute; left: 0; right: 0; top: 0; height: 250px; background: #FFCF8C; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .5s ease-in; z-index: 3; }
.pt-card { position: absolute; left: 60px; right: 60px; top: 30px; bottom: 30px; border-radius: 20px; background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .6s .35s cubic-bezier(.34, 1.56, .64, 1); z-index: 2; }
.pt-card b { font-size: 44px; color: var(--navy); margin-top: -20px; }
.pt-invite.open .pt-flap { transform: scaleY(-1); z-index: 1; }
.pt-invite.open .pt-card { transform: translateY(-160px) scale(1.08); z-index: 4; }
.pt-party { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(circle, rgba(255, 255, 255, .7), rgba(255, 211, 142, 0) 60%); }
.pt-guest { animation: ptHop .5s ease-in-out infinite alternate; }
@keyframes ptHop { to { transform: translateY(-30px) rotate(4deg); } }
.g-guest .gs-wave { animation: ptWave .4s ease-in-out infinite alternate; transform-origin: 196px 204px; }
@keyframes ptWave { to { transform: rotate(-16deg); } }

/* ---------- round 3: original world games ---------- */
.gt-feed-the-friend { left: 52px; top: 158px; }
.gt-fishing-fun { left: 902px; top: 158px; }
.gt-bridge-builder { left: 52px; top: 518px; height: 340px; }
.gt-bubble-pop { left: 477px; top: 518px; height: 340px; }
.gt-magic-paint { left: 902px; top: 518px; height: 340px; }
.gt-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; pointer-events: none; }
.gt-pal { position: absolute; right: 18px; bottom: 10px; height: 64%; max-width: 55%; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0,0,0,.28)); pointer-events: none; animation: wgFloat 2.6s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.gt-tile .gt-name { padding: 6px 22px; border-radius: 999px; background: rgba(255,255,255,.88); color: #221750 !important; box-shadow: 0 5px 0 rgba(0,0,0,.15); }
.wg-title-pal { position: absolute; left: 120px; bottom: 60px; max-width: 520px; max-height: 620px; filter: drop-shadow(0 18px 12px rgba(0,0,0,.25)); animation: wgFloat 2.4s ease-in-out infinite alternate; }
.wg-lv-pal { position: absolute; left: 30px; bottom: 20px; height: 220px; }

.wg-play { overflow: hidden; }
.wg-bg, .wg-bg img { position: absolute; inset: 0; width: 1600px; height: 900px; object-fit: cover; }
.wg-friend { position: absolute; z-index: 5; transform-origin: 50% 100%; }
.wg-friend img { display: block; filter: drop-shadow(0 14px 10px rgba(0,0,0,.25)); transform-origin: 50% 100%; }
.wg-say { position: absolute; left: 55%; top: -66px; white-space: nowrap; padding: 12px 26px; border-radius: 26px; background: #FFFFFF; color: var(--c); font-size: 32px; font-weight: 700;
  box-shadow: 0 6px 0 rgba(0,0,0,.14); opacity: 0; transform: scale(.4); transform-origin: 0 100%; transition: all .25s cubic-bezier(.34,1.56,.64,1); pointer-events: none; z-index: 6; }
.wg-friend.talk .wg-say { opacity: 1; transform: none; }
.wg-stars { position: absolute; left: 0; right: 0; top: 34px; display: flex; justify-content: center; gap: 8px; z-index: 8; pointer-events: none; }
.wg-stars i { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.7); }
.wg-letter { display: block; filter: drop-shadow(0 6px 4px rgba(0,0,0,.2)); pointer-events: none; }
.wg-pic { position: relative; display: inline-block; }
.wg-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wg-pic > img + svg, .wg-pic:has(> img) > svg { visibility: hidden; }
.nope { animation: nope .45s ease; }
@keyframes nope { 0%, 100% { translate: 0; } 20% { translate: -18px; } 40% { translate: 16px; } 60% { translate: -10px; } 80% { translate: 6px; } }

/* Feed the Friend */
.ff-want { position: absolute; left: 470px; top: 190px; z-index: 6; display: flex; align-items: center; gap: 14px; padding: 16px 26px 16px 30px; border-radius: 40px; background: #FFFFFF; box-shadow: 0 8px 0 rgba(0,0,0,.14); }
.ff-want::before { content: ''; position: absolute; left: -26px; top: 70px; border: 18px solid transparent; border-right: 26px solid #FFFFFF; }
.ff-want span { font-size: 34px; font-weight: 700; color: #221750; }
.ff-snack { position: absolute; width: 190px; height: 260px; z-index: 7; touch-action: none; cursor: grab; }
.ff-snack > img { position: absolute; left: 5px; bottom: 0; width: 180px; filter: drop-shadow(0 10px 6px rgba(0,0,0,.22)); pointer-events: none; }
.ff-tag { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: grid; place-items: center; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 6px 0 rgba(0,0,0,.14); }
.ff-tag .wg-letter { max-height: 118px; }
.ff-snack.held { z-index: 20; scale: 1.08; cursor: grabbing; }

/* Fishing Fun */
.fi-line { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
.fi-line.on { opacity: 1; }
.fi-line path { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-dasharray: 2 0; filter: drop-shadow(0 0 2px rgba(0,0,0,.4)); }
.fi-fish { position: absolute; left: 0; width: 280px; height: 170px; z-index: 3; }
.fi-fish img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(0,0,0,.2)); pointer-events: none; }
.fi-fish b { position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); padding: 4px 18px; border-radius: 18px; background: rgba(255,255,255,.92); font-family: Andika, sans-serif; font-size: 44px; color: #221750; pointer-events: none; }

/* Bridge Builder */
.br-slot { position: absolute; height: 34px; border-radius: 10px; border: 4px dashed rgba(255,255,255,.85); background: rgba(80,50,20,.25); z-index: 3; }
.br-slot.filled { opacity: 0; }
.br-plank { position: absolute; width: 150px; height: 120px; z-index: 6; border-radius: 18px; display: grid; place-items: center;
  background: repeating-linear-gradient(90deg, #C98A4B 0 26px, #B87A3F 26px 30px); box-shadow: inset 0 -10px 0 #8E5527, 0 8px 0 rgba(0,0,0,.2); animation: bob 1.8s ease-in-out infinite alternate; }
.br-plank.placed { animation: none; height: 96px; }
.br-plank .wg-letter { max-height: 92px; }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -14px; } }

/* Bubble Pop */
.bp-card { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 18px; padding: 10px 26px; border-radius: 34px; background: rgba(255,255,255,.92); box-shadow: 0 8px 0 rgba(0,0,0,.12); }
.bp-bubble { position: absolute; left: 0; top: 0; border-radius: 50%; z-index: 4; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.25) 18%, rgba(160,220,255,.18) 55%, rgba(255,255,255,.55) 72%, rgba(120,200,255,.35) 100%);
  box-shadow: inset 0 0 18px rgba(255,255,255,.7), 0 6px 18px rgba(0,60,120,.15); }
.bp-bubble span { display: grid; place-items: center; }
.bp-bubble.pop { animation: pop .3s ease-out forwards; }
@keyframes pop { to { scale: 1.6; opacity: 0; } }

/* Magic Paint */
.mp-canvas { position: absolute; left: 290px; top: 170px; width: 1020px; height: 560px; border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 10px 30px rgba(80,40,120,.2); }
.mp-svg { position: absolute; inset: 0; z-index: 3; }
.mp-track { fill: none; stroke: #E9E2F6; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.mp-ink { fill: none; stroke: url(#mp-rainbow); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(255,255,255,.8)); }
.mp-dots { fill: none; stroke: #B07CF0; stroke-width: 1.6; stroke-dasharray: .1 4.2; stroke-linecap: round; opacity: 0; }
.mp-dots.on { opacity: 1; animation: dots 1s linear infinite; }
@keyframes dots { to { stroke-dashoffset: -4.3; } }
.mp-brush { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; transition: transform .08s linear; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
.mp-brush.done { opacity: 0; transition: opacity .4s; }
.mp-alive { position: absolute; left: 50%; top: 210px; transform: translateX(-50%); z-index: 7; animation: alive .7s cubic-bezier(.34,1.56,.64,1) both, wgFloat 1.6s ease-in-out .7s infinite alternate; }
@keyframes alive { from { scale: .2; opacity: 0; rotate: -20deg; } to { scale: 1; opacity: 1; rotate: 0deg; } }

@keyframes wgFloat { from { translate: 0 0; } to { translate: 0 -12px; } }
.mp-canvas { left: 280px; top: 150px; width: 1040px; height: 590px; background: #FFFDF7; border: 16px solid #C98A4B; box-shadow: inset 0 0 0 4px #E9C99E, 0 16px 30px rgba(80,40,10,.3); border-radius: 18px; }

/* ---------- round 4: game depth (levels, streaks, bosses, hints, stickers) ---------- */
/* games tab: level stars on each tile */
.gt-prog { position: absolute; left: 24px; top: 20px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 4px 0 rgba(0,0,0,.12); pointer-events: none; }
.gt-prog b { margin-left: 6px; font-size: 28px; color: #221750; }

/* level (tier) picker */
.wg-tiers-shade { position: absolute; inset: 0; background: linear-gradient(rgba(34,23,80,.45), rgba(34,23,80,.2)); }
.wg-tiers-title { position: absolute; left: 0; right: 0; top: 48px; margin: 0; text-align: center; font-size: 84px; line-height: 1; color: #FFFFFF; text-shadow: 0 6px 0 rgba(34,23,80,.35); }
.wg-tier-row { position: absolute; left: 0; right: 0; top: 196px; display: flex; justify-content: center; gap: 56px; }
.wg-tier { position: relative; width: 400px; height: 620px; padding: 34px 28px 30px; border-radius: 48px; background: #FFFFFF; box-shadow: 0 12px 0 rgba(34,23,80,.25); display: flex; flex-direction: column; align-items: center; text-align: center; color: #221750; transition: transform .15s; }
.wg-tier:active, .wg-tier.pressed { transform: translateY(6px); box-shadow: 0 6px 0 rgba(34,23,80,.25); }
.wg-tier-num { position: absolute; left: -18px; top: -24px; width: 92px; height: 92px; border-radius: 50%; background: #5031F5; color: #FFFFFF; font-size: 56px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 6px 0 rgba(34,23,80,.25); border: 6px solid #FFFFFF; }
.wg-tier-art { height: 200px; width: 100%; display: grid; place-items: center; }
.wg-tier-img { max-height: 190px; max-width: 300px; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(0,0,0,.18)); }
.wg-tier b { margin-top: 10px; font-size: 46px; line-height: 1.05; }
.wg-tier small { margin-top: 10px; font-size: 28px; font-weight: 600; line-height: 1.25; opacity: .7; }
.wg-tier-dots { display: flex; gap: 10px; margin-top: 16px; }
.wg-tier-dots i { width: 22px; height: 22px; border-radius: 50%; background: #E3DEF2; }
.wg-tier-dots i.on { background: #FF9464; }
.wg-tier-foot { margin-top: auto; height: 104px; display: grid; place-items: center; }
.wg-tier-go { display: inline-block; padding: 18px 54px; border-radius: 999px; background: #5031F5; color: #FFFFFF; font-size: 42px; font-weight: 700; box-shadow: 0 6px 0 rgba(34,23,80,.25); }
.wg-tier-lock { width: 96px; height: 96px; border-radius: 50%; background: #9C95BA; display: grid; place-items: center; }
.wg-tier-lock svg { width: 44px; height: 50px; }
.wg-tier.locked { background: #E9E5F4; }
.wg-tier.locked .wg-tier-art, .wg-tier.locked b, .wg-tier.locked small { opacity: .45; filter: grayscale(.7); }
.wg-tier.won { box-shadow: 0 12px 0 #F9B94F; }
.br-tier-art { display: flex; gap: 8px; }
.br-tier-art i { width: 72px; height: 66px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-family: var(--font-read); font-size: 46px; font-weight: 700; color: #FFFFFF;
  background: repeating-linear-gradient(90deg, #C98A4B 0 18px, #B87A3F 18px 21px); box-shadow: inset 0 -6px 0 #8E5527; }
.bp-tier-art { position: relative; width: 300px; height: 190px; }
.bp-tier-art i { position: absolute; left: calc(var(--k) * 58px + 20px); top: calc(110px - var(--k) * 26px); width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0 10%, rgba(160,220,255,.5) 40%, rgba(80,180,240,.75) 100%); box-shadow: inset 0 0 12px rgba(255,255,255,.8); }

/* streak flame + banners */
.wg-streak { position: absolute; left: 156px; top: 46px; z-index: 26; display: flex; align-items: center; gap: 6px; padding: 8px 20px 8px 14px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 5px 0 rgba(34,23,80,.18);
  opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.wg-streak.on { opacity: 1; transform: none; }
.wg-streak b { font-size: 40px; color: #FF7A45; line-height: 1; }
.wg-banner { position: absolute; left: 50%; top: 44%; z-index: 85; white-space: nowrap; pointer-events: none; font-size: 110px; font-weight: 700; color: #FFFFFF;
  -webkit-text-stroke: 10px #5031F5; paint-order: stroke fill; text-shadow: 0 10px 0 rgba(34,23,80,.3); }
.wg-banner.combo { -webkit-text-stroke-color: #FF7A45; font-size: 96px; top: 40%; }
.wg-banner.boss { -webkit-text-stroke-color: #221750; color: #FDD782; font-size: 130px; }
.wg-stars i.boss { background: #FFE9A8; box-shadow: 0 0 0 4px #FFB547; }
.wg-stars.tight { gap: 4px; }
.wg-stars.tight i { width: 50px; height: 50px; }
.wg-stars.tight i svg { width: 44px; height: 44px; }

/* the host friend's hint: a soft golden glow that pulses */
.wg-hint { animation: wgHint 1s ease-in-out infinite alternate !important; z-index: 9; }
@keyframes wgHint { from { filter: drop-shadow(0 0 6px #FFF6C8) drop-shadow(0 0 14px #FFD23F); } to { filter: drop-shadow(0 0 14px #FFFFFF) drop-shadow(0 0 34px #FFC21A); } }

/* stickers on the end card; end card fits three buttons */
.wg-sticker { position: absolute; right: -54px; top: -64px; width: 190px; display: flex; flex-direction: column; align-items: center; rotate: 9deg; z-index: 3; }
.wg-sticker.new { animation: wgSticker .8s cubic-bezier(.34,1.56,.64,1) .5s both; }
.wg-sticker-disc { width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, #FFF7DE, #FFE3A3); border: 9px solid #FFFFFF; box-shadow: 0 8px 0 rgba(0,0,0,.18); display: grid; place-items: center; overflow: hidden; }
.wg-sticker-disc img { max-width: 135px; max-height: 135px; object-fit: contain; }
.wg-sticker-star { position: absolute; left: -10px; top: 108px; }
.wg-sticker b { margin-top: 8px; padding: 4px 16px; border-radius: 999px; background: #FF7A45; color: #FFFFFF; font-size: 24px; white-space: nowrap; }
@keyframes wgSticker { from { scale: .2; opacity: 0; rotate: -40deg; } }
.g-end-card:has(.g-end-btn:nth-child(3)) { width: 960px; }
.g-end-btns:has(> :nth-child(3)) { gap: 18px; }
.g-end-btns:has(> :nth-child(3)) .g-end-btn { padding: 0 32px; font-size: 34px; }

/* Feed the Friend */
.ff-want-letter { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: #F3EFFF; }
.ff-want-letter .wg-letter { max-height: 104px; }
.ff-want.last span:first-child { color: #E8590C; }
.ff-snack.small { scale: .86; }
.ff-snack.small.held { scale: .94; }
.ff-mega { position: relative; display: flex; align-items: center; gap: 12px; }
.ff-mega-snack { width: 170px; filter: drop-shadow(0 8px 6px rgba(0,0,0,.2)); transition: scale .3s; }
.ff-mega-word { font-family: var(--font-read); font-size: 76px; color: #221750; padding: 0 12px; }
.ff-mega-slots { display: flex; gap: 10px; margin-left: 8px; }
.ff-mega-slots i { width: 84px; height: 84px; border-radius: 50%; border: 5px dashed #CFCBDD; display: grid; place-items: center; }
.ff-mega-slots i.now { border-color: #FF9464; background: #FFF1E8; animation: wgPulse .9s ease-in-out infinite alternate; }
.ff-mega-slots i.full { border: 5px solid #43BE95; background: #E8FFF6; }
.ff-mega-slots .wg-letter { max-height: 68px; }
@keyframes wgPulse { to { scale: 1.1; } }
.ff-full img { animation: ffFull .8s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes ffFull { 50% { scale: 1.18 .9; } }

/* Fishing Fun */
.fi-card { position: absolute; left: 50%; top: 112px; z-index: 8; display: flex; align-items: center; gap: 14px; padding: 8px 30px; border-radius: 30px; background: rgba(255,255,255,.94); box-shadow: 0 7px 0 rgba(0,0,0,.12);
  transform: translateX(-50%) scale(.5); opacity: 0; transition: all .25s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.fi-card.on { transform: translateX(-50%); opacity: 1; }
.fi-card b { font-family: var(--font-read); font-size: 64px; color: #221750; }
.fi-card .fi-ear { width: 84px; text-align: center; color: #35A8F0; }
.fi-fish.long b { font-size: 38px; }
.fi-giant { position: absolute; top: 330px; width: 560px; height: 330px; z-index: 3; pointer-events: none; animation: bob 2s ease-in-out infinite alternate; }
.fi-giant img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 10px rgba(0,0,0,.25)); }
.fi-bubble { position: absolute; width: 210px; height: 210px; border-radius: 50%; z-index: 7; display: grid; place-items: center; animation: bob 1.6s ease-in-out infinite alternate;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.98) 0 9%, rgba(255,255,255,.55) 22%, rgba(200,236,255,.7) 60%, rgba(120,200,255,.6) 100%); box-shadow: inset 0 0 18px rgba(255,255,255,.8), 0 8px 18px rgba(0,60,120,.2); }
.fi-bubble b { font-family: var(--font-read); font-size: 54px; color: #221750; }
.fi-bubble.popped { animation: pop .3s ease-out forwards; }

/* Bridge Builder */
.br-ghost { position: absolute; height: 90px; z-index: 4; display: grid; place-items: center; font-family: var(--font-read); font-size: 74px; font-weight: 700; line-height: 1; color: rgba(255,255,255,.92);
  text-shadow: 0 0 10px rgba(80,50,20,.6); pointer-events: none; animation: wgPulse 1.2s ease-in-out infinite alternate; }
.br-plank.team { width: 170px; }

/* Bubble Pop */
.bp-bubble.gold { background: radial-gradient(circle at 32% 28%, #FFFFFF 0 9%, rgba(255,240,180,.75) 22%, rgba(255,214,90,.55) 60%, rgba(255,180,40,.8) 100%); box-shadow: inset 0 0 18px rgba(255,255,255,.8), 0 0 26px rgba(255,200,60,.65); }
.bp-card-letter { display: grid; place-items: center; min-width: 110px; }
.bp-card-letter.mystery b { width: 110px; height: 110px; border-radius: 50%; border: 6px dashed #8ED3FB; display: grid; place-items: center; font-size: 70px; color: #35A8F0; }
.bp-card.gold { background: #FFF4CF; box-shadow: 0 0 0 6px #FFC21A, 0 8px 0 rgba(0,0,0,.12); }

/* Magic Paint */
.mp-steps { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 8; display: flex; gap: 12px; }
.mp-steps i { padding: 8px 24px; border-radius: 999px; background: rgba(255,255,255,.7); color: rgba(34,23,80,.5); font-style: normal; font-size: 28px; font-weight: 700; }
.mp-steps i.now { background: #FFFFFF; color: #8A57D6; box-shadow: 0 0 0 4px #B07CF0; }
.mp-steps i.done { background: #43BE95; color: #FFFFFF; }
.mp-alive { transition: left .5s ease, top .5s ease, opacity .3s; }
.mp-alive .wg-letter { transition: height .5s ease; }
.mp-alive.side { left: 400px; top: 180px; }
.mp-alive.side .wg-letter { height: 230px !important; }
.mp-alive.hide { opacity: 0; }
.mp-alive.side.home { left: 50%; top: 200px; }
.mp-alive.side.home .wg-letter { height: 300px !important; }
.mp-card { position: absolute; z-index: 8; border-radius: 36px; background: #FFFFFF; border: 6px solid #E4D6FA; box-shadow: 0 9px 0 #C4A9EE; display: grid; place-items: center; }
.mp-card:active { translate: 0 4px; }
.mp-card .wg-letter { max-height: 150px; }
.mp-card.right { border-color: #43BE95; box-shadow: 0 9px 0 #2E9C76, 0 0 30px rgba(67,190,149,.6); scale: 1.08; transition: scale .25s cubic-bezier(.34,1.56,.64,1); }

/* ---------- round 6: variety (new round kinds, surprises, world theming, two new games) ---------- */
/* games tab: 2 + 3 + 2 tiles */
.gt-feed-the-friend, .gt-fishing-fun { top: 150px; height: 232px; }
.gt-bridge-builder, .gt-bubble-pop, .gt-magic-paint { top: 396px; height: 232px; }
.gt-rocket-words { left: 52px; top: 642px; height: 232px; }
.gt-sound-safari { left: 477px; top: 642px; height: 232px; }
.gt-tile .gt-name { bottom: 18px; font-size: 36px; }
.gt-tile .gt-prog { top: 14px; }
.gt-tile .gt-prog svg { width: 34px; height: 34px; }
.gt-pal { height: 72%; }

/* a world map used as a game background: soft and a little blurred so the play pieces stand out */
.wg-bg-world img { filter: blur(5px) saturate(1.1); transform: scale(1.05); }

/* round signs and banners */
.vy-round { position: absolute; left: 50%; top: 42%; z-index: 85; pointer-events: none; white-space: nowrap; }
.vy-round b { display: block; font-size: 96px; font-weight: 700; color: #FFFFFF; -webkit-text-stroke: 10px var(--c, #5031F5); paint-order: stroke fill; text-shadow: 0 10px 0 rgba(34,23,80,.3); }
.wg-banner.gold { top: 30%; font-size: 80px; color: #FFF4C2; -webkit-text-stroke-color: #E0A21B; }
.wg-banner.party { -webkit-text-stroke-color: #FF6DA0; }

/* bonus stars */
.vy-bonus { position: absolute; right: 40px; top: 40px; z-index: 26; display: flex; align-items: center; gap: 6px; padding: 6px 20px 6px 10px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 5px 0 rgba(34,23,80,.18);
  opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.vy-bonus.on { opacity: 1; transform: none; }
.vy-bonus b { font-size: 38px; color: #E0A21B; line-height: 1; }
.vy-gold { position: absolute; left: 0; width: 100px; height: 100px; z-index: 30; filter: drop-shadow(0 0 10px #FFF6C8) drop-shadow(0 0 24px #FFC21A); }
.vy-gold.got { transition: opacity .35s, scale .35s; opacity: 0; scale: 1.7; }

/* speed-round countdown */
.vy-timer { position: absolute; height: 52px; z-index: 26; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.vy-timer-clock { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; background: #FFFFFF; border: 6px solid #FF7A45; box-shadow: 0 4px 0 rgba(34,23,80,.18); }
.vy-timer-clock::after { content: ""; position: absolute; left: 50%; top: 7px; width: 5px; height: 16px; margin-left: -2.5px; border-radius: 3px; background: #221750; transform-origin: 50% 100%; animation: vyTick 1s steps(8) infinite; }
@keyframes vyTick { to { transform: rotate(360deg); } }
.vy-timer-track { flex: 1; height: 28px; border-radius: 14px; background: rgba(255,255,255,.85); box-shadow: 0 4px 0 rgba(34,23,80,.15); overflow: hidden; }
.vy-timer-track i { display: block; height: 100%; border-radius: 14px; background: #43BE95; transform-origin: 0 50%; }
.vy-count { display: inline-block; padding: 2px 16px; border-radius: 999px; background: #FFF1E8; color: #FF7A45; font-size: 40px; font-weight: 700; font-style: normal; }

/* choice cards (chooseRow) */
.vy-card { position: absolute; z-index: 8; border-radius: 36px; background: #FFFFFF; border: 6px solid #E4D6FA; box-shadow: 0 9px 0 #C4A9EE; display: grid; place-items: center; }
.vy-card:active { translate: 0 4px; }
.vy-card .wg-letter { max-height: 150px; }
.vy-card.right { border-color: #43BE95; box-shadow: 0 9px 0 #2E9C76, 0 0 30px rgba(67,190,149,.6); scale: 1.08; transition: scale .25s cubic-bezier(.34,1.56,.64,1); }
.vy-bellcard { background: #FFF8E1; border-color: #FDD24C; box-shadow: 0 9px 0 #E0A21B; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vy-bell { display: block; height: 130px; margin-top: -18px; animation: vyRing 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
.vy-bellcard:nth-child(odd) .vy-bell { animation-delay: -1.2s; }
.vy-bell svg { width: 130px; height: 130px; }
.vy-bell-l { display: grid; place-items: center; height: 92px; }
.vy-bell-l .wg-letter { max-height: 88px; }
@keyframes vyRing { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -12deg; } 84% { rotate: 10deg; } 92% { rotate: -5deg; } }
.vy-yn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.vy-yn b { font-size: 38px; color: #221750; }

/* memory cards: they flip by squashing flat, never past edge-on (a letter is never shown mirrored) */
.vy-mem { position: absolute; z-index: 8; border-radius: 34px; background: linear-gradient(145deg, #8F7BFF, #5031F5); border: 6px solid #FFFFFF; box-shadow: 0 8px 0 rgba(34,23,80,.25); display: grid; place-items: center; }
.vy-mem-back, .vy-mem-q { font-size: 92px; font-weight: 700; font-style: normal; color: #FFFFFF; text-shadow: 0 5px 0 rgba(34,23,80,.3); }
.vy-mem.open { background: #FFFFFF; border-color: #B9A8FF; }
.vy-mem.done { border-color: #43BE95; box-shadow: 0 8px 0 #2E9C76, 0 0 24px rgba(67,190,149,.55); }
.vy-mem-face { position: relative; display: grid; place-items: center; }
.vy-mem-corner { position: absolute; right: -14px; bottom: -14px; width: 54px; height: 54px; border-radius: 50%; background: #5031F5; color: #FFFFFF; display: grid; place-items: center; font-family: var(--font-read); font-style: normal; font-size: 40px; font-weight: 700; }
.vy-mem.bubble { border-radius: 50%; border: 0; background: radial-gradient(circle at 32% 28%, #FFFFFF 0 9%, rgba(160,220,255,.6) 30%, rgba(80,170,240,.85) 100%); box-shadow: inset 0 0 22px rgba(255,255,255,.8), 0 8px 18px rgba(0,60,120,.25); }
.vy-mem.bubble.open { background: radial-gradient(circle at 32% 28%, #FFFFFF 0 12%, #F2FBFF 40%, #CDEBFF 100%); }
.vy-mem.bubble.done { box-shadow: inset 0 0 22px rgba(255,255,255,.8), 0 0 0 7px #43BE95; }

/* world toys and cameos */
.vy-toy { position: absolute; z-index: 2; transform-origin: 50% 100%; }
.vy-toy img { display: block; filter: drop-shadow(0 8px 5px rgba(0,0,0,.22)); pointer-events: none; }
.vy-decor { animation: vyIdle 3s ease-in-out infinite alternate; }
@keyframes vyIdle { from { rotate: -2deg; } to { rotate: 2deg; } }
.vy-party-toy { z-index: 60; pointer-events: none; }
.vy-cameo { position: absolute; z-index: 9; pointer-events: none; transform-origin: 50% 100%; }
.vy-cameo img { display: block; filter: drop-shadow(0 12px 8px rgba(0,0,0,.25)); }
.vy-cameo-say { position: absolute; left: 50%; top: -64px; white-space: nowrap; padding: 10px 24px; border-radius: 24px; background: #FFFFFF; color: #221750; font-size: 30px; font-weight: 700; box-shadow: 0 6px 0 rgba(0,0,0,.14);
  opacity: 0; transform: translateX(-50%) scale(.4); transition: all .25s cubic-bezier(.34,1.56,.64,1); }
.vy-cameo.talk .vy-cameo-say { opacity: 1; transform: translateX(-50%); }

/* a sleeping friend */
.wg-friend { transition: scale .6s cubic-bezier(.34,1.56,.64,1); }
.wg-friend.vy-asleep img { filter: drop-shadow(0 14px 10px rgba(0,0,0,.25)) brightness(.88); animation: vySnore 2.4s ease-in-out infinite; }
.wg-friend.vy-asleep::after { content: "Z z z"; position: absolute; left: -10px; top: -40px; font-size: 56px; font-weight: 700; color: #FFFFFF; -webkit-text-stroke: 8px #7B61FF; paint-order: stroke fill; animation: vyZ 2.4s ease-in-out infinite; }
@keyframes vySnore { 50% { scale: 1.03 .97; } }
@keyframes vyZ { from { translate: 0 10px; opacity: .3; } 50% { opacity: 1; } to { translate: 20px -30px; opacity: .3; } }
.wg-friend.vy-giant { scale: 1.3; }
.vy-zmeter { position: absolute; left: 470px; top: 120px; z-index: 9; display: flex; gap: 10px; }
.vy-zmeter i { font-style: normal; font-size: 70px; font-weight: 700; color: #FFFFFF; -webkit-text-stroke: 9px #7B61FF; paint-order: stroke fill; transition: all .4s; }
.vy-zmeter i.gone { opacity: .15; scale: .5; }

/* Feed the Friend */
.ff-snack.vy-ride { left: 0; padding: 0; }
.ff-snack.vy-golden > img { filter: drop-shadow(0 0 14px #FFC21A) drop-shadow(0 10px 6px rgba(0,0,0,.22)); }
.ff-snack.vy-golden .ff-tag { background: #FFF4C2; box-shadow: 0 0 0 6px #FFC21A; }
.ff-tag.pic { background: #FFFFFF; }
.ff-want .vy-count { margin-left: 6px; }

/* Fishing Fun */
.fi-fish.vy-still { animation: bob 1.8s ease-in-out infinite alternate; }
.fi-fish.vy-small { width: 230px; height: 140px; }
.fi-fish.vy-small b { font-size: 38px; }
.fi-odd { font-size: 34px; font-weight: 700; color: #B07CF0; }
.fi-card .vy-count { margin-left: 8px; }

/* Bridge Builder */
.br-slot.vy-gap { border-color: #FDD24C; background: rgba(253,210,76,.35); animation: wgPulse .9s ease-in-out infinite alternate; }

/* Bubble Pop */
.bp-bubble.vy-still { animation: bob 2s ease-in-out infinite alternate; }
.bp-bubble.vy-still .wg-pic { pointer-events: none; }
.bp-bubble.vy-glowset { box-shadow: inset 0 0 18px rgba(255,255,255,.7), 0 0 0 8px #FDD24C, 0 0 30px rgba(253,210,76,.7); }
.bp-card-text { padding: 20px; font-size: 44px; font-weight: 700; color: #221750; }
.vy-giant-bubble { position: absolute; left: 1080px; top: 190px; width: 380px; height: 380px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.2) 20%, rgba(170,225,255,.25) 60%, rgba(255,255,255,.6) 80%, rgba(120,200,255,.5) 100%);
  box-shadow: inset 0 0 30px rgba(255,255,255,.8), 0 10px 30px rgba(0,60,120,.2); animation: bob 2.2s ease-in-out infinite alternate; }
.vy-giant-bubble.burst { animation: pop .35s ease-out forwards; }
.vy-trapped { position: absolute; left: 90px; top: 70px; }
.vy-trapped img { display: block; }

/* Magic Paint */
.vy-ask { position: absolute; left: 780px; top: 180px; width: 260px; height: 260px; z-index: 8; border-radius: 40px; background: #FFFFFF; border: 6px solid #E4D6FA; box-shadow: 0 9px 0 #C4A9EE; display: grid; place-items: center; }
.vy-night { position: absolute; left: 296px; top: 166px; width: 1008px; height: 558px; z-index: 6; border-radius: 8px;
  background: radial-gradient(circle at 20% 30%, #FFFFFF 0 1.5px, transparent 2.5px) 0 0 / 90px 80px, radial-gradient(circle at 70% 60%, #FFF4C2 0 1.5px, transparent 2.5px) 0 0 / 130px 110px, linear-gradient(#1B1250, #3B2A9C); }
.vy-night-count { position: absolute; right: 18px; top: 14px; }
.vy-star { position: absolute; left: 0; top: 0; z-index: 8; width: 140px; height: 140px; display: grid; place-items: center; filter: drop-shadow(0 0 10px rgba(255,230,120,.6)); }
.vy-star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vy-star b { position: relative; margin-top: 12px; font-family: var(--font-read); font-size: 62px; font-weight: 700; line-height: 1; color: #221750; }
.vy-star.got { transition: opacity .3s, scale .3s; opacity: 0; scale: 1.6; }

/* Rocket Words */
.rw-sky { position: absolute; inset: 0; background: linear-gradient(rgba(30,16,90,.55), rgba(30,16,90,.1) 70%); }
.rw-pad { position: absolute; left: 100px; top: 590px; width: 360px; height: 34px; border-radius: 17px; background: repeating-linear-gradient(-45deg, #FDD24C 0 22px, #221750 22px 44px); box-shadow: 0 8px 0 rgba(0,0,0,.25); }
.rw-tank { position: absolute; left: 40px; top: 280px; width: 46px; height: 300px; border-radius: 23px; background: rgba(255,255,255,.35); border: 5px solid #FFFFFF; z-index: 4; }
.rw-tank i { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 0; max-height: calc(100% - 8px); border-radius: 16px; background: linear-gradient(#FFD84D, #FF7A45); transition: height .5s cubic-bezier(.34,1.56,.64,1); }
.rw-tank b { position: absolute; top: 100%; left: 50%; margin-top: 8px; transform: translateX(-50%); color: #FFFFFF; font-size: 26px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.rw-rocket { z-index: 4; }
.rw-pod { position: absolute; top: 170px; z-index: 8; border-radius: 50%; background: #FFFFFF; border: 7px solid #B9A8FF; box-shadow: 0 8px 0 rgba(34,23,80,.25); display: grid; place-items: center; }
.rw-pod .wg-letter { max-height: 96px; }
.rw-pod.now { border-color: #FDD24C; animation: wgPulse .8s ease-in-out infinite alternate; }
.rw-pod.lit { background: #FFF4C2; border-color: #FFB547; box-shadow: 0 8px 0 rgba(34,23,80,.25), 0 0 30px rgba(255,200,60,.8); }
.rw-pod.blank i { width: 38px; height: 38px; border-radius: 50%; background: #CFC6F5; }
.rw-pod.talk { background: #8ED3FB; border-color: #35A8F0; scale: 1.14; transition: scale .15s; }
.rw-pod.talk i { background: #FFFFFF; }
.wg-friend.rw-robot img { animation: rwRobot .5s steps(2) infinite; }
@keyframes rwRobot { 50% { rotate: -3deg; translate: 0 -6px; } }
.rw-word { position: absolute; left: 50%; top: 180px; z-index: 8; padding: 6px 44px; border-radius: 34px; background: #FFFFFF; box-shadow: 0 8px 0 rgba(34,23,80,.2); transform: translateX(-50%); }
.rw-word b { font-family: var(--font-read); font-size: 100px; color: #221750; }
.rw-meteor { position: absolute; left: 0; top: 0; width: 260px; height: 182px; z-index: 7; }
.rw-meteor .rw-rock { position: absolute; left: 0; top: 0; }
.rw-meteor-pic { position: absolute; left: 26px; top: 26px; width: 130px; height: 130px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 0 0 6px #FFB547; }
.rw-tier-art { display: flex; gap: 10px; }
.rw-tier-art i { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font-read); font-size: 46px; font-weight: 700; color: #221750; background: #FFF4C2; border: 6px solid #FFB547; }
.rw-title-rocket { max-height: 560px; }

/* Sound Safari */
.ss-ground { position: absolute; left: -40px; right: -40px; top: 690px; bottom: 0; border-radius: 50% 50% 0 0 / 60px 60px 0 0; background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.2)); border-top: 8px solid rgba(255,255,255,.75); }
.ss-night { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(ellipse at 50% 75%, rgba(10,8,40,.25), rgba(10,8,40,.85)); }
.ss-dark .ss-night { opacity: 1; }
.ss-dark .ss-toy img { filter: brightness(.55) drop-shadow(0 8px 5px rgba(0,0,0,.22)); }
.ss-dark .ss-tag { box-shadow: 0 0 34px 10px #FFE58A; }
.ss-toy { z-index: 6; }
.ss-tag { position: absolute; left: 50%; top: -128px; width: 124px; height: 124px; margin-left: -62px; border-radius: 50%; background: #FFFFFF; border: 6px solid #FDD24C; box-shadow: 0 6px 0 rgba(34,23,80,.2); display: grid; place-items: center; }
.ss-tag .wg-letter { max-height: 90px; }
.ss-card { position: absolute; left: 50%; top: 104px; z-index: 8; display: flex; align-items: center; gap: 18px; padding: 10px 30px; border-radius: 34px; background: rgba(255,255,255,.94); box-shadow: 0 8px 0 rgba(0,0,0,.12); transform: translateX(-50%); transition: opacity .3s; }
.ss-card.off { opacity: 0; }
.ss-card-tag { font-size: 36px; font-weight: 700; color: #221750; }
.ss-card-letter { display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: #FFF4C2; }
.ss-card-letter .wg-letter { max-height: 96px; }
.ss-hider { position: absolute; z-index: 7; pointer-events: none; }
.ss-hider img, .ss-parader img { display: block; filter: drop-shadow(0 12px 8px rgba(0,0,0,.25)); }
.ss-team { position: absolute; left: 40px; top: 790px; z-index: 8; display: flex; }
.ss-mate { width: 86px; height: 86px; margin-right: -14px; border-radius: 50%; background: #FFFFFF; border: 5px solid #FDD24C; box-shadow: 0 5px 0 rgba(34,23,80,.2); display: grid; place-items: center; overflow: hidden; }
.ss-mate img { max-width: 72px; max-height: 72px; object-fit: contain; }
.ss-parader { position: absolute; z-index: 9; pointer-events: none; animation: ptHop .4s ease-in-out infinite alternate; }