.viewer-rewards {
  position: relative;
  box-sizing: border-box;
  margin-top: var(--section-spacing);
  padding: 0 var(--section-padding-x);
}

.viewer-rewards__shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid rgba(141, 108, 255, .24);
  border-radius: var(--radius-section);
  background: linear-gradient(145deg, rgba(15, 12, 37, .96), rgba(6, 11, 25, .97) 54%, rgba(7, 20, 29, .95));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .04);
}

.viewer-rewards__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
}

.viewer-rewards__glow { position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); opacity: .14; pointer-events: none; }
.viewer-rewards__glow--violet { top: -300px; left: -120px; background: #9146ff; }
.viewer-rewards__glow--gold { right: -170px; bottom: -340px; background: #ffb100; }

.viewer-rewards__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 34px; }
.viewer-rewards__heading { max-width: 850px; }
.viewer-rewards__eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #b79cff; font: 800 11px/1 var(--font-tech); letter-spacing: .18em; text-transform: uppercase; }
.viewer-rewards__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #9146ff; box-shadow: 0 0 14px #9146ff; }
.viewer-rewards__heading h2 { margin: 13px 0 12px; font-size: clamp(32px, 4.4vw, 67px); line-height: .94; letter-spacing: -.045em; }
.viewer-rewards__heading h2 span { color: #a88cff; }
.viewer-rewards__heading p { max-width: 760px; margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.7; }

.viewer-rewards__deadline { flex: 0 0 auto; min-width: 210px; padding: 16px 19px; display: grid; gap: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.035); text-align: right; }
.viewer-rewards__deadline span, .viewer-rewards__deadline small { color: var(--text-soft); font: 800 9px/1.2 var(--font-tech); letter-spacing: .12em; text-transform: uppercase; }
.viewer-rewards__deadline strong { color: #fff; font: 800 24px/1.15 var(--font-display); }

.viewer-rewards__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.viewer-rewards__card { position: relative; overflow: hidden; min-width: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: rgba(5, 9, 21, .7); transition: transform .25s ease, border-color .25s ease; }
.viewer-rewards__card:hover { transform: translateY(-4px); }
.viewer-rewards__card--tickets:hover { border-color: rgba(145,70,255,.4); }
.viewer-rewards__card--subs:hover { border-color: rgba(255,191,71,.4); }
.viewer-rewards__card-no { position: absolute; z-index: 3; top: 15px; right: 18px; color: rgba(255,255,255,.1); font: 900 40px/1 var(--font-display); }

.viewer-rewards__visual { position: relative; height: 285px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,.07); background: radial-gradient(circle at 50% 58%, rgba(145,70,255,.21), transparent 42%), linear-gradient(145deg, rgba(145,70,255,.08), transparent 55%); }
.viewer-rewards__card--subs .viewer-rewards__visual { background: radial-gradient(circle at 50% 58%, rgba(255,177,0,.19), transparent 42%), linear-gradient(145deg, rgba(255,177,0,.07), transparent 55%); }
.viewer-rewards__prize-label { position: absolute; top: 18px; left: 20px; z-index: 2; padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: rgba(255,255,255,.72); background: rgba(4,7,16,.48); font: 800 9px/1 var(--font-tech); letter-spacing: .12em; text-transform: uppercase; }
.viewer-rewards__weapon-glow { position: absolute; width: 55%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 80px rgba(145,70,255,.2), inset 0 0 50px rgba(145,70,255,.1); }
.viewer-rewards__card--subs .viewer-rewards__weapon-glow { box-shadow: 0 0 80px rgba(255,177,0,.18), inset 0 0 50px rgba(255,177,0,.08); }
.viewer-rewards__visual img { position: relative; z-index: 1; width: min(78%, 470px); max-height: 230px; object-fit: contain; filter: drop-shadow(0 26px 28px rgba(0,0,0,.55)); transform: rotate(-5deg); animation: viewerRewardFloat 3.8s ease-in-out infinite !important; will-change: transform; }
.viewer-rewards__card--subs .viewer-rewards__visual img { width: min(75%, 455px); animation-delay: -2.1s; }
.viewer-rewards__weapon-name { position: absolute; right: 20px; bottom: 16px; z-index: 2; display: grid; text-align: right; text-transform: uppercase; }
.viewer-rewards__weapon-name small { color: rgba(255,255,255,.52); font: 800 9px/1.2 var(--font-tech); letter-spacing: .13em; }
.viewer-rewards__weapon-name strong { margin-top: 4px; color: #b99fff; font: 900 20px/1 var(--font-heading); }
.viewer-rewards__card--subs .viewer-rewards__weapon-name strong { color: #ffc54e; }

.viewer-rewards__content { padding: 25px; }
.viewer-rewards__type { display: inline-flex; align-items: center; gap: 8px; color: #bda8ff; font: 800 10px/1 var(--font-tech); letter-spacing: .12em; text-transform: uppercase; }
.viewer-rewards__card--subs .viewer-rewards__type { color: #ffca5c; }
.viewer-rewards__type svg { width: 17px; fill: currentColor; }
.viewer-rewards__content h3 { margin: 13px 0 11px; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.02; letter-spacing: -.025em; }
.viewer-rewards__content h3 span { color: #a88cff; }
.viewer-rewards__card--subs .viewer-rewards__content h3 span { color: #ffc54e; }
.viewer-rewards__content > p { min-height: 74px; margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.65; }

.viewer-rewards__steps { margin-top: 20px; padding: 13px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; border: 1px solid rgba(145,70,255,.16); border-radius: 14px; background: rgba(145,70,255,.055); }
.viewer-rewards__steps div { min-width: 0; display: grid; justify-items: center; gap: 6px; color: var(--text-soft); font-size: 9px; font-weight: 700; text-align: center; }
.viewer-rewards__steps b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(145,70,255,.28); font: 800 11px/1 var(--font-tech); }
.viewer-rewards__steps i { width: 16px; height: 1px; background: rgba(145,70,255,.32); }
.viewer-rewards__rule { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #c8b7ff; font: 900 13px/1 var(--font-tech); letter-spacing: .08em; }
.viewer-rewards__rule span { color: rgba(255,255,255,.28); }

.viewer-rewards__sub-info { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.viewer-rewards__sub-info div { padding: 13px; display: grid; gap: 5px; border: 1px solid rgba(255,191,71,.14); border-radius: 13px; background: rgba(255,177,0,.045); }
.viewer-rewards__sub-info span { color: var(--text-soft); font: 800 9px/1 var(--font-tech); letter-spacing: .1em; text-transform: uppercase; }
.viewer-rewards__sub-info strong { font-size: 12px; }
.viewer-rewards__notice { min-height: 39px; margin-top: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border-radius: 11px; color: #d8caa7; background: rgba(255,177,0,.06); font-size: 10px; font-weight: 700; }
.viewer-rewards__notice i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #ffbd45; box-shadow: 0 0 12px rgba(255,189,69,.65); }

.viewer-rewards__actions { margin-top: 20px; display: flex; align-items: center; gap: 16px; }
.viewer-rewards__button { min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 17px; border-radius: 12px; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; transition: transform .2s ease, filter .2s ease; }
.viewer-rewards__button:hover { transform: translateY(-2px); filter: brightness(1.12); }
.viewer-rewards__button--primary { background: linear-gradient(135deg, #7046ef, #9d72ff); box-shadow: 0 12px 28px rgba(145,70,255,.2); }
.viewer-rewards__button--gold { color: #171006; background: linear-gradient(135deg, #ffae20, #ffd05f); box-shadow: 0 12px 28px rgba(255,177,0,.16); }
.viewer-rewards__button span { font-size: 17px; }
.viewer-rewards__text-link { color: var(--text-muted); font-size: 11px; font-weight: 800; }
.viewer-rewards__text-link:hover { color: #fff; }

@keyframes viewerRewardFloat {
  0%, 100% { transform: translate3d(0, -7px, 0) rotate(-5deg); }
  50% { transform: translate3d(0, 9px, 0) rotate(-2deg); }
}
@media (max-width: 620px) {
  .viewer-rewards { padding: 0 var(--section-padding-x); }
  .viewer-rewards__shell { padding: 22px 14px; }
  .viewer-rewards__header { gap: 22px; margin-bottom: 22px; }
  .viewer-rewards__heading h2 { font-size: 34px; }
  .viewer-rewards__visual { height: 225px; }
  .viewer-rewards__visual img { width: 94%; max-height: 180px; }
  .viewer-rewards__content { padding: 20px 16px; }
  .viewer-rewards__steps { grid-template-columns: 1fr; }
  .viewer-rewards__steps i { width: 1px; height: 10px; justify-self: center; }
  .viewer-rewards__sub-info { grid-template-columns: 1fr; }
  .viewer-rewards__actions { align-items: stretch; flex-direction: column; }
  .viewer-rewards__text-link { padding: 7px; text-align: center; }
}