:root {
          /* Clair Obscure vibe: černá / červená / bílá */
          --bg0: #060607;
          --bg1: #0b0b0d;
          --red: #d11b2a;
          --red2: #ff2b3d;
          --white: #f3f3f3;
          --muted: rgba(243, 243, 243, .72);
          --glass: rgba(243, 243, 243, .06);
          --glass2: rgba(243, 243, 243, .10);
          --line: rgba(243, 243, 243, .14);
          --shadow: 0 22px 70px rgba(0, 0, 0, .6);
          --radius: 22px;
          --max: 1080px;
      }

      * {
          box-sizing: border-box
      }

      html {
          scroll-behavior: smooth;
      }

      body {
          margin: 0;
          color: var(--white);
          font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
          background:
              radial-gradient(1200px 800px at 20% 10%, rgba(209, 27, 42, .18), transparent 55%),
              radial-gradient(900px 700px at 85% 30%, rgba(209, 27, 42, .10), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
          overflow-x: hidden;
      }

      a {
          color: inherit;
          text-decoration: none;
      }

      .linkerino {
          text-decoration: underline;

      }

      .container {
          width: min(var(--max), calc(100% - 40px));
          margin: 0 auto;
      }

      /* ===== Background canvas ===== */
      #petalCanvas {
          position: fixed;
          inset: 0;
          width: 100%;
          height: 100%;
          z-index: 310;
          /* raised so petals show above overlays */
          display: block;
          pointer-events: none;
      }

      .grain {
          position: fixed;
          inset: -40%;
          z-index: -1;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
          opacity: .06;
          animation: grainMove 10s steps(6) infinite;
          pointer-events: none;
          mix-blend-mode: overlay;
      }

      @keyframes grainMove {
          0% {
              transform: translate(0, 0)
          }

          25% {
              transform: translate(-2%, 3%)
          }

          50% {
              transform: translate(3%, -2%)
          }

          75% {
              transform: translate(-4%, -1%)
          }

          100% {
              transform: translate(0, 0)
          }
      }

      /* ===== Scroll progress ===== */
      .progress {
          position: fixed;
          top: 0;
          left: 0;
          height: 3px;
          width: 0%;
          z-index: 999;
          background: linear-gradient(90deg, var(--red), var(--white), var(--red2));
          box-shadow: 0 10px 30px rgba(209, 27, 42, .22);
      }

      /* ===== Header ===== */
      header {
          position: sticky;
          top: 0;
          z-index: 50;
          background: rgba(6, 6, 7, .60);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          border-bottom: 1px solid rgba(243, 243, 243, .10);
      }

      .nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px 0;
          gap: 14px;
      }

      .brand {
          display: flex;
          align-items: center;
          gap: 12px;
          min-width: 220px;
      }

      .mark {
          width: 34px;
          height: 34px;
          border-radius: 12px;
          background: radial-gradient(circle at 30% 30%, rgba(255, 43, 61, .95), rgba(209, 27, 42, .55) 65%, rgba(243, 243, 243, .10));
          box-shadow: 0 16px 45px rgba(209, 27, 42, .18);
          position: relative;
          overflow: hidden;
          border: 1px solid rgba(243, 243, 243, .14);
          display: inline-flex;
          align-items: center;
          justify-content: center;
      }

      .mark .mark-arrow {
          font-size: 14px;
          line-height: 1;
          color: var(--white);
          text-shadow: 0 2px 8px rgba(209, 27, 42, .28);
          transform: translateY(-1px);
          pointer-events: none;
      }

      /* huh image (hidden by default) */
      .mark .mark-huh {
          position: absolute;
          width: 44px;
          height: 44px;
          object-fit: contain;
          opacity: 0;
          transform: scale(1) translateY(0);
          transition: opacity .12s ease, transform 3s cubic-bezier(.2, .9, .2, 1);
          pointer-events: none;
      }

      /* while holding: hide arrow, reveal & zoom image */
      .mark.holding .mark-arrow {
          opacity: 0;
          transform: translateY(-4px) scale(.98);
      }

      .mark.holding .mark-huh {
          opacity: 1;
          transform: scale(2.18) translateY(-2px);
      }

      .mark img {
          max-width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          object-fit: contain;
          height: auto;
      }

      .mark::after {
          content: "";
          position: absolute;
          inset: -35%;
          background: linear-gradient(90deg, transparent, rgba(243, 243, 243, .20), transparent);
          transform: rotate(18deg) translateX(-60%);
          animation: sheen 3.6s ease-in-out infinite;
          opacity: .0;
      }

      @keyframes sheen {

          0%,
          68% {
              transform: rotate(18deg) translateX(-60%);
              opacity: 0
          }

          78% {
              opacity: 1
          }

          100% {
              transform: rotate(18deg) translateX(60%);
              opacity: 0
          }
      }

      .brand .names {
          font-weight: 800;
          letter-spacing: .3px;
          font-size: 14px;
      }

      .brand .date {
          font-size: 12px;
          color: var(--muted);
          margin-top: 2px;
      }

      .navlinks {
          display: flex;
          gap: 10px;
          align-items: center;
          flex-wrap: wrap;
          justify-content: flex-end;
      }

      .pill {
          padding: 10px 12px;
          border-radius: 999px;
          border: 1px solid rgba(243, 243, 243, .14);
          background: rgba(243, 243, 243, .04);
          font-size: 13px;
          color: rgba(243, 243, 243, .86);
          transition: transform .18s ease, background .18s ease, border-color .18s ease;
      }

      .pill:hover {
          transform: translateY(-1px);
          background: pink;
          color: darkred;
          border-color: rgba(243, 243, 243, .22);
      }

      .cta {
          padding: 10px 14px;
          border-radius: 14px;
          border: 1px solid rgba(243, 243, 243, .16);
          background: linear-gradient(90deg, rgba(209, 27, 42, .95), rgba(255, 43, 61, .92));
          color: rgba(10, 10, 12, .95);
          font-weight: 850;
          letter-spacing: .2px;
          box-shadow: 0 18px 60px rgba(209, 27, 42, .22);
          transition: transform .18s ease, filter .18s ease;
      }

      .cta:hover {
          transform: translateY(-1px);
          filter: brightness(1.03);
      }

      .cta:active {
          transform: scale(.98);
      }

      /* ===== Attention-grabbing (annoying) CTA animation ===== */
      /* Small pulse + wiggle + glow to draw attention; pauses on hover/focus; respects prefers-reduced-motion */
      .cta--loud {
          animation: cta-announce 2.8s ease-in-out infinite;
          will-change: transform, box-shadow, filter;
      }

      .cta--loud:hover,
      .cta--loud:focus {
          /* stop animation once the user interacts */
          animation-play-state: paused;
          transform: translateY(-2px) scale(1.02);
          box-shadow: 0 22px 70px rgba(255, 43, 61, .26);
      }

      @keyframes cta-announce {
          0% {
              transform: translateY(0) rotate(0deg) scale(1);
              box-shadow: 0 18px 60px rgba(209, 27, 42, .22);
              filter: brightness(1);
          }

          12% {
              transform: translateY(-4px) rotate(-1.5deg) scale(1.03);
              box-shadow: 0 26px 80px rgba(255, 43, 61, .28);
              filter: brightness(1.03);
          }

          28% {
              transform: translateY(2px) rotate(1.2deg) scale(1.01);
              box-shadow: 0 20px 64px rgba(255, 43, 61, .24);
          }

          52% {
              transform: translateY(-2px) rotate(-0.6deg) scale(1.02);
              box-shadow: 0 24px 72px rgba(255, 43, 61, .26);
          }

          78% {
              transform: translateY(0px) rotate(.2deg) scale(1.00);
              box-shadow: 0 18px 60px rgba(209, 27, 42, .22);
          }

          100% {
              transform: translateY(0) rotate(0deg) scale(1);
              box-shadow: 0 18px 60px rgba(209, 27, 42, .22);
              filter: brightness(1);
          }
      }

      /* Respect user's reduced motion preference */
      @media (prefers-reduced-motion: reduce) {

          .cta--loud,
          .cta--party {
              animation: none !important;
          }
      }

      /* ===== Playful party CTA (only for header) ===== */
      .cta--party {
          position: relative;
          animation: cta-party 2.4s cubic-bezier(.2, .8, .2, 1) infinite;
          will-change: transform, box-shadow;
          transform-origin: center;
      }

      .cta--party::after {
          /* soft colorful glow that pulses in sync */
          content: "";
          position: absolute;
          inset: -8px;
          border-radius: inherit;
          z-index: -1;
          background: radial-gradient(circle at 20% 20%, rgba(255, 255, 200, .12), transparent 18%),
              radial-gradient(circle at 80% 80%, rgba(255, 200, 255, .12), transparent 18%);
          opacity: 0;
          transform: scale(.92);
          transition: opacity .18s ease, transform .36s ease;
          pointer-events: none;
          filter: blur(6px);
      }

      .cta--party:hover,
      .cta--party:focus {
          animation-play-state: paused;
          transform: translateY(-3px) scale(1.03);
          box-shadow: 0 26px 86px rgba(255, 43, 61, .30);
      }

      @keyframes cta-party {
          0% {
              transform: translateY(0) rotate(0) scale(1);
              box-shadow: 0 18px 60px rgba(209, 27, 42, .22);
          }

          6% {
              transform: translateY(-10px) rotate(-12deg) scale(1.12);
              box-shadow: 0 36px 120px rgba(255, 43, 61, .40);
          }

          14% {
              transform: translateY(0) rotate(12deg) scale(.96);
          }

          26% {
              transform: translateY(-6px) rotate(-6deg) scale(1.08);
          }

          40% {
              transform: translateY(0) rotate(3deg) scale(1);
          }

          62% {
              transform: translateY(-4px) rotate(-2deg) scale(1.02);
          }

          100% {
              transform: translateY(0) rotate(0) scale(1);
              box-shadow: 0 18px 60px rgba(209, 27, 42, .22);
          }
      }

      /* subtle pulse for the ::after glow synced with the main animation */
      @keyframes cta-party-glow {
          0% {
              opacity: 0;
              transform: scale(.92);
          }

          10% {
              opacity: .95;
              transform: scale(1.06);
          }

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

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

      .cta--party::after {
          animation: cta-party-glow 2.4s ease-in-out infinite;
      }


      .menuBtn {
          display: none;
          border: 1px solid rgba(243, 243, 243, .18);
          background: rgba(243, 243, 243, .05);
          color: var(--white);
          border-radius: 12px;
          padding: 10px 12px;
          cursor: pointer;
      }

      @media (max-width: 780px) {
          .menuBtn {
              display: inline-flex;
              align-items: center;
              gap: 8px;
          }

          .navlinks {
              position: fixed;
              left: 20px;
              right: 20px;
              top: 70px;
              padding: 14px;
              border-radius: 18px;
              background: rgba(6, 6, 7, .78);
              backdrop-filter: blur(14px);
              border: 1px solid rgba(243, 243, 243, .12);
              box-shadow: var(--shadow);
              display: none;
          }

          .navlinks.open {
              display: flex;
          }

          .pill {
              flex: 1 1 auto;
              text-align: center;
          }

          .cta {
              flex: 1 1 100%;
              text-align: center;
          }

          .brand {
              min-width: unset;
          }
      }

      /* ===== Hero ===== */
      .hero {
          padding: 72px 0 28px;
      }

      .heroGrid {
          display: grid;
          grid-template-columns: 1.15fr .85fr;
          gap: 18px;
          align-items: stretch;
      }

      @media (max-width: 980px) {
          .heroGrid {
              grid-template-columns: 1fr;
          }
      }

      .card {
          border-radius: var(--radius);
          border: 1px solid rgba(243, 243, 243, .12);
          background: linear-gradient(180deg, rgba(243, 243, 243, .07), rgba(243, 243, 243, .04));
          box-shadow: var(--shadow);
          position: relative;
          overflow: hidden;
      }

      .card::before {
          content: "";
          position: absolute;
          inset: -80%;
          background:
              radial-gradient(circle at 20% 15%, rgba(209, 27, 42, .22), transparent 50%),
              radial-gradient(circle at 85% 35%, rgba(243, 243, 243, .10), transparent 55%),
              radial-gradient(circle at 60% 90%, rgba(209, 27, 42, .14), transparent 55%);
          filter: blur(22px);
          opacity: .7;
          pointer-events: none;
      }

      .card>* {
          position: relative;
          z-index: 1;
      }

      .heroMain {
          padding: 28px;
      }

      .kicker {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          font-size: 13px;
          color: rgba(243, 243, 243, .82);
          border: 1px solid rgba(243, 243, 243, .14);
          background: rgba(243, 243, 243, .04);
          border-radius: 999px;
          padding: 8px 12px;
      }

      .kicker .dot {
          width: 10px;
          height: 10px;
          border-radius: 999px;
          background: radial-gradient(circle at 30% 30%, var(--white), var(--red));
          box-shadow: 0 0 22px rgba(209, 27, 42, .26);
      }

      h1 {
          margin: 16px 0 10px;
          font-size: clamp(38px, 5vw, 64px);
          line-height: 1.04;
          letter-spacing: -0.02em;
      }

      .accentText {
          color: var(--white);
          text-shadow:
              0 18px 60px rgba(209, 27, 42, .18),
              0 0 20px rgba(243, 243, 243, .08);
      }

      .lead {
          margin: 0;
          color: rgba(243, 243, 243, .76);
          line-height: 1.7;
          font-size: 15px;
          max-width: 62ch;
      }

      .heroActions {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
          margin-top: 18px;
          align-items: center;
      }

      .btnGhost {
          border: 1px solid rgba(243, 243, 243, .14);
          background: rgba(243, 243, 243, .04);
          color: rgba(243, 243, 243, .92);
          border-radius: 14px;
          padding: 12px 14px;
          font-weight: 750;
          letter-spacing: .2px;
          font-size: 14px;
          cursor: pointer;
          transition: transform .18s ease, background .18s ease, border-color .18s ease;
      }

      .btnGhost:hover {
          transform: translateY(-1px);
          background: rgba(243, 243, 243, .07);
          border-color: rgba(243, 243, 243, .22);
      }

      .btnGhost:active {
          transform: scale(.98);
      }

      /* ===== Photo card ===== */
      .photoCard {
          padding: 18px;
          display: flex;
          flex-direction: column;
          gap: 12px;
      }

      .photo {
          width: 100%;
          aspect-ratio: 4/5;
          border-radius: 18px;
          border: 1px solid rgba(243, 243, 243, .12);
          background:
              radial-gradient(220px 220px at 20% 25%, rgba(209, 27, 42, .22), transparent 60%),
              radial-gradient(260px 260px at 80% 30%, rgba(243, 243, 243, .10), transparent 60%),
              linear-gradient(180deg, rgba(243, 243, 243, .06), rgba(243, 243, 243, .02)),
              url("https://images.unsplash.com/photo-1523438097206-512ae7d59c01?auto=format&fit=crop&w=1200&q=60");
          background-size: cover;
          background-position: center;
          box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
          position: relative;
          overflow: hidden;
      }

      .photo img {
          max-width: 100%;
          height: auto;
      }

      /* jemný “film” highlight */
      .photo::after {
          content: "";
          position: absolute;
          inset: -30%;
          background: linear-gradient(90deg, transparent, rgba(243, 243, 243, .16), transparent);
          transform: rotate(14deg) translateX(-60%);
          opacity: .0;
          transition: transform .6s ease, opacity .6s ease;
      }

      .photo:hover::after {
          transform: rotate(14deg) translateX(60%);
          opacity: .9;
      }

      .photoMeta {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 12px;
          padding: 12px;
          border-radius: 16px;
          border: 1px solid rgba(243, 243, 243, .12);
          background: rgba(243, 243, 243, .03);
      }

      .photoMeta strong {
          display: block;
          font-size: 13px;
          letter-spacing: .2px;
      }

      .photoMeta span {
          display: block;
          margin-top: 4px;
          font-size: 13px;
          color: var(--muted);
          line-height: 1.45;
      }

      /* ===== Sections ===== */
      section {
          padding: 56px 0;
      }

      .sectionHead {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          gap: 18px;
          margin-bottom: 14px;
      }

      .sectionHead h2 {
          margin: 0;
          font-size: 26px;
          letter-spacing: -.01em;
      }

      .sectionHead p {
          margin: 6px 0 0;
          color: var(--muted);
          line-height: 1.55;
          font-size: 14px;
          max-width: 70ch;
      }

      .grid {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          gap: 14px;
      }

      .tile {
          grid-column: span 6;
          padding: 18px;
      }

      .tile h3 {
          margin: 0 0 8px;
          font-size: 16px;
          letter-spacing: .2px;
      }

      .tile p,
      .tile li {
          margin: 0;
          color: rgba(243, 243, 243, .76);
          line-height: 1.6;
          font-size: 14px;
      }

      .tile ul {
          margin: 10px 0 0;
          padding-left: 18px;
      }

      @media (max-width: 860px) {
          .tile {
              grid-column: span 12;
          }
      }

      /* ===== Timeline ===== */
      .timeline {
          padding-left: 18px;
          position: relative;
          margin-top: 8px;
      }

      .timeline::before {
          content: "";
          position: absolute;
          left: 7px;
          top: 0;
          bottom: 0;
          width: 2px;
          background: linear-gradient(180deg, rgba(243, 243, 243, .45), rgba(209, 27, 42, .65), rgba(243, 243, 243, .35));
          border-radius: 10px;
          opacity: .85;
      }

      .tlItem {
          position: relative;
          padding: 10px 10px 10px 18px;
          border-radius: 16px;
          border: 1px solid rgba(243, 243, 243, .10);
          background: rgba(243, 243, 243, .03);
          margin: 10px 0;
      }

      .tlItem::before {
          content: "";
          position: absolute;
          left: -1px;
          top: 16px;
          width: 10px;
          height: 10px;
          border-radius: 999px;
          background: radial-gradient(circle at 30% 30%, var(--white), var(--red));
          box-shadow: 0 0 18px rgba(209, 27, 42, .25);
          transform: translateX(-14px);
      }

      .tlTime {
          font-weight: 900;
          font-size: 12px;
          letter-spacing: .7px;
          color: rgba(243, 243, 243, .92);
      }

      .tlTxt {
          margin-top: 4px;
          color: rgba(243, 243, 243, .72);
          font-size: 14px;
          line-height: 1.45;
      }

      /* ===== Footer ===== */
      footer {
          padding: 34px 0 52px;
          border-top: 1px solid rgba(243, 243, 243, .08);
          color: rgba(243, 243, 243, .62);
          background: rgba(0, 0, 0, .10);
          font-size: 13px;
      }

      /* ===== Reveal ===== */
      .reveal {
          opacity: 0;
          transform: translateY(14px);
          transition: opacity .7s ease, transform .7s ease;
          will-change: opacity, transform;
      }

      .reveal.in {
          opacity: 1;
          transform: translateY(0);
      }

      /* ===== Toast ===== */
      .toast {
          position: fixed;
          left: 50%;
          bottom: 22px;
          transform: translateX(-50%) translateY(22px);
          padding: 14px 18px;
          border-radius: 18px;
          border: 1px solid rgba(255, 255, 255, .12);
          background: linear-gradient(180deg, rgba(12, 12, 12, 0.92), rgba(6, 6, 6, 0.9));
          backdrop-filter: blur(10px) saturate(120%);
          box-shadow: 0 30px 80px rgba(209, 27, 42, .28), 0 6px 20px rgba(0, 0, 0, .6);
          color: var(--white);
          font-size: 15px;
          font-weight: 700;
          opacity: 0;
          pointer-events: none;
          transition: opacity .18s ease, transform .18s ease;
          z-index: 320;
          /* above overlays */
      }

      .toast.show {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
      }

      /* ===== Achievements UI ===== */
      .ach-counter {
          position: fixed;
          right: 18px;
          top: 18px;
          z-index: 130;
          background: rgba(6, 6, 7, 0.8);
          color: var(--white);
          padding: 8px 10px;
          border-radius: 999px;
          border: 1px solid rgba(243, 243, 243, .12);
          box-shadow: 0 10px 30px rgba(209, 27, 42, .12);
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          transform: translateY(-8px);
          opacity: 0;
          transition: opacity .18s ease, transform .18s ease;
      }

      .ach-counter.visible {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
      }

      .ach-counter:focus {
          outline: 2px solid rgba(209, 27, 42, .6);
      }

      .ach-counter.pulse {
          animation: achPulse .9s ease;
      }

      @keyframes achPulse {
          0% {
              transform: scale(1)
          }

          30% {
              transform: scale(1.06)
          }

          100% {
              transform: scale(1)
          }
      }

      .ach-panel {
          position: fixed;
          right: 18px;
          top: 62px;
          width: 320px;
          max-width: calc(100% - 40px);
          z-index: 140;
          background: rgba(6, 6, 7, 0.88);
          border-radius: 14px;
          border: 1px solid rgba(243, 243, 243, .12);
          box-shadow: var(--shadow);
          padding: 12px;
          color: var(--white);
          opacity: 0;
          transform: translateY(-8px) scale(.98);
          transition: opacity .16s ease, transform .16s ease;
          pointer-events: none;
      }

      .ach-panel[aria-hidden="false"] {
          opacity: 1;
          transform: translateY(0) scale(1);
          pointer-events: auto;
      }

      .ach-inner header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          margin-bottom: 8px;
      }

      .ach-list {
          list-style: none;
          margin: 0;
          padding: 0;
          max-height: 320px;
          overflow: auto;
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .ach-list li {
          padding: 10px;
          border-radius: 10px;
          background: rgba(243, 243, 243, .03);
          border: 1px solid rgba(243, 243, 243, .04);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          font-size: 13px;
          color: var(--muted);
      }

      .ach-list li.unlocked {
          background: linear-gradient(90deg, rgba(209, 27, 42, .16), rgba(255, 43, 61, .06));
          color: var(--white);
          border-color: rgba(209, 27, 42, .18);
          box-shadow: 0 8px 30px rgba(209, 27, 42, .06);
      }

      .ach-list li .title {
          font-weight: 700;
          font-size: 13px;
      }

      .ach-footer {
          margin-top: 8px;
          color: var(--muted);
          font-size: 12px;
          text-align: center;
      }

      /* ===== Slot machine modal (polished) ===== */
      .slot-overlay {
          position: fixed;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(6, 6, 7, 0.88);
          backdrop-filter: blur(6px) saturate(120%);
          z-index: 210;
          opacity: 0;
          pointer-events: none;
          transition: opacity .18s ease;
      }

      .slot-overlay[aria-hidden="false"] {
          opacity: 1;
          pointer-events: auto;
      }

      .slot-modal {
          width: min(520px, calc(100% - 40px));
          background: linear-gradient(180deg, rgba(20, 8, 12, .92), rgba(40, 10, 16, .95));
          border-radius: 14px;
          border: 1px solid rgba(255, 86, 96, .12);
          box-shadow: 0 30px 120px rgba(209, 27, 42, .32), inset 0 1px 0 rgba(255, 255, 255, .02);
          padding: 18px;
          color: var(--white);
      }

      .slot-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          margin-bottom: 14px;
      }

      .slot-body {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 16px;
      }

      .reels {
          display: flex;
          gap: 12px;
      }

      .reel {
          width: 96px;
          height: 96px;
          border-radius: 12px;
          background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 40px;
          font-weight: 900;
          color: var(--white);
          border: 2px solid rgba(255, 255, 255, .04);
          box-shadow: 0 16px 40px rgba(0, 0, 0, .65), 0 0 18px rgba(255, 43, 61, .06) inset;
          position: relative;
          overflow: hidden;
      }

      .reel::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, rgba(255, 43, 61, 0.02), rgba(43, 20, 20, 0.04));
          pointer-events: none;
      }

      .reel.spinning {
          animation: reelSpin .09s steps(1) infinite;
          filter: drop-shadow(0 8px 20px rgba(255, 43, 61, .18));
          transform-origin: center;
      }

      @keyframes reelSpin {
          0% {
              transform: translateY(-6%);
          }

          50% {
              transform: translateY(6%);
          }

          100% {
              transform: translateY(-6%);
          }
      }

      .reel.spin-stop {
          animation: none;
          transform: scale(1.02);
      }

      .slot-controls {
          display: flex;
          align-items: center;
          gap: 12px;
      }

      .slot-controls .btnGhost {
          padding: 10px 14px;
          border-radius: 12px;
          background: linear-gradient(90deg, rgba(255, 43, 61, .98), rgba(209, 27, 42, .92));
          color: #fff;
          border: none;
          box-shadow: 0 18px 50px rgba(209, 27, 42, .28);
      }

      .slot-controls .btnGhost:active {
          transform: scale(.98);
      }

      .slot-msg {
          color: rgba(255, 255, 255, .7);
          font-size: 13px;
      }

      .spin-win {
          animation: spinWin .9s ease;
          box-shadow: 0 0 40px rgba(255, 43, 61, .18), 0 6px 32px rgba(255, 86, 96, .08);
      }

      @keyframes spinWin {
          0% {
              transform: scale(1)
          }

          30% {
              transform: scale(1.08) rotate(-1deg)
          }

          100% {
              transform: scale(1)
          }
      }
      }