/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-orange-50: oklch(98% 0.016 73.684);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-700: oklch(55.4% 0.135 66.442);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-cyan-400: oklch(78.9% 0.154 211.53);
    --color-cyan-700: oklch(52% 0.105 223.128);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-3xl: 64px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-yumpa-pink: #FF5E9F;
    --color-yumpa-yellow: #FFD23F;
    --color-yumpa-mint: #4ECDC4;
    --color-yumpa-purple: #7B61FF;
    --color-yumpa-coral: #FF8C61;
    --color-yumpa-dark: #1A1A2E;
    --color-yumpa-cream: #FFF8F0;
    --font-display: "Fredoka", sans-serif;
    --font-body: "Nunito", sans-serif;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .start\! {
    inset-inline-start: var(--spacing) !important;
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .-top-1 {
    top: calc(var(--spacing) * -1);
  }
  .-top-2 {
    top: calc(var(--spacing) * -2);
  }
  .-top-8 {
    top: calc(var(--spacing) * -8);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1 {
    top: calc(var(--spacing) * 1);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-1\/3 {
    top: calc(1 / 3 * 100%);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .top-10 {
    top: calc(var(--spacing) * 10);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .top-24 {
    top: calc(var(--spacing) * 24);
  }
  .top-full {
    top: 100%;
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }
  .bottom-12 {
    bottom: calc(var(--spacing) * 12);
  }
  .-left-2 {
    left: calc(var(--spacing) * -2);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[1\] {
    z-index: 1;
  }
  .z-\[2\] {
    z-index: 2;
  }
  .z-\[5\] {
    z-index: 5;
  }
  .z-\[55\] {
    z-index: 55;
  }
  .z-\[60\] {
    z-index: 60;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .z-\[200\] {
    z-index: 200;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-4 {
    margin: calc(var(--spacing) * 4);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-\[3px\] {
    height: 3px;
  }
  .h-full {
    height: 100%;
  }
  .max-h-\[45vh\] {
    max-height: 45vh;
  }
  .min-h-\[48px\] {
    min-height: 48px;
  }
  .min-h-\[52px\] {
    min-height: 52px;
  }
  .min-h-\[70vh\] {
    min-height: 70vh;
  }
  .min-h-\[120px\] {
    min-height: 120px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-1 {
    width: calc(var(--spacing) * 1);
  }
  .w-1\/3 {
    width: calc(1 / 3 * 100%);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-56 {
    width: calc(var(--spacing) * 56);
  }
  .w-\[9vw\] {
    width: 9vw;
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-\[36px\] {
    max-width: 36px;
  }
  .max-w-\[80px\] {
    max-width: 80px;
  }
  .max-w-\[90px\] {
    max-width: 90px;
  }
  .max-w-\[110px\] {
    max-width: 110px;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-\[2\] {
    flex: 2;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .origin-bottom {
    transform-origin: bottom;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-110 {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-125 {
    --tw-scale-x: 125%;
    --tw-scale-y: 125%;
    --tw-scale-z: 125%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-rotate-90 {
    rotate: calc(90deg * -1);
  }
  .rotate-6 {
    rotate: 6deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-bounce {
    animation: var(--animate-bounce);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-text {
    cursor: text;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .space-y-1\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
  .rounded-b-2xl {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-500 {
    border-color: var(--color-gray-500);
  }
  .border-green-200 {
    border-color: var(--color-green-200);
  }
  .border-green-500 {
    border-color: var(--color-green-500);
  }
  .border-green-600 {
    border-color: var(--color-green-600);
  }
  .border-red-200 {
    border-color: var(--color-red-200);
  }
  .border-red-400 {
    border-color: var(--color-red-400);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-white {
    border-color: var(--color-white);
  }
  .border-white\/90 {
    border-color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .border-yellow-500 {
    border-color: var(--color-yellow-500);
  }
  .border-yumpa-coral {
    border-color: var(--color-yumpa-coral);
  }
  .border-yumpa-coral\/30 {
    border-color: color-mix(in srgb, #FF8C61 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-coral) 30%, transparent);
    }
  }
  .border-yumpa-coral\/35 {
    border-color: color-mix(in srgb, #FF8C61 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-coral) 35%, transparent);
    }
  }
  .border-yumpa-dark\/5 {
    border-color: color-mix(in srgb, #1A1A2E 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-dark) 5%, transparent);
    }
  }
  .border-yumpa-dark\/8 {
    border-color: color-mix(in srgb, #1A1A2E 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-dark) 8%, transparent);
    }
  }
  .border-yumpa-dark\/10 {
    border-color: color-mix(in srgb, #1A1A2E 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-dark) 10%, transparent);
    }
  }
  .border-yumpa-dark\/15 {
    border-color: color-mix(in srgb, #1A1A2E 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-dark) 15%, transparent);
    }
  }
  .border-yumpa-dark\/20 {
    border-color: color-mix(in srgb, #1A1A2E 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-dark) 20%, transparent);
    }
  }
  .border-yumpa-mint {
    border-color: var(--color-yumpa-mint);
  }
  .border-yumpa-mint\/35 {
    border-color: color-mix(in srgb, #4ECDC4 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-mint) 35%, transparent);
    }
  }
  .border-yumpa-mint\/40 {
    border-color: color-mix(in srgb, #4ECDC4 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-mint) 40%, transparent);
    }
  }
  .border-yumpa-mint\/45 {
    border-color: color-mix(in srgb, #4ECDC4 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-mint) 45%, transparent);
    }
  }
  .border-yumpa-mint\/50 {
    border-color: color-mix(in srgb, #4ECDC4 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-mint) 50%, transparent);
    }
  }
  .border-yumpa-mint\/60 {
    border-color: color-mix(in srgb, #4ECDC4 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-mint) 60%, transparent);
    }
  }
  .border-yumpa-pink {
    border-color: var(--color-yumpa-pink);
  }
  .border-yumpa-pink\/20 {
    border-color: color-mix(in srgb, #FF5E9F 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-pink) 20%, transparent);
    }
  }
  .border-yumpa-pink\/30 {
    border-color: color-mix(in srgb, #FF5E9F 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-pink) 30%, transparent);
    }
  }
  .border-yumpa-pink\/35 {
    border-color: color-mix(in srgb, #FF5E9F 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-pink) 35%, transparent);
    }
  }
  .border-yumpa-pink\/40 {
    border-color: color-mix(in srgb, #FF5E9F 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-pink) 40%, transparent);
    }
  }
  .border-yumpa-pink\/45 {
    border-color: color-mix(in srgb, #FF5E9F 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-pink) 45%, transparent);
    }
  }
  .border-yumpa-pink\/50 {
    border-color: color-mix(in srgb, #FF5E9F 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-pink) 50%, transparent);
    }
  }
  .border-yumpa-pink\/55 {
    border-color: color-mix(in srgb, #FF5E9F 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-pink) 55%, transparent);
    }
  }
  .border-yumpa-purple {
    border-color: var(--color-yumpa-purple);
  }
  .border-yumpa-purple\/55 {
    border-color: color-mix(in srgb, #7B61FF 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-purple) 55%, transparent);
    }
  }
  .border-yumpa-yellow\/45 {
    border-color: color-mix(in srgb, #FFD23F 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yumpa-yellow) 45%, transparent);
    }
  }
  .bg-amber-700\/15 {
    background-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-700) 15%, transparent);
    }
  }
  .bg-black\/40 {
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .bg-cyan-400\/20 {
    background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyan-400) 20%, transparent);
    }
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }
  .bg-green-50 {
    background-color: var(--color-green-50);
  }
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .bg-orange-50 {
    background-color: var(--color-orange-50);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
  .bg-slate-400\/15 {
    background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-400) 15%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .bg-white\/15 {
    background-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .bg-white\/20 {
    background-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .bg-white\/30 {
    background-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .bg-white\/40 {
    background-color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .bg-white\/60 {
    background-color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .bg-white\/80 {
    background-color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .bg-white\/90 {
    background-color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .bg-white\/95 {
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }
  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }
  .bg-yellow-400\/20 {
    background-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yellow-400) 20%, transparent);
    }
  }
  .bg-yumpa-coral {
    background-color: var(--color-yumpa-coral);
  }
  .bg-yumpa-coral\/10 {
    background-color: color-mix(in srgb, #FF8C61 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-coral) 10%, transparent);
    }
  }
  .bg-yumpa-coral\/20 {
    background-color: color-mix(in srgb, #FF8C61 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-coral) 20%, transparent);
    }
  }
  .bg-yumpa-coral\/70 {
    background-color: color-mix(in srgb, #FF8C61 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-coral) 70%, transparent);
    }
  }
  .bg-yumpa-cream {
    background-color: var(--color-yumpa-cream);
  }
  .bg-yumpa-cream\/40 {
    background-color: color-mix(in srgb, #FFF8F0 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-cream) 40%, transparent);
    }
  }
  .bg-yumpa-cream\/60 {
    background-color: color-mix(in srgb, #FFF8F0 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-cream) 60%, transparent);
    }
  }
  .bg-yumpa-cream\/95 {
    background-color: color-mix(in srgb, #FFF8F0 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-cream) 95%, transparent);
    }
  }
  .bg-yumpa-dark {
    background-color: var(--color-yumpa-dark);
  }
  .bg-yumpa-dark\/3 {
    background-color: color-mix(in srgb, #1A1A2E 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-dark) 3%, transparent);
    }
  }
  .bg-yumpa-dark\/5 {
    background-color: color-mix(in srgb, #1A1A2E 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-dark) 5%, transparent);
    }
  }
  .bg-yumpa-dark\/10 {
    background-color: color-mix(in srgb, #1A1A2E 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-dark) 10%, transparent);
    }
  }
  .bg-yumpa-dark\/15 {
    background-color: color-mix(in srgb, #1A1A2E 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-dark) 15%, transparent);
    }
  }
  .bg-yumpa-dark\/20 {
    background-color: color-mix(in srgb, #1A1A2E 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-dark) 20%, transparent);
    }
  }
  .bg-yumpa-dark\/40 {
    background-color: color-mix(in srgb, #1A1A2E 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-dark) 40%, transparent);
    }
  }
  .bg-yumpa-dark\/60 {
    background-color: color-mix(in srgb, #1A1A2E 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-dark) 60%, transparent);
    }
  }
  .bg-yumpa-dark\/90 {
    background-color: color-mix(in srgb, #1A1A2E 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-dark) 90%, transparent);
    }
  }
  .bg-yumpa-mint {
    background-color: var(--color-yumpa-mint);
  }
  .bg-yumpa-mint\/10 {
    background-color: color-mix(in srgb, #4ECDC4 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-mint) 10%, transparent);
    }
  }
  .bg-yumpa-mint\/15 {
    background-color: color-mix(in srgb, #4ECDC4 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-mint) 15%, transparent);
    }
  }
  .bg-yumpa-mint\/20 {
    background-color: color-mix(in srgb, #4ECDC4 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-mint) 20%, transparent);
    }
  }
  .bg-yumpa-mint\/30 {
    background-color: color-mix(in srgb, #4ECDC4 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-mint) 30%, transparent);
    }
  }
  .bg-yumpa-mint\/50 {
    background-color: color-mix(in srgb, #4ECDC4 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-mint) 50%, transparent);
    }
  }
  .bg-yumpa-mint\/60 {
    background-color: color-mix(in srgb, #4ECDC4 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-mint) 60%, transparent);
    }
  }
  .bg-yumpa-mint\/70 {
    background-color: color-mix(in srgb, #4ECDC4 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-mint) 70%, transparent);
    }
  }
  .bg-yumpa-pink {
    background-color: var(--color-yumpa-pink);
  }
  .bg-yumpa-pink\/10 {
    background-color: color-mix(in srgb, #FF5E9F 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-pink) 10%, transparent);
    }
  }
  .bg-yumpa-pink\/15 {
    background-color: color-mix(in srgb, #FF5E9F 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-pink) 15%, transparent);
    }
  }
  .bg-yumpa-pink\/20 {
    background-color: color-mix(in srgb, #FF5E9F 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-pink) 20%, transparent);
    }
  }
  .bg-yumpa-pink\/30 {
    background-color: color-mix(in srgb, #FF5E9F 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-pink) 30%, transparent);
    }
  }
  .bg-yumpa-pink\/35 {
    background-color: color-mix(in srgb, #FF5E9F 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-pink) 35%, transparent);
    }
  }
  .bg-yumpa-purple {
    background-color: var(--color-yumpa-purple);
  }
  .bg-yumpa-purple\/10 {
    background-color: color-mix(in srgb, #7B61FF 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-purple) 10%, transparent);
    }
  }
  .bg-yumpa-purple\/15 {
    background-color: color-mix(in srgb, #7B61FF 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-purple) 15%, transparent);
    }
  }
  .bg-yumpa-purple\/20 {
    background-color: color-mix(in srgb, #7B61FF 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-purple) 20%, transparent);
    }
  }
  .bg-yumpa-yellow {
    background-color: var(--color-yumpa-yellow);
  }
  .bg-yumpa-yellow\/20 {
    background-color: color-mix(in srgb, #FFD23F 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-yellow) 20%, transparent);
    }
  }
  .bg-yumpa-yellow\/25 {
    background-color: color-mix(in srgb, #FFD23F 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-yellow) 25%, transparent);
    }
  }
  .bg-yumpa-yellow\/30 {
    background-color: color-mix(in srgb, #FFD23F 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yumpa-yellow) 30%, transparent);
    }
  }
  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-white\/95 {
    --tw-gradient-from: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-coral\/20 {
    --tw-gradient-from: color-mix(in srgb, #FF8C61 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-coral) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-coral\/60 {
    --tw-gradient-from: color-mix(in srgb, #FF8C61 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-coral) 60%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-coral\/80 {
    --tw-gradient-from: color-mix(in srgb, #FF8C61 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-coral) 80%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-cream {
    --tw-gradient-from: var(--color-yumpa-cream);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-cream\/80 {
    --tw-gradient-from: color-mix(in srgb, #FFF8F0 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-cream) 80%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-dark\/30 {
    --tw-gradient-from: color-mix(in srgb, #1A1A2E 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-dark) 30%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-dark\/40 {
    --tw-gradient-from: color-mix(in srgb, #1A1A2E 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-dark) 40%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-mint {
    --tw-gradient-from: var(--color-yumpa-mint);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-mint\/20 {
    --tw-gradient-from: color-mix(in srgb, #4ECDC4 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-mint) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-mint\/50 {
    --tw-gradient-from: color-mix(in srgb, #4ECDC4 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-mint) 50%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-pink {
    --tw-gradient-from: var(--color-yumpa-pink);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-pink\/8 {
    --tw-gradient-from: color-mix(in srgb, #FF5E9F 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-pink) 8%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-pink\/15 {
    --tw-gradient-from: color-mix(in srgb, #FF5E9F 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-pink) 15%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-pink\/20 {
    --tw-gradient-from: color-mix(in srgb, #FF5E9F 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-pink) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-pink\/25 {
    --tw-gradient-from: color-mix(in srgb, #FF5E9F 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-pink) 25%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-pink\/30 {
    --tw-gradient-from: color-mix(in srgb, #FF5E9F 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-pink) 30%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-pink\/90 {
    --tw-gradient-from: color-mix(in srgb, #FF5E9F 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-pink) 90%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-purple {
    --tw-gradient-from: var(--color-yumpa-purple);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-purple\/35 {
    --tw-gradient-from: color-mix(in srgb, #7B61FF 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-purple) 35%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-purple\/80 {
    --tw-gradient-from: color-mix(in srgb, #7B61FF 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-purple) 80%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-yellow\/10 {
    --tw-gradient-from: color-mix(in srgb, #FFD23F 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-yellow) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-yumpa-yellow\/25 {
    --tw-gradient-from: color-mix(in srgb, #FFD23F 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yumpa-yellow) 25%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-white {
    --tw-gradient-via: var(--color-white);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-yumpa-coral {
    --tw-gradient-via: var(--color-yumpa-coral);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-yumpa-pink\/10 {
    --tw-gradient-via: color-mix(in srgb, #FF5E9F 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-yumpa-pink) 10%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-yumpa-purple\/25 {
    --tw-gradient-via: color-mix(in srgb, #7B61FF 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-yumpa-purple) 25%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-yumpa-yellow\/15 {
    --tw-gradient-via: color-mix(in srgb, #FFD23F 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-yumpa-yellow) 15%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-white\/80 {
    --tw-gradient-to: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-coral {
    --tw-gradient-to: var(--color-yumpa-coral);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-coral\/40 {
    --tw-gradient-to: color-mix(in srgb, #FF8C61 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-coral) 40%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-coral\/90 {
    --tw-gradient-to: color-mix(in srgb, #FF8C61 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-coral) 90%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-cream\/80 {
    --tw-gradient-to: color-mix(in srgb, #FFF8F0 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-cream) 80%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-dark\/20 {
    --tw-gradient-to: color-mix(in srgb, #1A1A2E 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-dark) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-dark\/30 {
    --tw-gradient-to: color-mix(in srgb, #1A1A2E 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-dark) 30%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-mint\/15 {
    --tw-gradient-to: color-mix(in srgb, #4ECDC4 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-mint) 15%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-mint\/35 {
    --tw-gradient-to: color-mix(in srgb, #4ECDC4 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-mint) 35%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-pink {
    --tw-gradient-to: var(--color-yumpa-pink);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-pink\/10 {
    --tw-gradient-to: color-mix(in srgb, #FF5E9F 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-pink) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-pink\/15 {
    --tw-gradient-to: color-mix(in srgb, #FF5E9F 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-pink) 15%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-pink\/80 {
    --tw-gradient-to: color-mix(in srgb, #FF5E9F 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-pink) 80%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-purple {
    --tw-gradient-to: var(--color-yumpa-purple);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-purple\/10 {
    --tw-gradient-to: color-mix(in srgb, #7B61FF 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-purple) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-purple\/50 {
    --tw-gradient-to: color-mix(in srgb, #7B61FF 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-purple) 50%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-yellow {
    --tw-gradient-to: var(--color-yumpa-yellow);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-yellow\/8 {
    --tw-gradient-to: color-mix(in srgb, #FFD23F 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-yellow) 8%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-yellow\/15 {
    --tw-gradient-to: color-mix(in srgb, #FFD23F 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-yellow) 15%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-yellow\/20 {
    --tw-gradient-to: color-mix(in srgb, #FFD23F 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-yellow) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-yellow\/30 {
    --tw-gradient-to: color-mix(in srgb, #FFD23F 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-yellow) 30%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-yumpa-yellow\/35 {
    --tw-gradient-to: color-mix(in srgb, #FFD23F 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-yumpa-yellow) 35%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .object-cover {
    object-fit: cover;
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-\[2px\] {
    padding: 2px;
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }
  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-28 {
    padding-bottom: calc(var(--spacing) * 28);
  }
  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-body {
    font-family: var(--font-body);
  }
  .font-display {
    font-family: var(--font-display);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }
  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--line-height));
  }
  .text-9xl {
    font-size: var(--text-9xl);
    line-height: var(--tw-leading, var(--text-9xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-cyan-700 {
    color: var(--color-cyan-700);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-green-700 {
    color: var(--color-green-700);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/60 {
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .text-white\/65 {
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
  }
  .text-white\/80 {
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .text-white\/85 {
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }
  .text-white\/90 {
    color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .text-yellow-700 {
    color: var(--color-yellow-700);
  }
  .text-yumpa-coral {
    color: var(--color-yumpa-coral);
  }
  .text-yumpa-dark {
    color: var(--color-yumpa-dark);
  }
  .text-yumpa-dark\/20 {
    color: color-mix(in srgb, #1A1A2E 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-yumpa-dark) 20%, transparent);
    }
  }
  .text-yumpa-dark\/30 {
    color: color-mix(in srgb, #1A1A2E 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-yumpa-dark) 30%, transparent);
    }
  }
  .text-yumpa-dark\/35 {
    color: color-mix(in srgb, #1A1A2E 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-yumpa-dark) 35%, transparent);
    }
  }
  .text-yumpa-dark\/40 {
    color: color-mix(in srgb, #1A1A2E 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-yumpa-dark) 40%, transparent);
    }
  }
  .text-yumpa-dark\/50 {
    color: color-mix(in srgb, #1A1A2E 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-yumpa-dark) 50%, transparent);
    }
  }
  .text-yumpa-dark\/55 {
    color: color-mix(in srgb, #1A1A2E 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-yumpa-dark) 55%, transparent);
    }
  }
  .text-yumpa-dark\/60 {
    color: color-mix(in srgb, #1A1A2E 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-yumpa-dark) 60%, transparent);
    }
  }
  .text-yumpa-dark\/65 {
    color: color-mix(in srgb, #1A1A2E 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-yumpa-dark) 65%, transparent);
    }
  }
  .text-yumpa-dark\/70 {
    color: color-mix(in srgb, #1A1A2E 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-yumpa-dark) 70%, transparent);
    }
  }
  .text-yumpa-dark\/80 {
    color: color-mix(in srgb, #1A1A2E 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-yumpa-dark) 80%, transparent);
    }
  }
  .text-yumpa-dark\/85 {
    color: color-mix(in srgb, #1A1A2E 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-yumpa-dark) 85%, transparent);
    }
  }
  .text-yumpa-mint {
    color: var(--color-yumpa-mint);
  }
  .text-yumpa-pink {
    color: var(--color-yumpa-pink);
  }
  .text-yumpa-purple {
    color: var(--color-yumpa-purple);
  }
  .text-yumpa-yellow {
    color: var(--color-yumpa-yellow);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .underline {
    text-decoration-line: underline;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .opacity-20 {
    opacity: 20%;
  }
  .opacity-25 {
    opacity: 25%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-85 {
    opacity: 85%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-yumpa-dark\/15 {
    --tw-shadow-color: color-mix(in srgb, #1A1A2E 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yumpa-dark) 15%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-yumpa-mint\/10 {
    --tw-shadow-color: color-mix(in srgb, #4ECDC4 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yumpa-mint) 10%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-yumpa-mint\/30 {
    --tw-shadow-color: color-mix(in srgb, #4ECDC4 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yumpa-mint) 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-yumpa-pink\/10 {
    --tw-shadow-color: color-mix(in srgb, #FF5E9F 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yumpa-pink) 10%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-yumpa-pink\/20 {
    --tw-shadow-color: color-mix(in srgb, #FF5E9F 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yumpa-pink) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-yumpa-pink\/30 {
    --tw-shadow-color: color-mix(in srgb, #FF5E9F 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yumpa-pink) 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .ring-yumpa-dark\/10 {
    --tw-ring-color: color-mix(in srgb, #1A1A2E 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-yumpa-dark) 10%, transparent);
    }
  }
  .ring-yumpa-mint {
    --tw-ring-color: var(--color-yumpa-mint);
  }
  .ring-yumpa-mint\/50 {
    --tw-ring-color: color-mix(in srgb, #4ECDC4 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-yumpa-mint) 50%, transparent);
    }
  }
  .ring-yumpa-mint\/60 {
    --tw-ring-color: color-mix(in srgb, #4ECDC4 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-yumpa-mint) 60%, transparent);
    }
  }
  .ring-yumpa-pink {
    --tw-ring-color: var(--color-yumpa-pink);
  }
  .ring-yumpa-pink\/30 {
    --tw-ring-color: color-mix(in srgb, #FF5E9F 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-yumpa-pink) 30%, transparent);
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-2xl {
    --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-lg {
    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .\!filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .duration-1000 {
    --tw-duration: 1000ms;
    transition-duration: 1000ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .group-hover\:scale-110 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .focus-within\:border-yumpa-pink {
    &:focus-within {
      border-color: var(--color-yumpa-pink);
    }
  }
  .hover\:-translate-y-0\.5 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:-translate-y-1 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:scale-105 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-110 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-\[1\.02\] {
    &:hover {
      @media (hover: hover) {
        scale: 1.02;
      }
    }
  }
  .hover\:border-yumpa-mint\/70 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #4ECDC4 70%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-yumpa-mint) 70%, transparent);
        }
      }
    }
  }
  .hover\:border-yumpa-purple\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #7B61FF 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-yumpa-purple) 50%, transparent);
        }
      }
    }
  }
  .hover\:bg-yumpa-coral\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #FF8C61 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-yumpa-coral) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-yumpa-cream {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yumpa-cream);
      }
    }
  }
  .hover\:bg-yumpa-dark\/3 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #1A1A2E 3%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-yumpa-dark) 3%, transparent);
        }
      }
    }
  }
  .hover\:bg-yumpa-dark\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #1A1A2E 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-yumpa-dark) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-yumpa-pink\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #FF5E9F 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-yumpa-pink) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-yumpa-pink\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #FF5E9F 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-yumpa-pink) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-yumpa-purple\/90 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #7B61FF 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-yumpa-purple) 90%, transparent);
        }
      }
    }
  }
  .hover\:text-yumpa-dark {
    &:hover {
      @media (hover: hover) {
        color: var(--color-yumpa-dark);
      }
    }
  }
  .hover\:text-yumpa-dark\/60 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #1A1A2E 60%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-yumpa-dark) 60%, transparent);
        }
      }
    }
  }
  .hover\:text-yumpa-dark\/70 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #1A1A2E 70%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-yumpa-dark) 70%, transparent);
        }
      }
    }
  }
  .hover\:text-yumpa-pink {
    &:hover {
      @media (hover: hover) {
        color: var(--color-yumpa-pink);
      }
    }
  }
  .hover\:shadow-lg {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-md {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-yumpa-mint\/50 {
    &:hover {
      @media (hover: hover) {
        --tw-shadow-color: color-mix(in srgb, #4ECDC4 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yumpa-mint) 50%, transparent) var(--tw-shadow-alpha), transparent);
        }
      }
    }
  }
  .hover\:shadow-yumpa-pink\/50 {
    &:hover {
      @media (hover: hover) {
        --tw-shadow-color: color-mix(in srgb, #FF5E9F 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yumpa-pink) 50%, transparent) var(--tw-shadow-alpha), transparent);
        }
      }
    }
  }
  .focus\:border-yumpa-pink {
    &:focus {
      border-color: var(--color-yumpa-pink);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-yumpa-pink\/25 {
    &:focus {
      --tw-ring-color: color-mix(in srgb, #FF5E9F 25%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-yumpa-pink) 25%, transparent);
      }
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .active\:scale-85 {
    &:active {
      --tw-scale-x: 85%;
      --tw-scale-y: 85%;
      --tw-scale-z: 85%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .active\:scale-90 {
    &:active {
      --tw-scale-x: 90%;
      --tw-scale-y: 90%;
      --tw-scale-z: 90%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .active\:scale-95 {
    &:active {
      --tw-scale-x: 95%;
      --tw-scale-y: 95%;
      --tw-scale-z: 95%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:opacity-40 {
    &:disabled {
      opacity: 40%;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:inline-flex {
    @media (width >= 40rem) {
      display: inline-flex;
    }
  }
  .sm\:h-14 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 14);
    }
  }
  .sm\:h-16 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 16);
    }
  }
  .sm\:min-h-\[52px\] {
    @media (width >= 40rem) {
      min-height: 52px;
    }
  }
  .sm\:min-h-\[60px\] {
    @media (width >= 40rem) {
      min-height: 60px;
    }
  }
  .sm\:w-6 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 6);
    }
  }
  .sm\:w-12 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 12);
    }
  }
  .sm\:w-16 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 16);
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-6 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:gap-1\.5 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 1.5);
    }
  }
  .sm\:gap-4 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:px-2 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .sm\:px-4 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:py-4 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .sm\:py-5 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 5);
    }
  }
  .sm\:pb-6 {
    @media (width >= 40rem) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .sm\:text-2xl {
    @media (width >= 40rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .sm\:text-5xl {
    @media (width >= 40rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .sm\:text-7xl {
    @media (width >= 40rem) {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }
  .sm\:text-lg {
    @media (width >= 40rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .sm\:text-xl {
    @media (width >= 40rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .lg\:grid-cols-5 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-letter {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
  60% {
    transform: translateY(-6px);
  }
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px) rotate(-2deg);
  }
  40% {
    transform: translateX(4px) rotate(2deg);
  }
  60% {
    transform: translateX(-3px) rotate(-1deg);
  }
  80% {
    transform: translateX(3px) rotate(1deg);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes float-bg {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(3deg);
  }
  66% {
    transform: translateY(6px) rotate(-2deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}
.animate-bounce-in {
  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
}
.animate-bounce-letter {
  animation: bounce-letter 0.6s ease both;
}
.animate-shake {
  animation: shake 0.5s ease-in-out;
}
.animate-fade-in {
  animation: fade-in 0.5s ease both;
}
.animate-slide-up {
  animation: slide-up 0.6s ease both;
}
.animate-float-bg {
  animation: float-bg 6s ease-in-out infinite;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/transitions-v2.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ============ ROUTE TRANSITION OVERLAY ============ */
: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);
}

/* Page enter/exit wrapper */
.route-wrap {
  position: relative;
  min-height: 100vh;
}

.route-page {
  animation: pageEnter 0.55s var(--bouncy) both;
  transform-origin: 50% 40%;
}
@keyframes pageEnter {
  0%   { opacity: 0; transform: translateY(24px) scale(0.985); filter: blur(3px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.route-page.leaving {
  animation: pageLeave 0.4s ease-in both;
}
@keyframes pageLeave {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-24px) scale(0.97); filter: blur(4px); }
}

/* ============ TRANSITION OVERLAY — "YUMPI JUMPS" ============ */
.route-overlay {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

/* Two halves that slide in + out, revealing and concealing */
.overlay-half {
  position: absolute; left: 0; right: 0;
  height: 52vh;
  background: linear-gradient(135deg, var(--pink), var(--coral) 55%, var(--yellow) 120%);
  box-shadow: 0 0 60px rgba(0,0,0,0.15);
}
.overlay-half.top {
  top: 0;
  transform: translateY(-105%);
  border-radius: 0 0 40% 40% / 0 0 30% 30%;
}
.overlay-half.bottom {
  bottom: 0;
  transform: translateY(105%);
  border-radius: 40% 40% 0 0 / 30% 30% 0 0;
}

/* Sweep in */
.route-overlay.phase-in .overlay-half.top {
  animation: sweepInTop 0.55s var(--bouncy) forwards;
}
.route-overlay.phase-in .overlay-half.bottom {
  animation: sweepInBottom 0.55s var(--bouncy) forwards;
}
@keyframes sweepInTop {
  from { transform: translateY(-105%); }
  to   { transform: translateY(-2%); }
}
@keyframes sweepInBottom {
  from { transform: translateY(105%); }
  to   { transform: translateY(2%); }
}

/* Hold briefly then sweep out */
.route-overlay.phase-out .overlay-half.top {
  animation: sweepOutTop 0.6s var(--bouncy) forwards;
}
.route-overlay.phase-out .overlay-half.bottom {
  animation: sweepOutBottom 0.6s var(--bouncy) forwards;
}
@keyframes sweepOutTop {
  from { transform: translateY(-2%); }
  to   { transform: translateY(-105%); }
}
@keyframes sweepOutBottom {
  from { transform: translateY(2%); }
  to   { transform: translateY(105%); }
}

/* The jumping Yumpi mascot in the middle */
.overlay-mascot {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0;
}
.route-overlay.phase-in .overlay-mascot {
  animation: mascotIn 0.55s var(--bouncy) forwards;
}
.route-overlay.phase-out .overlay-mascot {
  animation: mascotOut 0.5s var(--bouncy) forwards;
}
@keyframes mascotIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(-90deg); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(8deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes mascotOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -150%) scale(1.2) rotate(20deg); }
}

.overlay-blob {
  width: 120px; height: 120px;
  animation: overlayBlobJelly 0.9s var(--bouncy) infinite;
  transform-origin: center bottom;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
}
@keyframes overlayBlobJelly {
  0%,100% { transform: translateY(0) scaleY(1) scaleX(1); }
  40%     { transform: translateY(-14px) scaleY(1.08) scaleX(0.94); }
  70%     { transform: translateY(0) scaleY(0.92) scaleX(1.08); }
}

.overlay-label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: white;
  letter-spacing: 2px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.25);
  display: inline-flex; gap: 3px;
}
.overlay-label span {
  display: inline-block;
  animation: labelDot 1.1s var(--bouncy) infinite backwards;
}

@keyframes labelDot {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-12px); }
}

/* Sparkles inside the overlay */
.overlay-spark {
  position: absolute;
  font-size: 22px;
  color: white;
  opacity: 0;
  animation: overlaySparkle 1.2s ease-out infinite;
}
.route-overlay.phase-in .overlay-spark,
.route-overlay.phase-out .overlay-spark {
  animation: overlaySparkle 1.2s ease-out infinite;
}
@keyframes overlaySparkle {
  0%   { opacity: 0; transform: scale(0.4) rotate(0); }
  50%  { opacity: 1; transform: scale(1.3) rotate(120deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(240deg); }
}
.overlay-spark.s1 { top: 22%; left: 18%; animation-delay: 0s; }
.overlay-spark.s2 { top: 28%; right: 20%; animation-delay: 0.2s; }
.overlay-spark.s3 { bottom: 24%; left: 22%; animation-delay: 0.4s; }
.overlay-spark.s4 { bottom: 30%; right: 18%; animation-delay: 0.6s; }
.overlay-spark.s5 { top: 40%; left: 10%; animation-delay: 0.3s; }
.overlay-spark.s6 { top: 45%; right: 12%; animation-delay: 0.5s; }

/* Confetti bits during overlay */
.overlay-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
}
.oc-piece {
  position: absolute;
  top: 45%;
  width: 10px; height: 14px;
  border-radius: 3px;
  opacity: 0;
}
.route-overlay.phase-in .oc-piece {
  animation: ocBurst 0.9s ease-out forwards;
}
@keyframes ocBurst {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--or)); }
}

/* ============ NAV LINK ACTIVE TRANSITION FEEDBACK ============ */
.route-link-pulse {
  animation: linkPulse 0.5s var(--bouncy);
}
@keyframes linkPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* ============ SHARED BLOB SVG SCALE (used in multiple pages) ============ */
.shared-blob-svg { display: inline-block; }

/* Prevent scroll while overlay is mid-flight */
body.route-locked { overflow: hidden; }

/* ============ TWEAKS HINT BANNER ============ */
.tweaks-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A1A2E;
  color: #FFF8F0;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  animation: tweakPulse 2s ease-in-out infinite;
}
.tweaks-hint strong { color: #FFD23F; }
.tweaks-hint-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ECDC4;
  box-shadow: 0 0 0 0 rgba(78,205,196, 0.6);
  animation: tweakDot 1.4s ease-out infinite;
}
@keyframes tweakDot {
  0%   { box-shadow: 0 0 0 0 rgba(78,205,196, 0.6); }
  100% { box-shadow: 0 0 0 10px rgba(78,205,196, 0); }
}
@keyframes tweakPulse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

/* Crown in Tweaks mode — show grab handle affordance */
.blob-crown[style*="cursor: grab"] {
  animation: none !important;
  transform: translateX(-50%);
  outline: 2px dashed rgba(255, 210, 63, 0.6);
  outline-offset: 4px;
  border-radius: 8px;
  z-index: 100 !important;
}

/* ============ SHARED BLOB JELLY (Home + Multiplayer fallback; Landing has its own) ============ */
.blob:not(.no-bounce) {
  animation: blobJellyShared 2.4s var(--bouncy) infinite;
  transform-origin: center bottom;
}
@keyframes blobJellyShared {
  0%,100% { transform: translateY(0) scaleY(1) scaleX(1); }
  45%     { transform: translateY(-6px) scaleY(1.04) scaleX(0.97); }
  60%     { transform: translateY(-6px) scaleY(1.04) scaleX(0.97); }
  80%     { transform: translateY(0) scaleY(0.97) scaleX(1.03); }
}

/* ============ FLOATING CROWN (detached, bobs in mid-air above head) ============ */
.blob-crown {
  animation: crownFloat 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.22));
}
@keyframes crownFloat {
  0%   { transform: translateX(-50%) translateY(0)    rotate(-8deg); }
  25%  { transform: translateX(-50%) translateY(-5px) rotate(-3deg); }
  50%  { transform: translateX(-50%) translateY(-9px) rotate(6deg); }
  75%  { transform: translateX(-50%) translateY(-4px) rotate(3deg); }
  100% { transform: translateX(-50%) translateY(0)    rotate(-8deg); }
}

/* ============ CLICK-REACTION FX ============ */
.blob-clickable { user-select: none; -webkit-tap-highlight-color: transparent; }
.blob-clickable:active { filter: brightness(1.05); }

.blob-fx-shake svg  { animation: blobShake 0.5s ease-in-out 1; }
.blob-fx-jump svg   { animation: blobJump  0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
.blob-fx-spin svg   { animation: blobSpin  0.7s ease-in-out 1; }
.blob-fx-wobble svg { animation: blobWobble 0.6s ease-in-out 1; }

@keyframes blobShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%      { transform: translateX(-4px) rotate(-3deg); }
  40%      { transform: translateX(4px)  rotate(3deg); }
  60%      { transform: translateX(-3px) rotate(-2deg); }
  80%      { transform: translateX(3px)  rotate(2deg); }
}
@keyframes blobJump {
  0%   { transform: translateY(0) scale(1,1); }
  30%  { transform: translateY(-14px) scale(0.95, 1.08); }
  60%  { transform: translateY(0) scale(1.08, 0.92); }
  100% { transform: translateY(0) scale(1,1); }
}
@keyframes blobSpin {
  0%   { transform: rotate(0) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes blobWobble {
  0%, 100% { transform: rotate(0) scale(1,1); }
  25%      { transform: rotate(-6deg) scale(1.05, 0.95); }
  50%      { transform: rotate(0) scale(0.96, 1.04); }
  75%      { transform: rotate(6deg) scale(1.05, 0.95); }
}

/* particle burst on click — clean geometric shapes */
.blob-burst {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 5;
}
.blob-burst-piece {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  animation: burstFly 0.95s cubic-bezier(0.18, 0.9, 0.34, 1) forwards;
  opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.blob-burst-piece svg { display: block; }
@keyframes burstFly {
  0%   {
    transform: translate(-50%, -50%) scale(0.2) rotate(0);
    opacity: 0;
  }
  15%  {
    transform: translate(calc(-50% + var(--dx) * 0.35), calc(-50% + var(--dy) * 0.35)) scale(1.1) rotate(calc(var(--rot) * 0.3));
    opacity: 1;
  }
  70%  {
    transform: translate(calc(-50% + var(--dx) * 0.9), calc(-50% + var(--dy) * 0.9)) scale(1) rotate(calc(var(--rot) * 0.85));
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.6) rotate(var(--rot));
    opacity: 0;
  }
}

/* side accessory — small sway */
.blob-acc-side {
  transform-origin: 50% 100%;
  animation: accSwayShared 2.4s ease-in-out infinite;
}
@keyframes accSwayShared {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(10deg); }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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);
}

/* Selected game tile — highlighted while waiting for the confirm
   click. Inline border colour comes from the game's accent so each
   game gets a subtle on-brand glow. */
.rm-game-tile-selected {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 100%);
}
.rm-game-tile-selected::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--tile-accent, var(--pink));
  color: white;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Confirm bar — sticky-ish footer in the picker that reads back the
   chosen game and exposes the explicit "Create room" CTA. Disabled
   button until a tile is picked, so an accidental click never spawns
   a room. */
.rm-confirm-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 100%);
  border: 2px solid rgba(255, 94, 159, 0.18);
  box-shadow: 0 8px 22px rgba(255, 94, 159, 0.1);
  flex-wrap: wrap;
}
.rm-confirm-summary {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rm-confirm-emoji {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}
.rm-confirm-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rm-confirm-text b {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  color: var(--dark);
}
.rm-confirm-text span {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--muted);
}
.rm-confirm-hint {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.rm-confirm-btn {
  flex: 0 0 auto;
  padding: 12px 22px;
  font-size: 14px;
}
.rm-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* 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; }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/games/wordle/wordle.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Wordle MP styles — peer board cards + event log + stage layout.
 * Heat visibility is carried entirely by the 4 peer cards on the
 * left/right columns (the top rail was removed — redundant with the
 * card-level glow/crown/sparkle treatments). Loaded by WordleGame via
 * side-effect import. All classes prefixed `.wd-`.
 */

:root {
  --wd-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============ EVENT LOG (stacked toast cards below rail) ============ */
.wd-event-log {
  width: 100%;
  max-width: 560px;
  display: flex; flex-direction: column;
  gap: 6px;
  font-family: 'Fredoka', sans-serif;
}
.wd-event-item {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  text-align: center;
  background: white;
  color: #1A1A2E;
  animation: wdEventIn 0.35s var(--wd-bouncy);
  box-shadow: 0 2px 8px rgba(26,26,46,0.08);
}
@keyframes wdEventIn {
  0% { transform: translateY(-8px) scale(0.9); opacity: 0; }
  60% { transform: translateY(2px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
.wd-event-item.tone-hot  { background: linear-gradient(135deg, #FFE1E4, #FFD4DE); color: #8B1E3F; }
.wd-event-item.tone-warn { background: linear-gradient(135deg, #FFF4D0, #FFE8C4); color: #8A5A00; }
.wd-event-item.tone-done { background: linear-gradient(135deg, #D6F5DF, #C9F5D6); color: #1A7F4C; }

/* ======================================================================
   STAGE LAYOUT — 5-PLAYER (me center + 2 left + 2 right)
   ====================================================================== */
.wd-stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 12px 32px;
  font-family: 'Nunito', sans-serif;
}
.wd-stage.solo { max-width: 560px; margin: 0 auto; }

.wd-playarea {
  display: grid;
  grid-template-columns: 1fr minmax(0, 380px) 1fr;
  gap: 18px;
  align-items: start;
  justify-items: center;
  width: 100%;
  max-width: 1200px;
}
.wd-stage.solo .wd-playarea {
  grid-template-columns: minmax(0, 380px);
}

.wd-peers-col {
  display: flex; flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 190px;
}
.wd-peers-col.side-left { align-self: flex-start; justify-self: end; }
.wd-peers-col.side-right { align-self: flex-start; justify-self: start; }

.wd-main {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Mobile / narrow tablet — peers collapse to horizontal row below main */
@media (max-width: 900px) {
  .wd-playarea {
    grid-template-columns: minmax(0, 380px);
  }
  .wd-peers-col {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }
  .wd-peers-col > * { flex: 1 1 160px; max-width: 200px; }
}

/* ======================================================================
   PEER BOARD CARD (mini 6×5 silhouette, NO letter/pattern leak)
   ====================================================================== */
.wd-peer-card {
  position: relative;
  padding: 10px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--peer-accent, #FF5E9F) 12%, white),
    color-mix(in srgb, var(--peer-accent, #FF5E9F) 3%, white) 75%
  );
  border: 2px solid color-mix(in srgb, var(--peer-accent, #FF5E9F) 22%, transparent);
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--peer-accent, #FF5E9F) 18%, transparent),
    0 2px 4px rgba(26,26,46,0.05);
  transition: transform 0.3s var(--wd-bouncy), box-shadow 0.3s ease;
  font-family: 'Fredoka', sans-serif;
}
.wd-peer-card.side-left  { transform: rotate(-1.5deg); }
.wd-peer-card.side-right { transform: rotate(1.5deg);  }
.wd-peer-card:hover { transform: rotate(0) translateY(-2px) scale(1.02); }

/* Heat-driven glow escalation */
.wd-peer-card.heat-3 {
  box-shadow: 0 6px 18px rgba(255,94,159,0.45), 0 2px 4px rgba(255,94,159,0.25);
  animation: wdPeerHeat3 1.4s var(--wd-bouncy) infinite;
}
.wd-peer-card.heat-4 {
  box-shadow: 0 6px 22px rgba(230,32,56,0.55), 0 2px 6px rgba(230,32,56,0.3);
  animation: wdPeerHeat4 0.8s var(--wd-bouncy) infinite;
  border-color: rgba(230,32,56,0.55);
}
@keyframes wdPeerHeat3 {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
@keyframes wdPeerHeat4 {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15) saturate(1.2); }
}
.wd-peer-card.is-solved {
  background: linear-gradient(135deg, #D6F5DF, #E8FFEF);
  border-color: #2EC76B;
  box-shadow: 0 6px 18px rgba(46,199,107,0.4);
  animation: none !important;
}
.wd-peer-card.is-failed {
  filter: saturate(0.5) brightness(0.95);
  animation: none !important;
}
.wd-peer-card.is-off { opacity: 0.45; filter: grayscale(0.4); }

.wd-peer-head {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.wd-peer-ava {
  position: relative;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.wd-peer-flame {
  position: absolute;
  top: -8px; right: -8px;
  font-size: 14px;
  filter: drop-shadow(0 1px 3px rgba(255,140,40,0.5));
  animation: wdFlameWiggle 0.6s var(--wd-bouncy) infinite;
}
.wd-peer-check {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: #2EC76B;
  color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  box-shadow: 0 2px 5px rgba(46,199,107,0.5);
}
.wd-peer-x {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: #1A1A2E;
  color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
}
.wd-peer-meta { min-width: 0; }
.wd-peer-name {
  font-weight: 700; font-size: 12px;
  color: #1A1A2E;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-peer-sub {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600;
  color: #6B6B85;
  font-family: 'Nunito', sans-serif;
}
.wd-peer-typing { display: inline-flex; gap: 1px; }
.wd-peer-typing span {
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: #6B6B85;
  animation: wdTypingDot 1s ease-in-out infinite;
}
.wd-peer-typing span:nth-child(2) { animation-delay: 0.12s; }
.wd-peer-typing span:nth-child(3) { animation-delay: 0.24s; }

/* 6×5 silhouette grid — each row is either empty / current (pulsing) /
   submitted (solid colored bar per cell, NO per-cell pattern info). */
.wd-peer-grid {
  display: flex; flex-direction: column;
  gap: 3px;
}
.wd-peer-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  height: 14px;
}
.wd-peer-cell {
  border-radius: 3px;
  background: rgba(26,26,46,0.07);
  border: 1px solid rgba(26,26,46,0.06);
  transition: background 0.3s ease, transform 0.3s var(--wd-bouncy);
}
.wd-peer-row.current .wd-peer-cell {
  border-color: color-mix(in srgb, var(--peer-accent, #FF5E9F) 50%, transparent);
  border-style: dashed;
}
.wd-peer-row.current .wd-peer-cell.typed {
  background: color-mix(in srgb, var(--peer-accent, #FF5E9F) 25%, white);
  border-color: var(--peer-accent, #FF5E9F);
  animation: wdPeerTypedPop 0.3s var(--wd-bouncy);
}
@keyframes wdPeerTypedPop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.wd-peer-row.submitted .wd-peer-cell {
  background: var(--peer-accent, #FF5E9F);
  border-color: var(--peer-accent, #FF5E9F);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  animation: wdPeerCellFlip 0.5s var(--wd-bouncy) backwards;
}
@keyframes wdPeerCellFlip {
  0% { transform: rotateX(-180deg); opacity: 0.3; }
  60% { transform: rotateX(10deg); opacity: 1; }
  100% { transform: rotateX(0); opacity: 1; }
}
.wd-peer-card.is-solved .wd-peer-row.submitted .wd-peer-cell {
  background: #2EC76B;
  border-color: #2EC76B;
}

/* Toast bubble above peer mini board */
.wd-peer-toast {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: #1A1A2E;
  color: white;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  white-space: nowrap;
  animation: wdToastIn 0.3s var(--wd-bouncy);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 5;
}

/* ======================================================================
   FINAL SIXTY OVERLAY
   ====================================================================== */
.wd-fs-root {
  position: sticky;
  top: 8px;
  z-index: 40;
  width: 100%;
  max-width: 560px;
  font-family: 'Fredoka', sans-serif;
  color: #1A1A2E;
}
.wd-fs-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(230,32,56,0.12), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(230,32,56,0.08), transparent 60%);
  z-index: -1;
  transition: background 0.3s ease;
}
.wd-fs-root.phase-warn .wd-fs-bg {
  background:
    radial-gradient(circle at 50% 0%, rgba(230,32,56,0.22), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(230,32,56,0.18), transparent 60%);
}
.wd-fs-root.phase-critical .wd-fs-bg {
  background:
    radial-gradient(circle at 50% 0%, rgba(230,32,56,0.4), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(230,32,56,0.3), transparent 55%);
  animation: wdFsHeartbeat 0.8s ease-in-out infinite;
}
@keyframes wdFsHeartbeat {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
.wd-fs-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, #FFF4D0, #FFE1E4);
  box-shadow: 0 10px 28px rgba(230,32,56,0.3), 0 0 0 3px rgba(230,32,56,0.3);
  border: 2px solid #E62038;
  animation: wdFsBarIn 0.55s var(--wd-bouncy);
}
@keyframes wdFsBarIn {
  0% { transform: translateY(-40px) scale(0.85); opacity: 0; }
  60% { transform: translateY(5px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
.wd-fs-root.phase-critical .wd-fs-bar {
  animation: wdFsBarCritical 0.5s var(--wd-bouncy) infinite;
}
@keyframes wdFsBarCritical {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.wd-fs-left { display: flex; flex-direction: column; gap: 4px; }
.wd-fs-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 14px;
  letter-spacing: 2px;
  color: #E62038;
}
.wd-fs-flame {
  font-size: 18px;
  animation: wdFlameWiggle 0.6s var(--wd-bouncy) infinite;
}
.wd-fs-credit {
  font-family: 'Nunito', sans-serif;
  font-weight: 600; font-size: 12px;
  color: #1A1A2E;
  opacity: 0.8;
}
.wd-fs-credit b { color: #E62038; font-family: 'Fredoka', sans-serif; font-weight: 800; }
.wd-fs-timer-wrap {
  position: relative;
  width: 86px; height: 86px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #E62038;
}
.wd-fs-root.phase-warn .wd-fs-timer-wrap { color: #FF8C61; }
.wd-fs-root.phase-normal .wd-fs-timer-wrap { color: #7B61FF; }
.wd-fs-seconds {
  position: absolute;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; font-size: 32px;
  color: #1A1A2E;
}
.wd-fs-root.phase-critical .wd-fs-seconds {
  color: #E62038;
  animation: wdFsSecondsPulse 0.5s var(--wd-bouncy) infinite;
}
@keyframes wdFsSecondsPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ======================================================================
   SOLVE BURST — confetti + halo when I solve
   ====================================================================== */
.wd-solve-burst {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}
.wd-confetti {
  position: absolute;
  top: 20%;
  width: 10px; height: 14px;
  border-radius: 2px;
  animation: wdConfettiFall 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wd-confetti.c0 { background: #FF5E9F; }
.wd-confetti.c1 { background: #FFD23F; }
.wd-confetti.c2 { background: #4ECDC4; }
.wd-confetti.c3 { background: #7B61FF; }
@keyframes wdConfettiFall {
  0% { transform: translateY(-40px) rotate(0); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0.6; }
}

/* Shake toast on invalid word */
.wd-shake {
  animation: wdShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes wdShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* =======================================================================
   RESULTS MODAL — post-match emoji grid reveal + breakdown chips
   Full-viewport overlay with falling confetti, winner spotlight,
   moments timeline, per-player cards + [See summary] CTA.
   ======================================================================= */
.wd-results-root {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: wdResFadeIn 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wd-results-back {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    1200px 600px at 50% -10%,
    rgba(255, 94, 159, 0.28),
    rgba(123, 97, 255, 0.22) 40%,
    rgba(26, 26, 46, 0.78) 75%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@keyframes wdResFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Falling confetti — lives inside root so it falls behind the card */
.wd-results-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.wd-results-confetti .wd-rc {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  animation: wdRcFall 3200ms linear infinite;
  opacity: 0.95;
}
.wd-results-confetti .wd-rc.c0 { background: var(--yumpa-pink, #FF5E9F); }
.wd-results-confetti .wd-rc.c1 { background: var(--yumpa-yellow, #FFD23F); }
.wd-results-confetti .wd-rc.c2 { background: var(--yumpa-mint, #4ECDC4); }
.wd-results-confetti .wd-rc.c3 { background: var(--yumpa-purple, #7B61FF); }
@keyframes wdRcFall {
  0%   { transform: translateY(-30px) rotate(0deg); }
  100% { transform: translateY(110vh) rotate(720deg); }
}

/* The card itself */
.wd-results-card {
  position: relative;
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #FFF8F0 0%, #FFECEF 100%);
  border-radius: 28px;
  box-shadow:
    0 24px 60px rgba(26, 26, 46, 0.35),
    0 6px 16px rgba(255, 94, 159, 0.18);
  padding: 26px 22px 18px;
  animation: wdResPop 440ms cubic-bezier(0.34, 1.56, 0.64, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 94, 159, 0.4) transparent;
}
.wd-results-card::-webkit-scrollbar { width: 8px; }
.wd-results-card::-webkit-scrollbar-thumb {
  background: rgba(255, 94, 159, 0.35);
  border-radius: 4px;
}
@keyframes wdResPop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* Header */
.wd-results-head { text-align: center; margin-bottom: 14px; }
.wd-results-chip {
  display: inline-block;
  padding: 4px 14px;
  background: linear-gradient(90deg, #FF5E9F, #FF8C61);
  color: white;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(255, 94, 159, 0.45);
  animation: wdResChip 1.8s ease-in-out infinite;
}
@keyframes wdResChip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.wd-results-title {
  margin: 10px 0 4px;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--yumpa-dark, #1A1A2E);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.wd-results-word {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, #4ECDC4, #7B61FF, #FF5E9F);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wdResWord 2.6s ease-in-out infinite;
}
@keyframes wdResWord {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.wd-results-sub {
  font-family: 'Nunito', system-ui, sans-serif;
  color: #6B6B85;
  font-size: 15px;
  margin-top: 2px;
}

/* Moments section */
.wd-results-moments {
  background: rgba(255, 210, 63, 0.18);
  border: 1.5px dashed rgba(255, 140, 97, 0.45);
  border-radius: 18px;
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.wd-results-moments h3 {
  margin: 0 0 8px;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--yumpa-dark, #1A1A2E);
}
.wd-results-moments ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.wd-results-moment {
  display: flex;
  gap: 10px;
  align-items: center;
  background: white;
  border-radius: 100px;
  padding: 6px 12px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 13px;
  color: var(--yumpa-dark, #1A1A2E);
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.06);
  animation: wdMomentIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.wd-results-moments li:nth-child(1) { animation-delay: 0ms; }
.wd-results-moments li:nth-child(2) { animation-delay: 80ms; }
.wd-results-moments li:nth-child(3) { animation-delay: 160ms; }
.wd-results-moments li:nth-child(4) { animation-delay: 240ms; }
.wd-results-moments li:nth-child(5) { animation-delay: 320ms; }
.wd-results-moments li:nth-child(6) { animation-delay: 400ms; }
@keyframes wdMomentIn {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}
.wd-results-moment-ico { font-size: 16px; }
.wd-results-moment-text { flex: 1; }
.wd-results-moment-text b { color: #FF5E9F; font-weight: 700; }

/* Per-player section */
.wd-results-players {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wd-results-player {
  background: white;
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(26, 26, 46, 0.08);
  border: 2px solid transparent;
  animation: wdPlayerIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.wd-results-player.is-me {
  border-color: rgba(255, 94, 159, 0.55);
  background: linear-gradient(180deg, #FFF8F0 0%, #FFE6EE 100%);
}
.wd-results-player.is-failed {
  opacity: 0.88;
  background: linear-gradient(180deg, #FFF8F0 0%, #F3F0F5 100%);
}
@keyframes wdPlayerIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.wd-results-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.wd-results-rank {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  min-width: 38px;
  text-align: center;
}
.wd-results-rank.r1 { font-size: 26px; }
.wd-results-ava {
  flex-shrink: 0;
}
.wd-results-id { flex: 1; min-width: 0; }
.wd-results-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--yumpa-dark, #1A1A2E);
}
.wd-results-you {
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: #FF5E9F;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.08em;
}
.wd-results-mvp {
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: linear-gradient(90deg, #7B61FF, #FF5E9F);
  padding: 3px 9px;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(123, 97, 255, 0.35);
  animation: wdMvpPulse 2s ease-in-out infinite;
}
@keyframes wdMvpPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}
.wd-results-meta {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
  color: #6B6B85;
  margin-top: 2px;
}
.wd-results-meta b { color: var(--yumpa-dark, #1A1A2E); }
.wd-results-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
.wd-results-total b {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #7B61FF;
}
.wd-results-total span {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 10px;
  color: #6B6B85;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Emoji grid reveal — THE reward */
.wd-results-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: rgba(26, 26, 46, 0.04);
  border-radius: 12px;
  margin: 8px 0;
}
.wd-results-grid-row {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1;
  opacity: 0;
  animation: wdGridRow 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.wd-results-grid-row:nth-child(1) { animation-delay: 100ms; }
.wd-results-grid-row:nth-child(2) { animation-delay: 220ms; }
.wd-results-grid-row:nth-child(3) { animation-delay: 340ms; }
.wd-results-grid-row:nth-child(4) { animation-delay: 460ms; }
.wd-results-grid-row:nth-child(5) { animation-delay: 580ms; }
.wd-results-grid-row:nth-child(6) { animation-delay: 700ms; }
@keyframes wdGridRow {
  0% { opacity: 0; transform: translateY(-6px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.wd-results-grid-empty {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 13px;
  color: #6B6B85;
  font-style: italic;
  text-align: center;
  padding: 6px;
}

/* Breakdown chips */
.wd-results-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.wd-bd {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  background: #F5F0F7;
  color: #6B6B85;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.wd-bd b {
  color: var(--yumpa-dark, #1A1A2E);
  font-weight: 700;
}
.wd-bd.base { background: rgba(78, 205, 196, 0.18); color: #2E8A84; }
.wd-bd.base b { color: #1F6B66; }
.wd-bd.finish { background: rgba(255, 210, 63, 0.28); color: #8A6A00; }
.wd-bd.finish b { color: #6B5200; }
.wd-bd.fewest { background: rgba(123, 97, 255, 0.18); color: #5A44C0; }
.wd-bd.fewest b { color: #3E2E87; }
.wd-bd.clutch {
  background: linear-gradient(90deg, rgba(255, 94, 159, 0.25), rgba(255, 140, 97, 0.25));
  color: #C43D75;
}
.wd-bd.clutch b { color: #9A2D5A; }
.wd-bd.mult {
  background: linear-gradient(90deg, #1A1A2E, #4A2A6E);
  color: white;
  letter-spacing: 0.06em;
}
.wd-bd.xp {
  background: linear-gradient(90deg, #FFD23F, #FF8C61);
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255, 140, 97, 0.35);
}

/* Close / See summary button */
.wd-results-close {
  margin: 18px auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  background: linear-gradient(90deg, #FF5E9F, #FF8C61);
  color: white;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255, 94, 159, 0.42);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 220ms ease;
}
.wd-results-close:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(255, 94, 159, 0.55);
}
.wd-results-close:active {
  transform: translateY(0) scale(0.98);
}

/* Small-screen tweaks */
@media (max-width: 520px) {
  .wd-results-card { padding: 20px 14px 14px; border-radius: 22px; }
  .wd-results-word { font-size: 32px; }
  .wd-results-title { font-size: 18px; }
  .wd-results-grid-row { font-size: 16px; letter-spacing: 1px; }
  .wd-results-rank.r1 { font-size: 22px; }
  .wd-results-total b { font-size: 18px; }
}
/* ═══════════════════════════════════════════════════════════════
   Spectator mode — shown between "I finished" and "results modal".
   Reaction bar lets the spectator cheer peers still playing. The
   peer boards upstairs stay silhouetted so no letters leak (brief
   §6 symmetry rule: finished players must not gain a view advantage).
   ═══════════════════════════════════════════════════════════════ */
.wd-spectator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 18px auto 10px;
  padding: 14px 16px 10px;
  background: linear-gradient(135deg, rgba(255, 210, 63, 0.18), rgba(123, 97, 255, 0.14));
  border-radius: 20px;
  border: 1.5px dashed rgba(255, 94, 159, 0.35);
  max-width: 480px;
  animation: wdSpectatorIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wdSpectatorIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.wd-spectator-hint {
  font-family: Fredoka, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--dark, #1A1A2E);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   PEER-CARD CROSS-BOARD INTERACTIONS
   Seven coordinated effects that make the 5-player layout feel alive
   without ever leaking letter/position info (brief §5 anti-cheat).
   ═══════════════════════════════════════════════════════════════════════ */

/* #7 — Entry stagger. Peer cards slide in from their outer edge on mount.
        `--enter-i` is a 0-based index set inline from TSX. */
.wd-peer-card {
  animation: wdPeerEnter 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--enter-i, 0) * 110ms + 120ms);
}
.wd-peer-card.side-left  { --enter-from-x: -40px; }
.wd-peer-card.side-right { --enter-from-x:  40px; }
@keyframes wdPeerEnter {
  0%   { opacity: 0; transform: translateX(var(--enter-from-x, 0)) scale(0.9) rotate(0); }
  60%  { opacity: 1; transform: translateX(0) scale(1.04); }
  100% { opacity: 1; /* final rotate handled by .side-* base rule */ }
}

/* #1 — Sparkle burst when a peer hits heat 4. Three ✨ orbit outward from
        the card's center, then fade. Added by TSX via `sparkling` class. */
.wd-peer-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}
.wd-peer-spark {
  position: absolute;
  top: 50%; left: 50%;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 2px 5px rgba(255, 210, 63, 0.75));
  animation: wdPeerSparkFly 900ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.wd-peer-spark.s0 { --sx:  38px; --sy: -30px; animation-delay:   0ms; }
.wd-peer-spark.s1 { --sx: -42px; --sy: -18px; animation-delay:  80ms; }
.wd-peer-spark.s2 { --sx:  14px; --sy:  42px; animation-delay: 160ms; }
.wd-peer-spark.s3 { --sx: -28px; --sy:  32px; animation-delay: 240ms; }
@keyframes wdPeerSparkFly {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.2); }
  30%  { opacity: 1;   transform: translate(calc(-50% + var(--sx) * 0.3), calc(-50% + var(--sy) * 0.3)) scale(1.2) rotate(15deg); }
  100% { opacity: 0;   transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0.8) rotate(35deg); }
}

/* #2 — Mutual wobble. When I press a key, every peer card does a 120ms
        side-shake. Driven by class toggle + CSS animation (key'd via
        React remounting the animation via class-add/remove). */
.wd-peer-card.wobble-pulse {
  animation: wdPeerWobble 180ms cubic-bezier(0.36, 0, 0.66, -0.56);
}
.wd-peer-card.wobble-pulse.side-left  { animation-name: wdPeerWobbleL; }
.wd-peer-card.wobble-pulse.side-right { animation-name: wdPeerWobbleR; }
@keyframes wdPeerWobbleL {
  0%   { transform: rotate(-1.5deg) translateX(0); }
  40%  { transform: rotate(-2.2deg) translateX(-2px); }
  70%  { transform: rotate(-1.0deg) translateX(1px); }
  100% { transform: rotate(-1.5deg) translateX(0); }
}
@keyframes wdPeerWobbleR {
  0%   { transform: rotate(1.5deg) translateX(0); }
  40%  { transform: rotate(2.2deg) translateX(2px); }
  70%  { transform: rotate(1.0deg) translateX(-1px); }
  100% { transform: rotate(1.5deg) translateX(0); }
}

/* #3 — Green pulse propagation. When I submit a guess that produces at
        least one 🟩, every peer card's border pulses green once. Telegraphs
        "someone just got a hit" without revealing which column / letter. */
.wd-peer-card.green-pulse::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 21px;
  border: 3px solid #2EC76B;
  opacity: 0;
  pointer-events: none;
  animation: wdGreenPulse 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}
@keyframes wdGreenPulse {
  0%   { opacity: 0; transform: scale(0.94); }
  30%  { opacity: 0.9; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* #4 — Rivalry spotlight. The peer with the highest live heat (excluding
        finished players) gets a pink ring + crown emoji + slight scale up.
        Visual reminder of "the one to beat". */
.wd-peer-card.is-leader {
  transform-origin: center;
  animation: wdLeaderPulse 2200ms cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  box-shadow:
    0 0 0 3px rgba(255, 94, 159, 0.85),
    0 8px 22px rgba(255, 94, 159, 0.45),
    0 2px 6px rgba(255, 94, 159, 0.25);
  z-index: 2;
}
.wd-peer-card.is-leader.side-left  { transform: rotate(-1.5deg) scale(1.04); }
.wd-peer-card.is-leader.side-right { transform: rotate(1.5deg)  scale(1.04); }
.wd-peer-card.is-leader .wd-peer-crown {
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  filter: drop-shadow(0 3px 6px rgba(255, 180, 40, 0.7));
  animation: wdCrownBob 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  pointer-events: none;
  z-index: 6;
}
@keyframes wdLeaderPulse {
  0%, 100% { box-shadow:
    0 0 0 3px rgba(255, 94, 159, 0.85),
    0 8px 22px rgba(255, 94, 159, 0.45); }
  50% { box-shadow:
    0 0 0 6px rgba(255, 94, 159, 0.45),
    0 10px 28px rgba(255, 94, 159, 0.6); }
}
@keyframes wdCrownBob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-4deg); }
  50%      { transform: translateX(-50%) translateY(-4px) rotate(4deg); }
}
/* Leader must not be awarded to a solved/failed player. */
.wd-peer-card.is-solved.is-leader,
.wd-peer-card.is-failed.is-leader { animation: none; box-shadow: none; }
.wd-peer-card.is-solved .wd-peer-crown,
.wd-peer-card.is-failed .wd-peer-crown { display: none; }

/* #5 — Peer fail: slump + slide. The existing `.is-failed` only de-saturates;
        add a "giving up" slump — tilted harder, shifted toward the edge. */
.wd-peer-card.is-failed.side-left  { transform: rotate(-4deg) translateX(-6px) translateY(4px); }
.wd-peer-card.is-failed.side-right { transform: rotate(4deg)  translateX(6px)  translateY(4px); }
.wd-peer-card.is-failed::after {
  content: '💔';
  position: absolute;
  top: -14px; right: -10px;
  font-size: 18px;
  opacity: 0.8;
  animation: wdFailFloat 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  pointer-events: none;
}
@keyframes wdFailFloat {
  0%, 100% { transform: translateY(0) rotate(-10deg); opacity: 0.8; }
  50%      { transform: translateY(-4px) rotate(10deg); opacity: 1; }
}

/* #6 — Reaction burst from peer card. When the peer themselves sends a
        reaction (not just any room reaction), we spawn a big emoji that
        leaps up from the top of their card before disappearing. Also the
        floating ReactionBar emoji keeps doing its normal global animation. */
.wd-peer-reaction-burst {
  position: absolute;
  top: -14px; left: 50%;
  font-size: 32px;
  transform: translateX(-50%);
  pointer-events: none;
  animation: wdPeerReactionUp 1400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 7;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
@keyframes wdPeerReactionUp {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(0.4) rotate(-20deg); }
  25%  { opacity: 1; transform: translate(-50%, -10px) scale(1.4) rotate(8deg); }
  60%  { opacity: 1; transform: translate(-50%, -44px) scale(1.1) rotate(-6deg); }
  100% { opacity: 0; transform: translate(-50%, -90px) scale(0.9) rotate(12deg); }
}

/* Disable wobble animation from overriding the leader/failed transform
   by keeping wobble very short (180ms) and not compounding with transform
   base — leader's animation-infinite retakes control immediately. */

/* Respect reduced motion — gut the decorative pieces but keep function. */
@media (prefers-reduced-motion: reduce) {
  .wd-peer-card,
  .wd-peer-spark,
  .wd-peer-crown,
  .wd-peer-reaction-burst {
    animation: none !important;
  }
  .wd-peer-card.is-leader.side-left  { transform: rotate(-1.5deg); }
  .wd-peer-card.is-leader.side-right { transform: rotate(1.5deg); }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/games/math-rush/math-rush.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Math Rush v2 — all visual styles.
 * Tokens inherit from yumpa-shared.css (or globals). Uses per-zone CSS
 * custom props to morph the stage + question card background as the
 * player progresses through zones.
 */

.mr-stage {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 16px 40px;
  font-family: 'Nunito', sans-serif;
  /* MESH GRADIENT — 4 corner radials that OVERLAP in the middle so there
     are no visible boundary lines. Each radial covers more than half the
     viewport, ensuring seamless blending. */
  background:
    radial-gradient(ellipse 80% 70% at 0% 0%,   color-mix(in srgb, var(--zbg1, #FFF4D0) 75%, white) 0%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 100% 0%, color-mix(in srgb, var(--zbg2, #FFDDE9) 60%, white) 0%, transparent 60%),
    radial-gradient(ellipse 75% 65% at 0% 100%, color-mix(in srgb, var(--zbg1, #FFF4D0) 50%, var(--zbg2, #FFDDE9)) 0%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 100% 100%, color-mix(in srgb, var(--zbg2, #FFDDE9) 70%, white) 0%, transparent 65%),
    linear-gradient(160deg, #FFF8EA 0%, #FFFBF0 100%);
  background-attachment: fixed;
  transition: background 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-x: hidden;
}
/* Ensure all content sits above the BG layer */
.mr-stage > * { position: relative; z-index: 2; }

/* ============ TOP BAR ============ */
.mr-topbar {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}
.mr-topbar-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.mr-zone-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: white;
  border: 1.5px solid var(--zc, rgba(0,0,0,0.1));
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 1px; color: var(--zc, #1A1A2E);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mr-zone-chip .zce { font-size: 14px; line-height: 1; }
.mr-q-count {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px;
  color: rgba(26,26,46,0.6);
}
.mr-q-count b { color: var(--zc, #1A1A2E); font-size: 15px; }
.mr-score {
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 20px;
  background: linear-gradient(135deg, #FF5E9F, #FF8C61);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.mr-score.bump { transform: scale(1.25); }
.mr-score-label { font-size: 11px; color: rgba(26,26,46,0.5); font-weight: 700; }

/* Progress dots (20 cells, zone-colored) */
.mr-progress {
  display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px;
  width: 100%;
}
.mr-progress-cell {
  height: 6px; border-radius: 999px;
  background: rgba(26,26,46,0.08);
  transition: background 0.3s, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mr-progress-cell.done { background: var(--cc, #4ECDC4); }
.mr-progress-cell.current {
  background: var(--cc, #4ECDC4);
  transform: scaleY(1.6);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cc) 50%, transparent);
}
.mr-progress-cell.wrong { background: rgba(255,94,159,0.55); }
.mr-progress-cell.lightning-hit {
  background: #FFD23F;
  box-shadow: 0 0 10px rgba(255,210,63,0.8);
}

/* ============ COMBO BAR ============ */
.mr-combo {
  width: 100%; max-width: 560px;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  position: relative; z-index: 2;
}
.mr-combo-track {
  position: relative;
  flex: 1;
  height: 16px;
  background: rgba(26,26,46,0.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
}
.mr-combo-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(78,205,196,0.9) 0%,
    var(--c, rgba(26,26,46,0.15)) 100%);
  box-shadow: 0 0 10px var(--g, transparent), inset 0 -2px 3px rgba(0,0,0,0.12);
  transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s, box-shadow 0.4s;
}
.mr-combo.tier-1 .mr-combo-fill {
  background: linear-gradient(90deg, #FFD23F 0%, #FF8C61 100%);
}
.mr-combo.tier-2 .mr-combo-fill {
  background: linear-gradient(90deg, #FFD23F 0%, #FF5E9F 100%);
}
.mr-combo.tier-3 .mr-combo-fill {
  background: linear-gradient(90deg, #FFD23F, #FF5E9F, #FFD23F);
  background-size: 200% 100%;
  animation: mrInfernoShift 1.2s linear infinite;
}
@keyframes mrInfernoShift {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}
.mr-combo-inferno-shine {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  background-size: 60% 100%;
  animation: mrInfernoShine 1.2s linear infinite;
  pointer-events: none;
}
@keyframes mrInfernoShine {
  from { background-position: -60% 0; }
  to { background-position: 160% 0; }
}
.mr-combo-tick {
  position: absolute; top: 0; width: 2px; height: 100%;
  background: rgba(0,0,0,0.15);
  pointer-events: none;
}
.mr-combo-tag {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--c);
  color: white;
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 11px;
  box-shadow: 0 4px 10px var(--g);
  animation: mrComboTagFloat 1.5s ease-in-out infinite;
}
@keyframes mrComboTagFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.mr-combo-tag-mult { font-size: 10px; opacity: 0.9; }
.mr-combo-flash { animation: mrComboFlash 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes mrComboFlash {
  0% { transform: scale(1.04); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ============ QUESTION CARD ============ */
.mr-question {
  width: 100%; max-width: 560px;
  background: white;
  border: 2px solid rgba(26,26,46,0.06);
  border-radius: 28px;
  padding: 44px 24px;
  text-align: center;
  box-shadow: 0 14px 38px rgba(0,0,0,0.08);
  position: relative;
  margin-bottom: 18px;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  z-index: 2;
}
.mr-question.correct {
  background: linear-gradient(135deg, #E3FCE9, #D2F5DC);
  border-color: rgba(46,199,107,0.4);
  animation: mrAnswerPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mr-question.wrong {
  background: linear-gradient(135deg, #FFE3E3, #FFD2D2);
  border-color: rgba(220,40,40,0.3);
  animation: mrQShake 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.mr-question.lightning {
  border-color: rgba(255,210,63,0.7);
  box-shadow:
    0 0 0 3px rgba(255,210,63,0.25),
    0 14px 38px rgba(255,210,63,0.3),
    0 0 40px rgba(255,210,63,0.2) inset;
  animation: mrLightningPulse 1.1s ease-in-out infinite;
}
@keyframes mrLightningPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,210,63,0.25), 0 14px 38px rgba(255,210,63,0.3), 0 0 40px rgba(255,210,63,0.2) inset; }
  50% { box-shadow: 0 0 0 5px rgba(255,210,63,0.45), 0 18px 44px rgba(255,210,63,0.5), 0 0 60px rgba(255,210,63,0.35) inset; }
}
@keyframes mrQShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes mrAnswerPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.mr-q-expr {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(40px, 7vw, 64px);
  color: #1A1A2E; line-height: 1;
  letter-spacing: -1px;
  display: inline-flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; justify-content: center;
}
.mr-q-expr .eq-q {
  background: linear-gradient(135deg, #FF5E9F, #FF8C61);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mrQBob 1.2s ease-in-out infinite;
}
@keyframes mrQBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ============ INPUT DISPLAY ============ */
.mr-input-display {
  width: 100%; max-width: 560px;
  background: white;
  border: 2px solid rgba(255,94,159,0.3);
  border-radius: 22px;
  padding: 20px 24px;
  min-height: 74px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; font-size: 36px;
  color: #1A1A2E;
  box-shadow: 0 8px 24px rgba(255,94,159,0.12), inset 0 2px 4px rgba(0,0,0,0.04);
  margin-bottom: 14px;
  letter-spacing: 3px;
  transition: border-color 0.2s, transform 0.2s;
  z-index: 2; position: relative;
}
.mr-input-display:empty::before,
.mr-input-display.placeholder::before {
  content: '◌ ◌ ◌';
  color: rgba(26,26,46,0.2);
  letter-spacing: 6px;
}
.mr-caret {
  display: inline-block; width: 3px; height: 28px;
  background: #FF5E9F; margin-left: 2px; vertical-align: middle;
  animation: mrCaretBlink 1s infinite;
}
@keyframes mrCaretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Grace-period READY state — pulsing ring + hint */
.mr-input-display.ready {
  border-color: #2EC76B;
  background: linear-gradient(135deg, rgba(46,199,107,0.08), white);
  box-shadow:
    0 0 0 3px rgba(46,199,107,0.2),
    0 8px 24px rgba(46,199,107,0.2),
    inset 0 2px 4px rgba(0,0,0,0.04);
  animation: mrReadyPulse 1.1s ease-in-out infinite;
}
@keyframes mrReadyPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(46,199,107,0.2), 0 8px 24px rgba(46,199,107,0.2), inset 0 2px 4px rgba(0,0,0,0.04);
    border-color: #2EC76B;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(46,199,107,0.35), 0 10px 30px rgba(46,199,107,0.3), inset 0 2px 4px rgba(0,0,0,0.04);
    border-color: #1FA855;
  }
}
.mr-input-value { display: inline-block; }
.mr-input-hint {
  margin-left: 14px;
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 14px;
  color: #2EC76B;
  letter-spacing: 0.5px;
  animation: mrHintIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mr-input-hint-th {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
  letter-spacing: 0;
}
@keyframes mrHintIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============ SUBMIT KEY — integrated commit action in the numpad ↵ slot ============ */
.mr-numkey.submit {
  background: linear-gradient(135deg, #FFF4D0, #FFE0E9);
  color: rgba(255, 94, 159, 0.5);
  font-size: 22px;
  position: relative;
}
.mr-numkey.submit[disabled] {
  opacity: 1;
  cursor: not-allowed;
}
/* Ready state — becomes a full Yumpa primary CTA */
.mr-numkey.submit.on {
  background: linear-gradient(135deg, #2EC76B, #4ECDC4);
  color: white;
  border-color: #2EC76B;
  font-size: 16px;
  box-shadow:
    0 4px 0 rgba(26, 26, 46, 0.08),
    0 8px 18px rgba(46, 199, 107, 0.45),
    0 0 0 3px rgba(46, 199, 107, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: mrSubmitPulse 1.1s ease-in-out infinite;
}
@keyframes mrSubmitPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 4px 0 rgba(26, 26, 46, 0.08),
      0 8px 18px rgba(46, 199, 107, 0.45),
      0 0 0 3px rgba(46, 199, 107, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 6px 0 rgba(26, 26, 46, 0.08),
      0 12px 24px rgba(46, 199, 107, 0.55),
      0 0 0 6px rgba(46, 199, 107, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}
.mr-submit-idle {
  font-size: 24px;
  line-height: 1;
}
.mr-submit-content {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.3px;
  animation: mrSubmitContentIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mrSubmitContentIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
.mr-submit-check {
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
.mr-submit-label {
  line-height: 1;
}

/* Keyboard hint chip — small cream pill below numpad, only when ready */
.mr-kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px dashed rgba(46, 199, 107, 0.35);
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: rgba(26, 26, 46, 0.6);
  animation: mrKbdHintIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 2;
}
@keyframes mrKbdHintIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.mr-kbd {
  padding: 2px 8px;
  border-radius: 6px;
  background: white;
  border: 1.5px solid rgba(26, 26, 46, 0.15);
  box-shadow: 0 2px 0 rgba(26, 26, 46, 0.1);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #1A1A2E;
}

/* ============ NUMPAD ============ */
.mr-numpad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; width: 100%; max-width: 420px;
  margin-bottom: 12px;
  z-index: 2; position: relative;
}
.mr-numkey {
  height: 62px; border-radius: 18px;
  background: white;
  border: 2px solid rgba(26,26,46,0.06);
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 26px;
  color: #1A1A2E; cursor: pointer;
  transition: all 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 0 rgba(26,26,46,0.08), 0 6px 14px rgba(0,0,0,0.06);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mr-numkey:hover {
  transform: translateY(-1px);
  border-color: rgba(255,94,159,0.3);
}
.mr-numkey:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(26,26,46,0.08), 0 2px 6px rgba(0,0,0,0.06);
  background: linear-gradient(135deg, #FFF4D0, #FFDDE9);
}
.mr-numkey.del { font-size: 22px; color: rgba(26,26,46,0.5); }

/* ============ PARTICLES ============ */
.mr-particles {
  position: absolute; inset: 0;
  pointer-events: none; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.mr-particle {
  position: absolute;
  border-radius: 50%;
  animation: mrParticleBurst 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mrParticleBurst {
  0% { opacity: 0; transform: translate(0,0) scale(0.3) rotate(0); }
  15% { opacity: 1; transform: translate(calc(var(--dx)*0.2), calc(var(--dy)*0.2)) scale(1.1) rotate(calc(var(--rot)*0.2)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.6) rotate(var(--rot)); }
}

/* ============ ZONE STAMP (emoji "stamps" into HUD band) ============
   A focused, compact effect. Big emoji drops into the HUD band with a
   shockwave ring + sparkle particles. Small "ZONE N • Name" label fades
   in underneath. Entire footprint ~140×100px centered at top:84px —
   never reaches the question card (which starts ~y=220). */
.mr-zone-stamp {
  position: fixed;
  top: 84px; left: 50%;
  width: 0; height: 0;   /* no layout box — children are absolutely positioned */
  z-index: 95;
  pointer-events: none;
  color: white;
}

/* The big emoji that "stamps" down from above */
.mr-zs-emoji {
  position: absolute;
  top: 0; left: 50%;
  font-size: 56px; line-height: 1;
  transform: translate(-50%, 0);
  filter:
    drop-shadow(0 6px 14px color-mix(in srgb, var(--zc) 55%, transparent))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
  animation: mrZSStamp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes mrZSStamp {
  0%   { opacity: 0; transform: translate(-50%, -42px) scale(0.4) rotate(-120deg); }
  45%  { opacity: 1; transform: translate(-50%, 6px) scale(1.55) rotate(14deg); }
  70%  { transform: translate(-50%, -2px) scale(0.92) rotate(-6deg); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); }
}

/* Shockwave ring — expands outward from the emoji, fades */
.mr-zs-shock {
  position: absolute;
  top: 28px; left: 50%;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid var(--zc);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  animation: mrZSShock 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.18s;
}
.mr-zs-shock.r2 {
  animation-delay: 0.36s;
  border-width: 2px;
  opacity: 0;
}
@keyframes mrZSShock {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); border-width: 4px; }
  20%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); border-width: 0.5px; }
}

/* Sparkle particles — 6 stars that burst radially outward */
.mr-zs-sparkles {
  position: absolute;
  top: 28px; left: 50%;
  width: 0; height: 0;
}
.mr-zs-spark {
  position: absolute;
  top: 0; left: 0;
  font-size: 16px;
  color: var(--zc);
  text-shadow:
    0 0 6px color-mix(in srgb, var(--zc) 80%, transparent),
    0 0 10px rgba(255, 255, 255, 0.6);
  opacity: 0;
  /* --deg is set inline per sparkle. Each burst travels outward at its angle. */
  animation: mrZSSpark 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mrZSSpark {
  0%   {
    opacity: 0;
    transform: rotate(var(--deg)) translateX(0) rotate(calc(-1 * var(--deg))) scale(0.3);
  }
  25%  {
    opacity: 1;
    transform: rotate(var(--deg)) translateX(32px) rotate(calc(-1 * var(--deg))) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--deg)) translateX(72px) rotate(calc(-1 * var(--deg))) scale(0.5);
  }
}
.mr-zs-spark.sp1 { font-size: 14px; }
.mr-zs-spark.sp2 { font-size: 18px; }
.mr-zs-spark.sp3 { font-size: 13px; }
.mr-zs-spark.sp4 { font-size: 16px; }
.mr-zs-spark.sp5 { font-size: 15px; }
.mr-zs-spark.sp6 { font-size: 12px; }

/* Text label — small pill chip that fades in under the emoji */
.mr-zs-label {
  position: absolute;
  top: 62px; left: 50%;
  transform: translate(-50%, 0);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--zc) 92%, white) 0%,
    color-mix(in srgb, var(--zc) 75%, #FF8C61) 100%);
  border: 2px solid white;
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--zc) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-family: 'Fredoka', sans-serif;
  color: white;
  white-space: nowrap;
  opacity: 0;
  animation: mrZSLabel 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
@keyframes mrZSLabel {
  0%   { opacity: 0; transform: translate(-50%, -6px) scale(0.7); }
  50%  { opacity: 1; transform: translate(-50%, 2px) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.mr-zs-zone-num {
  font-weight: 800; font-size: 9px; letter-spacing: 1.5px;
  opacity: 0.9;
}
.mr-zs-dot {
  font-weight: 900; opacity: 0.6; font-size: 10px;
}
.mr-zs-name {
  font-weight: 800; font-size: 13px; letter-spacing: -0.2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

/* Leaving state — everything lifts up and fades out together */
.mr-zone-stamp.leaving .mr-zs-emoji {
  animation: mrZSOut 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mr-zone-stamp.leaving .mr-zs-label {
  animation: mrZSLabelOut 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mr-zone-stamp.leaving .mr-zs-sparkles,
.mr-zone-stamp.leaving .mr-zs-shock {
  opacity: 0 !important;
  transition: opacity 0.18s linear;
}
@keyframes mrZSOut {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -16px) scale(0.85) rotate(8deg); }
}
@keyframes mrZSLabelOut {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(0.9); }
}

/* Narrow screens — scale the stamp down a bit */
@media (max-width: 420px) {
  .mr-zs-emoji { font-size: 46px; }
  .mr-zs-label { top: 54px; padding: 3px 10px; }
  .mr-zs-name { font-size: 12px; }
}

/* ============ LIGHTNING CHIP (unified warn + active, top-right HUD) ============
   Single compact chip at top-right, same slot whether warning or active.
   Warning: small pill, wobble, "NEXT ×3".
   Active:  same slot but expands to include a countdown ring + seconds. */
.mr-lightning-chip {
  position: fixed;
  top: 84px; right: 16px;
  z-index: 41;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px;
  color: white;
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  border-radius: 999px;
  border: 2px solid white;
  pointer-events: none;
  box-shadow:
    0 8px 22px rgba(255, 210, 63, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Smooth transition between warn ↔ active (bg, padding, font morph) */
.mr-lightning-chip {
  transition:
    background 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    padding 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    font-size 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Warning state — smaller, orange gradient, wobbles */
.mr-lightning-chip.warn {
  background: linear-gradient(135deg, #FFD23F, #FF8C61);
  font-size: 12px;
  animation: mrLChipIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
             mrLChipWobble 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite 0.42s;
}
/* Active state — hot pink gradient, breathes + larger. NO entry animation
   because the chip is already on-screen from warn → active swap. */
.mr-lightning-chip.active {
  background: linear-gradient(135deg, #FF5E9F, #FFD23F);
  font-size: 13px;
  padding: 6px 12px 6px 6px;
  animation: mrLChipPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
             mrLChipBreathe 0.8s ease-in-out infinite 0.4s;
}
/* Exit animation — slide up-right + fade. Applied on the last frame then
   the component unmounts. */
.mr-lightning-chip.leaving {
  animation: mrLChipOut 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes mrLChipIn {
  0%   { opacity: 0; transform: translate(36px, -8px) scale(0.6) rotate(14deg); }
  55%  { opacity: 1; transform: translate(-4px, 2px) scale(1.1) rotate(-4deg); }
  80%  { transform: translate(2px, -1px) scale(0.97) rotate(2deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}
/* Pop when warn → active — no translate, just a brief scale bump */
@keyframes mrLChipPop {
  0%   { transform: scale(0.94); }
  40%  { transform: scale(1.12); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
/* Exit — drift up-right with a little twirl, then fade */
@keyframes mrLChipOut {
  0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
  40%  { opacity: 1; transform: translate(6px, -10px) scale(1.05) rotate(-4deg); }
  100% { opacity: 0; transform: translate(28px, -24px) scale(0.8) rotate(10deg); }
}
@keyframes mrLChipWobble {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-2px); }
}
@keyframes mrLChipBreathe {
  0%, 100% {
    box-shadow: 0 8px 22px rgba(255, 94, 159, 0.45),
                0 2px 0 rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 14px 34px rgba(255, 94, 159, 0.7),
                0 2px 0 rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}
.mr-lc-bolt {
  font-size: 16px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
  animation: mrLCBolt 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}
.mr-lc-bolt.big { font-size: 20px; }
@keyframes mrLCBolt {
  from { transform: rotate(-8deg) scale(1); }
  to   { transform: rotate(8deg) scale(1.12); }
}
.mr-lc-label {
  letter-spacing: 1.5px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.mr-lc-mult {
  font-size: 15px; font-weight: 900;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.mr-lc-sec {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mr-lc-ring {
  flex-shrink: 0;
}

/* (Screen-edge frame removed — the countdown ring + breathing chip carries
   all the "time pressure" signaling. Keeping a single visual anchor avoids
   the "two lightning effects at once" problem.) */

/* Narrow screens: move chip slightly to not crash into score */
@media (max-width: 420px) {
  .mr-lightning-chip { top: 78px; right: 10px; }
  .mr-lc-label { font-size: 11px; letter-spacing: 1px; }
}

/* ============ TIER POPUP (redesigned — no keypad blockage) ============ */

/* 1. Screen-edge flash — dramatic multi-layer glow when combo tier jumps.
      Layer 1: thick colored border pulse
      Layer 2: deep inner glow (200-260px inward)
      Layer 3: 4 corner "light leak" radial gradients that bleed inward
      Layer 4: 2-beat pulse (tatse-tatse) for drama
*/
.mr-tier-flash {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: 0;
  animation: mrTierFlash 1.25s cubic-bezier(0.22, 1, 0.36, 1);
  background:
    /* 4 corner light leaks — each corner has a radial gradient that glows
       strongly at the corner and fades toward the center */
    radial-gradient(circle farthest-corner at 0% 0%,
      color-mix(in srgb, var(--tc) 55%, transparent) 0%,
      transparent 35%),
    radial-gradient(circle farthest-corner at 100% 0%,
      color-mix(in srgb, var(--tc) 55%, transparent) 0%,
      transparent 35%),
    radial-gradient(circle farthest-corner at 0% 100%,
      color-mix(in srgb, var(--tc) 55%, transparent) 0%,
      transparent 35%),
    radial-gradient(circle farthest-corner at 100% 100%,
      color-mix(in srgb, var(--tc) 55%, transparent) 0%,
      transparent 35%);
  box-shadow:
    inset 0 0 0 10px color-mix(in srgb, var(--tc) 90%, transparent),
    inset 0 0 220px color-mix(in srgb, var(--tc) 55%, transparent),
    inset 0 0 60px color-mix(in srgb, var(--tc) 35%, transparent);
}
/* Two-beat pulse with a strong hit, a softer second hit, then release */
@keyframes mrTierFlash {
  0%   { opacity: 0;    transform: scale(1); }
  12%  { opacity: 1;    transform: scale(1); }
  28%  { opacity: 0.55; }
  42%  { opacity: 0.95; transform: scale(1); }
  62%  { opacity: 0.7; }
  100% { opacity: 0;    transform: scale(1); }
}

/* 1b. Outer "vignette" pulse — a second layer that ADDS a bright radial burst
      centered on the question area. Feels like an explosion of color. */
.mr-tier-flash::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 38%,
    color-mix(in srgb, var(--tc) 25%, transparent) 0%,
    color-mix(in srgb, var(--tc) 8%, transparent) 30%,
    transparent 60%
  );
  mix-blend-mode: screen;
  animation: mrTierBurst 1.25s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
}
@keyframes mrTierBurst {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 1; transform: scale(1.1); }
  45%  { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* 2. Streak badge — slim pill, slides in from the right, docks top-center
      of the game stage. Positioned ABOVE the combo bar so it never hides
      the question, input, or numpad. */
.mr-tier-badge {
  position: fixed;
  top: 92px; left: 50%;
  z-index: 92;
  pointer-events: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tc) 95%, white) 0%,
    color-mix(in srgb, var(--tc) 75%, #FF8C61) 100%);
  border: 2.5px solid white;
  border-radius: 999px;
  box-shadow:
    0 10px 26px color-mix(in srgb, var(--tc) 55%, transparent),
    0 2px 0 rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.4);
  color: white;
  overflow: hidden;
  animation: mrTierBadge 1.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top center;
}
@keyframes mrTierBadge {
  0%   { opacity: 0; transform: translate(calc(-50% + 260px), -12px) rotate(14deg) scale(0.7); }
  18%  { opacity: 1; transform: translate(-50%, 6px) rotate(-5deg) scale(1.08); }
  30%  { transform: translate(-50%, -2px) rotate(3deg) scale(1); }
  42%  { transform: translate(-50%, 0) rotate(0deg) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, 0) rotate(0deg) scale(1); }
  90%  { opacity: 1; transform: translate(-50%, -6px) rotate(-4deg) scale(1.02); }
  100% { opacity: 0; transform: translate(calc(-50% - 40px), -28px) rotate(-14deg) scale(0.82); }
}
.mr-tb-emoji {
  font-size: 22px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  animation: mrTBEmoji 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mrTBEmoji {
  0%   { transform: scale(0) rotate(-200deg); }
  55%  { transform: scale(1.4) rotate(20deg); }
  100% { transform: scale(1) rotate(0); }
}
.mr-tb-text {
  display: inline-flex; flex-direction: column; line-height: 1;
  text-align: left;
}
.mr-tb-name {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 15px; letter-spacing: 1.5px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
.mr-tb-th {
  font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: 9px; letter-spacing: 0.5px;
  opacity: 0.85; margin-top: 2px;
}
.mr-tb-mult {
  font-family: 'Fredoka', sans-serif; font-weight: 900;
  font-size: 16px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  letter-spacing: 0.5px;
}
/* Shine — diagonal highlight sweeps across the badge once */
.mr-tb-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 35%,
    rgba(255,255,255,0.55) 50%,
    transparent 65%);
  animation: mrTBShine 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
@keyframes mrTBShine {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* 3. Corner confetti — bursts from top-right, out of keypad's way */
.mr-tier-corner {
  position: fixed;
  top: 88px; right: 28px;
  width: 2px; height: 2px;
  pointer-events: none;
  z-index: 91;
}
.mr-tc-piece {
  position: absolute; top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 2px;
  animation: mrTCBurst 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}
@keyframes mrTCBurst {
  0%   { opacity: 0; transform: translate(0,0) scale(0.3) rotate(0); }
  18%  { opacity: 1; transform: translate(calc(var(--dx)*0.25), calc(var(--dy)*0.25)) scale(1.1) rotate(80deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.6) rotate(380deg); }
}

/* ============ QUESTION MASCOT (bottom-right corner peeker, head-tilted) ============
   A Blob peeks from the BOTTOM-RIGHT corner of the question card with its
   head tilted ~-16°, like a curious companion leaning in to watch the
   player solve. Clip container matches the card's bottom-right corner
   radius (28px) so whatever part of the Blob reaches that corner is
   naturally clipped by a rounded curve — looks like the card edge
   is hiding part of the Blob.
   Structure:
     .mr-q-mascot    → absolute at bottom-right, overflow:hidden with
                        rounded bottom-right corner (hosts pseudo FX)
       .mr-qm-clip   → full-size wrapper (line-height 0 for clean layout)
         .mr-qm-float → head-tilt + subtle bob animation
           .mr-qm-pulse → scale-bump on reaction state change
             <Blob/>  */

.mr-q-mascot {
  position: absolute;
  bottom: 0;
  right: 0;
  /* Container sized to hold the Blob + accessory emoji after rotation.
     Wider than before so the accessory (at Blob's top-right) doesn't
     get clipped when Blob is tucked deep into the corner. */
  width: 156px;
  height: 148px;
  z-index: 4;
  pointer-events: none;
  /* overflow: visible — accessory + pseudo FX render freely. The ROUNDED
     card-corner clip is applied to .mr-qm-clip (the Blob body wrapper)
     only. */
}

.mr-qm-clip {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  line-height: 0;
  overflow: hidden;
  /* Only the BLOB body is clipped at the card's bottom-right corner.
     The accessory emoji is inside this clip too, but with the larger
     container size the accessory fits comfortably above the corner curve. */
  border-radius: 0 0 28px 0;
}

/* Float container — head tilt + gentle head-bob. Positioned DEEP into the
   bottom-right corner (bottom:-26 right:-28) so most of the Blob is hidden
   behind the card's corner curve — only the top-left of the head peeks
   out, like a mascot hiding around the corner to watch the player. */
.mr-qm-float {
  position: absolute;
  bottom: -26px;
  right: -22px;
  /* transform-origin near the Blob's bottom-right so rotation swings
     the accessory (top-right of Blob) INWARD toward the card interior,
     keeping it inside the clip bounds. */
  transform-origin: 88% 88%;
  animation: mrQMFloat 3.6s ease-in-out infinite;
  will-change: transform;
}
@keyframes mrQMFloat {
  0%, 100% { transform: rotate(-22deg) translateY(0); }
  50%      { transform: rotate(-16deg) translateY(-3px); }
}

/* Pulse wrapper — scale-bump on reaction state change (key-remount).
   Correct/Wrong additionally flash brightness+saturate so the color
   swap feels like a dynamic REACTION rather than a character change. */
.mr-qm-pulse {
  display: inline-block;
  line-height: 0;
  animation: mrQMPulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  will-change: transform, filter;
}
@keyframes mrQMPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.15); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* Correct flash — body briefly super-saturated + bright, then settles.
   Combined with the 0.22s fill transition to pink, reads as "WOW moment"
   rather than "became a different mascot". */
.mr-q-mascot.react-correct .mr-qm-pulse {
  animation:
    mrQMPulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    mrQMFlashBright 0.55s ease-out;
}
@keyframes mrQMFlashBright {
  0%   { filter: brightness(1.35) saturate(1.4); }
  50%  { filter: brightness(1.15) saturate(1.2); }
  100% { filter: brightness(1)    saturate(1); }
}

/* Wrong flash — body briefly desaturated + slightly dim, then recovers.
   Reads as "got stunned/dazed" without permanently changing color. */
.mr-q-mascot.react-wrong .mr-qm-pulse {
  animation:
    mrQMPulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    mrQMFlashDim 0.55s ease-out;
}
@keyframes mrQMFlashDim {
  0%   { filter: brightness(0.8) saturate(0.35); }
  50%  { filter: brightness(0.95) saturate(0.7); }
  100% { filter: brightness(1)   saturate(1); }
}

/* ---- ZONE TRANSFORM — simple smooth color morph ---- */

/* Smoothly transition the Blob body fill when React updates its color.
   The SVG path uses fill="#..." as an attribute but modern browsers
   transition SVG presentation attributes like `fill` via CSS.
   • Default (zone morph): 0.55s ease — slow graceful blend
   • Reactions (correct/wrong): 0.22s ease-out — quick "flash" feel so
     the swap doesn't feel like the mascot became a different character. */
.mr-q-mascot svg path,
.mr-q-mascot svg ellipse,
.mr-q-mascot svg circle {
  transition: fill 0.55s ease;
}
.mr-q-mascot.react-correct svg path,
.mr-q-mascot.react-correct svg ellipse,
.mr-q-mascot.react-correct svg circle,
.mr-q-mascot.react-wrong svg path,
.mr-q-mascot.react-wrong svg ellipse,
.mr-q-mascot.react-wrong svg circle {
  transition: fill 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* During transform: a gentle scale-breath — shrink slightly, bounce back.
   No rotation, no brightness flash. Just a soft acknowledgment that
   something's happening while the fill transition handles the color. */
.mr-q-mascot.transforming .mr-qm-pulse {
  animation: mrQMMorph 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes mrQMMorph {
  0%   { transform: scale(1);    }
  40%  { transform: scale(0.88); }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1);    }
}

/* Single halo ring expanding outward from the mascot — subtle signal
   that the morph is happening, then fades. */
.mr-qm-halo {
  position: absolute;
  /* Centered on the visible face area (bottom-right of 140x140 container) */
  bottom: 30px;
  right: 30px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2.5px solid var(--zc, #FF5E9F);
  transform: translate(50%, 50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  animation: mrQMHalo 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mrQMHalo {
  0%   { opacity: 0;    transform: translate(50%, 50%) scale(0.4); border-width: 3px; }
  30%  { opacity: 0.65; }
  100% { opacity: 0;    transform: translate(50%, 50%) scale(1.8); border-width: 0.5px; }
}

/* Reserve space in the question card so the math expression shifts a bit
   away from the mascot corner. Bottom padding adjusted so the mascot
   doesn't crowd the expression vertically either. */
.mr-question { padding: 44px 90px 44px 24px; }

/* ---- REACTION VARIANTS ---- */
/* Reactions render pseudo-element bursts from the top-left area of the
   mascot container — above the visible tilted face. Since the mascot is
   in the bottom-right corner, reactions float up-and-left into the card.
   These pseudo-elements live on .mr-q-mascot but need to ESCAPE the
   container's overflow:hidden, so they're emitted via a pseudo on the
   CARD (.mr-question::after) keyed off the mascot's react state. We use
   ::before on .mr-q-mascot for simplicity but position them in the visible
   top-left area (where the tilted head peeks out). */

/* Reaction FX positioned relative to the visible face area — the Blob
   sits in the bottom-right of the 140×140 container, so the face "top"
   is roughly around y=50, x=70 in container coords. FX float up-and-left
   from there into the empty upper area. */

/* Correct — hearts burst up-and-left from near the face */
.mr-q-mascot.react-correct::before,
.mr-q-mascot.react-correct::after {
  content: '♥';
  position: absolute;
  font-size: 18px;
  color: #FF5E9F;
  text-shadow: 0 2px 6px rgba(255, 94, 159, 0.5);
  pointer-events: none;
  animation: mrQMHeart 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  top: 50px;
  left: 64px;
}
.mr-q-mascot.react-correct::before { animation-delay: 0s; }
.mr-q-mascot.react-correct::after {
  font-size: 13px;
  animation-delay: 0.22s;
  top: 58px;
  left: 80px;
}
@keyframes mrQMHeart {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  25%  { opacity: 1; transform: translate(-10px, -24px) scale(1.2); }
  100% { opacity: 0; transform: translate(-22px, -54px) scale(0.7); }
}

/* Wrong — dizzy head wobble + stars orbiting above the head.
   Classic "seeing stars / bonked" cartoon feel: the head tilts back and
   forth dramatically while 2 small stars loop around the top of the head. */
.mr-q-mascot.react-wrong .mr-qm-float {
  animation: mrQMWrongWobble 0.95s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mrQMWrongWobble {
  0%   { transform: rotate(-18deg) translateY(0); }
  15%  { transform: rotate(-34deg) translateY(-2px); }
  35%  { transform: rotate(-4deg)  translateY(0); }
  55%  { transform: rotate(-28deg) translateY(-1px); }
  75%  { transform: rotate(-10deg) translateY(0); }
  100% { transform: rotate(-18deg) translateY(0); }
}

/* Two dizzy stars looping around above the head */
.mr-q-mascot.react-wrong::before,
.mr-q-mascot.react-wrong::after {
  content: '✦';
  position: absolute;
  /* Anchor the orbit center above the visible face area */
  top: 38px;
  right: 42px;
  font-size: 14px;
  color: #B8B8C9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  width: 14px;
  height: 14px;
}
.mr-q-mascot.react-wrong::before {
  animation: mrQMDizzyOrbit 0.95s linear;
}
.mr-q-mascot.react-wrong::after {
  content: '⭐';
  font-size: 10px;
  animation: mrQMDizzyOrbit 0.95s linear;
  animation-delay: -0.48s;  /* start 180° out of phase with ::before */
}
@keyframes mrQMDizzyOrbit {
  0%   { opacity: 0; transform: rotate(0)      translateX(14px) rotate(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(720deg) translateX(14px) rotate(-720deg); }
}

/* Lightning active — zap above the tilted head */
.mr-q-mascot.react-lightning::before {
  content: '⚡';
  position: absolute;
  top: 42px;
  left: 64px;
  font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(255, 210, 63, 0.9));
  animation: mrQMZapBolt 0.35s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
  pointer-events: none;
}
@keyframes mrQMZapBolt {
  0%   { opacity: 0.55; transform: rotate(-14deg) scale(0.9); }
  100% { opacity: 1;    transform: rotate(14deg)  scale(1.25); }
}

/* Inferno — sparkles orbit the visible head, staggered */
.mr-q-mascot.react-inferno::before,
.mr-q-mascot.react-inferno::after {
  content: '✨';
  position: absolute;
  font-size: 16px;
  color: #FFD23F;
  pointer-events: none;
  animation: mrQMSparkle 1.6s ease-in-out infinite;
}
.mr-q-mascot.react-inferno::before {
  top: 48px; left: 58px;
  animation-delay: 0s;
}
.mr-q-mascot.react-inferno::after {
  top: 74px; left: 92px;
  font-size: 12px;
  animation-delay: -0.8s;
}
@keyframes mrQMSparkle {
  0%, 100% { opacity: 0.4; transform: translateY(0) rotate(0) scale(0.85); }
  50%      { opacity: 1;   transform: translateY(-6px) rotate(180deg) scale(1.15); }
}

/* Narrow screens — scale the whole thing down proportionally */
@media (max-width: 420px) {
  .mr-q-mascot { width: 118px; height: 118px; }
  .mr-question { padding: 36px 82px 36px 20px; }
}

/* ============ ZONE AMBIENT (per-zone floating emojis in the BG) ============
   Eight emojis drift in the backdrop at low opacity. JS supplies a
   zone-specific emoji set so the "vibe" shifts as the player progresses.
   Per-zone modifier classes ALSO tweak drift behavior + BG pulse so each
   zone has its own feeling (calm → grooving → hot → electric → dramatic). */

.mr-zone-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.mr-amb-em {
  position: absolute;
  font-size: 28px;
  opacity: 0.14;
  filter: blur(0.3px);
  user-select: none;
  animation: mrAmbDrift 14s ease-in-out infinite;
  will-change: transform, opacity;
}
.mr-amb-em.amb1 { top: 10%; left: 8%;   font-size: 34px; animation-duration: 14s; }
.mr-amb-em.amb2 { top: 24%; left: 88%;  font-size: 24px; animation-duration: 16s; animation-delay: -3s; }
.mr-amb-em.amb3 { top: 46%; left: 4%;   font-size: 32px; animation-duration: 18s; animation-delay: -6s; }
.mr-amb-em.amb4 { top: 58%; left: 92%;  font-size: 26px; animation-duration: 15s; animation-delay: -2s; }
.mr-amb-em.amb5 { top: 82%; left: 12%;  font-size: 30px; animation-duration: 17s; animation-delay: -8s; }
.mr-amb-em.amb6 { top: 16%; left: 58%;  font-size: 22px; animation-duration: 19s; animation-delay: -4s; }
.mr-amb-em.amb7 { top: 74%; left: 74%;  font-size: 28px; animation-duration: 13s; animation-delay: -7s; }
.mr-amb-em.amb8 { top: 38%; left: 32%;  font-size: 24px; animation-duration: 16s; animation-delay: -1s; }
@keyframes mrAmbDrift {
  0%, 100% { transform: translate(0,0) rotate(-6deg); }
  50%      { transform: translate(22px, -32px) rotate(10deg); }
}

/* Fade ambient emojis in when the set swaps (we re-mount the layer via key) */
.mr-zone-ambient {
  animation: mrAmbFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mrAmbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------- PER-ZONE VIBES -------- */

/* Zone 1 — Warm-up: calm, cool, slow drift, very faint */
.mr-stage.zone-warmup .mr-amb-em {
  animation-duration: 20s;
  opacity: 0.11;
}

/* Zone 2 — Groove: sunny, emojis BOB up/down to an imagined beat */
.mr-stage.zone-groove .mr-amb-em {
  animation: mrAmbBob 3.6s ease-in-out infinite;
  opacity: 0.17;
}
.mr-stage.zone-groove .mr-amb-em.amb2 { animation-delay: -0.4s; }
.mr-stage.zone-groove .mr-amb-em.amb3 { animation-delay: -0.8s; }
.mr-stage.zone-groove .mr-amb-em.amb4 { animation-delay: -1.2s; }
.mr-stage.zone-groove .mr-amb-em.amb5 { animation-delay: -1.6s; }
.mr-stage.zone-groove .mr-amb-em.amb6 { animation-delay: -2.0s; }
.mr-stage.zone-groove .mr-amb-em.amb7 { animation-delay: -2.4s; }
.mr-stage.zone-groove .mr-amb-em.amb8 { animation-delay: -2.8s; }
@keyframes mrAmbBob {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-14px) rotate(7deg) scale(1.06); }
}

/* Zone 3 — Heat: flame flicker, emojis shimmer bigger + warmer pulse */
.mr-stage.zone-heat .mr-amb-em {
  animation: mrAmbFlicker 1s ease-in-out infinite alternate;
  opacity: 0.2;
}
@keyframes mrAmbFlicker {
  0%   { transform: translateY(0) scale(1) rotate(-4deg); opacity: 0.18; }
  100% { transform: translateY(-8px) scale(1.12) rotate(6deg); opacity: 0.32; }
}
/* Heat ambient pulse — subtle warm radial behind everything */
.mr-stage.zone-heat .mr-zone-ambient::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 60%,
    rgba(255, 140, 97, 0.18) 0%,
    transparent 70%);
  animation: mrZoneHeatPulse 2.6s ease-in-out infinite;
}
@keyframes mrZoneHeatPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.1); }
}

/* Zone 4 — Thunder: occasional lightning zap. Most of the time calm, then
   a quick flash across the BG every ~6s. */
.mr-stage.zone-thunder .mr-amb-em {
  animation: mrAmbZap 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  opacity: 0.16;
}
@keyframes mrAmbZap {
  0%, 90%, 100% { transform: translate(0, 0) rotate(-4deg); opacity: 0.14; }
  92%           { opacity: 0.7; transform: translate(4px, -8px) rotate(4deg) scale(1.15); }
  93%           { opacity: 0.2; }
  94%           { opacity: 0.7; transform: translate(-4px, -2px) rotate(8deg) scale(1.1); }
  95%           { opacity: 0.14; }
}
/* Thunder sky flash — the entire stage momentarily brightens */
.mr-stage.zone-thunder .mr-zone-ambient::after {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 20%,
    rgba(123, 97, 255, 0.18) 0%,
    transparent 60%);
  animation: mrZoneThunderFlash 6s steps(1, end) infinite;
  pointer-events: none;
}
@keyframes mrZoneThunderFlash {
  0%, 91%, 100% { opacity: 0.3; }
  92%           { opacity: 0.95; }
  93%           { opacity: 0.5; }
  94%           { opacity: 0.95; }
  95%           { opacity: 0.3; }
}

/* Zone 5 — Final Push: dramatic slow breathing, pink pulse, emojis grow */
.mr-stage.zone-final .mr-amb-em {
  animation: mrAmbBreathe 2.6s ease-in-out infinite;
  opacity: 0.2;
}
@keyframes mrAmbBreathe {
  0%, 100% { transform: scale(1) rotate(-4deg); opacity: 0.18; }
  50%      { transform: scale(1.2) rotate(6deg); opacity: 0.34; }
}
.mr-stage.zone-final .mr-zone-ambient::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    rgba(255, 94, 159, 0.15) 0%,
    transparent 65%);
  animation: mrZoneFinalPulse 2.6s ease-in-out infinite;
}
@keyframes mrZoneFinalPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.15); }
}

/* ============ INFERNO BG TINT ============ */
.mr-stage.inferno::after {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(circle at center, rgba(255,210,63,0.12), transparent 70%);
  pointer-events: none;
  animation: mrInfernoBg 1.3s ease-in-out infinite;
  z-index: 1;
}
@keyframes mrInfernoBg {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ============ INTRO SCREEN ============ */
.mr-intro {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 60px 24px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.mr-intro-emoji { font-size: 84px; animation: mrIntroBob 2s ease-in-out infinite; }
@keyframes mrIntroBob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-12px) rotate(8deg); }
}
.mr-intro-title {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 36px; color: #1A1A2E;
}
.mr-intro-sub {
  font-size: 14px; color: rgba(26,26,46,0.65); line-height: 1.5;
  max-width: 420px;
}
.mr-intro-rules {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin: 10px 0 18px;
}
.mr-intro-rules span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 999px;
  background: white; color: #1A1A2E;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 12px;
  border: 1.5px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.mr-start-btn {
  padding: 14px 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF5E9F, #FF8C61);
  color: white; border: none;
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 18px;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(255,94,159,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex; align-items: center; gap: 8px;
}
.mr-start-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 20px 40px rgba(255,94,159,0.5);
}

/* ============ RECAP SCREEN ============ */
.mr-recap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: flex; flex-direction: column;
  gap: 24px;
}
.mr-recap-confetti {
  position: absolute; inset: 0 0 auto 0;
  height: 320px;
  pointer-events: none;
  overflow: visible;
  display: flex; align-items: flex-start; justify-content: center;
}
.mr-recap-hero {
  position: relative;
  text-align: center;
  padding: 32px 20px;
  background: linear-gradient(135deg, #FFF4D0 0%, #FFDDE9 50%, #FFE4D1 100%);
  border: 3px solid rgba(255,210,63,0.4);
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(255,210,63,0.25), 0 8px 20px rgba(255,94,159,0.14);
  animation: mrRecapHeroIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mrRecapHeroIn {
  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); }
}
.mr-recap-label {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 11px; letter-spacing: 3px;
  color: #FF5E9F; margin-bottom: 6px;
  padding: 4px 12px; display: inline-block;
  background: white; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255,94,159,0.15);
}
.mr-recap-score {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 76px; line-height: 1;
  background: linear-gradient(135deg, #FF5E9F, #FF8C61);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mrRecapScoreIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
  filter: drop-shadow(0 8px 20px rgba(255,94,159,0.3));
}
@keyframes mrRecapScoreIn {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.mr-recap-score-label {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 16px;
  color: #6B6B85; margin-top: -4px;
}
.mr-recap-summary {
  margin-top: 10px;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14px;
  color: #1A1A2E;
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap; justify-content: center;
  padding: 6px 14px; border-radius: 999px;
  background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.mr-recap-summary .sep { color: rgba(0,0,0,0.3); }

.mr-recap-section {
  display: flex; flex-direction: column; gap: 10px;
}
.mr-recap-h {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 16px;
  color: #1A1A2E;
  padding-left: 4px;
}
.mr-recap-empty {
  padding: 24px; text-align: center; color: #6B6B85; font-size: 13px;
  background: white; border-radius: 20px; border: 1.5px dashed rgba(0,0,0,0.1);
}

.mr-moments {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.mr-moment {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 12px;
  align-items: center;
  padding: 10px 16px;
  background: white;
  border: 1.5px solid rgba(0,0,0,0.06);
  border-left: 4px solid var(--mc, #FF5E9F);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  animation: mrMomentIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mrMomentIn {
  0% { opacity: 0; transform: translateX(-20px) scale(0.95); }
  60% { opacity: 1; transform: translateX(2px) scale(1.01); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.mr-moment:hover { transform: translateX(4px); }
.mr-moment-icon {
  font-size: 22px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mc) 15%, white);
  border-radius: 12px;
}
.mr-moment-text {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 13px;
  color: #1A1A2E;
}
.mr-moment-time {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 11px;
  color: #6B6B85;
}

.mr-recap-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.mr-stat-card {
  padding: 14px 8px;
  background: white;
  border: 1.5px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mr-stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(255,94,159,0.15); }
.mr-stat-emoji { font-size: 24px; margin-bottom: 4px; }
.mr-stat-num {
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 18px;
  color: #1A1A2E;
}
.mr-stat-label { font-size: 10px; color: #6B6B85; font-weight: 600; }

.mr-recap-continue {
  margin: 6px auto 0;
  padding: 16px 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF5E9F, #FF8C61);
  color: white; border: none;
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 17px;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(255,94,159,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mr-recap-continue:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 20px 40px rgba(255,94,159,0.5);
}
@media (max-width: 480px) {
  .mr-recap-stats { grid-template-columns: repeat(2, 1fr); }
  .mr-recap-score { font-size: 64px; }
}

/* ============ OPPONENT RAIL (Phase 3) ============ */
.mr-rail {
  position: fixed;
  top: 14px; right: 14px;
  width: 220px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(26,26,46,0.06);
  border-radius: 20px;
  padding: 12px 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  z-index: 45;
}
.mr-rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 8px;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
  margin-bottom: 8px;
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 11px; letter-spacing: 2px; color: #FF5E9F;
}
.mr-rail-list { display: flex; flex-direction: column; gap: 6px; }
.mr-rail-peer {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px; align-items: center;
  padding: 8px 10px;
  background: white;
  border: 1.5px solid rgba(0,0,0,0.05);
  border-radius: 14px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s, background 0.3s;
}
.mr-rail-peer.me {
  background: linear-gradient(90deg, rgba(255,94,159,0.08), rgba(255,94,159,0.02));
  border-color: rgba(255,94,159,0.3);
}
.mr-rail-peer.tier-1 { box-shadow: 0 0 10px rgba(255,140,97,0.4); border-color: rgba(255,140,97,0.4); }
.mr-rail-peer.tier-2 { box-shadow: 0 0 16px rgba(255,94,159,0.5); border-color: rgba(255,94,159,0.5); }
.mr-rail-peer.tier-3 {
  box-shadow: 0 0 22px rgba(255,210,63,0.7);
  border-color: rgba(255,210,63,0.6);
  animation: mrRailInferno 1s ease-in-out infinite;
}
@keyframes mrRailInferno {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1px); }
}
.mr-rail-peer.finished {
  background: linear-gradient(90deg, rgba(46,199,107,0.1), rgba(46,199,107,0.02));
  border-color: rgba(46,199,107,0.4);
}
.mr-rail-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #4ECDC4;
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 14px;
  position: relative;
}
.mr-rail-avatar.wrong { animation: mrRailShake 0.35s ease-in-out; }
@keyframes mrRailShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.mr-rail-body { min-width: 0; }
.mr-rail-name {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 12px; color: #1A1A2E;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mr-rail-meta {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: 10px; color: #6B6B85;
  display: flex; align-items: center; gap: 4px;
}
.mr-rail-zone {
  padding: 1px 6px; border-radius: 999px;
  background: rgba(0,0,0,0.05);
  font-size: 10px; font-weight: 700;
}
.mr-rail-score {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 13px; color: #FF5E9F; text-align: right;
}
.mr-rail-tier-badge {
  position: absolute; top: -4px; right: -4px;
  font-size: 11px;
  animation: mrRailTierBounce 1.2s ease-in-out infinite;
}
@keyframes mrRailTierBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25) rotate(-8deg); }
}
.mr-rail-event-toast {
  position: absolute; right: 100%; top: 50%; transform: translateY(-50%) translateX(-8px);
  padding: 4px 10px; border-radius: 999px;
  background: var(--tc, #FF5E9F); color: white;
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 10px;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: mrRailToastFade 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mrRailToastFade {
  0% { opacity: 0; transform: translateY(-50%) translateX(6px); }
  15% { opacity: 1; transform: translateY(-50%) translateX(-8px); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) translateX(-16px); }
}

@media (max-width: 840px) {
  .mr-rail {
    top: auto; bottom: 10px; right: 10px; left: 10px;
    width: auto; max-height: 32vh;
  }
  .mr-rail-list { flex-direction: row; overflow-x: auto; gap: 8px; }
  .mr-rail-peer { min-width: 180px; flex-shrink: 0; }
}

/* ============ SPECTATOR MODE (Phase 3) ============ */
.mr-spectator {
  position: relative;
  min-height: 100vh;
  padding: 28px 20px 60px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 10%, #FFF4D0 0%, transparent 50%),
    radial-gradient(circle at 80% 85%, #FFDDE9 0%, transparent 50%),
    #FFF8F0;
}
.mr-spectator-head {
  font-family: 'Fredoka', sans-serif; font-weight: 800;
  font-size: 24px; color: #1A1A2E;
  margin-bottom: 6px;
}
.mr-spectator-sub { color: #6B6B85; font-size: 14px; margin-bottom: 24px; }
.mr-spectator-peers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; max-width: 960px; margin: 0 auto;
}
.mr-reaction-row {
  display: flex; justify-content: center; gap: 8px; margin-top: 16px;
  flex-wrap: wrap;
}
.mr-reaction-btn {
  padding: 10px 16px; border-radius: 999px;
  background: white; border: 1.5px solid rgba(0,0,0,0.08);
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.mr-reaction-btn:hover { transform: translateY(-3px) scale(1.08); border-color: rgba(255,94,159,0.4); }
.mr-reaction-btn:active { transform: translateY(0) scale(0.96); }

.mr-reaction-float {
  position: absolute; top: 50%; right: 10%;
  font-size: 26px; pointer-events: none;
  animation: mrReactionRise 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mrReactionRise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 1; transform: translateY(-12px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.8); }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .mr-stage, .mr-zone-chip, .mr-combo-fill, .mr-progress-cell, .mr-question,
  .mr-numkey, .mr-zone-stamp, .mr-zs-emoji, .mr-zs-shock, .mr-zs-spark, .mr-zs-label,
  .mr-tier-badge, .mr-tier-flash, .mr-tier-flash::after, .mr-tc-piece,
  .mr-lightning-chip, .mr-input-display, .mr-intro-emoji,
  .mr-q-expr .eq-q, .mr-combo-tag, .mr-combo.tier-3 .mr-combo-fill,
  .mr-combo-inferno-shine,
  .mr-tb-emoji, .mr-tb-shine, .mr-start-btn,
  .mr-amb-em, .mr-zone-ambient, .mr-zone-ambient::before, .mr-zone-ambient::after,
  .mr-q-mascot, .mr-qm-pulse, .mr-qm-float, .mr-qm-halo,
  .mr-stage.inferno::after, .mr-lc-bolt, .mr-particle {
    animation: none !important;
    transition: none !important;
  }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 480px) {
  .mr-q-expr { font-size: clamp(34px, 10vw, 48px); }
  .mr-input-display { font-size: 28px; min-height: 62px; padding: 16px 20px; }
  .mr-numkey { height: 56px; font-size: 22px; }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/games/set/set.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * SET — game-specific motion + card styling.
 * Side-effect imported from SetGame.tsx and the root layout's eager
 * CSS bundle so styles are present on first paint.
 */

:root {
  --set-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ──────── Card ──────── */

.set-card {
  position: relative;
  background: white;
  border: 3px solid rgba(26, 26, 46, 0.08);
  border-radius: 16px;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 220ms var(--set-bouncy),
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 160ms ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.set-card.is-small { border-radius: 12px; padding: 4px; }
.set-card:hover:not(:disabled) {
  transform: translateY(-3px) rotate(-0.5deg) scale(1.03);
  border-color: var(--card-accent, #FF5E9F);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--card-accent, #FF5E9F) 28%, transparent);
}
.set-card:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}
.set-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.set-card.is-selected {
  transform: translateY(-4px) scale(1.04);
  border-color: var(--card-accent, #FF5E9F);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream, #FFF8F0) 100%);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--card-accent, #FF5E9F) 35%, transparent),
    0 12px 26px color-mix(in srgb, var(--card-accent, #FF5E9F) 30%, transparent);
}
.set-card.is-selected::after {
  content: '✓';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--card-accent, #FF5E9F);
  color: white;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  animation: set-check-pop 380ms var(--set-bouncy) both;
}
@keyframes set-check-pop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Wrong claim shake */
.set-card.is-shake {
  animation: set-shake 480ms ease-in-out both;
  border-color: #E63980 !important;
  background: #FFE5EE;
}
@keyframes set-shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-6px) rotate(-1.4deg); }
  30%      { transform: translateX(6px) rotate(1.4deg); }
  45%      { transform: translateX(-4px) rotate(-1deg); }
  60%      { transform: translateX(4px) rotate(1deg); }
  80%      { transform: translateX(-2px); }
}

/* Correct flash + lift before the card flies away */
.set-card.is-correct {
  animation: set-correct-pulse 700ms ease both;
  border-color: #4ECDC4 !important;
}
@keyframes set-correct-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(78, 205, 196, 0.6); }
  40%  { transform: scale(1.12); box-shadow: 0 0 0 18px rgba(78, 205, 196, 0); }
  60%  { transform: scale(1.08) rotate(-2deg); }
  100% { transform: scale(0.85) translateY(-30px) rotate(8deg); opacity: 0; }
}

/* ──────── Board grid ──────── */

.set-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 248, 240, 0.7) 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
  border: 2px solid rgba(255, 94, 159, 0.18);
  border-radius: 22px;
  box-shadow: 0 8px 22px rgba(255, 94, 159, 0.1);
}
.set-board.has-extra { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 460px; }

@media (max-width: 480px) {
  .set-board { gap: 6px; padding: 8px; }
}

/* ──────── HUD ──────── */

.set-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto 10px;
}
.set-hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  background: white;
  border: 2px solid rgba(26, 26, 46, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.set-hud-chip .lbl { color: var(--muted, #6B6B85); font-size: 11px; }
.set-hud-chip .val { color: var(--dark, #1A1A2E); font-weight: 800; }
.set-hud-chip.is-time {
  background: linear-gradient(180deg, #FFF6D6 0%, #FFEFB8 100%);
  border-color: rgba(255, 210, 63, 0.6);
}
.set-hud-chip.is-time.is-low {
  background: linear-gradient(180deg, #FFE5EE 0%, #FFD4E3 100%);
  border-color: rgba(255, 94, 159, 0.6);
  animation: set-time-pulse 0.9s ease-in-out infinite;
}
@keyframes set-time-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.set-hud-chip.is-score {
  background: linear-gradient(180deg, #E0F8F5 0%, #C9F1EE 100%);
  border-color: rgba(78, 205, 196, 0.6);
}

/* ──────── Action bar ──────── */

.set-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin: 12px auto 0;
}
.set-claim-btn {
  flex: 1;
  padding: 14px 18px;
  border-radius: 100px;
  border: 2px solid transparent;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  background: linear-gradient(180deg, #FFA0B8 0%, #FF6F91 50%, #E6407A 100%);
  color: white;
  border-color: #C72F5E;
  box-shadow:
    0 8px 18px rgba(255, 94, 159, 0.55),
    inset 0 -3px 0 rgba(125, 20, 50, 0.2);
  transition: transform 220ms var(--set-bouncy), box-shadow 220ms ease, filter 200ms ease;
  letter-spacing: 0.4px;
}
.set-claim-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.05);
}
.set-claim-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
}
.set-claim-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.set-bump-btn {
  flex: 0 0 auto;
  padding: 14px 16px;
  border-radius: 100px;
  border: 2px solid rgba(123, 97, 255, 0.4);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 14px;
  background: #EAE3FF;
  color: #5A45CC;
  cursor: pointer;
  transition: transform 220ms var(--set-bouncy), background 160ms ease;
}
.set-bump-btn:hover:not(:disabled) {
  background: #DCD0FF;
  transform: translateY(-2px);
}
.set-bump-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ──────── Floating score popup ──────── */

.set-score-pop {
  position: absolute;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 24px;
  pointer-events: none;
  animation: set-pop 1100ms ease-out both;
  z-index: 10;
}
.set-score-pop.is-pos { color: #2BA39B; }
.set-score-pop.is-neg { color: #E63980; }
@keyframes set-pop {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -12px) scale(1.2); }
  60%  { opacity: 1; transform: translate(-50%, -50px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -90px) scale(0.9); }
}

/* ──────── Combo + sparkles ──────── */

.set-combo-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #FF8C61;
}
.set-combo-row .flame { animation: set-bob 1.1s ease-in-out infinite; }
@keyframes set-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-3px) rotate(4deg); }
}

/* ──────── Result-overlay sparkle burst ──────── */

.set-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.set-burst span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
  animation: set-fly 900ms ease-out forwards;
}
@keyframes set-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  20%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -80px)))
               scale(1) rotate(360deg);
  }
}

/* ──────── Reduced motion respect ──────── */

@media (prefers-reduced-motion: reduce) {
  .set-card, .set-claim-btn, .set-hud-chip { animation: none !important; transition: none !important; }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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[2].use[1]!../../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/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].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/font/google/target.css?{"path":"src/app/layout.tsx","import":"Fredoka","arguments":[{"subsets":["latin"],"weight":["400","500","600","700"],"variable":"--font-fredoka","display":"swap"}],"variableName":"fredoka"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/3e5302f118d6bde7-s.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/bb36247b0b027bd1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/bca7023bf625e650-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/3e5302f118d6bde7-s.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/bb36247b0b027bd1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/bca7023bf625e650-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/3e5302f118d6bde7-s.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/bb36247b0b027bd1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/bca7023bf625e650-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/3e5302f118d6bde7-s.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/bb36247b0b027bd1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/bca7023bf625e650-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Fredoka Fallback';src: local("Arial");ascent-override: 95.64%;descent-override: 23.17%;line-gap-override: 0.00%;size-adjust: 101.84%
}.__className_c621a5 {font-family: 'Fredoka', 'Fredoka Fallback';font-style: normal
}.__variable_c621a5 {--font-fredoka: 'Fredoka', 'Fredoka Fallback'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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[2].use[1]!../../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/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].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/font/google/target.css?{"path":"src/app/layout.tsx","import":"Nunito","arguments":[{"subsets":["latin"],"weight":["400","500","600","700","800"],"variable":"--font-nunito","display":"swap"}],"variableName":"nunito"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/abfec168c8990f67-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/3131c862d4942660-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6a9c36ea9dc9b36b-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e1694c6cb47c173f-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ee40bb094c99a29a-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/abfec168c8990f67-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/3131c862d4942660-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/6a9c36ea9dc9b36b-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e1694c6cb47c173f-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ee40bb094c99a29a-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/abfec168c8990f67-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/3131c862d4942660-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/6a9c36ea9dc9b36b-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/e1694c6cb47c173f-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/ee40bb094c99a29a-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/abfec168c8990f67-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/3131c862d4942660-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/6a9c36ea9dc9b36b-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/e1694c6cb47c173f-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/ee40bb094c99a29a-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/abfec168c8990f67-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/3131c862d4942660-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/6a9c36ea9dc9b36b-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/e1694c6cb47c173f-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/ee40bb094c99a29a-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Nunito Fallback';src: local("Arial");ascent-override: 99.71%;descent-override: 34.82%;line-gap-override: 0.00%;size-adjust: 101.39%
}.__className_ba5569 {font-family: 'Nunito', 'Nunito Fallback';font-style: normal
}.__variable_ba5569 {--font-nunito: 'Nunito', 'Nunito Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/games/memory-match/memory-match.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Memory Match v2 — all visual styles.
 * Palette + easing + patterns follow the Yumpa V2 design system.
 */

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

/* ============ STAGE (wraps the whole game) ============
   MESH GRADIENT — 4 overlapping corner radials on a soft linear base.
   No hard edges anywhere. Each radial covers >50% of the viewport so
   adjacent radials always blend where they meet. */
.mm-stage {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 16px 16px 40px;
  font-family: 'Nunito', sans-serif;
  background:
    radial-gradient(ellipse 80% 70% at 0% 0%,   color-mix(in srgb, var(--mm-yellow) 40%, white) 0%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 100% 0%, color-mix(in srgb, var(--mm-mint) 30%, white) 0%, transparent 60%),
    radial-gradient(ellipse 75% 65% at 0% 100%, color-mix(in srgb, var(--mm-coral) 30%, white) 0%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 100% 100%, color-mix(in srgb, var(--mm-pink) 35%, white) 0%, transparent 65%),
    linear-gradient(160deg, #FFF8EA 0%, #FFFBF0 100%);
  background-attachment: fixed;
  transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-x: hidden;
}
.mm-stage > * { position: relative; z-index: 2; }

/* ============ PRESSURE TINT (radial layer) ============ */
.mm-pressure-tint {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at center, var(--tint, transparent) 0%, transparent 70%);
  opacity: var(--tint-intensity, 0.5);
  transition: background 1.2s ease, opacity 1.2s ease;
}
.mm-pressure-tint.phase-panic {
  animation: mmPanicPulse 1.1s ease-in-out infinite;
}
@keyframes mmPanicPulse {
  0%, 100% { opacity: calc(var(--tint-intensity) * 0.8); }
  50%      { opacity: calc(var(--tint-intensity) * 1.1); }
}

/* (Intro screen handled by shared GameShell / GameIntro — no local intro CSS needed.) */

/* ============ TOP BAR — my avatar + stats in one playful panel ============ */
.mm-topbar {
  width: 100%; max-width: 560px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 8px 16px 8px 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 240, 0.88));
  backdrop-filter: blur(8px);
  border-radius: 20px;
  border: 1.5px solid rgba(26, 26, 46, 0.06);
  box-shadow: 0 6px 18px rgba(255, 94, 159, 0.1);
  align-items: center;
}
.mm-topbar-me {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(123, 97, 255, 0.2));
}
.mm-topbar-you {
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-coral));
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 8px;
  letter-spacing: 1px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(255, 94, 159, 0.4);
  pointer-events: none;
}
.mm-stat {
  font-family: 'Fredoka', sans-serif;
  color: var(--mm-dark);
  display: inline-flex; align-items: baseline; gap: 4px;
}
.mm-stat.center { justify-content: center; }
.mm-stat.right { justify-content: flex-end; }
.mm-stat b {
  font-weight: 800; font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.mm-stat.right b {
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mm-stat-label {
  font-weight: 600; font-size: 11px;
  color: var(--mm-muted);
  letter-spacing: 0.3px;
}

/* ============ CHAIN METER ============ */
.mm-chain {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: 6px;
}
.mm-chain-track {
  position: relative;
  width: 100%; height: 14px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  border: 1.5px solid rgba(26, 26, 46, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.mm-chain-fill {
  position: absolute; inset: 0 auto 0 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mm-mint), var(--mm-yellow));
  transition: width 0.35s var(--mm-bouncy), background 0.4s ease;
  overflow: hidden;
}
.mm-chain-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%);
  animation: mmChainShine 2.4s linear infinite;
}
@keyframes mmChainShine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(110%); }
}
.mm-chain.tier-1 .mm-chain-fill {
  background: linear-gradient(90deg, var(--mm-mint), #6EDDD5);
  box-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
}
.mm-chain.tier-2 .mm-chain-fill {
  background: linear-gradient(90deg, var(--mm-yellow), var(--mm-coral));
  box-shadow: 0 0 14px rgba(255, 210, 63, 0.6);
}
.mm-chain.tier-3 .mm-chain-fill {
  background: linear-gradient(90deg, var(--mm-pink), var(--mm-yellow), var(--mm-purple));
  background-size: 200% 100%;
  animation: mmPsychicFlow 2s linear infinite;
  box-shadow: 0 0 18px rgba(255, 94, 159, 0.7);
}
@keyframes mmPsychicFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.mm-chain-mark {
  position: absolute;
  top: 3px; bottom: 3px;
  width: 2px;
  background: rgba(26, 26, 46, 0.18);
  border-radius: 2px;
}
.mm-chain-tag {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; font-size: 11px;
  letter-spacing: 1px;
  color: white;
  animation: mmTagPop 0.45s var(--mm-bouncy);
}
.mm-chain.tier-1 .mm-chain-tag {
  background: linear-gradient(135deg, var(--mm-mint), #6EDDD5);
  box-shadow: 0 4px 10px rgba(78, 205, 196, 0.45);
}
.mm-chain.tier-2 .mm-chain-tag {
  background: linear-gradient(135deg, var(--mm-yellow), var(--mm-coral));
  box-shadow: 0 4px 10px rgba(255, 210, 63, 0.5);
  color: var(--mm-dark);
}
.mm-chain.tier-3 .mm-chain-tag {
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-purple));
  box-shadow: 0 6px 14px rgba(123, 97, 255, 0.55);
  animation: mmTagPop 0.45s var(--mm-bouncy), mmPsychicWobble 1.2s ease-in-out infinite 0.45s;
}
@keyframes mmTagPop {
  0%   { transform: scale(0.5) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes mmPsychicWobble {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.mm-chain-tag-emoji { font-size: 13px; }
.mm-chain-tag-mult { opacity: 0.9; font-weight: 700; }

/* ============ BOARD (4×4 grid) ============ */
.mm-board {
  width: 100%; max-width: 560px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  position: relative;
}

/* ============ SHUFFLE (FLIP slide — cards visibly swap positions) ============
   When displayCards are re-ordered, each card knows (--mm-dcol, --mm-drow)
   indicating how many GRID CELLS it came from (prev position minus new).
   We animate FROM the old position TO the new one — cards glide past each
   other in a clean theatrical swap.

   cell-step = (100% of card width) + (10px gap) = one grid cell over */
.mm-card {
  --mm-cell-step: calc(100% + 10px);
}
.mm-card[data-shuffle="gather"] {
  /* Brief flip-to-back moment before the slide — cards hide their face */
  animation: mmCardPrepare 0.28s ease-out forwards;
}
@keyframes mmCardPrepare {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.94); opacity: 0.85; }
}
.mm-card[data-shuffle="reform"] {
  /* Slide from old position (dCol, dRow cells away) back to current slot */
  animation: mmCardSlide 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--mm-idx, 0) * 12ms);
  z-index: 3;  /* raise during motion so cards glide ABOVE stationary ones */
}
@keyframes mmCardSlide {
  0% {
    transform:
      translate(
        calc(var(--mm-dcol, 0) * var(--mm-cell-step)),
        calc(var(--mm-drow, 0) * var(--mm-cell-step))
      )
      scale(0.94);
    opacity: 0.85;
  }
  65% {
    transform: translate(0, 0) scale(1.04);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* Disable interaction during shuffle */
.mm-board.shuffle-gather,
.mm-board.shuffle-reform { pointer-events: none; }

/* ============ CARD ============
   NOTE: no base `animation` property on .mm-card. Putting an entrance
   animation here would RE-FIRE every time data-shuffle is cleared (CSS
   animation restart on property change), producing a duplicate "spread
   out" effect after the shuffle slide. Entrance is handled by the peek
   overlay's dramatic countdown instead. */
.mm-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  perspective: 700px;
}
.mm-card:disabled { cursor: default; }
.mm-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--mm-bouncy);
}
.mm-card.is-flipped .mm-card-inner,
.mm-card.is-peeking .mm-card-inner {
  transform: rotateY(180deg);
}
.mm-card-back,
.mm-card-front {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08), 0 2px 0 rgba(0, 0, 0, 0.05);
}
.mm-card-back {
  background: linear-gradient(135deg, var(--mm-purple), var(--mm-pink));
  color: white;
  transition: box-shadow 0.25s, transform 0.2s var(--mm-bouncy);
}
.mm-card-back::before {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.2), transparent 45%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 6px, transparent 6px 12px);
  pointer-events: none;
}
.mm-card-back-q {
  font-family: 'Fredoka', sans-serif;
  font-weight: 900; font-size: 32px;
  opacity: 0.55;
  position: relative; z-index: 1;
}
.mm-card-front {
  background: white;
  transform: rotateY(180deg);
  border: 2px solid rgba(26, 26, 46, 0.06);
}
.mm-card-emoji {
  font-size: 36px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}
.mm-card:not(:disabled):hover .mm-card-back {
  transform: translateY(-3px);
  box-shadow: 0 10px 18px rgba(123, 97, 255, 0.25), 0 2px 0 rgba(0, 0, 0, 0.06);
}
.mm-card:active .mm-card-back { transform: translateY(1px); }

/* Peek state — while card is shown during 3s peek phase (blueish tint border) */
.mm-card.is-peeking .mm-card-front {
  border-color: rgba(123, 97, 255, 0.35);
  animation: mmPeekGlow 1s ease-in-out infinite alternate;
}
@keyframes mmPeekGlow {
  from { box-shadow: 0 6px 14px rgba(123, 97, 255, 0.25); }
  to   { box-shadow: 0 8px 20px rgba(123, 97, 255, 0.45); }
}

/* Matched — green aura + sparkle bounce */
.mm-card.is-matched .mm-card-front {
  background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
  border-color: rgba(46, 199, 107, 0.35);
  animation: mmMatchPop 0.5s var(--mm-bouncy);
}
@keyframes mmMatchPop {
  0%   { transform: rotateY(180deg) scale(1); }
  55%  { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(180deg) scale(1); }
}
.mm-card-match-spark {
  position: absolute;
  top: 4px; right: 6px;
  font-size: 13px;
  animation: mmMatchSparkle 1.2s ease-in-out infinite;
}
@keyframes mmMatchSparkle {
  0%, 100% { opacity: 0.5; transform: scale(0.9) rotate(0); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(15deg); }
}

/* Wrong flash — briefly red tint on mismatch */
.mm-card.is-wrong .mm-card-front {
  background: linear-gradient(135deg, #FFD6D6, #FFB8B8);
  border-color: rgba(220, 38, 38, 0.35);
  animation: mmWrongShake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes mmWrongShake {
  0%, 100% { transform: rotateY(180deg) translateX(0); }
  20%      { transform: rotateY(180deg) translateX(-4px); }
  40%      { transform: rotateY(180deg) translateX(5px); }
  60%      { transform: rotateY(180deg) translateX(-3px); }
  80%      { transform: rotateY(180deg) translateX(2px); }
}

/* Ghost trail — dim glow on cards previously flipped but now hidden.
   Opacity driven by --mm-ghost CSS variable (fresh=1, stale=0). */
.mm-card.is-ghost .mm-card-back {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--mm-mint) calc(45% * var(--mm-ghost, 1)), transparent),
    0 6px 14px rgba(0, 0, 0, 0.08);
}
.mm-card-ghost {
  position: absolute; inset: 10px;
  border-radius: 12px;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--mm-mint) calc(35% * var(--mm-ghost, 1)), transparent) 0%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: calc(0.4 + 0.5 * var(--mm-ghost, 1));
}

/* Golden pair indicator — uses box-shadow on .mm-card itself (instead of
   an inner overlay div) so it NEVER interferes with the 3D flip. The
   rotateY(180deg) happens inside .mm-card-inner and doesn't affect the
   button's own outlines. 💎 badge is a separate sibling outside the
   inner, rendered flat in 2D space. */
.mm-card.is-golden {
  /* outer yellow ring + soft outer glow */
  box-shadow:
    0 0 0 3px var(--mm-yellow),
    0 0 18px 2px rgba(255, 210, 63, 0.65),
    0 6px 14px rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  animation: mmGoldShimmer 1.6s ease-in-out infinite;
}
.mm-card.is-golden.is-matched {
  animation: mmGoldShimmer 1.6s ease-in-out infinite, mmGoldBurstShadow 0.8s var(--mm-bouncy) forwards;
}
@keyframes mmGoldShimmer {
  0%, 100% {
    box-shadow:
      0 0 0 3px var(--mm-yellow),
      0 0 18px 2px rgba(255, 210, 63, 0.6),
      0 6px 14px rgba(0, 0, 0, 0.08);
  }
  50% {
    box-shadow:
      0 0 0 3px var(--mm-coral),
      0 0 26px 4px rgba(255, 140, 97, 0.78),
      0 6px 14px rgba(0, 0, 0, 0.08);
  }
}
@keyframes mmGoldBurstShadow {
  0%   {
    box-shadow:
      0 0 0 3px var(--mm-yellow),
      0 0 20px 2px rgba(255, 210, 63, 0.7),
      0 6px 14px rgba(0, 0, 0, 0.08);
  }
  55% {
    box-shadow:
      0 0 0 6px var(--mm-yellow),
      0 0 44px 8px rgba(255, 210, 63, 0.9),
      0 6px 14px rgba(0, 0, 0, 0.08);
  }
  100% {
    box-shadow:
      0 0 0 2px var(--mm-yellow),
      0 0 10px 1px rgba(255, 210, 63, 0.2),
      0 6px 14px rgba(0, 0, 0, 0.08);
  }
}

/* 💎 gem badge — a tiny decoration at top-right. Lives as a direct child
   of .mm-card (outside .mm-card-inner), so it stays 2D and doesn't rotate
   with the flip. */
.mm-card-gem {
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 18px;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: mmGoldSpark 1.2s var(--mm-bouncy) infinite;
}
@keyframes mmGoldSpark {
  0%, 100% { transform: rotate(-12deg) scale(0.95); }
  50%      { transform: rotate(12deg) scale(1.15); }
}

/* ============ POWERUP AREA (Echo Peek button) ============ */
.mm-powerups {
  width: 100%; max-width: 560px;
  display: flex; justify-content: flex-end;
  padding: 0 4px;
}
.mm-echo-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px;
  border: 2px solid rgba(26, 26, 46, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 13px;
  color: var(--mm-muted);
  cursor: pointer;
  transition: transform 0.2s var(--mm-bouncy), box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.mm-echo-btn:disabled { cursor: default; opacity: 0.85; }
.mm-echo-btn.ready {
  color: white;
  background: linear-gradient(135deg, var(--mm-purple), var(--mm-pink));
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(123, 97, 255, 0.45);
  animation: mmEchoPulse 1.4s ease-in-out infinite;
}
.mm-echo-btn.ready:hover { transform: translateY(-2px) scale(1.04); }
.mm-echo-btn.ready:active { transform: translateY(1px) scale(0.98); }
.mm-echo-btn.firing {
  background: linear-gradient(135deg, var(--mm-yellow), var(--mm-coral));
  color: var(--mm-dark);
  animation: mmEchoFiring 0.4s var(--mm-bouncy);
}
@keyframes mmEchoPulse {
  0%, 100% { box-shadow: 0 10px 22px rgba(123, 97, 255, 0.4); }
  50%      { box-shadow: 0 14px 30px rgba(123, 97, 255, 0.7); }
}
@keyframes mmEchoFiring {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.mm-echo-icon { font-size: 16px; }
.mm-echo-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  font-weight: 800; font-size: 11px;
  color: white;
}
.mm-echo-glow {
  position: absolute; inset: -4px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(123, 97, 255, 0.4),
    rgba(255, 94, 159, 0.4));
  filter: blur(10px);
  z-index: -1;
  animation: mmEchoGlowPulse 2s ease-in-out infinite;
}
@keyframes mmEchoGlowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.08); }
}

/* When Echo Peek is revealing, add a shimmer wash across the stage */
.mm-stage.echo-revealing::before { animation-duration: 6s; opacity: 0.55; }
.mm-stage.echo-revealing .mm-board {
  animation: mmEchoReveal 0.8s ease;
}
@keyframes mmEchoReveal {
  0%   { filter: brightness(1); }
  25%  { filter: brightness(1.25) saturate(1.2); }
  100% { filter: brightness(1); }
}

/* ============ PEEK OVERLAY ============ */
.mm-peek-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(26, 26, 46, 0.12), rgba(26, 26, 46, 0.28));
  backdrop-filter: blur(1px);
  animation: mmPeekEnter 0.4s var(--mm-bouncy);
}
@keyframes mmPeekEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mm-peek-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 244, 208, 0.95));
  border-radius: 28px;
  padding: 22px 28px;
  border: 3px solid var(--mm-yellow);
  box-shadow: 0 20px 48px rgba(255, 210, 63, 0.5);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 240px;
}
.mm-peek-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; font-size: 22px;
  color: var(--mm-dark);
  letter-spacing: -0.3px;
}
.mm-peek-ring-wrap {
  position: relative;
  width: 110px; height: 110px;
  display: flex; align-items: center; justify-content: center;
}
.mm-peek-num {
  position: absolute;
  font-family: 'Fredoka', sans-serif;
  font-weight: 900; font-size: 48px;
  color: var(--mm-dark);
  animation: mmPeekNum 0.3s var(--mm-bouncy);
}
@keyframes mmPeekNum {
  0%   { transform: scale(1.4); opacity: 0; }
  60%  { transform: scale(0.94); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.mm-peek-sub {
  font-family: 'Nunito', sans-serif;
  font-weight: 700; font-size: 12px;
  color: var(--mm-muted);
  text-align: center;
}
.mm-peek-overlay.flashing .mm-peek-panel {
  animation: mmPeekGo 0.3s var(--mm-bouncy);
  background: linear-gradient(135deg, var(--mm-yellow), var(--mm-coral));
  border-color: white;
}
.mm-peek-overlay.flashing .mm-peek-title { color: white; }
@keyframes mmPeekGo {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ============ SHUFFLE OVERLAY (peek → playing transition) ============ */
.mm-shuffle-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 65;
  pointer-events: none;
  animation: mmShuffleBgEnter 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-shuffle-overlay.phase-gather {
  background: radial-gradient(circle at center,
    rgba(26, 26, 46, 0.22) 0%,
    rgba(26, 26, 46, 0.08) 50%,
    transparent 85%);
}
.mm-shuffle-overlay.phase-reform {
  background: radial-gradient(circle at center,
    rgba(255, 210, 63, 0.18) 0%,
    transparent 70%);
}
@keyframes mmShuffleBgEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mm-shuffle-core {
  position: relative;
  padding: 14px 30px;
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-coral));
  border-radius: 999px;
  border: 3px solid white;
  box-shadow: 0 20px 46px rgba(255, 94, 159, 0.55);
  animation: mmShuffleCorePop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mm-shuffle-overlay.phase-reform .mm-shuffle-core {
  background: linear-gradient(135deg, var(--mm-yellow), var(--mm-coral));
  animation: mmShuffleCorePop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), mmShuffleReformPulse 0.62s ease-out;
}
@keyframes mmShuffleCorePop {
  0%   { opacity: 0; transform: scale(0.5) rotate(-14deg); }
  60%  { opacity: 1; transform: scale(1.1) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes mmShuffleReformPulse {
  0%   { box-shadow: 0 20px 46px rgba(255, 210, 63, 0.55); }
  50%  { box-shadow: 0 28px 60px rgba(255, 210, 63, 0.9); }
  100% { box-shadow: 0 20px 46px rgba(255, 210, 63, 0.4); }
}
.mm-shuffle-label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: white;
  letter-spacing: -0.2px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

/* Sparkles orbit the center — burst outward on gather, spiral in on reform */
.mm-shuffle-sparks {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.mm-shuffle-spark {
  position: absolute;
  top: 0; left: 0;
  font-size: 22px;
  filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.85));
}
.mm-shuffle-overlay.phase-gather .mm-shuffle-spark {
  animation: mmShuffleSparkOut 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mm-shuffle-overlay.phase-reform .mm-shuffle-spark {
  animation: mmShuffleSparkIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mmShuffleSparkOut {
  0%   { opacity: 0; transform: rotate(var(--mm-spark-angle, 0deg)) translateX(0) rotate(calc(-1 * var(--mm-spark-angle, 0deg))) scale(0.3); }
  40%  { opacity: 1; transform: rotate(var(--mm-spark-angle, 0deg)) translateX(80px) rotate(calc(-1 * var(--mm-spark-angle, 0deg))) scale(1.2); }
  100% { opacity: 0; transform: rotate(var(--mm-spark-angle, 0deg)) translateX(160px) rotate(calc(-1 * var(--mm-spark-angle, 0deg))) scale(0.5); }
}
@keyframes mmShuffleSparkIn {
  0%   { opacity: 0; transform: rotate(var(--mm-spark-angle, 0deg)) translateX(180px) rotate(calc(-1 * var(--mm-spark-angle, 0deg))) scale(0.3); }
  40%  { opacity: 1; transform: rotate(var(--mm-spark-angle, 0deg)) translateX(70px) rotate(calc(-1 * var(--mm-spark-angle, 0deg))) scale(1.2); }
  100% { opacity: 0; transform: rotate(var(--mm-spark-angle, 0deg)) translateX(30px) rotate(calc(-1 * var(--mm-spark-angle, 0deg))) scale(0.4); }
}

/* ============ FINAL STRETCH OVERLAY ============ */
.mm-stretch-frame {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  box-shadow:
    inset 0 0 0 6px rgba(255, 94, 159, 0.4),
    inset 0 0 120px rgba(255, 94, 159, 0.2);
  animation: mmStretchFrame 1.1s ease-in-out infinite alternate;
}
@keyframes mmStretchFrame {
  from {
    box-shadow:
      inset 0 0 0 5px rgba(255, 94, 159, 0.3),
      inset 0 0 80px rgba(255, 94, 159, 0.15);
  }
  to {
    box-shadow:
      inset 0 0 0 8px rgba(255, 94, 159, 0.55),
      inset 0 0 180px rgba(255, 94, 159, 0.35);
  }
}
.mm-stretch-banner {
  position: fixed;
  top: 80px; left: 50%;
  transform: translateX(-50%);
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-coral));
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; font-size: 14px;
  border-radius: 999px;
  border: 2.5px solid white;
  box-shadow: 0 12px 26px rgba(255, 94, 159, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  z-index: 51;
  pointer-events: none;
  animation:
    mmStretchBannerIn 0.4s var(--mm-bouncy),
    mmStretchBannerBob 1.2s ease-in-out infinite 0.4s;
}
@keyframes mmStretchBannerIn {
  from { opacity: 0; transform: translate(-50%, -20px) scale(0.8); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes mmStretchBannerBob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -3px) scale(1.03); }
}

/* ============ ROUND PIPS (Round N/3 with dot progress) ============ */
.mm-round-pips {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fredoka', sans-serif;
  justify-self: center;
}
.mm-round-label {
  font-weight: 700;
  font-size: 11px;
  color: var(--mm-muted);
  letter-spacing: 0.5px;
}
.mm-round-dots {
  display: inline-flex;
  gap: 4px;
}
.mm-round-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(26, 26, 46, 0.12);
  transition: background 0.3s, transform 0.3s var(--mm-bouncy), box-shadow 0.3s;
}
.mm-round-dot.done {
  background: linear-gradient(135deg, var(--mm-mint), var(--mm-yellow));
  box-shadow: 0 2px 4px rgba(78, 205, 196, 0.4);
}
.mm-round-dot.active {
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-coral));
  box-shadow: 0 3px 8px rgba(255, 94, 159, 0.5);
  transform: scale(1.3);
  animation: mmRoundDotPulse 1.6s ease-in-out infinite;
}
@keyframes mmRoundDotPulse {
  0%, 100% { box-shadow: 0 3px 8px rgba(255, 94, 159, 0.5); }
  50%      { box-shadow: 0 4px 14px rgba(255, 94, 159, 0.8); }
}
.mm-round-n {
  font-weight: 700;
  font-size: 11px;
  color: var(--mm-muted);
  font-variant-numeric: tabular-nums;
}
.mm-round-n b {
  font-weight: 900;
  font-size: 13px;
  color: var(--mm-dark);
}

/* ============ GOLDEN LOST OVERLAY (missed the challenge) ============ */
.mm-gold-lost {
  position: fixed;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 109;
  pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  background: rgba(26, 26, 46, 0.78);
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  animation: mmGoldLost 1.5s ease-out forwards;
}
.mm-gold-lost-gem {
  font-size: 20px;
  filter: grayscale(0.8);
  opacity: 0.7;
}
@keyframes mmGoldLost {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(0.95); }
}

/* ============ GOLDEN GRAB OVERLAY (minimal celebratory pop) ============
   Non-blocking overlay (pointer-events: none) — game keeps playing
   underneath. Just a quick visual pat-on-the-back for the clutch match. */
.mm-grab-overlay {
  position: fixed; inset: 0;
  z-index: 110;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  animation: mmGrabFade 1.2s ease-in-out forwards;
}
@keyframes mmGrabFade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

.mm-grab-pop {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 244, 208, 0.95));
  border: 3px solid var(--mm-yellow);
  border-radius: 999px;
  box-shadow:
    0 18px 42px rgba(255, 210, 63, 0.5),
    0 0 60px rgba(255, 210, 63, 0.35);
  animation: mmGrabPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mmGrabPop {
  0%   { opacity: 0; transform: scale(0.5) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(1.1) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.mm-grab-gem {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
  animation: mmGrabGemShake 1s ease-in-out infinite;
}
.mm-grab-gem-r { animation-delay: -0.35s; }
@keyframes mmGrabGemShake {
  0%, 100% { transform: rotate(-14deg) scale(0.95); }
  50%      { transform: rotate(14deg) scale(1.15); }
}

.mm-grab-emoji {
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
  animation: mmGrabEmojiPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mmGrabEmojiPop {
  0%   { transform: scale(0) rotate(-140deg); }
  60%  { transform: scale(1.25) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

.mm-grab-points {
  font-family: 'Fredoka', sans-serif;
  font-weight: 900;
  font-size: 32px;
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  animation: mmGrabPointsRise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes mmGrabPointsRise {
  0%   { opacity: 0; transform: translateY(14px) scale(0.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sparkle dots — small colored pips that burst outward from center */
.mm-grab-spark {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  opacity: 0;
  animation: mmGrabSpark 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mmGrabSpark {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--mm-sa, 0)) translateX(0) scale(0.4); }
  25%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--mm-sa, 0)) translateX(calc(var(--mm-sd, 60px) * 0.5)) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--mm-sa, 0)) translateX(var(--mm-sd, 60px)) scale(0.5); }
}

/* ============ ROUND TRANSITION OVERLAY ============ */
.mm-round-transition {
  position: fixed; inset: 0;
  z-index: 105;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at center,
    rgba(78, 205, 196, 0.22) 0%,
    rgba(26, 26, 46, 0.35) 100%);
  pointer-events: none;
  animation: mmRTEnter 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mmRTEnter { from { opacity: 0; } to { opacity: 1; } }
.mm-rt-card {
  max-width: 380px;
  width: calc(100% - 32px);
  padding: 26px 28px;
  background: linear-gradient(135deg, white, rgba(255, 248, 240, 0.95));
  border-radius: 26px;
  border: 3px solid var(--mm-mint);
  box-shadow: 0 22px 50px rgba(78, 205, 196, 0.45);
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  animation: mmRTPop 0.48s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mmRTPop {
  0%   { opacity: 0; transform: scale(0.6) translateY(-20px); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.mm-rt-stars { display: inline-flex; gap: 6px; }
.mm-rt-star {
  font-size: 22px;
  opacity: 0.25;
  filter: grayscale(0.8);
  transition: all 0.4s var(--mm-bouncy);
}
.mm-rt-star.on {
  opacity: 1;
  filter: drop-shadow(0 2px 6px rgba(255, 210, 63, 0.7));
  color: var(--mm-yellow);
  animation: mmRTStarPop 0.5s var(--mm-bouncy);
}
@keyframes mmRTStarPop {
  0%   { transform: scale(0) rotate(-90deg); }
  60%  { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}
.mm-rt-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 900;
  font-size: 24px;
  color: var(--mm-dark);
  letter-spacing: -0.3px;
}
.mm-rt-scores {
  display: flex; gap: 10px;
}
.mm-rt-score-chip {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 16px;
  background: rgba(78, 205, 196, 0.12);
  border: 1.5px solid rgba(78, 205, 196, 0.3);
  border-radius: 14px;
  min-width: 82px;
}
.mm-rt-score-chip span {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: var(--mm-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.mm-rt-score-chip b {
  font-family: 'Fredoka', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--mm-mint);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.mm-rt-score-chip.main {
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-coral));
  border-color: transparent;
}
.mm-rt-score-chip.main span { color: white; opacity: 0.9; }
.mm-rt-score-chip.main b { color: white; font-size: 26px; }
.mm-rt-next {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--mm-muted);
}
.mm-rt-next b {
  color: var(--mm-pink);
  font-weight: 900;
  font-size: 16px;
}

/* ============ PEER RAIL (horizontal strip right under stats) ============
   Peers sit just under the stat bar — directly in the player's glance path
   up from the board. Horizontal scroll on narrow screens. */
.mm-peer-rail {
  width: 100%; max-width: 560px;
  display: flex; gap: 10px;
  padding: 4px 2px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
.mm-peer-rail::-webkit-scrollbar { display: none; }

/* ============ PEER CARD (new vertical layout) ============ */
.mm-peer {
  position: relative;
  flex-shrink: 0;
  min-width: 96px;
  max-width: 120px;
  padding: 30px 10px 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 248, 240, 0.9));
  backdrop-filter: blur(8px);
  border-radius: 18px;
  border: 2px solid rgba(26, 26, 46, 0.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transition: transform 0.28s var(--mm-bouncy), box-shadow 0.28s, border-color 0.28s;
  /* Cards tilt slightly for that Yumpa hand-made feel */
  transform: rotate(-1.5deg);
}
.mm-peer:nth-child(even) { transform: rotate(1.5deg); }
.mm-peer:hover {
  transform: rotate(0) translateY(-3px) scale(1.03);
  box-shadow: 0 12px 26px rgba(255, 94, 159, 0.2);
}
.mm-peer.disconnected { opacity: 0.55; filter: grayscale(0.7); }

/* Tier-based outer glow */
.mm-peer.tier-1 { box-shadow: 0 6px 18px rgba(78, 205, 196, 0.3); border-color: rgba(78, 205, 196, 0.3); }
.mm-peer.tier-2 { box-shadow: 0 6px 20px rgba(255, 210, 63, 0.4); border-color: rgba(255, 210, 63, 0.4); }
.mm-peer.tier-3 {
  box-shadow: 0 8px 24px rgba(255, 94, 159, 0.5);
  border-color: rgba(255, 94, 159, 0.55);
  animation: mmPeerPsychicGlow 1.4s ease-in-out infinite alternate;
}
@keyframes mmPeerPsychicGlow {
  from { box-shadow: 0 8px 24px rgba(255, 94, 159, 0.4); }
  to   { box-shadow: 0 14px 36px rgba(255, 94, 159, 0.75); }
}

/* Avatar + aura ring */
.mm-peer-avatar-wrap {
  position: relative;
  width: 60px; height: 60px;
  margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
}
.mm-peer-avatar {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
/* Aura ring — an absolutely positioned circle behind the Blob that changes color with tier */
.mm-peer-aura {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.mm-peer.tier-1 .mm-peer-aura {
  opacity: 0.85;
  background: radial-gradient(circle at center,
    rgba(78, 205, 196, 0.4) 0%,
    rgba(78, 205, 196, 0.1) 50%,
    transparent 75%);
  animation: mmPeerAuraBreathe 2s ease-in-out infinite;
}
.mm-peer.tier-2 .mm-peer-aura {
  opacity: 1;
  background: radial-gradient(circle at center,
    rgba(255, 210, 63, 0.55) 0%,
    rgba(255, 140, 97, 0.2) 55%,
    transparent 80%);
  animation: mmPeerAuraBreathe 1.6s ease-in-out infinite;
}
.mm-peer.tier-3 .mm-peer-aura {
  opacity: 1;
  background: conic-gradient(
    from 0deg,
    var(--mm-pink), var(--mm-yellow), var(--mm-purple), var(--mm-mint), var(--mm-pink));
  filter: blur(6px);
  animation: mmPeerAuraSpin 2.2s linear infinite;
}
@keyframes mmPeerAuraBreathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes mmPeerAuraSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.mm-peer-psychic-badge {
  position: absolute;
  top: -6px; right: -4px;
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(255, 94, 159, 0.6));
  animation: mmPsychicSparkle 0.8s var(--mm-bouncy) infinite alternate;
  z-index: 3;
}
@keyframes mmPsychicSparkle {
  from { transform: rotate(-14deg) scale(0.9); }
  to   { transform: rotate(14deg) scale(1.15); }
}

/* Name + pairs count */
.mm-peer-id {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
  margin-bottom: 6px;
  line-height: 1;
}
.mm-peer-name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 12px;
  color: var(--mm-dark);
  max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-peer-meta {
  display: inline-flex; align-items: center; gap: 5px;
}
.mm-peer-round {
  padding: 1px 6px;
  background: linear-gradient(135deg, var(--mm-mint), var(--mm-yellow));
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.3px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(78, 205, 196, 0.4);
}
.mm-peer-pairs {
  font-family: 'Fredoka', sans-serif;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.mm-peer-pairs b {
  font-weight: 800;
  font-size: 13px;
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mm-peer-pairs span {
  font-size: 10px;
  color: var(--mm-muted);
  font-weight: 700;
}

/* Progress pill */
.mm-peer-progress {
  position: relative;
  height: 5px;
  background: rgba(26, 26, 46, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.mm-peer-progress-fill {
  position: relative;
  height: 100%;
  background: linear-gradient(90deg, var(--mm-mint), var(--mm-yellow));
  border-radius: 999px;
  transition: width 0.35s var(--mm-bouncy);
  overflow: hidden;
}
.mm-peer-progress-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  animation: mmPeerShine 2.2s linear infinite;
}
@keyframes mmPeerShine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(120%); }
}

/* Mini 4×4 board */
.mm-peer-grid {
  display: grid;
  gap: 2px;
}
.mm-peer-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(26, 26, 46, 0.08);
  transition: background 0.3s ease, box-shadow 0.3s;
}
.mm-peer-cell.s1 { background: rgba(123, 97, 255, 0.45); }
.mm-peer-cell.s2 { background: #4ADE80; }
.mm-peer-cell.s3 {
  background: var(--mm-yellow);
  box-shadow: 0 0 4px rgba(255, 210, 63, 0.8);
  animation: mmPeerCellGold 1s ease-in-out infinite alternate;
}
@keyframes mmPeerCellGold {
  from { box-shadow: 0 0 4px rgba(255, 210, 63, 0.6); }
  to   { box-shadow: 0 0 10px rgba(255, 210, 63, 1); }
}

/* ============ PEER TOAST BUBBLE ============ */
.mm-peer-toast {
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-coral));
  color: white;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; font-size: 11px;
  letter-spacing: 0.3px;
  border-radius: 999px;
  border: 2px solid white;
  box-shadow: 0 6px 14px rgba(255, 94, 159, 0.45);
  white-space: nowrap;
  z-index: 5;
  animation: mmPeerToastIn 0.42s var(--mm-bouncy);
}
.mm-peer-toast-tail {
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: var(--mm-coral);
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: translateX(-50%) rotate(45deg);
}
@keyframes mmPeerToastIn {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  55%  { opacity: 1; transform: translate(-50%, -3px) scale(1.1); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ============ CHEER MASCOT (Yumpa Blob peeking from corner) ============ */
.mm-cheer {
  position: fixed;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  width: 120px; height: 120px;
  overflow: hidden;
  /* Match the card's bottom corner curve so Blob looks like it's tucked behind
     the stage edge rather than floating on top. */
  border-radius: 0 0 0 0;
}
.mm-cheer.side-left  { left: 0; border-radius: 0 28px 0 0; }
.mm-cheer.side-right { right: 0; border-radius: 28px 0 0 0; }

.mm-cheer-clip {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  display: block;
}
.mm-cheer-float {
  position: absolute;
  bottom: -16px;
  animation: mmCheerBob 4s ease-in-out infinite;
  transform-origin: 60% 70%;
}
.mm-cheer.side-left .mm-cheer-float {
  left: -12px;
}
.mm-cheer.side-right .mm-cheer-float {
  right: -12px;
  transform: scaleX(-1);
}
@keyframes mmCheerBob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-5px) rotate(6deg); }
}
.mm-cheer.side-right .mm-cheer-float {
  animation-name: mmCheerBobRight;
}
@keyframes mmCheerBobRight {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(6deg); }
  50%      { transform: scaleX(-1) translateY(-5px) rotate(-6deg); }
}
.mm-cheer-pulse {
  display: inline-block;
  animation: mmCheerPulse 0.45s var(--mm-bouncy);
}
@keyframes mmCheerPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Cheer reactions */
.mm-cheer.react-correct .mm-cheer-pulse {
  animation: mmCheerPulse 0.45s var(--mm-bouncy), mmCheerJoy 0.8s ease-out;
}
@keyframes mmCheerJoy {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.25) saturate(1.3); }
  100% { filter: brightness(1); }
}
.mm-cheer.react-correct::before {
  content: '♥';
  position: absolute;
  top: 30px; left: 40px;
  font-size: 18px;
  color: var(--mm-pink);
  text-shadow: 0 2px 6px rgba(255, 94, 159, 0.5);
  animation: mmCheerHeart 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mmCheerHeart {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25%  { opacity: 1; transform: translate(-6px, -20px) scale(1.2); }
  100% { opacity: 0; transform: translate(-16px, -44px) scale(0.8); }
}

.mm-cheer.react-wrong .mm-cheer-pulse {
  animation: mmCheerShake 0.4s ease-in-out;
}
@keyframes mmCheerShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.mm-cheer.react-final .mm-cheer-float {
  animation: mmCheerBob 0.7s ease-in-out infinite;
}
.mm-cheer.react-final .mm-cheer-pulse {
  animation: mmCheerPulse 0.25s var(--mm-bouncy) infinite;
}

.mm-cheer.react-psychic::before,
.mm-cheer.react-psychic::after {
  content: '✨';
  position: absolute;
  font-size: 14px;
  color: var(--mm-yellow);
  animation: mmCheerOrbit 2s ease-in-out infinite;
}
.mm-cheer.react-psychic::before { top: 22px; left: 50px; animation-delay: 0s; }
.mm-cheer.react-psychic::after  { top: 48px; left: 72px; animation-delay: -1s; font-size: 11px; }
@keyframes mmCheerOrbit {
  0%, 100% { opacity: 0.5; transform: translateY(0) rotate(0) scale(0.9); }
  50%      { opacity: 1;   transform: translateY(-6px) rotate(180deg) scale(1.15); }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 480px) {
  .mm-board { gap: 8px; }
  .mm-card-emoji { font-size: 30px; }
  .mm-peer { min-width: 88px; padding: 26px 8px 8px; }
  .mm-peer-avatar-wrap { width: 54px; height: 54px; }
  .mm-topbar { grid-template-columns: auto 1fr 1fr 1fr; gap: 10px; padding: 6px 12px 6px 8px; }
  .mm-cheer { width: 92px; height: 92px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .mm-card, .mm-card-inner, .mm-stage,
  .mm-chain-fill, .mm-chain-shine, .mm-chain-tag, .mm-card-gold, .mm-card-gold::before,
  .mm-card-match-spark, .mm-card.is-wrong .mm-card-front,
  .mm-echo-btn, .mm-echo-glow, .mm-peek-panel, .mm-peek-num,
  .mm-stretch-frame, .mm-stretch-banner,
  .mm-peer, .mm-peer-aura, .mm-peer-progress-shine, .mm-peer-cell.s3,
  .mm-peer-psychic-badge, .mm-peer-toast,
  .mm-cheer-float, .mm-cheer-pulse,
  .mm-pressure-tint.phase-panic {
    animation: none !important;
    transition: none !important;
  }
}

/* ======================================================================
   PLAY AREA — board + race layout (same on every device).

   Same universal design at ALL viewport sizes:
     - Board stays centered, full available width.
     - Below the board sits a minimal horizontal peer strip:
         avatar · 3 round-progress dots · "5/8" pairs.
     - On wider screens the strip widens (max 560px) but layout stays same.

   Kept universal per user request — no separate desktop branch.
   ====================================================================== */
.mm-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 900px;
}

/* The race strip itself — same anatomy everywhere, just wider on desktop */
.mm-play .mm-race {
  width: 100%;
  max-width: 560px;          /* caps growth on wide screens */
  margin: 8px auto 0;
  padding: 10px 8px 12px;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,248,240,0.9));
  box-shadow: 0 4px 16px rgba(123,97,255,0.12);
}
/* Dashed divider between board and the strip */
.mm-play .mm-race::before {
  content: '';
  position: absolute;
  top: -12px; left: 22%; right: 22%;
  border-top: 2px dashed rgba(123,97,255,0.18);
}
.mm-play .mm-race .mm-race-head {
  padding: 0 4px 8px; margin-bottom: 6px;
  border-bottom: 1px dashed rgba(26,26,46,0.08);
}

/* Horizontal list of players (left → right by rank) */
.mm-play .mm-race-list {
  flex-direction: row !important;
  justify-content: space-around;
  align-items: flex-start;
  gap: 4px;
  padding: 4px 2px 2px;
}

/* Each player becomes a compact vertical mini-card */
.mm-play .mm-race-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 12px;
  animation: none !important;
  grid-template-columns: none;
  /* Smooth slide transition when rank order changes (FLIP target) */
  transition: transform 0.55s var(--mm-bouncy), box-shadow 0.25s ease;
  will-change: transform;
}
/* Kill all the row backgrounds/glows — too busy for a strip */
.mm-play .mm-race-row.is-me,
.mm-play .mm-race-row.is-done,
.mm-play .mm-race-row.tier-1,
.mm-play .mm-race-row.tier-2,
.mm-play .mm-race-row.tier-3 {
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}
.mm-play .mm-race-row.is-me {
  background: rgba(255,94,159,0.08) !important;
}

/* Rank badge: small corner bubble top-left of card */
.mm-play .mm-race-rank {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-22px, -2px);
  width: 16px; height: 16px;
  font-size: 9px;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(255,140,97,0.4);
}
.mm-play .mm-race-row.is-done .mm-race-rank {
  position: absolute; top: 0; left: 50%;
  transform: translate(-24px, -4px);
  font-size: 16px;
}

/* Avatar */
.mm-play .mm-race-ava { width: 44px; height: 44px; }
.mm-play .mm-race-row.is-me .mm-race-ava {
  outline: 2.5px solid var(--mm-pink);
  outline-offset: 1px;
  border-radius: 50%;
}
.mm-play .mm-race-row.is-done .mm-race-ava {
  outline: 2.5px solid var(--mm-yellow);
  outline-offset: 1px;
  border-radius: 50%;
}

/* Middle column: just the dots (name hidden) */
.mm-play .mm-race-mid { flex-direction: column; align-items: center; gap: 3px; }
.mm-play .mm-race-name-row { display: none; }

/* Round pills → round DOTS */
.mm-play .mm-race-pills { gap: 4px; }
.mm-play .mm-race-pill {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  padding: 0;
  background: rgba(123,97,255,0.14);
  overflow: visible;
}
.mm-play .mm-race-pill .mm-race-pill-n,
.mm-play .mm-race-pill .mm-race-pill-fill { display: none; }
.mm-play .mm-race-pill.done {
  background: linear-gradient(135deg, var(--mm-mint), #32b5aa);
  box-shadow: 0 1px 3px rgba(78,205,196,0.55);
}
.mm-play .mm-race-pill.active {
  background: var(--mm-yellow);
  box-shadow: 0 0 0 2px rgba(255,210,63,0.35);
  animation: racePillDotPulse 1.3s var(--mm-bouncy) infinite;
}
@keyframes racePillDotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

/* Pairs counter below dots */
.mm-play .mm-race-score {
  text-align: center;
  min-width: 0;
}
.mm-play .mm-race-score b {
  font-size: 13px;
  font-weight: 800;
  color: var(--mm-pink);
  line-height: 1;
}
.mm-play .mm-race-of {
  font-size: 9px;
  color: var(--mm-muted);
  font-weight: 600;
  margin-left: 1px;
}
.mm-play .mm-race-score > span { display: none; }
.mm-play .mm-race-bar { display: none; }

/* ======================================================================
   RACE TRACK — compact live leaderboard (replaces old OpponentMiniBoard).
   ====================================================================== */
.mm-race {
  width: 100%;
  max-width: 420px;
  margin: 0 auto 6px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  border-radius: 22px;
  box-shadow:
    0 8px 22px rgba(123,97,255,0.12),
    0 2px 6px rgba(255,94,159,0.08);
  backdrop-filter: blur(6px);
  font-family: 'Fredoka', sans-serif;
  /* Default flex order — follows the board on mobile (board first, race second). */
}
.mm-race-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 2px 8px;
  border-bottom: 1.5px dashed rgba(26,26,46,0.08);
  margin-bottom: 8px;
}
.mm-race-flag { font-size: 16px; animation: flagWave 1.8s var(--mm-bouncy) infinite; }
@keyframes flagWave {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(8deg); }
}
.mm-race-title {
  font-weight: 700; font-size: 13px;
  color: var(--mm-dark); letter-spacing: 0.2px;
}
.mm-race-count {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--mm-purple), var(--mm-pink));
  padding: 3px 9px; border-radius: 999px;
}
.mm-race-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}

.mm-race-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px 42px 1fr auto;
  align-items: center; gap: 8px;
  padding: 7px 10px 7px 6px;
  background: white; border-radius: 18px;
  box-shadow: 0 2px 8px rgba(26,26,46,0.06);
  /* FLIP animation — the component inverts the transform synchronously,
     then clears it so the row SPRINGS to its new slot with bouncy ease.
     Keep the duration generous (0.55s) so the "overtake" moment feels
     like a real event, not a quick jump. */
  transition: transform 0.55s var(--mm-bouncy), box-shadow 0.25s ease;
  will-change: transform;
}
.mm-race-row:hover { transform: translateY(-1px) rotate(-0.3deg); }

/* Halo flash after a rank swap — colored glow around the mini-card.
   'up'   = player just climbed (pink+yellow sparkle halo, pop scale)
   'down' = player just got overtaken (muted purple, mild desaturate)
   Both use the horizontal strip anatomy (column-stacked mini-card).
   Works in tandem with the FLIP translate(x,y) transition so the
   viewer sees a clear PAIR swap: one card glides toward a better
   slot while the halo celebrates. */
.mm-race-row.just-moved-up {
  animation: raceSwapUp 0.9s var(--mm-bouncy);
  z-index: 3;
}
.mm-race-row.just-moved-down {
  animation: raceSwapDown 0.9s var(--mm-bouncy);
  z-index: 2;
}
@keyframes raceSwapUp {
  0%   { box-shadow: none; }
  25%  {
    box-shadow:
      0 0 0 3px rgba(255,94,159,0.55),
      0 0 18px rgba(255,210,63,0.55),
      inset 0 0 0 1.5px rgba(255,255,255,0.9);
  }
  60%  {
    box-shadow:
      0 0 0 2px rgba(255,94,159,0.25),
      0 0 12px rgba(255,210,63,0.25);
  }
  100% { box-shadow: none; }
}
@keyframes raceSwapDown {
  0%   { box-shadow: none; }
  30%  {
    box-shadow:
      0 0 0 2px rgba(123,97,255,0.35),
      inset 0 0 0 1.5px rgba(123,97,255,0.25);
    filter: saturate(0.85);
  }
  100% { box-shadow: none; filter: none; }
}

/* Sparkle burst above the avatar when a player climbs ranks */
.mm-race-row.just-moved-up::after {
  content: '✨';
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -8px) scale(0);
  font-size: 14px;
  animation: raceClimbSpark 0.9s var(--mm-bouncy);
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 1px 3px rgba(255,94,159,0.5));
}
@keyframes raceClimbSpark {
  0%   { transform: translate(-50%, 0) scale(0); opacity: 0; }
  30%  { transform: translate(-50%, -18px) scale(1.4); opacity: 1; }
  70%  { transform: translate(-50%, -28px) scale(1);   opacity: 0.8; }
  100% { transform: translate(-50%, -38px) scale(0.6); opacity: 0; }
}
.mm-race-row.is-me {
  background: linear-gradient(135deg, #FFFBE4, #FFEEF5);
  box-shadow:
    0 3px 10px rgba(255,94,159,0.18),
    inset 0 0 0 2px rgba(255,94,159,0.35);
}
.mm-race-row.is-off { opacity: 0.4; filter: grayscale(0.3); }
.mm-race-row.is-done {
  background: linear-gradient(135deg, #FFF5D0, #FFE8C4);
  box-shadow:
    0 3px 14px rgba(255,210,63,0.35),
    inset 0 0 0 2px rgba(255,210,63,0.55);
}
.mm-race-row.tier-1 { box-shadow: 0 2px 10px rgba(78,205,196,0.22), inset 0 0 0 1.5px rgba(78,205,196,0.35); }
.mm-race-row.tier-2 { box-shadow: 0 2px 14px rgba(123,97,255,0.28), inset 0 0 0 1.5px rgba(123,97,255,0.45); }
.mm-race-row.tier-3 {
  box-shadow: 0 3px 18px rgba(255,94,159,0.38), inset 0 0 0 2px rgba(255,94,159,0.5);
  animation: raceTier3Pulse 1.6s var(--mm-bouncy) infinite;
}
@keyframes raceTier3Pulse {
  0%, 100% { box-shadow: 0 3px 18px rgba(255,94,159,0.38), inset 0 0 0 2px rgba(255,94,159,0.5); }
  50%     { box-shadow: 0 3px 24px rgba(255,94,159,0.55), inset 0 0 0 2.5px rgba(255,94,159,0.7); }
}

.mm-race-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  background: linear-gradient(135deg, var(--mm-yellow), var(--mm-coral));
  color: var(--mm-dark);
  font-weight: 800; font-size: 12px; line-height: 1;
  box-shadow: 0 2px 5px rgba(255,140,97,0.3);
}
.mm-race-row.is-done .mm-race-rank {
  background: none; box-shadow: none; font-size: 18px;
}

.mm-race-ava {
  position: relative;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-race-tier {
  position: absolute;
  top: -4px; right: -4px;
  font-size: 13px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  animation: raceTierPop 0.45s var(--mm-bouncy);
}
@keyframes raceTierPop {
  0% { transform: scale(0); }
  80% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.mm-race-mid {
  display: flex; flex-direction: column;
  gap: 4px; min-width: 0;
}
.mm-race-name-row {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
}
.mm-race-name {
  font-weight: 700; font-size: 13px; color: var(--mm-dark);
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  max-width: 120px;
}
.mm-race-you {
  font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 999px;
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-coral));
  color: white; letter-spacing: 0.6px; margin-left: 4px;
  box-shadow: 0 1px 3px rgba(255,94,159,0.4);
}
.mm-race-check {
  color: #0aa66e; font-weight: 800; font-size: 14px;
  margin-left: auto;
}

.mm-race-pills { display: flex; gap: 4px; }
.mm-race-pill {
  position: relative;
  width: 28px; height: 12px;
  border-radius: 7px;
  background: rgba(26,26,46,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: background 0.2s ease;
}
.mm-race-pill-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--mm-mint), var(--mm-yellow));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--mm-bouncy);
  border-radius: 7px;
}
.mm-race-pill-n {
  position: relative;
  font-size: 9px; font-weight: 800;
  color: rgba(26,26,46,0.45);
  transition: color 0.2s ease;
}
.mm-race-pill.active .mm-race-pill-fill {
  transform: scaleX(calc(var(--mm-race-fill, 0%) / 100%));
}
.mm-race-pill.active { background: rgba(78,205,196,0.15); }
.mm-race-pill.active .mm-race-pill-n { color: var(--mm-dark); }
.mm-race-pill.done {
  background: linear-gradient(90deg, var(--mm-mint), var(--mm-yellow));
}
.mm-race-pill.done .mm-race-pill-fill { transform: scaleX(1); }
.mm-race-pill.done .mm-race-pill-n { color: white; }

.mm-race-score {
  position: relative; text-align: right; min-width: 60px;
}
.mm-race-score b {
  display: block;
  font-size: 17px; font-weight: 800;
  color: var(--mm-pink);
  line-height: 1;
  font-family: 'Fredoka', sans-serif;
}
/* Muted "/8" suffix after the main pairs count */
.mm-race-of {
  font-size: 11px;
  color: var(--mm-muted);
  font-weight: 700;
  margin-left: 1px;
  letter-spacing: 0;
}
.mm-race-score > span {
  font-size: 9px; color: var(--mm-muted);
  font-weight: 600; letter-spacing: 0.5px;
}
/* Finished rows get a green-mint accent on the number */
.mm-race-row.is-done .mm-race-score b { color: #0aa66e; }
.mm-race-row.is-done .mm-race-of { color: #0aa66e; opacity: 0.7; }
.mm-race-bar {
  display: block; margin-top: 4px;
  height: 3px; width: 50px; border-radius: 3px;
  background: rgba(26,26,46,0.08);
  overflow: hidden; position: relative;
}
.mm-race-bar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--mm-pink), var(--mm-yellow));
  transform-origin: left;
  transform: scaleX(calc(var(--mm-race-bar, 0%) / 100%));
  transition: transform 0.4s var(--mm-bouncy);
}

.mm-race-toast {
  position: absolute;
  top: -22px; right: 12px;
  background: var(--mm-dark); color: white;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  white-space: nowrap;
  animation: raceToastIn 0.25s var(--mm-bouncy);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 4; pointer-events: none;
}
@keyframes raceToastIn {
  0% { transform: translateY(6px) scale(0.6); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.mm-race-toast::after {
  content: '';
  position: absolute;
  bottom: -4px; right: 14px;
  width: 8px; height: 8px;
  background: var(--mm-dark);
  transform: rotate(45deg);
}

/* RoundTransition — MP speed callout */
.mm-rt-speed {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px;
  padding: 7px 14px 7px 10px;
  background: linear-gradient(135deg, #FFF4D0, #FFD4E4);
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 13px;
  color: var(--mm-dark);
  box-shadow: 0 3px 10px rgba(255,210,63,0.35);
  animation: rtSpeedPop 0.45s var(--mm-bouncy) 0.2s backwards;
}
@keyframes rtSpeedPop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  70%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}
.mm-rt-speed-ico { font-size: 16px; }
.mm-rt-speed-bonus {
  background: white;
  padding: 2px 8px; border-radius: 999px;
  color: var(--mm-pink); font-weight: 800;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Waiting for peers card */
.mm-wait {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  top: 90px;
  z-index: 30;
  pointer-events: none;
  animation: waitIn 0.4s var(--mm-bouncy);
}
@keyframes waitIn {
  0% { transform: translate(-50%, -14px) scale(0.9); opacity: 0; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
.mm-wait-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 12px;
  background: linear-gradient(135deg, #FFF7CC, #FFE1E9);
  border-radius: 22px;
  box-shadow:
    0 10px 26px rgba(255,94,159,0.25),
    0 3px 8px rgba(255,210,63,0.3);
  font-family: 'Fredoka', sans-serif;
  transform: rotate(-1deg);
}
.mm-wait-me { position: relative; }
.mm-wait-badge {
  position: absolute;
  top: -6px; right: -6px;
  font-size: 20px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  animation: waitFlag 1.4s var(--mm-bouncy) infinite;
}
@keyframes waitFlag {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(14deg); }
}
.mm-wait-txt { min-width: 0; }
.mm-wait-h {
  font-weight: 800; font-size: 16px;
  color: var(--mm-dark); line-height: 1.1;
}
.mm-wait-s {
  font-family: 'Nunito', sans-serif;
  font-size: 12px; color: var(--mm-muted);
  margin-top: 2px;
}
.mm-wait-s b { color: var(--mm-pink); font-size: 14px; }
.mm-wait-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: white;
  font-size: 11px; font-weight: 700;
  color: var(--mm-dark);
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.mm-wait-chip b { color: var(--mm-pink); }
.mm-wait-chip-ready { background: linear-gradient(135deg, #D4F5E8, #FFF2C4); }
.mm-wait-dots { display: inline-flex; gap: 3px; align-items: center; }
.mm-wait-dots span {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--mm-pink);
  border-radius: 50%;
  animation: waitDot 1.2s ease-in-out infinite;
}
.mm-wait-dots span:nth-child(2) { animation-delay: 0.2s; }
.mm-wait-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes waitDot {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-3px); opacity: 1; }
}

/* Match results modal */
.mm-mr-root {
  position: fixed; inset: 0;
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  font-family: 'Fredoka', sans-serif;
  overflow: auto;
}
.mm-mr-back {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,94,159,0.4), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(123,97,255,0.4), transparent 60%),
    rgba(26,26,46,0.6);
  backdrop-filter: blur(4px);
  animation: mrBackIn 0.35s ease;
}
@keyframes mrBackIn { from { opacity: 0; } to { opacity: 1; } }
.mm-mr-confetti {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.mm-mr-c {
  position: absolute;
  top: -10px;
  width: 10px; height: 14px;
  border-radius: 2px;
  animation: mrFall 3.4s linear infinite;
}
.mm-mr-c.c0 { background: var(--mm-pink); }
.mm-mr-c.c1 { background: var(--mm-yellow); }
.mm-mr-c.c2 { background: var(--mm-mint); }
.mm-mr-c.c3 { background: var(--mm-purple); }
@keyframes mrFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0.7; }
}
.mm-mr-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.5);
  padding: 22px 22px 18px;
  max-width: 580px; width: 100%;
  animation: mrCardIn 0.5s var(--mm-bouncy);
  max-height: 92vh; overflow-y: auto;
}
@keyframes mrCardIn {
  0% { transform: translateY(40px) scale(0.85); opacity: 0; }
  60% { transform: translateY(-6px) scale(1.03); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
.mm-mr-head { text-align: center; margin-bottom: 14px; position: relative; }
.mm-mr-crown {
  display: inline-block; font-size: 36px;
  animation: mrCrown 1.8s var(--mm-bouncy) infinite;
  filter: drop-shadow(0 4px 8px rgba(255,210,63,0.5));
}
@keyframes mrCrown {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-6px) rotate(8deg); }
}
.mm-mr-title {
  font-size: 24px; font-weight: 800;
  color: var(--mm-dark);
  margin: 4px 0 2px; letter-spacing: 0.2px;
}
.mm-mr-sub {
  font-size: 13px; color: var(--mm-muted);
  margin: 0;
  font-family: 'Nunito', sans-serif;
}
.mm-mr-sub b { color: var(--mm-pink); font-weight: 800; }
.mm-mr-podium {
  display: flex;
  align-items: flex-end; justify-content: center;
  gap: 10px;
  margin: 16px 0 20px;
  padding: 10px 6px;
}
.mm-mr-pod {
  flex: 1; max-width: 130px;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 6px 12px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 6px 14px rgba(26,26,46,0.1);
  animation: podRise 0.5s var(--mm-bouncy) var(--mm-pod-delay, 0ms) backwards;
  transform-origin: bottom center;
}
.mm-mr-pod.p1 {
  background: linear-gradient(180deg, #FFF2C8, #FFD6A3);
  box-shadow: 0 10px 22px rgba(255,210,63,0.45);
  transform: translateY(-8px);
}
.mm-mr-pod.p2 { background: linear-gradient(180deg, #F0F0F5, #DDE3EE); }
.mm-mr-pod.p3 { background: linear-gradient(180deg, #FFE3C7, #F7CDA8); }
.mm-mr-pod.is-me { outline: 3px solid var(--mm-pink); outline-offset: 2px; }
@keyframes podRise {
  0% { transform: translateY(40px) scale(0.6); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.mm-mr-pod.p1 { animation-name: podRise1; }
@keyframes podRise1 {
  0% { transform: translateY(40px) scale(0.6); opacity: 0; }
  100% { transform: translateY(-8px) scale(1); opacity: 1; }
}
.mm-mr-pod-medal { font-size: 20px; line-height: 1; margin-bottom: 2px; }
.mm-mr-pod-ava { display: inline-flex; }
.mm-mr-pod-name {
  font-weight: 700; font-size: 13px;
  color: var(--mm-dark);
  margin-top: 6px; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-mr-pod-pts {
  font-weight: 800; font-size: 16px;
  color: var(--mm-pink);
}
.mm-mr-tablewrap {
  background: white;
  border-radius: 18px; padding: 6px;
  box-shadow: inset 0 0 0 2px rgba(123,97,255,0.12);
  overflow: hidden;
}
.mm-mr-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
}
.mm-mr-table th {
  background: linear-gradient(135deg, #FFE8F1, #FFF4D0);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 11px;
  color: var(--mm-dark);
  padding: 8px 6px;
  text-align: center;
  border: none;
}
.mm-mr-table th:nth-child(2) { text-align: left; padding-left: 10px; }
.mm-mr-table th.total { color: var(--mm-pink); }
.mm-mr-table th.xp { color: var(--mm-purple); }
.mm-mr-table td {
  padding: 8px 4px;
  text-align: center;
  border-top: 1px dashed rgba(26,26,46,0.06);
  color: var(--mm-dark);
  font-weight: 600;
}
.mm-mr-table td.total { color: var(--mm-pink); font-size: 15px; }
.mm-mr-table td.total b { font-weight: 800; }
.mm-mr-table td.xp { color: var(--mm-purple); font-weight: 800; }
.mm-mr-table tbody tr.is-me {
  background: linear-gradient(90deg, rgba(255,94,159,0.12), rgba(255,210,63,0.12));
}
.mm-mr-table tbody tr.is-me td { color: var(--mm-dark); }
.mm-mr-rk {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(123,97,255,0.15);
  color: var(--mm-purple);
  font-family: 'Fredoka', sans-serif;
  font-weight: 800; font-size: 12px;
}
.mm-mr-rk.r1 { background: linear-gradient(135deg, #FFE082, #FFB84D); color: #7a4a00; }
.mm-mr-rk.r2 { background: linear-gradient(135deg, #E0E4EE, #B7BFD0); color: #35415e; }
.mm-mr-rk.r3 { background: linear-gradient(135deg, #FFCDA3, #D98E5A); color: #572900; }
.mm-mr-table td.pl { text-align: left; padding-left: 8px; }
.mm-mr-plava {
  display: inline-flex; vertical-align: middle;
  margin-right: 5px;
}
.mm-mr-plname {
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  color: var(--mm-dark);
}
.mm-mr-table td.rk { width: 36px; }
.mm-mr-close {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--mm-pink), var(--mm-coral));
  color: white;
  border: none; border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255,94,159,0.4);
  transition: transform 0.2s var(--mm-bouncy), box-shadow 0.2s ease;
}
.mm-mr-close:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 22px rgba(255,94,159,0.5);
}
.mm-mr-close:active { transform: scale(0.98); }

@media (max-width: 520px) {
  .mm-mr-card { padding: 16px 14px 14px; }
  .mm-mr-title { font-size: 20px; }
  .mm-mr-table { font-size: 12px; }
  .mm-mr-table th { font-size: 10px; padding: 6px 3px; }
  .mm-mr-table td { padding: 7px 2px; }
  .mm-mr-table th:nth-child(3), .mm-mr-table td:nth-child(3),
  .mm-mr-table th:nth-child(4), .mm-mr-table td:nth-child(4),
  .mm-mr-table th:nth-child(5), .mm-mr-table td:nth-child(5),
  .mm-mr-table th:nth-child(6), .mm-mr-table td:nth-child(6) { display: none; }
  .mm-mr-pod { max-width: 96px; padding: 8px 4px 10px; }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/games/word-scramble/word-scramble.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Word Scramble — motion + micro-interaction keyframes.
 * Imported as a side-effect from WordScrambleGame.tsx. Uses only
 * the Yumpa palette + bouncy easing per the V2 design canon.
 */

:root {
  --ws-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ambient background blobs — slow drift, no progress feedback. */
@keyframes ws-bb1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(12px,10px) scale(1.08); }
}
@keyframes ws-bb2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-10px,-14px) scale(1.06); }
}
@keyframes ws-bb3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-8px,12px) scale(1.1); }
}

/* Floating emoji glyphs in the decoration layer. */
@keyframes ws-float {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-6px) rotate(4deg); }
}

/* Small elements that should gently bob — emoji badges inside chips. */
@keyframes ws-bob {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-3px) rotate(2deg); }
}

/* Confetti on correct answer — particles flung up + out. */
@keyframes ws-confetti {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.3); opacity: 0; }
  15%  { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--ws-dx, 0px)), calc(-50% + var(--ws-dy, -100px))) rotate(520deg) scale(1);
    opacity: 0;
  }
}

/* Hint-lock sparkle burst — 6 sparkles radiate from the center. */
@keyframes ws-sparkle-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ws-ang, 0deg)) translateY(0) scale(0.3); }
  25%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--ws-ang, 0deg)) translateY(-30px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ws-ang, 0deg)) translateY(-75px) scale(0.7); }
}

/* Score popup — "+N pts" floats up and fades on correct. */
@keyframes ws-score-pop {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(0.6); }
  25%  { opacity: 1; transform: translate(-50%, -10px) scale(1.3); }
  70%  { opacity: 1; transform: translate(-50%, -70px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -110px) scale(0.9); }
}

/* Praise text — "Great!" pops in big, then shrinks and fades. */
@keyframes ws-praise {
  0%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  25%  { opacity: 1; transform: scale(1.15) rotate(4deg); }
  55%  { opacity: 1; transform: scale(1.0) rotate(-2deg); }
  100% { opacity: 0; transform: scale(0.85) rotate(0); }
}

/* Individual letter bounce — used when a tile lands in a slot. */
@keyframes bounce-letter {
  0%   { transform: translateY(-14px) scale(0.6); opacity: 0; }
  60%  { transform: translateY(3px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────
 * Action buttons v3 — MINIMAL Yumpa pills.
 *
 * Design intent: stay playful but calm. Pill shape, pastel tint
 * background, Yumpa text color, NO glass dome / shimmer / wiggle.
 * Personality lives only in: the emoji (gentle tilt on hover),
 * a hairline accent border, and a soft colored glow on hover.
 * Bouncy easing preserved on the hover lift + active scale.
 * ────────────────────────────────────────────────────────────── */
.ws-act-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 100px;
  border: 1px solid transparent;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition:
    transform 220ms var(--ws-bouncy),
    box-shadow 220ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.ws-act-btn:hover:not(:disabled) { transform: translateY(-2px); }
.ws-act-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.ws-act-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ws-act-emoji {
  font-size: 18px;
  line-height: 1;
  transition: transform 220ms var(--ws-bouncy);
}
.ws-act-btn:hover:not(:disabled) .ws-act-emoji {
  transform: translateY(-1px) rotate(-6deg);
}

.ws-act-label { letter-spacing: 0.3px; }

.ws-act-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: white;
  color: #1A1A2E;
  font-weight: 700;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 26, 46, 0.08);
}

/* HINT — soft honey tint */
.ws-act-hint {
  background: #FFF6D6;
  color: #7A5200;
  border-color: rgba(255, 210, 63, 0.5);
}
.ws-act-hint:hover:not(:disabled) {
  background: #FFEFB8;
  border-color: rgba(255, 210, 63, 0.8);
  box-shadow: 0 6px 16px rgba(255, 210, 63, 0.35);
}
.ws-act-hint .ws-act-badge { color: #B07800; }

/* SKIP — soft pink tint */
.ws-act-skip {
  background: #FFE5EE;
  color: #B02860;
  border-color: rgba(255, 94, 159, 0.35);
}
.ws-act-skip:hover:not(:disabled) {
  background: #FFD4E3;
  border-color: rgba(255, 94, 159, 0.6);
  box-shadow: 0 6px 16px rgba(255, 94, 159, 0.3);
}

/* ──────────────────────────────────────────────────────────────
 * Skip-reveal popup — "here's the answer" card that pops over the
 * puzzle when the player taps Skip. Yumpa canon: gradient pastel card
 * tilted -2°, gift emoji bobs, sparkles orbit, letters bounce in one
 * at a time so the reveal has rhythm rather than dumping all at once.
 * ────────────────────────────────────────────────────────────── */
.ws-skip-card {
  position: relative;
  padding: 18px 28px 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, #FFF8F0 0%, #FFE5EE 55%, #FFD9B8 100%);
  border: 2px solid rgba(255, 94, 159, 0.4);
  box-shadow:
    0 18px 40px rgba(255, 94, 159, 0.28),
    0 4px 10px rgba(255, 140, 97, 0.2),
    inset 0 -4px 0 rgba(199, 47, 94, 0.1);
  text-align: center;
  min-width: 240px;
  max-width: 90vw;
  transform-origin: center;
  animation: ws-skip-pop 520ms var(--ws-bouncy) both;
}

@keyframes ws-skip-pop {
  0%   { opacity: 0; transform: translateY(14px) rotate(-8deg) scale(0.6); }
  55%  { opacity: 1; transform: translateY(-4px) rotate(1deg) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); }
}

.ws-skip-emoji {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 6px;
  animation: ws-bob 1.8s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(255, 94, 159, 0.3));
}

.ws-skip-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #B02860;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ws-skip-letters {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ws-skip-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 40px;
  padding: 0 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFF 0%, #FFF0F6 100%);
  border: 2px solid rgba(255, 94, 159, 0.45);
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #1A1A2E;
  box-shadow: 0 3px 0 rgba(255, 94, 159, 0.2);
  opacity: 0;
  animation: ws-skip-letter-in 420ms var(--ws-bouncy) both;
}
@keyframes ws-skip-letter-in {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.5) rotate(-10deg); }
  60%  { opacity: 1; transform: translateY(3px) scale(1.1) rotate(4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

.ws-skip-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #6B6B85;
  letter-spacing: 0.2px;
}

/* Orbiting sparkles — six glyphs radiate out from the card. Each uses
 * a staggered delay via ::nth-child to break the uniformity. */
.ws-skip-sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: ws-sparkle-fly 1.4s ease-out both;
  animation-delay: 200ms;
  filter: drop-shadow(0 2px 4px rgba(255, 94, 159, 0.25));
}
.ws-skip-sparkle:nth-child(1) { animation-delay: 180ms; }
.ws-skip-sparkle:nth-child(2) { animation-delay: 280ms; }
.ws-skip-sparkle:nth-child(3) { animation-delay: 360ms; }
.ws-skip-sparkle:nth-child(4) { animation-delay: 240ms; }
.ws-skip-sparkle:nth-child(5) { animation-delay: 320ms; }
.ws-skip-sparkle:nth-child(6) { animation-delay: 400ms; }

/* Respect reduced motion — gut the blobs/floats/confetti, keep
 * essential state-change animations (bounce-letter is functional for
 * feedback on tile placement, not pure decoration). */
@media (prefers-reduced-motion: reduce) {
  .ws-bb1, .ws-bb2, .ws-bb3,
  [style*="ws-float"], [style*="ws-bob"], [style*="ws-confetti"], [style*="ws-sparkle-fly"] {
    animation: none !important;
  }
}