/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.15_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.15_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/home-v2.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --pink:#FF5E9F;
  --yellow:#FFD23F;
  --mint:#4ECDC4;
  --purple:#7B61FF;
  --coral:#FF8C61;
  --dark:#1A1A2E;
  --cream:#FFF8F0;
  --muted:#6B6B85;
}

html, body {
  font-family:'Nunito', sans-serif;
  background: var(--cream);
  color: var(--dark);
  overflow-x: hidden;
}

.yumpa-app {
  min-height: 100vh;
  position: relative;
  padding-bottom: 60px;
}

/* ==== Background blobs ==== */
.bg-blobs {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.bg-blobs > .blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35;
  animation: blobFloat 18s ease-in-out infinite;
}
.bg-blobs > .blob.b1 { width: 420px; height: 420px; background: #FFCCE0; top: -100px; left: -120px; }
.bg-blobs > .blob.b2 { width: 360px; height: 360px; background: #C9F1EE; top: 20%; right: -140px; animation-delay: -4s; }
.bg-blobs > .blob.b3 { width: 300px; height: 300px; background: #E4DCFF; bottom: 10%; left: 10%; animation-delay: -8s; }
.bg-blobs > .blob.b4 { width: 340px; height: 340px; background: #FFE4D1; bottom: -80px; right: 15%; animation-delay: -12s; }

@keyframes blobFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.08); }
  66% { transform: translate(-30px,20px) scale(0.95); }
}

/* ==== Floating emojis ==== */
.floating-emojis {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.fe {
  position: absolute; font-size: 22px; opacity: 0.45;
  animation: drift 14s linear infinite;
}
.fe1 { top: 12%; left: 6%; animation-duration: 16s; }
.fe2 { top: 25%; right: 8%; animation-duration: 12s; animation-delay: -2s; }
.fe3 { top: 60%; left: 3%; animation-duration: 18s; animation-delay: -4s; }
.fe4 { top: 75%; right: 5%; animation-duration: 15s; animation-delay: -6s; }
.fe5 { top: 40%; left: 12%; animation-duration: 20s; animation-delay: -8s; }
.fe6 { top: 85%; left: 50%; animation-duration: 13s; animation-delay: -3s; }

@keyframes drift {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(20px,-20px) rotate(15deg); }
  50% { transform: translate(-15px,-30px) rotate(-10deg); }
  75% { transform: translate(10px,-10px) rotate(8deg); }
}

/* ==== Logo ==== */
.yumpa-logo {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  display: inline-flex;
  gap: 1px;
  line-height: 1;
  user-select: none;
}
.yumpa-logo span {
  display: inline-block;
  animation: logoBounce 2s cubic-bezier(0.34,1.56,0.64,1) infinite;
}
@keyframes logoBounce {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-3deg); }
}

/* ==== Nav ==== */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px;
  background: rgba(255,248,240,0.85);
  backdrop-filter: blur(14px);
  border-bottom: 2px dashed rgba(0,0,0,0.06);
}
.nav-center { display: flex; gap: 4px; }
.nav-link {
  padding: 10px 18px; border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 15px;
  color: var(--dark); cursor: pointer; transition: all 0.2s;
}
.nav-link:hover { background: rgba(255,94,159,0.08); transform: translateY(-2px); }
.nav-link.active {
  background: linear-gradient(135deg, #FFDDE9, #FFE0EC);
  color: var(--pink); font-weight: 600;
}
.nav-right { display: flex; gap: 12px; align-items: center; }
.nav-signin {
  background: none; border: none; font-family: 'Fredoka', sans-serif;
  font-weight: 500; font-size: 15px; color: var(--dark); cursor: pointer;
  padding: 10px 18px; border-radius: 100px;
}
.nav-signin:hover { background: rgba(0,0,0,0.04); }
.nav-signup {
  background: linear-gradient(135deg, var(--pink), var(--coral));
  color: white; border: none;
  padding: 10px 22px; border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 15px;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  box-shadow: 0 6px 20px rgba(255,94,159,0.35);
  transition: transform 0.2s;
}
.nav-signup:hover { transform: translateY(-2px) scale(1.04); }
.nav-signup:active { transform: translateY(0) scale(0.98); }

/* ==== Main ==== */
.main {
  position: relative; z-index: 5;
  max-width: 1080px; margin: 0 auto; padding: 32px 32px 0;
}

/* ==== Hero ==== */
.hero {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px;
  align-items: center; margin-bottom: 36px;
}
.greeting-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: white; padding: 8px 16px; border-radius: 100px;
  border: 2px solid rgba(0,0,0,0.05);
  font-size: 13px; font-weight: 600; color: var(--muted);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  margin-bottom: 16px;
}
.greet-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(78,205,196,0.2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(78,205,196,0.2); }
  50% { box-shadow: 0 0 0 8px rgba(78,205,196,0); }
}
.greeting {
  font-family: 'Fredoka', sans-serif;
  font-size: 56px; font-weight: 600; line-height: 1.05;
  color: var(--dark);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.gname {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wave-hand {
  display: inline-block; font-size: 52px;
  animation: wave 2.5s ease-in-out infinite; transform-origin: 70% 70%;
}
@keyframes wave {
  0%,60%,100% { transform: rotate(0); }
  10%,30%,50% { transform: rotate(18deg); }
  20%,40% { transform: rotate(-12deg); }
}
.greeting-sub {
  margin-top: 12px; font-size: 17px; color: var(--muted); max-width: 440px;
}

.hero-stats {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-top: 28px;
}

/* ==== Streak ==== */
.streak-card {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 14px 14px; border-radius: 22px;
  background: linear-gradient(135deg, #FFF4D0, #FFE4D1);
  border: 2px solid rgba(255,140,97,0.2);
  box-shadow: 0 8px 24px rgba(255,140,97,0.15);
  min-width: 160px;
  overflow: hidden;
}
.streak-card.cold {
  background: linear-gradient(135deg, #F5F5F7, #EEEEF2);
  border-color: rgba(0,0,0,0.06); box-shadow: none;
}
.streak-card.cold .flame-outer { fill: #D0D0D8; }
.streak-card.cold .flame-inner { opacity: 0.3; }
.flame-wrap { position: relative; }
/* Flame always animates — even on cold state so the streak card feels alive */
.flame-outer {
  animation: flameFlicker 1.2s ease-in-out infinite;
  transform-origin: center bottom;
}
.flame-inner {
  animation: flameFlicker 0.8s ease-in-out infinite reverse;
  transform-origin: center bottom;
}
@keyframes flameFlicker {
  0%,100% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(1.08) scaleX(0.95); }
}
.streak-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--muted);
}
.streak-num {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: 30px; color: var(--dark); line-height: 1;
}
.streak-unit { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.streak-spark {
  position: absolute; color: var(--yellow); font-size: 12px;
  animation: sparkle 2s ease-in-out infinite;
}
.streak-spark.sp1 { top: 8px; right: 14px; }
.streak-spark.sp2 { bottom: 10px; right: 28px; animation-delay: 1s; }
.streak-card.cold .streak-spark { display: none; }
@keyframes sparkle {
  0%,100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ==== Level ==== */
.level-card {
  background: white; border-radius: 22px; padding: 14px 20px;
  border: 2px solid rgba(0,0,0,0.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}
.level-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.level-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 16px;
  color: var(--dark);
  background: linear-gradient(135deg, #FFF4D0, #FFE4D1);
  padding: 4px 12px; border-radius: 100px;
}
.level-star { animation: starSpin 4s linear infinite; display: inline-block; }
@keyframes starSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.level-xp { font-size: 13px; color: var(--muted); font-weight: 600; }
.level-bar-bg {
  position: relative; height: 24px; background: #F5F0E8; border-radius: 100px; overflow: hidden;
}
.level-bar-fill {
  position: relative; height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--yellow), var(--mint));
  background-size: 200% 100%;
  border-radius: 100px;
  animation: barShift 4s ease-in-out infinite;
  transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes barShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.level-bar-shine {
  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shine 2.5s linear infinite;
}
@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.level-bar-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--dark);
  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
}

/* ==== Yumpi stage ==== */
.hero-right { display: flex; justify-content: center; align-items: center; }
.yumpi-stage {
  position: relative; width: 280px; height: 280px;
  display: flex; justify-content: center; align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
/* Ambient rage aura — huge blurred radial, no hard edges.
   Normal blend (no multiply) so ring + flames on top read cleanly. */
.rage-aura {
  position: absolute;
  top: 50%; left: 50%;
  width: 340px; height: 340px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(22px);
  transition: opacity 0.3s, background 0.25s;
  z-index: 0;
}
/* Anger marks container */
.rage-steams {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
.anger-p {
  position: absolute;
  animation: angerBurst var(--dur, 1000ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 1px 3px rgba(200, 20, 40, 0.4));
  transform-origin: center;
}
@keyframes angerBurst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3) rotate(0);
  }
  18% {
    opacity: 1;
    transform: translate(calc(var(--ax) * 0.3), calc(var(--ay) * 0.2)) scale(1.35) rotate(calc(var(--arot) * 0.3));
  }
  55% {
    opacity: 1;
    transform: translate(calc(var(--ax) * 0.75), calc(var(--ay) * 0.7)) scale(1.1) rotate(calc(var(--arot) * 0.7));
  }
  100% {
    opacity: 0;
    transform: translate(var(--ax), var(--ay)) scale(0.7) rotate(var(--arot));
  }
}
/* Shake on click when raging */
@keyframes yumpiRageShake {
  0% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-4px) rotate(-2deg); }
  30% { transform: translateX(5px) rotate(3deg); }
  45% { transform: translateX(-3px) rotate(-1deg); }
  60% { transform: translateX(3px) rotate(1deg); }
  80% { transform: translateX(-1px) rotate(0); }
  100% { transform: translateX(0) rotate(0); }
}
.yumpi.raging {
  filter: drop-shadow(0 4px 10px rgba(255, 60, 80, 0.3));
}
.yumpi-shadow {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 20px; background: radial-gradient(ellipse, rgba(0,0,0,0.15), transparent 70%);
  animation: shadowPulse 2s ease-in-out infinite;
}
@keyframes shadowPulse {
  0%,100% { transform: translateX(-50%) scaleX(1); opacity: 0.6; }
  50% { transform: translateX(-50%) scaleX(0.7); opacity: 0.3; }
}
.yumpi {
  animation: jellyBounce 2s cubic-bezier(0.34,1.56,0.64,1) infinite;
  transform-origin: center bottom;
}
@keyframes jellyBounce {
  0%,100% { transform: translateY(0) scaleY(1) scaleX(1); }
  40% { transform: translateY(-25px) scaleY(1.05) scaleX(0.95); }
  70% { transform: translateY(0) scaleY(0.92) scaleX(1.08); }
  85% { transform: translateY(0) scaleY(1.02) scaleX(0.98); }
}
.speech-bubble {
  position: absolute; top: 10px; right: -10px;
  background: white; padding: 10px 16px; border-radius: 18px;
  border: 3px solid var(--dark);
  font-family: 'Fredoka', sans-serif; font-size: 14px; font-weight: 500;
  box-shadow: 4px 4px 0 var(--dark);
  animation: bubbleFloat 3s ease-in-out infinite;
}
@keyframes bubbleFloat {
  0%,100% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-6px) rotate(-2deg); }
}
.sb-tail {
  position: absolute; bottom: -8px; left: 20px;
  width: 14px; height: 14px; background: white;
  border-right: 3px solid var(--dark); border-bottom: 3px solid var(--dark);
  transform: rotate(45deg);
  transition: background 0.3s;
}
/* Speech bubble rage states */
.speech-bubble.sb-warn { background: #FFF4D0; box-shadow: 4px 4px 0 #D9A300; }
.speech-bubble.sb-warn .sb-tail { background: #FFF4D0; }
.speech-bubble.sb-mad {
  background: #FFDDE9; box-shadow: 4px 4px 0 #E63980;
  animation: bubbleFloat 2s ease-in-out infinite, sbShake 0.25s ease-in-out infinite;
}
.speech-bubble.sb-mad .sb-tail { background: #FFDDE9; }
.speech-bubble.sb-rage {
  background: #FF5E9F; color: white;
  border-color: #B8005E; box-shadow: 4px 4px 0 #B8005E;
  animation: bubbleFloat 1.5s ease-in-out infinite, sbShake 0.12s ease-in-out infinite;
}
.speech-bubble.sb-rage .sb-tail {
  background: #FF5E9F;
  border-right-color: #B8005E; border-bottom-color: #B8005E;
}
@keyframes sbShake {
  0%, 100% { margin-left: 0; }
  50% { margin-left: 2px; }
}
.orbit {
  position: absolute; font-size: 26px;
  animation: orbit 8s linear infinite;
}
.orbit.o1 { top: 20px; left: 20px; animation-delay: 0s; }
.orbit.o2 { bottom: 50px; right: 10px; animation-delay: -2.5s; animation-duration: 6s; }
.orbit.o3 { top: 50%; left: -10px; animation-delay: -5s; animation-duration: 7s; }
@keyframes orbit {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(15px,-10px) rotate(90deg); }
  50% { transform: translate(0,-20px) rotate(180deg); }
  75% { transform: translate(-15px,-10px) rotate(270deg); }
}

/* ==== Daily ==== */
.daily-section { margin-bottom: 24px; }
.daily-card {
  background: linear-gradient(135deg, #FFE0EC 0%, #FFF4D0 50%, #DFF6F4 100%);
  border-radius: 18px; padding: 12px 14px;
  border: 2px solid rgba(0,0,0,0.05);
  position: relative; overflow: hidden;
  box-shadow: 0 6px 18px rgba(255,94,159,0.08);
}
.daily-card::before {
  content: ''; position: absolute; top: -24px; right: -24px;
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,63,0.3), transparent);
}
.daily-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; position: relative; }
.daily-title { display: flex; align-items: center; gap: 10px; }
.daily-emoji {
  font-size: 18px; padding: 6px; background: white; border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.06);
  animation: targetWobble 3s ease-in-out infinite;
}
@keyframes targetWobble {
  0%,100% { transform: rotate(0); }
  50% { transform: rotate(10deg); }
}
.daily-t1 {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--dark);
}
.daily-t2 { font-size: 11px; color: var(--muted); }
.daily-count {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 18px; color: var(--pink);
  background: white; padding: 4px 12px; border-radius: 100px;
  box-shadow: 0 3px 8px rgba(255,94,159,0.15);
}
.daily-dots { display: flex; gap: 8px; margin-bottom: 10px; position: relative; }
.daily-dot {
  flex: 1; height: 32px; border-radius: 12px;
  background: white; display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--muted);
  border: 2px dashed rgba(0,0,0,0.1);
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.daily-dot.done {
  background: linear-gradient(135deg, var(--mint), #3FBFB7);
  color: white; border: 2px solid var(--mint);
  font-size: 16px;
  animation: dotPop 0.5s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 4px 10px rgba(78,205,196,0.4);
}
@keyframes dotPop {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.daily-bar {
  height: 5px; background: rgba(255,255,255,0.6); border-radius: 100px; overflow: hidden;
}
.daily-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--mint), var(--pink));
  border-radius: 100px; transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

/* ==== CTA friend ==== */
.cta-section { margin-bottom: 40px; }
.cta-friend {
  width: 100%; display: flex; align-items: center; gap: 20px;
  padding: 22px 28px; border-radius: 26px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #FF5E9F 0%, #FF8C61 60%, #FFD23F 120%);
  color: white; position: relative; overflow: hidden;
  box-shadow: 0 14px 36px rgba(255,94,159,0.35);
  transition: all 0.3s;
  text-align: left;
}
.cta-friend:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(255,94,159,0.4); }
.cta-friend:active { transform: translateY(0); }
.cta-friend::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.3), transparent 50%);
  pointer-events: none;
}
.cta-icon {
  font-size: 36px; padding: 14px; background: rgba(255,255,255,0.25); border-radius: 18px;
  backdrop-filter: blur(10px);
  animation: controllerShake 3s ease-in-out infinite;
}
@keyframes controllerShake {
  0%,100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
.cta-text { flex: 1; position: relative; }
.cta-title {
  font-family: 'Fredoka', sans-serif; font-size: 24px; font-weight: 600; margin-bottom: 4px;
}
.cta-sub { font-size: 14px; opacity: 0.9; }
.cta-badge {
  background: white; color: var(--pink);
  padding: 4px 12px; border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 2px; position: relative;
  animation: liveBadge 2s ease-in-out infinite;
}
@keyframes liveBadge {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.8); }
  50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}
.cta-arrow {
  width: 48px; height: 48px; background: white; color: var(--pink);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  transition: transform 0.3s;
}
.cta-friend:hover .cta-arrow { transform: translateX(6px); }
.cta-stars { position: absolute; inset: 0; pointer-events: none; }
.cta-stars span {
  position: absolute; color: white; opacity: 0.6;
  animation: sparkle 3s ease-in-out infinite;
}
.cta-stars span:nth-child(1) { top: 20%; left: 40%; font-size: 12px; }
.cta-stars span:nth-child(2) { top: 60%; left: 60%; font-size: 14px; animation-delay: 1s; }
.cta-stars span:nth-child(3) { top: 30%; right: 15%; font-size: 10px; animation-delay: 2s; }

/* ==== Games ==== */
.games-section { margin-bottom: 40px; }
.games-header { margin-bottom: 20px; }
.games-title {
  font-family: 'Fredoka', sans-serif; font-size: 28px; font-weight: 600;
  color: var(--dark);
  display: flex; align-items: center; gap: 12px;
}
.gh-emoji {
  font-size: 32px;
  animation: controllerShake 3s ease-in-out infinite;
  display: inline-block;
}
.gh-count {
  font-size: 13px; font-weight: 600; color: var(--muted);
  background: white; padding: 4px 12px; border-radius: 100px;
  border: 2px solid rgba(0,0,0,0.06);
  margin-left: auto;
}
.games-subtitle { font-size: 14px; color: var(--muted); margin-top: 6px; }
.games-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.game-card {
  position: relative; padding: 22px 20px 20px;
  border-radius: 24px; border: 2px solid rgba(0,0,0,0.05);
  text-align: left; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden; isolation: isolate;
  transform: rotate(0);
}
.game-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.7), transparent 40%);
  pointer-events: none;
}
.game-card:hover {
  transform: translateY(-8px) rotate(var(--rot)) scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  border-color: var(--accent);
}
.game-card:active { transform: translateY(-2px) scale(0.98); }
.game-card.played { opacity: 0.85; }
.game-card.played::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(78,205,196,0.15));
  pointer-events: none;
}
.game-emoji-wrap {
  position: relative; margin-bottom: 14px; display: inline-block;
}
.game-emoji-bg {
  width: 56px; height: 56px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.game-card:hover .game-emoji-bg {
  transform: rotate(-10deg) scale(1.1);
}
.game-emoji { font-size: 28px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.played-check {
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--mint); color: white;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--cream);
  animation: dotPop 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.game-title {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 17px;
  color: var(--dark); margin-bottom: 2px;
}
.game-sub { font-size: 12px; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
.game-tagline {
  font-size: 11px; color: var(--dark); opacity: 0.7; font-weight: 600;
  padding-bottom: 12px; border-bottom: 2px dashed rgba(0,0,0,0.08);
  margin-bottom: 12px;
}
.game-play-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 100px;
  color: white; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 12px;
  transition: all 0.25s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.game-card:hover .game-play-btn {
  padding: 7px 18px;
}
.game-card:hover .arrow { transform: translateX(3px); }
.arrow { transition: transform 0.25s; display: inline-block; }
.game-sparkle {
  position: absolute; color: var(--accent); font-size: 10px; opacity: 0;
  animation: sparkle 2s ease-in-out infinite;
}
.game-card:hover .game-sparkle { opacity: 1; }
.s1 { top: 15px; right: 20px; }
.s2 { bottom: 60%; right: 30px; animation-delay: 0.8s; }

/* ==== Leaderboard ==== */
.lb-section { margin-bottom: 40px; }
.lb-card {
  background: white; border-radius: 26px; padding: 24px 28px;
  border: 2px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.lb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.lb-title {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 20px;
  color: var(--dark); display: flex; align-items: center; gap: 10px;
}
.lb-emoji { font-size: 24px; animation: trophyBounce 2s ease-in-out infinite; display: inline-block; }
@keyframes trophyBounce {
  0%,100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-4px) rotate(-8deg); }
  75% { transform: translateY(-4px) rotate(8deg); }
}
.lb-link {
  font-size: 13px; font-weight: 600; color: var(--pink); cursor: pointer;
}
.lb-link:hover { text-decoration: underline; }
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row {
  display: grid; grid-template-columns: 48px 40px 1fr auto; gap: 14px;
  align-items: center; padding: 12px 16px; border-radius: 16px;
  background: #FAFAFA; transition: all 0.2s;
}
.lb-row:hover { background: #F3F3F7; transform: translateX(4px); }
.lb-row.gold { background: linear-gradient(90deg, #FFF4D0, #FFE8A0); }
.lb-row.silver { background: linear-gradient(90deg, #F0F0F5, #E0E0EA); }
.lb-row.bronze { background: linear-gradient(90deg, #FFE4D1, #FFD0B0); }
.lb-row.me {
  background: linear-gradient(90deg, #FFDDE9, #FFE4EC);
  border: 2px dashed var(--pink);
}
.lb-rank {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 22px;
  text-align: center; color: var(--dark);
}
.lb-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.lb-avatar.guest-av {
  background: linear-gradient(135deg, #E8E8EE, #D0D0D8); color: var(--muted);
}
.lb-name {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 15px; color: var(--dark);
}
.lb-tag { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.lb-score {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 20px;
  color: var(--dark);
}
.lb-row.gold .lb-score { color: #B8860B; }

/* ==== Footer (compact horizontal) ==== */
.footer {
  position: relative;
  padding: 28px 20px 20px;
  margin-top: 24px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.foot-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,248,240,0.98) 100%);
  border: 1.5px solid rgba(255,210,63,0.25);
  border-radius: 22px;
  padding: 14px 22px;
  box-shadow: 0 8px 24px rgba(255,94,159,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.foot-card::before {
  content: '✦';
  position: absolute; top: -8px; left: 24px;
  font-size: 14px; color: var(--yellow);
  animation: footSpark 2.8s ease-in-out infinite;
}
@keyframes footSpark {
  0%, 100% { transform: rotate(0) scale(1); opacity: 0.6; }
  50% { transform: rotate(180deg) scale(1.4); opacity: 1; }
}

.foot-left { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.foot-brand-row { display: flex; align-items: center; gap: 8px; }
.foot-mini-blob {
  display: inline-flex;
  animation: miniBlobBob 2.6s ease-in-out infinite;
}
@keyframes miniBlobBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-3px) rotate(4deg); }
}
.foot-tag {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600; font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.ft-en {
  background: linear-gradient(135deg, var(--pink), var(--coral));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 700;
}
.ft-dot { color: rgba(26,26,46,0.3); }
.ft-th { color: var(--muted); font-size: 11px; }

.foot-middle {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
}
.foot-stats {
  display: flex; flex-wrap: wrap;
  gap: 6px; justify-content: flex-end;
}
.fs-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: white;
  border: 1.5px solid rgba(0,0,0,0.06);
  font-family: 'Fredoka', sans-serif;
  font-size: 11px; font-weight: 600;
  color: var(--dark);
  transition: transform 0.22s var(--bouncy);
}
.fs-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255,94,159,0.15); }
.fs-chip b { color: var(--pink); font-weight: 800; }
.fs-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2EC76B;
  box-shadow: 0 0 0 3px rgba(46,199,107,0.25);
  animation: fsPulse 1.6s ease-in-out infinite;
}
@keyframes fsPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46,199,107,0.25); }
  50% { box-shadow: 0 0 0 7px rgba(46,199,107,0); }
}
.fd-icon {
  font-size: 12px;
  animation: fdTick 2s ease-in-out infinite;
  display: inline-block;
}
@keyframes fdTick {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

.foot-links {
  display: flex; flex-wrap: wrap;
  gap: 5px; justify-content: flex-end;
}
.fl-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1.5px solid rgba(0,0,0,0.06);
  font-family: 'Fredoka', sans-serif;
  font-size: 11px; font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s var(--bouncy);
}
.fl-chip:hover {
  border-color: rgba(255,94,159,0.4);
  color: var(--pink);
  background: rgba(255,94,159,0.05);
  transform: translateY(-1px);
}

/* Bottom meta line — ZHiCK credit */
.foot-line {
  color: var(--muted); font-size: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 10px;
  margin-top: 12px;
}
.fl-sep { color: rgba(26,26,46,0.25); }
.fl-heart {
  display: inline-block;
  animation: flHeart 1.4s ease-in-out infinite;
}
@keyframes flHeart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
.fl-dev {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-decoration: none;
  letter-spacing: 0.5px;
  position: relative;
  transition: opacity 0.2s;
}
.fl-dev:hover { opacity: 0.75; }
.fl-sub {
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.fl-sub:hover { color: var(--pink); }

@media (max-width: 640px) {
  .foot-card { flex-direction: column; align-items: center; gap: 10px; }
  .foot-left, .foot-middle { align-items: center; }
  .foot-stats, .foot-links { justify-content: center; }
}

/* ==== Confetti ==== */
.confetti-layer {
  position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden;
}
.confetti-piece {
  position: absolute; top: 50%; left: 50%;
  border-radius: 2px;
  animation: confettiFall forwards ease-out;
  transform: translate(-50%,-50%);
}
@keyframes confettiFall {
  0% { transform: translate(-50%,-50%) rotate(0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 500px)) rotate(var(--rot)); opacity: 0; }
}

/* ==== Notification ==== */
.notif {
  position: fixed; top: 24px; right: 24px; z-index: 300;
  display: flex; align-items: center; gap: 14px;
  background: white; padding: 16px 22px; border-radius: 20px;
  border: 3px solid var(--mint);
  box-shadow: 0 12px 32px rgba(78,205,196,0.3);
  animation: notifSlide 0.5s cubic-bezier(0.34,1.56,0.64,1);
  max-width: 340px;
}
@keyframes notifSlide {
  0% { transform: translateX(400px); }
  100% { transform: translateX(0); }
}
.notif-emoji {
  font-size: 32px;
  animation: notifBounce 0.8s ease-in-out infinite;
}
@keyframes notifBounce {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(-10deg); }
}
.notif-t1 { font-family:'Fredoka',sans-serif; font-weight: 600; font-size: 16px; color: var(--dark); }
.notif-t2 { font-size: 12px; color: var(--muted); }

/* ==== Responsive ==== */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-right { order: -1; }
  .games-grid { grid-template-columns: repeat(2, 1fr); }
  .greeting { font-size: 40px; }
  .nav-center { display: none; }
  .nav { padding: 14px 20px; }
  .main { padding: 20px 16px 0; }
}

/* ======================================================================
   YUMPI RAGE — 5 escalating stages (calm → annoyed → angry → furious → ferocious)
   Color lerp happens in React via rageColor(rage, mascotColor); these
   classes layer per-stage visual effects around the mascot.
   ====================================================================== */

/* Stage 1+: pink cheek flush overlay inside the blob silhouette.
   Uses absolute ellipses on a full-bleed overlay; blend-mode multiply
   so the flush darkens the mascot color underneath without adding
   a hard edge. Opacity scales with stage. */
.rage-cheeks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
  /* Match the blob silhouette via CSS clip — full bleed ellipse. */
}
.rage-cheek {
  position: absolute;
  width: 34px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(230,40,60,0.45), transparent 70%);
  filter: blur(3px);
  mix-blend-mode: multiply;
  animation: rageCheekPulse 1.6s cubic-bezier(0.34,1.56,0.64,1) infinite;
}
.rage-cheek.left  { left: 27%; top: 58%; }
.rage-cheek.right { right: 27%; top: 58%; animation-delay: 0.2s; }
.yumpi.stage-1 .rage-cheek { opacity: 0.55; }
.yumpi.stage-2 .rage-cheek { opacity: 0.9; }
.yumpi.stage-3 .rage-cheek,
.yumpi.stage-4 .rage-cheek { opacity: 1; }
@keyframes rageCheekPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* Stage 3+: SPINNING dashed ring that ALWAYS sits around the blob.
   Using a solid visible dashed border + a separate shock-wave pulse. */
.rage-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 240px; height: 240px;
  margin: -120px 0 0 -120px;       /* true center anchor, no translate needed */
  border-radius: 50%;
  border: 4px dashed #E62038;      /* bold solid red dashed outline */
  box-shadow:
    0 0 0 3px rgba(255,210,63,0.35),
    inset 0 0 26px rgba(230,32,56,0.2);
  pointer-events: none;
  z-index: 1;
  animation: rageRingSpin 2.4s linear infinite;
}
.rage-ring::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 4px solid rgba(230,32,56,0.65);
  animation: rageRingShock 1.4s cubic-bezier(0.34,1.56,0.64,1) infinite;
}
@keyframes rageRingSpin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@keyframes rageRingShock {
  0%   { transform: scale(1);    opacity: 0.85; }
  100% { transform: scale(1.4);  opacity: 0; }
}

/* Stage 3+: steam puffs drifting up from the head */
.rage-steam {
  position: absolute;
  top: 10%; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 80px;
  pointer-events: none;
  z-index: 6;
}
.rage-steam-p {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,200,220,0.85), rgba(200,200,220,0.1) 65%, transparent);
  filter: blur(4px);
  opacity: 0;
  animation: rageSteamRise 1.4s ease-out infinite;
}
.rage-steam-p.p1 { left: 20%;  animation-delay: 0s; }
.rage-steam-p.p2 { left: 45%;  animation-delay: 0.3s; }
.rage-steam-p.p3 { left: 70%;  animation-delay: 0.6s; }
@keyframes rageSteamRise {
  0%   { transform: translateY(20px) scale(0.5); opacity: 0; }
  30%  { opacity: 0.8; }
  100% { transform: translateY(-60px) scale(1.4); opacity: 0; }
}

/* Stage 4: flame belt — 4 emoji flames licking up LEFT/RIGHT of the blob.
   Positioned at the base of the stage so they bracket the blob clearly. */
.rage-flames {
  position: absolute;
  bottom: 20px; left: 0;
  width: 100%; height: 110px;
  pointer-events: none;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 20px;
  box-sizing: border-box;
}
.rage-flame {
  font-size: 34px;
  line-height: 1;
  animation: rageFlameLick 0.6s cubic-bezier(0.34,1.56,0.64,1) infinite;
  filter: drop-shadow(0 0 10px rgba(255,140,40,0.6));
}
.rage-flame.f1 { animation-delay: 0s; }
.rage-flame.f2 { animation-delay: 0.12s; font-size: 42px; }
.rage-flame.f3 { animation-delay: 0.24s; font-size: 38px; }
.rage-flame.f4 { animation-delay: 0.36s; }
@keyframes rageFlameLick {
  0%, 100% { transform: translateY(0) scaleY(1) rotate(-3deg); opacity: 0.9; }
  50%      { transform: translateY(-8px) scaleY(1.25) rotate(4deg); opacity: 1; }
}

/* Aura color ramp per stage — stronger red mix at top stages */
.rage-aura.stage-2 { filter: blur(20px); }
.rage-aura.stage-3 { filter: blur(24px); }
.rage-aura.stage-4 {
  filter: blur(28px);
  animation: rageAuraPulse 0.8s cubic-bezier(0.34,1.56,0.64,1) infinite;
}
@keyframes rageAuraPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1);    }
  50%      { transform: translate(-50%,-50%) scale(1.08); }
}

/* Stage class drives shake intensity too */
.yumpi.stage-1 { animation-duration: 0.45s !important; }
.yumpi.stage-2 { animation-duration: 0.3s !important;  }
.yumpi.stage-3 { animation-duration: 0.2s !important;  }
.yumpi.stage-4 {
  animation-duration: 0.14s !important;
  filter: drop-shadow(0 0 14px rgba(255,60,80,0.55)) drop-shadow(0 0 28px rgba(230,32,56,0.35));
}

/* Legacy class kept harmless for any stale CSS cache */
.yumpi.raging { /* no-op — stage-N classes above take over */ }

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.15_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.15_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/guest/guest-lock.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ======================================================================
   GuestLock — "Sign up to unlock" full-card state.

   Used on /rooms, /friends, and any other registered-only surface when
   the current user is a guest. The visual language stays fully within
   the Yumpa design system (candy palette, Fredoka+Nunito, bouncy motion,
   hero Blob) so a "locked" page doesn't feel cold or punishing.
   ====================================================================== */

.gl-root {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  font-family: 'Nunito', system-ui, sans-serif;
}

/* Background — same drifting blobs as other Yumpa pages, tinted through
   the pink/yellow/mint palette (never grey). */
.gl-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.gl-bg-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(72px);
  opacity: 0.55;
  animation: glBbFloat 14s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.gl-bg-blob.b1 {
  width: 380px; height: 380px;
  top: -80px; left: -100px;
  background: radial-gradient(circle, rgba(255, 94, 159, 0.55), transparent 65%);
}
.gl-bg-blob.b2 {
  width: 320px; height: 320px;
  bottom: -90px; right: -80px;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.55), transparent 65%);
  animation-delay: 3s;
}
.gl-bg-blob.b3 {
  width: 260px; height: 260px;
  top: 40%; right: 20%;
  background: radial-gradient(circle, rgba(78, 205, 196, 0.45), transparent 65%);
  animation-delay: 6s;
}
@keyframes glBbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-30px) scale(1.06); }
}

.gl-decor { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.gl-dec {
  position: absolute;
  font-size: 28px;
  animation: glDecFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(26, 26, 46, 0.14));
}
.gl-dec.d1 { top: 12%; left: 12%; animation-delay: 0s; }
.gl-dec.d2 { top: 18%; right: 14%; animation-delay: 1.2s; }
.gl-dec.d3 { bottom: 22%; left: 10%; animation-delay: 2.4s; }
.gl-dec.d4 { bottom: 14%; right: 12%; animation-delay: 3.6s; }
@keyframes glDecFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-12px) rotate(5deg); }
}

/* Card */
.gl-card {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F0 100%);
  border-radius: 28px;
  padding: 44px 32px 28px;
  width: min(520px, 94vw);
  box-shadow:
    0 28px 56px rgba(255, 94, 159, 0.22),
    0 8px 20px rgba(123, 97, 255, 0.12);
  text-align: center;
  animation: glCardIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: rotate(-0.6deg);
}
@keyframes glCardIn {
  0%   { opacity: 0; transform: translateY(30px) rotate(-4deg) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) rotate(-0.6deg) scale(1); }
}

