/* ── Reset & Base ───────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #0a0a12;
      --surface: #141420;
      --surface2: #1e1e2e;
      --text: #f0f0f5;
      --text2: #a0a0b8;
      --text3: #606078;
      --radius: 20px;
      --radius-sm: 12px;
      --nav-h: 72px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }
    html, body {
      height: 100vh; height: 100dvh;  /* dvh handles mobile address-bar */
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
      overflow: hidden;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    /* Desktop: wrap the phone-width column in an ambient glow instead of
       leaving it as a narrow strip floating in flat black */
    @media (min-width: 600px) {
      body {
        background:
          radial-gradient(ellipse 60% 50% at 18% 15%,  rgba(140,60,190,.16) 0%, transparent 65%),
          radial-gradient(ellipse 55% 55% at 85% 20%,  rgba(200,140,80,.12) 0%, transparent 60%),
          radial-gradient(ellipse 60% 55% at 82% 88%,  rgba(140,60,190,.16) 0%, transparent 65%),
          radial-gradient(ellipse 55% 55% at 12% 85%,  rgba(200,140,80,.1)  0%, transparent 60%),
          radial-gradient(ellipse 70% 60% at 50% 50%,  rgba(120,60,170,.08) 0%, transparent 70%),
          var(--bg);
      }
    }
    #root {
      height: 100vh; height: 100dvh;
      display: flex;
      flex-direction: column;
      max-width: 520px;
      margin: 0 auto;
      position: relative;
    }
    /* On desktop: soft frame around the app column */
    @media (min-width: 600px) {
      #root {
        box-shadow: 0 0 0 1px rgba(255,255,255,.05),
                    0 24px 80px rgba(0,0,0,.6);
      }
    }
    #app {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      scroll-behavior: smooth;
    }
    #app::-webkit-scrollbar { display: none; }

    /* ── Nav ────────────────────────────────────────── */
    #nav {
      height: calc(var(--nav-h) + var(--safe-bottom));
      padding-bottom: var(--safe-bottom);
      background: rgba(14, 14, 22, 0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid rgba(255,255,255,.07);
      display: flex;
      align-items: center;
      justify-content: space-around;
      z-index: 100;
      flex-shrink: 0;
    }
    .nav-btn {
      display: flex; flex-direction: column;
      align-items: center; gap: 4px;
      background: none; border: none;
      color: rgba(255,255,255,.55); cursor: pointer;
      font-size: 11px; padding: 8px 20px;
      border-radius: var(--radius-sm);
      transition: color .2s;
    }
    .nav-btn svg { transition: transform .2s; }
    .nav-btn.active { color: var(--text); }
    .nav-btn.active svg { transform: scale(1.1); }
    .nav-dot {
      width: 4px; height: 4px; border-radius: 50%;
      background: currentColor; opacity: 0;
      transition: opacity .2s;
    }
    .nav-btn.active .nav-dot { opacity: 1; }

    /* ── Buttons ────────────────────────────────────── */
    .btn-primary {
      border: none; cursor: pointer;
      border-radius: 100px;
      font-size: 17px; font-weight: 700;
      color: #fff; letter-spacing: .3px;
      transition: transform .15s, opacity .15s;
      -webkit-font-smoothing: antialiased;
    }
    .btn-primary:active { transform: scale(.97); opacity: .9; }
    /* Small and quiet: a 30px circle inside a 44px touch area. */
    .back-btn {
      position: absolute; top: 52px; left: 20px;
      width: 44px; height: 44px;
      background: none; border: 0; padding: 0;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: rgba(255,255,255,.62);
      -webkit-tap-highlight-color: transparent;
      transition: color .15s;
      z-index: 10;
    }
    .back-btn::before {
      content: ""; position: absolute; left: 50%; top: 50%;
      width: 30px; height: 30px; margin: -15px 0 0 -15px;
      border-radius: 50%;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      transition: background .15s;
    }
    .back-btn svg { position: relative; width: 16px; height: 16px; stroke-width: 1.8; }
    .back-btn:active { color: rgba(255,255,255,.9); }
    .back-btn:active::before { background: rgba(255,255,255,.12); }
    .back-btn:focus-visible { outline: none; }
    .back-btn:focus-visible::before { box-shadow: 0 0 0 2px rgba(255,255,255,.4); }

    /* ── Splash ───────────────────────────────────── */
    .splash {
      --orb: clamp(150px, 46vw, 190px);   /* the glowing circle */
      height: 100%;
      position: relative; overflow: hidden;
      background: #050308;
      opacity: 1;
      transition: opacity .4s ease;
    }
    .splash.splash-out {
      opacity: 0;
      pointer-events: none;
    }

    /* Real galaxy texture asset — CSS only handles lighting/orb/text on top */
    .galaxy-bg {
      position: absolute; inset: 0; pointer-events: none;
      background-image: url('assets/galaxy-bg.svg');
      background-position: center; background-size: cover; background-repeat: no-repeat;
      opacity: .9;
      transform: scale(1.03);
    }
    /* Darkening layer so text/orb stay readable over the texture */
    .splash-overlay {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse at 50% 46%, transparent 0%, rgba(4,3,10,.08) 32%, rgba(3,2,8,.42) 72%, rgba(2,1,6,.68) 100%);
    }
    /* Content column: sits in the upper portion of the screen, not centered */
    .splash-content {
      position: relative; z-index: 1; height: 100%;
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
      padding-top: max(clamp(26px, 10vh, 92px), calc(env(safe-area-inset-top) + 24px));
      padding-bottom: max(28px, env(safe-area-inset-bottom));
      padding-left: 20px;
      padding-right: 20px;
    }

    /* Dense scattered starfield behind the logo, mixed sizes */
    .splash-stars {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        radial-gradient(1.5px 1.5px at 15% 22%, rgba(230,210,255,.8), transparent),
        radial-gradient(1px 1px at 82% 15%,   rgba(230,210,255,.6),  transparent),
        radial-gradient(1.5px 1.5px at 72% 60%, rgba(240,220,255,.7), transparent),
        radial-gradient(1px 1px at 25% 75%,   rgba(230,210,255,.55), transparent),
        radial-gradient(1.5px 1.5px at 90% 78%, rgba(240,220,255,.6), transparent),
        radial-gradient(1px 1px at 8% 55%,    rgba(230,210,255,.5),  transparent),
        radial-gradient(1px 1px at 55% 12%,   rgba(230,210,255,.55), transparent),
        radial-gradient(1.5px 1.5px at 60% 88%, rgba(240,220,255,.5), transparent),
        radial-gradient(1px 1px at 38% 34%,   rgba(255,225,190,.5), transparent),
        radial-gradient(1px 1px at 68% 40%,   rgba(255,225,190,.4), transparent),
        radial-gradient(1px 1px at 18% 90%,   rgba(255,225,190,.4), transparent),
        radial-gradient(1px 1px at 95% 55%,   rgba(230,210,255,.5), transparent),
        radial-gradient(1px 1px at 45% 95%,   rgba(230,210,255,.4), transparent),
        radial-gradient(1px 1px at 5% 8%,     rgba(230,210,255,.45),transparent),
        radial-gradient(1px 1px at 30% 5%,    rgba(255,225,190,.4), transparent);
      background-repeat: no-repeat;
      animation: starDrift 22s ease-in-out infinite;
    }
    @keyframes starDrift {
      0%, 100% { opacity: .72; background-position: 0 0; }
      50%      { opacity: 1;   background-position: 0 -8px; }
    }

    /* Bright four-point sparkle stars, scattered unevenly, twinkling */
    .splash-sparkles { position: absolute; inset: 0; pointer-events: none; }
    .sparkle {
      position: absolute;
      background: currentColor;
      clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
      color: #f6e9c8;
      filter: drop-shadow(0 0 4px currentColor);
      animation: sparkleTwinkle 6.5s ease-in-out infinite;
    }
    .sparkle:nth-child(3n)   { color: #e8c8f0; animation-duration: 8s; }
    .sparkle:nth-child(5n)   { color: #d9a6df; animation-duration: 5.5s; }
    .sparkle:nth-child(2n+1) { animation-delay: 1.4s; }
    .sparkle:nth-child(4n)   { animation-delay: 2.8s; }
    @keyframes sparkleTwinkle {
      0%, 100% { opacity: .22; transform: scale(.72); }
      50%      { opacity: .92; transform: scale(1); }
    }

    .splash-logo { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }

    /* Concentric orbit rings — now folded into the glow, not standalone lines */
    .orbit-rings {
      position: relative;
      width: calc(var(--orb) * 2.15); height: calc(var(--orb) * 2.15);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 4px;
      animation: orbIn 1.3s cubic-bezier(.2,.8,.2,1) both;
    }
    .orbit-ring {
      position: absolute; border-radius: 50%;
      border: 1px solid rgba(210,175,225,.07);
      box-shadow: 0 0 24px 2px rgba(155,90,200,.06);
    }
    .orbit-ring-1 { width: calc(var(--orb) * 1.38); height: calc(var(--orb) * 1.38); border-color: rgba(210,175,225,.12); }
    .orbit-ring-2 { width: calc(var(--orb) * 1.72); height: calc(var(--orb) * 1.72); border-color: rgba(210,175,225,.09); animation: orbitSpin 17s linear infinite; }
    .orbit-ring-3 { width: calc(var(--orb) * 2.1);  height: calc(var(--orb) * 2.1);  border-color: rgba(210,175,225,.05); animation: orbitSpin 26s linear infinite reverse; }
    /* A small light travelling along two of the rings */
    .orbit-ring-2::after, .orbit-ring-3::after {
      content: ""; position: absolute; top: -3px; left: 50%;
      width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
    }
    .orbit-ring-2::after { background: #fff3d6; box-shadow: 0 0 10px 3px rgba(246,217,138,.7); }
    .orbit-ring-3::after { width: 4px; height: 4px; margin-left: -2px; top: -2px; background: #e8c8f0; box-shadow: 0 0 8px 2px rgba(217,166,223,.65); }
    @keyframes orbitSpin { to { transform: rotate(360deg); } }
    @keyframes orbIn {
      from { opacity: 0; transform: scale(.72); filter: blur(6px); }
      to   { opacity: 1; transform: scale(1);   filter: blur(0); }
    }
    @keyframes splashRise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }

    /* Slow turning aura of violet and gold light behind the orb */
    .orb-aura {
      position: absolute; top: 50%; left: 50%;
      width: calc(var(--orb) * 2.3); height: calc(var(--orb) * 2.3);
      margin: calc(var(--orb) * -1.15) 0 0 calc(var(--orb) * -1.15);
      border-radius: 50%;
      background: conic-gradient(from 0deg,
        transparent 0%, rgba(190,140,240,.30) 12%, transparent 26%,
        rgba(246,217,138,.20) 50%, transparent 64%, rgba(217,166,223,.26) 82%, transparent 100%);
      -webkit-mask: radial-gradient(circle, transparent 36%, #000 50%, transparent 70%);
              mask: radial-gradient(circle, transparent 36%, #000 50%, transparent 70%);
      filter: blur(8px);
      pointer-events: none;
      animation: orbitSpin 30s linear infinite;
    }

    /* Tap: two rings of light leave the orb */
    .orb-ripple {
      position: absolute; top: 50%; left: 50%;
      width: var(--orb); height: var(--orb);
      margin: calc(var(--orb) * -.5) 0 0 calc(var(--orb) * -.5);
      border-radius: 50%;
      border: 2px solid rgba(250,235,205,.85);
      box-shadow: 0 0 18px 2px rgba(190,150,240,.5);
      opacity: 0; pointer-events: none;
    }
    .splash.is-entering .orb-ripple    { animation: rippleOut .8s cubic-bezier(.2,.7,.3,1) both; }
    .splash.is-entering .orb-ripple.r2 { animation-delay: .14s; border-color: rgba(217,166,223,.8); }
    @keyframes rippleOut {
      from { opacity: .9; transform: scale(1); }
      to   { opacity: 0;  transform: scale(2.3); }
    }
    .splash.is-entering .orb-glow-near { animation: glowFlare .7s ease-out both; }
    @keyframes glowFlare {
      0%   { opacity: .9; transform: translate(-50%,-50%) scale(1); }
      40%  { opacity: 1;  transform: translate(-50%,-50%) scale(1.45); }
      100% { opacity: .8; transform: translate(-50%,-50%) scale(1.2); }
    }

    /* A shooting star now and then */
    .shooting-star {
      position: absolute; top: 12%; left: 82%;
      width: 90px; height: 1.5px;
      background: linear-gradient(90deg, transparent, rgba(255,246,222,.95));
      transform: rotate(-24deg); transform-origin: 100% 50%;
      opacity: 0; pointer-events: none;
      animation: shoot 11s ease-in infinite;
    }
    .shooting-star.s2 { top: 40%; left: 96%; width: 70px; animation-delay: 5.5s; animation-duration: 15s; }
    @keyframes shoot {
      0%, 86% { opacity: 0; transform: translate(0, 0) rotate(-24deg); }
      88%     { opacity: 1; }
      96%     { opacity: 0; transform: translate(-260px, 120px) rotate(-24deg); }
      100%    { opacity: 0; transform: translate(-260px, 120px) rotate(-24deg); }
    }

    /* Far outer glow — large, soft, fades gradually into the background */
    .orb-glow-far {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: calc(var(--orb) * 2.1); height: calc(var(--orb) * 2.1); border-radius: 50%;
      background: radial-gradient(circle,
        rgba(148,108,196,.26) 0%,
        rgba(108,68,168,.14) 34%,
        rgba(186,186,214,.05) 58%,
        transparent 78%);
      filter: blur(2px);
      pointer-events: none;
    }
    /* Near glow — concentrated purple/pink halo hugging the ring */
    .orb-glow-near {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: calc(var(--orb) * 1.5); height: calc(var(--orb) * 1.5); border-radius: 50%;
      background: radial-gradient(circle,
        rgba(228,222,244,.2) 0%,
        rgba(186,156,216,.3) 32%,
        rgba(118,72,176,.14) 58%,
        transparent 76%);
      pointer-events: none;
      animation: glowPulse 5.4s ease-in-out infinite;
    }
    @keyframes glowPulse {
      0%, 100% { opacity: .62; }
      50%      { opacity: 1; }
    }

    /* Light particles / dust — uneven scatter, denser near the ring */
    .orb-particles { position: absolute; inset: 0; pointer-events: none; animation: orbitSpin 70s linear infinite; }
    .particle {
      position: absolute; border-radius: 50%;
      background: radial-gradient(circle, #e7e3f4 0%, rgba(231,227,244,0) 70%);
      animation: particleTwinkle 3.4s ease-in-out infinite;
    }
    .particle.p1 { width: 4px; height: 4px; top: 32%; left: 28%; animation-delay: .1s; }
    .particle.p2 { width: 3px; height: 3px; top: 22%; left: 62%; animation-delay: .8s; }
    .particle.p3 { width: 5px; height: 5px; top: 60%; left: 74%; animation-delay: 1.4s; }
    .particle.p4 { width: 3px; height: 3px; top: 70%; left: 34%; animation-delay: .5s; }
    .particle.p5 { width: 4px; height: 4px; top: 44%; left: 80%; animation-delay: 2s;  }
    .particle.p6 { width: 3px; height: 3px; top: 18%; left: 42%; animation-delay: 1.7s; }
    .particle.p7 { width: 4px; height: 4px; top: 78%; left: 56%; animation-delay: 2.4s; }
    .particle.p8 { width: 3px; height: 3px; top: 50%; left: 16%; animation-delay: 1s;  }
    @keyframes particleTwinkle {
      0%, 100% { opacity: 0; transform: scale(.6); }
      50%      { opacity: .9; transform: scale(1.15); }
    }

    /* Ring is now a button — bright eclipse-style gold–white–pink rim */
    .logo-ring {
      width: var(--orb); height: var(--orb);
      border-radius: 50%;
      padding: 4px;
      background: conic-gradient(from 210deg,
        #fff3d6 0%, #fbdfa0 10%, #f3b98a 22%, #e79bc0 38%, #c07fe0 54%, #9a6ae8 68%, #d9a6df 84%, #fff3d6 100%);
      border: none;
      cursor: pointer;
      position: relative; z-index: 1;
      display: flex; align-items: center; justify-content: center;
      box-shadow:
        0 0 22px 3px rgba(228,222,244,.55),
        0 0 54px 11px rgba(186,156,220,.34),
        0 0 111px 30px rgba(118,70,176,.32),
        0 0 173px 54px rgba(64,28,112,.2);
      animation: ringGlow 5.2s ease-in-out infinite;
      transition: box-shadow .4s ease;
    }
    .logo-ring:hover, .logo-ring:focus-visible {
      box-shadow:
        0 0 27px 5px rgba(236,232,248,.72),
        0 0 65px 16px rgba(196,168,226,.46),
        0 0 124px 35px rgba(128,78,186,.4),
        0 0 189px 59px rgba(72,32,120,.24);
      outline: none;
    }
    /* Filled violet orb sitting inside the gradient rim — bright pinpoint core, dark edge */
    .ring-gold-border {
      position: absolute; inset: 4px;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, #e6d4ff 0%, #a864ea 20%, #6428aa 46%, #34125f 74%, #120524 100%);
      pointer-events: none;
    }
    .ring-inner-glow {
      position: absolute; inset: 4px;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.85) 0%, rgba(240,215,255,.4) 12%, rgba(230,200,255,.12) 32%, transparent 55%);
      pointer-events: none;
    }
    /* Heartbeat: beat → settle → second smaller beat → longer rest, on loop */
    @keyframes ringGlow {
      0%, 100% {
        box-shadow:
          0 0 22px 3px rgba(228,222,244,.5),
          0 0 54px 11px rgba(186,156,220,.32),
          0 0 111px 30px rgba(118,70,176,.28),
          0 0 173px 54px rgba(64,28,112,.18);
      }
      50% {
        box-shadow:
          0 0 30px 5px rgba(236,232,250,.78),
          0 0 70px 16px rgba(198,170,228,.48),
          0 0 130px 38px rgba(132,82,190,.4),
          0 0 197px 62px rgba(78,36,124,.26);
      }
    }
    .logo-title {
      animation: splashRise .9s ease .45s both;
      font-size: clamp(30px, 9vw, 42px); font-weight: 800;
      letter-spacing: -1px;
      background: linear-gradient(135deg, #f0c9e0, #f6d98a);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .logo-sub {
      font-size: 15px; color: rgba(255,255,255,.9);
      letter-spacing: 4.5px; text-transform: uppercase;
      margin-top: 12px;
      animation: splashRise .9s ease .65s both;
    }
    .splash-divider {
      display: flex; align-items: center; gap: 10px;
      width: 140px; margin: 18px auto 0;
      animation: splashRise .9s ease .85s both;
    }
    .splash-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(190,150,200,.4)); }
    .splash-divider span:last-child { background: linear-gradient(90deg, rgba(190,150,200,.4), transparent); }
    .splash-divider .spark {
      width: 6px; height: 6px; flex: none;
      background: linear-gradient(135deg, #f6d38f, #d9a6df);
      transform: rotate(45deg);
      box-shadow: 0 0 8px rgba(230,190,220,.6);
    }
    .splash-hint {
      margin-top: 16px;
      font-size: 17px; color: rgba(255,255,255,.85);
      letter-spacing: .3px;
      animation: fadeIn 1.2s ease 1.1s both;
    }
    .splash-touch {
      margin-top: 12px;
      padding: 6px 10px;
      border: none;
      background: none;
      font-family: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.45;
      letter-spacing: .15px;
      color: #d7d3e6;
      text-align: center;
      cursor: pointer;
      animation: touchBreath 4.8s ease-in-out infinite;
    }
    @keyframes touchBreath {
      0%, 100% { opacity: .68; }
      50%      { opacity: 1; }
    }
    @media (max-width: 360px) {
      .splash { --orb: 140px; }
    }
    @media (max-height: 700px) {
      .splash { --orb: clamp(128px, 38vw, 158px); }
      .splash-content { padding-top: max(28px, env(safe-area-inset-top)); }
      .splash-hint { margin-top: 12px; }
      .splash-touch { margin-top: 8px; }
    }

    /* ── Onboarding ─────────────────────────────────── */
    /* Same night sky as the splash, the same deck colours and the same card
       pieces as the app itself. --u scales the illustrations on short phones. */
    .onboarding {
      --u: 1px;
      --ob-btn: #9b6fa8;
      position: relative; overflow: hidden;
      touch-action: pan-y;   /* sideways swipes belong to the steps */
      height: 100%; display: flex;
      flex-direction: column;
      align-items: center;
      padding: max(50px, calc(env(safe-area-inset-top) + 42px)) 28px max(40px, calc(env(safe-area-inset-bottom) + 26px));
      background: radial-gradient(ellipse 120% 70% at 50% 0%, #1a1030 0%, #0c0816 55%, #07050d 100%);
    }
    @media (min-height: 780px) { .onboarding { --u: 1.08px; } }
    @media (max-height: 740px) { .onboarding { --u: .86px; } }
    @media (max-height: 680px) { .onboarding { --u: .74px; } }
    @media (max-height: 600px) { .onboarding { --u: .62px; } }

    /* Behind the iPhone status bar and toolbar: the same sky, edge to edge */
    html.is-onboarding, html.is-onboarding body {
      background: linear-gradient(180deg, #1a1030 0%, #0c0816 55%, #07050d 100%);
    }
    html.is-onboarding #root { background: transparent; }
    .ob-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
    .ob-glow {
      position: absolute; border-radius: 50%;
      filter: blur(36px);
      animation: obGlowIn 1s ease both;
    }
    .ob-glow-a {
      width: 360px; height: 360px; left: 50%; top: 11%;
      margin-left: -180px;
      background: radial-gradient(circle, color-mix(in srgb, var(--ob-a) 46%, transparent) 0%, color-mix(in srgb, var(--ob-a) 14%, transparent) 50%, transparent 72%);
    }
    .ob-glow-b {
      width: 260px; height: 260px; right: -70px; bottom: 6%;
      background: radial-gradient(circle, color-mix(in srgb, var(--ob-b) 26%, transparent) 0%, transparent 70%);
      animation-delay: .25s;
    }
    @keyframes obGlowIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

    .skip-btn {
      position: absolute; z-index: 2;
      top: max(6px, calc(env(safe-area-inset-top) + 2px)); left: 12px;
      background: none; border: none;
      color: rgba(255,255,255,.6); font-family: inherit; font-size: 14px; letter-spacing: .2px;
      cursor: pointer; padding: 10px 6px;
      transition: color .15s;
    }
    .skip-btn:active { color: rgba(255,255,255,.95); }

    .ob-visual {
      position: relative; z-index: 1;
      flex: none;
      height: calc(300 * var(--u)); margin-top: calc(38 * var(--u));
      display: flex; align-items: center; justify-content: center;
      width: 100%;
    }

    /* — Slide 1: one card, with the deck back peeking out behind it — */
    .ob-card-stage {
      position: relative;
      width: calc(190 * var(--u)); height: calc(277 * var(--u));
      animation: obCardFloat 6s ease-in-out infinite;
    }
    @keyframes obCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-9 * var(--u))); } }
    .ob-card-halo {
      position: absolute; left: 50%; top: 50%;
      width: calc(330 * var(--u)); height: calc(330 * var(--u));
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, color-mix(in srgb, var(--deck-primary) 38%, transparent) 0%, transparent 66%);
      filter: blur(14px);
      animation: obHalo 6s ease-in-out infinite;
    }
    @keyframes obHalo { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
    .ob-face {
      position: absolute; inset: 0; display: block;
      border-radius: inherit; overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--deck-line) 60%, transparent);
      background: linear-gradient(180deg, color-mix(in srgb, var(--deck-card) 70%, #241428), #100814);
      box-shadow: 0 12px 20px -12px rgba(0,0,0,.85);
    }
    .ob-face svg { width: 100%; height: 100%; display: block; }
    .ob-card-back {
      position: absolute; inset: 0;
      border-radius: calc(18 * var(--u));
      transform: translate(calc(-34 * var(--u)), calc(8 * var(--u))) rotate(-9deg);
      opacity: .85;
      animation: obFadeIn .9s ease .25s both;
    }
    @keyframes obFadeIn { from { opacity: 0; } to { opacity: .85; } }
    .ob-card-demo {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: calc(15 * var(--u));
      padding: calc(26 * var(--u)) calc(24 * var(--u));
      border-radius: calc(18 * var(--u));
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--deck-line) 55%, transparent);
      background: linear-gradient(170deg, color-mix(in srgb, var(--deck-card) 82%, #4a2a5c), #140a1c 92%);
      box-shadow: 0 24px 50px -16px rgba(0,0,0,.85),
                  0 0 44px -8px color-mix(in srgb, var(--deck-primary) 50%, transparent),
                  inset 0 1px 0 rgba(255,255,255,.14);
      animation: obRise .8s cubic-bezier(.22,.8,.3,1) both;
    }
    /* Light falling from the top edge, like on the real card */
    .ob-card-demo::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 90% 55% at 50% 0%, color-mix(in srgb, var(--deck-primary) 30%, transparent), transparent 72%);
    }
    .ob-card-shine {
      position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.13) 50%, transparent 62%);
      background-size: 260% 100%; background-position: 140% 0;
      animation: obShine 7s ease-in-out 1.4s infinite;
    }
    @keyframes obShine { 0%, 55% { background-position: 140% 0; } 85%, 100% { background-position: -60% 0; } }
    .ob-card-icon {
      position: relative; display: grid; place-items: center;
      width: calc(54 * var(--u)); height: calc(54 * var(--u));
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--deck-line) 50%, transparent);
      background: rgba(255,255,255,.05);
      box-shadow: 0 0 22px -4px color-mix(in srgb, var(--deck-line) 45%, transparent);
    }
    .ob-card-icon.sm { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
    .ob-card-lines { position: relative; display: block; width: 100%; }
    .ob-card-lines i {
      display: block; height: 4px; border-radius: 3px; margin-bottom: calc(10 * var(--u));
      background: rgba(255,255,255,.5);
    }
    .ob-card-lines i.short { width: 58%; margin-left: auto; margin-right: auto; margin-bottom: 0; background: rgba(255,255,255,.34); }
    .ob-card-rule, .ob-rule { display: flex; align-items: center; gap: 8px; }
    .ob-card-rule { position: relative; width: 70%; }
    .ob-card-rule span, .ob-rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,.5)); }
    .ob-card-rule span:last-child, .ob-rule span:last-child { background: linear-gradient(90deg, rgba(201,168,76,.5), transparent); }
    .ob-card-rule i, .ob-rule i {
      width: 6px; height: 6px; flex: none;
      background: linear-gradient(135deg, #f6d38f, #d9a6df);
      clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
      transform: scale(1.5);
    }
    .ob-card-tag { position: relative; font-size: 12px; font-weight: 600; letter-spacing: .4px; }


    /* — Slide 3: a small fan; the middle card lifts and turns over — */
    .ob-fan-demo {
      position: relative;
      width: calc(300 * var(--u)); height: calc(250 * var(--u));
      /* the painted fan sits low in its box; lift it so its middle lines up with the other two pictures */
      top: calc(-32 * var(--u));
    }
    .ob-fan-halo {
      position: absolute; left: 50%; top: 52%;
      width: calc(320 * var(--u)); height: calc(260 * var(--u));
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, color-mix(in srgb, var(--ob-a) 34%, transparent) 0%, transparent 66%);
      filter: blur(16px);
      animation: obHalo 6s ease-in-out infinite;
    }
    .ob-fan-card {
      position: absolute; left: 50%; bottom: calc(14 * var(--u));
      width: calc(122 * var(--u)); height: calc(178 * var(--u));
      margin-left: calc(-61 * var(--u));
      border-radius: calc(14 * var(--u));
      transform-origin: 50% 150%;
      transform: rotate(var(--r));
      animation: obDeal .8s cubic-bezier(.22,.8,.3,1) both;
      animation-delay: calc(var(--n) * .07s + .05s);
    }
    @keyframes obDeal { from { opacity: 0; transform: rotate(0deg) translateY(calc(26 * var(--u))); } to { opacity: 1; transform: rotate(var(--r)); } }
    .ob-fan-mid { z-index: 3; }
    .ob-fan-flip {
      position: absolute; inset: 0; border-radius: inherit;
      transform-style: preserve-3d;
      animation: obFanFlip 8s cubic-bezier(.4,0,.2,1) 1.4s infinite;
    }
    @keyframes obFanFlip {
      0%, 14%   { transform: perspective(800px) translateY(0) rotateY(0) scale(1); }
      30%       { transform: perspective(800px) translateY(calc(-26 * var(--u))) rotateY(0) scale(1.1); }
      52%, 82%  { transform: perspective(800px) translateY(calc(-26 * var(--u))) rotateY(180deg) scale(1.1); }
      100%      { transform: perspective(800px) translateY(0) rotateY(0) scale(1); }
    }
    .ob-fan-front, .ob-fan-back {
      position: absolute; inset: 0; border-radius: inherit;
      -webkit-backface-visibility: hidden; backface-visibility: hidden;
    }
    .ob-fan-front .ob-face { border-radius: inherit; }
    /* The gold frame on the card in the middle */
    .ob-fan-ring {
      position: absolute; inset: 0; border-radius: inherit;
      border: 2px solid var(--deck-line);
      box-shadow: 0 0 22px -2px color-mix(in srgb, var(--deck-line) 55%, transparent),
                  inset 0 0 0 1px color-mix(in srgb, var(--deck-line) 30%, transparent);
    }
    .ob-fan-back {
      transform: rotateY(180deg);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(16 * var(--u));
      border: 1px solid color-mix(in srgb, var(--deck-line) 60%, transparent);
      background: linear-gradient(170deg, color-mix(in srgb, var(--deck-card) 82%, #4a2a5c), #140a1c 92%);
      box-shadow: 0 0 30px -4px color-mix(in srgb, var(--deck-line) 45%, transparent);
    }
    .ob-fan-back .ob-card-lines i { margin-bottom: calc(8 * var(--u)); }

    /* — Text, dots, button — */
    .ob-text { position: relative; z-index: 1; text-align: center; margin: 24px 0 22px; min-height: 122px; }  /* same height on every step, so the title and the button never jump */
    .ob-title { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 0; letter-spacing: .2px; }
    .ob-rule { width: 116px; margin: 14px auto 14px; }
    .ob-body { max-width: 290px; margin: 0 auto; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.72); }
    .ob-dots { position: relative; z-index: 1; display: flex; gap: 8px; margin-bottom: 22px; }
    .ob-dot {
      width: 7px; height: 7px; border-radius: 99px;
      background: rgba(255,255,255,.28);
    }
    .ob-dot.active {
      width: 22px;
      background: linear-gradient(90deg, #9b6fa8, #c9a84c);
      animation: obDotGrow .45s cubic-bezier(.22,.8,.3,1) both;
    }
    @keyframes obDotGrow { from { width: 7px; } to { width: 22px; } }
    /* The way on is a swipe, shown as a few light arrows that drift to the left */
    .ob-swipe {
      position: relative; z-index: 1;
      margin-top: auto;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      padding: 10px 28px;
      background: none; border: 0;
      font-family: inherit;
      color: rgba(255,255,255,.58);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .ob-swipe-chevs { display: flex; gap: 3px; color: #cdb3e0; }
    .ob-swipe-chevs svg {
      opacity: .7;
      animation: obChev 2.2s ease-in-out infinite;
      animation-delay: calc(var(--k) * .24s);
    }
    @keyframes obChev {
      0%   { opacity: .12; transform: translateX(9px); }
      38%  { opacity: 1;   transform: translateX(0); }
      72%, 100% { opacity: .12; transform: translateX(-9px); }
    }
    .ob-swipe-label { font-size: 13px; letter-spacing: .5px; }
    /* On the last step the same cue turns gold: it is the way in */
    .ob-swipe.is-last { color: #e3cb92; }
    .ob-swipe.is-last .ob-swipe-chevs { color: #e3cb92; }
    .ob-swipe.is-last .ob-swipe-label { font-size: 16px; font-weight: 600; letter-spacing: .3px; }
    .ob-swipe:focus-visible { outline: 2px solid rgba(255,255,255,.28); outline-offset: 2px; border-radius: 14px; }

    /* Entrance: the picture, then the words, then the controls (first step only) */
    @keyframes obRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
    .ob-visual { animation: obRise .7s cubic-bezier(.22,.8,.3,1) both; }
    .ob-text   { animation: obRise .7s cubic-bezier(.22,.8,.3,1) .14s both; }
    .ob-step-0 .ob-dots { animation: obRise .6s ease .26s both; }
    .ob-step-0 .ob-swipe { animation: obRise .6s ease .32s both; }
    .ob-step-0 .skip-btn { animation: fadeIn .8s ease .4s both; }
    /* Moving between steps with a swipe: the old step slides away with the finger, the new one follows it in */
    .onboarding.ob-dir-next .ob-visual, .onboarding.ob-dir-next .ob-text { animation: obInRight .5s cubic-bezier(.22,.8,.3,1) both; }
    .onboarding.ob-dir-prev .ob-visual, .onboarding.ob-dir-prev .ob-text { animation: obInLeft  .5s cubic-bezier(.22,.8,.3,1) both; }
    .onboarding.ob-dir-next .ob-text, .onboarding.ob-dir-prev .ob-text { animation-delay: .05s; }
    @keyframes obInRight { from { opacity: 0; transform: translateX(34px); }  to { opacity: 1; transform: none; } }
    @keyframes obInLeft  { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
    .onboarding.is-leaving-next .ob-visual, .onboarding.is-leaving-next .ob-text { animation: obOutLeft  .2s ease forwards; }
    .onboarding.is-leaving-prev .ob-visual, .onboarding.is-leaving-prev .ob-text { animation: obOutRight .2s ease forwards; }
    @keyframes obOutLeft  { to { opacity: 0; transform: translateX(-34px); } }
    @keyframes obOutRight { to { opacity: 0; transform: translateX(34px); } }

    /* No movement: everything stays still, the middle card is shown turned over */
    .onboarding.reduce-motion *, .onboarding.reduce-motion *::before { animation: none !important; }
    .onboarding.reduce-motion .ob-fan-flip { transform: translateY(calc(-26 * var(--u))) scale(1.1) rotateY(180deg); }
    @media (prefers-reduced-motion: reduce) {
      .onboarding *, .onboarding *::before { animation: none !important; }
      .onboarding .ob-fan-flip { transform: translateY(calc(-26 * var(--u))) scale(1.1) rotateY(180deg); }
    }

    /* ── Home ───────────────────────────────────────── */
    .home-view { padding: 52px 20px 24px; animation: slideUp .35s ease; }
    .home-header { margin-bottom: 16px; }
    .greeting { font-size: 15px; color: rgba(255,255,255,.65); margin-bottom: 8px; letter-spacing: .5px; }
    .home-title { font-size: 26px; font-weight: 800; line-height: 1.25; }
    .today-carousel { margin-bottom: 16px; }
    .today-track {
      display: flex;
      direction: rtl;
      gap: 0;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
    }
    .today-track::-webkit-scrollbar { display: none; }
    .today-card {
      position: relative;
      flex: 0 0 100%;
      scroll-snap-align: start;
      overflow: hidden;
      background: var(--surface2);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: var(--radius);
      padding: 22px 28px 26px;
      margin: 0;
      cursor: pointer;
      box-shadow: 0 10px 28px -18px rgba(0,0,0,.55);
      transition: transform .15s ease;
      color: #fff;
      font-family: inherit;
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .today-card:active { transform: scale(.99); }
    .today-label { display: block; width: 100%; text-align: right; font-size: 12px; letter-spacing: .4px; color: #fff; font-weight: 400; }
    .today-msg { width: 100%; text-align: right; font-size: 19px; font-weight: 700; margin: 12px 0 14px; line-height: 1.45; color: #fff; }
    .today-deck {
      position: absolute;
      left: 19px;
      bottom: 15px;
      display: block;
      width: auto;
      margin: 0;
      text-align: left;
      font-size: 13px;
      font-weight: 600;
    }
    .today-dots {
      display: flex;
      justify-content: center;
      direction: rtl;
      gap: 2px;
      margin-top: 10px;
    }
    .today-dot {
      width: 22px; height: 22px;
      padding: 0;
      border: 0;
      border-radius: 99px;
      background: transparent;
      cursor: pointer;
      display: grid;
      place-items: center;
    }
    .today-dot::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 99px;
      background: rgba(255,255,255,.32);
    }
    .today-dot.is-active::before { width: 16px; background: #c4b0dc; }
    .decks-heading {
      font-size: 15px; font-weight: 600;
      color: rgba(255,255,255,.82);
      margin: 0 0 10px;
    }
    .decks-grid { display: flex; flex-direction: column; gap: 14px; }
    .deck-card {
      position: relative; overflow: hidden;
      border: 1px solid transparent;
      border-radius: var(--radius);
      padding: 20px 20px;
      display: flex; align-items: center; gap: 16px;
      cursor: pointer; text-align: right;
      width: 100%;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .deck-card::before {
      content: '';
      position: absolute; inset: 0;
      pointer-events: none;
      background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(0,0,0,.14) 70%);
    }
    .deck-card:active,
    .deck-card.is-pressed {
      transform: scale(.985);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deck-glow, #fff) 48%, transparent);
    }
    .deck-accent {
      position: absolute; top: 0; right: 0; z-index: 1;
      width: 3px; height: 100%;
      opacity: .5;
      border-radius: 0 var(--radius) var(--radius) 0;
    }
    .deck-icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px; }
    .deck-detail-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
    .deck-info { position: relative; z-index: 1; flex: 1; text-align: right; }
    .deck-name { font-size: 18px; font-weight: 700; color: var(--text); }
    .deck-sub { font-size: 15px; color: rgba(255,255,255,.72); margin-top: 8px; }

    /* ── Deck Detail ────────────────────────────────── */
    .deck-view {
      min-height: 100%;
      position: relative;
      display: flex; flex-direction: column;
      align-items: center;
      padding: 76px 28px 24px;
      animation: slideUp .35s ease;
      background:
        radial-gradient(ellipse 62% 40% at 50% 52%, color-mix(in srgb, var(--deck-primary) 32%, transparent), transparent 70%),
        radial-gradient(ellipse 130% 88% at 50% 42%, transparent 46%, rgba(0,0,0,.55) 100%),
        linear-gradient(180deg, #120818 0%, var(--deck-bg) 52%, #07040c 100%);
    }
    .deck-detail-header { display: flex; flex-direction: column; align-items: center; }
    .deck-detail-icon { font-size: 40px; margin-bottom: 8px; }
    .deck-detail-name { font-size: 32px; font-weight: 800; text-align: center; }
    .deck-detail-sub { font-size: 16px; color: rgba(255,255,255,.78); margin-top: 4px; text-align: center; }
    .deck-detail-count { font-size: 13px; color: rgba(255,255,255,.72); margin-top: 2px; text-align: center; }
    .deck-stage {
      position: relative;
      width: 300px; height: 348px;
      margin: 10px 0 2px;
      display: grid; place-items: center;
    }
    .deck-glow {
      position: absolute;
      width: 340px; height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle,
        color-mix(in srgb, var(--deck-primary) 58%, transparent) 0%,
        color-mix(in srgb, var(--deck-primary) 24%, transparent) 42%,
        transparent 72%);
      filter: blur(22px);
      pointer-events: none;
    }
    .deck-stack {
      position: relative; z-index: 1;
      width: 198px; height: 278px;
      margin: 0;
    }
    .stack-card {
      position: absolute; inset: 0;
      border-radius: 21px;
      border: 1px solid color-mix(in srgb, var(--deck-line) 62%, transparent);
      background: color-mix(in srgb, var(--deck-card) 78%, #07040c);
      box-shadow: 0 18px 28px -18px rgba(0,0,0,.75);
      overflow: hidden;
    }
    .stack-card.s3 { transform: rotate(-12deg) translate(-19px, 12px); opacity: .72; }
    .stack-card.s2 { transform: rotate(-5deg) translate(-8px, 5px); opacity: .9; }
    .stack-card.s1 {
      transform: rotate(2.5deg);
      background:
        radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--deck-primary) 22%, transparent), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--deck-card) 65%, #241428), #100814);
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--deck-line) 35%, transparent),
        0 20px 34px -16px rgba(0,0,0,.8);
    }
    .deck-face { width: 100%; height: 100%; display: block; }
    .deck-whisper {
      margin: 0 0 10px;
      font-size: 14px;
      color: rgba(255,255,255,.62);
      text-align: center;
    }
    .shuffle-btn {
      width: min(100%, 320px);
      padding: 16px 28px;
      font-size: 17px;
      color: #fff;
      border: 1px solid rgba(255,255,255,.32);
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--deck-primary) 62%, #3a1848),
        color-mix(in srgb, var(--deck-primary) 38%, #160a22));
      box-shadow: none;
    }

    /* ── Shuffle ────────────────────────────────────── */
    .shuffle-view {
      min-height: 100%;
      position: relative;
      display: flex; flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 112px 18px 40px;
      overflow: hidden;
      animation: fadeIn .3s ease;
      background:
        radial-gradient(ellipse 62% 40% at 50% 52%, color-mix(in srgb, var(--deck-primary) 32%, transparent), transparent 70%),
        radial-gradient(ellipse 130% 88% at 50% 42%, transparent 46%, rgba(0,0,0,.55) 100%),
        linear-gradient(180deg, #120818 0%, var(--deck-bg) 52%, #07040c 100%);
    }
    .shuffle-hint {
      position: absolute;
      top: 52px; right: 20px;
      font-size: 22px;
      font-weight: 600;
      line-height: 40px;
      color: #fff;
      text-align: right;
      margin: 0;
      transition: opacity .35s ease;
    }
    .shuffle-stage {
      position: relative;
      width: min(100%, 560px);
      margin: 0;
      touch-action: pan-y;
      cursor: grab;
      user-select: none; -webkit-user-select: none;
    }
    .shuffle-stage:active { cursor: grabbing; }
    .shuffle-glow {
      position: absolute;
      left: 50%; top: 42%;
      width: min(100%, 400px);
      height: 240px;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle,
        color-mix(in srgb, var(--deck-primary) 40%, transparent) 0%,
        color-mix(in srgb, var(--deck-primary) 14%, transparent) 46%,
        transparent 72%);
      filter: blur(22px);
      pointer-events: none;
    }
    .shuffle-card {
      position: absolute;
      left: 50%; top: 0;
      width: var(--fan-w, 100px);
      height: calc(var(--fan-w, 100px) * 1.46);
      margin-left: calc(var(--fan-w, 100px) / -2);
      pointer-events: none;
      will-change: transform;
    }
    .fan-face {
      position: absolute; inset: 0;
      display: block;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--deck-line) 60%, transparent);
      background: linear-gradient(180deg, color-mix(in srgb, var(--deck-card) 70%, #241428), #100814);
      box-shadow: 0 12px 20px -12px rgba(0,0,0,.85);
      overflow: hidden;
      transition: transform .48s cubic-bezier(.22,.8,.3,1);
    }
    .shuffle-card .deck-face { width: 100%; height: 100%; display: block; }
    /* The card in the middle: a clear gold frame and a soft glow. */
    .fan-ring {
      position: absolute; inset: 0;
      border-radius: 12px;
      border: 2px solid var(--deck-line);
      box-shadow: 0 0 22px -2px color-mix(in srgb, var(--deck-line) 55%, transparent),
                  inset 0 0 0 1px color-mix(in srgb, var(--deck-line) 30%, transparent);
      opacity: var(--f, 0);
      transition: transform .48s cubic-bezier(.22,.8,.3,1);
    }
    .shuffle-card.is-chosen .fan-face,
    .shuffle-card.is-chosen .fan-ring { transform: scale(1.1); }

    /* The line under the fan */
    .fan-controls {
      width: 100%;
      display: flex; flex-direction: column; align-items: center;
      gap: 10px; margin-top: 34px;
      transition: opacity .35s ease;
    }
    .shuffle-view.is-picked .fan-controls,
    .shuffle-view.is-picked .shuffle-hint { opacity: 0; }
    /* One short line under the fan, in a soft gold */
    .fan-help {
      margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .3px; text-align: center;
      color: color-mix(in srgb, #e3cb92 78%, var(--deck-line) 22%);
      animation: fadeIn .9s ease .25s both;
    }
    .shuffle-stage { outline: none; -webkit-tap-highlight-color: transparent; }
    .shuffle-stage:focus-visible { outline: 2px solid rgba(255,255,255,.28); outline-offset: 6px; border-radius: 16px; }
    @media (max-height: 700px) {
      .shuffle-view { padding-top: 100px; padding-bottom: 20px; }
      .shuffle-hint { top: 48px; }
    }

    /* ── Card ───────────────────────────────────────── */
    .card-view {
      min-height: 100%;
      display: flex; flex-direction: column;
      align-items: center;
      padding: 108px 20px 32px;
      position: relative;
    }
    /* Focus vignette — darkens edges to spotlight the card */
    .focus-vignette {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background: radial-gradient(ellipse at 50% 42%, transparent 38%, rgba(0,0,0,.55) 100%);
      animation: vignetteIn .8s ease forwards;
    }
    @keyframes vignetteIn { from { opacity:0 } to { opacity:1 } }

    /* Soft glow behind card */
    .card-glow {
      position: absolute; top: 100px; left: 50%; transform: translateX(-50%);
      width: 280px; height: 380px; border-radius: 50%;
      background: var(--glow-color, #9b6fa8);
      filter: blur(60px);
      opacity: 0; transition: opacity 1.2s ease;
      pointer-events: none; z-index: 0;
    }
    .card-glow.visible { opacity: .18; }

    /* Scene: handles lift + breathing */
    .card-scene {
      width: 100%; max-width: 352px;
      perspective: 1100px;
      margin-bottom: 24px;
      position: relative; z-index: 1;
      transition: transform .55s cubic-bezier(0.34,1.1,0.64,1);
    }
    .card-scene.is-lifting {
      transform: translateY(-14px) scale(1.03);
    }
    .card-scene.is-breathing {
      animation: cardBreathe 5s ease-in-out infinite;
    }
    @keyframes cardBreathe {
      0%, 100% { transform: translateY(0px);   }
      50%       { transform: translateY(-3px);  }
    }

    /* 3-D Flipper */
    .card-flipper {
      width: 100%; aspect-ratio: 2/3;
      position: relative;
      transform-style: preserve-3d;
      transition: transform .78s cubic-bezier(0.4,0,0.2,1);
      cursor: pointer;
    }
    .card-flipper.is-flipped { transform: rotateY(180deg); cursor: default; }
    .card-scene.is-breathing .card-flipper {
      aspect-ratio: unset;
      height: auto;
    }
    .card-scene.is-breathing .card-face.card-front {
      position: relative; inset: auto;
    }
    .card-scene.is-breathing .card-face.card-back { display: none; }
    /* Once revealed the two half-turns cancel out. Flatten them so the writing box
       behaves like a normal input (no 3D layer under the keyboard and caret). */
    .card-scene.is-breathing .card-flipper { transform: none; transform-style: flat; transition: none; }
    .card-scene.is-breathing .card-face.card-front { transform: none; transition: none; }
    .card-face {
      position: absolute; inset: 0;
      border-radius: 24px;
      border: 1px solid transparent;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3);
    }
    /* Card back */
    .card-back {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 16px;
    }
    .card-back .deck-face { position: absolute; inset: 0; width: 100%; height: 100%; }
    .card-back .card-tap-hint {
      position: absolute; bottom: 18px; left: 0; right: 0; z-index: 1;
    }
    .card-tap-hint {
      position: relative; z-index: 1;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
    }
    /* iPhone Safari can keep drawing the writing on the back, mirrored, while the card turns.
       The writing and the pattern are told to hide their back sides too, and the hint
       fades out the moment the card starts to turn. */
    .card-back > * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .card-scene.is-flipping .card-tap-hint { opacity: 0; transition: opacity .18s ease; }
    .card-scene.is-flipping .card-face.is-pulsing { animation: none; }
    .card-scene.is-past-half .card-back { visibility: hidden; }
    .card-tap-ready { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); letter-spacing: .3px; }
    .card-tap-sub   { font-size: 12px; color: rgba(255,255,255,.45); letter-spacing: .3px; }
    /* Gentle pulse hinting the closed card is tappable */
    .card-face.is-pulsing {
      animation: cardTapPulse 2.6s ease-in-out infinite;
    }
    @keyframes cardTapPulse {
      0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3), 0 0 0 0 rgba(255,255,255,0); }
      50%      { box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3), 0 0 34px 4px rgba(255,255,255,.12); }
    }
    /* Card front (content side) */
    .card-front {
      transform: rotateY(180deg); padding: 26px 24px 24px; overflow: visible; position: relative;
      box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
    }
    /* Soft light falling from the top edge, tinted by the deck colour */
    .card-front::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      z-index: -1; pointer-events: none;
      background: radial-gradient(ellipse 90% 55% at 50% 0%,
        color-mix(in srgb, var(--deck-primary) 24%, transparent), transparent 72%);
    }
    .card-front::-webkit-scrollbar { display: none; }
    /* Grain texture */
    .card-grain {
      position: absolute; inset: 0; border-radius: 24px;
      pointer-events: none; z-index: 10; opacity: .035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      background-size: 180px 180px;
    }

    /* Stagger reveal — each element fades + slides up */
    .stagger-item {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .45s ease, transform .45s ease;
    }
    .stagger-item.show { opacity: 1; transform: none; }

    /* Card content elements */
    .card-accent-bar { height: 3px; border-radius: 3px; margin-bottom: 22px; }
    .card-deck-tag { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
    .card-title-text { font-size: 24px; font-weight: 800; margin-bottom: 16px; line-height: 1.2; }
    .card-message { font-size: 19px; line-height: 1.7; color: #fff; margin-bottom: 20px; font-style: italic; }
    .card-divider {
      border: none; border-top: 1px solid;
      border-top-color: color-mix(in srgb, var(--deck-primary) 55%, rgba(255,255,255,.22));
      margin: 18px 0;
    }
    .card-layer-label { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--deck-primary) 62%, #fff); margin-bottom: 8px; }
    .card-meaning { font-size: 15px; line-height: 1.75; color: #fff; margin-bottom: 4px; }
    .card-action-text { font-size: 15px; line-height: 1.75; color: #fff; }

    /* Personal writing area */
    .card-note { width: 100%; }
    .card-note-open {
      width: 100%;
      display: flex; align-items: center; gap: 9px;
      min-height: 46px; padding: 10px 14px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px;
      color: rgba(255,255,255,.82);
      font: inherit; font-size: 14px; text-align: right;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background .2s, border-color .2s;
    }
    .card-note-open:active { background: rgba(255,255,255,.09); }
    .card-note-icon { display: inline-flex; flex: none; color: color-mix(in srgb, var(--deck-primary) 62%, #fff); }
    .card-note-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .card-note-open.has-note { color: #fff; border-color: color-mix(in srgb, var(--deck-primary) 45%, rgba(255,255,255,.2)); }
    .card-note-box {
      padding: 14px;
      background: rgba(0,0,0,.18);
      border: 1px solid color-mix(in srgb, var(--deck-primary) 45%, rgba(255,255,255,.2));
      border-radius: 16px;
    }
    .card-note-q { display: block; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 9px; }
    .card-note-text {
      width: 100%; min-height: 84px; max-height: 220px;
      display: block; resize: none;
      padding: 10px 12px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 12px;
      color: #fff; font: inherit; font-size: 16px; line-height: 1.6;
      text-align: right; outline: none;
    }
    .card-note-text:focus { border-color: color-mix(in srgb, var(--deck-primary) 70%, #fff); }
    .card-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
    .note-close {
      min-height: 44px; padding: 0 4px;
      background: none; border: 0; cursor: pointer;
      color: rgba(255,255,255,.65); font: inherit; font-size: 13px;
    }
    .card-note-status { margin: 0; min-height: 1em; font-size: 12px; color: rgba(255,255,255,.58); transition: color .2s; }
    .card-note-status.is-saved { color: color-mix(in srgb, var(--deck-primary) 62%, #fff); }

    /* Actions row */
    .card-actions-row {
      width: 100%; max-width: 352px;
      display: flex; flex-direction: column; gap: 10px;
      position: relative; z-index: 1;
      opacity: 0; transform: translateY(12px);
      transition: opacity .45s ease, transform .45s ease;
    }
    .card-actions-row.show { opacity: 1; transform: none; }
    .card-btn-primary {
      width: 100%; padding: 15px 16px;
      border: 1px solid rgba(255,255,255,.3);
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--deck-primary) 62%, #3a1848),
        color-mix(in srgb, var(--deck-primary) 38%, #160a22));
      display: flex; align-items: center; justify-content: center; gap: 9px;
      font-size: 16px;
    }
    .card-secondary-actions {
      display: flex; gap: 10px;
    }
    .card-sec-btn {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; gap: 5px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 16px;
      color: #fff; cursor: pointer;
      font-size: 13px; padding: 13px 8px;
      transition: background .2s, color .2s, transform .15s;
      backdrop-filter: blur(6px);
    }
    .card-sec-btn:active { transform: scale(.95); }
    .card-sec-btn.active { color: #e05070; border-color: rgba(224,80,112,.35); }
    .card-finish-msg {
      text-align: center; font-size: 13px;
      color: rgba(255,255,255,.78);
      padding: 6px 0 4px;
    }

    /* ── My Cards ───────────────────────────────────── */
    .mycards-view { padding: 60px 20px 24px; animation: slideUp .35s ease; }
    .section-title { font-size: 28px; font-weight: 800; margin-bottom: 20px; }
    .tabs-bar { display: flex; gap: 8px; margin-bottom: 20px; }
    .tab-btn {
      background: var(--surface2);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 100px;
      color: var(--text2); cursor: pointer;
      font-size: 14px; padding: 8px 18px;
      transition: background .2s, color .2s;
    }
    .tab-btn.active { background: rgba(255,255,255,.12); color: var(--text); border-color: rgba(255,255,255,.15); }
    .saved-card {
      background: var(--surface);
      border: 1px solid transparent;
      border-radius: var(--radius);
      padding: 18px 20px; margin-bottom: 12px;
    }
    .saved-card-deck { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
    .saved-card-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
    .saved-card-msg { font-size: 14px; color: var(--text2); line-height: 1.5; }
    .saved-open { cursor: pointer; outline: none; border-radius: 10px; }
    .saved-open:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
    .saved-note {
      display: flex; align-items: flex-start; gap: 8px;
      margin-top: 10px; padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.1);
      font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85);
    }
    .saved-note-icon { display: inline-flex; flex: none; margin-top: 3px; color: rgba(255,255,255,.7); }
    .saved-note-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    /* Favourites: compact rows with a quiet X in the top-left corner */
    .saved-card-fav { position: relative; padding: 13px 16px 14px; margin-bottom: 9px; }
    .saved-card-fav .saved-card-deck, .saved-card-fav .saved-card-title { padding-left: 30px; }
    .saved-card-fav .saved-card-deck { margin-bottom: 3px; }
    .saved-card-fav .saved-card-title { font-size: 16px; margin-bottom: 3px; }
    .saved-card-fav .saved-card-msg { font-size: 13.5px; line-height: 1.45; }
    .saved-card-fav .saved-note { margin-top: 8px; padding-top: 8px; }
    .saved-x {
      position: absolute; top: 2px; left: 2px;
      width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      padding: 0; background: none; border: 0;
      color: #8a82a3;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: color .15s;
    }
    .saved-x:hover, .saved-x:focus-visible { color: #b9b1d0; outline: none; }
    .saved-x:active { color: #d3cce6; }

    .undo-toast {
      position: fixed; z-index: 50;
      left: 50%; bottom: calc(var(--nav-h) + var(--safe-bottom) + 14px);
      transform: translate(-50%, 0);
      width: min(calc(100% - 32px), 360px);
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 10px 10px 10px 16px;
      background: #26223a;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      box-shadow: 0 10px 24px -8px rgba(0,0,0,.7);
      font-size: 14px; color: var(--text);
      animation: toastIn .22s ease;
    }
    .undo-toast.is-leaving { opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease; }
    .undo-btn {
      min-height: 36px; padding: 0 12px;
      background: none; border: 0; cursor: pointer;
      color: #c9a84c; font: inherit; font-weight: 600;
    }
    @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
    .empty-state {
      text-align: center; padding: 60px 20px;
      color: var(--text3);
    }
    .empty-icon { font-size: 48px; margin-bottom: 16px; opacity: .5; }
    .empty-title { font-size: 16px; line-height: 1.5; }

    /* ── Settings ───────────────────────────────────── */
    .settings-view { padding: 60px 20px 24px; animation: slideUp .35s ease; }
    .settings-group {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 4px 0; margin-bottom: 20px;
      border: 1px solid rgba(255,255,255,.05);
    }
    .settings-label {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1.5px;
      color: var(--text3); padding: 12px 20px 8px;
    }
    .setting-row {
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid rgba(255,255,255,.04);
    }
    .setting-row:last-child { border-bottom: none; }
    .setting-name { font-size: 16px; color: var(--text); }
    .toggle-btn {
      width: 50px; height: 28px;
      background: var(--surface2);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 100px;
      position: relative; cursor: pointer;
      transition: background .25s, border-color .25s;
    }
    .toggle-btn.on { background: #4a9e8a; border-color: #4a9e8a; }
    .toggle-knob {
      position: absolute; top: 3px; right: 3px;
      width: 20px; height: 20px;
      background: #fff; border-radius: 50%;
      transition: transform .25s;
      box-shadow: 0 1px 3px rgba(0,0,0,.3);
    }
    .toggle-btn.on .toggle-knob { transform: translateX(-22px); }
    .setting-action-btn {
      width: 100%; background: none;
      border: none; border-bottom: 1px solid rgba(255,255,255,.04);
      color: var(--text2); cursor: pointer;
      font-size: 16px; padding: 16px 20px;
      text-align: right; transition: color .15s;
    }
    .setting-action-btn:last-child { border-bottom: none; }
    .setting-action-btn:hover { color: var(--text); }
    .setting-action-btn.danger { color: #e05070; }
    .backup-box-wrap { padding: 4px 16px 6px; }
    .backup-box {
      width: 100%; display: block; resize: vertical; min-height: 84px;
      padding: 10px 12px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 12px;
      color: var(--text); font: inherit; font-size: 16px; line-height: 1.5;
      direction: ltr; text-align: left;
      outline: none;
    }
    .backup-box:focus { border-color: rgba(255,255,255,.3); }
    .backup-actions { display: flex; gap: 10px; margin-top: 10px; }
    .backup-go, .backup-pick {
      flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center;
      border-radius: 12px; cursor: pointer; font: inherit; font-size: 15px;
      -webkit-tap-highlight-color: transparent;
    }
    .backup-go { background: #4a9e8a; border: 0; color: #fff; font-weight: 600; }
    .backup-pick { background: none; border: 1px solid rgba(255,255,255,.18); color: var(--text2); }
    .backup-status { margin: 0; padding: 8px 20px 12px; font-size: 13px; line-height: 1.5; color: var(--text2); }
    .backup-status:empty { display: none; }
    .backup-status.is-error { color: #e0728a; }
    .settings-footer {
      text-align: center; color: var(--text3);
      font-size: 12px; line-height: 1.8;
      padding: 8px 0;
    }

    /* ── Responsive Typography ────────────────────── */
    .home-title  { font-size: 26px; font-weight: 800; line-height: 1.25; }
    .section-title { font-size: clamp(22px, 6vw, 30px); }
    .deck-detail-name { font-size: clamp(26px, 7vw, 34px); }
    .card-message { font-size: clamp(17px, 5vw, 20px); }
    .card-title-text { font-size: clamp(21px, 6vw, 25px); }

    /* ── Responsive Card ───────────────────────── */
    /* Keep a real card shape (2:3 ratio) at 75–82% of screen width —
       never a wide/flat rectangle. Content scrolls the page, not the card. */
    .card-scene   { width: 100%; max-width: 352px; }
    .card-flipper { aspect-ratio: 2/3; min-height: 0; }
    .card-front   { overflow: visible; max-height: none; }

    /* ── Responsive Layouts ─────────────────────── */
    /* Minimum touch targets everywhere */
    .nav-btn, .back-btn, .card-sec-btn,
    .card-action-btn, .tab-btn {
      min-height: 44px; min-width: 44px;
    }
    /* Side margins always at least 16px */
    .home-view, .mycards-view, .settings-view {
      padding-left:  max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
    @media (max-height: 700px) {
      .home-view { padding-top: 48px; }
      .home-header { margin-bottom: 12px; }
      .today-carousel { margin-bottom: 12px; }
      .today-card { padding: 16px 20px 22px; }
      .today-msg { font-size: 17px; margin: 10px 0 10px; }
      .deck-card { padding: 14px 16px; }
      .decks-grid { gap: 10px; }
    }
    /* Tablet: single column kept — deck cards always full width */
    /* Landscape mobile: allow scrolling, don't clip */
    @media (max-height: 500px) and (orientation: landscape) {
      #app { overflow-y: auto; }
      .shuffle-view, .deck-view { padding-top: 64px; }
      .card-view  { padding-top: 64px; }
    }

    /* ── Animations ──────────────────────────────────── */
    @keyframes fadeIn    { from { opacity: 0; }                          to { opacity: 1; } }
    @keyframes slideUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes slideIn   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
    @keyframes float     { 0%, 100% { transform: translateY(0); }       50% { transform: translateY(-10px); } }

    /* Apply smooth entry to every view */
    .home-view, .deck-view, .shuffle-view, .card-view,
    .mycards-view, .settings-view {
      animation: slideIn .38s cubic-bezier(0.25,0.46,0.45,0.94);
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
      /* Ring: no heartbeat loop, just a calm static glow */
      .logo-ring {
        animation: none !important;
        box-shadow: 0 0 20px 4px rgba(220,214,238,.55), 0 0 56px 16px rgba(130,80,180,.32) !important;
      }
      .shooting-star { display: none; }
      .orbit-ring, .orb-aura, .orb-particles { animation: none !important; }
      .splash-stars,
      .sparkle,
      .splash-touch,
      .orb-glow-near,
      .particle {
        animation: none !important;
      }
      .splash-touch { opacity: .92 !important; }
      .splash-stars { opacity: 1 !important; transform: none !important; }
      .sparkle { opacity: .7 !important; transform: none !important; }
      .today-track { scroll-behavior: auto !important; }
    }
    .splash.reduce-motion .orbit-rings,
    .splash.reduce-motion .orbit-ring,
    .splash.reduce-motion .orb-aura,
    .splash.reduce-motion .orb-particles,
    .splash.reduce-motion .orb-ripple,
    .splash.reduce-motion .logo-title,
    .splash.reduce-motion .logo-sub,
    .splash.reduce-motion .splash-divider { animation: none !important; }
    .splash.reduce-motion .shooting-star { display: none; }
    .splash.reduce-motion .splash-stars,
    .splash.reduce-motion .sparkle,
    .splash.reduce-motion .splash-touch,
    .splash.reduce-motion .logo-ring,
    .splash.reduce-motion .orb-glow-near,
    .splash.reduce-motion .particle {
      animation: none;
    }
    .splash.reduce-motion .splash-touch { opacity: .92; }
    .splash.reduce-motion .logo-ring {
      box-shadow: 0 0 20px 4px rgba(220,214,238,.55), 0 0 56px 16px rgba(130,80,180,.32);
    }