:root {
      --bg: #05040b;
      --white: #fff8f8;
      --muted: rgba(255,248,248,.68);
      --gold: #ffd56a;
      --red: #d7193f;
      --red2: #ff486a;
      --cyan: #00eaff;
      --energy: 0;
      --shake: 0px;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--bg);
      color: var(--white);
      font-family: Arial, Helvetica, sans-serif;
      touch-action: none;
      user-select: none;
    }

    body {
      background:
        radial-gradient(circle at 50% -10%, rgba(255,213,106,.25), transparent 28%),
        radial-gradient(circle at 86% 22%, rgba(215,25,63,.22), transparent 28%),
        radial-gradient(circle at 12% 76%, rgba(0,234,255,.12), transparent 34%),
        linear-gradient(180deg, #121016 0%, #05040b 52%, #010104 100%);
      transition: background 2.8s cubic-bezier(.22,1,.36,1);
    }


    body.intro-active,
    body.intro-leaving {
      background:
        radial-gradient(circle at 50% -10%, rgba(255,213,106,.25), transparent 28%),
        radial-gradient(circle at 86% 22%, rgba(215,25,63,.22), transparent 28%),
        radial-gradient(circle at 12% 76%, rgba(0,234,255,.12), transparent 34%),
        linear-gradient(180deg, #121016 0%, #05040b 52%, #010104 100%);
    }

    .intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      padding: 28px;
      background:
        radial-gradient(circle at 50% 18%, rgba(255,236,205,.12), transparent 32%),
        radial-gradient(circle at 86% 26%, rgba(255,88,122,.16), transparent 32%),
        radial-gradient(circle at 12% 80%, rgba(86,0,18,.24), transparent 36%),
        linear-gradient(180deg, #ad1938 0%, #8c142b 42%, #670d20 74%, #3a0712 100%);
      opacity: 1;
      visibility: visible;
      overflow: hidden;
      transition: opacity 3.4s cubic-bezier(.22,1,.36,1);
    }

    .intro-overlay::before {
      content: "";
      position: absolute;
      inset: -12%;
      background:
        radial-gradient(circle at 50% 46%, rgba(255,245,228,.18), rgba(255,245,228,0) 34%),
        linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,0) 46%);
      pointer-events: none;
      opacity: .95;
      transform: scale(1);
      transition:
        transform 2.05s cubic-bezier(.22,1,.36,1),
        opacity 1.7s ease;
    }

    .intro-overlay::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 22vmax;
      height: 22vmax;
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(.18);
      background:
        radial-gradient(circle,
          rgba(255,240,220,.55) 0%,
          rgba(255,210,145,.22) 28%,
          rgba(255,255,255,0) 70%);
      opacity: 0;
      pointer-events: none;
      transition:
        transform 2.1s cubic-bezier(.18,.9,.18,1),
        opacity 1.75s ease;
    }

    .intro-panel {
      position: relative;
      z-index: 1;
      max-width: 330px;
      text-align: center;
      color: #fff6f4;
      text-shadow: 0 0 18px rgba(255,213,106,.10);
      transform: translateY(0) scale(1);
      transition:
        transform 1.15s cubic-bezier(.22,1,.36,1),
        opacity .95s ease;
    }

    .intro-copy {
      margin: 0;
    }

    .intro-copy + .intro-copy {
      margin-top: 26px;
    }

    .intro-text {
      margin: 0;
      font-size: clamp(28px, 7.3vw, 34px);
      line-height: .98;
      font-weight: 400;
      letter-spacing: 0;
      font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", "Apple Chancery", cursive;
    }

    .intro-text .line {
      display: block;
      line-height: .98;
      margin: 0;
      padding: 0;
    }

    .intro-cta {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      margin: 76px auto 0;
      min-width: 230px;
      padding: 14px 22px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.24);
      background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.045)),
        rgba(255,255,255,.07);
      color: #fff8f2;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .10em;
      text-transform: uppercase;
      box-shadow:
        0 16px 34px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.18),
        0 0 22px rgba(255,213,106,.12);
      transform: translateZ(0);
    }

    .intro-cta::before {
      content: "";
      position: absolute;
      top: -45%;
      bottom: -45%;
      width: 42%;
      left: -55%;
      background:
        linear-gradient(100deg,
          rgba(255,255,255,0) 0%,
          rgba(255,236,190,.08) 26%,
          rgba(255,255,255,.46) 50%,
          rgba(255,222,135,.10) 70%,
          rgba(255,255,255,0) 100%);
      transform: translate3d(0,0,0) rotate(10deg);
      animation: introShine 3.8s linear infinite;
      pointer-events: none;
      will-change: transform;
    }

    .intro-cta::after {
      content: "";
      position: absolute;
      inset: 4px;
      border-radius: inherit;
      border: 1px solid rgba(255,225,154,.18);
      opacity: .65;
      pointer-events: none;
    }

    @keyframes introShine {
      from { transform: translate3d(-20%,0,0) rotate(10deg); }
      to { transform: translate3d(420%,0,0) rotate(10deg); }
    }

    body.intro-active #webgl,
    body.intro-active .fallback-scene,
    body.intro-active .app {
      opacity: 0;
      filter: blur(18px);
      transform: scale(1.035);
      transition:
        opacity 2.25s cubic-bezier(.22,1,.36,1) .18s,
        filter 2.25s cubic-bezier(.22,1,.36,1) .18s,
        transform 2.25s cubic-bezier(.22,1,.36,1) .18s;
    }

    body.intro-active .energy-flare,
    body.intro-active .magic-rays,
    body.intro-active .white-strobe,
    body.intro-active .explosion-white {
      opacity: 0 !important;
    }

    body.intro-leaving #webgl,
    body.intro-leaving .fallback-scene,
    body.intro-leaving .app,
    body:not(.intro-active) #webgl,
    body:not(.intro-active) .fallback-scene,
    body:not(.intro-active) .app {
      opacity: 1;
      filter: blur(0);
      transform: scale(1);
    }

    body.intro-leaving .intro-overlay {
      opacity: 0;
      pointer-events: none;
      transition: opacity 3.4s cubic-bezier(.22,1,.36,1);
    }

    body.intro-leaving .intro-overlay::before {
      opacity: .28;
      transform: scale(1.22);
    }

    body.intro-leaving .intro-overlay::after {
      opacity: .42;
      transform: translate(-50%, -50%) scale(6.8);
    }

    body.intro-leaving .intro-panel {
      transform: translateY(-24px) scale(.965);
      opacity: 0;
      transition: transform 1.35s cubic-bezier(.22,1,.36,1), opacity 1.15s ease;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 38px 38px;
      transform: perspective(620px) rotateX(64deg) translateY(31vh) scale(1.55);
      transform-origin: center bottom;
      mask-image: radial-gradient(circle at center, black 0 37%, transparent 76%);
      opacity: .62;
      animation: gridMove 4s linear infinite;
      pointer-events: none;
    }

    @keyframes gridMove {
      from { background-position: 0 0, 0 0; }
      to { background-position: 0 38px, 0 38px; }
    }

    #webgl {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100svh;
      z-index: 2;
      display: block;
    }

    .energy-flare {
      position: fixed;
      left: 50%;
      top: 42%;
      width: min(112vw, 760px);
      height: min(112vw, 760px);
      transform: translate(-50%, -50%) scale(var(--flare-scale, 1));
      border-radius: 50%;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(circle at center,
          rgba(255,255,255,.68) 0%,
          rgba(255,255,255,.36) 12%,
          rgba(255,213,106,.52) 24%,
          rgba(255,72,106,.24) 44%,
          rgba(255,255,255,0) 78%);
      opacity: var(--flare-opacity, 0);
      mix-blend-mode: screen;
      transition: opacity .18s ease-out, transform .18s ease-out;
      will-change: opacity, transform;
    }

    .magic-rays {
      position: fixed;
      left: 50%;
      top: 42%;
      width: min(120vw, 820px);
      height: min(120vw, 820px);
      transform: translate(-50%, -50%) rotate(var(--rays-rotation, 0deg)) scale(var(--rays-scale, 1));
      border-radius: 50%;
      z-index: 1;
      pointer-events: none;
      background:
        conic-gradient(
          from 0deg,
          rgba(255,255,255,0) 0deg 14deg,
          rgba(255,255,255,.52) 14deg 16deg,
          rgba(255,213,106,.66) 16deg 22deg,
          rgba(255,255,255,0) 21deg 44deg,
          rgba(255,72,106,.45) 44deg 48deg,
          rgba(255,255,255,0) 48deg 76deg,
          rgba(255,255,255,.32) 76deg 78deg,
          rgba(255,255,255,0) 78deg 360deg
        );
      opacity: var(--rays-opacity, 0);
      mix-blend-mode: screen;
      filter: blur(6px);
      transition: opacity .16s ease-out, transform .16s ease-out;
      will-change: opacity, transform;
    }

    .white-strobe {
      position: fixed;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 42%,
          rgba(255,255,255,.95),
          rgba(255,255,255,.55) 14%,
          rgba(255,255,255,.18) 28%,
          rgba(255,255,255,0) 46%);
      mix-blend-mode: screen;
      opacity: var(--strobe-opacity, 0);
      transition: opacity .22s ease-in-out;
      will-change: opacity;
    }

    body.effects-paused .energy-flare,
    body.effects-paused .magic-rays,
    body.effects-paused .white-strobe {
      opacity: 0 !important;
      transition: opacity .25s ease-out !important;
    }

    .explosion-white {
      position: fixed;
      inset: 0;
      z-index: 25;
      pointer-events: none;
      background: #fff;
      opacity: 0;
      transition: opacity .35s ease-in;
      will-change: opacity;
      display: grid;
      place-items: center;
      padding: 18px;
      box-sizing: border-box;
    }

    body.exploding .explosion-white {
      opacity: 1;
      transition: opacity .18s ease-in;
    }

    body.showing-result .explosion-white,
    body.showing-result .white-strobe,
    body.showing-result .energy-flare,
    body.showing-result .magic-rays,
    body.showing-result #webgl,
    body.showing-result .fallback-scene {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.showing-result .result,
    body.showing-result .result * {
      visibility: visible !important;
    }

    .app {
      position: relative;
      z-index: 5;
      width: 100vw;
      height: 100svh;
      display: grid;
      grid-template-rows: auto 1fr auto;
      padding: 18px 16px 18px;
      overflow: hidden;
      transform: none;
      pointer-events: none;
    }

    body.showing-result .app {
      z-index: 35;
    }

    body.showing-result .header,
    body.showing-result .stage-spacer,
    body.showing-result .controller {
      opacity: 0;
      pointer-events: none;
    }

    .header,
    .controller,
    .result {
      pointer-events: auto;
    }

    .header {
      display: grid;
      justify-items: center;
      text-align: center;
      padding-top: 2px;
    }

    .energy-counter {
      min-width: 128px;
      padding: 10px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)),
        rgba(8,7,20,.68);
      box-shadow:
        0 14px 30px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.18),
        0 0 calc(8px + var(--energy) * .42px) rgba(255,213,106,.40),
        0 0 calc(2px + var(--energy) * .26px) rgba(255,72,106,.28);
      color: #fff;
      font-size: clamp(28px, 9vw, 42px);
      font-weight: 1000;
      letter-spacing: -.04em;
      line-height: 1;
      text-shadow:
        0 0 calc(6px + var(--energy) * .22px) rgba(255,213,106,.76),
        0 0 calc(2px + var(--energy) * .18px) rgba(255,72,106,.42);
      backdrop-filter: blur(14px);
      transition: box-shadow .12s linear, text-shadow .12s linear;
    }

    .stage-spacer {
      min-height: 0;
    }

    .fallback-scene {
      position: fixed;
      left: 0;
      right: 0;
      top: 31%;
      z-index: 3;
      display: grid;
      place-items: center;
      pointer-events: none;
      perspective: 800px;
      opacity: 1;
      transition: opacity .25s ease;
    }

    body.webgl-ready .fallback-scene {
      opacity: 0;
    }

    .fallback-top {
      position: relative;
      width: 190px;
      height: 250px;
      transform-style: preserve-3d;
      animation: fallbackSpin 2.4s linear infinite;
      filter:
        drop-shadow(0 24px 24px rgba(0,0,0,.5))
        drop-shadow(0 0 calc(10px + var(--energy) * .95px) rgba(255,213,106,.78))
        drop-shadow(0 0 calc(4px + var(--energy) * .72px) rgba(255,72,106,.58));
    }

    @keyframes fallbackSpin {
      to { transform: rotateY(360deg); }
    }

    .fallback-heart {
      position: absolute;
      left: 50%;
      top: 42%;
      width: 88px;
      height: 79px;
      transform: translate(-50%, -50%) rotate(-45deg);
      border-radius: 22px 22px 16px 16px;
      background:
        radial-gradient(circle at 32% 24%, #fff6f7, #ff7a8d 14%, #ff1f4b 42%, #c3002f 68%, #460510 100%);
      border: 7px solid #ffe08a;
      box-shadow:
        inset 0 10px 18px rgba(255,255,255,.42),
        inset 0 -22px 28px rgba(0,0,0,.34),
        0 0 calc(10px + var(--energy) * 1.05px) rgba(255,213,106,.92),
        0 0 calc(4px + var(--energy) * .72px) rgba(255,72,106,.62);
    }

    .fallback-heart::before,
    .fallback-heart::after {
      content: "";
      position: absolute;
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: inherit;
      border: inherit;
      box-shadow: inherit;
    }

    .fallback-heart::before {
      left: 0;
      top: -44px;
    }

    .fallback-heart::after {
      left: 44px;
      top: 0;
    }

    .controller {
      display: grid;
      justify-items: center;
      padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .boost {
      position: relative;
      width: 172px;
      height: 88px;
      border-radius: 24px;
      border: 2px solid rgba(255,255,255,.22);
      background:
        linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 26%),
        linear-gradient(180deg, #ff6a82 0%, #d7193f 54%, #6a0518 100%);
      box-shadow:
        0 10px 0 rgba(0,0,0,.18),
        0 18px 34px rgba(0,0,0,.40),
        inset 0 4px 12px rgba(255,255,255,.26),
        inset 0 -18px 26px rgba(0,0,0,.28),
        0 0 calc(14px + var(--energy) * .32px) rgba(255,213,106,.44),
        0 0 calc(4px + var(--energy) * .16px) rgba(255,72,106,.24);
      cursor: pointer;
      touch-action: manipulation;
      transition: opacity .22s ease, transform .045s ease-out, filter .16s ease, box-shadow .045s ease-out;
    }

    .boost:active,
    .boost.tap-pop {
      transform: translateY(6px) scale(.978);
      box-shadow:
        0 4px 0 rgba(0,0,0,.18),
        0 8px 14px rgba(0,0,0,.32),
        inset 0 3px 10px rgba(255,255,255,.18),
        inset 0 -12px 18px rgba(0,0,0,.28),
        0 0 22px rgba(255,213,106,.20);
    }

    .boost.hidden {
      opacity: 0;
      transform: translateY(28px) scale(.92);
      filter: blur(12px);
      pointer-events: none;
    }

    .boost-content {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 16px;
      text-align: center;
      z-index: 2;
    }

    .boost-icon {
      display: none;
    }

    .boost-title {
      margin: 0;
      font-size: 28px;
      line-height: 1;
      font-weight: 700;
      font-style: italic;
      font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", "Apple Chancery", cursive;
      letter-spacing: .01em;
      white-space: nowrap;
      text-transform: none;
      color: #fff7f9;
      text-shadow: 0 0 16px rgba(255,255,255,.22), 0 0 8px rgba(255,213,106,.14);
    }

    .boost-copy,
    .boost-arrow,
    .hint,
    .boost-track {
      display: none;
    }

    .result {
      position: fixed;
      inset: 0;
      z-index: 2147483646;
      display: grid;
      place-items: center;
      padding: 18px;
      background: #ffffff;
      opacity: 0;
      pointer-events: none;
      transition: opacity 1.25s cubic-bezier(.22,1,.36,1);
      backdrop-filter: none;
      overflow: hidden;
    }

    .result::before {
      content: "";
      position: absolute;
      inset: -18%;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 46%, rgba(255,213,106,.24), rgba(255,213,106,0) 34%),
        radial-gradient(circle at 34% 62%, rgba(255,72,106,.10), rgba(255,72,106,0) 38%),
        radial-gradient(circle at 68% 30%, rgba(255,255,255,.42), rgba(255,255,255,0) 30%);
      opacity: 0;
      transform: scale(.86) rotate(-2deg);
      filter: blur(10px);
      transition:
        opacity 1.7s cubic-bezier(.22,1,.36,1) .08s,
        transform 2.2s cubic-bezier(.18,.9,.18,1) .08s,
        filter 1.8s ease .08s;
    }

    .result.show {
      opacity: 1;
      pointer-events: auto;
    }

    .result.show::before {
      opacity: 1;
      transform: scale(1.06) rotate(0deg);
      filter: blur(0);
    }

    .result-stack {
      position: relative;
      z-index: 2;
      width: min(90vw, 410px);
      display: grid;
      justify-items: center;
      gap: 16px;
      pointer-events: auto;
    }

    .result-label {
      position: relative;
      z-index: 3;
      margin: 0;
      color: #7c1930;
      font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", "Apple Chancery", cursive;
      font-size: clamp(34px, 9vw, 48px);
      line-height: 1;
      font-weight: 400;
      letter-spacing: -.01em;
      text-align: center;
      opacity: 0;
      filter: blur(10px);
      transform: translateY(18px) scale(.96);
      text-shadow:
        0 0 22px rgba(255,213,106,.34),
        0 10px 26px rgba(124,25,48,.14);
      transition:
        opacity 1.35s ease,
        transform 1.65s cubic-bezier(.16,1,.3,1),
        filter 1.45s ease;
      will-change: opacity, transform, filter;
    }

    .result.show-label .result-label {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scale(1);
    }

    .result-card {
      position: relative;
      z-index: 2;
      width: min(88vw, 380px);
      padding: 24px 22px 22px;
      border-radius: 30px;
      text-align: center;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,238,.96));
      border: 2px solid rgba(193,148,55,.58);
      box-shadow:
        0 28px 80px rgba(84,35,10,.22),
        0 0 0 1px rgba(255,255,255,.92) inset,
        inset 0 -12px 22px rgba(212,181,124,.14);
      opacity: 0;
      filter: blur(14px);
      transform: translateY(38px) scale(.88);
      transition:
        transform 1.65s cubic-bezier(.16,1,.3,1) .20s,
        opacity 1.35s ease .24s,
        filter 1.45s ease .24s;
      will-change: transform, opacity, filter;
    }

    .result.show .result-card {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scale(1);
    }

    .result-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% -10%, rgba(255,221,150,.34), transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,0) 44%);
      pointer-events: none;
    }

    .result-inner {
      position: relative;
      z-index: 2;
    }

    .avatar {
      width: 94px;
      height: 94px;
      margin: 0 auto 14px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background:
        radial-gradient(circle at 34% 24%, #fff, #fff7df 22%, #f8d98f 62%, #efc45f 100%);
      border: 1px solid rgba(196,150,53,.36);
      box-shadow:
        0 10px 24px rgba(122,82,16,.18),
        inset 0 6px 14px rgba(255,255,255,.85);
      transform: none;
      overflow: hidden;
    }

    .avatar img {
      width: 72px;
      height: 72px;
      object-fit: contain;
      display: block;
    }

    .result-title {
      margin: 0;
      font-size: 34px;
      line-height: .94;
      letter-spacing: -.04em;
      text-transform: none;
      color: #7c1930;
      background: none;
      -webkit-background-clip: initial;
    }

    .result-kicker {
      margin: 10px 0 0;
      color: #b2842f;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .02em;
      text-transform: none;
    }

    .result-text {
      margin: 16px auto 20px;
      max-width: 290px;
      color: #5e4f47;
      font-size: 16px;
      line-height: 1.42;
    }

    .result-preface {
      color: #6a5b53;
    }

    .reset {
      display: none !important;
    }

    .reset:active {
      display: none !important;
    }


    @media (max-height: 720px) {
  
    body.effects-paused .bg-rays,
    body.effects-paused .bg-rays-2,
    body.effects-paused .energy-flare,
    body.effects-paused .energy-burst,
    body.effects-paused .magic-flash,
    body.effects-paused .white-strobe {
      animation: none !important;
      transition: opacity .35s ease-out, transform .35s ease-out, filter .35s ease-out !important;
    }

    .app {
        padding-top: 12px;
      }

      .fallback-scene {
        top: 29%;
        transform: scale(.85);
      }

      .boost {
        width: 150px;
        height: 82px;
        border-radius: 22px;
      }

      .boost-title {
        font-size: 26px;
      }
    }
  
    #finalCardOverlay,
    #finalCardOverlay * {
      visibility: visible !important;
    }

    #finalCardOverlay {
      opacity: 1 !important;
      transform: none !important;
    }


/* Bloqueio para desktop horizontal */
.desktop-block-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,236,205,.12), transparent 32%),
    radial-gradient(circle at 86% 26%, rgba(255,88,122,.16), transparent 32%),
    radial-gradient(circle at 12% 80%, rgba(86,0,18,.24), transparent 36%),
    linear-gradient(180deg, #ad1938 0%, #8c142b 42%, #670d20 74%, #3a0712 100%);
  overflow: hidden;
  text-align: center;
  pointer-events: auto;
}

.desktop-block-overlay::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,245,228,.18), rgba(255,245,228,0) 34%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,0) 46%);
  pointer-events: none;
  opacity: .95;
}

.desktop-block-message {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0;
  color: #fff6f4;
  font-size: clamp(42px, 6vw, 86px);
  line-height: .92;
  font-weight: 1000;
  letter-spacing: -.05em;
  text-transform: uppercase;
  text-shadow:
    0 18px 42px rgba(0,0,0,.26),
    0 0 24px rgba(255,213,106,.14);
}

body.desktop-blocked .desktop-block-overlay {
  display: grid;
}

body.desktop-blocked #webgl,
body.desktop-blocked .fallback-scene,
body.desktop-blocked .app,
body.desktop-blocked .intro-overlay,
body.desktop-blocked .energy-flare,
body.desktop-blocked .magic-rays,
body.desktop-blocked .white-strobe,
body.desktop-blocked .explosion-white {
  pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) and (orientation: landscape) and (min-width: 768px) {
  .desktop-block-overlay {
    display: grid;
  }
}