/* ═══════════════════════════════════════════════════════════════════════
       SHOP MODAL (preserved from original)
       ═══════════════════════════════════════════════════════════════════════ */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.8);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s, visibility 0.25s;
      padding: 16px;
    }
    .modal-overlay.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .modal-box {
      background: var(--bg-elevated);
      border-radius: var(--radius-xl);
      padding: 24px;
      width: 100%;
      max-width: 360px;
      border: 1px solid var(--border);
    }
    .modal-box__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .modal-box__title { font-size: 20px; font-weight: 700; }
    .modal-close-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: var(--text-secondary);
    }
    .relationship-radar-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(0,0,0,0.76);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .relationship-radar-dialog {
      --rel-radar-accent: #67e8f9;
      --rel-radar-accent-2: #f472b6;
      width: min(940px, 96vw);
      max-height: min(820px, 90vh);
      overflow: auto;
      color: #eff7f6;
      background:
        radial-gradient(circle at 18% 4%, rgba(103,232,249,0.14), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(244,114,182,0.13), transparent 36%),
        linear-gradient(180deg, rgba(11,18,22,0.98), rgba(7,10,14,0.98));
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 18px;
      box-shadow: 0 28px 90px rgba(0,0,0,0.54);
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.22) transparent;
    }
    .relationship-radar-dialog.is-loading {
      min-height: 260px;
    }
    .relationship-radar-header {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px 14px;
      background: linear-gradient(180deg, rgba(8,12,16,0.98), rgba(8,12,16,0.86));
      border-bottom: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .relationship-radar-kicker {
      margin-bottom: 4px;
      color: rgba(190,255,239,0.7);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .relationship-radar-header h2 {
      margin: 0;
      color: #fff;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 0;
    }
    .relationship-radar-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .relationship-radar-refresh {
      height: 34px;
      padding: 0 14px;
      border-radius: 12px;
      border: 1px solid rgba(103,232,249,0.34);
      background: rgba(103,232,249,0.1);
      color: #ecfffb;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0;
    }
    .relationship-radar-close {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.84);
      font-size: 22px;
      line-height: 1;
    }
    .relationship-radar-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding: 16px 20px 0;
    }
    .relationship-radar-summary > div {
      min-height: 64px;
      padding: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      background: rgba(255,255,255,0.045);
    }
    .relationship-radar-summary span,
    .relationship-radar-source span {
      display: block;
      margin-bottom: 4px;
      color: rgba(226,244,241,0.54);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .relationship-radar-summary strong {
      color: #fff;
      font-size: 14px;
      line-height: 1.25;
    }
    .relationship-radar-body {
      display: grid;
      grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
      gap: 18px;
      padding: 18px 20px 12px;
      align-items: start;
    }
    .relationship-radar-visual {
      display: grid;
      gap: 12px;
      justify-items: center;
    }
    .relationship-radar-svg {
      width: min(100%, 360px);
      aspect-ratio: 1;
      overflow: visible;
      filter: drop-shadow(0 18px 38px rgba(0,0,0,0.26));
    }
    .relationship-radar-grid__ring {
      fill: none;
      stroke: rgba(255,255,255,0.12);
      stroke-width: 1;
    }
    .relationship-radar-grid__spoke {
      stroke: rgba(255,255,255,0.1);
      stroke-width: 1;
    }
    .relationship-radar-shape {
      fill: url(#relationshipRadarGradient);
      fill-opacity: 0.38;
      stroke: none;
      transform-origin: 160px 160px;
      animation: relationship-radar-pop 0.42s ease-out;
    }
    .relationship-radar-line {
      fill: none;
      stroke: url(#relationshipRadarGradient);
      stroke-width: 3;
      stroke-linejoin: round;
      stroke-linecap: round;
      filter: drop-shadow(0 0 10px rgba(103,232,249,0.28));
    }
    .relationship-radar-dot {
      fill: #fff;
      stroke: var(--rel-radar-accent);
      stroke-width: 2;
    }
    .relationship-radar-label {
      fill: rgba(239,247,246,0.82);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
    }
    @keyframes relationship-radar-pop {
      0% { opacity: 0.2; transform: scale(0.92); }
      100% { opacity: 1; transform: scale(1); }
    }
    .relationship-radar-source {
      width: 100%;
      padding: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      background: rgba(255,255,255,0.045);
    }
    .relationship-radar-source strong {
      display: block;
      color: #fff;
      font-size: 14px;
      margin-bottom: 4px;
    }
    .relationship-radar-source small {
      display: block;
      color: rgba(226,244,241,0.62);
      font-size: 12px;
      line-height: 1.45;
    }
    .relationship-axis-list {
      display: grid;
      gap: 8px;
    }
    .relationship-axis-row {
      display: grid;
      grid-template-columns: minmax(126px, 1fr) minmax(72px, 0.9fr) 48px 54px;
      gap: 10px;
      align-items: center;
      min-height: 54px;
      padding: 9px 10px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
    }
    .relationship-axis-row__label {
      min-width: 0;
    }
    .relationship-axis-row__label span {
      display: block;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.2;
    }
    .relationship-axis-row__label small {
      display: block;
      margin-top: 2px;
      color: rgba(226,244,241,0.52);
      font-size: 11px;
      line-height: 1.25;
    }
    .relationship-axis-row__meter {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
    }
    .relationship-axis-row__meter span {
      display: block;
      height: 100%;
      min-width: 2px;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--rel-radar-accent), var(--rel-radar-accent-2));
      transition: width 0.28s ease;
    }
    .relationship-axis-row strong {
      color: #fff;
      font-size: 14px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .relationship-delta {
      justify-self: end;
      min-width: 48px;
      padding: 3px 7px;
      border-radius: 999px;
      font-size: 12px;
      font-style: normal;
      font-weight: 900;
      text-align: center;
      font-variant-numeric: tabular-nums;
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.72);
    }
    .relationship-delta.is-positive {
      background: rgba(74,222,128,0.12);
      color: #86efac;
    }
    .relationship-delta.is-negative {
      background: rgba(248,113,113,0.13);
      color: #fb7185;
    }
    .relationship-delta.is-neutral {
      color: rgba(255,255,255,0.62);
    }
    .relationship-patterns {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 0 20px 20px;
    }
    .relationship-pattern {
      padding: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      background: rgba(255,255,255,0.045);
    }
    .relationship-pattern strong {
      display: block;
      margin-bottom: 5px;
      color: var(--rel-radar-accent);
      font-size: 14px;
      line-height: 1.25;
    }
    .relationship-pattern span {
      display: block;
      color: rgba(226,244,241,0.66);
      font-size: 12px;
      line-height: 1.45;
    }
    .relationship-radar-loading,
    .relationship-radar-error {
      padding: 38px 20px 46px;
      color: rgba(239,247,246,0.74);
      font-size: 14px;
      text-align: center;
    }
    @media (max-width: 760px) {
      .relationship-radar-overlay {
        align-items: stretch;
        padding: 0;
      }
      .relationship-radar-dialog {
        width: 100vw;
        max-height: 100dvh;
        border-radius: 0;
        border-left: none;
        border-right: none;
      }
      .relationship-radar-header {
        padding: 14px 14px 12px;
      }
      .relationship-radar-header h2 {
        font-size: 20px;
      }
      .relationship-radar-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 14px 14px 0;
      }
      .relationship-radar-body {
        grid-template-columns: 1fr;
        padding: 14px;
      }
      .relationship-radar-svg {
        width: min(100%, 330px);
      }
      .relationship-axis-row {
        grid-template-columns: minmax(0, 1fr) 46px 52px;
        gap: 8px;
      }
      .relationship-axis-row__meter {
        grid-column: 1 / -1;
        grid-row: 2;
      }
      .relationship-axis-row__label small {
        max-width: 230px;
      }
      .relationship-patterns {
        grid-template-columns: 1fr;
        padding: 0 14px 18px;
      }
    }
    @media (max-width: 390px) {
      .relationship-radar-summary {
        grid-template-columns: 1fr;
      }
      .relationship-radar-refresh {
        padding: 0 10px;
      }
      .relationship-axis-row {
        grid-template-columns: minmax(0, 1fr) 44px 50px;
      }
      .relationship-radar-label {
        font-size: 11px;
      }
    }
    .shop-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .shop-item {
      background: rgba(255,255,255,0.05);
      border-radius: var(--radius-lg);
      padding: 16px;
      text-align: center;
      cursor: pointer;
      border: 1px solid var(--border);
      transition: transform 0.1s, background 0.2s;
    }
    .shop-item:active { transform: scale(0.96); }
    .shop-item:hover { background: rgba(255,255,255,0.1); }
    .shop-item.best-value {
      grid-column: span 2;
      background: linear-gradient(135deg, #ef4444, #f97316);
      border: none;
      position: relative;
      margin-top: 8px;
    }
    .shop-badge {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      color: #ef4444;
      font-size: 10px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 12px;
    }
    .shop-item__coins { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
    .shop-item__pack { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
    .shop-item__price { font-size: 14px; color: #4ade80; font-weight: 600; }
    .best-value .shop-item__price { color: rgba(255,255,255,0.95); }

    
/* ═══════════════════════════════════════════════════════════════════════
       VIP PAYWALL
       ═══════════════════════════════════════════════════════════════════════ */
    .vip-modal {
      align-items: stretch;
      justify-content: center;
      padding: max(12px, var(--safe-top)) 12px max(12px, var(--safe-bottom));
      background:
        radial-gradient(circle at 50% 16%, rgba(255,141,161,0.18), transparent 28%),
        radial-gradient(circle at 28% 38%, rgba(156,183,255,0.12), transparent 30%),
        rgba(3, 4, 8, 0.86);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .vip-sheet {
      position: relative;
      width: min(100%, 460px);
      max-height: 100%;
      border-radius: 28px;
      overflow: hidden;
      background:
        radial-gradient(circle at top, rgba(255,255,255,0.07), transparent 36%),
        linear-gradient(180deg, rgba(22,23,28,0.96), rgba(11,12,16,0.98));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 28px 70px rgba(0,0,0,0.55);
    }
    .vip-sheet__scroll {
      position: relative;
      max-height: min(90vh, 860px);
      overflow-y: auto;
      padding: 22px 18px 20px;
      scrollbar-width: none;
    }
    .vip-sheet__scroll::-webkit-scrollbar { display: none; }
    .vip-sheet__glow {
      position: absolute;
      inset: -60px -20px auto;
      height: 280px;
      background:
        radial-gradient(circle at 50% 30%, rgba(255,141,161,0.25), transparent 34%),
        radial-gradient(circle at 34% 52%, rgba(156,183,255,0.16), transparent 30%);
      pointer-events: none;
      filter: blur(8px);
    }
    .vip-sheet__close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 3;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .vip-hero {
      position: relative;
      padding: 18px 6px 16px;
      text-align: center;
    }
    .vip-hero__eyebrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      margin-bottom: 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.78);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .vip-hero__title {
      font-size: clamp(30px, 8vw, 38px);
      line-height: 1;
      letter-spacing: -0.04em;
      margin-bottom: 10px;
    }
    .vip-hero__subtitle {
      max-width: 320px;
      margin: 0 auto;
      font-size: 14px;
      line-height: 1.55;
      color: rgba(255,255,255,0.68);
    }
    .vip-status-card,
    .vip-promo,
    .vip-benefits {
      position: relative;
      margin-top: 16px;
      padding: 16px;
      border-radius: 22px;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .vip-status-card {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: linear-gradient(135deg, rgba(243,214,164,0.12), rgba(255,141,161,0.08));
      border-color: rgba(243,214,164,0.18);
    }
    .vip-status-card.is-visible { display: flex; }
    .vip-status-card__eyebrow {
      font-size: 11px;
      color: rgba(255,255,255,0.56);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 6px;
    }
    .vip-status-card__plan {
      font-size: 18px;
      font-weight: 700;
    }
    .vip-status-card__expiry {
      font-size: 13px;
      color: rgba(255,255,255,0.66);
      margin-top: 4px;
    }
    .vip-status-card__badge {
      flex-shrink: 0;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff5dc;
    }
    .vip-promo__head,
    .vip-benefits__head,
    .vip-plans__head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .vip-section-title {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .vip-section-copy {
      font-size: 12px;
      color: rgba(255,255,255,0.56);
    }
    .vip-promo__row {
      display: flex;
      gap: 10px;
      align-items: stretch;
    }
    .vip-promo__input {
      flex: 1;
      min-width: 0;
      height: 48px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      color: #fff;
      padding: 0 14px;
      font-size: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      outline: none;
    }
    .vip-promo__input:focus {
      border-color: rgba(243,214,164,0.28);
      box-shadow: 0 0 0 3px rgba(243,214,164,0.08);
    }
    .vip-promo__apply {
      min-width: 108px;
      padding: 0 16px;
      border-radius: 16px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .vip-promo__apply:active { transform: scale(0.98); }
    .vip-promo__status {
      min-height: 18px;
      margin-top: 10px;
      font-size: 12px;
      color: rgba(255,255,255,0.58);
    }
    .vip-promo__status.is-pending { color: #d9c8a2; }
    .vip-promo__status.is-success { color: #8ce0b3; }
    .vip-promo__status.is-error { color: #ff9aa8; }
    .vip-plans {
      position: relative;
      margin-top: 16px;
      padding: 0;
    }
    .vip-plans__grid {
      display: grid;
      gap: 12px;
    }
    .vip-plan-card {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: 24px;
      padding: 18px 18px 16px;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
      cursor: pointer;
      text-align: left;
    }
    .vip-plan-card::before {
      content: '';
      position: absolute;
      inset: auto -15% -40% 50%;
      height: 120px;
      background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 62%);
      opacity: 0;
      transform: translateX(-50%);
      transition: opacity 0.22s ease;
    }
    .vip-plan-card:hover,
    .vip-plan-card.is-selected {
      transform: translateY(-1px);
      border-color: rgba(243,214,164,0.22);
      background: linear-gradient(135deg, rgba(243,214,164,0.12), rgba(255,141,161,0.06) 52%, rgba(156,183,255,0.08));
      box-shadow: 0 16px 38px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .vip-plan-card:hover::before,
    .vip-plan-card.is-selected::before { opacity: 1; }
    .vip-plan-card.is-selected {
      box-shadow: 0 18px 42px rgba(0,0,0,0.34), 0 0 0 1px rgba(243,214,164,0.08), inset 0 1px 0 rgba(255,255,255,0.09);
    }
    .vip-plan-card__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .vip-plan-card__name {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.03em;
    }
    .vip-plan-card__subcopy {
      margin-top: 5px;
      font-size: 12px;
      color: rgba(255,255,255,0.58);
    }
    .vip-plan-card__tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.09);
      color: rgba(255,255,255,0.92);
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .vip-plan-card__pricing {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
    }
    .vip-plan-card__stars {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.05em;
      line-height: 1;
    }
    .vip-plan-card__stars span {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
      color: rgba(255,255,255,0.68);
      margin-left: 6px;
    }
    .vip-plan-card__usd {
      text-align: right;
      font-size: 12px;
      color: rgba(255,255,255,0.64);
      line-height: 1.45;
    }
    .vip-plan-card__check {
      position: absolute;
      right: 14px;
      bottom: 14px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.06);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: transparent;
      transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }
    .vip-plan-card.is-selected .vip-plan-card__check {
      color: #0f1116;
      background: linear-gradient(135deg, var(--vip-champagne), var(--vip-rose));
      border-color: transparent;
    }
    .vip-cta {
      width: 100%;
      margin-top: 18px;
      min-height: 56px;
      border-radius: 18px;
      background: linear-gradient(135deg, #fff6e0, #f1dcc2 42%, #f7c7d2);
      color: #111318;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.02em;
      box-shadow: 0 20px 36px rgba(0,0,0,0.28);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .vip-cta:active {
      transform: scale(0.99);
      box-shadow: 0 14px 26px rgba(0,0,0,0.26);
    }
    .vip-cta:disabled {
      opacity: 0.56;
      cursor: default;
      transform: none;
      box-shadow: 0 10px 24px rgba(0,0,0,0.2);
    }
    .vip-cta__subcopy {
      margin-top: 10px;
      text-align: center;
      font-size: 12px;
      color: rgba(255,255,255,0.54);
      line-height: 1.45;
    }
    .vip-benefits__list {
      display: grid;
      gap: 10px;
      list-style: none;
    }
    .vip-benefits__item {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 10px;
      align-items: start;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .vip-benefits__item:last-child { border-bottom: none; padding-bottom: 0; }
    .vip-benefits__icon {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #fff1d3;
    }
    .vip-benefits__title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 3px;
    }
    .vip-benefits__text {
      font-size: 12px;
      line-height: 1.45;
      color: rgba(255,255,255,0.58);
    }
    .vip-footnote {
      margin-top: 16px;
      text-align: center;
      font-size: 11px;
      line-height: 1.5;
      color: rgba(255,255,255,0.42);
    }


    /* ═══════════════════════════════════════════════════════════════════════
       RELATIONSHIP SCREEN — Premium Battle-Pass v5
       Reward showcase rebuild
       ═══════════════════════════════════════════════════════════════════════ */

    #relModal {
      background: rgba(0,0,0,0.97);
    }
    #relModal .modal-box {
      padding: 0;
      max-width: none;
      border: none;
    }

    @keyframes rel-frame-breathe {
      0%, 100% { box-shadow: 0 0 14px rgba(168, 85, 247, 0.12); }
      50% { box-shadow: 0 0 24px rgba(168, 85, 247, 0.32), 0 0 8px rgba(236, 72, 153, 0.12); }
    }

    .rel-modal-content {
      --rel-mobile-timeline-top-gap: 18px;
      --rel-mobile-bottom-buffer: 140px;
      --rel-progress-start: #8b5cf6;
      --rel-progress-mid: #a855f7;
      --rel-progress-end: #ec4899;
      --rel-progress-border: rgba(176, 108, 248, 0.62);
      --rel-progress-border-soft: rgba(176, 108, 248, 0.18);
      --rel-progress-glow: rgba(168, 85, 247, 0.18);
      /* ── Layout system tokens ── */
      --rel-frame-pad-x: 24px;
      --rel-frame-pad-y: 16px;
      --rel-frame-radius: 28px;
      --rel-section-gap: 14px;
      --rel-node-size: 36px;
      --rel-spine-h: 32px;
      --rel-node-frame-gap: 12px;
      --rel-frame-top-first: -10px;  /* frame wraps circle: 10px above node top */
      --rel-frame-top-rest: 22px;    /* spine(32) - 10px overlap = circle inside frame */
      --rel-btn-h: 44px;
      --rel-btn-radius: 22px;
      --rel-skip-h: 38px;
      --rel-skip-radius: 19px;
      --rel-tile-min-h: 92px;
      --rel-tile-min-h-minimal: 88px;
      --rel-tracks-gap: 14px;
      --rel-content-inset: 52px;     /* horizontal inset for tracks/actions inside frame */
      background: #070710;
      background-image:
        radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,0.48) 0%, transparent 100%),
        radial-gradient(1px 1px at 28% 42%, rgba(211,188,255,0.36) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 12%, rgba(255,255,255,0.54) 0%, transparent 100%),
        radial-gradient(0.8px 0.8px at 72% 35%, rgba(178,158,255,0.32) 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 55%, rgba(255,255,255,0.38) 0%, transparent 100%),
        radial-gradient(1.3px 1.3px at 35% 68%, rgba(255,255,255,0.42) 0%, transparent 100%),
        radial-gradient(0.7px 0.7px at 62% 82%, rgba(210,170,255,0.22) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.28) 0%, transparent 100%),
        radial-gradient(ellipse 620px 380px at 50% -10%, rgba(92,46,148,0.28) 0%, transparent 72%),
        radial-gradient(ellipse 360px 260px at 82% 36%, rgba(154,82,54,0.12) 0%, transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
      color: #f4f5fb;
      padding: 0;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
    }
    .rel-modal-content::-webkit-scrollbar { display: none; }

    .rel-coin-img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      vertical-align: middle;
      flex-shrink: 0;
    }

    .rel-sheet-handle {
      width: 36px;
      height: 4px;
      background: rgba(255,255,255,0.18);
      border-radius: 2px;
      margin: 0 auto 8px;
      flex-shrink: 0;
    }

    .rel-header {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px 12px 8px;
      background: linear-gradient(180deg, rgba(7,7,16,0.98), rgba(7,7,16,0.88));
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .rel-header__left {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .rel-header__close {
      width: 36px;
      height: 36px;
      border: none;
      background: none;
      color: rgba(255,255,255,0.62);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .rel-header__title {
      font-size: 17px;
      font-weight: 650;
      color: rgba(255,255,255,0.92);
      white-space: nowrap;
    }
    .rel-header__balance {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px 6px 8px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 650;
      color: #fff;
      cursor: pointer;
      flex-shrink: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.2);
      -webkit-tap-highlight-color: transparent;
    }
    .rel-header__balance .rel-coin-img { width: 20px; height: 20px; }

    .rel-timeline {
      position: relative;
      padding: 18px 10px 34px;
    }

    .rel-tier {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding-bottom: 14px;
    }
    .rel-tier > * {
      position: relative;
      z-index: 1;
    }
    .rel-tier::after {
      content: '';
      position: absolute;
      top: var(--rel-frame-top-first);
      bottom: 0;
      left: 50%;
      width: min(calc(100% - 34px), 548px);
      transform: translateX(-50%);
      border-radius: var(--rel-frame-radius);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 0 0 1px rgba(255,255,255,0.02);
      pointer-events: none;
      z-index: 0;
    }
    .rel-tier:not(:first-child)::after {
      top: var(--rel-frame-top-rest);
    }

    /* ── Passed tier: gradient border + breathing ── */
    .rel-tier--passed::after {
      border: 1.5px solid transparent;
      background:
        linear-gradient(#070710, #070710) padding-box,
        linear-gradient(135deg, var(--rel-progress-start), var(--rel-progress-mid), var(--rel-progress-end)) border-box;
      box-shadow: 0 0 14px rgba(168, 85, 247, 0.12);
      animation: rel-frame-breathe 5s ease-in-out infinite;
    }

    /* ── Current tier: thicker gradient border + stronger glow ── */
    .rel-tier--current {
      padding-bottom: 18px;
    }
    .rel-tier--current::after {
      top: calc(var(--rel-frame-top-first) + 4px);
      bottom: 0;
      width: min(calc(100% - 42px), 528px);
      border: 2px solid transparent;
      background:
        linear-gradient(#070710, #070710) padding-box,
        linear-gradient(135deg, var(--rel-progress-start), var(--rel-progress-mid), var(--rel-progress-end)) border-box;
      box-shadow: 0 0 20px rgba(168, 85, 247, 0.25), 0 0 6px rgba(236, 72, 153, 0.1);
      animation: rel-frame-breathe 3.5s ease-in-out infinite;
    }
    .rel-tier--current:not(:first-child)::after {
      top: calc(var(--rel-frame-top-rest) + 4px);
    }
    .rel-tier--current .rel-tier__header {
      padding-top: 16px;
      padding-left: 28px;
      padding-right: 28px;
    }
    .rel-tier--current .rel-tracks,
    .rel-tier--current .rel-track-actions,
    .rel-tier--current .rel-skip,
    .rel-tier--current .rel-milestone-banner {
      width: calc(100% - var(--rel-content-inset) - 20px);
      max-width: 440px;
    }

    .rel-spine-seg {
      width: 2px;
      height: 32px;
      background: rgba(255,255,255,0.06);
      transition: background 0.4s;
      flex-shrink: 0;
    }
    .rel-spine-seg--lit {
      background: linear-gradient(180deg, var(--rel-progress-start), var(--rel-progress-mid) 54%, rgba(236,72,153,0.28));
      box-shadow: 0 0 12px var(--rel-progress-glow);
    }

    .rel-spine-node {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      transition: all 0.3s;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
    }
    .rel-tier--current .rel-spine-node {
      margin-top: 4px;
    }
    .rel-spine-node span,
    .rel-spine-node svg {
      display: block;
      line-height: 1;
      transform: translateY(-1px);
    }
    .rel-node--done {
      background: linear-gradient(135deg, rgba(122,74,212,0.44), rgba(86,48,164,0.18));
      border: 2px solid rgba(182,130,255,0.4);
      color: #ead8ff;
      box-shadow: 0 10px 24px rgba(54,24,96,0.22);
    }
    .rel-node--active {
      background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(236,72,153,0.22));
      border: 2px solid rgba(226,186,255,0.58);
      color: #fff;
      box-shadow: 0 0 0 5px rgba(168,85,247,0.08), 0 0 18px rgba(168,85,247,0.26);
    }
    .rel-node--locked {
      background: rgba(255,255,255,0.03);
      border: 1.5px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.34);
    }

    .rel-tier__header {
      width: 100%;
      padding: 12px 20px 10px;
      text-align: center;
    }
    .rel-tier__name-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 4px;
      flex-wrap: wrap;
      width: 100%;
      text-align: center;
    }
    .rel-tier__name {
      font-size: 16px;
      font-weight: 650;
      color: rgba(255,255,255,0.9);
      letter-spacing: -0.02em;
      text-align: center;
    }
    .rel-tier__badge-now,
    .rel-tier__badge-done {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 22px;
      padding: 0 9px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .rel-tier__badge-now {
      color: #f4ddff;
      background: linear-gradient(135deg, rgba(162,92,255,0.2), rgba(255,125,194,0.16));
      border: 1px solid rgba(226,180,255,0.2);
    }
    .rel-tier__badge-done {
      color: rgba(255,255,255,0.34);
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
    }
    .rel-tier__subtitle {
      max-width: 340px;
      margin: 0 auto;
      font-size: 12px;
      line-height: 1.45;
      color: rgba(255,255,255,0.42);
    }

    .rel-tier--passed .rel-tier__header { opacity: 0.78; }
    .rel-tier--passed .rel-track,
    .rel-tier--passed .rel-milestone-banner {
      opacity: 0.72;
      filter: saturate(0.88);
    }
    .rel-tier--future:nth-last-child(-n+2) { opacity: 0.55; }

    .rel-milestone-banner {
      position: relative;
      width: calc(100% - var(--rel-content-inset) - 10px);
      max-width: 460px;
      min-height: 132px;
      margin: 8px auto 14px;
      border-radius: 26px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 24px 48px rgba(0,0,0,0.26);
    }
    .rel-milestone-banner__bg,
    .rel-milestone-banner__overlay {
      position: absolute;
      inset: 0;
    }
    .rel-milestone-banner__bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.55;
      transform: scale(1.04);
    }
    .rel-milestone-banner__overlay {
      background:
        linear-gradient(90deg, rgba(10,10,20,0.88) 0%, rgba(10,10,20,0.52) 42%, rgba(10,10,20,0.22) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    }
    .rel-milestone-banner__content {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 14px;
      min-height: 132px;
      padding: 16px;
    }
    .rel-milestone-banner__text {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-width: 250px;
    }
    .rel-milestone-banner__eyebrow {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }
    .rel-milestone-banner__label {
      font-size: 18px;
      font-weight: 760;
      line-height: 1.05;
      letter-spacing: -0.03em;
      color: #fff;
    }
    .rel-milestone-banner__desc {
      font-size: 12px;
      line-height: 1.45;
      color: rgba(255,255,255,0.72);
    }
    .rel-milestone-banner__rail {
      display: flex;
      align-items: flex-end;
      gap: 8px;
    }
    .rel-milestone-banner__mini {
      position: relative;
      width: 58px;
      height: 86px;
      padding: 4px;
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 16px 30px rgba(0,0,0,0.24);
      transform: rotate(-5deg);
    }
    .rel-milestone-banner__mini:nth-child(2) {
      transform: translateY(-10px) rotate(1deg);
    }
    .rel-milestone-banner__mini:nth-child(3) {
      transform: rotate(7deg);
    }
    .rel-milestone-banner__mini img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
      object-fit: cover;
    }
    .rel-milestone-banner__mini span {
      position: absolute;
      left: 8px;
      bottom: 8px;
      display: inline-flex;
      align-items: center;
      min-height: 18px;
      padding: 0 7px;
      border-radius: 999px;
      background: rgba(10,10,20,0.72);
      border: 1px solid rgba(255,255,255,0.12);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
    }

    .rel-milestone-banner--ms5 {
      border-color: rgba(255,182,136,0.24);
      box-shadow: 0 24px 54px rgba(90,30,20,0.28), inset 0 1px 0 rgba(255,220,190,0.12);
    }
    .rel-milestone-banner--ms5 .rel-milestone-banner__label {
      color: #ffd3bb;
    }
    .rel-tier--ms5 .rel-tier__name { color: #ffd0ba; }
    .rel-tier--ms5 .rel-spine-node {
      border-color: rgba(255,182,136,0.52);
      box-shadow: 0 0 0 6px rgba(255,168,120,0.08), 0 0 22px rgba(255,148,100,0.25);
    }

    .rel-milestone-banner--ms8 {
      border-color: rgba(255,166,129,0.22);
      box-shadow: 0 28px 60px rgba(94,24,28,0.28), inset 0 1px 0 rgba(255,240,224,0.1);
    }
    .rel-milestone-banner--ms8 .rel-milestone-banner__label {
      background: linear-gradient(90deg, #ffe0ca, #ff9a8b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
    .rel-tier--ms8 .rel-tier__name {
      background: linear-gradient(90deg, #ffe0ca, #ff9a8b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
    .rel-tier--ms8 .rel-spine-node {
      width: 40px;
      height: 40px;
      font-size: 14px;
      border-color: rgba(255,162,120,0.55);
      box-shadow: 0 0 0 6px rgba(255,144,104,0.08), 0 0 22px rgba(255,132,96,0.28);
      background: linear-gradient(135deg, rgba(190,74,54,0.34), rgba(120,46,30,0.2));
    }

    .rel-tracks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--rel-tracks-gap);
      width: calc(100% - var(--rel-content-inset) - 10px);
      max-width: 460px;
      margin: 0 auto;
      align-items: start;
    }
    .rel-tracks--single {
      grid-template-columns: minmax(0, 1fr);
      max-width: 240px;
    }

    .rel-track {
      position: relative;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
      isolation: isolate;
    }
    .rel-track::before {
      content: none;
    }
    .rel-track::after {
      content: none;
    }
    .rel-track--base {
    }
    .rel-track--base::before {
      background:
        linear-gradient(145deg, rgba(17,24,56,0.62), rgba(55,28,74,0.56) 58%, rgba(97,36,86,0.48)),
        radial-gradient(circle at top left, rgba(255,255,255,0.05) 0%, transparent 42%);
      border-color: rgba(220,176,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .rel-track--pro {
    }
    .rel-track--pro::before {
      background:
        linear-gradient(145deg, rgba(22,18,15,0.68), rgba(68,44,24,0.62) 54%, rgba(152,114,46,0.56)),
        radial-gradient(circle at top left, rgba(255,240,212,0.06) 0%, transparent 42%);
      border-color: rgba(255,224,164,0.1);
      box-shadow: inset 0 1px 0 rgba(255,245,224,0.05);
    }
    .rel-track--locked {
      filter: saturate(0.78);
    }
    .rel-track--locked::before {
      opacity: 0.84;
    }
    .rel-track--ms5 {
      filter: none;
    }
    .rel-track--ms8 {
      filter: none;
    }

    .rel-track__label-row {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      padding-top: 0;
      margin-bottom: 0;
    }
    .rel-track__label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 0 14px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.86);
      text-align: center;
      text-shadow: 0 8px 18px rgba(0,0,0,0.32);
      background: linear-gradient(180deg, rgba(63,56,88,0.96), rgba(52,46,74,0.9));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 22px rgba(0,0,0,0.18);
      transform: translateY(-2px);
    }
    .rel-track--pro .rel-track__label {
      color: #ffe8b7;
      background: linear-gradient(180deg, rgba(72,58,36,0.96), rgba(58,46,28,0.92));
      border-color: rgba(255,224,164,0.12);
      box-shadow: inset 0 1px 0 rgba(255,245,224,0.12), 0 12px 22px rgba(34,20,6,0.18);
    }
    .rel-track--minimal {
      min-height: 0;
    }

    .rel-track__body {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      padding: 0;
    }
    .rel-track__empty {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      background: rgba(255,255,255,0.04);
      border: 1px dashed rgba(255,255,255,0.1);
      font-size: 11px;
      color: rgba(255,255,255,0.24);
      text-align: center;
    }

    .rel-lock-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 26px;
      height: 26px;
      border-radius: 13px;
      background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: 0 10px 18px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.14);
      z-index: 3;
    }
    .rel-lock-badge::before,
    .rel-lock-badge::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .rel-lock-badge::before {
      top: 5px;
      width: 11px;
      height: 8px;
      border: 1.8px solid rgba(255,255,255,0.84);
      border-bottom: none;
      border-radius: 8px 8px 0 0;
    }
    .rel-lock-badge::after {
      top: 11px;
      width: 12px;
      height: 10px;
      border-radius: 4px;
      background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(223,226,232,0.84));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    }
    .rel-lock-badge--tile { top: 10px; right: 10px; }

    .rel-reward-tile {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 8px;
      min-height: 92px;
      padding: 12px;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 18px rgba(0,0,0,0.16);
      isolation: isolate;
    }
    .rel-reward-tile__backdrop,
    .rel-reward-tile__scrim {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .rel-reward-tile__backdrop {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.16;
      transform: scale(1.04);
    }
    .rel-reward-tile__scrim {
      background:
        linear-gradient(180deg, rgba(8,9,18,0.18) 0%, rgba(8,9,18,0.05) 36%, rgba(8,9,18,0.34) 100%),
        radial-gradient(circle at top right, rgba(255,255,255,0.1) 0%, transparent 40%);
    }
    .rel-reward-tile__top,
    .rel-reward-tile__meta,
    .rel-reward-tile__media {
      position: relative;
      z-index: 1;
    }
    .rel-reward-tile__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .rel-reward-tile__eyebrow {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.52);
    }
    .rel-reward-tile__value {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.14);
      font-size: 14px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
    }
    .rel-reward-tile__badge {
      position: absolute;
      top: 12px;
      right: 12px;
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      z-index: 3;
      box-shadow: 0 10px 18px rgba(0,0,0,0.16);
    }
    .rel-reward-tile__badge--rare {
      color: #23171a;
      background: linear-gradient(135deg, #ffe6a0, #ffb96e);
    }
    .rel-reward-tile__badge--gift {
      color: #1d1226;
      background: linear-gradient(135deg, #ffddb9, #ffaf80);
    }
    .rel-reward-tile__badge--new {
      color: #1e1322;
      background: linear-gradient(135deg, #ffd4c7, #ff9ab0);
    }
    .rel-reward-tile__meta {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-width: 72%;
    }
    .rel-reward-tile__title {
      font-size: 17px;
      line-height: 1.08;
      font-weight: 760;
      letter-spacing: -0.03em;
      color: #fff;
    }
    .rel-reward-tile__desc {
      font-size: 11px;
      line-height: 1.4;
      color: rgba(255,255,255,0.7);
    }
    .rel-reward-tile__media {
      margin-top: auto;
      min-height: 44px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }
    .rel-reward-tile--hero {
      min-height: 184px;
      padding: 14px;
    }
    .rel-reward-tile--wide {
      min-height: 132px;
    }
    .rel-reward-tile--standard {
      min-height: 116px;
    }
    .rel-reward-tile--locked {
      filter: saturate(0.76);
    }
    .rel-reward-tile--locked .rel-reward-tile__top {
      padding-right: 38px;
    }
    .rel-reward-tile--locked .rel-reward-tile__backdrop {
      opacity: 0.14;
    }
    .rel-reward-tile--minimal {
      min-height: 88px;
      height: 88px;
      padding: 12px;
      gap: 8px;
      justify-content: space-between;
      overflow: hidden;
    }
    .rel-reward-tile--minimal.rel-reward-tile--compact,
    .rel-reward-tile--minimal.rel-reward-tile--wide,
    .rel-reward-tile--minimal.rel-reward-tile--hero,
    .rel-reward-tile--minimal.rel-reward-tile--standard {
      min-height: 88px;
      height: 88px;
    }
    .rel-reward-tile__meta--minimal {
      max-width: 100%;
      gap: 0;
      min-height: 0;
    }
    .rel-reward-tile__title--minimal {
      max-width: 100%;
      font-size: 15px;
      line-height: 1.08;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .rel-reward-tile__media--minimal {
      min-height: 0;
      height: 42px;
      margin-top: auto;
      justify-content: flex-end;
    }
    .rel-reward-tile--gems-minimal {
      min-height: 88px;
      height: 88px;
      justify-content: flex-start;
      padding-top: 10px;
    }
    .rel-reward-tile__gem-inline {
      position: absolute;
      top: 10px;
      left: 12px;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 8px;
    }
    .rel-reward-tile__gem-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .rel-reward-tile__gem-icon {
      width: 42px;
      height: 42px;
      object-fit: contain;
      filter: drop-shadow(0 8px 14px rgba(0,0,0,0.2));
    }
    .rel-reward-tile__gem-value {
      font-size: 25px;
      font-weight: 820;
      letter-spacing: -0.04em;
      color: #fff;
      text-shadow: 0 8px 18px rgba(0,0,0,0.22);
    }
    .rel-reward-tile__gem-cluster {
      position: absolute;
      right: 6px;
      bottom: 0;
      width: 74px;
      height: 52px;
      pointer-events: none;
      z-index: 1;
    }
    .rel-reward-tile__gem-float {
      position: absolute;
      width: 34px;
      height: 34px;
      object-fit: contain;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,0.24));
      transform-origin: center;
    }
    .rel-reward-tile__gem-float--1 {
      left: 0;
      bottom: 4px;
      width: 20px;
      height: 20px;
      opacity: 0.44;
      transform: rotate(-14deg);
    }
    .rel-reward-tile__gem-float--2 {
      left: 18px;
      bottom: 14px;
      width: 28px;
      height: 28px;
      opacity: 0.7;
      transform: rotate(10deg);
    }
    .rel-reward-tile__gem-float--3 {
      right: 2px;
      bottom: 0;
      width: 38px;
      height: 38px;
      opacity: 0.98;
      transform: rotate(-6deg);
    }
    .rel-reward-tile__gem-float--4,
    .rel-reward-tile__gem-float--5 {
      display: none;
    }
    .rel-reward-tile__gem-cluster--base .rel-reward-tile__gem-float--2 {
      opacity: 0.62;
    }
    .rel-reward-tile__gem-cluster--base .rel-reward-tile__gem-float--3 {
      width: 34px;
      height: 34px;
      opacity: 0.86;
    }
    .rel-reward-tile__gem-cluster--pro .rel-reward-tile__gem-float--1 {
      opacity: 0.56;
    }
    .rel-reward-tile__gem-cluster--pro .rel-reward-tile__gem-float--2 {
      width: 30px;
      height: 30px;
      opacity: 0.82;
    }
    .rel-reward-tile__gem-cluster--pro .rel-reward-tile__gem-float--4,
    .rel-reward-tile__gem-cluster--pro .rel-reward-tile__gem-float--5 {
      display: block;
    }
    .rel-reward-tile__gem-cluster--pro .rel-reward-tile__gem-float--4 {
      left: 8px;
      bottom: 20px;
      width: 18px;
      height: 18px;
      opacity: 0.46;
      transform: rotate(18deg);
    }
    .rel-reward-tile__gem-cluster--pro .rel-reward-tile__gem-float--5 {
      right: 22px;
      bottom: 10px;
      width: 22px;
      height: 22px;
      opacity: 0.68;
      transform: rotate(8deg);
    }
    .rel-reward-tile__scrim--gems {
      background:
        linear-gradient(90deg, rgba(10,12,22,0.06) 0%, rgba(10,12,22,0) 56%),
        radial-gradient(circle at top right, rgba(255,255,255,0.14) 0%, transparent 40%);
    }
    .rel-reward-tile--track-base {
      background:
        linear-gradient(135deg, rgba(18,24,56,0.96), rgba(62,30,84,0.92) 60%, rgba(109,42,96,0.84)),
        radial-gradient(circle at top right, rgba(255,196,232,0.14) 0%, transparent 38%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 24px rgba(18,10,44,0.18);
    }
    .rel-reward-tile--track-pro {
      background:
        linear-gradient(135deg, rgba(22,16,12,0.98), rgba(72,44,20,0.96) 48%, rgba(176,126,48,0.92)),
        radial-gradient(circle at top right, rgba(255,232,178,0.24) 0%, transparent 44%);
      box-shadow: inset 0 1px 0 rgba(255,240,210,0.12), 0 14px 26px rgba(32,18,6,0.22);
    }
    .rel-reward-tile--gems-base {
      border-color: rgba(214,176,255,0.12);
    }
    .rel-reward-tile--gems-pro {
      border-color: rgba(255,222,156,0.22);
    }
    .rel-reward-tile--gallery,
    .rel-reward-tile--voice,
    .rel-reward-tile--gift {
      border-color: rgba(255,255,255,0.11);
    }
    .rel-reward-tile--rare_photo {
      border-color: rgba(255,214,148,0.22);
    }
    .rel-reward-tile--intimate {
      border-color: rgba(255,196,170,0.2);
    }
    .rel-tier--hot .rel-reward-tile--gems .rel-reward-tile__value,
    .rel-tier--deep .rel-reward-tile--gems .rel-reward-tile__value {
      color: #fff;
    }

    .rel-gem-stack {
      position: relative;
      width: 92px;
      height: 62px;
    }
    .rel-gem-stack__gem {
      position: absolute;
      bottom: 0;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      object-fit: cover;
      box-shadow: 0 12px 22px rgba(0,0,0,0.22);
      border: 1px solid rgba(255,255,255,0.14);
    }
    .rel-gem-stack__gem--back {
      left: 0;
      width: 30px;
      height: 30px;
      opacity: 0.74;
      transform: translateY(-4px) rotate(-10deg);
    }
    .rel-gem-stack__gem--mid {
      left: 26px;
      width: 36px;
      height: 36px;
      opacity: 0.86;
      transform: translateY(-10px) rotate(8deg);
    }
    .rel-gem-stack__gem--front {
      right: 0;
      width: 50px;
      height: 50px;
      transform: rotate(-5deg);
    }

    .rel-photo-stack {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      gap: 6px;
      width: 100%;
    }
    .rel-photo-stack__card {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      width: 44px;
      height: 72px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 14px 24px rgba(0,0,0,0.2);
    }
    .rel-photo-stack__asset {
      position: absolute;
      inset: 5px;
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      border-radius: 12px;
      object-fit: cover;
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 10px 18px rgba(0,0,0,0.18);
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
    }
    .rel-photo-stack__card--1 { transform: rotate(-8deg); }
    .rel-photo-stack__card--2 { transform: translateY(-8px); }
    .rel-photo-stack__card--3 { transform: rotate(8deg); }
    .rel-gallery-symbol {
      width: 100%;
      min-height: 54px;
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: auto;
      padding: 0 2px;
    }
    .rel-gallery-symbol__asset {
      width: min(94%, 204px);
      max-width: 204px;
      max-height: 64px;
      object-fit: contain;
      filter: drop-shadow(0 12px 18px rgba(0,0,0,0.18));
    }
    .rel-reward-tile--gallery.rel-reward-tile--minimal .rel-reward-tile__media--minimal {
      height: 54px;
      justify-content: center;
    }
    .rel-reward-tile--minimal .rel-photo-stack {
      gap: 4px;
    }
    .rel-reward-tile--minimal .rel-photo-stack__card {
      width: 36px;
      height: 52px;
      border-radius: 12px;
      box-shadow: 0 10px 16px rgba(0,0,0,0.18);
    }
    .rel-reward-tile--minimal .rel-photo-stack__asset {
      inset: 3px;
      width: calc(100% - 6px);
      height: calc(100% - 6px);
      border-radius: 9px;
    }
    .rel-photo-stack--rare .rel-photo-stack__card {
      width: 50px;
      height: 82px;
      border-color: rgba(255,228,166,0.18);
    }
    .rel-reward-tile--minimal .rel-photo-stack--rare .rel-photo-stack__card {
      width: 38px;
      height: 56px;
      border-radius: 13px;
    }
    .rel-reward-tile--rare_photo.rel-reward-tile--minimal .rel-reward-tile__media--minimal {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 38%;
      justify-content: flex-end;
      align-items: stretch;
      overflow: visible;
      z-index: 1;
    }
    .rel-reward-tile--rare_photo.rel-reward-tile--minimal .rel-reward-tile__meta--minimal {
      position: relative;
      z-index: 2;
      max-width: 44%;
    }
    .rel-rare-focus {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .rel-rare-focus__asset {
      position: absolute;
      right: -20px;
      bottom: -24px;
      width: auto;
      height: 132px;
      max-width: none;
      max-height: none;
      object-fit: contain;
      filter: drop-shadow(0 10px 16px rgba(0,0,0,0.22));
    }
    .rel-photo-stack--rare .rel-photo-stack__asset {
      inset: 4px;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      border-color: rgba(255,232,182,0.24);
      box-shadow:
        inset 0 1px 0 rgba(255,248,220,0.22),
        0 12px 20px rgba(0,0,0,0.22),
        0 0 0 1px rgba(255,221,166,0.08);
    }
    .rel-rare-chip {
      position: absolute;
      right: 12px;
      bottom: 12px;
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 0 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255,235,196,0.92), rgba(255,190,126,0.86));
      color: #2b1b18;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      z-index: 2;
    }

    .rel-gift-showcase,
    .rel-intimate-preview {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      gap: 7px;
      width: 100%;
    }
    .rel-gift-showcase__item,
    .rel-intimate-preview__item {
      position: relative;
      display: inline-flex;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
      border-radius: 16px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 14px 24px rgba(0,0,0,0.2);
    }
    .rel-gift-showcase__item {
      width: 54px;
      height: 54px;
      padding: 6px;
    }
    .rel-reward-tile--minimal .rel-gift-showcase,
    .rel-reward-tile--minimal .rel-intimate-preview {
      gap: 5px;
    }
    .rel-reward-tile--minimal .rel-gift-showcase__item {
      width: 40px;
      height: 40px;
      padding: 5px;
      border-radius: 12px;
    }
    .rel-reward-tile--minimal .rel-gift-showcase__box {
      border-radius: 10px;
    }
    .rel-gift-showcase__box {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,218,188,0.9), rgba(255,170,124,0.76));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 18px rgba(0,0,0,0.2);
    }
    .rel-gift-showcase__box::before,
    .rel-gift-showcase__box::after {
      content: '';
      position: absolute;
      background: rgba(124,48,58,0.78);
      border-radius: 999px;
    }
    .rel-gift-showcase__box::before {
      top: 0;
      bottom: 0;
      left: 50%;
      width: 8px;
      transform: translateX(-50%);
    }
    .rel-gift-showcase__box::after {
      left: 0;
      right: 0;
      top: 50%;
      height: 8px;
      transform: translateY(-50%);
    }
    .rel-gift-showcase__item--1 { transform: rotate(-8deg); }
    .rel-gift-showcase__item--2 { transform: translateY(-6px); }
    .rel-gift-showcase__item--3 { transform: rotate(8deg); }

    .rel-intimate-preview__item {
      width: 46px;
      height: 74px;
      padding: 4px;
      transform-origin: bottom center;
    }
    .rel-reward-tile--minimal .rel-intimate-preview__item {
      width: 34px;
      height: 54px;
      padding: 3px;
      border-radius: 12px;
    }
    .rel-intimate-preview__item img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
      object-fit: cover;
    }
    .rel-reward-tile--minimal .rel-intimate-preview__item img {
      border-radius: 9px;
    }
    .rel-reward-tile--minimal .rel-intimate-preview__item span {
      display: none;
    }
    .rel-intimate-preview__item span {
      position: absolute;
      left: 6px;
      right: 6px;
      bottom: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 16px;
      padding: 0 4px;
      border-radius: 999px;
      background: rgba(10,10,20,0.72);
      border: 1px solid rgba(255,255,255,0.12);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
    }
    .rel-intimate-preview__item--1 { transform: rotate(-8deg); }
    .rel-intimate-preview__item--2 { transform: translateY(-10px); }
    .rel-intimate-preview__item--3 { transform: rotate(8deg); }

    .rel-voice-card {
      width: 100%;
      display: grid;
      grid-template-columns: 30px 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 9px 11px;
      border-radius: 18px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .rel-reward-tile--minimal .rel-voice-card {
      grid-template-columns: 24px 1fr auto;
      gap: 6px;
      padding: 6px 8px;
      border-radius: 14px;
    }
    .rel-voice-card__play {
      position: relative;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(235,225,255,0.74));
      box-shadow: 0 8px 18px rgba(0,0,0,0.16);
    }
    .rel-reward-tile--minimal .rel-voice-card__play {
      width: 24px;
      height: 24px;
    }
    .rel-voice-card__play::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-40%, -50%);
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 9px solid #1d1226;
    }
    .rel-reward-tile--minimal .rel-voice-card__play::after {
      border-top-width: 5px;
      border-bottom-width: 5px;
      border-left-width: 7px;
    }
    .rel-voice-wave {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 20px;
      gap: 3px;
    }
    .rel-reward-tile--minimal .rel-voice-wave {
      height: 16px;
      gap: 2px;
    }
    .rel-voice-wave i {
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(230,216,255,0.64));
      opacity: 0.92;
    }
    .rel-reward-tile--minimal .rel-voice-wave i {
      width: 2px;
    }
    .rel-voice-card__time {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255,255,255,0.72);
    }
    .rel-reward-tile--minimal .rel-voice-card__time {
      font-size: 10px;
    }

    .rel-track-actions {
      width: calc(100% - var(--rel-content-inset) - 10px);
      max-width: 460px;
      margin: var(--rel-section-gap) auto 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--rel-tracks-gap);
    }
    .rel-track-actions--single {
      grid-template-columns: minmax(0, 1fr);
      max-width: 240px;
    }
    .rel-track-action-spacer {
      display: block;
    }
    .rel-track-action {
      min-height: var(--rel-btn-h);
      border-radius: var(--rel-btn-radius);
      border: 1px solid rgba(255,255,255,0.14);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -0.01em;
      transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 14px rgba(0,0,0,0.15);
      -webkit-tap-highlight-color: transparent;
    }
    .rel-track-action:active {
      transform: scale(0.985);
    }
    .rel-track-action:disabled {
      cursor: default;
      opacity: 0.68;
    }
    .rel-track-action--base {
      color: #1a1120;
      background: linear-gradient(135deg, #fff6ff, #d8b0ff);
    }
    .rel-track-action--pro {
      color: #162011;
      background: linear-gradient(135deg, #37ff75, #ddffa4);
    }
    .rel-track-action.is-claimed {
      filter: saturate(0.72);
    }

    .rel-skip {
      width: calc(100% - var(--rel-content-inset) - 10px);
      max-width: 460px;
      margin: var(--rel-section-gap) auto 0;
      text-align: center;
    }
    .rel-skip__btn {
      width: auto;
      max-width: 280px;
      min-height: var(--rel-skip-h);
      padding: 0 24px;
      line-height: 1;
      border-radius: var(--rel-skip-radius);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #f3f5ff;
      border: 1px solid rgba(173,154,255,0.24);
      background: linear-gradient(135deg, rgba(43,54,104,0.96), rgba(94,68,188,0.94));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 7px 12px rgba(18,10,42,0.14);
      transition: transform 0.2s ease, border-color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .rel-skip__btn:active { transform: scale(0.98); }
    .rel-skip__btn .rel-coin-img { width: 14px; height: 14px; }
    .rel-skip__note {
      margin-top: 6px;
      font-size: 10px;
      color: rgba(255,255,255,0.26);
    }

    .rel-coin-fly {
      position: fixed;
      width: 22px;
      height: 22px;
      z-index: 9999;
      pointer-events: none;
      will-change: transform, opacity;
      filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.5));
    }
    .rel-coin-fly img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    @keyframes rel-balance-pop {
      0% { transform: scale(1); }
      40% { transform: scale(1.18); filter: brightness(1.5); }
      100% { transform: scale(1); filter: brightness(1); }
    }
    .rel-balance-flash {
      animation: rel-balance-pop 0.4s ease-out;
    }

    @media (max-width: 767px) {
      #relModal {
        align-items: flex-end;
        padding: 0;
      }
      #relModal .modal-box {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0;
        padding: 0;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
      }
      #relModal.visible .modal-box {
        transform: translateY(0);
      }
      #relModal .rel-modal-content {
        height: 100%;
        flex: 1;
        border-radius: 0;
        border: none;
        --rel-content-inset: 44px;
        --rel-frame-pad-x: 18px;
        --rel-tracks-gap: 12px;
        --rel-btn-h: 42px;
        --rel-btn-radius: 21px;
        --rel-skip-h: 36px;
        --rel-skip-radius: 18px;
        padding-bottom: calc(var(--rel-mobile-bottom-buffer) + max(var(--safe-bottom, 0px), env(safe-area-inset-bottom, 0px)));
        scroll-padding-bottom: calc(var(--rel-mobile-bottom-buffer) + max(var(--safe-bottom, 0px), env(safe-area-inset-bottom, 0px)));
      }
      .rel-sheet-handle { display: none; }
      .rel-header {
        padding-top: calc(var(--safe-top, 0px) + 10px);
      }
      .rel-timeline {
        padding: var(--rel-mobile-timeline-top-gap) 8px 0;
      }
      .rel-tracks,
      .rel-milestone-banner,
      .rel-skip,
      .rel-track-actions {
        width: calc(100% - 56px);
      }
      .rel-tier--current .rel-tier__header {
        padding-top: 14px;
        padding-left: 18px;
        padding-right: 18px;
      }
      .rel-tier--current .rel-tracks,
      .rel-tier--current .rel-track-actions,
      .rel-tier--current .rel-skip,
      .rel-tier--current .rel-milestone-banner {
        width: calc(100% - 64px);
        max-width: 348px;
      }
      .rel-track {
        gap: 6px;
      }
      .rel-tracks--single,
      .rel-track-actions--single {
        max-width: 220px;
      }
      .rel-tier--current::after {
        width: calc(100% - 30px);
        border-radius: 24px;
      }
      .rel-track__body {
        padding: 0;
      }
      .rel-track__label {
        font-size: 10px;
        letter-spacing: 0.18em;
        min-height: 24px;
        padding: 0 14px;
      }
      .rel-reward-tile {
        border-radius: 18px;
      }
      .rel-reward-tile--hero {
        min-height: 168px;
      }
      .rel-reward-tile--minimal.rel-reward-tile--hero {
        min-height: 88px;
      }
      .rel-reward-tile--wide {
        min-height: 126px;
      }
      .rel-reward-tile__title {
        font-size: 17px;
      }
      .rel-reward-tile__title--minimal {
        max-width: 72%;
      }
      .rel-reward-tile--gems-minimal {
        padding-top: 10px;
      }
      .rel-reward-tile__gem-cluster {
        width: 70px;
        height: 50px;
      }
      .rel-reward-tile__gem-value {
        font-size: 24px;
      }
      .rel-reward-tile__gem-icon {
        width: 40px;
        height: 40px;
      }
      .rel-reward-tile__gem-inline {
        top: 10px;
        left: 12px;
        gap: 8px;
      }
      .rel-milestone-banner__content {
        padding: 14px;
      }
      .rel-milestone-banner__mini {
        width: 48px;
        height: 76px;
      }
      .rel-track-action {
        min-height: var(--rel-btn-h);
        font-size: 13px;
        border-radius: var(--rel-btn-radius);
      }
      .rel-skip__btn {
        min-height: var(--rel-skip-h);
        font-size: 11px;
        border-radius: var(--rel-skip-radius);
      }
    }

    @media (max-width: 380px) {
      .rel-tier__name { font-size: 15px; }
      .rel-tier__subtitle { font-size: 11px; }
      .rel-tracks { gap: 10px; }
      .rel-track {
        gap: 6px;
      }
      .rel-reward-tile {
        padding: 11px;
        min-height: 84px;
      }
      .rel-reward-tile--hero {
        min-height: 156px;
      }
      .rel-reward-tile--minimal.rel-reward-tile--hero {
        min-height: 84px;
      }
      .rel-reward-tile--wide {
        min-height: 118px;
      }
      .rel-reward-tile__title {
        font-size: 15px;
      }
      .rel-reward-tile__desc {
        font-size: 10px;
      }
      .rel-reward-tile__value {
        min-height: 24px;
        padding: 0 8px;
        font-size: 13px;
      }
      .rel-reward-tile__title--minimal {
        font-size: 14px;
      }
      .rel-reward-tile__gem-value {
        font-size: 22px;
      }
      .rel-reward-tile__gem-icon {
        width: 36px;
        height: 36px;
      }
      .rel-reward-tile__gem-inline {
        top: 10px;
        left: 11px;
        gap: 7px;
      }
      .rel-reward-tile__gem-cluster {
        width: 64px;
        height: 46px;
      }
      .rel-milestone-banner {
        min-height: 118px;
      }
      .rel-milestone-banner__content {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
      }
      .rel-milestone-banner__rail {
        justify-content: flex-start;
      }
      .rel-track-action {
        min-height: 38px;
        font-size: 12px;
        border-radius: 19px;
      }
      .rel-skip__btn {
        min-height: 32px;
        padding-left: 18px;
        padding-right: 18px;
        font-size: 11px;
      }
    }

    @media (min-width: 768px) {
      #relModal {
        padding: 24px;
      }
      #relModal .modal-box {
        max-width: 620px;
        max-height: 92vh;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,0.06);
        box-shadow: 0 8px 48px rgba(0,0,0,0.5);
      }
      .rel-modal-content {
        max-height: 92vh;
        border-radius: 24px;
      }
      .rel-sheet-handle { display: none; }
      .rel-timeline {
        padding: 22px 20px 34px;
      }
      .rel-tracks,
      .rel-milestone-banner,
      .rel-skip,
      .rel-track-actions {
        max-width: 456px;
      }
      .rel-tracks--single,
      .rel-track-actions--single {
        max-width: 244px;
      }
      .rel-tier--current .rel-tracks,
      .rel-tier--current .rel-track-actions,
      .rel-tier--current .rel-skip,
      .rel-tier--current .rel-milestone-banner {
        max-width: 424px;
      }
      .rel-track {
        gap: 8px;
      }
      .rel-track__body {
        padding: 0;
      }
      .rel-track__label {
        font-size: 10px;
        min-height: 26px;
        padding: 0 15px;
      }
      .rel-reward-tile--hero {
        min-height: 196px;
      }
      .rel-reward-tile--minimal.rel-reward-tile--hero {
        min-height: 88px;
      }
      .rel-reward-tile--wide {
        min-height: 138px;
      }
      .rel-reward-tile__title {
        font-size: 19px;
      }
      .rel-reward-tile__desc {
        font-size: 12px;
      }
      .rel-milestone-banner__content {
        padding: 18px;
      }
      .rel-milestone-banner__text {
        max-width: 290px;
      }
      .rel-track-action {
        min-height: var(--rel-btn-h);
        font-size: 14px;
        border-radius: var(--rel-btn-radius);
      }
      .rel-skip__btn {
        min-height: var(--rel-skip-h);
        font-size: 12px;
        border-radius: var(--rel-skip-radius);
      }
    }

    @media (min-width: 1024px) {
      #relModal .modal-box {
        max-width: 660px;
      }
    }

    
