@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

  :root {
    --adivina-pink: #e62163;
    --adivina-magenta: #c51f73;
    --adivina-purple: #622181;
    --adivina-deep: #321050;
    --adivina-white: #ffffff;
    --adivina-glass: rgba(255, 255, 255, 0.18);
    --adivina-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
    --adivina-radius: 34px;
    --adivina-safe-bottom: max(18px, env(safe-area-inset-bottom));
    font-family: "Roboto", Arial, sans-serif;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    min-height: 100%;
  }

  body.adivina-body-lock {
    overflow: hidden;
  }

  .adivina-game {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    padding: clamp(18px, 3vw, 42px) clamp(16px, 4vw, 68px) var(--adivina-safe-bottom);
    color: var(--adivina-white);
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    background:
      radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.20), transparent 24%),
      radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.12), transparent 26%),
      linear-gradient(120deg, var(--adivina-pink) 0%, var(--adivina-magenta) 42%, var(--adivina-purple) 100%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .adivina-game::before,
  .adivina-game::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(2px);
    opacity: 0.65;
    z-index: -1;
  }

  .adivina-game::before {
    width: min(46vw, 520px);
    height: min(46vw, 520px);
    left: -12vw;
    bottom: -16vw;
    background: rgba(255, 255, 255, 0.12);
  }

  .adivina-game::after {
    width: min(38vw, 460px);
    height: min(38vw, 460px);
    right: -10vw;
    top: -12vw;
    background: rgba(255, 255, 255, 0.10);
  }

  .adivina-shell {
    width: min(1120px, 100%);
    display: grid;
    gap: clamp(18px, 2.8vw, 36px);
    justify-items: center;
  }

  .adivina-circles {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .adivina-side-circle,
  .adivina-main-circle {
    aspect-ratio: 1;
    border-radius: 999px;
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: var(--adivina-shadow);
  }

  .adivina-side-circle {
    width: clamp(150px, 22vw, 286px);
    background: var(--adivina-glass);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    transition: transform 220ms ease, background 220ms ease, opacity 220ms ease;
    z-index: 1;
  }

  .adivina-side-circle.lowest {
    margin-right: -12px;
    background: rgba(255, 255, 255, 0.23);
  }

  .adivina-side-circle.highest {
    margin-left: -12px;
    background: rgba(60, 13, 91, 0.36);
  }

  .adivina-side-circle.has-number {
    transform: scale(1.02);
  }

  .adivina-side-value {
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(3rem, 7vw, 5.9rem);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.07em;
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);
  }

  .adivina-side-label {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 80%;
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(0.68rem, 1.1vw, 0.95rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .adivina-side-circle.has-number .adivina-side-label {
    opacity: 0.78;
  }

  .adivina-main-circle {
    width: clamp(240px, 31vw, 370px);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.82);
    color: var(--adivina-purple);
    overflow: hidden;
    z-index: 3;
  }

  .adivina-main-circle::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.38));
    z-index: 0;
  }

  .adivina-form {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: clamp(14px, 2vw, 22px);
    width: min(78%, 260px);
  }

  .adivina-input-wrap {
    width: 100%;
    padding: 5px;
    border-radius: 24px;
    background: linear-gradient(90deg, #fff400, #ffc900, #fff400);
    box-shadow: 0 12px 22px rgba(98, 33, 129, 0.18);
  }

  .adivina-input {
    width: 100%;
    height: clamp(78px, 8.8vw, 116px);
    border: 4px solid #111111;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--adivina-purple);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.7rem, 6vw, 5.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.07em;
    text-align: center;
    outline: none;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  .adivina-input::placeholder {
    color: rgba(40, 40, 40, 0.18);
  }

  .adivina-input:focus {
    border-color: #000000;
    box-shadow: 0 0 0 7px rgba(230, 33, 99, 0.16), inset 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  .adivina-input::-webkit-outer-spin-button,
  .adivina-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  .adivina-input[type="number"] {
    -moz-appearance: textfield;
  }

  .adivina-submit,
  .adivina-action,
  .adivina-panel-button {
    border: 0;
    font-family: "Roboto", Arial, sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  .adivina-submit {
    width: min(100%, 190px);
    min-height: 58px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--adivina-pink), #f13572);
    font-size: clamp(1.25rem, 2.4vw, 1.9rem);
    box-shadow: 0 14px 28px rgba(230, 33, 99, 0.26);
  }

  .adivina-submit:hover,
  .adivina-action:hover,
  .adivina-panel-button:hover {
    transform: translateY(-2px);
  }

  .adivina-submit:active,
  .adivina-action:active,
  .adivina-panel-button:active {
    transform: translateY(1px) scale(0.99);
  }

  .adivina-result {
    width: min(820px, 100%);
    min-height: clamp(86px, 10vw, 118px);
    display: grid;
    place-items: center;
    padding: 14px clamp(16px, 4vw, 54px);
    border: 4px solid rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px) saturate(1.22);
    -webkit-backdrop-filter: blur(16px) saturate(1.22);
    box-shadow: 0 24px 60px rgba(31, 4, 56, 0.16);
    text-align: center;
    position: relative;
    overflow: hidden;
    transform-origin: center;
    --result-y: 0px;
    --result-tilt: 0deg;
    transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  }

  .adivina-result.is-too-low {
    --result-y: -18px;
    --result-tilt: -1.4deg;
  }

  .adivina-result.is-too-high {
    --result-y: 18px;
    --result-tilt: 1.4deg;
  }

  .adivina-result.is-correct {
    border-color: rgba(255, 255, 255, 0.96);
    background: linear-gradient(90deg, #15803d, #22c55e, #16a34a);
    box-shadow: 0 24px 70px rgba(21, 128, 61, 0.36);
  }

  .adivina-result::before,
  .adivina-result::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .adivina-result::before {
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 244, 0, 0.58) 0%, rgba(255, 255, 255, 0.26) 36%, transparent 68%);
    opacity: 0;
    transform: scale(0.25);
  }

  .adivina-result::after {
    inset: -45% -85%;
    background: linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, 0.86) 50%, transparent 66%);
    transform: translateX(-70%) rotate(8deg);
    opacity: 0;
  }

  .adivina-result.is-animating {
    animation: adivina-result-pop 680ms cubic-bezier(0.16, 1.5, 0.28, 1);
  }

  .adivina-result.is-animating::before {
    animation: adivina-result-burst 680ms ease-out;
  }

  .adivina-result.is-animating::after {
    animation: adivina-shine-sweep 700ms ease-out;
  }

  .adivina-result-text.is-animating {
    animation: adivina-text-bump 680ms cubic-bezier(0.16, 1.5, 0.28, 1);
  }

  .adivina-side-circle.is-updated {
    animation: adivina-circle-glow 780ms ease-out;
  }

  .adivina-side-circle.is-updated::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    border: 6px solid rgba(255, 244, 0, 0.8);
    opacity: 0;
    animation: adivina-circle-ring 780ms ease-out;
    pointer-events: none;
  }

  .adivina-side-value.is-updated {
    animation: adivina-number-pop 780ms cubic-bezier(0.14, 1.65, 0.3, 1);
  }

  @keyframes adivina-result-pop {
    0% {
      transform: translateY(0) scale(0.9) rotate(0deg);
      filter: brightness(1);
    }

    22% {
      transform: translateY(var(--result-y)) scale(1.12) rotate(var(--result-tilt));
      filter: brightness(1.48) saturate(1.35);
    }

    45% {
      transform: translateY(calc(var(--result-y) * -0.38)) scale(0.96) rotate(calc(var(--result-tilt) * -0.55));
    }

    68% {
      transform: translateY(calc(var(--result-y) * 0.16)) scale(1.035) rotate(calc(var(--result-tilt) * 0.35));
    }

    100% {
      transform: translateY(0) scale(1) rotate(0deg);
      filter: brightness(1) saturate(1);
    }
  }

  @keyframes adivina-result-burst {
    0% {
      opacity: 0;
      transform: scale(0.18);
    }

    28% {
      opacity: 1;
      transform: scale(1.25);
    }

    100% {
      opacity: 0;
      transform: scale(3.4);
    }
  }

  @keyframes adivina-shine-sweep {
    0% {
      opacity: 0;
      transform: translateX(-70%) rotate(8deg);
    }

    28% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translateX(70%) rotate(8deg);
    }
  }

  @keyframes adivina-text-bump {
    0% {
      transform: scale(0.72) rotate(-2deg);
      opacity: 0.72;
    }

    26% {
      transform: scale(1.22) rotate(1.5deg);
      opacity: 1;
    }

    52% {
      transform: scale(0.92) rotate(-0.8deg);
    }

    76% {
      transform: scale(1.06) rotate(0.3deg);
    }

    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }

  @keyframes adivina-circle-glow {
    0% {
      filter: brightness(1) saturate(1);
      box-shadow: var(--adivina-shadow);
    }

    28% {
      filter: brightness(1.55) saturate(1.4);
      box-shadow: 0 0 0 16px rgba(255, 244, 0, 0.18), 0 34px 100px rgba(255, 255, 255, 0.36), var(--adivina-shadow);
    }

    58% {
      filter: brightness(1.2) saturate(1.18);
      box-shadow: 0 0 0 7px rgba(255, 244, 0, 0.1), var(--adivina-shadow);
    }

    100% {
      filter: brightness(1) saturate(1);
      box-shadow: var(--adivina-shadow);
    }
  }

  @keyframes adivina-circle-ring {
    0% {
      transform: scale(0.82);
      opacity: 0;
    }

    28% {
      opacity: 0.9;
    }

    100% {
      transform: scale(1.34);
      opacity: 0;
    }
  }

  @keyframes adivina-number-pop {
    0% {
      transform: scale(0.45) rotate(-9deg);
      opacity: 0.35;
    }

    32% {
      transform: scale(1.34) rotate(5deg);
      opacity: 1;
    }

    58% {
      transform: scale(0.88) rotate(-2deg);
    }

    78% {
      transform: scale(1.08) rotate(1deg);
    }

    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }

  .adivina-result-text {
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 6.6vw, 6.4rem);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  }

  .adivina-result {
    --roll-start: 135%;
    --roll-mid: -78%;
    --roll-overshoot: 18%;
    --roll-settle: -6%;
  }

  .adivina-result.is-too-low {
    --roll-start: 135%;
    --roll-mid: -78%;
    --roll-overshoot: 18%;
    --roll-settle: -6%;
  }

  .adivina-result.is-too-high {
    --roll-start: -135%;
    --roll-mid: 78%;
    --roll-overshoot: -18%;
    --roll-settle: 6%;
  }

  .adivina-result::before {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.24) 0 10px,
        transparent 10px 26px
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 44%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(255, 255, 255, 0.18) 56%,
        transparent 100%
      );
    opacity: 0;
    transform: none;
    mix-blend-mode: screen;
  }

  .adivina-result::after {
    inset: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.14)),
      repeating-linear-gradient(
        0deg,
        transparent 0 14px,
        rgba(255, 255, 255, 0.16) 14px 16px,
        transparent 16px 30px
      );
    opacity: 0;
    transform: none;
  }

  .adivina-result.is-animating {
    animation: adivina-film-window 820ms cubic-bezier(0.16, 1.2, 0.26, 1) both;
  }

  .adivina-result.is-animating::before {
    animation: adivina-film-sprockets 820ms steps(9, end) both;
  }

  .adivina-result.is-animating::after {
    animation: adivina-film-scan 820ms steps(7, end) both;
  }

  .adivina-result-text,
  .adivina-side-value {
    position: relative;
    display: inline-block;
    will-change: transform, filter, opacity;
  }

  .adivina-result-text::before,
  .adivina-result-text::after,
  .adivina-side-value::before,
  .adivina-side-value::after {
    content: attr(data-roll-text);
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    color: inherit;
    text-shadow: inherit;
    opacity: 0;
    pointer-events: none;
    filter: blur(2px);
  }

  .adivina-result-text.is-animating {
    animation: adivina-result-film-roll 820ms cubic-bezier(0.13, 1.25, 0.25, 1) both;
  }

  .adivina-result-text.is-animating::before {
    animation: adivina-result-film-ghost-one 820ms steps(7, end) both;
  }

  .adivina-result-text.is-animating::after {
    animation: adivina-result-film-ghost-two 820ms steps(7, end) both;
  }

  .adivina-side-circle.is-updated {
    animation: adivina-reel-window-pulse 760ms cubic-bezier(0.15, 1.3, 0.25, 1) both;
  }

  .adivina-side-circle.is-updated::after {
    content: "";
    position: absolute;
    inset: 11%;
    border-radius: inherit;
    border: 4px dashed rgba(255, 255, 255, 0.74);
    opacity: 0;
    animation: adivina-reel-dash-spin 760ms ease-out both;
    pointer-events: none;
  }

  .adivina-side-value {
    --number-start: 118%;
    --number-mid: -72%;
    --number-overshoot: 16%;
    --number-settle: -5%;
  }

  .adivina-side-circle.highest .adivina-side-value {
    --number-start: -118%;
    --number-mid: 72%;
    --number-overshoot: -16%;
    --number-settle: 5%;
  }

  .adivina-side-value.is-updated {
    animation: adivina-number-film-roll 760ms cubic-bezier(0.13, 1.25, 0.25, 1) both;
  }

  .adivina-side-value.is-updated::before {
    animation: adivina-number-film-ghost-one 760ms steps(6, end) both;
  }

  .adivina-side-value.is-updated::after {
    animation: adivina-number-film-ghost-two 760ms steps(6, end) both;
  }

  @keyframes adivina-film-window {
    0% {
      transform: scale(0.98);
      filter: brightness(1);
    }

    18% {
      transform: scale(1.035);
      filter: brightness(1.34) saturate(1.2);
    }

    46% {
      transform: scale(0.99);
    }

    72% {
      transform: scale(1.012);
    }

    100% {
      transform: scale(1);
      filter: brightness(1) saturate(1);
    }
  }

  @keyframes adivina-film-sprockets {
    0% {
      opacity: 0;
      transform: translateY(var(--roll-start));
    }

    15%, 62% {
      opacity: 0.62;
    }

    100% {
      opacity: 0;
      transform: translateY(var(--roll-mid));
    }
  }

  @keyframes adivina-film-scan {
    0% {
      opacity: 0;
      transform: translateY(var(--roll-start));
    }

    18%, 64% {
      opacity: 0.8;
    }

    100% {
      opacity: 0;
      transform: translateY(var(--roll-mid));
    }
  }

  @keyframes adivina-result-film-roll {
    0% {
      transform: translateY(var(--roll-start)) scaleY(0.84);
      opacity: 0.2;
      filter: blur(12px);
    }

    18% {
      transform: translateY(var(--roll-mid)) scaleY(1.18);
      opacity: 0.55;
      filter: blur(8px);
    }

    36% {
      transform: translateY(var(--roll-overshoot)) scaleY(0.92);
      opacity: 1;
      filter: blur(2px);
    }

    58% {
      transform: translateY(var(--roll-settle)) scaleY(1.04);
      filter: blur(0);
    }

    78% {
      transform: translateY(2%) scaleY(0.99);
    }

    100% {
      transform: translateY(0) scaleY(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes adivina-result-film-ghost-one {
    0% {
      opacity: 0;
      transform: translateY(calc(var(--roll-start) * -1));
    }

    16% {
      opacity: 0.55;
    }

    38% {
      opacity: 0.3;
      transform: translateY(var(--roll-mid));
    }

    100% {
      opacity: 0;
      transform: translateY(var(--roll-start));
    }
  }

  @keyframes adivina-result-film-ghost-two {
    0% {
      opacity: 0;
      transform: translateY(var(--roll-mid));
    }

    25% {
      opacity: 0.44;
    }

    58% {
      opacity: 0.2;
      transform: translateY(var(--roll-start));
    }

    100% {
      opacity: 0;
      transform: translateY(calc(var(--roll-mid) * -1));
    }
  }

  @keyframes adivina-reel-window-pulse {
    0% {
      filter: brightness(1) saturate(1);
      box-shadow: var(--adivina-shadow);
    }

    18% {
      filter: brightness(1.45) saturate(1.3);
      box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.14), 0 34px 100px rgba(255, 255, 255, 0.34), var(--adivina-shadow);
    }

    100% {
      filter: brightness(1) saturate(1);
      box-shadow: var(--adivina-shadow);
    }
  }

  @keyframes adivina-reel-dash-spin {
    0% {
      opacity: 0;
      transform: scale(0.78) rotate(0deg);
    }

    20%, 60% {
      opacity: 0.8;
    }

    100% {
      opacity: 0;
      transform: scale(1.15) rotate(60deg);
    }
  }

  @keyframes adivina-number-film-roll {
    0% {
      transform: translateY(var(--number-start)) scaleY(0.78);
      opacity: 0.25;
      filter: blur(10px);
    }

    20% {
      transform: translateY(var(--number-mid)) scaleY(1.24);
      opacity: 0.55;
      filter: blur(7px);
    }

    40% {
      transform: translateY(var(--number-overshoot)) scaleY(0.9);
      opacity: 1;
      filter: blur(1px);
    }

    64% {
      transform: translateY(var(--number-settle)) scaleY(1.05);
      filter: blur(0);
    }

    100% {
      transform: translateY(0) scaleY(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes adivina-number-film-ghost-one {
    0% {
      opacity: 0;
      transform: translateY(calc(var(--number-start) * -1));
    }

    16% {
      opacity: 0.58;
    }

    42% {
      opacity: 0.24;
      transform: translateY(var(--number-mid));
    }

    100% {
      opacity: 0;
      transform: translateY(var(--number-start));
    }
  }

  @keyframes adivina-number-film-ghost-two {
    0% {
      opacity: 0;
      transform: translateY(var(--number-mid));
    }

    24% {
      opacity: 0.5;
    }

    60% {
      opacity: 0.2;
      transform: translateY(var(--number-start));
    }

    100% {
      opacity: 0;
      transform: translateY(calc(var(--number-mid) * -1));
    }
  }

  .adivina-controls {
    width: min(710px, 100%);
    display: grid;
    grid-template-columns: 1.35fr 0.78fr 0.96fr;
    gap: clamp(10px, 1.8vw, 18px);
    align-items: center;
  }

  .adivina-guess-pill,
  .adivina-action {
    min-height: 58px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    background: rgba(98, 33, 129, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .adivina-guess-pill {
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(1.2rem, 2.6vw, 2rem);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    gap: 0.25em;
  }

  #adivina-guess-count {
    font-weight: 900;
    letter-spacing: -0.04em;
  }

  .adivina-action {
    border: 2px solid rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.16);
    font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  }

  .adivina-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    place-items: center;
    padding: 22px;
    background: rgba(29, 4, 49, 0.38);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .adivina-settings-backdrop.is-open {
    display: grid;
  }

  .adivina-settings-panel {
    width: min(560px, 100%);
    border-radius: var(--adivina-radius);
    padding: clamp(24px, 4vw, 42px);
    background: rgba(255, 255, 255, 0.23);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: var(--adivina-shadow);
    color: #ffffff;
  }

  .adivina-settings-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
  }

  .adivina-settings-title {
    margin: 0;
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: 0;
  }

  .adivina-close {
    width: 48px;
    height: 48px;
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

  .adivina-field {
    display: grid;
    gap: 12px;
  }

  .adivina-label {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    opacity: 0.9;
  }

  .adivina-select {
    width: 100%;
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-radius: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--adivina-purple);
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(1.25rem, 2.4vw, 1.8rem);
    font-weight: 500;
    letter-spacing: 0;
    outline: none;
  }

  .adivina-panel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 24px;
  }

  .adivina-panel-button {
    min-height: 58px;
    border-radius: 14px;
    font-size: 1.1rem;
  }

  .adivina-panel-button.primary {
    background: linear-gradient(90deg, var(--adivina-pink), #f13572);
  }

  .adivina-panel-button.secondary {
    background: rgba(255, 255, 255, 0.16);
    border: 2px solid rgba(255, 255, 255, 0.78);
  }

  .adivina-small-note {
    margin: 18px 0 0;
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0.82;
  }

  .adivina-copyright {
    align-self: end;
    margin: clamp(12px, 2vw, 24px) 0 0;
    font-size: clamp(0.72rem, 1.25vw, 0.95rem);
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0.72;
    text-align: center;
  }

  .adivina-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 20;
  }

  .adivina-confetti span {
    position: absolute;
    left: 50%;
    top: 48%;
    width: var(--piece-width, 14px);
    height: var(--piece-height, 24px);
    border-radius: var(--piece-radius, 4px);
    background: var(--piece-colour, #ffffff);
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.2) rotate(0deg);
    animation: adivina-confetti-burst var(--piece-duration, 1900ms) cubic-bezier(0.12, 0.78, 0.22, 1) forwards;
    animation-delay: var(--piece-delay, 0ms);
    will-change: transform, opacity;
  }

  .adivina-confetti span.circle {
    border-radius: 999px;
  }

  .adivina-confetti span.ribbon {
    width: var(--piece-width, 10px);
    height: var(--piece-height, 34px);
    border-radius: 999px;
  }

  @keyframes adivina-confetti-burst {
    0% {
      opacity: 0;
      transform: translate3d(-50%, -50%, 0) scale(0.2) rotate(0deg);
    }

    10% {
      opacity: 1;
    }

    52% {
      opacity: 1;
      transform:
        translate3d(-50%, -50%, 0)
        translate3d(calc(var(--burst-x) * 0.78), calc(var(--burst-y) * 0.72), 0)
        scale(var(--piece-scale, 1))
        rotate(calc(var(--piece-spin) * 0.62));
    }

    100% {
      opacity: 0;
      transform:
        translate3d(-50%, -50%, 0)
        translate3d(var(--burst-x), calc(var(--burst-y) + 34vh), 0)
        scale(var(--piece-scale, 1))
        rotate(var(--piece-spin));
    }
  }

  .adivina-side-circle {
    overflow: hidden;
  }

  .adivina-result.is-reeling .adivina-result-text,
  .adivina-side-circle.is-reeling .adivina-side-value {
    opacity: 0;
  }

  .adivina-reel {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 12;
    overflow: hidden;
  }

  .adivina-result.is-reeling .adivina-reel,
  .adivina-side-circle.is-reeling .adivina-reel {
    display: flex;
  }

  .adivina-reel-strip {
    width: 100%;
    display: grid;
    justify-items: center;
    transform: translateY(var(--reel-start, -42%));
    animation: adivina-obvious-reel-roll var(--reel-duration, 980ms) cubic-bezier(0.11, 0.92, 0.2, 1) forwards;
  }

  .adivina-reel-item {
    width: 100%;
    min-height: clamp(86px, 10vw, 118px);
    display: grid;
    place-items: center;
    padding: 0 18px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(2.5rem, 6.6vw, 6.4rem);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    filter: blur(1.4px);
  }

  .adivina-reel-item.final {
    filter: blur(0);
  }

  .adivina-side-circle .adivina-reel-item {
    min-height: clamp(150px, 22vw, 286px);
    font-size: clamp(3rem, 7vw, 5.9rem);
    letter-spacing: -0.07em;
  }

  .adivina-result.is-reeling {
    animation: adivina-obvious-reel-window 980ms cubic-bezier(0.14, 1.35, 0.25, 1) both;
  }

  .adivina-side-circle.is-reeling {
    animation: adivina-obvious-reel-circle 920ms cubic-bezier(0.14, 1.35, 0.25, 1) both;
  }

  .adivina-result.is-reeling::before {
    animation: adivina-obvious-film-lines 980ms steps(11, end) both;
  }

  .adivina-result.is-reeling::after {
    animation: adivina-obvious-film-sprockets 980ms steps(9, end) both;
  }

  .adivina-side-circle.is-reeling::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: inherit;
    border: 6px dashed rgba(255, 255, 255, 0.85);
    opacity: 0;
    animation: adivina-obvious-reel-ring 920ms ease-out both;
    pointer-events: none;
    z-index: 13;
  }

  @keyframes adivina-obvious-reel-roll {
    0% {
      transform: translateY(var(--reel-start, -44%));
      filter: blur(13px);
    }

    46% {
      transform: translateY(var(--reel-fast, 18%));
      filter: blur(7px);
    }

    66% {
      transform: translateY(var(--reel-overshoot, -7%));
      filter: blur(2px);
    }

    82% {
      transform: translateY(var(--reel-settle, 3%));
      filter: blur(0.5px);
    }

    100% {
      transform: translateY(0);
      filter: blur(0);
    }
  }

  @keyframes adivina-obvious-reel-window {
    0% {
      transform: scale(0.94);
      filter: brightness(1);
    }

    24% {
      transform: scale(1.07) rotate(-0.8deg);
      filter: brightness(1.6) saturate(1.45);
    }

    52% {
      transform: scale(0.98) rotate(0.5deg);
    }

    100% {
      transform: scale(1) rotate(0deg);
      filter: brightness(1) saturate(1);
    }
  }

  @keyframes adivina-obvious-reel-circle {
    0% {
      transform: scale(1.02);
      filter: brightness(1) saturate(1);
    }

    30% {
      transform: scale(1.08) rotate(-1.4deg);
      filter: brightness(1.65) saturate(1.5);
      box-shadow: 0 0 0 18px rgba(255, 244, 0, 0.2), 0 34px 110px rgba(255, 255, 255, 0.34), var(--adivina-shadow);
    }

    68% {
      transform: scale(0.99) rotate(0.8deg);
    }

    100% {
      transform: scale(1.02) rotate(0deg);
      filter: brightness(1) saturate(1);
      box-shadow: var(--adivina-shadow);
    }
  }

  @keyframes adivina-obvious-film-lines {
    0% {
      opacity: 0;
      transform: translateY(-70%);
    }

    14%, 70% {
      opacity: 0.9;
    }

    100% {
      opacity: 0;
      transform: translateY(70%);
    }
  }

  @keyframes adivina-obvious-film-sprockets {
    0% {
      opacity: 0;
      transform: translateX(-55%);
    }

    16%, 68% {
      opacity: 0.75;
    }

    100% {
      opacity: 0;
      transform: translateX(55%);
    }
  }

  @keyframes adivina-obvious-reel-ring {
    0% {
      opacity: 0;
      transform: scale(0.72) rotate(0deg);
    }

    25%, 62% {
      opacity: 0.95;
    }

    100% {
      opacity: 0;
      transform: scale(1.3) rotate(110deg);
    }
  }

  /* Smooth film-roll animation: transform-only, no animated DOM strips. */
  .adivina-reel {
    display: none !important;
  }

  .adivina-result,
  .adivina-result-text,
  .adivina-side-circle,
  .adivina-side-value {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, filter, opacity;
  }

  .adivina-result.roll-up,
  .adivina-side-circle.roll-up {
    --roll-distance: -72px;
    --roll-settle: 10px;
    --roll-tilt: -1.2deg;
  }

  .adivina-result.roll-down,
  .adivina-side-circle.roll-down {
    --roll-distance: 72px;
    --roll-settle: -10px;
    --roll-tilt: 1.2deg;
  }

  .adivina-result.is-rolling {
    animation: adivina-smooth-panel-roll 680ms cubic-bezier(0.16, 1.2, 0.22, 1) both;
  }

  .adivina-result-text.is-rolling {
    animation: adivina-smooth-text-roll 680ms cubic-bezier(0.16, 1.2, 0.22, 1) both;
  }

  .adivina-side-circle.is-rolling {
    animation: adivina-smooth-circle-roll 640ms cubic-bezier(0.16, 1.2, 0.22, 1) both;
  }

  .adivina-side-value.is-rolling {
    animation: adivina-smooth-number-roll 640ms cubic-bezier(0.16, 1.2, 0.22, 1) both;
  }

  .adivina-result.is-rolling::before {
    animation: adivina-smooth-film-lines 680ms steps(6, end) both;
  }

  .adivina-result.is-rolling::after {
    animation: adivina-smooth-film-flash 680ms ease-out both;
  }

  .adivina-side-circle.is-rolling::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: inherit;
    border: 5px dashed rgba(255, 255, 255, 0.8);
    pointer-events: none;
    z-index: 13;
    animation: adivina-smooth-reel-ring 640ms ease-out both;
  }

  @keyframes adivina-smooth-panel-roll {
    0% {
      transform: scale(0.98) rotate(0deg);
      filter: brightness(1);
    }

    30% {
      transform: scale(1.05) rotate(var(--roll-tilt));
      filter: brightness(1.38) saturate(1.25);
    }

    62% {
      transform: scale(0.99) rotate(calc(var(--roll-tilt) * -0.45));
    }

    100% {
      transform: scale(1) rotate(0deg);
      filter: brightness(1) saturate(1);
    }
  }

  @keyframes adivina-smooth-text-roll {
    0% {
      transform: translate3d(0, var(--roll-distance), 0) scaleY(0.74);
      opacity: 0;
      filter: blur(12px);
    }

    24% {
      opacity: 0.72;
      filter: blur(8px);
    }

    54% {
      transform: translate3d(0, var(--roll-settle), 0) scaleY(1.08);
      opacity: 1;
      filter: blur(2px);
    }

    76% {
      transform: translate3d(0, calc(var(--roll-settle) * -0.35), 0) scaleY(0.98);
      filter: blur(0);
    }

    100% {
      transform: translate3d(0, 0, 0) scaleY(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes adivina-smooth-circle-roll {
    0% {
      transform: scale(1.02);
      filter: brightness(1);
    }

    32% {
      transform: scale(1.09) rotate(var(--roll-tilt));
      filter: brightness(1.48) saturate(1.3);
      box-shadow: 0 0 0 14px rgba(255, 244, 0, 0.17), 0 32px 90px rgba(255, 255, 255, 0.28), var(--adivina-shadow);
    }

    68% {
      transform: scale(0.99) rotate(calc(var(--roll-tilt) * -0.45));
    }

    100% {
      transform: scale(1.02) rotate(0deg);
      filter: brightness(1) saturate(1);
      box-shadow: var(--adivina-shadow);
    }
  }

  @keyframes adivina-smooth-number-roll {
    0% {
      transform: translate3d(0, var(--roll-distance), 0) scaleY(0.68);
      opacity: 0;
      filter: blur(12px);
    }

    52% {
      transform: translate3d(0, var(--roll-settle), 0) scaleY(1.12);
      opacity: 1;
      filter: blur(2px);
    }

    78% {
      transform: translate3d(0, calc(var(--roll-settle) * -0.35), 0) scaleY(0.98);
      filter: blur(0);
    }

    100% {
      transform: translate3d(0, 0, 0) scaleY(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes adivina-smooth-film-lines {
    0% {
      opacity: 0;
      transform: translate3d(0, -50%, 0);
    }

    18%, 62% {
      opacity: 0.62;
    }

    100% {
      opacity: 0;
      transform: translate3d(0, 50%, 0);
    }
  }

  @keyframes adivina-smooth-film-flash {
    0% {
      opacity: 0;
      transform: translate3d(-40%, 0, 0);
    }

    32% {
      opacity: 0.7;
    }

    100% {
      opacity: 0;
      transform: translate3d(40%, 0, 0);
    }
  }

  @keyframes adivina-smooth-reel-ring {
    0% {
      opacity: 0;
      transform: scale(0.82) rotate(0deg);
    }

    32%, 58% {
      opacity: 0.88;
    }

    100% {
      opacity: 0;
      transform: scale(1.22) rotate(70deg);
    }
  }

  /* Final film-roll treatment: clear, visible, and smoother than the DOM reel-strip version. */
  .adivina-result-text {
    font-size: clamp(1.7rem, 5.2vw, 5.1rem);
    white-space: nowrap;
  }

  .adivina-result::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.62) 0 10px,
        transparent 10px 24px,
        rgba(255, 255, 255, 0.62) 24px 34px,
        transparent 34px 48px
      ),
      repeating-linear-gradient(
        0deg,
        transparent 0 18px,
        rgba(255, 255, 255, 0.32) 18px 22px,
        transparent 22px 42px
      );
    mix-blend-mode: screen;
  }

  .adivina-result::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    opacity: 0;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.35), transparent 18%, transparent 82%, rgba(0,0,0,0.18)),
      linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.72) 48%, transparent 62%);
  }

  .adivina-side-circle::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: inherit;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    background:
      repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.48) 0 8px,
        transparent 8px 18px
      );
    mask: radial-gradient(circle, transparent 50%, #000 51%, #000 58%, transparent 59%);
    -webkit-mask: radial-gradient(circle, transparent 50%, #000 51%, #000 58%, transparent 59%);
  }

  .adivina-result.roll-up,
  .adivina-side-circle.roll-up {
    --film-distance: -96px;
    --film-small-distance: -64px;
    --film-tilt: -1.4deg;
    --film-overlay-start: 52px;
    --film-overlay-end: -52px;
  }

  .adivina-result.roll-down,
  .adivina-side-circle.roll-down {
    --film-distance: 96px;
    --film-small-distance: 64px;
    --film-tilt: 1.4deg;
    --film-overlay-start: -52px;
    --film-overlay-end: 52px;
  }

  .adivina-result.is-rolling {
    animation: adivina-film-panel-bounce 760ms cubic-bezier(0.14, 1.25, 0.24, 1) both;
  }

  .adivina-result.is-rolling::before {
    animation: adivina-film-perforations 760ms steps(8, end) both;
  }

  .adivina-result.is-rolling::after {
    animation: adivina-film-light-leak 760ms ease-out both;
  }

  .adivina-result-text.is-rolling {
    animation: adivina-film-text-roll 760ms cubic-bezier(0.14, 1.25, 0.24, 1) both;
  }

  .adivina-side-circle.is-rolling {
    animation: adivina-film-circle-bounce 700ms cubic-bezier(0.14, 1.25, 0.24, 1) both;
  }

  .adivina-side-circle.is-rolling::before {
    animation: adivina-film-circle-perforations 700ms steps(7, end) both;
  }

  .adivina-side-value.is-rolling {
    animation: adivina-film-number-roll 700ms cubic-bezier(0.14, 1.25, 0.24, 1) both;
  }

  @keyframes adivina-film-panel-bounce {
    0% {
      transform: scale(0.97) rotate(0deg);
      filter: brightness(1);
    }

    30% {
      transform: scale(1.055) rotate(var(--film-tilt));
      filter: brightness(1.5) saturate(1.35);
    }

    58% {
      transform: scale(0.985) rotate(calc(var(--film-tilt) * -0.55));
    }

    100% {
      transform: scale(1) rotate(0deg);
      filter: brightness(1) saturate(1);
    }
  }

  @keyframes adivina-film-text-roll {
    0% {
      transform: translate3d(0, var(--film-distance), 0) scaleY(0.58);
      opacity: 0;
      filter: blur(16px);
    }

    18% {
      opacity: 0.55;
    }

    42% {
      transform: translate3d(0, calc(var(--film-distance) * -0.32), 0) scaleY(1.2);
      opacity: 1;
      filter: blur(5px);
    }

    66% {
      transform: translate3d(0, calc(var(--film-distance) * 0.08), 0) scaleY(0.94);
      filter: blur(1px);
    }

    100% {
      transform: translate3d(0, 0, 0) scaleY(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes adivina-film-perforations {
    0% {
      opacity: 0;
      transform: translate3d(0, var(--film-overlay-start), 0);
    }

    14%, 72% {
      opacity: 0.78;
    }

    100% {
      opacity: 0;
      transform: translate3d(0, var(--film-overlay-end), 0);
    }
  }

  @keyframes adivina-film-light-leak {
    0% {
      opacity: 0;
      transform: translate3d(-70%, 0, 0);
    }

    34% {
      opacity: 0.9;
    }

    100% {
      opacity: 0;
      transform: translate3d(70%, 0, 0);
    }
  }

  @keyframes adivina-film-circle-bounce {
    0% {
      transform: scale(1.02) rotate(0deg);
      filter: brightness(1);
    }

    32% {
      transform: scale(1.09) rotate(var(--film-tilt));
      filter: brightness(1.55) saturate(1.35);
      box-shadow: 0 0 0 16px rgba(255, 244, 0, 0.18), 0 32px 100px rgba(255,255,255,0.28), var(--adivina-shadow);
    }

    68% {
      transform: scale(0.99) rotate(calc(var(--film-tilt) * -0.5));
    }

    100% {
      transform: scale(1.02) rotate(0deg);
      filter: brightness(1);
      box-shadow: var(--adivina-shadow);
    }
  }

  @keyframes adivina-film-number-roll {
    0% {
      transform: translate3d(0, var(--film-small-distance), 0) scaleY(0.54);
      opacity: 0;
      filter: blur(14px);
    }

    44% {
      transform: translate3d(0, calc(var(--film-small-distance) * -0.28), 0) scaleY(1.24);
      opacity: 1;
      filter: blur(4px);
    }

    70% {
      transform: translate3d(0, calc(var(--film-small-distance) * 0.08), 0) scaleY(0.94);
      filter: blur(1px);
    }

    100% {
      transform: translate3d(0, 0, 0) scaleY(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes adivina-film-circle-perforations {
    0% {
      opacity: 0;
      transform: translate3d(0, var(--film-overlay-start), 0) rotate(0deg);
    }

    18%, 66% {
      opacity: 0.72;
    }

    100% {
      opacity: 0;
      transform: translate3d(0, var(--film-overlay-end), 0) rotate(50deg);
    }
  }

  .adivina-game.is-faux-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 99999;
  }

  .adivina-fullscreen {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    z-index: 80;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 18px 38px rgba(31, 4, 56, 0.2);
    transition: transform 160ms ease, background 160ms ease;
  }

  .adivina-fullscreen:hover {
    transform: translateY(-2px) scale(1.04);
    background: rgba(255, 255, 255, 0.26);
  }

  .adivina-fullscreen:active {
    transform: scale(0.96);
  }

  .adivina-result {
    overflow: hidden;
    padding-left: clamp(8px, 2vw, 28px);
    padding-right: clamp(8px, 2vw, 28px);
  }

  .adivina-result-text {
    font-size: clamp(1.05rem, 4.35vw, 4.15rem);
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
    position: relative;
    transform-origin: center;
  }

  .adivina-result-text::before,
  .adivina-result-text::after,
  .adivina-side-value::before,
  .adivina-side-value::after {
    content: attr(data-film);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    color: inherit;
    text-shadow: inherit;
    opacity: 0;
    pointer-events: none;
    filter: blur(4px);
  }

  .adivina-result.roll-up,
  .adivina-side-circle.roll-up {
    --film-in: 105px;
    --film-out: -105px;
    --film-settle: -11px;
    --film-tilt: -1.5deg;
  }

  .adivina-result.roll-down,
  .adivina-side-circle.roll-down {
    --film-in: -105px;
    --film-out: 105px;
    --film-settle: 11px;
    --film-tilt: 1.5deg;
  }

  .adivina-result.is-rolling {
    animation: adivina-film-container-kick 840ms cubic-bezier(0.14, 1.25, 0.24, 1) both;
  }

  .adivina-result-text.is-rolling {
    animation: adivina-film-main-roll 840ms cubic-bezier(0.14, 1.25, 0.24, 1) both;
  }

  .adivina-result-text.is-rolling::before {
    animation: adivina-film-ghost-one 840ms ease-out both;
  }

  .adivina-result-text.is-rolling::after {
    animation: adivina-film-ghost-two 840ms ease-out both;
  }

  .adivina-result.is-rolling::before {
    animation: adivina-film-gate-lines 840ms steps(9, end) both;
  }

  .adivina-result.is-rolling::after {
    animation: adivina-film-light-flash 840ms ease-out both;
  }

  .adivina-side-value {
    display: inline-block;
    position: relative;
    transform-origin: center;
  }

  .adivina-side-circle.is-rolling {
    animation: adivina-film-circle-kick 760ms cubic-bezier(0.14, 1.25, 0.24, 1) both;
  }

  .adivina-side-value.is-rolling {
    animation: adivina-film-number-roll 760ms cubic-bezier(0.14, 1.25, 0.24, 1) both;
  }

  .adivina-side-value.is-rolling::before {
    animation: adivina-film-number-ghost-one 760ms ease-out both;
  }

  .adivina-side-value.is-rolling::after {
    animation: adivina-film-number-ghost-two 760ms ease-out both;
  }

  .adivina-side-circle.is-rolling::before {
    animation: adivina-film-circle-gate 760ms steps(8, end) both;
  }

  .adivina-side-circle.is-rolling::after {
    content: "";
    position: absolute;
    inset: 9%;
    z-index: 13;
    border-radius: inherit;
    border: 6px dashed rgba(255, 255, 255, 0.86);
    opacity: 0;
    pointer-events: none;
    animation: adivina-film-circle-ring 760ms ease-out both;
  }

  @keyframes adivina-film-container-kick {
    0% { transform: scale(0.97) rotate(0deg); filter: brightness(1); }
    24% { transform: scale(1.06) rotate(var(--film-tilt)); filter: brightness(1.58) saturate(1.35); }
    58% { transform: scale(0.985) rotate(calc(var(--film-tilt) * -0.45)); }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1) saturate(1); }
  }

  @keyframes adivina-film-main-roll {
    0% { transform: translate3d(0, var(--film-in), 0) scaleY(0.48); opacity: 0; filter: blur(18px); }
    18% { opacity: 0.65; }
    42% { transform: translate3d(0, var(--film-out), 0) scaleY(1.28); opacity: 0.88; filter: blur(9px); }
    64% { transform: translate3d(0, var(--film-settle), 0) scaleY(0.92); opacity: 1; filter: blur(2px); }
    82% { transform: translate3d(0, calc(var(--film-settle) * -0.36), 0) scaleY(1.03); filter: blur(0); }
    100% { transform: translate3d(0, 0, 0) scaleY(1); opacity: 1; filter: blur(0); }
  }

  @keyframes adivina-film-ghost-one {
    0% { transform: translate3d(0, calc(var(--film-in) * -1.1), 0) scaleY(0.72); opacity: 0; }
    22% { opacity: 0.62; }
    52% { transform: translate3d(0, calc(var(--film-out) * 0.62), 0) scaleY(1.12); opacity: 0.3; }
    100% { transform: translate3d(0, var(--film-out), 0) scaleY(0.8); opacity: 0; }
  }

  @keyframes adivina-film-ghost-two {
    0% { transform: translate3d(0, calc(var(--film-in) * 0.52), 0) scaleY(0.7); opacity: 0; }
    30% { opacity: 0.46; }
    62% { transform: translate3d(0, calc(var(--film-out) * -0.48), 0) scaleY(1.18); opacity: 0.25; }
    100% { transform: translate3d(0, calc(var(--film-out) * -1), 0) scaleY(0.8); opacity: 0; }
  }

  @keyframes adivina-film-gate-lines {
    0% { opacity: 0; transform: translate3d(0, var(--film-in), 0); }
    16%, 72% { opacity: 0.9; }
    100% { opacity: 0; transform: translate3d(0, var(--film-out), 0); }
  }

  @keyframes adivina-film-light-flash {
    0% { opacity: 0; transform: translate3d(-74%, 0, 0); }
    35% { opacity: 0.95; }
    100% { opacity: 0; transform: translate3d(74%, 0, 0); }
  }

  @keyframes adivina-film-circle-kick {
    0% { transform: scale(1.02) rotate(0deg); filter: brightness(1); }
    28% { transform: scale(1.095) rotate(var(--film-tilt)); filter: brightness(1.6) saturate(1.36); box-shadow: 0 0 0 16px rgba(255, 244, 0, 0.2), var(--adivina-shadow); }
    66% { transform: scale(0.99) rotate(calc(var(--film-tilt) * -0.45)); }
    100% { transform: scale(1.02) rotate(0deg); filter: brightness(1); box-shadow: var(--adivina-shadow); }
  }

  @keyframes adivina-film-number-roll {
    0% { transform: translate3d(0, calc(var(--film-in) * 0.72), 0) scaleY(0.45); opacity: 0; filter: blur(16px); }
    44% { transform: translate3d(0, calc(var(--film-out) * 0.52), 0) scaleY(1.3); opacity: 0.9; filter: blur(7px); }
    66% { transform: translate3d(0, calc(var(--film-settle) * 0.85), 0) scaleY(0.9); opacity: 1; filter: blur(2px); }
    100% { transform: translate3d(0, 0, 0) scaleY(1); opacity: 1; filter: blur(0); }
  }

  @keyframes adivina-film-number-ghost-one {
    0% { transform: translate3d(0, calc(var(--film-in) * -0.7), 0); opacity: 0; }
    30% { opacity: 0.56; }
    62% { transform: translate3d(0, calc(var(--film-out) * 0.56), 0); opacity: 0.24; }
    100% { transform: translate3d(0, var(--film-out), 0); opacity: 0; }
  }

  @keyframes adivina-film-number-ghost-two {
    0% { transform: translate3d(0, calc(var(--film-in) * 0.3), 0); opacity: 0; }
    38% { opacity: 0.42; }
    70% { transform: translate3d(0, calc(var(--film-out) * -0.52), 0); opacity: 0.18; }
    100% { transform: translate3d(0, calc(var(--film-out) * -1), 0); opacity: 0; }
  }

  @keyframes adivina-film-circle-gate {
    0% { opacity: 0; transform: translate3d(0, var(--film-in), 0); }
    18%, 66% { opacity: 0.7; }
    100% { opacity: 0; transform: translate3d(0, var(--film-out), 0); }
  }

  @keyframes adivina-film-circle-ring {
    0% { opacity: 0; transform: scale(0.72) rotate(0deg); }
    28%, 62% { opacity: 0.92; }
    100% { opacity: 0; transform: scale(1.28) rotate(100deg); }
  }

  @media (max-width: 820px) {
    body.adivina-body-lock {
      overflow: auto;
    }

    .adivina-game {
      overflow: auto;
      min-height: 100svh;
    }

    .adivina-circles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "main main"
        "low high";
      gap: 14px;
    }

    .adivina-main-circle {
      grid-area: main;
      width: min(74vw, 330px);
    }

    .adivina-side-circle {
      width: min(41vw, 220px);
      margin: 0;
    }

    .adivina-side-circle.lowest {
      grid-area: low;
    }

    .adivina-side-circle.highest {
      grid-area: high;
    }

    .adivina-controls {
      grid-template-columns: 1fr;
      width: min(440px, 100%);
    }
  }

  @media (max-width: 420px) {
    .adivina-game {
      padding-inline: 12px;
    }

    .adivina-main-circle {
      width: min(84vw, 300px);
    }

    .adivina-side-circle {
      width: min(43vw, 170px);
    }

    .adivina-result {
      border-width: 3px;
    }

    .adivina-panel-actions {
      grid-template-columns: 1fr;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }