/* Legacy browser notice — shown when ES modules not supported */
    .no-modules body > *:not(#legacy-notice) { display: none !important; }
    #legacy-notice { display: none; }
    .no-modules #legacy-notice {
      display: flex; align-items: center; justify-content: center;
      min-height: 100vh; background: #000; color: #ff00c0;
      font-family: 'Courier New', monospace; font-size: 18px;
      text-align: center; padding: 40px; line-height: 1.6;
    }

    /* ── Capability profile guards ───────────────────────────────────────
       data-profile is set by capability.js BEFORE first paint.
       safe   = no heavy effects, no WebGL dither, no physics
       reduced = no dither, simplified animations
       full    = everything (default modern desktop/mobile)
    ─────────────────────────────────────────────────────────────────── */

    /* Safe profile — hide expensive canvas/WebGL elements immediately */
    html[data-profile="safe"] #ditherCanvas,
    html[data-profile="safe"] #ditherMenu,
    html[data-profile="safe"] #laserSvg,
    html[data-profile="safe"] #gunCursor,
    html[data-profile="safe"] #site-rat-wrap { display: none !important; }

    /* Reduced profile — hide dither only */
    html[data-profile="reduced"] #ditherCanvas,
    html[data-profile="reduced"] #ditherMenu { display: none !important; }

    /* Safe profile — simplify animations */
    html[data-profile="safe"] *,
    html[data-profile="safe"] *::before,
    html[data-profile="safe"] *::after {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
    }
    /* Restore specific intentional transitions in safe mode */
    html[data-profile="safe"] .section-overlay,
    html[data-profile="safe"] .modal-backdrop {
      transition-duration: 0.2s !important;
    }

    /* ── :has() CSS fallbacks for browsers without support ───────────────
       capability.js adds body classes has-lightbox / has-backdrop / has-tattoos
       when :has() is not supported. Mirrors the :has() rules below.
    ─────────────────────────────────────────────────────────────────── */
    body.has-lightbox .mute-btn-wrap,
    body.has-lightbox .toggle-btn-wrap,
    body.has-backdrop .mute-btn-wrap,
    body.has-backdrop .toggle-btn-wrap,
    body.has-tattoos  .mute-btn-wrap,
    body.has-tattoos  .toggle-btn-wrap { z-index: 800; }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    *:focus { outline: none; }



    /* Mobile WebView compatibility */

    html {

      -webkit-text-size-adjust: 100%;

      -moz-text-size-adjust: 100%;

      text-size-adjust: 100%;

    }

    button, a, [role="button"] {

      -webkit-tap-highlight-color: transparent;

    }



    /* ---------- Preloader ---------- */

    .preloader {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background: #000;

      z-index: 999999999;

      display: flex;

      align-items: center;

      justify-content: center;

      transition: opacity 0.5s ease, visibility 0.5s ease;

    }

    .preloader.hidden {

      opacity: 0;

      visibility: hidden;

      pointer-events: none;

    }

    .preloader-content {

      text-align: center;

    }

    .preloader-spinner {

      width: 60px;

      height: 60px;

      border: 3px solid rgba(255, 0, 192, 0.2);

      border-top-color: #ff00c0;

      border-radius: 50%;

      animation: preloaderSpin 1s linear infinite;

      margin: 0 auto 20px;

      box-shadow: 0 0 20px rgba(255, 0, 192, 0.3);

    }

    @keyframes preloaderSpin {

      to { transform: rotate(360deg); }

    }

    .preloader-text {

      color: #ff00c0;

      font-family: 'Ubuntu', sans-serif;

      font-size: 14px;

      letter-spacing: 4px;

      text-transform: uppercase;

      animation: preloaderPulse 1.5s ease-in-out infinite;

    }



/* ---------- Dithering Shader Canvas ---------- */

.dither-canvas {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: 999999994;

  visibility: hidden;

}

.dither-canvas.active {

  visibility: visible;

}



/* Dithering Control Menu */

.dither-menu {

  position: fixed;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  z-index: 999999997;

  display: flex;

  flex-direction: row;

  align-items: center;

}



.dither-toggle {

  width: 18px;

  height: 60px;

  border: none;

  background: transparent;

  cursor: pointer;

  padding: 0;

  flex-shrink: 0;

}



.dither-controls {

  display: none;

  flex-direction: column;

  gap: 10px;

  background: rgba(10, 0, 20, 0.95);

  border: 2px solid #ff00c0;

  padding: 10px;

}



.dither-menu.open .dither-controls {

  display: flex;

}



.dither-row {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.dither-row-inline {

  display: flex;

  align-items: center;

  gap: 6px;

}



.dither-label {

  color: #ff00c0;

  font-family: 'Courier New', monospace;

  font-size: 9px;

  letter-spacing: 1px;

  text-transform: uppercase;

}



.dither-controls input[type="range"] {

  width: 90px;

  height: 4px;

  background: rgba(255, 0, 192, 0.3);

  outline: none;

  -webkit-appearance: none;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

}



.dither-controls input[type="range"]::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 12px;

  height: 12px;

  background: #ff00c0;

  cursor: pointer;

  box-shadow: 0 0 8px rgba(255, 0, 192, 0.6);

}



.dither-controls input[type="range"]::-moz-range-thumb {

  width: 12px;

  height: 12px;

  background: #ff00c0;

  cursor: pointer;

  border: none;

  box-shadow: 0 0 8px rgba(255, 0, 192, 0.6);

}



.dither-value {

  color: #ff00c0;

  font-family: 'Courier New', monospace;

  font-size: 9px;

  min-width: 24px;

}



.dither-select {

  background: rgba(10, 0, 20, 0.95);

  border: 1px solid #ff00c0;

  color: #ff00c0;

  font-family: 'Courier New', monospace;

  font-size: 9px;

  letter-spacing: 1px;

  padding: 3px 4px;

  cursor: pointer;

  width: 100%;

  outline: none;

}



.dither-select option {

  background: #0a0014;

  color: #ff00c0;

}



@media (max-width: 768px) {

  .dither-controls input[type="range"] {

    width: 70px;

  }

}



    body { background: #000; overflow: hidden; }



    body.hide-native-cursor {

      cursor: none !important;

    }



    body.hide-native-cursor *:not(.hotspot-dot):not(.vector-dot) {

      cursor: none !important;

    }



    #gunCursor {

      position: fixed;

      left: 0;

      top: 0;

      width: 0;

      height: 0;

      pointer-events: none;

      /* Above the cookie banner (z:99999) and legal links (z:400) — the gun
         must remain visible even when the cookie modal is showing. */
      z-index: 100000;

      transform: translate3d(0,0,0);

      display: none;

    }

    #gunCursor img {

      display: block;

      width: 64px;

      height: 64px;

      transform-origin: 0 0;

      image-rendering: auto;

    }



    .site-logo {

      position: fixed;

      top: -44px;

      left: 50%;

      transform: translateX(-50%);

      z-index: 100;

      pointer-events: none;

      width: 211px;

      max-width: 211px;

    }



    @media (max-width: 768px) {

      .site-logo {

        top: -64px;

        width: 148px;

        max-width: 148px;

      }

    }



    .site-logo img {

      display: block;

      width: 100%;

      height: auto;

      object-fit: contain;

      image-rendering: -webkit-optimize-contrast;

      image-rendering: crisp-edges;

    }



    .logo-3d-canvas, model-viewer {

      display: block;

      width: 100%;

      height: 100%;

      min-height: 200px;

      pointer-events: none;

      filter: drop-shadow(0 0 1px #ff00c0) drop-shadow(0 0 2px rgba(255, 0, 192, 0.2));

    }



    /* Make 3D model material pink */

    model-viewer::part(model) {

      --model-material-color: #ff00c0;

      --model-metalness: 0.3;

      --model-roughness: 0.4;

    }



    .logo-3d-canvas.hit {

      filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%) drop-shadow(0 0 10px #0f0);

    }



    /* ---------- Logo Neon Pink Glow Animation ---------- */

    #siteLogoImg {

      filter: url(#gemma-glow) drop-shadow(0 0 8px #ff00c0) drop-shadow(0 0 16px #ff00c0);

      animation: neonPulse 2s ease-in-out infinite;

    }

    #siteLogoImg.hit {

      filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%) drop-shadow(0 0 10px #0f0);

    }

    @keyframes neonPulse {

      0%, 100% {

        filter: url(#gemma-glow) drop-shadow(0 0 8px #ff00c0) drop-shadow(0 0 16px #ff00c0) drop-shadow(0 0 24px rgba(255, 0, 192, 0.5));

        opacity: 1;

      }

      50% {

        filter: url(#gemma-glow) drop-shadow(0 0 20px #ff00c0) drop-shadow(0 0 40px #ff00c0) drop-shadow(0 0 60px rgba(255, 0, 192, 0.8));

        opacity: 0.95;

      }

    }

    .site-logo:hover #siteLogoImg {

      animation: neonFlicker 0.15s ease-in-out infinite;

    }

    @keyframes neonFlicker {

      0%, 100% { filter: drop-shadow(0 0 30px #ff00c0) drop-shadow(0 0 60px #ff00c0) drop-shadow(0 0 90px #ff00c0); }

      50% { filter: drop-shadow(0 0 10px #ff00c0) drop-shadow(0 0 20px #ff00c0); }

    }



    html, body {

      width: 100%; height: 100%;

      background: #000;

      overflow: hidden;

      font-family: 'Ubuntu', sans-serif;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      -webkit-user-select: none;

      -moz-user-select: none;

      -ms-user-select: none;

    }



    body.grayscale-mode {

      filter: grayscale(100%);

      transition: filter 0.6s ease;

    }



    body {

      display: flex;

      justify-content: center;

      align-items: center;

      cursor: url('https://oyestupida.xyz/siteweb/mouse.png') 0 0, auto;

      background-image: url('https://oyestupida.xyz/siteweb/img/bg1.png');

      background-size: cover;

      background-position: center;

      background-repeat: no-repeat;

      transition: background-image 0.6s ease;

      /* CSS variables for green dot cursor position on mobile */

      --cursor-x: 50%;

      --cursor-y: 50%;

    }



    body.night-mode {

      background-image: url('https://oyestupida.xyz/siteweb/img/bg_night.png');

    }



    /* ---------- Ring ---------- */

    .ring {

      position: fixed;

      top: 40%;

      left: 50%;

      transform: translate(-50%, -50%);

      width: 360px;

      height: 360px;

      z-index: 4000;

      pointer-events: none;

      transition: opacity 0.4s, transform 0.4s;

    }



    .ring.hidden {

      opacity: 0;

      transform: translate(-50%, -50%) scale(0.6);

      pointer-events: none;

    }



    body.modal-open .ring {

      z-index: 5;

    }



    .ring-btn {

      position: absolute;

      width: 64px; height: 64px;

      border-radius: 50%;

      touch-action: manipulation;

      border: 2px solid #ff00c0;

      background: rgba(255, 105, 180, 0.1);

      color: #ff00c0;

      font-family: 'Courier New', monospace;

      font-size: 10px; font-weight: bold;

      text-align: center;

      display: flex; align-items: center; justify-content: center;

      transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, opacity 0.4s ease;

      text-transform: uppercase;

      letter-spacing: 0.5px;

      box-shadow: inset 0 0 0 1px #000;

      z-index: 4000;

      pointer-events: auto;

      touch-action: none;

      -webkit-user-select: none;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      -webkit-touch-callout: none;

    }



    .ring-btn * {

      -webkit-user-select: none;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      -webkit-touch-callout: none;

    }



    .ring-btn.dragging {

      transition: none !important;

      z-index: 5000 !important;

      will-change: left, top;

      transform: translateZ(0);

    }



    .ring-btn .tarot-button-label,

    .ring-btn .mini-btn-label,

    .ring-btn .contact-button-label {

      display: none;

    }



    .ring-btn-tooltip {

      position: absolute;

      bottom: 130%;

      left: 50%;

      transform: translateX(-50%) translateY(4px) scale(0.85);

      white-space: nowrap;

      font-size: 20px;

      text-transform: uppercase;

      letter-spacing: 1px;

      opacity: 0;

      padding: 12px 30px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-weight: bold;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      pointer-events: none;

      transition: opacity 0.2s ease, transform 0.2s ease;

      z-index: 99999999;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }

    .ring-btn:hover .ring-btn-tooltip,

    .ring-btn.laser-hover .ring-btn-tooltip {

      opacity: 1;

      transform: translateX(-50%) translateY(0) scale(1);

    }



    .frame-tooltip {

      position: fixed;

      bottom: auto;

      top: 62%;

      left: 50%;

      transform: translateX(-50%) translateY(4px) scale(0.85);

      white-space: nowrap;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      opacity: 0;

      padding: 12px 30px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      pointer-events: none;

      transition: opacity 0.2s ease, transform 0.2s ease;

      z-index: 99999999;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }

    .frame-tooltip.visible {

      opacity: 1;

      transform: translateX(-50%) translateY(0) scale(1);

    }



    .couch-tooltip {

      position: fixed;

      transform: translateX(-50%) translateY(4px) scale(0.85);

      white-space: nowrap;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      opacity: 0;

      padding: 10px 22px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      pointer-events: none;

      transition: opacity 0.2s ease, transform 0.2s ease;

      z-index: 99999999;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }

    .couch-tooltip.visible {

      opacity: 1;

      transform: translateX(-50%) translateY(0) scale(1);

    }



    /* Center-right fixed image (e.g. toggle/branding) */

    .center-right-img {

      width: 72px;

      height: auto;

      cursor: inherit;

      filter: none;

    }



    /* Green dot cursor — hidden by default, only shown inside modals */

    body.hide-native-cursor::after {

      content: '';

      position: fixed;

      width: 20px;

      height: 20px;

      background: #0f0;

      border-radius: 50%;

      pointer-events: none;

      z-index: 99999999999;

      transform: translate(-50%, -50%);

      left: var(--cursor-x, 50%);

      top: var(--cursor-y, 50%);

      box-shadow: 0 0 12px #0f0, 0 0 24px rgba(0,255,0,0.5);

      display: none; /* gun cursor visible on desktop — hide dot by default */

    }



    /* Small screens (desktop or phone): always show green dot instead of gun */

    @media (max-width: 768px) {

      body.hide-native-cursor::after { display: block; }

    }



    /* Modals on any screen size: show green dot */

    body.modal-open.hide-native-cursor::after {

      display: block;

    }



    /* Hide green dot inside the tattoo image lightbox (loupe is the cursor) */

    body.tattoo-lightbox-open.hide-native-cursor::after {

      display: none !important;

    }



    body.modal-open.hide-native-cursor.cursor-invert-close::after {

      background: rgba(0, 255, 0, 0.08);

      border: 1px solid #0f0;

      box-shadow: 0 0 10px rgba(0,255,0,0.8), 0 0 24px rgba(0,255,0,0.35);

      -webkit-backdrop-filter: invert(1) contrast(1.1);
      backdrop-filter: invert(1) contrast(1.1);

      -webkit-backdrop-filter: invert(1) contrast(1.1);

    }



    /* Trail effect for dragged buttons - MUST override all inherited transitions */

    body .ring-btn-trail,

    body .frame-btn-trail {

      position: fixed !important;

      pointer-events: none !important;

      z-index: 3500 !important;

      opacity: 1 !important;

      transition: opacity 2.5s ease-out, transform 2.5s ease-out !important;

      transform: scale(0.92) !important;

      filter: brightness(1.15) !important;

    }



    body .ring-btn-trail.fading,

    body .frame-btn-trail.fading {

      opacity: 0 !important;

      transform: scale(0.8) !important;

    }



    /* Font Selector Dropdown */

    .font-toggle-dot {

      position: fixed;

      top: 8px;

      left: 8px;

      width: 14px;

      height: 14px;

      border: none;

      background: transparent;

      opacity: 0;

      cursor: pointer;

      z-index: 10001;

      pointer-events: auto;

    }



    .font-selector-wrap {

      position: fixed !important;

      top: 16px !important;

      left: 16px !important;

      z-index: 10000 !important;

      pointer-events: auto !important;

      display: none;

    }



    .font-selector-wrap.is-open {

      display: block;

    }



    .font-selector {

      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      -webkit-appearance: none;

      -moz-appearance: none;

      background: rgba(10, 0, 20, 0.95);

      border: 2px solid #ff00c0;

      color: #ff00c0;

      font-family: 'Courier New', monospace;

      font-size: 12px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      padding: 10px 36px 10px 14px;

      border-radius: 0;

      cursor: pointer;

      min-width: 180px;

      box-shadow: 0 0 12px rgba(255, 0, 192, 0.4);

      transition: all 0.2s ease;

      pointer-events: auto !important;

      position: relative;

    }



    .font-selector:hover {

      background: rgba(255, 0, 192, 0.1);

      box-shadow: 0 0 14px rgba(255, 0, 192, 0.5);

    }



    .font-selector:focus {

      outline: none;

      box-shadow: 0 0 16px rgba(255, 0, 192, 0.6);

    }



    /* Custom dropdown arrow */

    .font-selector-wrap::after {

      content: '▼';

      position: absolute;

      right: 12px;

      top: 50%;

      transform: translateY(-50%);

      color: #ff00c0;

      font-size: 10px;

      pointer-events: none;

    }



    /* Style dropdown options */

    .font-selector option {

      background: rgba(10, 0, 20, 0.95);

      color: #ff00c0;

      font-family: 'Courier New', monospace;

      font-size: 12px;

      padding: 8px;

    }



    /* Hide on small screens to avoid clutter */

    @media (max-width: 768px) {

      .font-toggle-dot {

        top: 6px;

        left: 6px;

        width: 16px;

        height: 16px;

      }



      .font-selector-wrap {

        top: 10px !important;

        left: 10px !important;

      }

      .font-selector {

        font-size: 10px;

        padding: 8px 28px 8px 10px;

        min-width: 140px;

      }

    }



    /* Gun cursor - prevent color shift when flipped.
       NOTE: z-index must match the value on the earlier #gunCursor rule
       (~line 461) — keep both at 100000 so the gun stays above the
       cookie banner (z:99999). Equal specificity means the later rule
       wins; if you lower this one the gun will disappear over cookies. */

    #gunCursor {

      position: fixed;

      pointer-events: none;

      z-index: 100000;

    }

    #gunCursor img {

      backface-visibility: hidden;

      -webkit-backface-visibility: hidden;

      transform: translateZ(0);

      -webkit-transform: translateZ(0);

      image-rendering: auto;

    }



    @media (max-width: 768px) {

      .center-right-img {

        width: 58px;

      }



      .mute-btn {

        width: 38px;

        height: 38px;

      }



      /* Show green dot inside modals on small screens */

      body.modal-open.hide-native-cursor::after {

        display: block !important;

      }

    }



    @media (max-width: 640px) {

      #laserSvg {

        display: none;

      }

    }







    @media (hover: none), (pointer: coarse) {

      #laserSvg {

        display: none;

      }

    }



    /* Tarot tooltip: fixed near visual center of spread cards */

    .ring-btn.tarot-btn .ring-btn-tooltip {

      top: auto;

      bottom: auto;

      left: 50%;

      /* Sit just below the container, not scaled by container height */

      margin-top: 0;

      transform: translateX(-50%) translateY(calc(50% + 20px)) scale(0.9);

      position: absolute;

      top: 50%;

    }



    .ring-btn.tarot-btn:hover .ring-btn-tooltip,

    .ring-btn.tarot-btn.laser-hover .ring-btn-tooltip {

      transform: translateX(-50%) translateY(calc(50% + 20px)) scale(1);

      opacity: 1;

    }



    /* CAKES button tooltip: centered above */

    .ring-btn.cakes-btn .ring-btn-tooltip {

      top: auto;

      bottom: calc(100% + 10px);

      left: 50%;

      transform: translateX(-50%) translateY(-4px) scale(0.9);

    }



    .ring-btn.cakes-btn:hover .ring-btn-tooltip,

    .ring-btn.cakes-btn.laser-hover .ring-btn-tooltip {

      transform: translateX(-50%) translateY(0) scale(1);

    }



    /* CONTACT button tooltip: nudge up */

    .ring-btn.contact-btn .ring-btn-tooltip {

      bottom: calc(120% + 30px);

    }



    /* TATTOOS button tooltip: lift a bit */

    .ring-btn.tattoos-btn .ring-btn-tooltip {

      bottom: calc(120% + 20px);

    }



    /* STURM button is huge -> lift tooltip more */

    .ring-btn.sturm-btn .ring-btn-tooltip {

      bottom: calc(120% + 60px);

    }



    .ring-btn:hover,

    .ring-btn.laser-hover {

      background: #ff00c0;

      color: #000;

      box-shadow: 0 0 20px rgba(255,0,192,0.6), 0 0 40px rgba(255,0,192,0.3);

      transform: scale(1.15);

    }



    .ring-btn:active {

      transform: scale(0.95);

      background: #ff00c0;

    }



    .ring-btn.selected {

      background: #ff00c0;

      color: #000;

      box-shadow: 0 0 14px rgba(255,0,192,0.5);

    }



    /* gentle float */

    @keyframes btnFloatA { 0%,100%{ transform: translateY(0px);  } 50%{ transform: translateY(-7px); } }

    @keyframes btnFloatB { 0%,100%{ transform: translateY(-4px); } 50%{ transform: translateY(4px);  } }

    @keyframes btnFloatC { 0%,100%{ transform: translateY(0px);  } 50%{ transform: translateY(-9px); } }

    @keyframes btnFloatD { 0%,100%{ transform: translateY(-3px); } 50%{ transform: translateY(5px);  } }

    @keyframes btnFloatE { 0%,100%{ transform: translateY(-2px); } 50%{ transform: translateY(7px);  } }



    .ring-btn.float-a { animation: btnFloatA 3.2s ease-in-out infinite; }

    .ring-btn.float-b { animation: btnFloatB 2.9s ease-in-out infinite; }

    .ring-btn.float-c { animation: btnFloatC 3.7s ease-in-out infinite; }

    .ring-btn.float-d { animation: btnFloatD 2.5s ease-in-out infinite; }

    .ring-btn.float-e { animation: btnFloatE 3.0s ease-in-out infinite; }



    .ring-btn.dragging.float-a, .ring-btn.dragging.float-b, .ring-btn.dragging.float-c,

    .ring-btn.dragging.float-d, .ring-btn.dragging.float-e { animation: none; }



    /* sparkle dots */

    @keyframes sparkleLife {

      0%   { opacity: 1; transform: translate(-50%,-50%) scale(0)   rotate(0deg);  }

      40%  { opacity: 1; transform: translate(-50%,-50%) scale(1.2) rotate(25deg); }

      100% { opacity: 0; transform: translate(-50%,-50%) scale(0.1) rotate(55deg); }

    }



    .btn-sparkle {

      position: fixed;

      pointer-events: none;

      z-index: 3999;

      border-radius: 1px;

      -webkit-clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
      clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);

      animation: sparkleLife 0.85s ease-out forwards;

    }



    .ring-btn.hit {

      animation: btnHit 0.4s ease-out;

    }



    .ring-btn.vibrate-once {

      animation: ringVibrate 0.18s linear 0s 2;

    }



    @keyframes ringVibrate {

      0%   { transform: translateX(0); }

      25%  { transform: translateX(-2px); }

      50%  { transform: translateX(2px); }

      75%  { transform: translateX(-1px); }

      100% { transform: translateX(0); }

    }



    .ring-btn.tarot-btn {

      width: 120px;

      height: 120px;

      border-radius: 12px;

      padding: 0;

      background: transparent;

      border-color: transparent;

      box-shadow: none;

      overflow: visible;

    }



    .ring-btn.tarot-btn:hover {

      background: transparent;

      box-shadow: none;

      transform: none;

    }



    .ring-btn.contact-btn {

      width: 80px;

      height: 56px;

      border-radius: 12px;

      padding: 0;

      background: transparent;

      border-color: transparent;

      box-shadow: none;

    }



    .ring-btn.tattoos-btn,

    .ring-btn.cakes-btn,

    .ring-btn.sturm-btn {

      width: 80px;

      height: 56px;

      border-radius: 12px;

      padding: 0;

      background: transparent;

      border-color: transparent;

      box-shadow: none;

    }



    .ring-btn.contact-btn:hover {

      background: transparent;

      box-shadow: none;

      transform: none;

    }



    .ring-btn.tattoos-btn:hover,

    .ring-btn.cakes-btn:hover,

    .ring-btn.cakes-btn.laser-hover,

    .ring-btn.sturm-btn:hover {

      background: transparent;

      border-color: transparent;

      box-shadow: none !important;

      transform: none;

      color: inherit;

    }



    .ring-btn.cakes-btn.selected,

    .ring-btn.cakes-btn.hit {

      background: transparent !important;

      border-color: transparent !important;

      box-shadow: none !important;

      color: inherit !important;

    }



    .ring-btn.tattoos-btn {

      z-index: 3000 !important;

    }



    .ring-btn.tarot-btn {

      z-index: 3000 !important;

    }



    .ring-btn.sturm-btn {

      z-index: 3000 !important;

    }



    .ring-btn.contact-btn {

      z-index: 3000 !important;

    }



    .ring-btn.cakes-btn {

      z-index: 3000 !important;

    }



    /* STURMZX2 & TATTOOS buttons: never show pink selected/hover glow */

    .ring-btn.sturm-btn,

    .ring-btn.sturm-btn:hover,

    .ring-btn.sturm-btn.selected,

    .ring-btn.sturm-btn.hit,

    .ring-btn.tattoos-btn,

    .ring-btn.tattoos-btn:hover,

    .ring-btn.tattoos-btn.selected,

    .ring-btn.tattoos-btn.hit {

      background: transparent !important;

      border-color: transparent !important;

      box-shadow: none !important;

    }



    .ring-btn.contact-btn,

    .ring-btn.contact-btn:hover,

    .ring-btn.contact-btn.laser-hover,

    .ring-btn.contact-btn.selected,

    .ring-btn.contact-btn.hit,

    .ring-btn.tarot-btn,

    .ring-btn.tarot-btn:hover,

    .ring-btn.tarot-btn.laser-hover,

    .ring-btn.tarot-btn.selected,

    .ring-btn.tarot-btn.hit {

      background: transparent !important;

      border-color: transparent !important;

      box-shadow: none !important;

      color: inherit !important;

    }



    .tarot-button-cards {

      position: relative;

      width: 100%;

      height: 100%;

      overflow: visible;

      z-index: 2;

    }



    .tarot-button-card {

      position: absolute;

      width: 28px;

      height: 48px;

      border-radius: 4px;

      overflow: hidden;

      background-size: contain;

      background-position: center;

      background-repeat: no-repeat;

      box-shadow: none;

      filter: hue-rotate(-20deg) saturate(1.6);

      transition: transform 0.3s ease, opacity 0.3s ease;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%) scale(1.6);

    }



    /* Resting = spread (old hover position) */

    .ring-btn.tarot-btn .tarot-button-card.c1 {

      transform: translate(-90%, -30%) rotate(-18deg) scale(2);

    }

    .ring-btn.tarot-btn .tarot-button-card.c2 {

      transform: translate(-50%, -60%) rotate(-6deg) scale(2);

    }

    .ring-btn.tarot-btn .tarot-button-card.c3 {

      transform: translate(-10%, -60%) rotate(6deg) scale(2);

    }

    .ring-btn.tarot-btn .tarot-button-card.c4 {

      transform: translate(30%, -30%) rotate(18deg) scale(2);

    }



    .tarot-button-card.c1 { background-image: url('https://oyestupida.xyz/siteweb/img/tarot/tarot4.png'); z-index: 1; }

    .tarot-button-card.c2 { background-image: url('https://oyestupida.xyz/siteweb/img/tarot/tarot3.png'); z-index: 2; }

    .tarot-button-card.c3 { background-image: url('https://oyestupida.xyz/siteweb/img/tarot/tarot2.png'); z-index: 3; }

    .tarot-button-card.c4 { background-image: url('https://oyestupida.xyz/siteweb/img/tarot/tarot1.png'); z-index: 4; }



    .tarot-button-label {

      position: absolute;

      top: -26px;

      left: 50%;

      transform: translateX(-50%);

      font-size: 20px;

      letter-spacing: 2px;

      text-transform: uppercase;

      color: #ff00c0;

      font-family: 'Courier New', monospace;

      pointer-events: none;

      z-index: 2;

    }



    .contact-button-wrap {

      position: relative;

      width: 100%;

      height: 100%;

      z-index: 2;

    }



    .contact-button-icon {

      position: absolute;

      top: 50%;

      left: 50%;

      width: 200px;

      height: 200px;

      transform: translate(-50%, -50%);

      display: flex;

      align-items: center;

      justify-content: center;

      overflow: visible;

      pointer-events: none;

    }



    .contact-button-icon svg {

      width: 36px;

      height: 36px;

      fill: none;

      stroke: #ff00c0;

      stroke-width: 2.5;

    }



    .contact-button-label {

      position: absolute;

      top: -26px;

      left: 50%;

      transform: translateX(-50%);

      font-size: 20px;

      letter-spacing: 2px;

      text-transform: uppercase;

      color: #ff00c0;

      font-family: 'Courier New', monospace;

      pointer-events: none;

    }



    .mini-btn-wrap {

      position: relative;

      width: 100%;

      height: 100%;

      z-index: 2;

    }



    .mini-btn-label {

      position: absolute;

      top: -26px;

      left: 50%;

      transform: translateX(-50%);

      font-size: 16px;

      letter-spacing: 2px;

      text-transform: uppercase;

      color: #ff00c0;

      font-family: 'Courier New', monospace;

      pointer-events: none;

    }



    .mini-btn-icon {

      position: absolute;

      /* Stretch to fill .mini-btn-wrap exactly using inset instead of the
         width:100%/height:100% + transform:translate(-50%,-50%) pattern.
         The percentage+transform combo can mis-report hit areas on Android
         Chrome and older iOS Safari. top/left/right/bottom:0 on a positioned
         element stretches it to fill its containing block without any math. */
      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      width: auto;

      height: auto;

      transform: none;

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .mini-btn-icon svg {

      width: 34px;

      height: 34px;

      fill: none;

      stroke: #ff00c0;

      stroke-width: 2.3;

    }



    .ring-btn.tarot-btn:hover .tarot-button-card.c1 {

      transform: translate(-120%, -20%) rotate(-28deg) scale(2.5);

    }



    .ring-btn.tarot-btn:hover .tarot-button-card.c2 {

      transform: translate(-55%, -80%) rotate(-9deg) scale(2.5);

    }



    .ring-btn.tarot-btn:hover .tarot-button-card.c3 {

      transform: translate(10%, -80%) rotate(9deg) scale(2.5);

    }



    .ring-btn.tarot-btn:hover .tarot-button-card.c4 {

      transform: translate(55%, -20%) rotate(28deg) scale(2.5);

    }



    @keyframes btnHit {

      0%   { transform: scale(1.3); box-shadow: 0 0 20px rgba(255,0,192,0.6); }

      50%  { transform: scale(0.85); }

      100% { transform: scale(1); }

    }



    /* Big screens (1600px+): 2x size for buttons, couch and clothes */

    @media (min-width: 1600px) {

      .ring-btn                               { width: 128px !important; height: 128px !important; }

      .ring-btn.tarot-btn                    { width: 240px !important; height: 240px !important; }

      .ring-btn.contact-btn                  { width: 160px !important; height: 112px !important; }

      .ring-btn.tattoos-btn,

      .ring-btn.cakes-btn,

      .ring-btn.sturm-btn                    { width: 160px !important; height: 112px !important; }

      .ring-btn .mini-btn-icon img,

      .ring-btn .contact-button-icon img     { width: 340px !important; height: 340px !important; }

      .ring-btn.cakes-btn .mini-btn-icon img  { width: 480px !important; height: 480px !important; }

      .ring-btn .mini-btn-label,

      .ring-btn .contact-button-label        { font-size: 18px; }

      .tarot-button-card                     { width: 56px !important; height: 96px !important; }

      #couchBtn                              { width: 80vw !important; max-width: 1000px !important; }

      #couchClothes                          { width: 170% !important; max-width: 900px !important; }

    }



    .frame-btn {

      pointer-events: auto !important;

      touch-action: none;

      transform-origin: top center;

      transition: filter 0.2s, width 0.4s ease, max-width 0.4s ease;

    }



    #couchBtn {

      pointer-events: none !important;

      cursor: default !important;

      /* Display bio / couch button ABOVE the cakes ring-button (which is set
         to z-index:20 by JS). Tailwind's z-10 on the img element was letting
         cakes cover the couch on small screens. */
      z-index: 25 !important;

      /* Explicit transform baseline. Tailwind v3's -translate-x-1/2 compiles
         to a transform: translate(var(--tw-translate-x), var(--tw-translate-y))
         ... skew ... scale chain that fails to resolve in Firefox 78 ESR
         (the last version that runs on macOS Sierra / High Sierra). Result:
         the element rendered with transform: none, its left edge at 50%vw.
         When a modal opened, the JS transition from "none" to
         translate(-50%, 140%) produced a diagonal leftward slide instead
         of a pure downward one. Setting this explicit value guarantees
         the centered baseline across all browsers. */
      transform: translateX(-50%);

    }



    .frame-btn.dragging {

      transition: none !important;

      z-index: 5000 !important;

    }



    #frameArt.dragging {

      transition: none !important;

    }



    #frameArt {

      object-fit: contain;

      border-radius: 0;

      -webkit-clip-path: none;
      clip-path: none;

      opacity: 1;

      transition: opacity 0.5s ease, width 0.4s ease, max-width 0.4s ease;

    }



    #frameArt.fading {

      opacity: 0;

    }



    /* Frame noise transition overlay */

    .frame-noise-overlay {

      position: fixed;

      pointer-events: none;

      z-index: 9;

      opacity: 0;

      background: #000;

      overflow: hidden;

      transform-origin: center center;

    }



    .frame-noise-overlay.active {

      opacity: 1;

    }



    .frame-noise-canvas {

      width: 100%;

      height: 100%;

      image-rendering: pixelated;

      display: block;

      background: #000;

    }



    .frame-btn.laser-hover {

      filter: brightness(1.25);

    }



    #couchBtn.laser-hover {

      filter: none !important;

    }



    .frame-btn.hit {

      animation: frameHit 0.4s ease-out;

    }



    #frameArt {

      object-fit: contain;

      border-radius: 0;

      -webkit-clip-path: none;
      clip-path: none;

      opacity: 1;

      transition: opacity 0.5s ease, width 0.4s ease, max-width 0.4s ease;

    }



    @keyframes frameHit {

      0%   { filter: brightness(1.8); }

      100% { filter: brightness(1); }

    }



    /* ---------- Cakes order button & form ---------- */

    .cakes-order-btn {

      position: fixed;

      right: 20px;

      bottom: 24px;

      z-index: 2000;

      padding: 12px 24px;

      border-radius: 0;

      border: 2px solid #000;

      background: #ff00c0;

      color: #000;

      font-family: 'Courier New', monospace;

      font-size: 14px;

      font-weight: bold;

      letter-spacing: 1px;

      text-transform: uppercase;

      display: none;

      align-items: center;

      justify-content: center;

      gap: 6px;

      cursor: pointer;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }

    .cakes-order-btn.visible {

      display: inline-flex;

    }

    .cakes-order-btn:hover,

    .cakes-order-btn.laser-hover {

      transform: scale(1.08);

      box-shadow: 0 0 18px rgba(255,0,192,0.9), 0 0 36px rgba(255,0,192,0.4);

      filter: brightness(1.1);

    }



    .cakes-order-inner {

      position: relative;

      overflow: visible;

      width: min(480px, 94vw);

    }



    .cakes-order-form-overlay {

      position: fixed;

      top: 0; right: 0; bottom: 0; left: 0;

      inset: 0;

      background: rgba(5, 0, 10, 0.9);

      display: none;

      align-items: center;

      justify-content: center;

      z-index: 1400;

    }

    .cakes-order-form-overlay.visible {

      display: flex;

    }



    .cakes-order-container {

      position: relative;

      width: min(480px, 94vw);

      height: auto;

      max-height: calc(100vh - 40px);

      max-height: calc(100dvh - 40px);

      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

      overflow-x: visible;

      padding: 48px 20px 20px;

      border-radius: 12px;

      border: 2px solid #00ff00;

      background: rgba(10, 0, 20, 0.96);

      font-family: 'Courier New', monospace;

      color: #fdf0ff;

    }



    .cakes-order-close {

      position: absolute;

      top: 8px;

      right: 12px;

      width: auto;

      height: auto;

      border: none;

      border-radius: 0;

      background: transparent;

      color: #ff00c0;

      font-size: 32px;

      font-weight: bold;

      line-height: 1;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 0 0 4px 0;

      z-index: 10;

      transition: all 0.2s ease;

    }



    .cakes-order-close::after {

      content: '';

      position: absolute;

      bottom: 2px;

      left: 0;

      width: 100%;

      height: 2px;

      background: #ff00c0;

      transition: background 0.2s ease;

    }



    .cakes-order-close:hover {

      color: #00ff00;

    }



    .cakes-order-close:hover::after {

      background: #00ff00;

    }



    .cakes-order-title {

      position: absolute;

      top: 0;

      left: 50%;

      transform: translate(-50%, -50%);

      white-space: nowrap;

      margin: 0;

      letter-spacing: 4px;

      padding: 20px 48px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      text-align: center;

      z-index: 10;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }



    /* Decorative cake images — bottom-left corner of the container */

    .cakes-order-deco {

      position: absolute;

      bottom: 0;

      left: 0;

      display: flex;

      align-items: flex-end;

      gap: clamp(4px, 1vw, 10px);

      padding: 0 0 8px 8px;

      pointer-events: none;

    }



    .cakes-order-deco img {

      width: clamp(48px, 8vw, 80px);

      height: auto;

      object-fit: contain;

      display: block;

      opacity: 0.92;

      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));

    }



    .cakes-order-form-overlay.cakes-order-success .cakes-order-deco {

      display: none;

    }



    /* Decorative tattoo button image — bottom-left corner of the container */

    .tattoo-order-deco {

      position: absolute;

      bottom: 0;

      left: 0;

      width: clamp(80px, 15vw, 140px);

      height: auto;

      object-fit: contain;

      opacity: 0.92;

      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));

      pointer-events: none;

      padding: 0 0 8px 8px;

      transform: rotate(90deg);

      transform-origin: bottom left;

    }



    .cakes-order-form {

      width: 100%;

      display: flex;

      flex-direction: column;

      gap: 0;

    }



    .cakes-order-success-title,

    .cakes-order-success-text {

      color: #ff00c0;

      text-align: center;

    }



    .cakes-order-success-title {

      margin: 8px 0 10px;

      font-size: 30px;

      line-height: 1.1;

    }



    .cakes-order-success-text {

      margin: 0;

      font-size: 20px;

      line-height: 1.35;

    }



    .cakes-order-step {

      display: none;

      flex-direction: column;

      gap: 14px;

      width: 100%;

      animation: fadeIn 0.3s ease;

    }



    .cakes-order-step.active {

      display: flex;

    }



    .cakes-order-prompt {

      color: #ff00c0;

      font-size: 28px;

      font-weight: bold;

      line-height: 1.1;

      margin-bottom: 4px;

      margin-top: 0;

    }



    .cakes-order-prompt span {

      display: block;

    }



    .cakes-order-form input[type="text"],

    .cakes-order-form input[type="date"],

    .cakes-order-form textarea {

      width: 100%;

      padding: 12px 16px;

      border: 2px solid #ff00c0;

      background: rgba(255, 105, 180, 0.05);

      color: #ff00c0;

      font-family: 'Courier New', monospace;

      font-size: 16px;

      transition: all 0.25s ease;

    }



    .cakes-order-form input[type="text"]::placeholder,

    .cakes-order-form input[type="date"]::placeholder,

    .cakes-order-form textarea::placeholder {

      color: rgba(255, 105, 180, 0.5);

    }



    .cakes-order-form input[type="text"]:focus,

    .cakes-order-form input[type="date"]:focus,

    .cakes-order-form textarea:focus {

      background: rgba(255, 105, 180, 0.12);

      box-shadow: 0 0 20px rgba(255,0,192,0.2);

    }



    .cakes-order-form textarea {

      min-height: 120px;

      resize: vertical;

    }



    .cakes-order-form small {

      display: block;

      font-size: 14px;

      color: #ff9eea;

      margin-top: -8px;

    }



    .colors-row {

      display: flex;

      gap: 10px;

    }



    .cakes-order-form .colors-row input[type="color"] {

      width: 100%;

      height: 60px;

      flex: 1 1 0;

      padding: 0;

      border-radius: 0;

      border: 2px solid #ff00c0;

      background: rgba(10,0,20,0.9);

      cursor: pointer;

    }



    .cakes-order-form button[type="button"],

    .cakes-order-form button[type="submit"] {

      position: static;

      right: auto;

      bottom: auto;

      z-index: auto;

      padding: 12px 32px;

      background: #00ff00;

      color: #000;

      border: 2px solid #000;

      font-family: 'Courier New', monospace;

      font-size: 16px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      cursor: pointer;

      border-radius: 0;

      transition: all 0.2s ease;

      box-shadow: 0 4px 0 #000;

      margin-top: 8px;

      width: auto;

      display: inline-block;

      align-self: flex-end;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }



    .cakes-order-form button[type="button"]:hover,

    .cakes-order-form button[type="submit"]:hover {

      background: #ff00c0;

      color: #000;

      box-shadow: 0 6px 0 #000, 0 0 18px rgba(255, 0, 192, 0.45);

      transform: translateY(-2px);

    }



    .cakes-order-form button[type="button"]:active,

    .cakes-order-form button[type="submit"]:active {

      box-shadow: 0 2px 0 #000;

      transform: translateY(2px);

    }



    .cakes-order-actions {

      margin-top: 16px;

      display: flex;

      justify-content: space-between;

      gap: 10px;

      align-items: center;

    }

    .cakes-order-submit {

      flex: 1;

      padding: 8px 10px;

      border-radius: 999px;

      border: 2px solid #ff00c0;

      background: #ff00c0;

      color: #000;

      font-size: 11px;

      text-transform: uppercase;

      letter-spacing: 3px;

      cursor: pointer;

      border: 2px solid #000;

    }



    .tarot-reading-inner {

      position: relative;

      overflow: visible;

      width: min(480px, 94vw);

    }



    .tarot-reading-form-overlay {

      position: fixed;

      top: 0; right: 0; bottom: 0; left: 0;

      inset: 0;

      background: rgba(5, 0, 10, 0.9);

      display: none;

      align-items: center;

      justify-content: center;

      z-index: 1450;

    }



    .tarot-reading-form-overlay.visible {

      display: flex;

    }



    .tarot-reading-container {

      position: relative;

      width: min(480px, 94vw);

      height: auto;

      max-height: calc(100vh - 40px);

      max-height: calc(100dvh - 40px);

      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

      overflow-x: visible;

      padding: 48px 20px 20px;

      border-radius: 12px;

      border: 2px solid #00ff00;

      background: rgba(10, 0, 20, 0.96);

      font-family: 'Courier New', monospace;

      color: #fdf0ff;

    }



    .tarot-reading-close {

      position: absolute;

      top: 8px;

      right: 12px;

      width: auto;

      height: auto;

      border: none;

      border-radius: 0;

      background: transparent;

      color: #ff00c0;

      font-size: 32px;

      font-weight: bold;

      line-height: 1;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 0 0 4px 0;

      z-index: 10;

      transition: all 0.2s ease;

    }



    .tarot-reading-close::after {

      content: '';

      position: absolute;

      bottom: 2px;

      left: 0;

      width: 100%;

      height: 2px;

      background: #ff00c0;

      transition: background 0.2s ease;

    }



    .tarot-reading-close:hover {

      color: #00ff00;

    }



    .tarot-reading-close:hover::after {

      background: #00ff00;

    }



    .tarot-reading-title {

      position: absolute;

      top: 0;

      left: 50%;

      transform: translate(-50%, -50%);

      white-space: nowrap;

      margin: 0;

      letter-spacing: 4px;

      padding: 20px 40px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      text-align: center;

      z-index: 10;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }



    .tarot-reading-form {

      width: 100%;

      display: flex;

      flex-direction: column;

      gap: 0;

    }



    .tarot-reading-step {

      display: none;

      flex-direction: column;

      gap: 14px;

      width: 100%;

      animation: fadeIn 0.3s ease;

    }



    .tarot-reading-step.active {

      display: flex;

    }



    .tarot-reading-prompt {

      color: #ff00c0;

      font-size: 28px;

      font-weight: bold;

      line-height: 1.1;

      margin-bottom: 4px;

      margin-top: 0;

    }



    .tarot-reading-prompt span {

      display: block;

    }



    .tarot-reading-form input[type="text"],

    .tarot-reading-form input[type="date"],

    .tarot-reading-form textarea,

    .tarot-reading-select {

      width: 100%;

      padding: 12px 16px;

      border: 2px solid #ff00c0;

      background: rgba(255, 105, 180, 0.05);

      color: #ff00c0;

      font-family: 'Courier New', monospace;

      font-size: 16px;

      transition: all 0.25s ease;

      border-radius: 0;

    }



    .tarot-reading-form input[type="text"]::placeholder,

    .tarot-reading-form textarea::placeholder {

      color: rgba(255, 105, 180, 0.5);

    }



    .tarot-reading-form input[type="text"]:focus,

    .tarot-reading-form input[type="date"]:focus,

    .tarot-reading-form textarea:focus,

    .tarot-reading-select:focus {

      background: rgba(255, 105, 180, 0.12);

      box-shadow: 0 0 20px rgba(255,0,192,0.2);

    }



    .tarot-reading-form textarea {

      min-height: 120px;

      resize: vertical;

    }



    .tarot-reading-form small {

      display: block;

      font-size: 13px;

      color: #ff9eea;

      margin-top: -8px;

    }



    .tarot-reading-form button[type="button"],

    .tarot-reading-form button[type="submit"] {

      padding: 12px 32px;

      background: #00ff00;

      color: #000;

      border: 2px solid #000;

      font-family: 'Courier New', monospace;

      font-size: 16px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      cursor: pointer;

      border-radius: 0;

      transition: all 0.2s ease;

      box-shadow: 0 4px 0 #000;

      margin-top: 8px;

      width: auto;

      display: inline-block;

      align-self: flex-end;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }



    .tarot-reading-form button[type="button"]:hover,

    .tarot-reading-form button[type="submit"]:hover {

      background: #ff00c0;

      color: #000;

      box-shadow: 0 6px 0 #000, 0 0 18px rgba(255, 0, 192, 0.45);

      transform: translateY(-2px);

    }



    .tarot-reading-form button[type="button"]:active,

    .tarot-reading-form button[type="submit"]:active {

      box-shadow: 0 2px 0 #000;

      transform: translateY(2px);

    }

    .cakes-order-submit:hover {

      filter: brightness(1.1);

      box-shadow: 0 0 20px rgba(255,0,192,0.8);

    }

    .cakes-order-cancel {

      padding: 6px 10px;

      border-radius: 999px;

      border: 2px solid rgba(255,255,255,0.3);

      background: transparent;

      color: #fff;

      font-size: 10px;

      text-transform: uppercase;

      letter-spacing: 2px;

      cursor: pointer;

      white-space: nowrap;

    }

    .cakes-order-cancel:hover {

      background: rgba(255,255,255,0.08);

    }



    /* Button explosion effect */

    .btn-exploding {

      pointer-events: none !important;

      animation: btnExplode 0.6s ease-out forwards;

    }



    @keyframes btnExplode {

      0% {

        transform: scale(1);

        opacity: 1;

      }

      20% {

        transform: scale(1.1);

        opacity: 0.9;

      }

      50% {

        transform: scale(1.3);

        opacity: 0.5;

      }

      100% {

        transform: scale(0);

        opacity: 0;

      }

    }



    .explosion-particle {

      position: fixed;

      width: 6px;

      height: 6px;

      border-radius: 50%;

      pointer-events: none;

      z-index: 9999;

    }



    .explosion-particle.green {

      background: #00ff00;

      box-shadow: 0 0 8px #00ff00, 0 0 16px #00ff00;

    }



    .explosion-particle.pink {

      background: #ff00c0;

      box-shadow: 0 0 8px #ff00c0, 0 0 16px #ff00c0;

    }



    .explosion-particle.white {

      background: #fff;

      box-shadow: 0 0 8px #fff, 0 0 16px #fff;

    }



    @keyframes particleFly {

      0% {

        transform: translate(0, 0) scale(1);

        opacity: 1;

      }

      100% {

        transform: translate(var(--tx), var(--ty)) scale(0);

        opacity: 0;

      }

    }



    /* Tattoo order form overlay - same pattern as cakes */

    .tattoo-order-inner {

      position: relative;

      overflow: visible;

      width: min(480px, 94vw);

    }



    .tattoo-order-form-overlay {

      position: fixed;

      top: 0; right: 0; bottom: 0; left: 0;

      inset: 0;

      background: rgba(5, 0, 10, 0.9);

      display: none;

      align-items: center;

      justify-content: center;

      z-index: 1500;

    }

    .tattoo-order-form-overlay.visible {

      display: flex;

    }



    .tattoo-order-container {

      position: relative;

      width: min(480px, 94vw);

      height: auto;

      max-height: calc(100vh - 40px);

      max-height: calc(100dvh - 40px);

      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

      padding: 48px 20px 20px;

      border-radius: 12px;

      border: 2px solid #00ff00;

      background: rgba(10, 0, 20, 0.96);

      font-family: 'Courier New', monospace;

      color: #fdf0ff;

    }



    .tattoo-order-close {

      position: absolute;

      top: 8px;

      right: 12px;

      width: auto;

      height: auto;

      border: none;

      border-radius: 0;

      background: transparent;

      color: #ff00c0;

      font-size: 32px;

      font-weight: bold;

      line-height: 1;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 0 0 4px 0;

      z-index: 10;

      transition: all 0.2s ease;

    }



    .tattoo-order-close::after {

      content: '';

      position: absolute;

      bottom: 2px;

      left: 0;

      width: 100%;

      height: 2px;

      background: #ff00c0;

      transition: background 0.2s ease;

    }



    .tattoo-order-close:hover {

      color: #00ff00;

    }



    .tattoo-order-close:hover::after {

      background: #00ff00;

    }



    .tattoo-order-title {

      position: absolute;

      top: 0;

      left: 50%;

      transform: translate(-50%, -50%);

      white-space: nowrap;

      margin: 0;

      letter-spacing: 4px;

      padding: 20px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      text-align: center;

      z-index: 10;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }



    .tattoo-order-form {

      width: 100%;

      display: flex;

      flex-direction: column;

      gap: 0;

    }



    .tattoo-order-form h3,

    .tattoo-order-form p {

      color: #ff00c0;

    }



    .tattoo-order-step {

      display: none;

      flex-direction: column;

      gap: 14px;

      width: 100%;

      animation: fadeIn 0.3s ease;

    }



    .tattoo-order-step.active {

      display: flex;

    }



    .tattoo-order-prompt {

      color: #ff00c0;

      font-size: 28px;

      font-weight: bold;

      line-height: 1.1;

      margin-bottom: 4px;

      margin-top: 0;

    }



    .tattoo-order-prompt span {

      display: block;

    }



    .tattoo-order-form input[type="text"],

    .tattoo-order-form textarea,

    .tattoo-order-form select {

      width: 100%;

      padding: 12px 16px;

      border: 2px solid #ff00c0;

      background: rgba(255, 105, 180, 0.05);

      color: #ff00c0;

      font-family: 'Courier New', monospace;

      font-size: 16px;

      transition: all 0.25s ease;

    }



    .tattoo-order-form input[type="text"]::placeholder,

    .tattoo-order-form textarea::placeholder {

      color: rgba(255, 105, 180, 0.5);

    }



    .tattoo-order-form input[type="text"]:focus,

    .tattoo-order-form textarea:focus,

    .tattoo-order-form select:focus {

      background: rgba(255, 105, 180, 0.12);

      box-shadow: 0 0 20px rgba(255,0,192,0.2);

      outline: none;

    }



    .tattoo-order-form textarea {

      min-height: 120px;

      resize: vertical;

    }



    .tattoo-order-form small {

      display: block;

      font-size: 13px;

      color: #ff9eea;

      margin-top: -8px;

    }



    .tattoo-order-select {

      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      -webkit-appearance: none;

      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ff00c0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");

      background-repeat: no-repeat;

      background-position: right 12px center;

      padding-right: 36px;

    }



    .tattoo-color-options {

      display: flex;

      flex-direction: column;

      gap: 10px;

    }



    .tattoo-color-option {

      display: flex;

      align-items: center;

      gap: 10px;

      cursor: pointer;

      color: #ff9eea;

      font-size: 14px;

    }



    .tattoo-color-option input[type="radio"] {

      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      width: 20px;

      height: 20px;

      border: 2px solid #ff00c0;

      background: rgba(10, 0, 20, 0.9);

      cursor: pointer;

      position: relative;

    }



    .tattoo-color-option input[type="radio"]:checked::after {

      content: '';

      position: absolute;

      top: 2px;

      left: 2px;

      width: 12px;

      height: 12px;

      background: #ff00c0;

    }



    .tattoo-order-form button[type="button"],

    .tattoo-order-form button[type="submit"] {

      padding: 12px 32px;

      background: #00ff00;

      color: #000;

      border: 2px solid #000;

      font-family: 'Courier New', monospace;

      font-size: 16px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      cursor: pointer;

      border-radius: 0;

      transition: all 0.2s ease;

      box-shadow: 0 4px 0 #000;

      margin-top: 8px;

      width: auto;

      display: inline-block;

      align-self: flex-end;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }



    .tattoo-order-form button[type="button"]:hover,

    .tattoo-order-form button[type="submit"]:hover {

      background: #ff00c0;

      color: #000;

      box-shadow: 0 6px 0 #000, 0 0 18px rgba(255, 0, 192, 0.45);

      transform: translateY(-2px);

    }



    .tattoo-order-form button[type="button"]:active,

    .tattoo-order-form button[type="submit"]:active {

      box-shadow: 0 2px 0 #000;

      transform: translateY(2px);

    }



    .couch-kiss {

      position: fixed;

      font-size: 42px;

      line-height: 1;

      pointer-events: none;

      z-index: 99999999;

      opacity: 0;

      transition: none;

      transform: translate(-50%, -50%);

    }

    .couch-kiss.animate {

      animation: kissRise 1.2s ease-out forwards;

    }

    @keyframes kissRise {

      0% {

        opacity: 0;

        transform: translate(-50%, -50%) scale(0.6);

      }

      25% {

        opacity: 1;

        transform: translate(-50%, calc(-50% - 20px)) scale(1);

      }

      100% {

        opacity: 0;

        transform: translate(-50%, calc(-50% - 100px)) scale(1.1);

      }

    }



    /* ---------- Section overlay ---------- */

    .section-overlay {

      position: fixed;

      border-radius: 12px;

      border: 2px solid #00ff00;

      background: rgba(0, 0, 0, 0.9);

      display: flex;

      align-items: center;

      justify-content: center;

      overflow: hidden;

      pointer-events: none;

      opacity: 0;

      z-index: 900;

    }



    .modal-backdrop {

      position: fixed;

      top: 0; right: 0; bottom: 0; left: 0;

      inset: 0;

      background: rgba(0, 0, 0, 0.7);

      opacity: 0;

      pointer-events: none;

      z-index: 850;

      transition: opacity 0.4s ease;

    }



    .modal-backdrop.visible {

      opacity: 1;

      pointer-events: auto;

    }



    .modal-backdrop.tattoos-visible {

      background: rgba(0, 0, 0, 0.85);

    }



    .section-overlay.expanding {

      pointer-events: auto;

    }



    .section-overlay.expanding:not(.slide-from-top):not(.slide-from-bottom) {

      opacity: 1;

    }



    .section-overlay.slide-from-top,

    .section-overlay.slide-from-bottom,

    .section-overlay.slide-out-top,

    .section-overlay.slide-out-bottom {

      pointer-events: auto;

      left: 50% !important;

      top: 50% !important;

    }



    /* Modal slide animations */

    .section-overlay.slide-from-top {

      animation: slideFromTop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;

    }



    .section-overlay.slide-from-bottom {

      animation: slideFromBottom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;

    }



    .section-overlay.slide-out-top {

      animation: slideOutTop 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;

    }



    .section-overlay.slide-out-bottom {

      animation: slideOutBottom 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;

    }



    @keyframes slideFromTop {

      0% {

        opacity: 0;

        left: 50%;

        transform: translate(-50%, -150%);

      }

      100% {

        opacity: 1;

        left: 50%;

        transform: translate(-50%, -50%);

      }

    }



    @keyframes slideFromBottom {

      0% {

        opacity: 0;

        left: 50%;

        transform: translate(-50%, 150%);

      }

      100% {

        opacity: 1;

        left: 50%;

        transform: translate(-50%, -50%);

      }

    }



    @keyframes slideOutTop {

      0% {

        opacity: 1;

        left: 50%;

        transform: translate(-50%, -50%);

      }

      100% {

        opacity: 0;

        left: 50%;

        transform: translate(-50%, -150%);

      }

    }



    @keyframes slideOutBottom {

      0% {

        opacity: 1;

        left: 50%;

        transform: translate(-50%, -50%);

      }

      100% {

        opacity: 0;

        left: 50%;

        transform: translate(-50%, 150%);

      }

    }



    .section-overlay.bio-modal,

    .section-overlay.sturmzx2-modal,

    .section-overlay.tarot-modal,

    .section-overlay.contact-modal,

    .section-overlay.paintings-modal,

    .section-overlay.tattoos-modal {

      top: 50% !important;

      left: 50% !important;

      max-width: min(94vw, 480px);

      max-height: 81vh;

      border-radius: 12px;

      padding: 32px;

    }



    .section-overlay.bio-modal.expanding,

    .section-overlay.sturmzx2-modal.expanding,

    .section-overlay.tarot-modal.expanding,

    .section-overlay.contact-modal.expanding,

    .section-overlay.paintings-modal.expanding,

    .section-overlay.tattoos-modal.expanding {

      pointer-events: auto;

      /* Inherits dimensions from base class, no need to redefine */

    }



    /* Shared size: bio + sturm modals */

    .section-overlay.bio-modal.expanding,

    .section-overlay.sturmzx2-modal.expanding {

      width: clamp(300px, 88vw, 520px) !important;

      height: clamp(400px, 80vh, 680px) !important;

      max-width: none;

      max-height: none;

    }



    /* Bio: internal scroll handles overflow, hide modal scrollbar */

    .section-overlay.bio-modal.expanding {

      overflow: visible !important;

      padding-top: 48px !important;

      max-width: 98vw !important;

      height: 81vh !important;

      max-height: 81vh !important;

      display: flex;

      flex-direction: column;

      z-index: 1300 !important;

    }



    .bio-modal .section-content {

      display: flex;

      flex-direction: column;

      flex: 1;

      min-height: 0;

      overflow: visible;

      padding: 0;

    }



    .bio-modal .gallery-title {

      position: absolute;

      top: 0;

      left: 50%;

      transform: translate(-50%, -50%);

      white-space: nowrap;

      margin: 0;

      letter-spacing: 4px;

      padding: 20px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      text-align: center;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }



    .bio-modal-close {

      position: absolute;

      top: 8px;

      right: 12px;

      width: auto;

      height: auto;

      border: none;

      border-radius: 0;

      background: transparent;

      color: #ff00c0;

      font-size: 32px;

      font-weight: bold;

      line-height: 1;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 0 0 4px 0;

      z-index: 10;

      transition: all 0.2s ease;

    }



    .bio-modal-close::after {

      content: '';

      position: absolute;

      bottom: 2px;

      left: 0;

      width: 100%;

      height: 2px;

      background: #ff00c0;

      transition: background 0.2s ease;

    }



    .bio-modal-close:hover {

      color: #00ff00;

    }



    .bio-modal-close:hover::after {

      background: #00ff00;

    }



    /* Sturm: hide scrollbar visually but keep scrollability */

    .section-overlay.sturmzx2-modal.expanding {

      overflow: auto;
      -webkit-overflow-scrolling: touch;

      scrollbar-width: none;

      -ms-overflow-style: none;

      z-index: 1300 !important;

    }

    .section-overlay.sturmzx2-modal.expanding::-webkit-scrollbar {

      display: none;

    }







    .section-overlay.tarot-modal.expanding {

      overflow: visible !important;

      padding-top: 48px !important;

      padding-bottom: 60px !important;

      max-width: 98vw !important;

      width: clamp(300px, 94vw, 480px) !important;

      height: 81vh !important;

      max-height: 81vh !important;

      display: flex;

      flex-direction: column;

      z-index: 1300 !important;

    }



    .tarot-bysturmz {

      position: absolute;

      top: -14px;

      left: 50%;

      transform: translateX(-50%);

      width: 130px;

      height: auto;

      z-index: 100;

    }



    .tarot-modal .section-content {

      display: flex;

      flex-direction: column;

      flex: 1;

      min-height: 0;

      position: relative;

      overflow: visible;

      padding: 0;

    }



    .tarot-modal .gallery-title {

      position: absolute;

      top: -48px;

      left: 50%;

      transform: translate(-50%, -50%);

      white-space: nowrap;

      margin: 0;

      letter-spacing: 4px;

      padding: 20px 40px !important;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      text-align: center;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      /* Must sit above .tarot-section (position:relative, later in DOM).
         Without z-index, DOM order makes .tarot-section paint over this title
         in their overlap region (60–68px from modal top), cutting the title. */
      z-index: 10;

    }



    .tarot-scroll-snap {

      flex: 1;

      min-height: 0;

      /* height: 100% removed — on Safari, height:100% in a flex child with no
         explicit-px parent collapses to 0, breaking scroll-snap entirely.
         flex:1 + min-height:0 is sufficient; JS sets a pixel height after open. */

      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;

      overflow-x: hidden;

      scroll-snap-type: y mandatory;

      scroll-behavior: smooth;

      -webkit-overflow-scrolling: touch;

      padding: 0;

      opacity: 1;

      transition: opacity 0.15s ease;

    }





    .tarot-section {

      /* height/min-height/max-height removed — percentage heights inside a
         scroll container whose own height is flex-computed fail on Safari.
         JS sets explicit px heights on both container and sections after open. */

      scroll-snap-align: start;

      scroll-snap-stop: always;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      position: relative;

      box-sizing: border-box;

      overflow: hidden;

      flex-shrink: 0;

      width: 100%;

    }



    .tarot-section-intro {

      padding: 20px;

    }



    .tarot-section-cards {

      padding: 20px;

      position: relative;

    }



    /* Section heights are set in px by JS after open — see openSection idx===4 */



    /* Hide scrollbar for snap container */

    .tarot-scroll-snap::-webkit-scrollbar {

      width: 0;

      display: none;

    }

    .tarot-scroll-snap {

      scrollbar-width: none;

      -ms-overflow-style: none;

    }



    .tarot-scroll {

      flex: 1;

      min-height: 0;

      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

      overflow-x: hidden;

      -webkit-overflow-scrolling: touch;

      padding: 4px 20px 0 0;

      opacity: 1;

      transition: opacity 0.15s ease;

    }



    .tarot-scroll::-webkit-scrollbar-track {

      background: #050505;

      border-left: 3px solid #ff00c0;

      margin-left: 14px;

    }

    .tarot-scroll::-webkit-scrollbar-thumb {

      background: #ff00c0;

      border: 3px solid #000;

      min-height: 64px;

      box-shadow: inset 0 0 0 2px #000;

    }

    .tarot-scroll::-webkit-scrollbar-thumb:hover {

      background: #ff00c0;

      box-shadow: inset 0 0 0 3px #000;

    }



    .tarot-modal-close {

      position: absolute;

      top: -40px;

      right: 12px;

      width: auto;

      height: auto;

      border: none;

      border-radius: 0;

      background: transparent;

      color: #ff00c0;

      font-size: 32px;

      font-weight: bold;

      line-height: 1;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 0 0 4px 0;

      z-index: 10;

      transition: all 0.2s ease;

    }



    .tarot-modal-close::after {

      content: '';

      position: absolute;

      bottom: 2px;

      left: 0;

      width: 100%;

      height: 2px;

      background: #ff00c0;

      transition: background 0.2s ease;

    }



    .tarot-modal-close:hover {

      color: #00ff00;

    }



    .tarot-modal-close:hover::after {

      background: #00ff00;

    }



    .section-overlay.contact-modal.expanding {

      z-index: 1300 !important;

      overflow: visible !important;

    }



    /* Cakes modal */

    .section-overlay.cakes-modal.expanding {

      overflow: visible !important;

      padding: 0 !important;

      max-width: 49vw !important;

      height: 81vh !important;

      max-height: 81vh !important;

      top: 50% !important;

      left: 50% !important;

      transform: translate(-50%, -50%);

      display: flex;

      flex-direction: column;

      z-index: 1300 !important;

    }



    @media (max-width: 768px) {

      .section-overlay.cakes-modal.expanding {

        max-width: 90vw !important;

      }

    }

    @media (max-width: 479px) {

      .section-overlay.cakes-modal.expanding {

        height: 94vw !important;

        max-height: 90dvh !important;

        overflow: visible !important;

      }

    }



    @media (max-width: 480px) {

      .section-overlay.cakes-modal.expanding {

        max-width: 95vw !important;

      }

    }



    .tarot-hero {

      width: auto;

      max-width: 100%;

      height: 280px;

      max-height: 55vh;

      object-fit: contain;

      display: block;

      margin: 0 auto;

    }



    .tarot-title {

      display: inline-block;

      padding: 10px 22px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      text-align: center;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }



    .tarot-text {

      font-size: 14px;

      line-height: 1.7;

      color: #ff00c0;

      text-align: center;

      margin-top: 10px;

      margin-bottom: 24px;

    }



    .tarot-contact-btn {

      position: fixed;

      bottom: 10px;

      left: 50%;

      transform: translateX(-50%);

      padding: 12px 32px;

      background: #00ff00;

      color: #000;

      border: 2px solid #000;

      font-size: 16px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      cursor: pointer;

      border-radius: 0;

      transition: all 0.2s ease;

      box-shadow: 0 4px 0 #000;

      animation: tarotPinkBlink 2s ease-in-out infinite;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      z-index: 100000;

    }



    .tarot-destiny-image {

      position: absolute;

      left: 50%;

      bottom: -75px;

      transform: translateX(-50%);

      width: min(360px, 90vw);

      height: auto;

      z-index: 2;

      pointer-events: none;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));

      opacity: 0.96;

    }



    .tarot-contact-btn:hover,

    .tarot-contact-btn.laser-hover {

      background: #ff00c0;

      box-shadow: 0 6px 0 #000, 0 0 18px rgba(255, 0, 192, 0.45);

      transform: translate(-50%, calc(50% - 2px));

      animation: none;

    }



    .tarot-contact-btn:active {

      box-shadow: 0 2px 0 #000;

      transform: translate(-50%, calc(50% + 2px));

    }



    /* iPad / tablet: fixed positioning breaks inside WebKit-animated modals */
    @media (max-width: 1024px) {

      .tarot-contact-btn {
        position: absolute;
        bottom: max(14px, env(safe-area-inset-bottom));
      }

      .tarot-get-reading-btn {
        position: absolute;
        bottom: max(14px, env(safe-area-inset-bottom));
      }

    }



    .cakes-modal-close {

      position: absolute;

      top: 10px;

      right: 12px;

      width: auto;

      height: auto;

      border: none;

      border-radius: 0;

      background: transparent;

      color: #ff00c0;

      font-size: 32px;

      font-weight: bold;

      line-height: 1;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 0 0 4px 0;

      z-index: 10;

      transition: all 0.2s ease;

    }



    .cakes-modal-close::after {

      content: '';

      position: absolute;

      bottom: 2px;

      left: 0;

      width: 100%;

      height: 2px;

      background: #ff00c0;

      transition: background 0.2s ease;

    }



    .cakes-modal-close:hover {

      color: #00ff00;

    }



    .cakes-modal-close:hover::after {

      background: #00ff00;

    }



    .cakes-order-modal-btn {

      position: absolute;

      bottom: -40px;

      left: 50%;

      transform: translateX(-50%);

      padding: 16px 44px;

      background: #00ff00;

      color: #000;

      border: 2px solid #000;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      cursor: pointer;

      border-radius: 0;

      transition: all 0.2s ease;

      box-shadow: 0 4px 0 #000;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      z-index: 100000;

    }



    .cakes-order-modal-btn:hover,

    .cakes-order-modal-btn.laser-hover {

      background: #ff00c0;

      box-shadow: 0 6px 0 #000, 0 0 18px rgba(255, 0, 192, 0.45);

      transform: translateX(-50%) translateY(-2px);

    }



    .cakes-order-modal-btn:active {

      box-shadow: 0 2px 0 #000;

      transform: translateX(-50%) translateY(2px);

    }



    .tarot-content {

      width: 100%;

      display: flex;

      flex-direction: column;

      align-items: center;

    }



.section-overlay.contact-modal.expanding {

  overflow: visible !important;

  padding-top: 48px !important;

  width: clamp(300px, 88vw, 520px) !important;

  min-height: auto;

  height: auto !important;

  max-height: 81vh !important;

  display: flex;

  flex-direction: column;

  z-index: 1300 !important;

}



.contact-modal .section-content {

  display: flex;

  flex-direction: column;

  flex: 1;

  min-height: 0;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  max-height: calc(81vh - 48px);

  padding: 20px 0 20px 0;

}



.section-overlay.contact-modal .contact-title {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translate(-50%, -50%);

  white-space: nowrap;

  margin: 0;

  letter-spacing: 4px;

  padding: 20px;

  border-radius: 0;

  background: #ff00c0;

  color: #000;

  font-size: 18px;

  font-weight: bold;

  text-transform: uppercase;

  text-align: center;

  z-index: 10;

  box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

  clip-path: polygon(

    50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

    93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

    93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

    50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

    7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

    7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

  );

}



.contact-title {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translate(-50%, -50%);

  white-space: nowrap;

  margin: 0;

  letter-spacing: 4px;

  padding: 20px;

  border-radius: 0;

  background: #ff00c0;

  color: #000;

  font-size: 18px;

  font-weight: bold;

  text-transform: uppercase;

  text-align: center;

  z-index: 10;

  box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

  clip-path: polygon(

    50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

    93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

    93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

    50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

    7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

    7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

  );

}



    .tarot-video-wrap {

      background: transparent;

      padding: 0 0 46px 0;

      border-radius: 8px 8px 0 0;

      border: 2px solid #000;

      position: relative;

      width: 100%;

      box-sizing: border-box;

      overflow: hidden;

    }



    .tarot-video-wrap .tarot-hero {

      display: block;

      width: 100%;

      height: auto;

      -webkit-clip-path: inset(3px 10px 3px 10px);
      clip-path: inset(3px 10px 3px 10px);

    }



    /* New tarot card stage layout */

    .tarot-card-stage {

      position: relative;

      width: 100%;

      height: 100%;

      display: flex;

      align-items: center;

      justify-content: center;

    }



    /* Flipped cards container - 7 columns × 3 rows for 21 cards */

    .tarot-flipped-cards {

      position: absolute;

      width: 100%;

      height: 100%;

      display: flex;

      flex-wrap: wrap;

      justify-content: center;

      display: grid;

      grid-template-columns: repeat(7, minmax(0, 52px));

      grid-template-rows: repeat(3, auto);

      gap: 4px;

      padding: 10px;

      box-sizing: border-box;

      transition: opacity 0.8s ease;

      align-content: center;

      justify-content: center;

      justify-items: center;

      overflow: visible;

    }



    /* Individual flipped card with checkerboard back - responsive sizing */

    .tarot-flipped-card {

      width: 100%;

      max-width: 52px;

      height: auto;

      min-height: 84px;

      aspect-ratio: 5/8;

      border-radius: 3px;

      background: #222;

      background:

        repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 50% / 8px 8px;

      border: 1px solid #333;

      box-shadow: 0 1px 4px rgba(0,0,0,0.4);

      transform: rotate(calc(var(--i) * 1.5deg - 3deg)) translateY(calc(var(--i) * 0.5px));

      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

      position: relative;

      cursor: pointer;

    }



    .tarot-flipped-cards.fading-out {

      opacity: 0;

      pointer-events: none;

    }



    /* Responsive adjustments for smaller screens */

    @media (max-width: 768px) {

      .tarot-section-intro {
        padding: 16px;
        justify-content: center;
      }

      .tarot-text-wrap {
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      .tarot-text-wrap .tarot-text {
        font-size: 11px !important;
        margin-top: 10px !important;
        transform: translateY(0) !important;
        text-align: center;
      }

      .tarot-destiny-image {
        position: static;
        width: calc(100% - 8px);
        max-width: 100%;
        height: auto;
        display: block;
        margin: 12px auto 0;
        transform: none;
        left: auto;
        bottom: auto;
      }

      .tarot-bysturmz {
        width: 100px !important;
        top: -28px !important;
      }

      .tarot-flipped-cards {

        gap: 3px;

        padding: 8px;

        grid-template-columns: repeat(7, minmax(0, 40px));

      }



      .tarot-flipped-card {

        max-width: 40px;

        border-radius: 2px;

        background:

          repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 50% / 6px 6px;

        transform: rotate(calc(var(--i) * 1deg - 2deg)) translateY(calc(var(--i) * 0.3px));

      }

    }



    @media (max-width: 480px) {

      .tarot-flipped-cards {

        gap: 2px;

        padding: 6px;

        grid-template-columns: repeat(7, minmax(0, 32px));

      }



      .tarot-flipped-card {

        max-width: 32px;

        background:

          repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 50% / 5px 5px;

        transform: rotate(calc(var(--i) * 0.8deg - 1.5deg)) translateY(calc(var(--i) * 0.2px));

      }

    }



    /* Hidden initial state for selected card */

    .tarot-selected-card {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%) scale(0.3);

      width: min(74%, 270px);

      min-height: 160px;

      aspect-ratio: 5/8;

      opacity: 0;

      transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);

      pointer-events: none;

      z-index: 50;

    }



    .tarot-selected-card.visible {

      opacity: 1;

      transform: translate(-50%, -50%) scale(1);

      pointer-events: auto;

    }



    .tarot-selected-card img {

      width: 100%;

      height: 100%;

      object-fit: contain;

      border-radius: 4px;

      box-shadow: 0 8px 32px rgba(0,0,0,0.6);

    }



    /* 3D card flip helpers */

    .tarot-flipped-card.flipping {

      -webkit-transform-style: preserve-3d;

      transform-style: preserve-3d;

      background: transparent !important;

      border: none !important;

      animation: tarotCardFlip 0.75s ease-in-out forwards;

      z-index: 200;

    }



    .tarot-flipped-card .tarot-face {

      position: absolute;

      top: 0; right: 0; bottom: 0; left: 0;

      inset: 0;

      border-radius: 3px;

      backface-visibility: hidden;

      -webkit-backface-visibility: hidden;

    }



    .tarot-flipped-card .tarot-face-back {

      background: #222;

      background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 50% / 8px 8px;

    }



    .tarot-flipped-card .tarot-face-front {

      transform: rotateY(180deg);

      background-size: contain;

      background-position: center;

      background-repeat: no-repeat;

      background-color: #000;

    }



    @keyframes tarotCardFlip {

      0%   { transform: rotateY(0deg)   scale(1);   }

      50%  { transform: rotateY(90deg)  scale(1.4); }

      100% { transform: rotateY(180deg) scale(1.6); }

    }



    /* Meaning display - no border, moved up */

    .tarot-meaning-display {

      position: absolute;

      width: 94%;

      max-width: 460px;

      max-height: 70%;

      padding: 24px;

      border-radius: 8px;

      border: none;

      opacity: 0;

      transform: translateY(20px);

      transition: all 0.6s ease;

      pointer-events: none;

      overflow: hidden;

      z-index: 20;

      top: calc(10%);

      display: flex;

      align-items: center;

    }



    .tarot-meaning-display.visible {

      opacity: 1;

      transform: translateY(0);

      pointer-events: auto;

    }



    .tarot-meaning-text {

      color: #ff00c0;

      font-size: 14px;

      line-height: 1.6;

      margin: 0;

      font-family: inherit;

      width: 100%;

    }



    /* GET A READING button - fixed position to appear over bottom left PNG */

    .tarot-get-reading-btn {

      position: fixed;

      bottom: 20px;

      left: 50%;

      transform: translateX(-50%);

      padding: 12px 32px;

      background: #00ff00;

      color: #000;

      border: 2px solid #000;

      font-family: 'Courier New', monospace;

      font-size: 14px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 2px;

      cursor: pointer;

      box-shadow: 0 4px 0 #000;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      transition: all 0.2s ease;

      z-index: 100001;

      opacity: 0;

      pointer-events: none;

    }



    .tarot-get-reading-btn.visible {

      opacity: 1;

      pointer-events: auto;

    }



    .tarot-get-reading-btn:hover {

      background: #ff00c0;

      color: #000;

      box-shadow: 0 6px 0 #000, 0 0 18px rgba(255, 0, 192, 0.45);

      transform: translateX(-50%) translateY(-2px);

    }



    .tarot-get-reading-btn:active {

      box-shadow: 0 2px 0 #000;

      transform: translateX(-50%) translateY(2px);

    }



    /* Roll button - centered and 30% bigger */

    .tarot-roll-btn {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%) scale(1.3);

      padding: 16px 32px;

      border: 2px solid #000;

      border-radius: 0;

      background: #00ff00;

      color: #000;

      font-size: 16px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      cursor: pointer;

      box-shadow: 0 0 14px rgba(0,255,0,0.7), 0 0 28px rgba(0,255,0,0.3);

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

      z-index: 2200;

      white-space: nowrap;

      animation: tarotPinkBlink 2s ease-in-out infinite;

    }



    .tarot-roll-btn:hover {

      background: #ff00c0;

      color: #000;

      box-shadow: 0 0 20px rgba(255,0,192,0.9), 0 0 40px rgba(255,0,192,0.5);

      transform: translate(-50%, -50%) scale(1.35);

      animation: none;

    }



    @keyframes tarotPinkBlink {

      0%, 40%, 50%, 90%, 100% {

        background: #00ff00;

        box-shadow: 0 0 14px rgba(0,255,0,0.7), 0 0 28px rgba(0,255,0,0.3);

      }

      20%, 30% {

        background: #ff00c0;

        box-shadow: 0 0 20px rgba(255,0,192,0.9), 0 0 40px rgba(255,0,192,0.5);

      }

      70%, 80% {

        background: #ff00c0;

        box-shadow: 0 0 20px rgba(255,0,192,0.9), 0 0 40px rgba(255,0,192,0.5);

      }

    }



    /* Button disappearing animation */

    .tarot-roll-btn.disappearing {

      animation: btnDisappear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

    }



    @keyframes btnDisappear {

      0% {

        transform: translate(-50%, -50%) scale(1.3);

        opacity: 1;

      }

      50% {

        transform: translate(-50%, -50%) scale(1.5);

        opacity: 0.5;

      }

      100% {

        transform: translate(-50%, -50%) scale(0);

        opacity: 0;

        pointer-events: none;

      }

    }



    /* Button reappearing animation */

    .tarot-roll-btn.reappearing {

      animation: btnReappear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

    }



    @keyframes btnReappear {

      0% {

        transform: translate(-50%, -50%) scale(0);

        opacity: 0;

      }

      50% {

        transform: translate(-50%, -50%) scale(1.4);

        opacity: 0.5;

      }

      100% {

        transform: translate(-50%, -50%) scale(1.3);

        opacity: 1;

      }

    }



    /* Pink scroll arrow - bottom right. Hidden per UX spec: users navigate to
       the cards section only via the GET YOUR DESTINY button. */

    .tarot-scroll-arrow {

      display: none !important;

      position: fixed;

      bottom: 10px;

      right: 10px;

      width: 40px;

      height: 40px;

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 36px;

      font-weight: 900;

      color: #ff00c0;

      background: transparent;

      border: none;

      border-radius: 0;

      cursor: pointer;

      z-index: 100002;

      transition: transform 0.3s ease;

      animation: arrowBounce 2s ease-in-out infinite;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

    }



    @keyframes arrowBounce {

      0%, 100% {

        transform: translateY(0);

      }

      50% {

        transform: translateY(-5px);

      }

    }



    .tarot-scroll-arrow.pointing-up {

      transform: scaleY(-1);

    }



    @keyframes arrowBounceUp {

      0%, 100% {

        transform: scaleY(-1) translateY(0);

      }

      50% {

        transform: scaleY(-1) translateY(-5px);

      }

    }



    /* Modal close button transforms to arrow */

    .tarot-modal-close {

      position: absolute;

      top: -38px;

      right: 12px;

      width: auto;

      height: auto;

      border: none;

      border-radius: 0;

      background: transparent;

      color: #ff00c0;

      font-size: 32px;

      font-weight: bold;

      line-height: 1;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 0 0 4px 0;

      z-index: 10001;

      transition: all 0.3s ease;

    }



    .tarot-modal-close::after {

      content: '';

      position: absolute;

      bottom: 2px;

      left: 0;

      width: 100%;

      height: 2px;

      background: #ff00c0;

      transition: background 0.2s ease;

    }



    .tarot-modal-close:hover {

      color: #00ff00;

    }



    .tarot-modal-close:hover::after {

      background: #00ff00;

    }



    /* Back arrow state */

    .tarot-modal-close.back-arrow {

      font-size: 28px;

    }



    .tarot-modal-close.back-arrow::before {

      content: '←';

    }



    .tarot-modal-close.back-arrow span,

    .tarot-modal-close.back-arrow::not(:before) {

      display: none;

    }



    .tarot-text-wrap {

      padding: 20px 16px 50px 16px;

      border-radius: 0 0 8px 8px;

      /* ... */

      width: 100%;

      box-sizing: border-box;

      position: relative;

    }



    .tarot-text-wrap .tarot-text {

      color: #ff00c0 !important;

      margin-top: 15px;

      position: relative;

      z-index: 3;

      transform: translateY(-50px);

    }



    /* Tarot card meaning display */

    .tarot-meaning {

      background: rgba(0, 0, 0, 0.95);

      padding: 20px;

      border-radius: 8px;

      color: #fff;

      max-height: 320px;

      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

      overflow-x: hidden;

      text-align: left;

      -webkit-overflow-scrolling: touch;

    }



    .tarot-card-name {

      color: #ff00c0;

      font-size: 18px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 2px;

      margin: 0 0 12px 0;

      text-align: center;

    }



    .tarot-meaning-text {

      color: #ff00c0;

      font-size: 14px;

      line-height: 1.6;

      margin: 0;

      font-family: inherit;

    }



    .tarot-meaning::-webkit-scrollbar {

      width: 8px;

    }

    .tarot-meaning::-webkit-scrollbar-track {

      background: #1a1a1a;

    }

    .tarot-meaning::-webkit-scrollbar-thumb {

      background: #ff00c0;

      border-radius: 4px;

    }