/* ═══════════════════════════════════════════════════════════════════════
       MOOD POPUP
       ═══════════════════════════════════════════════════════════════════════ */
    .mood-popup-content { text-align: center; }
    .mood-popup-content .mood-big-emoji { font-size: 48px; margin-bottom: 8px; }
    .mood-popup-content .mood-label { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
    .mood-popup-content .mood-value { font-size: 24px; font-weight: 800; margin-bottom: 16px; }
    .mood-tips { text-align: left; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
    .mood-tips div { margin-bottom: 4px; }

    
/* ═══════════════════════════════════════════════════════════════════════
       USER PROFILE MODAL
       ═══════════════════════════════════════════════════════════════════════ */
    .user-profile-content { text-align: center; }
    .user-profile-content__avatar {
      position: relative;
      width: 72px; height: 72px;
      border-radius: 50%;
      background: var(--accent);
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 700;
      overflow: hidden;
    }
    .user-profile-content__avatar img { width: 100%; height: 100%; object-fit: cover; }
    .user-profile-content__avatar.is-vip {
      box-shadow: 0 0 0 1px rgba(243,214,164,0.22), 0 0 32px rgba(255,166,190,0.14);
    }
    .user-profile-content__avatar.is-vip::after {
      content: 'VIP';
      position: absolute;
      right: -4px;
      bottom: 2px;
      height: 18px;
      padding: 0 7px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--vip-champagne), var(--vip-rose));
      color: #101215;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.08em;
      display: inline-flex;
      align-items: center;
      box-shadow: 0 8px 18px rgba(0,0,0,0.3);
    }
    .user-profile-content__name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
    .user-profile-content__balance {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px;
      background: rgba(255,200,50,0.08);
      border-radius: var(--radius-md);
      border: 1px solid rgba(255,200,50,0.2);
      margin: 16px 0;
    }
    .user-profile-content__balance-coins { font-size: 22px; font-weight: 700; color: #ffc832; }
    .user-profile-topup-btn {
      padding: 8px 20px;
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, #ffc832, #ff9500);
      color: #1a1a2e;
      font-size: 13px;
      font-weight: 600;
    }
    .user-profile-content .profile-action-btn {
      width: 100%;
      margin-top: 6px;
    }
    .user-profile-content__quota {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(156,183,255,0.08);
      border: 1px solid rgba(156,183,255,0.18);
      border-radius: var(--radius-md);
      margin-top: -2px;
      margin-bottom: 16px;
      text-align: left;
    }
    .user-profile-content__quota-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .user-profile-content__quota-title {
      font-size: 12px;
      color: rgba(255,255,255,0.66);
    }
    .user-profile-content__quota-reset {
      font-size: 11px;
      color: rgba(255,255,255,0.42);
    }
    .user-profile-content__quota-value {
      font-size: 18px;
      font-weight: 700;
      color: #e8f0ff;
      white-space: nowrap;
    }