/* Hero */
.gl-hero {
  position: relative;
  width: 180px; height: 180px;
  margin: -6px auto 10px;
  display: flex; align-items: center; justify-content: center;
}
.gl-hero-aura {
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.45), transparent 70%);
  animation: glAuraPulse 2.8s ease-in-out infinite;
}
@keyframes glAuraPulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.08); opacity: 0.85; }
}
.gl-spark {
  position: absolute;
  font-size: 22px;
  animation: glSparkOrbit 3.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.gl-spark.s1 { top: -6px; right: 18px; }
.gl-spark.s2 { bottom: 8px; left: -6px; animation-delay: 1.2s; }
@keyframes glSparkOrbit {
  0%, 100% { transform: translateY(0) rotate(-10deg) scale(1); }
  50%      { transform: translateY(-8px) rotate(15deg) scale(1.15); }
}

/* Chip */
.gl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: linear-gradient(135deg, #7B61FF, #FF5E9F);
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(123, 97, 255, 0.35);
}
.gl-chip-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: white;
  animation: glChipDot 1.4s ease-in-out infinite;
}
@keyframes glChipDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.gl-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: var(--dark, #1A1A2E);
  margin: 0 0 4px;
}
.gl-title-th {
  font-size: 15px;
  color: var(--muted, #6B6B85);
  margin: 0 0 16px;
}
.gl-blurb {
  font-size: 14px;
  color: var(--muted, #6B6B85);
  margin: 0 auto 18px;
  max-width: 360px;
  line-height: 1.55;
}

/* Unlock list */
.gl-unlocks {
  list-style: none;
  padding: 14px;
  margin: 0 0 20px;
  background: rgba(255, 210, 63, 0.15);
  border: 1.5px dashed rgba(255, 140, 97, 0.4);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.gl-unlocks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--dark, #1A1A2E);
}
.gl-unlock-ico {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: white;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(26, 26, 46, 0.08);
}
.gl-unlock-label { display: flex; flex-direction: column; gap: 2px; }
.gl-unlock-label b {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.gl-unlock-th {
  font-size: 11px;
  color: var(--muted, #6B6B85);
}

/* CTAs */
.gl-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.gl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease;
}
.gl-btn.primary {
  background: linear-gradient(135deg, var(--pink, #FF5E9F), var(--coral, #FF8C61));
  color: white;
  box-shadow:
    0 8px 20px rgba(255, 94, 159, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}
.gl-btn.primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: glBtnShine 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  pointer-events: none;
}
@keyframes glBtnShine {
  0% { transform: translateX(-120%); }
  60% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
.gl-btn.primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 14px 28px rgba(255, 94, 159, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.gl-btn.primary:active { transform: translateY(0) scale(0.98); }

.gl-btn.ghost {
  background: white;
  color: var(--dark, #1A1A2E);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 94, 159, 0.3),
    0 3px 8px rgba(26, 26, 46, 0.06);
  font-size: 13px;
  padding: 10px 22px;
}
.gl-btn.ghost b { color: var(--pink, #FF5E9F); }
.gl-btn.ghost:hover {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 94, 159, 0.55),
    0 6px 14px rgba(255, 94, 159, 0.2);
  transform: translateY(-2px);
}

.gl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 94, 159, 0.18);
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--muted, #6B6B85);
}
.gl-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--muted, #6B6B85);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gl-back:hover { color: var(--dark, #1A1A2E); transform: translateX(-3px); }
.gl-back-th { opacity: 0.6; }
.gl-hint { opacity: 0.72; }

/* --------- Compact inline banner variant (for embedding under a hero) -- */
.gl-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  background: linear-gradient(135deg, #FFF3E0, #FFE8F0);
  border: 1.5px dashed rgba(255, 94, 159, 0.38);
  border-radius: 18px;
  box-shadow: 0 6px 14px rgba(255, 94, 159, 0.12);
  margin: 10px 0 16px;
  transform: rotate(-0.4deg);
}
.gl-banner-ico {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: white;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 3px 8px rgba(255, 94, 159, 0.28);
}
.gl-banner-text { flex: 1; min-width: 0; }
.gl-banner-text b {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--dark, #1A1A2E);
  display: block;
  line-height: 1.2;
}
.gl-banner-text span {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--muted, #6B6B85);
}
.gl-banner-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink, #FF5E9F), var(--coral, #FF8C61));
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(255, 94, 159, 0.38);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease;
  white-space: nowrap;
}
.gl-banner-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 16px rgba(255, 94, 159, 0.5);
}

@media (max-width: 520px) {
  .gl-card { padding: 32px 22px 22px; border-radius: 22px; }
  .gl-title { font-size: 22px; }
  .gl-hero { width: 140px; height: 140px; }
  .gl-foot { flex-direction: column; gap: 8px; text-align: center; }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.15_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.15_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/yumpa-shared.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * yumpa-shared.css — tokens + primitives used by every page that isn't
 * landing or home. Keeps the "designed" aesthetic consistent across
 * auth, leaderboard, profile, friends, rooms, settings, support, etc.
 */

:root {
  --pink: #FF5E9F;
  --yellow: #FFD23F;
  --mint: #4ECDC4;
  --purple: #7B61FF;
  --coral: #FF8C61;
  --dark: #1A1A2E;
  --cream: #FFF8F0;
  --muted: #6B6B85;
  --bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bouncy-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

.yumpa-page {
  min-height: 100vh;
  position: relative;
  font-family: 'Nunito', sans-serif;
  color: var(--dark);
  background: var(--cream);
  overflow-x: hidden;
}

/* ============ Animated background ============ */
.yp-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.yp-bg-grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(26,26,46,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.yp-bg-blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.38;
  animation: ypBlobFloat 18s ease-in-out infinite;
}
.yp-bg-blob.bb1 { width: 420px; height: 420px; background: #FFCCE0; top: -110px; left: -130px; }
.yp-bg-blob.bb2 { width: 360px; height: 360px; background: #C9F1EE; top: 18%; right: -140px; animation-delay: -4s; }
.yp-bg-blob.bb3 { width: 300px; height: 300px; background: #E4DCFF; bottom: 10%; left: 8%; animation-delay: -8s; }
.yp-bg-blob.bb4 { width: 340px; height: 340px; background: #FFE4D1; bottom: -80px; right: 15%; animation-delay: -12s; }
@keyframes ypBlobFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.08); }
  66% { transform: translate(-30px,20px) scale(0.95); }
}

/* Floating emojis */
.yp-decor {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.yp-decor > span {
  position: absolute; font-size: 22px; opacity: 0.5;
  animation: ypDrift 14s ease-in-out infinite;
}
.yp-decor > span:nth-child(1) { top: 12%; left: 6%; animation-duration: 16s; }
.yp-decor > span:nth-child(2) { top: 25%; right: 8%; animation-duration: 12s; animation-delay: -2s; }
.yp-decor > span:nth-child(3) { top: 60%; left: 3%; animation-duration: 18s; animation-delay: -4s; }
.yp-decor > span:nth-child(4) { top: 75%; right: 6%; animation-duration: 15s; animation-delay: -6s; }
.yp-decor > span:nth-child(5) { top: 40%; left: 14%; animation-duration: 20s; animation-delay: -8s; }
.yp-decor > span:nth-child(6) { top: 85%; left: 50%; animation-duration: 13s; animation-delay: -3s; }
.yp-decor > span:nth-child(7) { top: 8%; left: 38%; animation-duration: 17s; animation-delay: -5s; }
.yp-decor > span:nth-child(8) { top: 55%; right: 28%; animation-duration: 19s; animation-delay: -9s; }
@keyframes ypDrift {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50% { transform: translate(16px, -22px) rotate(10deg); }
}

/* ============ Main content frame ============ */
.yp-main {
  position: relative; z-index: 10;
  max-width: 1080px; margin: 0 auto;
  padding: 0 24px 60px;
}
.yp-main.narrow { max-width: 560px; }
.yp-main.wide { max-width: 1200px; }

/* ============ Nav (sticky floating pill) ============ */
.yp-nav {
  position: sticky; top: 14px; z-index: 50;
  padding: 0 16px;
}
.yp-nav-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 8px 22px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(26, 26, 46, 0.06);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(255, 94, 159, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.yp-nav-inner::before {
  content: '✦'; position: absolute; top: -8px; left: 28px;
  font-size: 14px; color: var(--yellow);
  animation: ypSparkle 2.8s ease-in-out infinite;
}
@keyframes ypSparkle {
  0%, 100% { transform: rotate(0) scale(1); opacity: 0.6; }
  50% { transform: rotate(180deg) scale(1.4); opacity: 1; }
}
.yp-logo {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 26px;
  display: inline-flex; gap: 1px; text-decoration: none;
}
.yp-logo span {
  display: inline-block;
  animation: ypLetterBounce 2s var(--bouncy) infinite;
}
@keyframes ypLetterBounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-5px) rotate(-4deg); }
}

.yp-nav-links {
  display: flex; gap: 2px;
  padding: 4px;
  background: linear-gradient(135deg, rgba(255,248,240,0.9), rgba(255,237,245,0.7));
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(26,26,46,0.05);
}
.yp-nav-links a {
  padding: 8px 14px; border-radius: 999px;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 13.5px;
  color: rgba(26, 26, 46, 0.72);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  transition: all 0.22s var(--bouncy);
  cursor: pointer;
}
.yp-nav-links a .nle { font-size: 13px; transition: transform 0.3s var(--bouncy); }
.yp-nav-links a:hover {
  background: white; color: var(--pink);
  box-shadow: 0 4px 12px rgba(255, 94, 159, 0.15);
  transform: translateY(-1px);
}
.yp-nav-links a:hover .nle { transform: rotate(-14deg) scale(1.2); }
.yp-nav-links a.active {
  background: linear-gradient(135deg, #FFF 0%, #FFF4F9 100%);
  color: var(--pink); font-weight: 700;
  box-shadow: inset 0 0 0 1.5px rgba(255, 94, 159, 0.35), 0 3px 10px rgba(255, 94, 159, 0.15);
}
.yp-nav-right { display: flex; gap: 8px; align-items: center; }
.yp-nav-cta {
  background: linear-gradient(135deg, var(--pink), var(--coral));
  color: white; border: none;
  padding: 9px 18px; border-radius: 999px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255,94,159,0.35);
  transition: all 0.22s var(--bouncy);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.yp-nav-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 28px rgba(255,94,159,0.45);
}

/* ============ Hero pattern ============ */
.yp-hero {
  position: relative;
  padding: 40px 0 28px;
  text-align: center;
}
.yp-hero.split {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px;
  align-items: center;
  text-align: left;
}
.yp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: white;
  border: 2px solid rgba(255,210,63,0.35);
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 12px;
  color: var(--dark);
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  animation: ypChipFloat 3s ease-in-out infinite;
}
.yp-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(78,205,196,0.25);
  animation: ypChipPulse 2s infinite;
}
@keyframes ypChipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ypChipPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(78,205,196,0.25); }
  50% { box-shadow: 0 0 0 10px rgba(78,205,196,0); }
}

.yp-h1 {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05; letter-spacing: -0.5px;
  color: var(--dark);
  margin: 14px 0 10px;
}
.yp-h1 .hl {
  background: linear-gradient(135deg, var(--pink), var(--coral));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.yp-h1 .hl-mint {
  background: linear-gradient(135deg, var(--mint), var(--purple));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.yp-sub {
  font-size: 15px; color: var(--muted);
  max-width: 540px; margin: 0 auto 22px;
  line-height: 1.5;
}
.yp-hero.split .yp-sub { margin: 0 0 22px; }

/* ============ Cards ============ */
.yp-card {
  position: relative;
  background: white;
  border: 2px solid rgba(26,26,46,0.06);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.05);
  transition: transform 0.3s var(--bouncy), box-shadow 0.3s;
}
.yp-card.tilt-l { transform: rotate(-1deg); }
.yp-card.tilt-r { transform: rotate(1deg); }
.yp-card.pastel-pink { background: linear-gradient(135deg,#FFDDE9,#FFE8F0); }
.yp-card.pastel-mint { background: linear-gradient(135deg,#DFF6F4,#E8FBF9); }
.yp-card.pastel-purple { background: linear-gradient(135deg,#E4DCFF,#EEE6FF); }
.yp-card.pastel-yellow { background: linear-gradient(135deg,#FFF4D0,#FFF9E0); }
.yp-card.pastel-coral { background: linear-gradient(135deg,#FFE4D1,#FFEFE0); }
.yp-card:hover { transform: translateY(-4px) rotate(0); box-shadow: 0 16px 36px rgba(255,94,159,0.12); }

/* ============ Buttons ============ */
.yp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14.5px;
  border: none; cursor: pointer;
  transition: all 0.25s var(--bouncy);
  text-decoration: none;
}
.yp-btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--coral));
  color: white;
  box-shadow: 0 10px 24px rgba(255,94,159,0.38), inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative;
  overflow: hidden;
}
.yp-btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 32px rgba(255,94,159,0.5);
}
.yp-btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 50%);
  pointer-events: none;
}
.yp-btn-secondary {
  background: white; color: var(--dark);
  border: 1.5px solid rgba(26,26,46,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.yp-btn-secondary:hover {
  border-color: rgba(255,94,159,0.4);
  color: var(--pink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,94,159,0.15);
}
.yp-btn-ghost {
  background: transparent; color: var(--dark);
  border: 1.5px solid rgba(26,26,46,0.1);
}
.yp-btn-ghost:hover { background: rgba(0,0,0,0.04); transform: translateY(-1px); }

.yp-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ============ Inputs ============ */
.yp-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.yp-label {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 13px;
  color: var(--dark);
  display: flex; align-items: center; gap: 6px;
}
.yp-label .req { color: var(--pink); font-weight: 700; }
.yp-input {
  padding: 12px 18px;
  border: 2px solid rgba(26,26,46,0.08);
  border-radius: 999px;
  background: white;
  font-family: 'Nunito', sans-serif; font-size: 14px;
  color: var(--dark);
  outline: none;
  transition: all 0.22s var(--bouncy);
}
.yp-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255,94,159,0.15);
  transform: translateY(-1px);
}
.yp-input.error {
  border-color: var(--coral);
  animation: ypInputShake 0.35s ease-in-out;
}
/* Hide browser-native password reveal (Edge/IE) — we have our own 👀 toggle */
.yp-input::-ms-reveal,
.yp-input::-ms-clear { display: none; }
/* Hide Chrome's autofill password reveal if triggered by credential manager */
.yp-input::-webkit-credentials-auto-fill-button,
.yp-input::-webkit-contacts-auto-fill-button {
  visibility: hidden; pointer-events: none;
  position: absolute; right: 0;
}
@keyframes ypInputShake {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -4px; }
  75% { margin-left: 4px; }
}
.yp-hint { font-size: 12px; color: var(--muted); }
.yp-error { font-size: 12px; color: var(--pink); font-weight: 600; }

/* ============ Auth card (login/signup/etc) ============ */
.yp-auth-stage {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.yp-auth-card {
  position: relative;
  width: 100%; max-width: 420px;
  background: white;
  border-radius: 28px;
  padding: 36px 32px 30px;
  box-shadow: 0 28px 60px rgba(255,94,159,0.18), 0 6px 20px rgba(0,0,0,0.06);
  border: 2px solid rgba(255,210,63,0.25);
  animation: ypAuthEnter 0.6s var(--bouncy);
}
@keyframes ypAuthEnter {
  0% { opacity: 0; transform: translateY(24px) scale(0.94); }
  60% { transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.yp-auth-card::before {
  content: '✦'; position: absolute; top: 18px; left: 24px;
  font-size: 16px; color: var(--yellow);
  animation: ypSparkle 2.8s ease-in-out infinite;
}
.yp-auth-card::after {
  content: '✧'; position: absolute; top: 22px; right: 26px;
  font-size: 14px; color: var(--pink);
  animation: ypSparkle 2.8s ease-in-out 1.4s infinite;
}

.yp-auth-mascot {
  display: flex; justify-content: center;
  margin-bottom: 8px;
}
.yp-auth-title {
  text-align: center;
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 28px; color: var(--dark);
  margin-bottom: 4px;
}
.yp-auth-sub {
  text-align: center; color: var(--muted); font-size: 13px;
  margin-bottom: 22px;
}
.yp-auth-form {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 16px;
}
.yp-auth-footer {
  text-align: center; font-size: 13px; color: var(--muted);
  margin-top: 8px; padding-top: 14px;
  border-top: 1px dashed rgba(26,26,46,0.1);
}
.yp-auth-footer a {
  color: var(--pink); font-weight: 700; text-decoration: none;
}
.yp-auth-footer a:hover { text-decoration: underline; }

/* ============ Section heads ============ */
.yp-section-head {
  text-align: center; margin-bottom: 28px;
}
.yp-section-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 999px;
  background: white; color: var(--dark);
  border: 1.5px solid rgba(0,0,0,0.06);
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 14px;
}
.yp-section-title {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.1;
  color: var(--dark);
  margin-bottom: 8px;
}
.yp-section-sub {
  color: var(--muted); font-size: 14px;
  max-width: 520px; margin: 0 auto;
}

/* ============ Tabs ============ */
.yp-tabs {
  display: inline-flex; padding: 4px;
  background: rgba(255,248,240,0.9);
  border-radius: 999px; gap: 2px;
  box-shadow: inset 0 1px 3px rgba(26,26,46,0.05);
}
.yp-tab {
  padding: 8px 18px; border-radius: 999px;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 13px;
  color: rgba(26,26,46,0.7);
  border: none; background: transparent; cursor: pointer;
  transition: all 0.22s var(--bouncy);
}
.yp-tab.on {
  background: white; color: var(--pink); font-weight: 700;
  box-shadow: 0 4px 12px rgba(255,94,159,0.15), inset 0 0 0 1.5px rgba(255,94,159,0.25);
}
.yp-tab:hover:not(.on) { color: var(--dark); transform: translateY(-1px); }

/* ============ Empty state ============ */
.yp-empty {
  text-align: center; padding: 48px 20px;
  color: var(--muted);
}
.yp-empty-emoji {
  font-size: 48px;
  margin-bottom: 12px;
  display: inline-block;
  animation: ypEmptyBob 2.4s ease-in-out infinite;
}
@keyframes ypEmptyBob {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-6px) rotate(5deg); }
}
.yp-empty-title {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 18px;
  color: var(--dark); margin-bottom: 4px;
}
.yp-empty-sub { font-size: 13px; }

/* ============ Loading ============ */
.yp-loader {
  display: flex; gap: 8px; justify-content: center;
  padding: 40px 0;
}
.yp-loader span {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--pink);
  animation: ypLoaderBob 1.2s ease-in-out infinite;
}
.yp-loader span:nth-child(1) { background: var(--pink); }
.yp-loader span:nth-child(2) { background: var(--yellow); animation-delay: 0.15s; }
.yp-loader span:nth-child(3) { background: var(--mint); animation-delay: 0.3s; }
@keyframes ypLoaderBob {
  0%, 80%, 100% { transform: translateY(0) scale(0.8); opacity: 0.5; }
  40% { transform: translateY(-14px) scale(1.1); opacity: 1; }
}

/* ============ Footer compact (reuse pattern) ============ */
.yp-footer {
  max-width: 820px; margin: 24px auto 0;
  padding: 14px 20px 20px;
  text-align: center;
  font-size: 11px; color: var(--muted);
  position: relative; z-index: 10;
}
.yp-footer a { color: var(--muted); text-decoration: none; }
.yp-footer a:hover { color: var(--pink); }
.yp-footer .sep { color: rgba(26,26,46,0.25); margin: 0 6px; }
.yp-footer .dev {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.yp-footer .heart { display: inline-block; animation: ypHeart 1.4s ease-in-out infinite; }
@keyframes ypHeart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* ============ Responsive ============ */
@media (max-width: 780px) {
  .yp-hero.split { grid-template-columns: 1fr; }
  .yp-nav-links { display: none; }
}

/* ============ LEADERBOARD PODIUM ============ */
.lb-podium {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 16px;
  align-items: end;
  max-width: 640px; margin: 0 auto 32px;
  padding: 0 20px;
}
.lb-pod {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 12px 0;
}
.lb-pod .pod-rank {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 14px;
  color: white;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.pod1 .pod-rank { background: linear-gradient(135deg,#FFD23F,#FFA000); top: -14px; width: 34px; height: 34px; font-size: 16px; }
.pod2 .pod-rank { background: linear-gradient(135deg,#D0D0D8,#A0A0B0); }
.pod3 .pod-rank { background: linear-gradient(135deg,#D9944C,#A55A1D); }
.pod-crown {
  position: absolute; top: -42px; left: 50%; transform: translateX(-50%);
  font-size: 28px;
  animation: podCrownBob 2.5s ease-in-out infinite;
  z-index: 3;
}
@keyframes podCrownBob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-6deg); }
  50% { transform: translateX(-50%) translateY(-6px) rotate(6deg); }
}
.pod-name {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--dark); text-align: center;
}
.pod-score {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 12px;
  color: var(--muted);
}
.pod-bar {
  width: 100%; margin-top: 10px;
  min-height: 60px;
  border-radius: 16px 16px 0 0;
  animation: podRise 0.8s var(--bouncy) backwards;
}
.pod1 .pod-bar {
  background: linear-gradient(180deg, #FFE480, #FFA000);
  box-shadow: 0 -6px 20px rgba(255,210,63,0.35);
  animation-delay: 0.3s;
  min-height: 90px;
}
.pod2 .pod-bar {
  background: linear-gradient(180deg, #E8E8EC, #B8B8C8);
  animation-delay: 0.15s;
  min-height: 70px;
}
.pod3 .pod-bar {
  background: linear-gradient(180deg, #E8B896, #CD7F32);
  animation-delay: 0.45s;
  min-height: 55px;
}
@keyframes podRise {
  from { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  to { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}

.lb-list {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;
}
.lb-row {
  display: grid; grid-template-columns: 36px 32px 1fr 50px 1fr 80px;
  gap: 12px; align-items: center;
  padding: 10px 18px;
  background: white;
  border: 1.5px solid rgba(26,26,46,0.06);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: all 0.22s var(--bouncy);
}
.lb-row:hover { transform: translateX(4px); box-shadow: 0 6px 18px rgba(255,94,159,0.12); }
.lb-row.me {
  background: linear-gradient(90deg, rgba(255,94,159,0.1), rgba(255,94,159,0.03));
  border-color: rgba(255,94,159,0.3);
  box-shadow: 0 6px 18px rgba(255,94,159,0.15);
}
.lb-rank {
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 15px;
  color: var(--muted); text-align: center;
}
.lb-row .blob { animation: none; }
.lb-name { font-weight: 700; font-size: 14px; color: var(--dark); }
.lb-lvl {
  font-family: 'Fredoka', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--muted);
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.05);
}
.lb-bar { height: 6px; background: rgba(0,0,0,0.06); border-radius: 999px; overflow: hidden; }
.lb-fill { height: 100%; border-radius: 999px; transition: width 0.6s var(--bouncy); }
.lb-xp {
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 14px;
  color: var(--pink); text-align: right;
}

@media (max-width: 640px) {
  .lb-podium { gap: 8px; }
  .lb-row { grid-template-columns: 28px 24px 1fr 50px; padding: 8px 12px; }
  .lb-row .lb-bar, .lb-row .lb-xp { display: none; }
}

/* Profile page */
.pf-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:32px 28px; }
.pf-blob-wrap { position:relative; width:200px; height:200px; display:flex; align-items:center; justify-content:center; }
.pf-ring { position:absolute; inset:0; }
.pf-ring circle { transition: stroke-dashoffset 1.2s var(--bouncy); }
.pf-orbit { position:absolute; inset:0; pointer-events:none; animation: pfOrbit 14s linear infinite; }
.pf-orbit span { position:absolute; font-size:18px; }
.pf-orbit span:nth-child(1) { top:-4px; left:50%; transform:translateX(-50%); }
.pf-orbit span:nth-child(2) { top:50%; right:-4px; transform:translateY(-50%); }
.pf-orbit span:nth-child(3) { bottom:-4px; left:50%; transform:translateX(-50%); }
.pf-orbit span:nth-child(4) { top:50%; left:-4px; transform:translateY(-50%); }
@keyframes pfOrbit { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.pf-name { font-family:'Fredoka',sans-serif; font-weight:700; font-size:28px; color:var(--dark); }

/* ============ EDIT MASCOT ICON (own profile only) ============
   Minimal round pencil button hovering at the avatar's bottom-right.
   Keeps the mascot perfectly centered inside the ring; the icon is
   the only UI-chrome added. Hover bounces + sparkles for a touch
   of Yumpa playfulness without stealing focus from the Blob. */
.pf-blob-wrap { position: relative; }
.pf-edit-mascot {
  position: absolute;
  right: 4px;
  bottom: 10px;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FF5E9F, #FF8C61);
  color: white;
  border-radius: 999px;
  font-size: 15px;
  text-decoration: none;
  box-shadow:
    0 4px 12px rgba(255,94,159,0.4),
    0 0 0 3px rgba(255,255,255,0.95);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
  z-index: 3;
}
.pf-edit-mascot:hover {
  transform: scale(1.1) rotate(-8deg);
  box-shadow:
    0 6px 18px rgba(255,94,159,0.55),
    0 0 0 3px rgba(255,255,255,0.95);
}
.pf-edit-mascot:active { transform: scale(0.94); }
.pf-edit-mascot::after {
  content: '✨';
  position: absolute;
  top: -4px; right: -4px;
  font-size: 10px;
  filter: drop-shadow(0 1px 2px rgba(255,210,63,0.6));
  animation: pfEditSpark 2.2s cubic-bezier(0.34,1.56,0.64,1) infinite;
  pointer-events: none;
}
@keyframes pfEditSpark {
  0%, 100% { transform: rotate(-8deg) scale(1);    opacity: 0.9; }
  50%      { transform: rotate(12deg) scale(1.25); opacity: 1; }
}
.pf-handle { font-family:'Fredoka',sans-serif; font-weight:600; font-size:13px; color:var(--muted); }
.pf-stats-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.pf-stat-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; background:white; border:1.5px solid rgba(0,0,0,0.06); font-family:'Fredoka',sans-serif; font-weight:700; font-size:13px; box-shadow:0 4px 10px rgba(0,0,0,0.04); }
.pf-stat-pill b { color:var(--pink); font-size:15px; }

.pf-section { margin-top:32px; }
.pf-section-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:18px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.pf-ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.pf-ach { padding:14px 12px; border-radius:18px; background:white; border:1.5px solid rgba(0,0,0,0.06); text-align:center; transition:all 0.3s var(--bouncy); cursor:pointer; }
.pf-ach:hover { transform:translateY(-4px) rotate(var(--r,0deg)); box-shadow:0 12px 24px rgba(255,94,159,0.15); }
.pf-ach-emoji { font-size:32px; margin-bottom:6px; display:block; }
.pf-ach-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:13px; }
.pf-ach-date { font-size:10px; color:var(--muted); margin-top:4px; }
.pf-ach.locked { opacity:0.4; filter:grayscale(0.8); }

.pf-games-list { display:flex; flex-direction:column; gap:6px; }
.pf-game-row { display:grid; grid-template-columns:32px 1fr auto auto; gap:10px; padding:8px 14px; background:white; border-radius:999px; border:1.5px solid rgba(0,0,0,0.05); align-items:center; transition:transform 0.22s var(--bouncy); }
.pf-game-row:hover { transform:translateX(4px); border-color:rgba(255,94,159,0.3); }
.pf-game-icon { width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.pf-game-name { font-family:'Fredoka',sans-serif; font-weight:700; font-size:13px; }
.pf-game-score { font-family:'Fredoka',sans-serif; font-weight:800; font-size:13px; color:var(--pink); }

.pf-cal { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; padding:14px; background:white; border-radius:18px; border:1.5px solid rgba(0,0,0,0.06); }
.pf-cal-col { display:grid; grid-template-rows:repeat(7,1fr); gap:3px; }
.pf-cal-cell { width:100%; aspect-ratio:1; border-radius:4px; background:rgba(0,0,0,0.06); transition:transform 0.2s; }
.pf-cal-cell:hover { transform:scale(1.4); z-index:2; }
.pf-cal-cell.lv1 { background:#FFDDE9; }
.pf-cal-cell.lv2 { background:#FFB3D9; }
.pf-cal-cell.lv3 { background:#FF8FB8; }
.pf-cal-cell.lv4 { background:#FF5E9F; }

/* Friends page */
.fr-search { position:relative; max-width:520px; margin:0 auto 22px; }
.fr-search .yp-input { padding-left:44px; }
.fr-search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:18px; pointer-events:none; }
.fr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.fr-card { background:white; border-radius:22px; padding:20px 16px; text-align:center; border:2px solid rgba(0,0,0,0.06); box-shadow:0 6px 18px rgba(0,0,0,0.05); transition:all 0.3s var(--bouncy); position:relative; }
.fr-card:hover { transform:translateY(-6px) rotate(0); box-shadow:0 16px 32px rgba(255,94,159,0.18); }
.fr-card.tilt-l { transform:rotate(-1.5deg); }
.fr-card.tilt-r { transform:rotate(1.5deg); }
.fr-card-status { position:absolute; top:12px; right:12px; width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0.15); box-shadow:0 0 0 2px white; }
.fr-card-status.online { background:#2EC76B; box-shadow:0 0 0 2px white, 0 0 0 5px rgba(46,199,107,0.25); animation:frOnline 1.6s ease-in-out infinite; }
.fr-card-status.offline { background:#B5B2C6; box-shadow:0 0 0 2px white; }
/* Last-seen line — only shown on offline cards so online ones stay clean. */
.fr-card-lastseen {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted, #6B6B85);
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(107, 107, 133, 0.08);
  display: inline-block;
}
/* Offline card: slightly dimmed so the eye goes to online friends first. */
.fr-card.is-offline { opacity: 0.88; }
.fr-card.is-offline:hover { transform: translateY(-2px) rotate(0); }
/* Disabled Invite button (friend is offline). */
.yp-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ───── SessionsPanel (Active devices in /settings) ───────────────── */
.sp-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: white;
  border-radius: 16px;
  border: 1.5px solid rgba(123, 97, 255, 0.12);
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.05);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sp-row:hover { transform: translateY(-1px); }
.sp-row.is-current {
  border-color: rgba(78, 205, 196, 0.55);
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.08), white 60%);
}
.sp-row-icon {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFE6EE, #FFF5E6);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: inset 0 0 0 2px white;
}
.sp-row.is-current .sp-row-icon {
  background: linear-gradient(135deg, #D4F6F4, #FFF5E6);
}
.sp-row-body { min-width: 0; }
.sp-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--dark, #1A1A2E);
}
.sp-row-current {
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #4ECDC4, #7B61FF);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.4px;
}
.sp-row-meta {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: var(--muted, #6B6B85);
  margin-top: 2px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sp-row-ip { opacity: 0.7; font-family: monospace; }
.sp-revoke {
  background: white;
  color: #C8324F;
  border: 1.5px solid rgba(200, 50, 79, 0.3);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s ease;
}
.sp-revoke:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #FFEDEF;
  border-color: #C8324F;
}
.sp-revoke:disabled { opacity: 0.5; cursor: default; }
.sp-empty {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px;
  background: rgba(255, 210, 63, 0.12);
  border: 1.5px dashed rgba(255, 140, 97, 0.35);
  border-radius: 16px;
  margin-top: 10px;
  font-family: 'Nunito', sans-serif;
}
.sp-empty > span:first-child { font-size: 28px; }
.sp-empty b { display: block; font-family: 'Fredoka', sans-serif; font-size: 14px; }
.sp-empty span:last-child { font-size: 12px; color: var(--muted, #6B6B85); }
.sp-error {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(200, 50, 79, 0.1);
  color: #C8324F;
  border-radius: 14px;
  font-size: 12px;
  font-family: 'Nunito', sans-serif;
}
@keyframes frOnline { 0%,100% { box-shadow:0 0 0 2px white, 0 0 0 5px rgba(46,199,107,0.25); } 50% { box-shadow:0 0 0 2px white, 0 0 0 9px rgba(46,199,107,0); } }
.fr-card-name { font-family:'Fredoka',sans-serif; font-weight:700; font-size:15px; margin-top:8px; }
.fr-card-lvl { display:inline-block; padding:3px 10px; border-radius:999px; background:rgba(255,210,63,0.2); color:#C98C00; font-size:11px; font-weight:700; font-family:'Fredoka',sans-serif; margin-top:4px; }

/* ═══════════════════════════════════════════════════════════════════════
   /friends redesign (Apr 2026) — hero + YourIdCard + new tabs + empty
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── Hero ───────── */
.fr-hero {
  text-align: center;
  padding: 24px 16px 28px;
  position: relative;
}
.fr-hero-ping {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(90deg, #FF5E9F, #FF8C61);
  color: white;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(255, 94, 159, 0.38);
  animation: frHeroPing 1.8s ease-in-out infinite;
  margin-bottom: 10px;
}
.fr-hero-ping b { color: #FFF5CC; }
@keyframes frHeroPing {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.03); }
}

/* Stage = the 3-blob cluster. Main mascot center, minis peeking from sides.
   Sized so the composition breathes on mobile too. */
.fr-hero-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 0 auto 6px;
  width: min(420px, 92vw);
  height: 160px;
}
.fr-hero-me {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 14px 28px rgba(255, 94, 159, 0.25));
}
.fr-hero-mini {
  display: inline-flex;
  filter: drop-shadow(0 8px 14px rgba(123, 97, 255, 0.22));
  animation: frHeroMiniFloat 3.6s ease-in-out infinite;
}
.fr-hero-mini.left { animation-delay: 0s; transform: rotate(-6deg); }
.fr-hero-mini.right { animation-delay: 1.2s; transform: rotate(6deg); }
@keyframes frHeroMiniFloat {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
.fr-hero-mini.left  { --r: -6deg; }
.fr-hero-mini.right { --r: 6deg; }

/* Orbiting sparkles around the main mascot */
.fr-hero-spark {
  position: absolute;
  font-size: 20px;
  filter: drop-shadow(0 2px 5px rgba(255, 210, 63, 0.5));
  pointer-events: none;
  animation: frHeroSpark 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.fr-hero-spark.s1 { top: -4px; right: -10px; animation-delay: 0s; }
.fr-hero-spark.s2 { bottom: 2px; left: -8px; animation-delay: 0.8s; }
.fr-hero-spark.s3 { top: 10%; left: -14px; animation-delay: 1.6s; font-size: 16px; }
@keyframes frHeroSpark {
  0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 0.9; }
  50% { transform: translate(4px, -8px) rotate(25deg) scale(1.2); opacity: 1; }
}

/* Live summary pills under headline */
.fr-hero-summary {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.fr-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: white;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--dark, #1A1A2E);
  box-shadow: 0 4px 10px rgba(26, 26, 46, 0.06);
}
.fr-hero-stat .th { color: var(--muted, #6B6B85); font-weight: 500; }
.fr-hero-stat b { color: var(--pink, #FF5E9F); font-weight: 800; }
.fr-hero-stat.online b { color: #1F8A52; }
.fr-hero-stat-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #2EC76B;
  box-shadow: 0 0 0 0 rgba(46, 199, 107, 0.55);
  animation: rlIfmDotPulse 1.8s ease-out infinite;
}

/* ───────── YourIdCard ───────── */
.fr-idcard {
  position: relative;
  max-width: 560px;
  margin: 8px auto 20px;
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #FFF8F0 0%, #FFE8F0 55%, #E8E3FF 100%);
  box-shadow:
    0 10px 28px rgba(123, 97, 255, 0.16),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  transform: rotate(-0.3deg);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fr-idcard:hover { transform: rotate(0) translateY(-2px); }
.fr-idcard::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px 60px at 10% 0%, rgba(255, 210, 63, 0.45), transparent 70%);
  pointer-events: none;
}
.fr-idcard-body { min-width: 0; position: relative; z-index: 1; }
.fr-idcard-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: var(--muted, #6B6B85);
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}
.fr-idcard-label-th {
  font-weight: 700;
  color: var(--dark, #1A1A2E);
  letter-spacing: 0;
}
.fr-idcard-label-en {
  font-weight: 800;
  color: rgba(123, 97, 255, 0.75);
}
.fr-idcard-id {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--dark, #1A1A2E);
  background: linear-gradient(90deg, #7B61FF, #FF5E9F 60%, #FF8C61);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-idcard-at { opacity: 0.55; margin-right: 2px; }
.fr-idcard-actions {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.fr-idcard-btn {
  padding: 9px 16px;
  border-radius: 999px;
  border: none;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  background: white;
  color: var(--dark, #1A1A2E);
  box-shadow:
    0 4px 10px rgba(26, 26, 46, 0.08),
    inset 0 0 0 1.5px rgba(255, 94, 159, 0.18);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}
.fr-idcard-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 8px 16px rgba(255, 94, 159, 0.22),
    inset 0 0 0 1.5px rgba(255, 94, 159, 0.5);
}
.fr-idcard-btn.primary {
  background: linear-gradient(135deg, var(--pink, #FF5E9F), var(--coral, #FF8C61));
  color: white;
  box-shadow: 0 6px 16px rgba(255, 94, 159, 0.42);
}
.fr-idcard-btn.primary:hover {
  box-shadow: 0 10px 22px rgba(255, 94, 159, 0.55);
}
.fr-idcard-btn.ok {
  background: linear-gradient(135deg, #2EC76B, #1F8A52);
  color: white;
  box-shadow: 0 6px 14px rgba(46, 199, 107, 0.4);
}
.fr-idcard-hint {
  grid-column: 1 / -1;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: var(--muted, #6B6B85);
  position: relative;
  z-index: 1;
}
.fr-idcard-hint b { color: var(--pink, #FF5E9F); font-weight: 700; }
@media (max-width: 520px) {
  .fr-idcard {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .fr-idcard-actions { justify-content: stretch; }
  .fr-idcard-btn { flex: 1; }
  .fr-idcard-id { font-size: 24px; }
}

/* ───────── Tabs (pill group) ───────── */
.fr-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: white;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(26, 26, 46, 0.08);
  margin: 6px auto 18px;
  max-width: 100%;
  overflow-x: auto;
}
.fr-tabs { display: flex; justify-content: center; background: transparent; box-shadow: none; padding: 0; }
.fr-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: white;
  border: none;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted, #6B6B85);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(26, 26, 46, 0.04);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}
.fr-tab:hover:not(.on) {
  transform: translateY(-2px);
  color: var(--dark, #1A1A2E);
}
.fr-tab.on {
  background: linear-gradient(135deg, var(--pink, #FF5E9F), var(--coral, #FF8C61));
  color: white;
  box-shadow: 0 8px 18px rgba(255, 94, 159, 0.38);
  transform: translateY(-1px);
}
.fr-tab-ico { font-size: 16px; }
.fr-tab-count {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--pink, #FF5E9F);
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 11px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.fr-tab:not(.on) .fr-tab-count {
  background: rgba(255, 94, 159, 0.15);
  color: var(--pink, #FF5E9F);
}
.fr-tab-count.pulse {
  animation: frTabCountPulse 1.4s ease-in-out infinite;
  background: #FF5E9F;
  color: white;
}
.fr-tab.on .fr-tab-count.pulse {
  background: white;
  color: var(--pink, #FF5E9F);
}
@keyframes frTabCountPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 94, 159, 0.55); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(255, 94, 159, 0); }
}
@media (max-width: 520px) {
  .fr-tab { padding: 9px 14px; font-size: 12px; }
  .fr-tab-label { display: none; }
  .fr-tab.on .fr-tab-label { display: inline; }
}

/* ───────── Empty state (no friends yet) ───────── */
.fr-empty {
  max-width: 560px;
  margin: 20px auto 40px;
  text-align: center;
  padding: 30px 22px;
  background: linear-gradient(180deg, white 0%, #FFF8F0 100%);
  border-radius: 28px;
  box-shadow:
    0 14px 36px rgba(26, 26, 46, 0.08),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}
.fr-empty::before {
  content: '';
  position: absolute;
  inset: -60px -60px auto auto;
  width: 240px; height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.25), transparent 70%);
  pointer-events: none;
}
.fr-empty-stage {
  position: relative;
  width: 300px;
  height: 240px;
  margin: 0 auto 12px;
}
.fr-empty-star {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* Spotlight gradient behind the star */
  padding: 24px;
}
.fr-empty-star::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 94, 159, 0.25), transparent 70%);
  z-index: -1;
  animation: frEmptyStarAura 2.6s ease-in-out infinite;
}
@keyframes frEmptyStarAura {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 0.9; }
}
/* Empty seats — dashed circles with "?" mark */
.fr-empty-seat {
  position: absolute;
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 2.5px dashed rgba(123, 97, 255, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: rgba(123, 97, 255, 0.45);
  background: rgba(255, 255, 255, 0.7);
  animation: frEmptySeatBob 3.2s ease-in-out infinite;
}
.fr-empty-seat.s1 { top: 10px; left: 20px; animation-delay: 0s; }
.fr-empty-seat.s2 { top: 10px; right: 20px; animation-delay: 0.8s; }
.fr-empty-seat.s3 { bottom: 10px; left: 40px; animation-delay: 1.6s; }
.fr-empty-seat.s4 { bottom: 10px; right: 40px; animation-delay: 2.4s; }
@keyframes frEmptySeatBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}
.fr-empty-glyph {
  position: absolute;
  font-size: 22px;
  filter: drop-shadow(0 3px 6px rgba(26, 26, 46, 0.12));
  animation: frEmptyGlyph 4s ease-in-out infinite;
}
.fr-empty-glyph.g1 { top: 40%; left: -4px; animation-delay: 0s; }
.fr-empty-glyph.g2 { top: 18%; right: -6px; animation-delay: 1.3s; }
.fr-empty-glyph.g3 { bottom: 25%; right: 0; animation-delay: 2.6s; }
@keyframes frEmptyGlyph {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-10px) rotate(8deg); }
}

.fr-empty-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--dark, #1A1A2E);
  margin: 6px 0 4px;
}
.fr-empty-title .hl {
  background: linear-gradient(90deg, var(--pink, #FF5E9F), var(--coral, #FF8C61));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fr-empty-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: var(--muted, #6B6B85);
  margin: 0 0 18px;
}

.fr-empty-unlocks {
  list-style: none;
  padding: 14px 18px;
  margin: 0 auto 20px;
  background: rgba(255, 210, 63, 0.12);
  border: 1.5px dashed rgba(255, 140, 97, 0.38);
  border-radius: 18px;
  max-width: 420px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fr-empty-unlocks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--dark, #1A1A2E);
}
.fr-empty-unlocks li b {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  margin-right: 4px;
}
.fr-empty-unlocks li .ico {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(26, 26, 46, 0.08);
}

.fr-empty-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  max-width: 360px;
  margin: 0 auto;
}
.fr-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  border: none;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}
.fr-empty-cta.primary {
  background: linear-gradient(135deg, var(--pink, #FF5E9F), var(--coral, #FF8C61));
  color: white;
  box-shadow: 0 10px 22px rgba(255, 94, 159, 0.42);
  position: relative;
  overflow: hidden;
}
.fr-empty-cta.primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: glBtnShine 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  pointer-events: none;
}
.fr-empty-cta.primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 28px rgba(255, 94, 159, 0.55);
}
.fr-empty-cta.ghost {
  background: white;
  color: var(--dark, #1A1A2E);
  box-shadow:
    inset 0 0 0 1.5px rgba(123, 97, 255, 0.3),
    0 3px 8px rgba(26, 26, 46, 0.06);
  font-size: 13px;
  padding: 11px 22px;
}
.fr-empty-cta.ghost:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1.5px rgba(123, 97, 255, 0.55),
    0 6px 14px rgba(123, 97, 255, 0.18);
}

/* Room page — stage topbar. Row above the player cards that pairs the
   Leave button (left) with the "On stage (N/M)" counter (right). Keeps
   the lobby-exit discoverable without fighting the sticky site nav. */
.rl-stage-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
  margin: 18px 0 14px;
}
.rl-stage-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--dark, #1A1A2E);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.rl-stage-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted, #6B6B85);
}

/* Leave button — compact ghost pill, red-tinted ring so it reads as an
   "exit" action without shouting. Sits at the top-left of the stage
   area: matches web pattern (←  back in top-left) + Skribbl/Discord
   precedent, and is always-visible above the fold. */
.rl-leave-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: white;
  border: 1.5px solid rgba(255, 94, 159, 0.22);
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted, #6B6B85);
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(26, 26, 46, 0.05);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.22s ease,
              color 0.22s ease,
              box-shadow 0.22s ease;
}
.rl-leave-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 94, 159, 0.6);
  color: #C8324F;
  box-shadow: 0 6px 14px rgba(255, 94, 159, 0.18);
}
.rl-leave-btn > span:first-child {
  font-size: 15px;
  margin-right: 1px;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rl-leave-btn:hover > span:first-child { transform: translateX(-2px); }
.rl-leave-sub {
  font-size: 9px;
  font-weight: 800;
  color: var(--muted, #6B6B85);
  opacity: 0.65;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rl-leave-btn:hover .rl-leave-sub { color: #C8324F; opacity: 0.85; }

/* Small screens — hide the Thai label so the pill stays compact.
   Only "← Leave" remains which is still unambiguous. */
@media (max-width: 480px) {
  .rl-leave-btn > span:nth-child(2) { display: none; }
  .rl-leave-sub { opacity: 0.9; font-size: 10px; letter-spacing: 0.08em; }
  .rl-stage-title { font-size: 18px; }
  .rl-stage-count { font-size: 12px; }
}
.fr-card-actions { display:flex; gap:6px; justify-content:center; margin-top:12px; }
.fr-card-actions .yp-btn { padding:7px 12px; font-size:12px; }
.fr-req-list { display:flex; flex-direction:column; gap:8px; max-width:720px; margin:0 auto; }
.fr-req { display:grid; grid-template-columns:40px 1fr auto auto; gap:10px; padding:10px 16px; background:white; border-radius:999px; border:1.5px solid rgba(0,0,0,0.06); align-items:center; }
.fr-req .yp-btn { padding:6px 14px; font-size:12px; }

/* Rooms hub */
.rm-hub { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; margin:0 auto; }
.rm-card { position:relative; padding:28px 26px; border-radius:24px; text-align:center; border:2px solid rgba(0,0,0,0.06); box-shadow:0 14px 36px rgba(0,0,0,0.08); overflow:hidden; isolation:isolate; transition:transform 0.35s var(--bouncy); }
.rm-card > * { position:relative; z-index:1; }
.rm-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.6), transparent 55%); z-index:0; }
.rm-card:hover { transform:translateY(-8px) rotate(0) scale(1.01); }
.rm-create { background:linear-gradient(135deg,#FFDDE9,#FFE8F0); transform:rotate(-1deg); }
.rm-create:hover { box-shadow:0 22px 44px rgba(255,94,159,0.2); }
.rm-join { background:linear-gradient(135deg,#DFF6F4,#E8FBF9); transform:rotate(1deg); }
.rm-join:hover { box-shadow:0 22px 44px rgba(78,205,196,0.25); }
.rm-card-blob { display:flex; justify-content:center; margin-bottom:10px; }
.rm-card-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:24px; color:var(--dark); margin-bottom:4px; }
.rm-card-sub { font-size:13px; color:var(--muted); margin-bottom:16px; }
.rm-bullets { list-style:none; display:flex; flex-direction:column; gap:6px; margin-bottom:18px; padding:0; font-size:13px; font-family:'Fredoka',sans-serif; font-weight:600; }
.rm-join form { display:flex; flex-direction:column; gap:10px; align-items:center; }
.rm-code-input {
  text-align:center; letter-spacing:8px; font-family:'Fredoka',sans-serif;
  font-weight:800; font-size:22px; text-transform:uppercase;
  max-width:220px; width:100%;
}
.rm-code-input:focus { letter-spacing:10px; }
.rm-games-strip { max-width:900px; margin:28px auto 0; }

/* Filter chips row — single compact row (4 chips) that never wraps on
   desktop, scrolls horizontally on narrow screens. Gives the picker a
   neat "tabs" feel instead of the wrapping mess. */
.rm-filter-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  margin: 16px auto 18px;
  padding: 4px;
  max-width: 540px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rm-filter-row::-webkit-scrollbar { display: none; }
.rm-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background: white;
  border: 1.5px solid rgba(26,26,46,0.08);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 12px;
  color: var(--dark);
  cursor: pointer;
  transition: transform 0.2s var(--bouncy), box-shadow 0.2s ease, background 0.25s ease;
  box-shadow: 0 2px 6px rgba(26,26,46,0.06);
  flex-shrink: 0;
  white-space: nowrap;
}
.rm-filter-chip:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 14px rgba(255,94,159,0.2);
}
.rm-filter-chip.active {
  background: linear-gradient(135deg, var(--pink,#FF5E9F), var(--coral,#FF8C61));
  color: white;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(255,94,159,0.4);
}
.rm-filter-emoji { font-size: 15px; }
.rm-filter-label { letter-spacing: 0.2px; }
.rm-filter-count {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 22px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(26,26,46,0.1);
  color: var(--dark);
  font-size: 10px; font-weight: 800;
  margin-left: 2px;
}
.rm-filter-chip.active .rm-filter-count {
  background: rgba(255,255,255,0.28);
  color: white;
}

.rm-games-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-top:14px; min-height: 100px; }
.rm-game-tile {
  position: relative;
  background: white;
  border: 2px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 14px 10px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s var(--bouncy);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  transform: rotate(-0.5deg);
}
.rm-game-tile:hover:not(:disabled) {
  transform: translateY(-4px) rotate(0) scale(1.02);
  border-color: var(--tile-accent, #FF5E9F);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--tile-accent, #FF5E9F) 25%, transparent);
}
.rm-game-tile:disabled { opacity:0.5; cursor:not-allowed; }
.rm-game-tile .emoji { font-size:28px; display:block; margin-bottom:6px; }
.rm-game-tile .name { font-size:13px; font-weight:700; color:var(--dark); }
.rm-game-tile .cap { font-size:10px; color:var(--muted); margin-top:2px; }
/* Tag row — tiny emoji pills under the capacity hint */
.rm-game-tags {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 6px;
}
.rm-game-tag {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tile-accent, #FF5E9F) 12%, white);
  font-size: 11px;
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--tile-accent, #FF5E9F) 20%, transparent);
}

/* Empty filter state */
.rm-games-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-family: 'Nunito', sans-serif;
}
.rm-games-empty span { font-size: 42px; display: block; margin-bottom: 6px; }
.rm-games-empty p { font-family: 'Fredoka', sans-serif; font-weight: 700; margin: 0; color: var(--dark); }

/* ============ PRIVACY TOGGLE (Create mode) ============ */
.rm-privacy-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 520px;
  margin: 10px auto 4px;
}
.rm-privacy-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 2px solid rgba(26,26,46,0.08);
  background: white;
  cursor: pointer;
  text-align: left;
  font-family: 'Fredoka', sans-serif;
  transition: transform 0.2s var(--bouncy), box-shadow 0.2s ease, border-color 0.2s ease, background 0.25s ease;
  box-shadow: 0 3px 10px rgba(26,26,46,0.06);
}
.rm-privacy-opt:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255,94,159,0.18);
}
.rm-privacy-opt.on {
  background: linear-gradient(135deg, #FFF4D0, #FFDDE9);
  border-color: var(--pink,#FF5E9F);
  box-shadow: 0 6px 16px rgba(255,94,159,0.28);
}
.rm-privacy-ico {
  font-size: 22px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,94,159,0.12);
  flex-shrink: 0;
}
.rm-privacy-opt.on .rm-privacy-ico {
  background: linear-gradient(135deg, var(--pink,#FF5E9F), var(--coral,#FF8C61));
  color: white;
}
.rm-privacy-label { display: flex; flex-direction: column; min-width: 0; }
.rm-privacy-label b {
  font-weight: 800; font-size: 14px;
  color: var(--dark);
}
.rm-privacy-label span {
  font-family: 'Nunito', sans-serif;
  font-weight: 600; font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
@media (max-width: 520px) {
  .rm-privacy-toggle { grid-template-columns: 1fr; }
}

/* ============ PUBLIC ROOMS LIST (hub default view) ============ */
.rm-public-section {
  max-width: 900px;
  margin: 36px auto 0;
}
.rm-public-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.rm-public-card {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "emoji body meta"
    "emoji body meta";
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--pr-accent, #FF5E9F) 14%, white),
    white 70%
  );
  border: 2px solid color-mix(in srgb, var(--pr-accent, #FF5E9F) 25%, transparent);
  cursor: pointer;
  text-align: left;
  font-family: 'Fredoka', sans-serif;
  transition: transform 0.22s var(--bouncy), box-shadow 0.22s ease;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pr-accent, #FF5E9F) 20%, transparent);
  transform: rotate(-0.5deg);
}
.rm-public-card:hover:not(:disabled) {
  transform: translateY(-4px) rotate(0) scale(1.01);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--pr-accent, #FF5E9F) 35%, transparent);
}
.rm-public-card:disabled { opacity: 0.55; cursor: not-allowed; }
.rm-public-card.full { filter: saturate(0.6); }
.rm-public-emoji {
  grid-area: emoji;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pr-accent, #FF5E9F) 30%, transparent);
}
.rm-public-body { grid-area: body; min-width: 0; }
.rm-public-host {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13px;
  color: var(--dark);
}
.rm-public-host span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 130px;
}
.rm-public-game {
  font-family: 'Nunito', sans-serif;
  font-weight: 700; font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.rm-public-meta {
  grid-area: meta;
  display: flex; flex-direction: column;
  gap: 4px; align-items: flex-end;
}
.rm-public-count {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(26,26,46,0.06);
  font-size: 11px; font-weight: 700;
  color: var(--dark);
}
.rm-public-count.full { background: rgba(230,32,56,0.12); color: #b01a2d; }
.rm-public-cta {
  font-size: 11px; font-weight: 800;
  color: var(--pink,#FF5E9F);
  letter-spacing: 0.3px;
}

/* Empty public-rooms state */
.rm-public-empty {
  text-align: center;
  padding: 32px 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, #FFF8F0 0%, #FFFBF4 100%);
  border: 2px dashed rgba(123,97,255,0.2);
  margin-top: 14px;
}
.rm-public-empty > span {
  font-size: 44px;
  display: block;
  margin-bottom: 8px;
  animation: rmEmptyBob 2.4s cubic-bezier(0.34,1.56,0.64,1) infinite;
}
@keyframes rmEmptyBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-6px) rotate(6deg); }
}
.rm-public-empty-h {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 16px;
  color: var(--dark);
  margin: 0 0 4px;
}
.rm-public-empty-s {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.rm-conn { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); padding:6px 12px; border-radius:999px; background:rgba(255,255,255,0.7); border:1px solid rgba(0,0,0,0.06); }
.rm-conn .dot { width:8px; height:8px; border-radius:50%; background:#ccc; }
.rm-conn.on .dot { background:#2EC76B; animation:pulse 1.5s ease-in-out infinite; }
@media (max-width:640px) { .rm-hub { grid-template-columns:1fr; } .rm-create, .rm-join { transform:none; } }

/* Room lobby */
.rl-code-row { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:28px; flex-wrap:wrap; }
.rl-code {
  padding:10px 22px; border-radius:999px;
  background:linear-gradient(135deg,#FFF4D0,#FFDDE9);
  border:2px solid rgba(255,210,63,0.4);
  font-family:'Fredoka',sans-serif; font-weight:800; font-size:22px;
  letter-spacing:6px; color:var(--dark);
  box-shadow:0 8px 20px rgba(255,210,63,0.2);
}
.rl-stage {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px; margin-bottom:28px;
}
.rl-player {
  padding:16px 12px; border-radius:20px; background:white;
  border:2px solid rgba(0,0,0,0.06);
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
  transition:all 0.3s var(--bouncy);
  position:relative;
  animation:rlPlayerIn 0.5s var(--bouncy) backwards;
}
@keyframes rlPlayerIn { from { opacity:0; transform:translateY(12px) scale(0.8); } to { opacity:1; transform:translateY(0) scale(1); } }
.rl-player:hover { transform:translateY(-4px); }
.rl-player.ready { border-color:rgba(46,199,107,0.4); background:linear-gradient(135deg,#fff,rgba(46,199,107,0.05)); box-shadow:0 6px 18px rgba(46,199,107,0.15); }
.rl-player.host { border-color:rgba(255,210,63,0.5); background:linear-gradient(135deg,#fff,rgba(255,210,63,0.08)); }
.rl-player.me { outline:2px dashed rgba(78,205,196,0.5); outline-offset:3px; }
.rl-player.offline { opacity:0.45; filter:grayscale(0.4); }
.rl-player-blob { display:flex; justify-content:center; }
.rl-player-badge { position:absolute; top:-8px; right:-8px; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:800; font-family:'Fredoka',sans-serif; }
.rl-player-badge.host { background:linear-gradient(135deg,#FFD23F,#FFA000); color:white; }
.rl-player-badge.ready { background:#2EC76B; color:white; }
.rl-player-badge.me { background:#4ECDC4; color:white; left:-8px; right:auto; }
.rl-player-name { font-family:'Fredoka',sans-serif; font-weight:700; font-size:14px; margin-top:6px; color:var(--dark); }
.rl-player-lvl { font-size:11px; color:var(--muted); font-family:'Fredoka',sans-serif; font-weight:600; }
.rl-slot-empty {
  padding:16px 12px; border-radius:20px;
  background:rgba(0,0,0,0.03);
  border:2px dashed rgba(0,0,0,0.15);
  text-align:center;
  color:var(--muted); font-size:13px;
  min-height:140px;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:6px;
}
.rl-game-preview {
  padding:20px; border-radius:22px;
  background:linear-gradient(135deg,#E4DCFF,#EEE6FF);
  border:2px solid rgba(123,97,255,0.2);
  display:flex; align-items:center; gap:18px;
  margin-bottom:20px;
  box-shadow:0 8px 24px rgba(123,97,255,0.1);
}
.rl-game-icon { width:60px; height:60px; border-radius:18px; background:white; display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 6px 14px rgba(0,0,0,0.08); flex-shrink:0; }
.rl-game-body { flex:1; min-width:0; }
.rl-game-name { font-family:'Fredoka',sans-serif; font-weight:800; font-size:18px; color:var(--dark); }
.rl-game-desc { font-size:13px; color:var(--muted); }
.rl-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* Generous breathing room between the reaction bar and the primary
     action. Previously the reactions pill was bleeding into the
     "waiting" button; this separates "expressive UI" from "decision UI". */
  margin: 32px auto 10px;
  max-width: 480px;
}
.rl-actions > div {
  /* Inner wrapper (host/ready panel) should inherit the column gap so
     child .yp-hint gets proper spacing under the primary button. */
  gap: 12px !important;
}
/* Waiting / disabled primary button — stop it from looking like a lively
   gradient pill. Muted fill + no shadow = visually "this can't be
   clicked yet, we're waiting". */
.rl-actions button.yp-btn-primary:disabled {
  background: linear-gradient(135deg, #F3E8F0, #FFE2D8) !important;
  color: var(--muted, #6B6B85) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 94, 159, 0.25) !important;
  cursor: not-allowed;
  opacity: 1 !important; /* don't double-dim; looks muddy */
  transform: none !important;
}
.rl-actions button.yp-btn-primary:disabled:hover {
  transform: none !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 94, 159, 0.35) !important;
}
/* Hint text under the action — give it air + center-align. */
.rl-actions .yp-hint {
  font-size: 13px;
  line-height: 1.5;
  max-width: 360px;
  margin: 0;
}
.rl-host-panel { background:white; border:2px solid rgba(0,0,0,0.06); border-radius:22px; padding:18px; margin-bottom:20px; box-shadow:0 6px 18px rgba(0,0,0,0.05); }
.rl-host-panel .yp-label { margin-top:10px; }
.rl-diff-row { display:flex; gap:8px; margin-top:8px; }
.rl-diff-btn { flex:1; padding:10px; border-radius:999px; border:2px solid rgba(0,0,0,0.06); background:#FFF8EA; font-family:'Fredoka',sans-serif; font-weight:700; font-size:13px; cursor:pointer; transition:all 0.25s var(--bouncy); color:var(--dark); }
.rl-diff-btn:hover { transform:translateY(-2px); }
.rl-diff-btn.on { background:linear-gradient(135deg,#FF5E9F,#E63980); color:white; border-color:transparent; box-shadow:0 6px 16px rgba(255,94,159,0.3); }
.rl-status-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; font-family:'Fredoka',sans-serif; font-weight:700; font-size:12px; }
.rl-status-pill.waiting { background:rgba(255,210,63,0.18); color:#C98C00; }
.rl-status-pill.ready { background:rgba(46,199,107,0.18); color:#208A46; }
.rl-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:10px; }
.rl-copy-btn { padding:8px 16px; border-radius:999px; background:white; border:2px solid rgba(0,0,0,0.08); font-family:'Fredoka',sans-serif; font-weight:700; font-size:13px; cursor:pointer; transition:all 0.25s var(--bouncy); color:var(--dark); }
.rl-copy-btn:hover { transform:translateY(-2px); border-color:rgba(255,94,159,0.35); box-shadow:0 6px 14px rgba(255,94,159,0.15); }
.rl-copy-btn.copied { background:linear-gradient(135deg,#2EC76B,#20A054); color:white; border-color:transparent; }

/* Settings page */
.st-section { position:relative; margin-bottom:20px; }
.st-section-icon { position:absolute; top:-18px; right:20px; font-size:42px; animation: stIconBob 3s ease-in-out infinite; }
@keyframes stIconBob { 0%,100%{transform:rotate(-8deg) translateY(0);} 50%{transform:rotate(8deg) translateY(-4px);} }
.st-section h3 { font-family:'Fredoka',sans-serif; font-weight:700; font-size:18px; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.st-section p.st-desc { font-size:13px; color:var(--muted); margin-bottom:16px; }
.st-section form { display:flex; flex-direction:column; gap:12px; max-width:460px; }
.st-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:white; border-radius:14px; border:1.5px solid rgba(0,0,0,0.06); margin-bottom:8px; }
.st-toggle-row .lbl { font-family:'Fredoka',sans-serif; font-weight:600; font-size:14px; }
.st-toggle { width:44px; height:24px; border-radius:999px; background:rgba(0,0,0,0.15); position:relative; cursor:pointer; transition:background 0.25s; border:none; }
.st-toggle.on { background:var(--pink); }
.st-toggle::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:white; box-shadow:0 2px 6px rgba(0,0,0,0.2); transition:transform 0.25s var(--bouncy); }
.st-toggle.on::after { transform:translateX(20px); }
.st-danger { border-color: rgba(255,94,159,0.3) !important; }
.st-danger-btn { background: linear-gradient(135deg, #FF5E9F, #E63980); color:white; }

/* Support page */
.sp-hero { text-align:center; position:relative; padding:40px 20px 20px; }
.sp-hero-blob { display:inline-block; position:relative; }
.sp-hero-bubble { position:absolute; top:-14px; right:-120px; background:white; padding:10px 16px; border-radius:18px; border:3px solid var(--dark); font-family:'Fredoka',sans-serif; font-weight:700; font-size:14px; box-shadow:4px 4px 0 var(--dark); animation: spBubble 3s ease-in-out infinite; }
@keyframes spBubble { 0%,100%{transform:rotate(3deg);} 50%{transform:rotate(-2deg) translateY(-6px);} }
.sp-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:780px; margin:32px auto; }
.sp-tier { padding:24px 18px; border-radius:22px; text-align:center; transition:all 0.3s var(--bouncy); cursor:pointer; border:2px solid rgba(0,0,0,0.06); box-shadow:0 10px 28px rgba(0,0,0,0.06); position:relative; }
.sp-tier:hover { transform:translateY(-8px) rotate(0); box-shadow:0 18px 40px rgba(255,94,159,0.2); }
.sp-tier.tilt-l { transform:rotate(-1.5deg); }
.sp-tier.tilt-r { transform:rotate(1.5deg); }
.sp-tier.best { border-color:rgba(255,210,63,0.5); }
.sp-tier.best::before { content:'BEST'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#FFD23F,#FFA000); color:white; font-family:'Fredoka',sans-serif; font-weight:800; font-size:10px; padding:3px 14px; border-radius:999px; box-shadow:0 4px 12px rgba(255,210,63,0.4); letter-spacing:1px; }
.sp-tier-emoji { font-size:44px; margin-bottom:8px; display:block; }
.sp-tier-name { font-family:'Fredoka',sans-serif; font-weight:700; font-size:16px; }
.sp-tier-price { font-family:'Fredoka',sans-serif; font-weight:800; font-size:22px; color:var(--pink); margin:6px 0; }
.sp-tier-desc { font-size:12px; color:var(--muted); }
.sp-qr { max-width:360px; margin:24px auto; text-align:center; padding:24px; border-radius:24px; background:linear-gradient(135deg,#FFF4D0,#FFF9E0); border:2px solid rgba(255,210,63,0.3); }
.sp-qr-frame { width:200px; height:200px; margin:14px auto; background:white; border-radius:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,0.08); font-size:80px; }
@media (max-width:640px) { .sp-tiers { grid-template-columns:1fr; } .sp-hero-bubble { right:auto; left:50%; transform:translateX(-50%); top:auto; margin-top:8px; position:relative; } }

/* ============ HALL OF FAME — Leaderboard v2 ============ */
.lb2-hero {
  text-align: center;
  padding: 32px 20px 12px;
  max-width: 780px;
  margin: 0 auto;
}
.lb2-title {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(36px, 5.5vw, 54px);
  line-height: 1.05; letter-spacing: -1px;
  margin: 10px 0 6px;
  color: var(--dark);
}
.lb2-title .hl {
  background: linear-gradient(135deg, var(--pink), var(--yellow), var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lb2-sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; }

/* Period buttons — big emoji pill group */
.lb2-period {
  display: inline-flex; gap: 6px;
  padding: 6px;
  background: white;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
  border: 1.5px solid rgba(26,26,46,0.06);
}
.lb2-period-btn {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 1px;
  padding: 8px 18px; border-radius: 999px;
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  color: rgba(26,26,46,0.6);
  border: none; background: transparent; cursor: pointer;
  transition: all 0.25s var(--bouncy);
  min-width: 90px;
}
.lb2-period-btn:hover { transform: translateY(-2px); color: var(--dark); }
.lb2-period-btn.on {
  background: linear-gradient(135deg, var(--pink), var(--coral));
  color: white;
  box-shadow: 0 6px 18px rgba(255,94,159,0.35);
  transform: translateY(-2px);
}
.lb2-period-btn.on .lb2-period-emoji { animation: lb2EmojiSpin 2s var(--bouncy) infinite; }
@keyframes lb2EmojiSpin {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(14deg) scale(1.2); }
}
.lb2-period-emoji { font-size: 18px; line-height: 1; }
.lb2-period-en { font-size: 13px; font-weight: 700; line-height: 1.1; }
.lb2-period-th { font-size: 9px; opacity: 0.75; font-weight: 600; letter-spacing: 0.3px; }

/* Game filter chips */
.lb2-games {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center; max-width: 860px;
  margin: 22px auto 28px;
  padding: 0 16px;
}
.lb2-game-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: white;
  border: 1.5px solid rgba(26,26,46,0.06);
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 12px;
  color: rgba(26,26,46,0.72);
  cursor: pointer;
  transition: all 0.22s var(--bouncy);
}
.lb2-game-chip:hover {
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
  color: var(--c);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 20%, transparent);
}
.lb2-game-chip.on {
  background: var(--c);
  color: white;
  border-color: var(--c);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 40%, transparent);
  transform: translateY(-1px);
}
.lgc-emoji { font-size: 14px; line-height: 1; }

/* Error banner */
.lb2-error {
  max-width: 600px; margin: 0 auto 16px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(255,94,159,0.12);
  color: var(--pink);
  text-align: center; font-weight: 700;
  border: 1.5px solid rgba(255,94,159,0.25);
  font-size: 13px;
}

.lb2-loading { text-align: center; padding: 40px 0; }
.lb2-loading-text { color: var(--muted); margin-top: 8px; font-size: 13px; }

/* EMPTY STATE — claim the throne */
.lb2-empty {
  max-width: 520px; margin: 32px auto;
  padding: 36px 28px 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,248,240,0.92));
  border-radius: 28px;
  border: 2px solid rgba(255,210,63,0.35);
  box-shadow: 0 18px 48px rgba(255,210,63,0.18), 0 6px 18px rgba(0,0,0,0.06);
}
.lb2-empty-scene {
  position: relative;
  width: 220px; height: 220px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}

/* ============ AURA (for #1 champion + empty throne) ============ */
.lb2-aura {
  position: absolute; inset: -30%;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  --aura-c: #FFD23F;
}
.empty-aura { --aura-c: #FFD23F; }

/* Soft core glow — breathes behind blob */
.lb2-aura-core {
  position: absolute;
  width: 80%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--aura-c) 55%, transparent) 0%,
    color-mix(in srgb, var(--aura-c) 30%, transparent) 30%,
    transparent 70%
  );
  filter: blur(12px);
  animation: lb2AuraBreathe 3.2s ease-in-out infinite;
}
@keyframes lb2AuraBreathe {
  0%, 100% { transform: scale(0.92); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* Expanding ripple rings — 3 staggered sonar pulses */
.lb2-aura-ring {
  position: absolute;
  width: 60%; height: 60%;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--aura-c) 60%, transparent);
  opacity: 0;
  animation: lb2AuraRipple 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.lb2-aura-ring.r1 { animation-delay: 0s; }
.lb2-aura-ring.r2 { animation-delay: 1s; }
.lb2-aura-ring.r3 { animation-delay: 2s; }
@keyframes lb2AuraRipple {
  0% {
    transform: scale(0.5);
    opacity: 0;
    border-width: 3px;
  }
  15% { opacity: 0.85; }
  100% {
    transform: scale(2.2);
    opacity: 0;
    border-width: 0.5px;
  }
}

/* Slow rotating light rays — conic gradient */
.lb2-aura-rays {
  position: absolute;
  width: 180%; height: 180%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--aura-c) 18%, transparent) 30deg,
    transparent 60deg,
    transparent 120deg,
    color-mix(in srgb, var(--aura-c) 14%, transparent) 150deg,
    transparent 180deg,
    transparent 240deg,
    color-mix(in srgb, var(--aura-c) 16%, transparent) 270deg,
    transparent 300deg,
    transparent 360deg
  );
  filter: blur(18px);
  animation: lb2AuraRaysSpin 20s linear infinite;
  opacity: 0.7;
  mask-image: radial-gradient(circle at center, black 20%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 65%);
}
@keyframes lb2AuraRaysSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.lb2-empty-title {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 22px;
  color: var(--dark);
  margin-bottom: 4px;
}
.lb2-empty-sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }

/* CHAMPION SPOTLIGHT */
.lb2-champ-wrap {
  position: relative;
  max-width: 620px;
  margin: 0 auto 36px;
  animation: lb2ChampEnter 0.7s var(--bouncy);
}
@keyframes lb2ChampEnter {
  0% { opacity: 0; transform: translateY(30px) scale(0.92); }
  60% { opacity: 1; transform: translateY(-6px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.lb2-confetti {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  border-radius: 32px;
  z-index: 0;
}
.lb2-conf {
  position: absolute; top: -20px;
  width: 10px; height: 14px;
  border-radius: 2px;
  animation: lb2ConfFall 3s linear infinite;
  opacity: 0.85;
}
@keyframes lb2ConfFall {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translateY(420px) rotate(480deg); opacity: 0; }
}

.lb2-champ {
  position: relative;
  background: linear-gradient(165deg, #FFF4D0 0%, #FFDDE9 50%, #FFE4D1 100%);
  border: 3px solid rgba(255,210,63,0.4);
  border-radius: 32px;
  padding: 38px 28px 30px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(255,210,63,0.25), 0 8px 20px rgba(255,94,159,0.14);
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
}
.lb2-champ > * { position: relative; z-index: 2; }
.lb2-champ::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55), transparent 55%);
  z-index: 1;
  pointer-events: none;
}

.lb2-champ-rank {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  margin-bottom: 8px;
}
.lb2-champ-rank-num {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 36px; line-height: 1;
  background: linear-gradient(135deg, #FFA000, #FF5E9F);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 12px rgba(255,160,0,0.3));
}
.lb2-champ-rank-label {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  color: var(--pink);
  padding: 4px 14px; border-radius: 999px;
  background: white;
  box-shadow: 0 4px 10px rgba(255,94,159,0.18);
}

.lb2-champ-blob-wrap {
  position: relative;
  width: 180px; height: 180px;
  margin: 8px auto 14px;
  display: flex; align-items: center; justify-content: center;
}
/* Champion aura sits behind the blob, sized to the 180px blob-wrap */
.champion-aura { inset: -40%; }

.lb2-champ-name {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 32px; color: var(--dark);
  line-height: 1.05;
  margin-bottom: 2px;
}
.lb2-champ-lvl {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: 13px; color: var(--muted);
  margin-bottom: 16px;
}
.lb2-champ-xp {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-bottom: 18px;
}
.lb2-champ-xp-num {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 42px; line-height: 1;
  background: linear-gradient(135deg, var(--pink), var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lb2-champ-xp-label {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 16px; color: var(--muted);
}
.lb2-champ-stats {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
}
.lb2-stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: white;
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: 12px;
  color: var(--dark);
  border: 1.5px solid rgba(26,26,46,0.06);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.lb2-stat b { font-weight: 800; color: var(--pink); }
.lb2-stat.streak b { color: var(--coral); }
.lb2-stat.crown { background: linear-gradient(135deg, rgba(255,210,63,0.2), rgba(255,140,97,0.15)); border-color: rgba(255,210,63,0.4); }

/* RUNNERS-UP carousel */
.lb2-runners-section { max-width: 1040px; margin: 0 auto 36px; padding: 0 16px; }
.lb2-runners-head {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 18px; color: var(--dark);
  margin-bottom: 14px;
}
.lrh-emoji {
  font-size: 22px;
  animation: lrhBob 2.2s ease-in-out infinite;
}
@keyframes lrhBob {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
.lrh-th { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 4px; }

.lb2-runners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.lb2-runner {
  position: relative;
  background: white;
  border: 2px solid rgba(26,26,46,0.06);
  border-radius: 22px;
  padding: 18px 14px 16px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  transition: all 0.3s var(--bouncy);
  animation: lb2RunnerIn 0.5s var(--bouncy) backwards;
  cursor: pointer;
}
@keyframes lb2RunnerIn {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.lb2-runner:nth-child(odd) { transform: rotate(-1deg); }
.lb2-runner:nth-child(even) { transform: rotate(1deg); }
.lb2-runner:hover {
  transform: translateY(-6px) rotate(0) scale(1.03);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--c) 25%, transparent);
  border-color: var(--c);
}
.lb2-runner.silver {
  background: linear-gradient(165deg, #F8F8FC, #E0E0E8);
  border-color: rgba(192,192,200,0.5);
}
.lb2-runner.bronze {
  background: linear-gradient(165deg, #FFE8D5, #F5D0A8);
  border-color: rgba(205,127,50,0.4);
}
.lb2-runner.me {
  background: linear-gradient(165deg, rgba(255,94,159,0.1), rgba(255,94,159,0.03));
  border-color: rgba(255,94,159,0.4);
  box-shadow: 0 10px 28px rgba(255,94,159,0.2);
}
.lb2-runner-rank {
  position: absolute; top: 10px; left: 12px;
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 13px; color: rgba(26,26,46,0.5);
}
.lb2-runner-medal {
  position: absolute; top: 8px; right: 10px;
  font-size: 22px;
  animation: lb2MedalBob 2.5s ease-in-out infinite;
}
@keyframes lb2MedalBob {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg) translateY(-3px); }
}
.lb2-runner-me {
  position: absolute; top: -8px; left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--pink), var(--coral));
  color: white;
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 10px; letter-spacing: 1px;
  box-shadow: 0 4px 10px rgba(255,94,159,0.35);
  z-index: 3;
}
.lb2-runner .blob { margin: 4px 0 6px; animation: none; }
.lb2-runner-name {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 14px; color: var(--dark);
  margin-bottom: 2px;
}
.lb2-runner-lvl {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: 10px; color: var(--muted);
  margin-bottom: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.04);
  display: inline-block;
}
.lb2-runner-xp {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 15px; color: var(--c, var(--pink));
}
.lb2-runner-trend {
  position: absolute; bottom: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 13px;
}
.lb2-runner-trend.up { background: rgba(46,199,107,0.15); color: #0A9A4D; }
.lb2-runner-trend.down { background: rgba(255,94,159,0.12); color: var(--pink); }

/* YOUR RANK motivational card */
.lb2-you {
  max-width: 620px;
  margin: 0 auto 32px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(123,97,255,0.12), rgba(255,94,159,0.08));
  border: 2px solid rgba(123,97,255,0.25);
  border-radius: 22px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 10px 28px rgba(123,97,255,0.15);
}
.lb2-you-blob { flex-shrink: 0; }
.lb2-you-content { display: flex; align-items: center; gap: 14px; flex: 1; }
.lb2-you-rank {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 32px; line-height: 1;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lb2-you-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lb2-you-text b {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 15px; color: var(--dark);
}
.lb2-you-text span { font-size: 12px; color: var(--muted); }
.lb2-you-link {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  color: var(--pink); text-decoration: none;
}
.lb2-you-link:hover { text-decoration: underline; }

/* LIVE ACTIVITY TICKER */
.lb2-ticker-section { max-width: 1040px; margin: 0 auto 32px; padding: 0 16px; }
.lb2-ticker-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 11px; letter-spacing: 2px;
  color: var(--coral);
}
.lb2-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(255,140,97,0.25);
  animation: lb2LiveDot 1.6s ease-in-out infinite;
}
@keyframes lb2LiveDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,140,97,0.25); }
  50% { box-shadow: 0 0 0 9px rgba(255,140,97,0); }
}
.lb2-ticker-th { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: normal; }
.lb2-ticker {
  overflow: hidden;
  background: white;
  border: 1.5px solid rgba(26,26,46,0.06);
  border-radius: 999px;
  padding: 10px 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.lb2-ticker-track {
  display: flex; gap: 32px;
  animation: lb2TickerSlide 28s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.lb2-ticker:hover .lb2-ticker-track { animation-play-state: paused; }
@keyframes lb2TickerSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.lb2-ticker-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 13px;
  color: var(--dark);
  padding: 2px 0;
}
.lb2-ticker-emoji { font-size: 15px; }

@media (max-width: 720px) {
  .lb2-champ-name { font-size: 26px; }
  .lb2-champ-xp-num { font-size: 34px; }
  .lb2-period-btn { min-width: 76px; padding: 7px 12px; }
  .lb2-you-content { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* =====================================================================
   ROOM INVITE PANEL — enhanced share UX on the lobby page.
   Wraps the code pill + copy-link + quick-share chips (LINE/X/Device)
   + Invite Friends (opens modal).
   ===================================================================== */
.rl-invite-panel {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin-bottom: 28px;
}
/* Existing .rl-code overrides — code now behaves as a button */
.rl-code-btn {
  border: 2px solid rgba(255,210,63,0.4);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
}
.rl-code-btn:hover { transform: translateY(-2px) scale(1.02); }
.rl-code-btn.copied {
  background: linear-gradient(135deg,#C4F0D6,#E6FFF2);
  border-color: #2EC76B;
  color: #1A7F4C;
}
.rl-copy-btn {
  padding: 9px 18px; border-radius: 999px;
  background: white;
  border: 2px solid rgba(123,97,255,0.2);
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--dark, #1A1A2E);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 3px 10px rgba(123,97,255,0.12);
}
.rl-copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(123,97,255,0.2);
  background: linear-gradient(135deg, #FFF4F8, #F5F0FF);
}
.rl-copy-btn.copied {
  background: linear-gradient(135deg,#C4F0D6,#E6FFF2);
  border-color: #2EC76B; color: #1A7F4C;
}

.rl-share-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
}
.rl-share-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 12px;
  background: white;
  border: 1.5px solid rgba(26,26,46,0.08);
  color: var(--dark, #1A1A2E);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(26,26,46,0.06);
}
.rl-share-chip:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 14px rgba(26,26,46,0.12);
}
.rl-share-chip.line   { background: linear-gradient(135deg,#E6F9EA,#C9F5D6); border-color: rgba(46,199,107,0.35); color: #1A7F4C; }
.rl-share-chip.x      { background: linear-gradient(135deg,#E8F4FF,#D5E8FF); border-color: rgba(90,140,220,0.3); color: #2a4480; }
.rl-share-chip.device { background: linear-gradient(135deg,#FFF2D4,#FFE3BE); border-color: rgba(255,140,97,0.35); color: #8C4A1C; }
.rl-share-chip.friends {
  background: linear-gradient(135deg,#FF5E9F,#FF8C61);
  border-color: rgba(255,94,159,0.3);
  color: white;
  box-shadow: 0 4px 12px rgba(255,94,159,0.3);
}
.rl-share-chip.friends:hover { box-shadow: 0 7px 18px rgba(255,94,159,0.4); }

/* =====================================================================
   INVITE FRIENDS MODAL
   ===================================================================== */
.rl-ifm-root {
  position: fixed; inset: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  font-family: 'Fredoka', sans-serif;
}
.rl-ifm-back {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,94,159,0.35), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(123,97,255,0.35), transparent 60%),
    rgba(26,26,46,0.55);
  backdrop-filter: blur(4px);
  animation: rlIfmBackIn 0.3s ease;
}
@keyframes rlIfmBackIn { from { opacity: 0; } to { opacity: 1; } }
.rl-ifm-card {
  position: relative; z-index: 2;
  background: linear-gradient(160deg,#FFF8EA 0%,#FFFBF4 100%);
  border-radius: 26px;
  box-shadow: 0 30px 60px rgba(26,26,46,0.35), 0 0 0 4px rgba(255,255,255,0.5);
  width: 100%; max-width: 460px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  animation: rlIfmCardIn 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes rlIfmCardIn {
  0% { transform: translateY(40px) scale(0.88); opacity: 0; }
  60% { transform: translateY(-6px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
.rl-ifm-head {
  position: relative;
  text-align: center;
  padding: 18px 20px 10px;
}
.rl-ifm-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px;
  background: linear-gradient(135deg,#FFD23F,#FF8C61);
  color: var(--dark,#1A1A2E);
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
}
.rl-ifm-title {
  font-size: 24px; font-weight: 800;
  color: var(--dark,#1A1A2E);
  margin: 8px 0 4px;
}
.rl-ifm-title .hl { color: var(--pink,#FF5E9F); }
.rl-ifm-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px; color: var(--muted,#6B6B85);
  margin: 0;
}
.rl-ifm-close {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: white;
  border: 1.5px solid rgba(26,26,46,0.08);
  color: var(--dark,#1A1A2E);
  font-size: 22px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.rl-ifm-close:hover { transform: rotate(90deg) scale(1.05); }

.rl-ifm-search {
  position: relative;
  margin: 6px 18px 10px;
}
.rl-ifm-search-ico {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 14px;
}
.rl-ifm-search-in {
  width: 100%;
  padding: 10px 16px 10px 38px;
  border-radius: 999px;
  border: 2px solid rgba(123,97,255,0.15);
  background: white;
  font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--dark,#1A1A2E);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rl-ifm-search-in:focus {
  border-color: var(--pink,#FF5E9F);
  box-shadow: 0 0 0 4px rgba(255,94,159,0.15);
}

.rl-ifm-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 18px 14px;
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 200px;
}
.rl-ifm-row {
  display: grid; grid-template-columns: 48px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 2px 8px rgba(26,26,46,0.06);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.rl-ifm-row:hover { transform: translateY(-1px) rotate(-0.3deg); }
.rl-ifm-row.sent { background: linear-gradient(135deg,#E6FFF2,#D4F5E8); }
/* Offline rows — slightly dimmed so eye goes to online friends first.
 * We keep the row visible (not hidden) because the player still wants
 * to see who's there + when they were last online. */
.rl-ifm-row.offline { background: linear-gradient(135deg, #F6F5FA, #EFEDF5); opacity: 0.85; }
.rl-ifm-row.offline:hover { transform: translateY(0); }

.rl-ifm-ava {
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rl-ifm-dot {
  position: absolute;
  bottom: 2px; right: 0;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #2EC76B;
  border: 2px solid white;
}
.rl-ifm-dot.online {
  background: #2EC76B;
  box-shadow: 0 0 0 0 rgba(46, 199, 107, 0.55);
  animation: rlIfmDotPulse 1.8s ease-out infinite;
}
.rl-ifm-dot.offline {
  background: #B5B2C6;
  box-shadow: none;
  animation: none;
}
@keyframes rlIfmDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 199, 107, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(46, 199, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 199, 107, 0); }
}
.rl-ifm-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
}
.rl-ifm-last {
  color: var(--muted, #6B6B85);
  font-weight: 600;
}
.rl-ifm-last.online {
  color: #1F8A52;
  font-weight: 700;
}
.rl-ifm-who { min-width: 0; }
.rl-ifm-name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 14px;
  color: var(--dark,#1A1A2E);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rl-ifm-uname {
  font-family: 'Nunito', sans-serif;
  font-size: 11px; color: var(--muted,#6B6B85);
  font-weight: 600;
}
.rl-ifm-btn {
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg,#FF5E9F,#FF8C61);
  color: white;
  border: none;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 12px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(255,94,159,0.35);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
}
.rl-ifm-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px rgba(255,94,159,0.45);
}
.rl-ifm-btn.sent, .rl-ifm-btn:disabled {
  background: #2EC76B;
  box-shadow: 0 2px 8px rgba(46,199,107,0.3);
  cursor: default;
}
/* Offline button — muted grey with no hover, distinct from green "sent"
 * so the user can tell at a glance: dim = friend not reachable right now. */
.rl-ifm-btn.offline, .rl-ifm-btn:disabled.offline {
  background: linear-gradient(135deg, #C4C1D3, #A8A4BC);
  color: rgba(255,255,255,0.9);
  box-shadow: 0 2px 6px rgba(26, 26, 46, 0.12);
  cursor: not-allowed;
}
.rl-ifm-btn.offline:hover { transform: none; }

.rl-ifm-empty {
  text-align: center;
  padding: 26px 16px;
  color: var(--muted,#6B6B85);
  font-family: 'Nunito', sans-serif;
}
.rl-ifm-empty-ico { font-size: 42px; margin-bottom: 8px; }
.rl-ifm-empty-h {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 16px;
  color: var(--dark,#1A1A2E);
  margin: 0 0 4px;
}
.rl-ifm-empty-s { font-size: 13px; margin: 0; }
.rl-ifm-empty-s a { color: var(--pink,#FF5E9F); font-weight: 700; text-decoration: none; }
.rl-ifm-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(123,97,255,0.15);
  border-top-color: var(--pink,#FF5E9F);
  border-radius: 50%;
  animation: rlIfmSpin 0.8s linear infinite;
  margin: 8px auto;
}
@keyframes rlIfmSpin { to { transform: rotate(360deg); } }

.rl-ifm-err {
  margin: 0 18px 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,94,159,0.1);
  color: #8b1e4a;
  font-size: 12px;
  font-family: 'Nunito', sans-serif;
}
.rl-ifm-foot {
  padding: 10px 18px 16px;
  border-top: 1px dashed rgba(26,26,46,0.08);
  text-align: center;
}
.rl-ifm-hint {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: var(--muted,#6B6B85);
}

/* ======================================================================
   PROFILE PILL — nav CTA that shows the player's own Yumpi mascot
   Replaces the generic "🎮 Profile" link on every authenticated page.
   ====================================================================== */
/* Root wrapper — establishes the anchor for the dropdown menu below. */
.yp-profile-pill-root {
  position: relative;
  display: inline-flex;
}
/* Guest/unauth variant — hosts the Log in + Sign up button pair
   instead of the single pill. Gap is generous so both CTAs breathe. */
.yp-profile-pill-root.is-guest {
  gap: 8px;
  align-items: center;
}

/* ---------- Auth CTAs (Log in / Sign up) ---------- */
.yp-authpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease;
}
.yp-authpill:hover {
  transform: translateY(-2px) scale(1.04);
}
.yp-authpill:active { transform: translateY(0) scale(0.96); }

/* Ghost — secondary CTA, "Log in". White pill with soft pink ring so it
 * pairs with the primary Sign-up gradient without stealing attention. */
.yp-authpill.ghost {
  background: white;
  color: var(--dark, #1A1A2E);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 94, 159, 0.35),
    0 4px 10px rgba(26, 26, 46, 0.06);
}
.yp-authpill.ghost:hover {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 94, 159, 0.6),
    0 8px 18px rgba(255, 94, 159, 0.2);
}

/* Primary — "Sign up" — the existing pink→coral brand gradient. */
.yp-authpill.primary {
  background: linear-gradient(135deg, var(--pink, #FF5E9F), var(--coral, #FF8C61));
  color: white;
  box-shadow:
    0 6px 16px rgba(255, 94, 159, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}
/* Subtle shimmer on the primary CTA so the conversion button always
 * draws the eye of a new visitor. Keeps to house motion — bouncy-eased. */
.yp-authpill.primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: ypAuthShine 3.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  pointer-events: none;
}
@keyframes ypAuthShine {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
.yp-authpill.primary:hover {
  box-shadow:
    0 10px 22px rgba(255, 94, 159, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

@media (max-width: 520px) {
  /* Hide the emoji prefix so both CTAs stay single-row on phones. */
  .yp-authpill { padding: 6px 12px; font-size: 12px; gap: 4px; }
  .yp-authpill > span[aria-hidden="true"] { display: none; }
}
@media (max-width: 380px) {
  /* Tightest viewports — keep Sign up (conversion) visible, hide Log in
   * as secondary (users can still reach it from /login directly). */
  .yp-profile-pill-root.is-guest .yp-authpill.ghost { display: none; }
}
.yp-profile-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  background: linear-gradient(135deg, var(--pink,#FF5E9F), var(--coral,#FF8C61));
  color: white;
  border: none;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 6px 16px rgba(255,94,159,0.38),
    0 0 0 2px rgba(255,255,255,0.85);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
  max-width: 200px;
  overflow: hidden;
}
.yp-profile-pill:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 10px 22px rgba(255,94,159,0.5),
    0 0 0 2px rgba(255,255,255,0.95);
}
.yp-profile-pill:active { transform: translateY(0) scale(0.97); }
.yp-profile-pill.is-open {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 10px 22px rgba(255,94,159,0.5),
    0 0 0 2px rgba(255,255,255,0.95);
}
/* Avatar bubble — white ring makes the mascot pop over the gradient */
.yp-profile-pill-ava {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
/* Keep avatar fully still — only the pill itself lifts on hover. */
.yp-profile-pill-name {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}
.yp-profile-pill-caret {
  font-size: 10px;
  opacity: 0.85;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.yp-profile-pill.is-open .yp-profile-pill-caret { transform: rotate(180deg); }

/* ---------- Dropdown menu ---------- */
.yp-profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: white;
  border-radius: 20px;
  padding: 10px;
  box-shadow:
    0 20px 48px rgba(26, 26, 46, 0.18),
    0 6px 16px rgba(255, 94, 159, 0.14),
    0 0 0 1px rgba(255, 94, 159, 0.08);
  z-index: 60;
  animation: ypMenuIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: 'Nunito', sans-serif;
}
@keyframes ypMenuIn {
  0% { opacity: 0; transform: translateY(-6px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Little arrow pointing up at the pill */
.yp-profile-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 18px;
  width: 12px; height: 12px;
  background: white;
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(255, 94, 159, 0.05);
}
.yp-profile-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
}
.yp-profile-menu-ava {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFF5E6, #FFE8F0);
  box-shadow: inset 0 0 0 2px white, 0 4px 10px rgba(255, 94, 159, 0.18);
  flex-shrink: 0;
}
.yp-profile-menu-who { min-width: 0; flex: 1; }
.yp-profile-menu-name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--dark, #1A1A2E);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yp-profile-menu-sub {
  font-size: 12px;
  color: var(--muted, #6B6B85);
  margin-top: 2px;
}
.yp-profile-menu-upgrade {
  color: var(--pink, #FF5E9F);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.yp-profile-menu-upgrade:hover { border-bottom-style: solid; }
.yp-profile-menu-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 94, 159, 0.18), transparent);
  margin: 4px 6px;
}
.yp-profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark, #1A1A2E);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.yp-profile-menu-item:hover {
  background: linear-gradient(90deg, #FFF8F0, #FFE8F0);
  transform: translateX(2px);
}
.yp-profile-menu-item:active { transform: translateX(0) scale(0.98); }
.yp-profile-menu-ico {
  font-size: 18px;
  width: 26px;
  display: inline-flex;
  justify-content: center;
}
.yp-profile-menu-sub-th {
  margin-left: auto;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: var(--muted, #6B6B85);
  font-weight: 600;
}
.yp-profile-menu-item.danger {
  color: #C8324F;
}
.yp-profile-menu-item.danger:hover {
  background: linear-gradient(90deg, #FFEBEF, #FFDADE);
}
.yp-profile-menu-item.danger .yp-profile-menu-sub-th {
  color: rgba(200, 50, 79, 0.75);
}

@media (max-width: 640px) {
  .yp-profile-pill-name { display: none; }
  .yp-profile-pill { padding: 3px 8px 3px 3px; gap: 2px; }
  .yp-profile-pill-caret { font-size: 9px; }
  .yp-profile-menu { min-width: 220px; right: -4px; }
}

/* ======================================================================
   NAV NOTIFICATION BELL — sits next to Profile button
   ====================================================================== */
.yp-bell-wrap {
  position: relative;
  display: inline-block;
}
.yp-bell {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 2px solid rgba(26,26,46,0.08);
  background: white;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 3px 10px rgba(26,26,46,0.08);
}
.yp-bell:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 14px rgba(123,97,255,0.18);
}
.yp-bell.on { background: linear-gradient(135deg,#FFF4F8,#F3EEFF); border-color: rgba(123,97,255,0.3); }
.yp-bell.has .yp-bell-ico { animation: bellRing 1.4s cubic-bezier(0.34,1.56,0.64,1) infinite; }
@keyframes bellRing {
  0%, 80%, 100% { transform: rotate(0deg); }
  85% { transform: rotate(-14deg); }
  90% { transform: rotate(12deg); }
  95% { transform: rotate(-8deg); }
}
.yp-bell-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg,var(--pink,#FF5E9F),var(--coral,#FF8C61));
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; font-size: 10px; line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(255,94,159,0.5);
  animation: badgePop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes badgePop {
  0% { transform: scale(0); }
  80% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Drawer that opens under the bell */
.yp-bell-drawer {
  position: absolute;
  top: calc(100% + 10px); right: -4px;
  width: 340px; max-width: calc(100vw - 20px);
  background: linear-gradient(160deg,#FFF8EA 0%,#FFFBF4 100%);
  border-radius: 22px;
  box-shadow: 0 20px 46px rgba(26,26,46,0.25), 0 0 0 3px rgba(255,255,255,0.6);
  padding: 14px 14px 10px;
  z-index: 70;
  animation: drawerIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
  font-family: 'Fredoka', sans-serif;
}
@keyframes drawerIn {
  0% { transform: translateY(-8px) scale(0.95); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.yp-bell-drawer::before {
  content: '';
  position: absolute;
  top: -7px; right: 14px;
  width: 14px; height: 14px;
  background: linear-gradient(160deg,#FFF8EA 0%,#FFFBF4 100%);
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(26,26,46,0.04);
}
.yp-bell-head { text-align: left; margin-bottom: 10px; }
.yp-bell-chip {
  display: inline-block;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(135deg,#FFD23F,#FF8C61);
  color: var(--dark,#1A1A2E);
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
}
.yp-bell-head h3 {
  font-weight: 800; font-size: 18px;
  color: var(--dark,#1A1A2E);
  margin: 4px 0 0;
}
.yp-bell-empty { text-align: center; padding: 16px 8px 8px; font-family: 'Nunito', sans-serif; }
.yp-bell-empty-ico { font-size: 34px; margin-bottom: 4px; }
.yp-bell-empty-h {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 14px;
  color: var(--dark,#1A1A2E);
  margin: 0 0 2px;
}
.yp-bell-empty-s { font-size: 12px; color: var(--muted,#6B6B85); margin: 0; }
.yp-bell-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.yp-bell-item {
  display: grid; grid-template-columns: 42px 1fr auto;
  align-items: center; gap: 8px;
  padding: 8px; border-radius: 14px;
  background: white;
  box-shadow: 0 2px 6px rgba(26,26,46,0.06);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.yp-bell-item:hover { transform: translateY(-1px) rotate(-0.3deg); }
.yp-bell-ava {
  position: relative;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
}
.yp-bell-emoji {
  position: absolute; bottom: -3px; right: -3px;
  background: white;
  width: 18px; height: 18px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.yp-bell-msg { min-width: 0; }
.yp-bell-h {
  font-size: 12px; color: var(--dark,#1A1A2E);
  font-family: 'Nunito', sans-serif;
}
.yp-bell-h b { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px; color: var(--pink,#FF5E9F); }
.yp-bell-sub {
  font-size: 11px; color: var(--dark,#1A1A2E);
  font-family: 'Nunito', sans-serif; font-weight: 600;
  margin-top: 1px;
}
.yp-bell-sub .code {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  background: linear-gradient(135deg,#FFF4D0,#FFDDE9);
  padding: 1px 6px; border-radius: 999px; letter-spacing: 1.5px;
  font-size: 10px;
}
.yp-bell-time {
  font-size: 10px; color: var(--muted,#6B6B85);
  font-family: 'Nunito', sans-serif;
  margin-top: 2px;
}
.yp-bell-acts { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.yp-bell-act {
  padding: 5px 10px; border-radius: 999px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 11px;
  cursor: pointer; border: none;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
}
.yp-bell-act.primary {
  background: linear-gradient(135deg,var(--pink,#FF5E9F),var(--coral,#FF8C61));
  color: white;
  box-shadow: 0 3px 8px rgba(255,94,159,0.35);
}
.yp-bell-act.primary:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 5px 12px rgba(255,94,159,0.5);
}
.yp-bell-act.ghost {
  background: rgba(26,26,46,0.06);
  color: var(--muted,#6B6B85);
  font-size: 14px;
  padding: 3px 8px;
}
.yp-bell-act.ghost:hover { background: rgba(26,26,46,0.1); color: var(--dark,#1A1A2E); }

/* ======================================================================
   INVITE TOAST — global slide-in from the top-right when invite:new fires
   ====================================================================== */
.yp-invt-root {
  position: fixed;
  top: 86px; right: 20px;
  z-index: 90;
  max-width: calc(100vw - 40px);
  width: 340px;
  pointer-events: none;
  animation: invtIn 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes invtIn {
  0%   { transform: translate(40px, -12px) scale(0.9); opacity: 0; }
  60%  { transform: translate(0, 0) scale(1.03); opacity: 1; }
  100% { transform: translate(0, 0) scale(1); }
}
.yp-invt-card {
  position: relative;
  background: linear-gradient(160deg,#FFF8EA 0%,#FFEEF5 100%);
  border-radius: 22px;
  box-shadow: 0 20px 42px rgba(255,94,159,0.25), 0 0 0 3px rgba(255,255,255,0.7);
  padding: 12px 14px 14px;
  pointer-events: auto;
  font-family: 'Fredoka', sans-serif;
  overflow: hidden;
}
.yp-invt-spark {
  position: absolute; top: -2px; right: 10px;
  font-size: 22px;
  animation: invtSpark 1.4s cubic-bezier(0.34,1.56,0.64,1) infinite;
}
@keyframes invtSpark {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50% { transform: rotate(10deg) scale(1.15); }
}
.yp-invt-who {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.yp-invt-ava {
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.yp-invt-emoji {
  position: absolute; bottom: -4px; right: -4px;
  background: white;
  width: 20px; height: 20px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.yp-invt-msg { min-width: 0; }
.yp-invt-h {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--dark,#1A1A2E);
}
.yp-invt-h b {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  color: var(--pink,#FF5E9F);
}
.yp-invt-game {
  font-size: 11px;
  font-family: 'Nunito', sans-serif;
  color: var(--dark,#1A1A2E);
  font-weight: 600;
  margin-top: 2px;
}
.yp-invt-game .code {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(135deg,#FFF4D0,#FFDDE9);
  padding: 1px 7px; border-radius: 999px;
}
.yp-invt-x {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(26,26,46,0.06);
  color: var(--muted,#6B6B85);
  border: none;
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.yp-invt-x:hover { transform: rotate(90deg); background: rgba(26,26,46,0.12); color: var(--dark,#1A1A2E); }

.yp-invt-row { display: flex; gap: 8px; }
.yp-invt-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px;
  cursor: pointer; border: none;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
}
.yp-invt-btn.primary {
  background: linear-gradient(135deg,var(--pink,#FF5E9F),var(--coral,#FF8C61));
  color: white;
  box-shadow: 0 4px 10px rgba(255,94,159,0.4);
}
.yp-invt-btn.primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 18px rgba(255,94,159,0.5);
}
.yp-invt-btn.secondary {
  background: white;
  color: var(--dark,#1A1A2E);
  border: 1.5px solid rgba(26,26,46,0.1);
}
.yp-invt-btn.secondary:hover {
  background: rgba(26,26,46,0.04);
  transform: translateY(-1px);
}
.yp-invt-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,var(--pink,#FF5E9F),var(--yellow,#FFD23F),var(--mint,#4ECDC4));
  transform-origin: left;
  animation: invtCountdown 12s linear forwards;
}
@keyframes invtCountdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (max-width: 520px) {
  .yp-invt-root { right: 10px; left: 10px; top: 76px; width: auto; }
  .yp-bell-drawer { width: calc(100vw - 24px); }
}

/* ======================================================================
   REACTION BAR — 6-preset emoji chips + floating reaction layer
   ====================================================================== */
.rl-reactions-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,248,240,0.85));
  box-shadow: 0 6px 18px rgba(123,97,255,0.12);
  max-width: 420px;
  backdrop-filter: blur(6px);
  flex-wrap: wrap;
}
.rl-reaction-btn {
  width: 42px; height: 42px;
  border-radius: 999px;
  background: white;
  border: 1.5px solid rgba(26,26,46,0.08);
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(26,26,46,0.08);
  line-height: 1;
}
.rl-reaction-btn:hover {
  transform: translateY(-3px) scale(1.1) rotate(-5deg);
  box-shadow: 0 6px 14px rgba(255,94,159,0.25);
}
.rl-reaction-btn:active { transform: scale(0.95); }

/* Full-stage floating layer for incoming reactions */
.rl-reactions-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 55;
  overflow: hidden;
}
.rl-reaction-float {
  position: absolute;
  bottom: 60px;
  font-size: 40px;
  animation: reactionFloat 2.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
  filter: drop-shadow(0 4px 10px rgba(255,94,159,0.3));
  line-height: 1;
  user-select: none;
}
@keyframes reactionFloat {
  0%   { transform: translateY(0) scale(0.4) rotate(-20deg); opacity: 0; }
  15%  { transform: translateY(-40px) scale(1.4) rotate(8deg); opacity: 1; }
  50%  { transform: translateY(-220px) scale(1.1) rotate(-5deg); opacity: 1; }
  100% { transform: translateY(-400px) scale(0.7) rotate(14deg); opacity: 0; }
}

/* ======================================================================
   QR MODAL — scannable invite
   ====================================================================== */
.rl-qr-root {
  position: fixed; inset: 0;
  z-index: 85;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  font-family: 'Fredoka', sans-serif;
}
.rl-qr-back {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(123,97,255,0.4), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,210,63,0.35), transparent 60%),
    rgba(26,26,46,0.55);
  backdrop-filter: blur(4px);
  animation: rlIfmBackIn 0.3s ease;
}
.rl-qr-card {
  position: relative; z-index: 2;
  background: linear-gradient(160deg,#FFF8EA 0%,#FFFBF4 100%);
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(26,26,46,0.35), 0 0 0 4px rgba(255,255,255,0.6);
  padding: 22px 22px 18px;
  max-width: 380px; width: 100%;
  text-align: center;
  animation: rlIfmCardIn 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.rl-qr-close {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: white;
  border: 1.5px solid rgba(26,26,46,0.08);
  font-size: 20px; font-weight: 700;
  color: var(--dark,#1A1A2E);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.rl-qr-close:hover { transform: rotate(90deg); }
.rl-qr-head { margin-bottom: 14px; }
.rl-qr-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mint,#4ECDC4), var(--purple,#7B61FF));
  color: white;
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
}
.rl-qr-title {
  font-size: 22px; font-weight: 800;
  color: var(--dark,#1A1A2E);
  margin: 6px 0 2px;
}
.rl-qr-title .hl { color: var(--pink,#FF5E9F); }
.rl-qr-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 12px; color: var(--muted,#6B6B85);
  margin: 0;
}
.rl-qr-frame {
  position: relative;
  display: inline-block;
  padding: 14px;
  background: white;
  border-radius: 22px;
  box-shadow: inset 0 0 0 3px rgba(123,97,255,0.1), 0 6px 16px rgba(26,26,46,0.12);
  margin: 6px 0;
}
.rl-qr-frame img {
  display: block;
  border-radius: 12px;
}
.rl-qr-corner {
  position: absolute;
  font-size: 18px;
  animation: qrCorner 2.2s cubic-bezier(0.34,1.56,0.64,1) infinite;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.rl-qr-corner.tl { top: -4px; left: -4px; }
.rl-qr-corner.tr { top: -4px; right: -4px; animation-delay: 0.3s; }
.rl-qr-corner.bl { bottom: -4px; left: -4px; animation-delay: 0.6s; }
.rl-qr-corner.br { bottom: -4px; right: -4px; animation-delay: 0.9s; }
@keyframes qrCorner {
  0%, 100% { transform: scale(1) rotate(-4deg); }
  50% { transform: scale(1.2) rotate(10deg); }
}
.rl-qr-code {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 8px;
  color: var(--dark,#1A1A2E);
  background: linear-gradient(135deg,#FFF4D0,#FFDDE9);
  padding: 8px 18px;
  border-radius: 999px;
  display: inline-block;
  margin: 8px 0 4px;
  border: 2px solid rgba(255,210,63,0.4);
}
.rl-qr-hint {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: var(--muted,#6B6B85);
  margin: 0;
}
.rl-share-chip.qr {
  background: linear-gradient(135deg,#E8F4FF,#CFE8FF);
  border-color: rgba(90,140,220,0.3);
  color: #2a4480;
}

/* ======================================================================
   MVP CALLOUT CHIP (in MatchResultsModal table rows)
   ====================================================================== */
.mm-mr-mvp {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg,#FFF4D0,#FFE1EC);
  border: 1px solid rgba(255,210,63,0.5);
  color: var(--dark,#1A1A2E);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 4px rgba(255,210,63,0.25);
  animation: mvpPop 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes mvpPop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ======================================================================
   RESUME BANNER (Kahoot-style "Back in action?" pill)
   ====================================================================== */
.yp-resume-root {
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 88;
  pointer-events: none;
  animation: resumeSlideUp 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes resumeSlideUp {
  0%   { transform: translate(-50%, 20px); opacity: 0; }
  60%  { transform: translate(-50%, -4px); opacity: 1; }
  100% { transform: translate(-50%, 0); }
}
.yp-resume-card {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px;
  background: linear-gradient(135deg,#1A1A2E,#3a2a5c);
  color: white;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28), 0 0 0 3px rgba(255,210,63,0.3);
  font-family: 'Fredoka', sans-serif;
  max-width: calc(100vw - 24px);
}
.yp-resume-ico {
  font-size: 22px;
  animation: resumeBounce 1.6s cubic-bezier(0.34,1.56,0.64,1) infinite;
}
@keyframes resumeBounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-4px) rotate(6deg); }
}
.yp-resume-txt { min-width: 0; }
.yp-resume-h {
  font-weight: 700; font-size: 14px;
  white-space: nowrap;
}
.yp-resume-h .th {
  opacity: 0.7;
  font-weight: 500;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
}
.yp-resume-s {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}
.yp-resume-s b {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  color: var(--yellow,#FFD23F);
  letter-spacing: 2px;
}
.yp-resume-btn {
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg,var(--pink,#FF5E9F),var(--coral,#FF8C61));
  color: white;
  border: none;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 12px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(255,94,159,0.4);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.yp-resume-btn:hover { transform: translateY(-2px) scale(1.05); }

/* Friends-playing variant of the banner. Stacks up to 2 cards so
 * multiple friends can be surfaced without a carousel UI. */
.yp-resume-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.yp-resume-card-friend {
  padding: 8px 10px 8px 8px;
  background: linear-gradient(135deg, #2B1E4F, #4A2C74);
  text-decoration: none;
}
.yp-resume-card-friend .yp-resume-friend-ava {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: white;
  display: inline-flex;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.yp-resume-card-friend .yp-resume-h b {
  background: linear-gradient(90deg, #FFD23F, #FF8C61);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.yp-resume-game {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  margin-left: 4px;
}
.yp-resume-slots b { color: #FFD23F; letter-spacing: 0; }
.yp-resume-sep { margin: 0 4px; opacity: 0.45; }
.yp-resume-x {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  color: white;
  border: none;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.yp-resume-x:hover { opacity: 1; background: rgba(255,255,255,0.25); }

/* ======================================================================
   ROOM — CUTE GAME PICKER (replaces the old <select>)
   Host taps a game card; everyone else sees only the preview banner above.
   ====================================================================== */
.rl-pick-head {
  text-align: center;
  margin-bottom: 14px;
}
.rl-pick-chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--purple,#7B61FF), var(--pink,#FF5E9F));
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; font-size: 10px; letter-spacing: 1.4px;
}
.rl-pick-h {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px; font-weight: 800;
  color: var(--dark,#1A1A2E);
  margin: 8px 0 2px;
}
.rl-pick-h .hl {
  background: linear-gradient(135deg,#FF5E9F,#FF8C61);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rl-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.rl-game-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 16px 10px 14px;
  border-radius: 22px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--game-accent, #FF5E9F) 18%, white),
    color-mix(in srgb, var(--game-accent, #FF5E9F) 6%, white)
  );
  border: 2px solid transparent;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  color: var(--dark,#1A1A2E);
  text-align: center;
  transform: rotate(-0.5deg);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--game-accent, #FF5E9F) 22%, transparent);
  overflow: hidden;
}
.rl-game-card:hover {
  transform: translateY(-4px) rotate(0deg) scale(1.03);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--game-accent, #FF5E9F) 35%, transparent);
}
.rl-game-card.active {
  border-color: var(--game-accent, #FF5E9F);
  box-shadow:
    0 10px 26px color-mix(in srgb, var(--game-accent, #FF5E9F) 45%, transparent),
    inset 0 0 0 1.5px rgba(255,255,255,0.6);
  transform: translateY(-2px) rotate(0);
}
.rl-game-card-emoji {
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(26,26,46,0.15));
  animation: rlGameFloat 3.2s cubic-bezier(0.34,1.56,0.64,1) infinite;
}
.rl-game-card:nth-child(2n) .rl-game-card-emoji { animation-delay: 0.4s; }
.rl-game-card:nth-child(3n) .rl-game-card-emoji { animation-delay: 0.8s; }
@keyframes rlGameFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-4px) rotate(6deg); }
}
.rl-game-card-name {
  font-weight: 800;
  font-size: 14px;
  margin-top: 2px;
}
.rl-game-card-desc {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--muted,#6B6B85);
  line-height: 1.3;
}
.rl-game-card-check {
  position: absolute;
  top: 6px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2EC76B, #62DFA0);
  color: white;
  font-size: 13px; font-weight: 800; line-height: 22px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(46,199,107,0.4);
  animation: rlGameCheck 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes rlGameCheck {
  0% { transform: scale(0) rotate(-20deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (max-width: 520px) {
  .rl-game-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .rl-game-card-emoji { font-size: 28px; }
  .rl-game-card-name { font-size: 12px; }
  .rl-game-card-desc { font-size: 10px; }
}

/* ======================================================================
   ROOM CHAT — floating bubble → sliding bottom-right panel
   ====================================================================== */
.rl-chat-fab {
  position: fixed;
  bottom: 18px; right: 18px;
  z-index: 75;
  width: 54px; height: 54px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink,#FF5E9F), var(--coral,#FF8C61));
  color: white;
  border: 3px solid white;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(255,94,159,0.45);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.rl-chat-fab:hover { transform: translateY(-3px) scale(1.08) rotate(-6deg); }
.rl-chat-fab.has { animation: chatFabWiggle 1.4s cubic-bezier(0.34,1.56,0.64,1) infinite; }
@keyframes chatFabWiggle {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
.rl-chat-fab-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--yellow,#FFD23F);
  color: var(--dark,#1A1A2E);
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; font-size: 11px; line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(255,210,63,0.5);
}
.rl-chat-panel {
  position: fixed;
  bottom: 18px; right: 18px;
  z-index: 75;
  width: 340px; max-width: calc(100vw - 32px);
  height: 480px; max-height: calc(100vh - 140px);
  background: linear-gradient(160deg,#FFF8EA 0%,#FFFBF4 100%);
  border-radius: 22px;
  box-shadow: 0 20px 46px rgba(26,26,46,0.25), 0 0 0 3px rgba(255,255,255,0.7);
  display: flex; flex-direction: column;
  font-family: 'Fredoka', sans-serif;
  animation: chatPanelIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
}
@keyframes chatPanelIn {
  0%   { transform: translateY(30px) scale(0.92); opacity: 0; }
  60%  { transform: translateY(-4px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
.rl-chat-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px dashed rgba(26,26,46,0.1);
}
.rl-chat-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mint,#4ECDC4), var(--purple,#7B61FF));
  color: white;
  font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
}
.rl-chat-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--dark,#1A1A2E);
  flex: 1;
}
.rl-chat-close {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(26,26,46,0.06);
  color: var(--dark,#1A1A2E);
  border: none;
  font-size: 18px; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.rl-chat-close:hover { transform: rotate(90deg); background: rgba(26,26,46,0.12); }

.rl-chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.rl-chat-empty {
  margin: auto;
  text-align: center;
  color: var(--muted,#6B6B85);
  font-family: 'Nunito', sans-serif;
  padding: 20px;
}
.rl-chat-empty-ico {
  font-size: 36px;
  margin-bottom: 8px;
  animation: chatSpark 1.8s cubic-bezier(0.34,1.56,0.64,1) infinite;
}
@keyframes chatSpark {
  0%, 100% { transform: rotate(-10deg) scale(1); }
  50% { transform: rotate(14deg) scale(1.2); }
}
.rl-chat-empty p {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 14px;
  color: var(--dark,#1A1A2E);
  margin: 0 0 4px;
}
.rl-chat-empty-hint {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--muted,#6B6B85) !important;
}

.rl-chat-msg {
  display: flex; align-items: flex-end; gap: 6px;
}
.rl-chat-msg.mine {
  flex-direction: row-reverse;
}
.rl-chat-ava {
  flex-shrink: 0;
  display: inline-flex;
}
.rl-chat-body { min-width: 0; max-width: 70%; }
.rl-chat-msg.mine .rl-chat-body { align-items: flex-end; text-align: right; }
.rl-chat-name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: var(--muted,#6B6B85);
  margin-bottom: 2px;
  padding: 0 4px;
}
.rl-chat-bubble {
  padding: 7px 12px;
  border-radius: 16px;
  background: white;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--dark,#1A1A2E);
  box-shadow: 0 2px 6px rgba(26,26,46,0.08);
  word-break: break-word;
  line-height: 1.35;
}
.rl-chat-msg.mine .rl-chat-bubble {
  background: linear-gradient(135deg, var(--pink,#FF5E9F), var(--coral,#FF8C61));
  color: white;
  box-shadow: 0 2px 8px rgba(255,94,159,0.35);
}

.rl-chat-compose {
  padding: 10px 14px 6px;
  border-top: 1px dashed rgba(26,26,46,0.1);
  display: flex; gap: 6px;
  align-items: center;
}
.rl-chat-input {
  flex: 1;
  padding: 9px 14px;
  border-radius: 999px;
  background: white;
  border: 1.5px solid rgba(26,26,46,0.1);
  font-family: 'Nunito', sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--dark,#1A1A2E);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rl-chat-input:focus {
  border-color: var(--pink,#FF5E9F);
  box-shadow: 0 0 0 3px rgba(255,94,159,0.15);
}
.rl-chat-send {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink,#FF5E9F), var(--coral,#FF8C61));
  color: white;
  border: none;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(255,94,159,0.4);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.rl-chat-send:hover:not(:disabled) { transform: translateY(-2px) scale(1.08) rotate(-6deg); }
.rl-chat-send:disabled {
  background: rgba(26,26,46,0.1);
  color: var(--muted,#6B6B85);
  box-shadow: none;
  cursor: default;
}
.rl-chat-hint {
  display: flex; justify-content: space-between;
  padding: 0 18px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  color: var(--muted,#6B6B85);
}

@media (max-width: 520px) {
  .rl-chat-panel {
    right: 10px; bottom: 12px;
    width: calc(100vw - 20px);
    height: 60vh;
  }
  .rl-chat-fab { right: 14px; bottom: 14px; }
}