:root {
      --red: #ee1c25;
      --purple: #7a2ee6;
      --ink: #222;
      --gray: #b0b0b0;
      --bg: #f6f6f6;
      --card: #fff;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      background: #cfcfcf;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }
    button, a { font-family: inherit; }
    button { border: 0; background: none; cursor: pointer; }
    img { display: block; max-width: 100%; }

    .stage {
      width: min(100%, 420px);
      min-height: 100%;
      margin: 0 auto;
      background: var(--bg);
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 40px rgba(0, 0, 0, .18);
    }

    .compliance {
      padding: 6px 10px 0;
      font-size: 10px;
      line-height: 1.45;
      color: #9a9a9a;
      text-align: center;
    }
    .compliance button {
      color: inherit;
      font-size: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .compliance .sep { margin: 0 3px; opacity: .7; }

    .banner {
      position: relative;
      margin-top: 6px;
      padding: 16px 8px 14px;
      overflow: hidden;
      text-align: center;
      background:
        radial-gradient(circle at 8% 78%, rgba(255, 255, 255, .22), transparent 26%),
        radial-gradient(circle at 92% 24%, rgba(255, 214, 90, .35), transparent 24%),
        linear-gradient(180deg, #d24bff 0%, #a020f0 46%, #7a12e6 100%);
    }
    .burst {
      position: absolute;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background:
        radial-gradient(circle, #fff 0 2px, transparent 3px),
        repeating-conic-gradient(from 0deg, #ffe566 0 8deg, transparent 8deg 18deg);
      filter: drop-shadow(0 0 6px rgba(255, 220, 80, .8));
      animation: spark 1.6s ease-in-out infinite;
    }
    .burst.left { left: 8px; bottom: 18px; }
    .burst.right { right: 10px; top: 16px; animation-delay: .4s; }
    .burst.mid { right: 36px; bottom: 10px; width: 36px; height: 36px; opacity: .85; }
    @keyframes spark {
      0%, 100% { transform: scale(.92) rotate(0deg); opacity: .85; }
      50% { transform: scale(1.08) rotate(12deg); opacity: 1; }
    }
    .banner h1 {
      position: relative;
      z-index: 1;
      max-width: 100%;
      font-size: 22px;
      font-weight: 900;
      line-height: 1.25;
      text-align: center;
    }
    .banner .gold,
    .banner .white { display: inline; }
    .banner .gold {
      color: #ffe14a;
      text-shadow:
        -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
        0 2px 0 #6a18c8;
    }
    .banner .white {
      color: #fff;
      text-shadow:
        -1px -1px 0 #5b14c4, 1px -1px 0 #5b14c4, -1px 1px 0 #5b14c4, 1px 1px 0 #5b14c4,
        0 3px 0 #3c0b86;
    }
    .pill {
      position: relative;
      z-index: 1;
      display: inline-block;
      margin-top: 12px;
      padding: 7px 18px;
      border-radius: 999px;
      background: linear-gradient(180deg, #6a2ad8, #4c14b0);
      color: #fff;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: .5px;
      box-shadow: 0 4px 0 #3a0d88, inset 0 1px 0 rgba(255,255,255,.35);
    }
    .fx {
      padding: 8px 12px 2px;
      color: #8d8d8d;
      font-size: 11px;
      line-height: 1.5;
      text-align: center;
    }
    .fx select {
      margin: 0 4px;
      padding: 1px 4px;
      border: 1px solid #d7c4ff;
      border-radius: 4px;
      background: #f7f1ff;
      color: var(--purple);
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
    }

    .list {
      position: relative;
      z-index: 2;
      padding: 8px 8px 108px;
    }

    .card {
      display: flex;
      gap: 10px;
      background: var(--card);
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 8px;
      box-shadow: 0 1px 4px rgba(80, 0, 120, .06);
    }
    .thumb {
      position: relative;
      width: 112px;
      height: 112px;
      flex: none;
      border-radius: 4px;
      overflow: hidden;
      background: #f3f3f3;
    }
    .thumb img,
    .thumb .art {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .rank {
      position: absolute;
      left: 4px;
      top: 4px;
      z-index: 1;
      width: 34px;
      height: 36px;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      line-height: 1;
      background: linear-gradient(#ffd84a, #f5a400);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    }
    .rank b { font-size: 9px; letter-spacing: .4px; }
    .rank strong { margin-top: 1px; font-size: 16px; }
    .cap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      padding: 10px 4px 3px;
      background: linear-gradient(transparent, rgba(0, 0, 0, .62));
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      text-align: center;
      line-height: 1.2;
    }
    .info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      min-height: 112px;
    }
    .title {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 650;
      color: #1a1a1a;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .ship {
      display: inline-block;
      margin-right: 4px;
      padding: 0 4px 1px;
      border-radius: 3px;
      background: linear-gradient(180deg, #9a46ff, #7428e8);
      color: #fff;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.45;
      vertical-align: 1px;
    }
    .buy {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .hint {
      color: var(--purple);
      font-size: 13px;
      font-weight: 750;
      line-height: 1.2;
    }
    .market {
      margin-top: 2px;
      color: var(--gray);
      font-size: 12px;
      line-height: 1.2;
      text-decoration: line-through;
    }
    .sale {
      margin-top: 1px;
      color: var(--purple);
      font-weight: 800;
      line-height: 1;
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
    }
    .sale .cur { font-size: 15px; margin-right: 1px; }
    .sale .int { font-size: 26px; letter-spacing: -0.5px; }
    .sale .dec { font-size: 16px; }
    .sale .cny {
      margin-left: 3px;
      color: var(--purple);
      font-size: 13px;
      font-weight: 750;
    }
    .grab {
      flex: none;
      height: 36px;
      padding: 0 12px;
      border-radius: 6px;
      background: var(--red);
      color: #fff;
      font-size: 15px;
      font-weight: 750;
      letter-spacing: .5px;
      box-shadow: 0 2px 0 #c41018;
    }
    .card:first-child .grab { animation: breath 1.4s ease-in-out infinite; }
    @keyframes breath {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    .dock {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      width: min(100%, 420px);
      z-index: 20;
      background: rgba(255, 255, 255, .96);
      padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
      box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
    }
    .progress-btn {
      position: relative;
      width: 100%;
      height: 48px;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid var(--red);
      background: #fff;
      color: var(--red);
      font-size: 18px;
      font-weight: 750;
    }
    .progress-btn .fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0%;
      background: var(--red);
      transition: width .18s linear;
    }
    .progress-btn .label {
      position: relative;
      z-index: 1;
    }
    .progress-btn.running .label { color: #fff; }

    .mask {
      position: fixed;
      inset: 0;
      z-index: 40;
      background: rgba(0, 0, 0, .55);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .mask.show { display: flex; }
    .modal {
      width: min(100%, 320px);
      background: linear-gradient(#fff6f4, #fff 38%);
      border-radius: 18px;
      padding: 22px 18px 18px;
      text-align: center;
      position: relative;
      box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
    }
    .modal h2 {
      color: var(--red);
      font-size: 26px;
      font-weight: 800;
    }
    .modal .count {
      margin-top: 4px;
      color: var(--red);
      font-size: 13px;
      font-weight: 650;
    }
    .modal .shot {
      width: 112px;
      height: 112px;
      margin: 14px auto 8px;
      border-radius: 8px;
      object-fit: cover;
      background: #f6f6f6;
    }
    .modal .name {
      font-size: 13px;
      color: #333;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .cta {
      position: relative;
      width: 100%;
      height: 48px;
      margin-top: 16px;
      padding: 0 36px 0 16px;
      border-radius: 24px;
      color: #fff;
      font-size: 18px;
      font-weight: 800;
      background: linear-gradient(180deg, #ffd15a, #ff9f1a);
      box-shadow: 0 6px 0 #e07a00, 0 10px 16px rgba(224, 122, 0, .35);
    }
    .cta .hand {
      position: absolute;
      right: 10px;
      bottom: -14px;
      font-size: 26px;
      filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
      animation: poke 1s ease-in-out infinite;
    }
    @keyframes poke {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(-4px, -3px); }
    }
    .modal .sub {
      margin-top: 12px;
      color: #ff7a00;
      font-size: 13px;
      font-weight: 650;
    }
    .modal .demo-note {
      margin-top: 8px;
      color: #b0b0b0;
      font-size: 11px;
    }
    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 0;
      background: #f3f3f3;
      color: #666;
      font-size: 18px;
      line-height: 28px;
    }

    .sheet-mask {
      position: fixed;
      inset: 0;
      z-index: 30;
      background: rgba(0, 0, 0, .45);
      display: none;
    }
    .sheet-mask.show { display: block; }
    .sheet {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: min(100%, 420px);
      background: #fff;
      border-radius: 16px 16px 0 0;
      padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
      max-height: 70%;
      overflow: auto;
    }
    .sheet h3 { font-size: 16px; margin-bottom: 8px; }
    .sheet p { font-size: 13px; color: #555; line-height: 1.7; }
    .sheet .ok {
      margin-top: 14px;
      width: 100%;
      height: 40px;
      border-radius: 20px;
      background: var(--red);
      color: #fff;
      font-size: 15px;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 96px;
      transform: translateX(-50%) translateY(8px);
      width: min(86%, 360px);
      background: rgba(32, 32, 32, .92);
      color: #fff;
      font-size: 13px;
      line-height: 1.5;
      text-align: center;
      border-radius: 8px;
      padding: 10px 12px;
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transition: .2s ease;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    .wheel-mask {
      position: fixed;
      inset: 0;
      z-index: 70;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: rgba(0, 0, 0, .55);
      padding: 24px 16px;
    }
    .wheel-mask.show { display: flex; }
    .wheel-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, .85);
      color: #fff;
      font-size: 20px;
      line-height: 28px;
    }
    .wheel-stage {
      position: relative;
      width: min(86vw, 340px);
      height: min(86vw, 340px);
    }
    .wheel-pin {
      position: absolute;
      z-index: 3;
      left: 50%;
      top: -8px;
      width: 34px;
      height: 48px;
      transform: translateX(-50%);
      filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25));
    }
    .wheel-rotor {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      transition: transform 4.2s cubic-bezier(.12, .7, .08, 1);
      filter: drop-shadow(0 10px 18px rgba(40, 0, 80, .35));
    }
    .wheel-rotor svg { width: 100%; height: 100%; display: block; }
    .wheel-hit {
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: 50%;
      background: transparent;
    }
    .wheel-tip {
      margin-top: 16px;
      color: #fff;
      font-size: 16px;
      font-weight: 750;
      text-align: center;
    }
    .wheel-claim {
      margin-top: 12px;
      height: 42px;
      padding: 0 28px;
      border-radius: 21px;
      background: linear-gradient(180deg, #ffd15a, #ff9f1a);
      color: #fff;
      font-size: 16px;
      font-weight: 800;
      box-shadow: 0 4px 0 #e07a00;
    }
    .wheel-claim[hidden], .wheel-mask[hidden] { display: none; }