.section-overlay.tattoos-modal.expanding {

  overflow: visible !important;

  padding-top: 48px !important;

  width: clamp(300px, 88vw, 520px) !important;

  height: 81vh !important;

  max-height: 81vh !important;

  display: flex;

  flex-direction: column;

  z-index: 1300 !important;

}



.tattoos-modal .section-content {

  display: flex;

  flex-direction: column;

  flex: 1;

  min-height: 0;

  overflow: visible;

  padding: 0;

}



/* Tattoos: title on border + scrollable gallery */

.tattoos-modal .gallery-title {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translate(-50%, -50%);

  white-space: nowrap;

  margin: 0;

  letter-spacing: 4px;

  padding: 20px;



  border-radius: 0;

  background: #ff00c0;

  color: #000;

  font-size: 20px;

  font-weight: bold;

  text-transform: uppercase;

  text-align: center;

  box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

  clip-path: polygon(

    50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

    93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

    93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

    50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

    7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

    7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

  );

}

    /* Tattoos: title on border + scrollable gallery */

    .tattoos-modal .gallery-title {

      position: absolute;

      top: 0;

      left: 50%;

      transform: translate(-50%, -50%);

      white-space: nowrap;

      margin: 0;

      letter-spacing: 4px;

      padding: 20px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      text-align: center;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }



    .tattoos-modal .tattoos-gallery-scroll {

      flex: 1;

      /* width: 100% removed — in a flex-column parent the child already
         stretches to the full cross-axis width (align-items: stretch by
         default). Keeping width: 100% together with margin: 10px caused a
         20px horizontal overflow that pushed the pink scrollbar outside
         the modal on small screens. */

      min-height: 0;

      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

      overflow-x: hidden;

      box-sizing: border-box;

      -webkit-overflow-scrolling: touch;

      padding: 0 20px 0 0;

      opacity: 1;

      transition: opacity 0.15s ease;

      margin: 10px;

      scrollbar-width: auto;

      scrollbar-color: #ff00c0 #000;

    }



    .tattoos-modal:not(.expanding) .tattoos-gallery-scroll {

      opacity: 0;

    }



    .tattoos-modal .tattoos-gallery-scroll::-webkit-scrollbar {

      width: 12px;

      background-color: #000;

    }



    .tattoos-modal .tattoos-gallery-scroll::-webkit-scrollbar-button {

      display: none;

      width: 0;

      height: 0;

    }



    .tattoos-modal .tattoos-gallery-scroll::-webkit-scrollbar-track {

      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);

      background-color: #000;

    }



    .tattoos-modal .tattoos-gallery-scroll::-webkit-scrollbar-thumb {

      background: #ff00c0;

      min-height: 64px;

    }



    .tattoos-modal .tattoos-gallery-scroll::-webkit-scrollbar-thumb:hover {

      background: #ff4dcf;

    }



    .tattoos-modal-close {

      position: absolute;

      top: 8px;

      right: 12px;

      width: auto;

      height: auto;

      border: none;

      border-radius: 0;

      background: transparent;

      color: #ff00c0;

      font-size: 32px;

      font-weight: bold;

      line-height: 1;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 0 0 4px 0;

      z-index: 10;

      transition: all 0.2s ease;

    }



    .tattoos-modal-close::after {

      content: '';

      position: absolute;

      bottom: 2px;

      left: 0;

      width: 100%;

      height: 2px;

      background: #ff00c0;

      transition: background 0.2s ease;

    }



    .tattoos-modal-close:hover {

      color: #00ff00;

    }



    .tattoos-modal-close:hover::after {

      background: #00ff00;

    }



    .sturmzx2-modal-close {

      position: absolute;

      top: 8px;

      right: 12px;

      width: auto;

      height: auto;

      border: none;

      border-radius: 0;

      background: transparent;

      color: #ff00c0;

      font-size: 32px;

      font-weight: bold;

      line-height: 1;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 0 0 4px 0;

      z-index: 10;

      transition: all 0.2s ease;

    }



    .sturmzx2-modal-close::after {

      content: '';

      position: absolute;

      bottom: 2px;

      left: 0;

      width: 100%;

      height: 2px;

      background: #ff00c0;

      transition: background 0.2s ease;

    }



    .sturmzx2-modal-close:hover {

      color: #00ff00;

    }



    .sturmzx2-modal-close:hover::after {

      background: #00ff00;

    }



    .contact-modal-close {

      position: absolute;

      top: 8px;

      right: 12px;

      width: auto;

      height: auto;

      border: none;

      border-radius: 0;

      background: transparent;

      color: #ff00c0;

      font-size: 32px;

      font-weight: bold;

      line-height: 1;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 0 0 4px 0;

      z-index: 10;

      transition: all 0.2s ease;

    }



    .contact-modal-close::after {

      content: '';

      position: absolute;

      bottom: 2px;

      left: 0;

      width: 100%;

      height: 2px;

      background: #ff00c0;

      transition: background 0.2s ease;

    }



    .contact-modal-close:hover {

      color: #00ff00;

    }



    .contact-modal-close:hover::after {

      background: #00ff00;

    }



    .tattoos-get-btn {

      position: absolute;

      bottom: -30px;

      left: 50%;

      transform: translateX(-50%);

      padding: 12px 32px;

      background: #00ff00;

      color: #000;

      border: 2px solid #000;

      font-size: 16px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      cursor: pointer;

      border-radius: 0;

      transition: all 0.2s ease;

      box-shadow: 0 4px 0 #000;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      z-index: 2002;

    }



    .tattoos-get-btn:hover,

    .tattoos-get-btn.laser-hover {

      background: #ff00c0;

      box-shadow: 0 6px 0 #000, 0 0 18px rgba(255, 0, 192, 0.45);

      transform: translateX(-50%) translateY(-2px);

    }



    .tattoos-get-btn:active {

      box-shadow: 0 2px 0 #000;

      transform: translateX(-50%) translateY(2px);

    }



    .sturmzx2-visit-btn {

      position: absolute;

      bottom: 0;

      left: 50%;

      transform: translate(-50%, 50%);

      padding: 12px 32px;

      background: #00ff00;

      color: #000;

      border: 2px solid #000;

      font-size: 16px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      cursor: pointer;

      border-radius: 0;

      transition: all 0.2s ease;

      box-shadow: 0 4px 0 #000;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      z-index: 100000;

    }



    .sturmzx2-visit-btn:hover,

    .sturmzx2-visit-btn.laser-hover {

      background: #ff00c0;

      box-shadow: 0 6px 0 #000, 0 0 18px rgba(255, 0, 192, 0.45);

      transform: translate(-50%, calc(50% - 2px));

    }



    .sturmzx2-visit-btn:active {

      box-shadow: 0 2px 0 #000;

      transform: translate(-50%, calc(50% + 2px));

    }



    /* ---------- Fluid gallery (tattoos) ---------- */

    .fluid-gallery {

      columns: 4;

      column-gap: 16px;

      width: 100%;

      min-width: 280px;

    }



    @media (max-width: 1024px) {

      .fluid-gallery { columns: 3; }

    }



    @media (max-width: 640px) {

      .fluid-gallery { columns: 2; }

    }



    .fluid-gallery .gallery-item {

      break-inside: avoid;

      margin-bottom: 16px;

      border: none;

      overflow: hidden;

    }



    .fluid-gallery .gallery-item:hover,

    .fluid-gallery .gallery-item.laser-hover {

      transform: none;

      box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.06), 0 0 24px rgba(0, 255, 0, 0.08);

    }



    .fluid-gallery .gallery-item:nth-child(7) { animation-delay: 0.35s; }

    .fluid-gallery .gallery-item:nth-child(8) { animation-delay: 0.4s; }

    .fluid-gallery .gallery-item:nth-child(n+9) { animation-delay: 0.45s; }



    .fluid-gallery .gallery-item img {

      width: 100%;

      height: auto;

      display: block;

      object-fit: fill;

    }



    .fluid-gallery .tattoo-ball-particles {

      position: absolute;

      top: 0; right: 0; bottom: 0; left: 0;

      inset: 0;

      pointer-events: none;

      overflow: hidden;

    }



    .fluid-gallery .tattoo-ball-particle {

      position: absolute;

      width: 28px;

      height: 28px;

      background: url('https://oyestupida.xyz/siteweb/ball.png') center / contain no-repeat;

      opacity: 0;

      transform: translate(-50%, -50%) scale(0);

      transition: opacity 0.35s ease, transform 0.35s ease;

    }



    .fluid-gallery .gallery-item:hover .tattoo-ball-particle,

    .fluid-gallery .gallery-item.laser-hover .tattoo-ball-particle {

      opacity: 1;

      transform: translate(-50%, -50%) scale(1);

    }



    .fluid-gallery .tattoo-ball-particle:nth-child(1)  { transition-delay: 0s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(2)  { transition-delay: 0.03s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(3)  { transition-delay: 0.06s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(4)  { transition-delay: 0.09s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(5)  { transition-delay: 0.12s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(6)  { transition-delay: 0.15s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(7)  { transition-delay: 0.18s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(8)  { transition-delay: 0.21s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(9)  { transition-delay: 0.24s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(10) { transition-delay: 0.27s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(11) { transition-delay: 0.3s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(12) { transition-delay: 0.33s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(13) { transition-delay: 0.36s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(14) { transition-delay: 0.39s; }

    .fluid-gallery .tattoo-ball-particle:nth-child(15) { transition-delay: 0.42s; }



    /* ---------- STURMZX2 Modal ---------- */

    .section-overlay.sturmzx2-modal {

      background: rgba(0, 0, 0, 0.9);

      border: 2px solid #00ff00;

    }



    .section-overlay.sturmzx2-modal.expanding {

      overflow: visible !important;

      padding-top: 48px !important;

      max-width: 98vw !important;

      /* height: fit-content crashes Safari fixed+flex containers (height collapses to 0).
         The shared bio+sturm rule already sets clamp(400px,80vh,680px) — rely on that. */

      max-height: 81vh !important;

      display: flex;

      flex-direction: column;

      z-index: 1300 !important;

    }



    .sturmzx2-modal .section-content {

      display: flex;

      flex-direction: column;

      flex: 1;

      width: 100%;

      min-height: 0;

      overflow: visible;

      padding: 0;

    }



    .sturmzx2-modal .gallery-title {

      position: absolute;

      top: 0;

      left: 50%;

      transform: translate(-50%, -50%);

      white-space: nowrap;

      margin: 0;

      letter-spacing: 4px;

      padding: 20px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      text-align: center;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }



    .sturmzx2-scroll {

      flex: 1;

      width: 100%;

      min-height: 0;

      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

      overflow-x: hidden;

      box-sizing: border-box;

      -webkit-overflow-scrolling: touch;

      /* padding-bottom creates clearance so the last paragraph
         doesn't scroll behind the floating .sturmzx2-visit-btn
         (button is now centered on the bottom border, so only ~half
         its height is inside the modal — ~35px clearance is enough) */
      padding: 0 20px 40px 0;

      opacity: 1;

      transition: opacity 0.15s ease;

      scrollbar-width: auto;

      scrollbar-color: #ff00c0 #000;

      margin:10px;

    }





    .sturmzx2-scroll::-webkit-scrollbar {

      width: 12px;

      background-color: #000;

    }



    .sturmzx2-scroll::-webkit-scrollbar-button {

      display: none;

      width: 0;

      height: 0;

    }



    .sturmzx2-scroll::-webkit-scrollbar-track {

      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);

      background-color: #000;

    }

    .sturmzx2-scroll::-webkit-scrollbar-thumb {

      background: #ff00c0;

      min-height: 64px;

    }

    .sturmzx2-scroll::-webkit-scrollbar-thumb:hover {

      background: #ff4dcf;

    }



    .sturmzx2-content {

      padding: 8px 0;

      line-height: 1.6;

      font-size: 14px;

      color: rgba(255, 105, 180, 0.95);

      text-align: left;

    }



    .sturmzx2-tagline {

      font-size: 13px;

      color: #00ff00;

      text-transform: uppercase;

      letter-spacing: 2px;

      margin: 4px 0 6px;

      font-style: italic;

    }



    .sturmzx2-first-paragraph {

      font-weight: 700;

      font-size: 1.05em;

      letter-spacing: -0.1px;

      line-height: 1.45;

      margin-bottom: 1em;

    }



    .sturmzx2-duo-gif {

      display: block;

      width: 100%;

      max-width: 100%;

      height: auto;

      margin: 0 0 8px;

      border: 1px solid rgba(255, 0, 192, 0.45);

      box-shadow: 0 0 12px rgba(255, 0, 192, 0.25);

    }



    .sturmzx2-be-bold {

      font-weight: 900;

      font-size: 1.08em;

      letter-spacing: 0.4px;

    }



    .section-overlay.cakes-modal {

      background: rgba(0, 0, 0, 0.9);

      border: 2px solid #00ff00;

    }



    .cakes-modal .section-content {

      display: flex;

      flex-direction: column;

      flex: 1;

      height: 100%;

      min-height: 100%;

      overflow: visible;

      padding: 0;

      position: relative;

      z-index: 2;

      align-items: center;

      justify-content: center;

    }



    .section-overlay.cakes-modal.expanding .section-content {

      position: relative;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      width: 100%;

      height: 100%;

      min-height: 100%;

      padding: 0;

      box-sizing: border-box;

    }



    .section-overlay.cakes-modal .gallery-title {

      position: absolute;

      top: 0;

      left: 50%;

      transform: translate(-50%, -50%);

      margin: 0;

      white-space: nowrap;

      z-index: 5;

      padding: 20px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      text-align: center;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

    }



    /* ---------- Cakes carousel ---------- */

    .cakes-container {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      width: min(540px, 41vw);

      height: min(540px, 41vw);

      flex-shrink: 0;

    }



    @media (min-width: 1600px) {

      .cakes-container {

        width: min(720px, 42vw);

        height: min(720px, 42vw);

      }

    }



    @media (max-width: 1200px) {

      .cakes-container {

        width: min(450px, 41vw);

        height: min(450px, 41vw);

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

      }

    }



    @media (max-width: 768px) {

      .cakes-container {

        width: 430px;

        height: 430px;

        max-width: 90vw;

        max-height: 90vw;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

      }

    }



    @media (max-width: 480px) {

      .cakes-container {

        width: 360px;

        height: 360px;

        max-width: 94vw;

        max-height: 94vw;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

      }

    }



    .cakes-center {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      width: 50%;

      height: 50%;

      min-width: 160px;

      min-height: 160px;

      z-index: 6;

      transition: all 0.4s ease;

      display: flex;

      align-items: center;

      justify-content: center;

      overflow: hidden;

    }



    .cakes-center img {

      width: 100%;

      height: 100%;

      object-fit: contain;

      animation: cakeCenterAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;

    }



    .cakes-center-selected {

      z-index: 12;

      overflow: visible;

    }



    .cakes-float-group {

      position: relative;

      width: 100%;

      height: 100%;

      display: flex;

      align-items: center;

      justify-content: center;

      animation: cakeCenterFloat 3.1s ease-in-out 0.8s infinite;

      transform-origin: center;

    }



    .cakes-float-group::before {

      content: '';

      position: absolute;

      top: 12%; right: 12%; bottom: 12%; left: 12%;

      inset: 12%;

      border-radius: 50%;

      background:

        radial-gradient(circle at 28% 26%, rgba(255, 0, 192, 0.62) 0%, rgba(255, 0, 192, 0) 58%),

        radial-gradient(circle at 72% 74%, rgba(0, 255, 0, 0.62) 0%, rgba(0, 255, 0, 0) 56%);

      filter: blur(12px) saturate(125%);

      opacity: 0;

      transform: scale(0.9);

      transition: opacity 0.25s ease, transform 0.25s ease;

      pointer-events: none;

      z-index: 1;

    }



    .cakes-float-group > img {

      position: relative;

      z-index: 2;

    }



    .cakes-center-selected:hover .cakes-float-group::before,

    .cakes-center-selected.laser-hover .cakes-float-group::before {

      opacity: 1;

      transform: scale(1.04);

      animation: cakeAuraPulse 1.2s ease-in-out infinite alternate;

    }



    .cake-name-tooltip {

      position: absolute;

      left: 50%;

      top: 75%;

      transform: translate(-50%, -50%);

      padding: 12px 20px;

      border: none;

      background: #ff00c0;

      color: #000;

      font-size: clamp(14px, 1.08vw, 17px);

      font-weight: 700;

      letter-spacing: 0.2px;

      text-transform: uppercase;

      line-height: 1;

      pointer-events: none;

      box-shadow: 0 0 10px rgba(255, 0, 192, 0.55), 0 0 16px rgba(255, 0, 192, 0.25);

      white-space: nowrap;

      z-index: 4;

      clip-path: polygon(

        50% 0%, 58% 12%, 70% 6%, 72% 19%, 84% 14%, 82% 28%,

        96% 24%, 90% 38%, 100% 40%, 91% 50%, 100% 60%, 90% 62%,

        96% 76%, 82% 72%, 84% 86%, 72% 81%, 70% 94%, 58% 88%,

        50% 100%, 42% 88%, 30% 94%, 28% 81%, 16% 86%, 18% 72%,

        4% 76%, 10% 62%, 0% 60%, 9% 50%, 0% 40%, 10% 38%,

        4% 24%, 18% 28%, 16% 14%, 28% 19%, 30% 6%, 42% 12%

      );

    }



    /* Center cake circular border animation */

    .cakes-center::before {

      content: '';

      position: absolute;

      top: -8px; right: -8px; bottom: -8px; left: -8px;

      inset: -8px;

      border-radius: 50%;

      padding: 4px;

      background: linear-gradient(90deg, #ff00c0 50%, #00ff00 50%);

      background-size: 200% 100%;

      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

      -webkit-mask-composite: xor;

      mask-composite: exclude;

      opacity: 0;

      pointer-events: none;

    }



    .cakes-center.has-cake::before {

      opacity: 1;

      animation: borderRotate 1.5s linear infinite;

    }



    @keyframes cakeCenterAppear {

      0% {

        transform: scale(0) rotate(-180deg);

        opacity: 0;

      }

      50% {

        transform: scale(1.2) rotate(10deg);

        opacity: 1;

      }

      100% {

        transform: scale(1) rotate(0deg);

        opacity: 1;

      }

    }



    @keyframes cakeCenterFloat {

      0%, 100% { transform: translateY(0); }

      50% { transform: translateY(-8px); }

    }



    @keyframes cakeAuraPulse {

      0% {

        filter: blur(10px) saturate(115%);

      }

      100% {

        filter: blur(16px) saturate(140%);

      }

    }



    .cakes-center:hover img {

      transform: scale(1.05);

    }



    .cakes-center.hit img {

      animation: cakeCenterHit 0.3s ease-out;

    }



    @keyframes cakeHit {

      0%   { filter: brightness(1.3); }

      100% { filter: brightness(1); }

    }



    .cakes-orbit {

      position: absolute;

      top: 50%;

      left: 50%;

      width: 88%;

      height: 88%;

      margin: -44% 0 0 -44%;

      transform-origin: center center;

      animation: orbitSpin 30s linear infinite;

      z-index: 8;

    }



    .cakes-orbit:hover,

    .cakes-orbit:hover .cakes-orbit-item {

      animation-play-state: paused;

    }



    @keyframes orbitSpin {

      from { transform: rotate(0deg); }

      to { transform: rotate(360deg); }

    }



    @keyframes orbitCounterSpin {

      from { transform: translate(-50%, -50%) rotate(0deg); }

      to { transform: translate(-50%, -50%) rotate(-360deg); }

    }



    .cakes-orbit-item {

      position: absolute;

      width: 35%;

      height: 35%;

      min-width: clamp(100px, 12vw, 200px);

      min-height: clamp(100px, 12vw, 200px);

      cursor: pointer;

      transition: all 0.3s ease;

      transform: translate(-50%, -50%);

      animation: orbitCounterSpin 30s linear infinite;

      z-index: 5;

      pointer-events: auto;

    }



    .cakes-orbit-item::after {

      content: '';

      position: absolute;

      top: 16%; right: 16%; bottom: 16%; left: 16%;

      inset: 16%;

      border-radius: 50%;

      background: radial-gradient(circle, rgba(255, 0, 192, 0.34) 0%, rgba(0, 255, 0, 0.3) 48%, rgba(255, 0, 192, 0) 78%);

      filter: blur(7px);

      opacity: 0;

      transform: scale(0.72);

      transition: opacity 0.25s ease, transform 0.25s ease;

      pointer-events: none;

      z-index: -1;

    }



    .cakes-orbit-item.hit {

      animation: cakeHit 0.4s ease-out, orbitCounterSpin 30s linear infinite;

    }



    .cakes-orbit-item:hover,

    .cakes-orbit-item.laser-hover {

      z-index: 7;

    }



    .cakes-orbit-item::before {

      content: '';

      position: absolute;

      top: -3px; right: -3px; bottom: -3px; left: -3px;

      inset: -3px;

      border-radius: 50%;

      padding: 6px;

      background: linear-gradient(90deg, #ff00c0 50%, #00ff00 50%);

      background-size: 200% 100%;

      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

      -webkit-mask-composite: xor;

      mask-composite: exclude;

      opacity: 0;

      transition: opacity 0.3s ease;

      pointer-events: none;

    }



    .cakes-orbit-item:hover::before,

    .cakes-orbit-item.laser-hover::before {

      opacity: 1;

      animation: borderRotate 1.5s linear infinite;

    }



    @keyframes borderRotate {

      0% { background-position: 0% 0%; }

      100% { background-position: 200% 0%; }

    }



    .cakes-orbit-item:hover img,

    .cakes-orbit-item.laser-hover img {

      transform: scale(1.35);

    }



    .cakes-orbit-item img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s ease;

      animation: cakeUnfold 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;

    }



    .cakes-orbit-item:nth-child(1) img { animation-delay: 0.05s; }

    .cakes-orbit-item:nth-child(2) img { animation-delay: 0.12s; }

    .cakes-orbit-item:nth-child(3) img { animation-delay: 0.19s; }

    .cakes-orbit-item:nth-child(4) img { animation-delay: 0.26s; }

    .cakes-orbit-item:nth-child(5) img { animation-delay: 0.33s; }

    .cakes-orbit-item:nth-child(6) img { animation-delay: 0.4s; }

    .cakes-orbit-item:nth-child(7) img { animation-delay: 0.47s; }

    .cakes-orbit-item:nth-child(8) img { animation-delay: 0.54s; }

    .cakes-orbit-item:nth-child(9) img { animation-delay: 0.61s; }



    @keyframes cakeUnfold {

      from { transform: scale(0); opacity: 0; }

      to { transform: scale(1); opacity: 1; }

    }



    .falling-cakes-container {

      position: fixed;

      top: 0; right: 0; bottom: 0; left: 0;

      inset: 0;

      pointer-events: none;

      z-index: 860;

      overflow: hidden;

    }



    .falling-cake {

      position: fixed;

      border-radius: 50%;

      overflow: hidden;

      pointer-events: none;

      z-index: 0;

    }



    .falling-cake img {

      width: 100%;

      height: 100%;

      object-fit: contain;

    }



    .cakes-nutrition {

      position: absolute;

      bottom: 12px;

      right: 12px;

      max-width: 160px;

      padding: 12px 14px;

      background: linear-gradient(135deg, #0a0a0a 0%, #1a0a12 100%);

      border: 2px solid rgba(255, 105, 180, 0.5);

      border-radius: 6px;

      z-index: 4;

      box-shadow: 0 0 16px rgba(255, 105, 180, 0.15);

    }



    .cakes-nutrition-title {

      font-size: 8px;

      color: #ff00c0;

      text-transform: uppercase;

      letter-spacing: 6px;

      margin-bottom: 8px;

      border-bottom: 1px solid rgba(255, 105, 180, 0.3);

      padding-bottom: 6px;

    }



    .cakes-nutrition-row {

      display: flex;

      justify-content: space-between;

      font-size: 8px;

      color: rgba(255, 105, 180, 0.5);

      text-transform: uppercase;

      letter-spacing: 1.5px;

      line-height: 1.6;

    }



    .cakes-nutrition-row span:first-child {

      color: rgba(255, 105, 180, 0.6);

    }



    .cakes-nutrition-row span:last-child {

      color: #ff00c0;

      font-weight: bold;

    }



    .section-overlay .section-content {

      opacity: 0;

      transition: opacity 0.3s 0.3s;

      color: #ff00c0;

      font-size: 28px;

      text-transform: uppercase;

      letter-spacing: 6px;

    }



    .section-overlay.expanding .section-content {

      opacity: 1;

    }



    /* ---------- Brutalist scrollbar ---------- */

    .section-overlay::-webkit-scrollbar {

      width: 18px;

    }

    .section-overlay::-webkit-scrollbar-track {

      background: #050505;

      border-left: 3px solid #ff00c0;

    }

    .section-overlay::-webkit-scrollbar-thumb {

      background: #ff00c0;

      border: 3px solid #000;

      min-height: 64px;

      box-shadow: inset 0 0 0 2px #000;

    }

    .section-overlay::-webkit-scrollbar-thumb:hover {

      background: #ff00c0;

      box-shadow: inset 0 0 0 3px #000;

    }

    .section-overlay {

      scrollbar-width: auto; /* Firefox */

      scrollbar-color: #ff00c0 #0a0a0a;

    }



    /* ---------- Contact form ---------- */

    .contact-form {

      display: flex;

      flex-direction: column;

      align-items: center;

      gap: 24px;

      width: 100%;

      min-width: 280px;

      max-width: 400px;

    }



    /* ---------- Paintings gallery ---------- */

    .gallery {

      display: flex;

      flex-wrap: wrap;

      display: grid;

      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

      gap: 16px;

      width: 100%;

      min-width: 280px;

    }



    .gallery-item {

      position: relative;

      border-radius: 8px;

      overflow: hidden;

      border: 2px solid rgba(255, 105, 180, 0.3);

      cursor: inherit;

      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

      animation: galleryIn 0.5s ease backwards;

    }



    /* Paintings grid: square cells */

    .gallery .gallery-item {

      min-height: 140px;

      aspect-ratio: 1;

    }



    .gallery-item:nth-child(1) { animation-delay: 0.05s; }

    .gallery-item:nth-child(2) { animation-delay: 0.1s; }

    .gallery-item:nth-child(3) { animation-delay: 0.15s; }

    .gallery-item:nth-child(4) { animation-delay: 0.2s; }

    .gallery-item:nth-child(5) { animation-delay: 0.25s; }

    .gallery-item:nth-child(6) { animation-delay: 0.3s; }



    @keyframes galleryIn {

      from { opacity: 0; transform: scale(0.9); }

      to { opacity: 1; transform: scale(1); }

    }



    .gallery-item:hover,

    .gallery-item.laser-hover {

      border-color: #ff00c0;

      transform: scale(1.05);

      box-shadow: 0 0 24px rgba(255, 105, 180, 0.4), 0 8px 32px rgba(0, 0, 0, 0.4);

    }



    .gallery-item img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      display: block;

    }



    .gallery-title {

      display: inline-block;

      padding: 20px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-size: 20px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      text-align: center;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      margin: 0;

      white-space: nowrap;

      border: 2px solid #000;

    }



    /* Gallery title blinking animation for tarot card name */

    .gallery-title.title-blink {

      color: #00ff00 !important;

      animation: titleBlink 0.4s ease-in-out 4;

    }



    @keyframes titleBlink {

      0%, 100% {

        transform: translate(-50%, -50%) scale(1);

      }

      50% {

        transform: translate(-50%, -50%) scale(1.15);

      }

    }



    .paintings-modal .gallery-title,

    .tattoos-modal .gallery-title {

      position: absolute;

      top: 0;

      left: 50%;

      transform: translate(-50%, -50%);

    }



    .lightbox {

      position: fixed;

      top: 0; right: 0; bottom: 0; left: 0;

      inset: 0;

      background: rgba(0, 0, 0, 0.92);

      z-index: 15555000;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 40px;

      opacity: 0;

      pointer-events: none;

      transition: opacity 0.3s ease;

    }



    .lightbox.open {

      opacity: 1;

      pointer-events: auto;

    }



    .lightbox img {

      max-width: 90vw;

      max-height: 85vh;

      object-fit: contain;

      border-radius: 8px;

      border: 2px solid #ff00c0;

      box-shadow: 0 0 60px rgba(255, 105, 180, 0.3);

      pointer-events: none;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      -webkit-user-drag: none;

    }



    .lightbox.tattoo-view img {

      border: none;

      box-shadow: none;

    }



    .lightbox.tattoo-view .lightbox-loupe {

      position: fixed;

      width: 100px;

      height: 100px;

      pointer-events: none;

      z-index: 10001;

      opacity: 0;

      transition: opacity 0.15s ease, width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

      border: 2px solid rgba(0, 255, 0, 0.4);

      box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);

      border-radius: 50%;

      overflow: hidden;

      /* Center on cursor - no offset */

      left: 0;

      top: 0;

      transform: translate(-50%, -50%);

      margin-left: 0;

      margin-top: 0;

    }



    .lightbox.tattoo-view .lightbox-loupe.visible {

      opacity: 1;

    }



    .lightbox.tattoo-view {

      cursor: none;

    }



    .lightbox.open ~ .mute-btn-wrap,

    .lightbox.open ~ .toggle-btn-wrap,

    body:has(.lightbox.open) .mute-btn-wrap,

    body:has(.lightbox.open) .toggle-btn-wrap,

    body:has(.modal-backdrop.visible) .mute-btn-wrap,

    body:has(.modal-backdrop.visible) .toggle-btn-wrap,

    /* :has() fallback for browsers that don't support it (old Safari/Firefox) */

    body.modal-open .mute-btn-wrap,

    body.modal-open .toggle-btn-wrap {

      z-index: 800;

    }



    /* Also when tattoos modal is open */

    .section-overlay.tattoos-modal.expanding ~ .mute-btn-wrap,

    .section-overlay.tattoos-modal.expanding ~ .toggle-btn-wrap,

    body:has(.section-overlay.tattoos-modal.expanding) .mute-btn-wrap,

    body:has(.section-overlay.tattoos-modal.expanding) .toggle-btn-wrap {

      z-index: 800;

    }



    .lightbox-close {

      position: absolute;

      top: 8px;

      right: 12px;

      width: auto;

      height: auto;

      border: none;

      border-radius: 0;

      background: transparent;

      color: #ff00c0;

      font-size: 32px;

      font-weight: bold;

      line-height: 1;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 0 0 4px 0;

      z-index: 10002;

      transition: all 0.2s ease;

    }



    .lightbox-close::after {

      content: '';

      position: absolute;

      bottom: 2px;

      left: 0;

      width: 100%;

      height: 2px;

      background: #ff00c0;

      transition: background 0.2s ease;

    }



    .lightbox-close:hover {

      color: #00ff00;

    }



    .lightbox-close:hover::after {

      background: #00ff00;

    }



    /* ---------- Bio modal ---------- */

    .bio-content {

      max-width: 100%;

      width: 100%;

      height: 100%;

      flex: 1;

      min-height: 0;

      padding: 8px 0;

      margin: 0 auto;

      box-sizing: border-box;

      position: relative;

      overflow: hidden;

    }



    .bio-content .bio-tagline {

      font-size: 12px;

      color: rgba(255, 105, 180, 0.7);

      text-transform: uppercase;

      letter-spacing: 4px;

      text-align: center;

      margin-bottom: 28px;

    }



    .bio-content .bio-text {

      font-size: clamp(11px, 1.4vw, 13px);

      line-height: 1.8;

      color: rgba(255, 105, 180, 0.95);

      text-align: center;

    }



    .bio-scroll {

      overflow-y: auto;

      -webkit-overflow-scrolling: touch;

      height: 100%;

      min-height: 0;

      padding: 10px 16px 18px 16px;

      width: 100%;

      margin: 0 auto;

      position: relative;

      z-index: 10;

      scrollbar-width: auto; /* Firefox */

      scrollbar-color: #ff00c0 #0a0a0a;

      cursor: grab;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      overscroll-behavior: contain;

      touch-action: pan-y;

    }



    .bio-scroll::-webkit-scrollbar {

      width: 36px;

    }

    .bio-scroll::-webkit-scrollbar-track {

      background: #050505;

      border-left: 3px solid #ff00c0;

    }

    .bio-scroll::-webkit-scrollbar-thumb {

      background: #ff00c0;

      border: 3px solid #000;

      min-height: 64px;

      box-shadow: inset 0 0 0 2px #000;

    }

    .bio-scroll::-webkit-scrollbar-thumb:hover {

      background: #ff00c0;

      box-shadow: inset 0 0 0 3px #000;

    }

    .bio-scroll.dragging {

      cursor: grabbing;

    }

    .bio-content .bio-text p {

      margin-bottom: 16px;

    }



    .section-overlay.bio-modal .bio-intro {

      font-size: 30px;

      font-weight: 800;

      line-height: 1.25;

      margin-bottom: 18px;

      text-align: center;

      color: rgba(255, 105, 180, 0.95);

      width: 100%;

      padding: 0 20px;

      box-sizing: border-box;

    }



    .bio-content .bio-text p:last-child {

      margin-bottom: 0;

    }



    .bio-photo-wrap {

      position: absolute;

      left: 50%;

      bottom: 0;

      width: 100%;

      height: 0; /* anchor-only; image can overflow upward */

      transform: translateX(-50%);

      overflow: visible;

      z-index: 30;

      pointer-events: none; /* don't block scrolling on bio text */

    }

    .bio-photo-wrap img {

      width: min(520px, 92%);

      height: auto;

      max-height: 92%;

      display: block;

      position: absolute;

      left: 50%;

      bottom: 0;

      transform: translate(-50%, 0%) scale(0.34);

      transform-origin: bottom center;

      transition: transform 0.45s ease, filter 0.45s ease;

      filter: drop-shadow(0 0 14px rgba(255,0,192,0.55));

      pointer-events: auto; /* image can still be hovered */

      outline: 1px solid rgba(255,0,192,0.25);

      border-radius: 10px;

    }

    .bio-photo-wrap img:hover,

    .bio-photo-wrap img.laser-hover {

      transform: translate(-50%, 0%) scale(1);

      filter: drop-shadow(0 0 22px rgba(255,0,192,0.75));

    }



    .contact-form .form-prompt {

      color: #ff00c0;

      font-size: 28px;

      font-weight: bold;

      line-height: 1.1;

      margin-bottom: 4px;

    }



    .contact-form .form-prompt span {

      display: block;

    }



    .contact-form input,

    .contact-form textarea {

      width: 100%;

      padding: 12px 16px;

      border: 2px solid #ff00c0;

      background: rgba(255, 105, 180, 0.05);

      color: #ff00c0;

      font-family: inherit;

      font-size: 16px;

      transition: all 0.25s ease;

    }



    .contact-form input::placeholder,

    .contact-form textarea::placeholder {

      color: rgba(255, 105, 180, 0.5);

    }



    .contact-form input:focus,

    .contact-form textarea:focus {

      background: rgba(255, 105, 180, 0.12);

      box-shadow: 0 0 20px rgba(255,0,192,0.2);

    }



    .contact-form textarea {

      min-height: 120px;

      resize: vertical;

    }



    .contact-form .form-step {

      display: none;

      flex-direction: column;

      gap: 14px;

      width: 100%;

      animation: fadeIn 0.3s ease;

    }



    .contact-form .form-step.active {

      display: flex;

    }



    @keyframes fadeIn {

      from { opacity: 0; transform: translateY(8px); }

      to { opacity: 1; transform: translateY(0); }

    }



    .contact-form .form-btn {

      padding: 12px 32px;

      background: #00ff00;

      color: #000;

      border: 2px solid #000;

      font-size: 16px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      cursor: pointer;

      border-radius: 0;

      transition: all 0.2s ease;

      box-shadow: 0 4px 0 #000;

      margin-top: 8px;

      width: auto;

      display: inline-block;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      z-index: 100000;

    }



    .contact-form .form-btn:hover,

    .contact-form .form-btn.laser-hover {

      background: #ff00c0;

      box-shadow: 0 6px 0 #000, 0 0 18px rgba(255, 0, 192, 0.45);

      transform: translateY(-2px);

    }



    .contact-form .form-btn:active {

      box-shadow: 0 2px 0 #000;

      transform: translateY(2px);

    }



    .contact-form .contact-success-title {

      margin: 0 0 8px;

      font-size: 16px;

      line-height: 1.2;

      color: #ff00c0;

      text-transform: uppercase;

      letter-spacing: 0.4px;

    }



    .contact-form .contact-success-text {

      margin: 0;

      font-size: 12px;

      line-height: 1.35;

      color: #ff9eea;

      max-width: 36ch;

    }



    .contact-form.contact-success-only {

      padding-top: 0;

      min-height: 320px;

      justify-content: center;

      align-items: center;

      text-align: center;

      gap: 0;

    }



    .tarot-reading-form .tarot-success-title {

      margin: 0 0 8px;

      font-size: 16px;

      line-height: 1.2;

      color: #ff00c0;

      text-transform: uppercase;

      letter-spacing: 0.4px;

    }



    .tarot-reading-form .tarot-success-text {

      margin: 0;

      font-size: 12px;

      line-height: 1.35;

      color: #ff9eea;

      max-width: 36ch;

    }



    #contactNext1,

    #contactNext2 {

      align-self: flex-end;

      width: auto;

      margin-left: auto;

    }



    #contactNext1 {

      margin-bottom: -14px;

    }



    /* ---------- Exit button ---------- */

    .exit-btn {

      position: fixed;

      top: 30px; right: 30px;

      width: 56px; height: 56px;

      border-radius: 50%;

      border: 2px solid #000;

      background: transparent;

      padding: 0;

      display: flex; align-items: center; justify-content: center;

      touch-action: manipulation;

      z-index: 950;

      opacity: 0;

      pointer-events: none;

      transform: scale(0.5);

      transition: all 0.3s ease;

      cursor: pointer;

    }



    .exit-btn img {

      width: 100%;

      height: 100%;

      object-fit: contain;

      pointer-events: none;

    }



    .exit-btn.visible {

      opacity: 1;

      pointer-events: auto;

      transform: scale(1);

    }



    .exit-btn:hover,

    .exit-btn.laser-hover {

      transform: scale(1.15);

      filter: drop-shadow(0 0 8px #ff00c0);

    }



    .exit-btn.hit {

      animation: btnHit 0.4s ease-out;

    }



    .mute-btn {

      width: 48px;

      height: 48px;

      border-radius: 50%;

      border: none;

      background: transparent;

      padding: 0;

      display: flex;

      align-items: center;

      justify-content: center;

      cursor: pointer;

      touch-action: manipulation;

      transition: transform 0.25s ease;

      position: relative;

      z-index: 2;

    }



    .mute-btn:not(.muted) {

      animation: beat 1.2s ease-in-out infinite;

    }



    @keyframes beat {

      0%, 100% { transform: scale(1); }

      50% { transform: scale(1.15); }

    }



    .mute-btn-wrap {

      position: fixed;

      top: 20px;

      right: 20px;

      z-index: 951;

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .mute-tooltip,

    .toggle-tooltip {

      position: absolute;

      left: 50%;

      transform: translateX(-50%) translateY(-4px) scale(0.85);

      white-space: nowrap;

      font-size: 11px;

      font-weight: bold;

      text-transform: uppercase;

      letter-spacing: 1px;

      opacity: 0;

      padding: 10px 26px;

      background: #ff00c0;

      color: #000;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      pointer-events: none;

      transition: opacity 0.2s ease, transform 0.2s ease;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      border: 2px solid #000;

    }



    /* mute tooltip: below the icon, fades in on hover/click, star shape */

    .mute-tooltip {

      top: calc(100% - 8px);

      bottom: auto;

      left: 50%;

      right: auto;

      transform: translateX(-50%) scale(0.6);

      margin-left: -10px;

      opacity: 0;

      font-size: 13px;

      padding: 20px;

      min-width: 56px;

      min-height: 56px;

      display: flex;

      align-items: center;

      justify-content: center;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      z-index: 1;

      pointer-events: none;

      filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000);

      transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;

    }



    /* Fade in on hover */

    .mute-btn-wrap:hover .mute-tooltip {

      opacity: 1;

      pointer-events: auto;

    }



    /* Show tooltip when clicked (active state) */

    .mute-btn-wrap.active .mute-tooltip {

      opacity: 1;

      pointer-events: auto;

    }



    /* Keep ON state green even when not hovering */

    .mute-btn:not(.muted) + .mute-tooltip {

      background: #00ff00;

      color: #000;

      border: 2px solid #000;

      box-shadow: 0 0 14px rgba(0,255,0,0.75), 0 0 28px rgba(0,255,0,0.35);

    }



    /* light toggle tooltip: above the icon */

    .toggle-tooltip {

      bottom: 110%;

      top: auto;

    }



    .toggle-btn-wrap:hover .toggle-tooltip {

      opacity: 1;

      transform: translateX(-50%) translateY(0) scale(1);

    }



    .mute-btn-wrap:hover .mute-btn.muted + .mute-tooltip {

      transform: translateX(-50%) scale(0.6);

      background: #00ff00;

      color: #000;

      border: 2px solid #000;

      box-shadow: 0 0 14px rgba(0,255,0,0.75), 0 0 28px rgba(0,255,0,0.35);

    }



    .mute-btn-wrap:hover .mute-btn:not(.muted) + .mute-tooltip {

      transform: translateX(-50%) scale(0.6);

      background: #ff00c0;

      color: #000;

      border: 2px solid #000;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

    }



    .toggle-btn-wrap {

      position: fixed;

      right: 22px;

      top: 50%;

      transform: translateY(-50%);

      z-index: 1200;

      display: flex;

      align-items: center;

      justify-content: center;

    }



    /* Cakes button */

    .ring-btn.cakes-btn {

      position: absolute;

    }

    .mute-btn.muted .mute-icon { opacity: 0.5; }



    /* ---------- Preview ---------- */

    .preview-box {

      position: fixed;

      bottom: 30px; right: 30px;

      border: 2px solid #ff00c044;

      padding: 12px;

      background: rgba(255, 105, 180, 0.05);

      border-radius: 8px;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      z-index: 700;

      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

      overflow: hidden;

    }



    .preview-box.folded {

      width: 20px !important;

      height: 20px !important;

      padding: 0;

      border-radius: 50%;

      border: 2px solid #0f0;

      background: #0f0;

      box-shadow: 0 0 8px #0f0, 0 0 16px rgba(0,255,0,0.4);

      cursor: pointer;

    }



    .preview-box.folded * {

      opacity: 0;

      pointer-events: none;

    }



    .preview-box.folded:hover {

      box-shadow: 0 0 14px #0f0, 0 0 28px rgba(0,255,0,0.6);

      transform: scale(1.3);

    }



    .preview-container {

      position: relative;

      display: inline-block;

    }



    .preview-box img.gun-preview {

      display: block;

      width: 200px;

      image-rendering: auto;

    }



    .preview-svg {

      position: absolute;

      top: 0; left: 0;

      width: 100%; height: 100%;

      pointer-events: none;

      overflow: visible;

    }



    .hotspot-dot {

      position: absolute;

      width: 14px; height: 14px;

      background: #0f0;

      border: 2px solid #fff;

      border-radius: 50%;

      transform: translate(-50%, -50%);

      box-shadow: 0 0 8px #0f0, 0 0 16px rgba(0,255,0,0.4);

      cursor: grab;

      z-index: 10;

      transition: box-shadow 0.2s;

    }



    .hotspot-dot:hover { box-shadow: 0 0 12px #0f0, 0 0 24px rgba(0,255,0,0.6); }

    .hotspot-dot.dragging { cursor: grabbing; box-shadow: 0 0 16px #0f0, 0 0 32px rgba(0,255,0,0.8); }



    .vector-dot {

      position: absolute;

      width: 12px; height: 12px;

      background: #ff4500;

      border: 2px solid #fff;

      border-radius: 50%;

      transform: translate(-50%, -50%);

      box-shadow: 0 0 8px #ff4500, 0 0 16px rgba(255,69,0,0.4);

      cursor: grab;

      z-index: 10;

      transition: box-shadow 0.2s;

    }



    .vector-dot:hover { box-shadow: 0 0 12px #ff4500, 0 0 24px rgba(255,69,0,0.6); }

    .vector-dot.dragging { cursor: grabbing; box-shadow: 0 0 16px #ff4500, 0 0 32px rgba(255,69,0,0.8); }



    .legend {

      display: flex;

      justify-content: center;

      gap: 14px;

      margin-top: 6px;

    }



    .legend span {

      font-size: 9px;

      text-transform: uppercase;

      letter-spacing: 1px;

      display: flex;

      align-items: center;

      gap: 4px;

    }



    .legend .dot-green { width: 8px; height: 8px; background: #0f0; border-radius: 50%; }

    .legend .dot-red   { width: 8px; height: 8px; background: #ff4500; border-radius: 50%; }



    .save-btn {

      display: block;

      width: 100%;

      margin-top: 8px;

      padding: 6px;

      border: 2px solid #0f0;

      border-radius: 4px;

      background: rgba(0, 255, 0, 0.1);

      color: #0f0;

      font-family: 'Courier New', monospace;

      font-size: 10px;

      text-transform: uppercase;

      letter-spacing: 2px;

      cursor: pointer;

      transition: all 0.2s;

    }



    .save-btn:hover { background: #0f0; color: #000; }



    .save-btn.saved {

      border-color: #ff00c0;

      background: rgba(255,0,192,0.2);

      color: #ff00c0;

    }



    /* ---------- Social icons ---------- */

    .social-icons {

      position: fixed;

      bottom: 28px;

      left: 20px;

      display: flex;

      flex-direction: row;

      gap: 14px;

      z-index: 800;

      margin-left: 20px;

    }

    /* Phones: tighten the row so it doesn't overlap the centered
       Impressum / Privacy pill (#legal-links) at the bottom. */
    @media (max-width: 480px) {

      .social-icons {
        gap: 6px;
        left: 10px;
        margin-left: 0;
      }

      .social-icons a {
        width: 32px !important;
        height: 32px !important;
      }

      .social-icons a svg {
        width: 15px !important;
        height: 15px !important;
      }

    }



    .social-icons a {

      width: 38px;

      height: 38px;

      border-radius: 50%;

      border: none;

      background: transparent;

      display: flex;

      align-items: center;

      justify-content: center;

      transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;

      color: #ff00c0;

      cursor: inherit !important;

      position: relative;

    }

    .social-icons a svg,

    .social-icons a .social-tooltip {

      cursor: inherit !important;

    }



    .social-icons a:hover,

    .social-icons a.laser-hover {

      background: #ff00c0;

      color: #000;

      box-shadow: 0 0 16px rgba(255,0,192,0.5), 0 0 32px rgba(255,0,192,0.25);

      transform: scale(1.2);

      cursor: inherit !important;

    }



    .social-icons a svg {

      width: 18px;

      height: 18px;

      fill: currentColor;

      shape-rendering: geometricPrecision;

    }



    .social-ig-btn {

      width: 38px;

      height: 38px;

      border-radius: 50%;

      border: none;

      background: transparent;

      display: flex;

      align-items: center;

      justify-content: center;

      touch-action: manipulation;

      transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;

      color: #ff00c0;

      cursor: inherit !important;

      position: relative;

    }



    .social-ig-btn svg {

      width: 18px;

      height: 18px;

      fill: currentColor;

      shape-rendering: geometricPrecision;

    }



    .social-ig-btn:hover,

    .social-ig-btn.laser-hover {

      background: #ff00c0;

      color: #000;

      box-shadow: 0 0 16px rgba(255,0,192,0.5);

      transform: scale(1.2);

    }



    .social-tooltip {

      position: absolute;

      bottom: 130%;

      left: 50%;

      transform: translateX(-50%) translateY(4px) scale(0.85);

      white-space: nowrap;

      font-size: 11px;

      text-transform: uppercase;

      letter-spacing: 1px;

      opacity: 0;

      padding: 10px 26px;

      border-radius: 0;

      background: #ff00c0;

      color: #000;

      font-weight: bold;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      pointer-events: none;

      transition: opacity 0.2s ease, transform 0.2s ease;

      z-index: 99999999;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      border: 2px solid #000;

    }



    .social-ig-btn:hover .social-tooltip,

    .social-ig-btn.laser-hover .social-tooltip,

    .social-icons a:hover .social-tooltip,

    .social-icons a.laser-hover .social-tooltip {

      opacity: 1;

      transform: translateX(-50%) translateY(0) scale(1);

    }



    /* ---------- Rat tooltip ---------- */

    .rat-noo {

      position: fixed;

      white-space: nowrap;

      font-size: 11px;

      font-weight: bold;

      font-family: 'Courier New', monospace;

      text-transform: uppercase;

      letter-spacing: 1px;

      opacity: 0;

      padding: 10px 26px;

      background: #ff00c0;

      color: #000;

      box-shadow: 0 0 14px rgba(255,0,192,0.7), 0 0 28px rgba(255,0,192,0.3);

      pointer-events: none;

      transform: translateX(-50%) translateY(-4px) scale(0.85);

      transition: opacity 0.15s ease, transform 0.15s ease;

      clip-path: polygon(

        50% 0%, 56% 14%, 65% 4%, 67% 19%, 79% 11%, 77% 26%,

        93% 22%, 87% 36%, 100% 37%, 90% 50%, 100% 63%, 87% 64%,

        93% 78%, 77% 74%, 79% 89%, 67% 81%, 65% 96%, 56% 86%,

        50% 100%, 44% 86%, 35% 96%, 33% 81%, 21% 89%, 23% 74%,

        7% 78%, 13% 64%, 0% 63%, 10% 50%, 0% 37%, 13% 36%,

        7% 22%, 23% 26%, 21% 11%, 33% 19%, 35% 4%, 44% 14%

      );

      z-index: 9998;

      border: 2px solid #000;

    }

    .rat-noo.visible {

      opacity: 1;

      transform: translateX(-50%) translateY(0) scale(1);

    }



    /* ---------- Balls ---------- */

    .ball {

      position: fixed;

      pointer-events: none;

      z-index: 9999;

      width: 10px; height: 10px;

    }



    .ball img {

      width: 100%;

      height: 100%;

      image-rendering: auto;

      -webkit-backface-visibility: hidden;

      backface-visibility: hidden;

    }



    .muzzle-flash {

      position: fixed;

      pointer-events: none;

      z-index: 9998;

      width: 20px; height: 20px;

      border-radius: 50%;

      background: radial-gradient(circle, #fff 0%, #ff0 40%, transparent 70%);

      transform: translate(-50%, -50%);

      animation: flash 0.15s ease-out forwards;

    }



    @keyframes flash {

      0%   { opacity: 1; transform: translate(-50%,-50%) scale(1); }

      100% { opacity: 0; transform: translate(-50%,-50%) scale(2); }

    }



    @keyframes kissRise {

      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }

      20% { opacity: 1; }

      100% { opacity: 0; transform: translate(-50%, -130%) scale(1.15); }

    }



    #couchClothes {

      position: fixed;

      left: 50%;

      top: 0;

      transform: translate(-50%, -50%);

      pointer-events: auto;

      cursor: inherit;

      z-index: 1400;

      height: auto;

      width: 85%;

      max-width: 450px;

      transition: left 0.7s ease-out, bottom 0.7s ease-out, top 0.7s ease-out, transform 0.7s ease-out;

    }



    .section-overlay.tarot-modal.expanding ~ #couchClothes {

      z-index: 1200 !important;

    }



    .section-overlay.tattoos-modal.expanding ~ #couchClothes {

      z-index: 1 !important;

    }



    @media (max-width: 768px) {

      .section-overlay.tarot-modal.expanding ~ #couchClothes {

        transform: translate(calc(-50% + 50px), calc(-50% - 50px));

        max-width: 110px;

        width: 28%;

        transition: none !important;

      }

    }



    @media (max-width: 480px) {

      .section-overlay.tarot-modal.expanding ~ #couchClothes {

        transform: translate(calc(-50% + 50px), calc(-50% - 50px));

        max-width: 90px;

        width: 24%;

        transition: none !important;

      }

    }



    #bioHoverSlide {

      display: none;

      position: relative;

      width: 100%;

      pointer-events: none;

      z-index: 40;

      transform: translateY(100%);

      transition: transform 0.55s ease;

      overflow: hidden;

      padding-top: 20px;

      padding-bottom: 30px;

    }

    .bio-scroll #bioHoverSlide {

      display: block;

    }

    #bioHoverSlide.visible {

      transform: translateY(0);

    }

    #bioHoverSlide img {

      display: block;

      width: 58%;

      max-width: 420px;

      height: auto;

      margin: 0 auto;

      filter: drop-shadow(0 0 18px rgba(255, 0, 192, 0.35));

    }



    /* ---- Nutrition Facts label (baking essentials) ---- */

    .cakes-center-essentials {

      overflow: visible;

      align-items: center;

      justify-content: center;

      border-radius: 0 !important;

    }

    .cakes-center-essentials::before {

      display: none !important;

    }



    .nutrition-facts {

      background: transparent;

      color: #ff00c0;

      border: 3px solid #ff00c0;

      padding: 4px 5px 5px;

      font-family: 'Helvetica Neue', Arial, sans-serif !important;

      width: 58%;

      margin: 0 auto;

      container-type: inline-size;

      box-sizing: border-box;

      font-size: 8.5px;

      line-height: 1.15;

    }



    .nf-title {

      font-size: 14px;

      font-size: clamp(11px, 10cqi, 17px);

      font-weight: 900;

      line-height: 1;

      letter-spacing: -0.25px;

      margin-bottom: 1px;

      font-family: inherit !important;

    }



    .nf-servings {

      font-size: 9px;

      margin-bottom: 1px;

    }



    .nf-serving-size {

      display: flex;

      justify-content: space-between;

      font-size: 9px;

      font-weight: bold;

      padding-bottom: 3px;

    }



    .nf-rule { background: #ff00c0; margin: 2px 0; }

    .nf-rule--thick  { height: 6px; }

    .nf-rule--medium { height: 4px; }

    .nf-rule--thin   { height: 1px; }



    .nf-calories-row {

      display: flex;

      justify-content: space-between;

      align-items: baseline;

      padding: 1px 0;

    }

    .nf-cal-label { font-size: 11px; font-weight: 700; }

    .nf-cal-num   { font-size: 20px; font-weight: 900; line-height: 1; }



    .nf-dv-header {

      text-align: right;

      font-size: 8px;

      font-weight: 700;

      padding-bottom: 1px;

      border-bottom: 1px solid #ff00c0;

    }



    .nf-list {

      list-style: none;

      padding: 0;

      margin: 0;

    }

    .nf-list li {

      display: flex;

      align-items: baseline;

      gap: 3px;

      border-bottom: 1px solid #ff00c0;

      padding: 1px 0;

      font-size: 8.5px;

    }

    .nf-name   { flex: 1; font-weight: 700; text-transform: capitalize; font-size: 12px; letter-spacing: 0; }

    .nf-amount { color: #ff00c0; min-width: 34px; text-align: right; }

    .nf-pct    { font-weight: 900; min-width: 28px; text-align: right; }



    .nf-footnote {

      font-size: 7.5px;

      margin-top: 3px;

      line-height: 1.2;

      color: rgba(255, 0, 192, 0.85);

    }



    /* ≤1200px — center is ~225px, compress slightly */

    @media (max-width: 1200px) {

      .nutrition-facts {

        font-size: 8.5px;

        padding: 4px 5px 5px;

        border-width: 2px;

      }

      .nf-cal-label { font-size: 9px; }

      .nf-cal-num   { font-size: 17px; }

      .nf-rule--thick  { height: 6px; }

      .nf-rule--medium { height: 3px; }

    }



    /* ≤768px — simplified list */

    @media (max-width: 768px) {

      .nutrition-facts {

        padding: 4px 5px 5px;

        border-width: 2px;

      }

      .nf-servings,

      .nf-serving-size,

      .nf-calories-row,

      .nf-rule--medium,

      .nf-rule--thin,

      .nf-footnote,

      .nf-dv-header { display: none; }

      .nf-rule--thick { height: 6px; margin: 3px 0; }

      .nf-list li   { font-size: 9.5px; padding: 2px 0; }

      .nf-name      { font-size: 10px; }

      .nf-amount    { min-width: 36px; }

      .nf-pct       { min-width: 24px; }

    }



    /* ≤480px — same structure, slightly tighter */

    @media (max-width: 480px) {

      .nutrition-facts { padding: 3px 4px 4px; border-width: 1px; }

      .nf-rule--thick { height: 4px; margin: 2px 0; }

      .nf-list li   { font-size: 8.5px; }

      .nf-name      { font-size: 9px; }

    }



    /* ── Phone: scale modal titles, buttons & tooltips down 20% ── */

    @media (max-width: 479px) {

      /* Page tooltips on ring buttons */

      .ring-btn-tooltip { font-size: 16px !important; }



      /* All modal gallery/section titles */

      .gallery-title,

      .bio-modal .gallery-title,

      .tarot-modal .gallery-title,

      .tattoos-modal .gallery-title,

      .sturmzx2-modal .gallery-title,

      .cakes-modal .gallery-title,

      .paintings-modal .gallery-title { font-size: 16px !important; }



      /* Contact badge title */

      .contact-title { font-size: 14px !important; }



      /* Cakes order form title */

      .cakes-order-title { font-size: 14px !important; padding: 20px !important; }



      /* Modal close buttons (×) */

      .bio-modal-close,

      .tarot-modal-close,

      .cakes-modal-close,

      .contact-modal-close,

      .tattoos-modal-close { font-size: 26px !important; }



      /* Action buttons inside modals */

      .tarot-contact-btn { font-size: 13px !important; }

      .cakes-order-modal-btn { font-size: 16px !important; }

      .cakes-order-btn.visible { font-size: 11px !important; }

      .contact-form .form-btn { font-size: 13px !important; }

      .form-btn { font-size: 13px !important; }

    }



    /* ═══════════════════════════════════════════════════════════════

       BAKED SIZE VALUES — calibrated per breakpoint

       ═══════════════════════════════════════════════════════════════ */



    /* ── PHONE < 480px ── */

    @media (max-width: 479px) {

      body .ring-btn.tarot-btn { width:160px !important; height:160px !important; min-width:160px !important; min-height:160px !important; max-width:160px !important; max-height:160px !important; }

      body .ring-btn.tarot-btn .tarot-button-card { width:37.33px !important; height:64px !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c1 { transform: translate(-90%,-30%) rotate(-18deg) scale(1.333) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c2 { transform: translate(-50%,-60%) rotate(-6deg)  scale(1.333) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c3 { transform: translate(-10%,-60%) rotate(6deg)   scale(1.333) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c4 { transform: translate(30%, -30%) rotate(18deg)  scale(1.333) !important; }

      body .ring-btn.tarot-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) translateY(40px) scale(0.9) !important; }

      body .ring-btn.tarot-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) translateY(40px) scale(1) !important; }



      body .ring-btn.tattoos-btn { width:160px !important; height:160px !important; min-width:160px !important; min-height:160px !important; max-width:160px !important; max-height:160px !important; }

      body .ring-btn.tattoos-btn .mini-btn-icon img { width:160px !important; height:160px !important; min-width:160px !important; min-height:160px !important; max-width:160px !important; max-height:160px !important; object-fit:contain !important; }

      body .ring-btn.tattoos-btn .mini-btn-wrap { width:160px !important; height:160px !important; }

      html body .ring-btn.tattoos-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.tattoos-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.cakes-btn { width:160px !important; height:160px !important; min-width:160px !important; min-height:160px !important; max-width:160px !important; max-height:160px !important; }

      body .ring-btn.cakes-btn .mini-btn-icon img { width:160px !important; height:160px !important; min-width:160px !important; min-height:160px !important; max-width:160px !important; max-height:160px !important; object-fit:contain !important; }

      body .ring-btn.cakes-btn .mini-btn-wrap { width:160px !important; height:160px !important; }

      html body .ring-btn.cakes-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.cakes-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.sturm-btn { width:160px !important; height:160px !important; min-width:160px !important; min-height:160px !important; max-width:160px !important; max-height:160px !important; }

      body .ring-btn.sturm-btn .mini-btn-icon img { width:160px !important; height:160px !important; min-width:160px !important; min-height:160px !important; max-width:160px !important; max-height:160px !important; object-fit:contain !important; }

      body .ring-btn.sturm-btn .mini-btn-wrap { width:160px !important; height:160px !important; }

      html body .ring-btn.sturm-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.sturm-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.contact-btn { width:172px !important; height:172px !important; min-width:172px !important; min-height:172px !important; max-width:172px !important; max-height:172px !important; }

      body .ring-btn.contact-btn .contact-button-icon img { width:172px !important; height:172px !important; min-width:172px !important; min-height:172px !important; max-width:172px !important; max-height:172px !important; }

      html body .ring-btn.contact-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.contact-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      /* 10% smaller + position shifts */
      body .ring-btn.tarot-btn   { transform: translateX(-12vw) scale(0.9) !important; }
      body .ring-btn.tattoos-btn { transform: translateX(-13vw) scale(0.9) !important; }
      body .ring-btn.cakes-btn   { transform: translateX(14vw)  scale(0.9) !important; }
      body .ring-btn.sturm-btn   { transform: translateX(13vw) translateY(14vh) scale(0.9) !important; }
      body .ring-btn.contact-btn { transform: translateX(-15vw) scale(0.9) !important; }

      #couchBtn { width:350px !important; height:auto !important; min-width:350px !important; max-width:350px !important; }

      #couchClothes { width:260px !important; height:auto !important; min-width:260px !important; max-width:260px !important; }

      #frameBtn { width:200px !important; height:auto !important; min-width:200px !important; max-width:200px !important; }

      #frameArt { width:200px !important; height:auto !important; min-width:200px !important; max-width:200px !important; }

      .section-overlay.bio-modal.expanding ~ #couchClothes { width:325px !important; min-width:325px !important; max-width:325px !important; }

    }



    /* ── TABLET 480–768px ── */

    @media (min-width: 480px) and (max-width: 768px) {

      body .ring-btn.tarot-btn { width:142px !important; height:142px !important; min-width:142px !important; min-height:142px !important; max-width:142px !important; max-height:142px !important; }

      body .ring-btn.tarot-btn .tarot-button-card { width:33.13px !important; height:56.8px !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c1 { transform: translate(-90%,-30%) rotate(-18deg) scale(1.183) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c2 { transform: translate(-50%,-60%) rotate(-6deg)  scale(1.183) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c3 { transform: translate(-10%,-60%) rotate(6deg)   scale(1.183) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c4 { transform: translate(30%, -30%) rotate(18deg)  scale(1.183) !important; }

      body .ring-btn.tarot-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) translateY(35.5px) scale(0.9) !important; }

      body .ring-btn.tarot-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) translateY(35.5px) scale(1) !important; }



      body .ring-btn.tattoos-btn { width:142px !important; height:142px !important; min-width:142px !important; min-height:142px !important; max-width:142px !important; max-height:142px !important; }

      body .ring-btn.tattoos-btn .mini-btn-icon img { width:142px !important; height:142px !important; min-width:142px !important; min-height:142px !important; max-width:142px !important; max-height:142px !important; object-fit:contain !important; }

      body .ring-btn.tattoos-btn .mini-btn-wrap { width:142px !important; height:142px !important; }

      html body .ring-btn.tattoos-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.tattoos-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.cakes-btn { width:142px !important; height:142px !important; min-width:142px !important; min-height:142px !important; max-width:142px !important; max-height:142px !important; }

      body .ring-btn.cakes-btn .mini-btn-icon img { width:142px !important; height:142px !important; min-width:142px !important; min-height:142px !important; max-width:142px !important; max-height:142px !important; object-fit:contain !important; }

      body .ring-btn.cakes-btn .mini-btn-wrap { width:142px !important; height:142px !important; }

      html body .ring-btn.cakes-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.cakes-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.sturm-btn { width:167px !important; height:167px !important; min-width:167px !important; min-height:167px !important; max-width:167px !important; max-height:167px !important; }

      body .ring-btn.sturm-btn .mini-btn-icon img { width:167px !important; height:167px !important; min-width:167px !important; min-height:167px !important; max-width:167px !important; max-height:167px !important; object-fit:contain !important; }

      body .ring-btn.sturm-btn .mini-btn-wrap { width:167px !important; height:167px !important; }

      html body .ring-btn.sturm-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.sturm-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.contact-btn { width:167px !important; height:167px !important; min-width:167px !important; min-height:167px !important; max-width:167px !important; max-height:167px !important; }

      body .ring-btn.contact-btn .contact-button-icon img { width:167px !important; height:167px !important; min-width:167px !important; min-height:167px !important; max-width:167px !important; max-height:167px !important; }

      html body .ring-btn.contact-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.contact-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      /* 10% smaller + position shifts */
      body .ring-btn.tarot-btn   { transform: translateX(-12vw) scale(0.9) !important; }
      body .ring-btn.tattoos-btn { transform: translateX(-13vw) scale(0.9) !important; }
      body .ring-btn.cakes-btn   { transform: translateX(14vw)  scale(0.9) !important; }
      body .ring-btn.sturm-btn   { transform: translateX(13vw) translateY(14vh) scale(0.9) !important; }
      body .ring-btn.contact-btn { transform: translateX(-15vw) scale(0.9) !important; }

      #couchBtn { width:380px !important; height:auto !important; min-width:380px !important; max-width:380px !important; }

      #couchClothes { width:261px !important; height:auto !important; min-width:261px !important; max-width:261px !important; }

      #frameBtn { width:210px !important; height:auto !important; min-width:210px !important; max-width:210px !important; }

      #frameArt { width:210px !important; height:auto !important; min-width:210px !important; max-width:210px !important; }

      .section-overlay.bio-modal.expanding ~ #couchClothes { width:280px !important; min-width:280px !important; max-width:280px !important; }

    }



    /* ── LAPTOP 769–1599px ── */

    @media (min-width: 769px) and (max-width: 1599px) {

      body .ring-btn.tarot-btn { width:180px !important; height:180px !important; min-width:180px !important; min-height:180px !important; max-width:180px !important; max-height:180px !important; }

      body .ring-btn.tarot-btn .tarot-button-card { width:42px !important; height:72px !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c1 { transform: translate(-90%,-30%) rotate(-18deg) scale(1.5) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c2 { transform: translate(-50%,-60%) rotate(-6deg)  scale(1.5) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c3 { transform: translate(-10%,-60%) rotate(6deg)   scale(1.5) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c4 { transform: translate(30%, -30%) rotate(18deg)  scale(1.5) !important; }

      body .ring-btn.tarot-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) translateY(45px) scale(0.9) !important; }

      body .ring-btn.tarot-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) translateY(45px) scale(1) !important; }



      body .ring-btn.tattoos-btn { width:231px !important; height:231px !important; min-width:231px !important; min-height:231px !important; max-width:231px !important; max-height:231px !important; }

      body .ring-btn.tattoos-btn .mini-btn-icon img { width:231px !important; height:231px !important; min-width:231px !important; min-height:231px !important; max-width:231px !important; max-height:231px !important; object-fit:contain !important; }

      body .ring-btn.tattoos-btn .mini-btn-wrap { width:231px !important; height:231px !important; }

      html body .ring-btn.tattoos-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.tattoos-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.cakes-btn { width:246px !important; height:246px !important; min-width:246px !important; min-height:246px !important; max-width:246px !important; max-height:246px !important; }

      body .ring-btn.cakes-btn .mini-btn-icon img { width:246px !important; height:246px !important; min-width:246px !important; min-height:246px !important; max-width:246px !important; max-height:246px !important; object-fit:contain !important; }

      body .ring-btn.cakes-btn .mini-btn-wrap { width:246px !important; height:246px !important; }

      html body .ring-btn.cakes-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.cakes-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.sturm-btn { width:231px !important; height:231px !important; min-width:231px !important; min-height:231px !important; max-width:231px !important; max-height:231px !important; }

      body .ring-btn.sturm-btn .mini-btn-icon img { width:231px !important; height:231px !important; min-width:231px !important; min-height:231px !important; max-width:231px !important; max-height:231px !important; object-fit:contain !important; }

      body .ring-btn.sturm-btn .mini-btn-wrap { width:231px !important; height:231px !important; }

      html body .ring-btn.sturm-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.sturm-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.contact-btn { width:231px !important; height:231px !important; min-width:231px !important; min-height:231px !important; max-width:231px !important; max-height:231px !important; }

      body .ring-btn.contact-btn .contact-button-icon img { width:231px !important; height:231px !important; min-width:231px !important; min-height:231px !important; max-width:231px !important; max-height:231px !important; }

      html body .ring-btn.contact-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.contact-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      #couchBtn { width:516px !important; height:auto !important; min-width:516px !important; max-width:516px !important; }

      #couchClothes { width:449px !important; height:auto !important; min-width:449px !important; max-width:449px !important; }

      #frameBtn { width:231px !important; height:auto !important; min-width:231px !important; max-width:231px !important; }

      #frameArt { width:231px !important; height:auto !important; min-width:231px !important; max-width:231px !important; }

      .section-overlay.bio-modal.expanding ~ #couchClothes { width:350px !important; min-width:350px !important; max-width:350px !important; }

    }



    /* ── BIG 24" >= 1600px ── */

    @media (min-width: 1600px) {

      body .ring-btn.tarot-btn { width:199px !important; height:199px !important; min-width:199px !important; min-height:199px !important; max-width:199px !important; max-height:199px !important; }

      body .ring-btn.tarot-btn .tarot-button-card { width:46.43px !important; height:79.6px !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c1 { transform: translate(-90%,-30%) rotate(-18deg) scale(1.658) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c2 { transform: translate(-50%,-60%) rotate(-6deg)  scale(1.658) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c3 { transform: translate(-10%,-60%) rotate(6deg)   scale(1.658) !important; }

      body .ring-btn.tarot-btn .tarot-button-card.c4 { transform: translate(30%, -30%) rotate(18deg)  scale(1.658) !important; }

      body .ring-btn.tarot-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) translateY(49.75px) scale(0.9) !important; }

      body .ring-btn.tarot-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) translateY(49.75px) scale(1) !important; }



      body .ring-btn.tattoos-btn { width:285px !important; height:285px !important; min-width:285px !important; min-height:285px !important; max-width:285px !important; max-height:285px !important; }

      body .ring-btn.tattoos-btn .mini-btn-icon img { width:285px !important; height:285px !important; min-width:285px !important; min-height:285px !important; max-width:285px !important; max-height:285px !important; object-fit:contain !important; }

      body .ring-btn.tattoos-btn .mini-btn-wrap { width:285px !important; height:285px !important; }

      html body .ring-btn.tattoos-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.tattoos-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.cakes-btn { width:300px !important; height:300px !important; min-width:300px !important; min-height:300px !important; max-width:300px !important; max-height:300px !important; }

      body .ring-btn.cakes-btn .mini-btn-icon img { width:300px !important; height:300px !important; min-width:300px !important; min-height:300px !important; max-width:300px !important; max-height:300px !important; object-fit:contain !important; }

      body .ring-btn.cakes-btn .mini-btn-wrap { width:300px !important; height:300px !important; }

      html body .ring-btn.cakes-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.cakes-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.sturm-btn { width:296px !important; height:296px !important; min-width:296px !important; min-height:296px !important; max-width:296px !important; max-height:296px !important; }

      body .ring-btn.sturm-btn .mini-btn-icon img { width:296px !important; height:296px !important; min-width:296px !important; min-height:296px !important; max-width:296px !important; max-height:296px !important; object-fit:contain !important; }

      body .ring-btn.sturm-btn .mini-btn-wrap { width:296px !important; height:296px !important; }

      html body .ring-btn.sturm-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.sturm-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      body .ring-btn.contact-btn { width:285px !important; height:285px !important; min-width:285px !important; min-height:285px !important; max-width:285px !important; max-height:285px !important; }

      body .ring-btn.contact-btn .contact-button-icon img { width:285px !important; height:285px !important; min-width:285px !important; min-height:285px !important; max-width:285px !important; max-height:285px !important; }

      html body .ring-btn.contact-btn .ring-btn-tooltip { top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) scale(0.9) !important; }

      html body .ring-btn.contact-btn:hover .ring-btn-tooltip { transform:translate(-50%,-50%) scale(1) !important; }



      #couchBtn { width:707px !important; height:auto !important; min-width:707px !important; max-width:707px !important; }

      #couchClothes { width:516px !important; height:auto !important; min-width:516px !important; max-width:516px !important; }

      #frameBtn { width:285px !important; height:auto !important; min-width:285px !important; max-width:285px !important; }

      #frameArt { width:285px !important; height:auto !important; min-width:285px !important; max-width:285px !important; }

      .section-overlay.bio-modal.expanding ~ #couchClothes { width:338px !important; min-width:338px !important; max-width:338px !important; }

    }