:root {
  --bg: #090a0c;
  --text: #f4f4f5;
  --muted: rgba(244, 244, 245, .68);
  --muted-soft: rgba(244, 244, 245, .46);
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .15);
  --panel: rgba(18, 19, 22, .92);
  --panel-2: rgba(12, 13, 15, .96);
  --purple-1: #0d0e10;
  --purple-2: #151619;
  --purple-3: #1c1d21;
  --purple-4: #9f2f2f;
  --purple-5: #e56b6b;
  --gold: #b83b3b;
  --gold-soft: rgba(184, 59, 59, .13);
  --danger: #ff5f68;
  --success: #45d483;
  --maxw: 430px;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow: 0 22px 60px rgba(10, 2, 2, .42);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 6%, rgba(184, 80, 80, .24), transparent 31%),
    radial-gradient(circle at 78% 88%, rgba(217, 116, 116, .10), transparent 30%),
    linear-gradient(180deg, #2a0f0f 0%, #1d0909 54%, #150707 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: .45;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 78%);
}

button,
input {
  font: inherit;
}

button {
  appearance: none;
}

img {
  max-width: 100%;
  display: block;
}

[hidden] {
  display: none !important;
}

.app {
  width: 100%;
  max-width: var(--maxw);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -5%, rgba(255, 156, 156, .16), transparent 30%),
    linear-gradient(180deg, rgba(49, 20, 20, .95) 0%, rgba(29, 9, 9, .98) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04),
    0 34px 90px rgba(0, 0, 0, .34);
}

.app::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 116, 116, .45), transparent);
  opacity: .72;
  z-index: 2;
  pointer-events: none;
}

.screen {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(8px, 1.15vh, 12px);
  padding:
    max(12px, env(safe-area-inset-top))
    clamp(12px, 3vw, 16px)
    max(14px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.hero {
  display: grid;
  gap: 7px;
  align-content: start;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo-box {
  width: clamp(66px, 15vw, 86px);
  height: clamp(66px, 15vw, 86px);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .025)),
    linear-gradient(180deg, #4b2020 0%, #291010 100%);
  border: 1px solid rgba(217, 116, 116, .18);
  display: grid;
  place-items: center;
  margin-bottom: clamp(7px, 1vh, 10px);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(255, 156, 156, .08) inset,
    0 0 24px rgba(184, 80, 80, .12);
  overflow: hidden;
  position: relative;
}

.logo-box::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 19px;
  border: 1px solid rgba(255, 255, 255, .055);
  pointer-events: none;
}

.logo-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .04) 36%, transparent 68%);
  pointer-events: none;
}

.logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .22));
}

.title {
  margin: 0;
  font-size: clamp(18px, 4.25vw, 24px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.035em;
  color: #ffffff;
  text-shadow: 0 10px 28px rgba(0, 0, 0, .26), 0 0 22px rgba(255, 156, 156, .10);
}

.subtitle {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 0 8px;
  color: rgba(255, 243, 243, .72);
  font-size: clamp(10.5px, 2.75vw, 13px);
  line-height: 1.42;
  text-align: center;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.bro-highlight-slot {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
  border-radius: 18px;
}

.gift-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.3vw, 12px);
  overflow: hidden;
  margin: 0;
}

.gift-card {
  min-width: 0;
  min-height: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: clamp(17px, 4vw, 22px);
  border: 1px solid rgba(255, 190, 190, .14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)),
    linear-gradient(180deg, #421b1b 0%, #270e0e 100%);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(255, 255, 255, .025) inset;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.gift-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .12), transparent 35%),
    radial-gradient(circle at 50% 0%, rgba(217, 116, 116, .09), transparent 46%);
  pointer-events: none;
}

.gift-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  border: 1px solid rgba(217, 116, 116, .10);
  pointer-events: none;
}

.gift-card:hover {
  transform: translateY(-2px);
  border-color: rgba(217, 116, 116, .24);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .28),
    0 0 22px rgba(184, 80, 80, .14),
    0 0 0 1px rgba(255, 255, 255, .035) inset;
}

.gift-card.is-empty {
  opacity: .72;
}

.gift-image {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.6vw, 12px);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 156, 156, .14), transparent 52%),
    linear-gradient(180deg, #4c2020 0%, #301313 100%);
}

.gift-image::before {
  content: "";
  position: absolute;
  inset: 19% 18%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(217, 116, 116, .11), rgba(255, 156, 156, .08) 42%, transparent 72%);
  filter: blur(9px);
  opacity: .78;
  pointer-events: none;
}

.gift-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 12px 18px rgba(0, 0, 0, .25))
    drop-shadow(0 0 10px rgba(255, 156, 156, .08));
  animation: premiumItemFloat 4.2s ease-in-out infinite;
}

.gift-card:nth-child(2n) .gift-image img { animation-delay: .5s; }
.gift-card:nth-child(3n) .gift-image img { animation-delay: 1s; }

.gift-emoji {
  font-size: clamp(28px, 6vw, 40px);
  position: relative;
  z-index: 1;
}

.gift-name {
  display: none !important;
}

.bottom-stack {
  display: grid;
  gap: clamp(8px, 1vh, 10px);
  align-content: end;
}

.token-box {
  position: relative;
  overflow: hidden;
  border-radius: clamp(18px, 4vw, 24px);
  border: 1px solid rgba(217, 116, 116, .18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)),
    linear-gradient(180deg, #3b1717 0%, #240c0c 100%);
  padding: clamp(12px, 2vh, 15px);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .27),
    0 0 0 1px rgba(255, 156, 156, .06) inset;
}

.token-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 116, 116, .55), transparent);
  pointer-events: none;
}

.token-label {
  display: block;
  font-size: clamp(10.5px, 2.7vw, 12px);
  color: rgba(255, 243, 243, .76);
  margin-bottom: 7px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .02em;
}

.token-input {
  width: 100%;
  height: clamp(42px, 5.9vh, 46px);
  border-radius: 15px;
  border: 1px solid rgba(255, 190, 190, .15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)),
    #1d0909;
  color: #ffffff;
  padding: 0 13px;
  text-transform: uppercase;
  letter-spacing: .065em;
  text-align: center;
  font-size: clamp(11.5px, 2.95vw, 13.5px);
  font-weight: 750;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}

.token-input::placeholder {
  color: rgba(255, 243, 243, .38);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.token-input:focus {
  border-color: rgba(217, 116, 116, .42);
  background: #220b0b;
  box-shadow:
    0 0 0 3px rgba(217, 116, 116, .08),
    0 0 22px rgba(184, 80, 80, .12),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.token-input:disabled {
  opacity: .68;
}

.token-msg {
  margin-top: 8px;
  min-height: 17px;
  text-align: center;
  font-size: clamp(10px, 2.7vw, 12px);
  line-height: 1.35;
  color: rgba(255, 243, 243, .60);
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  white-space: normal !important;
}

.shake-btn {
  width: 100%;
  height: clamp(43px, 6vh, 49px);
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #d88383 0%, #b94b4b 100%);
  color: #281010;
  font-size: clamp(12px, 3vw, 15px);
  font-weight: 950;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow:
    0 14px 24px rgba(18, 5, 5, .26),
    0 0 20px rgba(217, 116, 116, .12),
    inset 0 1px 0 rgba(255, 255, 255, .36);
  transition: transform .18s ease, opacity .2s ease, filter .2s ease, box-shadow .2s ease;
}

.shake-btn:hover {
  filter: brightness(1.03);
  box-shadow:
    0 16px 26px rgba(18, 5, 5, .30),
    0 0 24px rgba(217, 116, 116, .16),
    inset 0 1px 0 rgba(255, 255, 255, .38);
}

.shake-btn:active {
  transform: translateY(1px) scale(.995);
}

.shake-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.15);
  transform: none;
}

.member-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 15px;
  border: 1px solid rgba(255, 190, 190, .14);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 243, 243, .72);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: center;
  word-break: break-word;
}

.member-preview strong {
  color: #ffffff;
}

.member-preview button {
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(217, 116, 116, .16);
  color: #f6b0b0;
  font-weight: 850;
  cursor: pointer;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 156, 156, .20), transparent 42%),
    radial-gradient(circle at 50% 78%, rgba(217, 116, 116, .10), transparent 34%),
    linear-gradient(180deg, #3a1616 0%, #220b0b 54%, #150707 100%);
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

.overlay-topbar {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(8px, env(safe-area-inset-top)) 12px 0;
  position: relative;
  z-index: 10;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 190, 190, .11);
  background: rgba(255, 255, 255, .045);
  color: #ffe6e6;
  font-size: 21px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
}

.icon-btn:disabled {
  opacity: .36;
  cursor: default;
}

.overlay-title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff3f3;
}

.shake-scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.center-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(217, 116, 116, .12), rgba(255, 190, 190, .16), rgba(217, 116, 116, .10), transparent);
  z-index: 1;
  pointer-events: none;
}

.curtain-split {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.curtain-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 57%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)),
    linear-gradient(180deg, #451c1c 0%, #2a1010 100%);
  transition: transform 1.25s cubic-bezier(.16,1,.3,1);
  will-change: transform, filter;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.curtain-top {
  top: 0;
  border-bottom: 1px solid rgba(217, 116, 116, .08);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
}

.curtain-bottom {
  bottom: 0;
  border-top: 1px solid rgba(217, 116, 116, .08);
  box-shadow: 0 -14px 28px rgba(0, 0, 0, .22);
}

.overlay.reveal-start .curtain-top {
  transform: translateY(-105%);
  animation: curtainTopSoft 1.25s cubic-bezier(.16,1,.3,1) forwards;
}

.overlay.reveal-start .curtain-bottom {
  transform: translateY(105%);
  animation: curtainBottomSoft 1.25s cubic-bezier(.16,1,.3,1) forwards;
}

.flash-burst {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .95) 0%, rgba(255, 226, 226, .78) 19%, rgba(217, 116, 116, .18) 42%, transparent 70%);
  opacity: 0;
  transform: scale(.45);
  pointer-events: none;
}

.overlay.flash-on .flash-burst {
  animation: flashBurst .62s ease forwards;
}

.confetti-layer {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
}

.confetti {
  position: absolute;
  top: -12%;
  border-radius: 2px;
  opacity: 0;
  animation: confettiFall linear forwards;
  box-shadow: 0 0 8px rgba(255, 255, 255, .18);
}

.confetti.c1 { background: #ffc6c6; }
.confetti.c2 { background: #d97474; }
.confetti.c3 { background: #ffffff; border-radius: 50%; }
.confetti.c4 { background: #f57d7d; }
.confetti.c5 { background: #ffd9d9; border-radius: 50%; }
.confetti.c6 { background: #efc1c1; }

.shake-device-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.shake-device {
  width: clamp(128px, 35vw, 184px);
  aspect-ratio: 1 / 1;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  top: -58px;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition: transform .42s ease, opacity .42s ease, filter .42s ease;
  will-change: transform, filter;
}

.shake-device::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 156, 156, .22), rgba(217, 116, 116, .07) 44%, transparent 76%);
  opacity: .86;
  transform: scale(.94);
  box-shadow: 0 0 28px rgba(184, 80, 80, .16);
  pointer-events: none;
  animation: deviceAuraSoft 2.7s ease-in-out infinite;
}

.shake-device-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .25)) drop-shadow(0 0 15px rgba(255, 156, 156, .10));
}

.shake-scene.ready .shake-device {
  animation: idleFloatSoft 2.25s ease-in-out infinite;
}

.shake-scene.listening .shake-device {
  animation: listeningSoft .94s ease-in-out infinite;
}

.shake-scene.impact .shake-device {
  animation: deviceImpactSoft .68s cubic-bezier(.2,.9,.2,1) 1;
}

.overlay.reveal-start .shake-device {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(.72);
  filter: blur(5px);
}

.reward-stage {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.reward-ray {
  position: absolute;
  width: clamp(220px, 58vw, 360px);
  height: clamp(220px, 58vw, 360px);
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 18deg, rgba(217, 116, 116, .34) 18deg 31deg, transparent 31deg 72deg, rgba(255, 156, 156, .24) 72deg 86deg, transparent 86deg 142deg, rgba(217, 116, 116, .24) 142deg 154deg, transparent 154deg 235deg, rgba(255, 226, 226, .22) 235deg 250deg, transparent 250deg 360deg);
  opacity: 0;
  transform: scale(.45) rotate(0deg);
}

.reward-glow {
  position: absolute;
  width: clamp(180px, 50vw, 300px);
  height: clamp(180px, 50vw, 300px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 116, 116, .48) 0%, rgba(255, 156, 156, .22) 40%, transparent 72%);
  filter: blur(14px);
  opacity: 0;
  transform: scale(.55);
}

.reward-orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(217, 116, 116, .16);
  opacity: 0;
}

.orbit-1 { width: clamp(170px, 44vw, 240px); height: clamp(170px, 44vw, 240px); }
.orbit-2 { width: clamp(210px, 54vw, 300px); height: clamp(210px, 54vw, 300px); }

.reward-shell {
  position: relative;
  z-index: 2;
  width: clamp(180px, 56vw, 286px);
  min-height: clamp(230px, 68vw, 370px);
  border-radius: 30px;
  background: linear-gradient(145deg, #fffdfa 0%, #fff2f2 48%, #ffe6e6 100%);
  box-shadow:
    0 26px 54px rgba(0, 0, 0, .25),
    0 0 30px rgba(217, 116, 116, .13),
    0 0 0 1px rgba(255, 255, 255, .56) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px 18px;
  opacity: 0;
  transform: scale(.2) translateY(18px);
  transform-origin: center;
  overflow: hidden;
}

.reward-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .56), rgba(255, 255, 255, .08) 42%, transparent 72%);
  pointer-events: none;
}

.reward-media {
  width: clamp(132px, 38vw, 210px);
  height: clamp(132px, 38vw, 210px);
  border-radius: 28px;
  overflow: visible;
  display: grid;
  place-items: center;
  background: transparent;
  position: relative;
}

.reward-media::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 156, 156, .15), rgba(217, 116, 116, .07) 46%, transparent 74%);
  filter: blur(8px);
  z-index: 0;
}

.reward-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(120, 58, 58, .15));
}

.reward-emoji {
  position: relative;
  z-index: 1;
  font-size: clamp(42px, 10vw, 70px);
  animation: rewardItemFloat 2.4s ease-in-out infinite;
}

.reward-name {
  font-size: clamp(17px, 4.4vw, 25px);
  line-height: 1.15;
  font-weight: 950;
  text-align: center;
  color: #402121;
  margin-top: 2px;
  word-break: break-word;
}

.reward-code {
  font-size: clamp(10px, 2.8vw, 13px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .14em;
  color: #9e6969;
  text-align: center;
  word-break: break-word;
}

.overlay.reward-shown .reward-ray { animation: rewardRayIn .9s ease forwards, spinRay 12s linear infinite .9s; }
.overlay.reward-shown .reward-glow { animation: rewardGlowPulse 1.25s ease-in-out infinite alternate; }
.overlay.reward-shown .orbit-1 { animation: orbitIn .6s ease forwards, orbitSpin 9s linear infinite .7s; }
.overlay.reward-shown .orbit-2 { animation: orbitIn .7s ease forwards, orbitSpinReverse 12s linear infinite .8s; }
.overlay.reward-shown .reward-shell { animation: rewardPopVertical .72s cubic-bezier(.2,.9,.2,1) forwards; }
.overlay.reward-shown .reward-media img { animation: rewardItemFloat 2.4s ease-in-out infinite; }

.shake-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 96px;
  z-index: 8;
  padding: 0 18px;
  text-align: center;
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
}

.overlay.reveal-start .shake-copy {
  opacity: .12;
  transform: translateY(8px);
}

.shake-hint {
  font-size: 13px;
  line-height: 1.42;
  color: #fff3f3;
}

.shake-hint strong {
  color: #f39d9d;
  text-shadow: 0 0 14px rgba(217, 116, 116, .22);
}

.shake-subhint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 243, 243, .58);
}

.result-actions {
  flex: 0 0 auto;
  padding: 10px 12px max(14px, env(safe-area-inset-bottom));
  display: grid;
  gap: 9px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: all .35s ease;
  position: relative;
  z-index: 12;
}

.result-actions.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.result-action,
.result-close {
  width: 100%;
  height: 45px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.result-action {
  border: 0;
  background: linear-gradient(180deg, #d88383 0%, #b94b4b 100%);
  color: #281010;
  box-shadow: 0 12px 22px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .34);
}

.result-close {
  border: 1px solid rgba(255, 190, 190, .14);
  background: rgba(255, 255, 255, .055);
  color: #ffeded;
  backdrop-filter: blur(4px);
}

.result-action:active,
.result-close:active,
.icon-btn:active { transform: scale(.99); }

@keyframes premiumItemFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.018); }
}

@keyframes flashBurst {
  0% { opacity: 0; transform: scale(.35); }
  22% { opacity: .96; transform: scale(.78); }
  60% { opacity: .62; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.72); }
}

@keyframes curtainTopSoft {
  0% { transform: translateY(0); }
  18% { transform: translateY(5px); }
  55% { transform: translateY(-62%); }
  100% { transform: translateY(-105%); }
}

@keyframes curtainBottomSoft {
  0% { transform: translateY(0); }
  18% { transform: translateY(-5px); }
  55% { transform: translateY(62%); }
  100% { transform: translateY(105%); }
}

@keyframes confettiFall {
  0% { transform: translate3d(0, -12vh, 0) rotate(0deg) scale(.85); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate3d(var(--x-shift), 115vh, 0) rotate(var(--rot)) scale(1.04); opacity: 1; }
}

@keyframes idleFloatSoft {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -7px, 0) scale(1.025); }
}

@keyframes listeningSoft {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  20% { transform: translate3d(-7px,0,0) rotate(-8deg) scale(1.03); }
  40% { transform: translate3d(7px,0,0) rotate(8deg) scale(1.035); }
  60% { transform: translate3d(-6px,0,0) rotate(-6deg) scale(1.02); }
  80% { transform: translate3d(6px,0,0) rotate(6deg) scale(1.02); }
}

@keyframes deviceImpactSoft {
  0% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  18% { transform: translate3d(-14px,0,0) scale(.94) rotate(-13deg); }
  38% { transform: translate3d(15px,0,0) scale(1.07) rotate(13deg); }
  60% { transform: translate3d(-8px,0,0) scale(1) rotate(-7deg); }
  100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
}

@keyframes deviceAuraSoft {
  0%, 100% { opacity: .68; transform: scale(.92); }
  50% { opacity: .96; transform: scale(1.08); }
}

@keyframes rewardRayIn {
  0% { opacity: 0; transform: scale(.35) rotate(0deg); }
  100% { opacity: .66; transform: scale(1) rotate(0deg); }
}

@keyframes spinRay {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(360deg); }
}

@keyframes rewardGlowPulse {
  0% { opacity: .50; transform: scale(.94); }
  100% { opacity: .82; transform: scale(1.12); }
}

@keyframes orbitIn {
  0% { opacity: 0; transform: scale(.55); }
  100% { opacity: .54; transform: scale(1); }
}

@keyframes orbitSpin {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(360deg); }
}

@keyframes orbitSpinReverse {
  0% { transform: scale(1) rotate(360deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes rewardPopVertical {
  0% { opacity: 0; transform: scale(.22) translateY(18px); }
  55% { opacity: 1; transform: scale(1.06) translateY(0); }
  78% { opacity: 1; transform: scale(.985) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes rewardItemFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.025); }
}

@media (max-height: 720px) {
  .screen { gap: 7px; padding-top: max(9px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .logo-box { width: 62px; height: 62px; border-radius: 20px; margin-bottom: 6px; }
  .title { font-size: clamp(16px, 3.9vw, 20px); }
  .subtitle { font-size: 10.5px; line-height: 1.32; }
  .gift-grid { gap: 7px; }
  .token-box { padding: 10px; }
  .token-input { height: 40px; }
  .shake-btn { height: 42px; }
  .shake-copy { bottom: 90px; }
  .reward-shell { width: 164px; min-height: 210px; border-radius: 26px; padding: 16px 14px 14px; }
  .reward-media { width: 112px; height: 112px; }
  .shake-device { width: clamp(112px, 30vw, 140px); }
}

@media (max-width: 390px) {
  .screen { padding-left: 10px; padding-right: 10px; }
  .gift-grid { gap: 6px; }
  .gift-image { padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.screen {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.4vh, 14px);
  padding-top: max(14px, env(safe-area-inset-top));
}

.top-area {
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.hero {
  position: relative;
  display: block;
  padding: 12px 13px;
  border: 1px solid rgba(255, 190, 190, .12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 156, 156, .12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018)),
    linear-gradient(180deg, rgba(56, 22, 22, .82), rgba(31, 10, 10, .90));
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 116, 116, .34), transparent);
  opacity: .85;
  pointer-events: none;
}

.brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  text-align: left;
}

.logo-box {
  width: clamp(58px, 14vw, 70px);
  height: clamp(58px, 14vw, 70px);
  margin: 0;
  border-radius: 20px;
  border-color: rgba(255, 190, 190, .15);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025)),
    linear-gradient(180deg, #421a1a 0%, #240c0c 100%);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 0 18px rgba(184, 80, 80, .10);
  flex: 0 0 auto;
}

.logo-box::before {
  inset: 7px;
  border-radius: 15px;
  border-color: rgba(255, 255, 255, .055);
}

.logo-box::after {
  opacity: .55;
}

.brand-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.title {
  font-size: clamp(18px, 4.2vw, 23px);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-align: left;
  text-wrap: balance;
}

.subtitle {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: clamp(10.5px, 2.65vw, 12.5px);
  line-height: 1.38;
  color: rgba(255, 243, 243, .66);
}

.story-panel {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(255, 190, 190, .11);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    linear-gradient(180deg, rgba(46, 17, 17, .80), rgba(24, 7, 7, .82));
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .035);
  overflow: hidden;
}

.story-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 0%, rgba(217, 116, 116, .075), transparent 42%),
    radial-gradient(circle at 88% 100%, rgba(255, 156, 156, .08), transparent 48%);
  pointer-events: none;
}

.story-panel-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 3px;
  min-height: 16px;
  color: rgba(255, 243, 243, .52);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.story-panel-head i {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 116, 116, .28), transparent);
  opacity: .72;
}

.bro-highlight-slot {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
  border-radius: 17px;
  background: rgba(22, 7, 7, .55);
}

.bro-highlight-slot iframe,
.bro-highlight-slot > *:not(script) {
  max-width: 100% !important;
  border-radius: 17px !important;
}

.gift-grid {
  margin-top: 0;
}

@media (max-width: 390px) {
  .screen {
    gap: 9px;
    padding-inline: 10px;
  }

  .top-area {
    gap: 8px;
  }

  .hero {
    padding: 10px 11px;
    border-radius: 21px;
  }

  .brand {
    gap: 10px;
  }

  .logo-box {
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }

  .title {
    font-size: 17px;
  }

  .subtitle {
    font-size: 10px;
    line-height: 1.32;
  }

  .story-panel {
    padding: 8px;
    border-radius: 20px;
  }

  .story-panel-head {
    font-size: 9px;
  }
}

@media (max-height: 700px) {
  .hero {
    padding-block: 9px;
  }

  .logo-box {
    width: 52px;
    height: 52px;
    border-radius: 17px;
  }

  .brand-copy {
    gap: 3px;
  }

  .subtitle {
    font-size: 10px;
    line-height: 1.26;
  }

  .story-panel {
    padding: 7px;
    gap: 5px;
  }

  .story-panel-head {
    min-height: 13px;
  }
}

.overlay.reward-shown {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 138, 138, .20), transparent 24%),
    radial-gradient(circle at 18% 22%, rgba(255, 73, 73, .18), transparent 28%),
    radial-gradient(circle at 82% 76%, rgba(255, 76, 76, .16), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(217, 116, 116, .18), transparent 35%),
    linear-gradient(180deg, #471111 0%, #1f0909 54%, #0d0404 100%);
}

.reward-stage::before,
.reward-stage::after {
  content: "";
  position: absolute;
  width: clamp(280px, 76vw, 520px);
  height: clamp(280px, 76vw, 520px);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.reward-stage::before {
  background:
    conic-gradient(
      from 0deg,
      transparent 0 10deg,
      rgba(255, 82, 82, .34) 10deg 18deg,
      transparent 18deg 35deg,
      rgba(255, 72, 72, .28) 35deg 46deg,
      transparent 46deg 72deg,
      rgba(255, 74, 74, .28) 72deg 84deg,
      transparent 84deg 120deg,
      rgba(217, 116, 116, .32) 120deg 132deg,
      transparent 132deg 360deg
    );
  filter: blur(.2px);
}

.reward-stage::after {
  width: clamp(210px, 58vw, 360px);
  height: clamp(210px, 58vw, 360px);
  border: 1px dashed rgba(255, 82, 82, .42);
  box-shadow:
    0 0 34px rgba(255, 82, 82, .16),
    inset 0 0 28px rgba(255, 156, 156, .12);
}

.overlay.reward-shown .reward-stage::before {
  animation: rewardCarnivalSpin 9s linear infinite, rewardFadeIn .6s ease forwards;
}

.overlay.reward-shown .reward-stage::after {
  animation: rewardCarnivalSpinReverse 13s linear infinite, rewardFadeIn .7s ease forwards;
}

.reward-ray {
  background:
    conic-gradient(
      from 0deg,
      transparent 0 12deg,
      rgba(255, 82, 82, .55) 12deg 24deg,
      transparent 24deg 52deg,
      rgba(255, 93, 93, .36) 52deg 64deg,
      transparent 64deg 96deg,
      rgba(255, 104, 104, .36) 96deg 108deg,
      transparent 108deg 150deg,
      rgba(255, 255, 255, .30) 150deg 162deg,
      transparent 162deg 360deg
    );
  filter: drop-shadow(0 0 18px rgba(255, 82, 82, .28));
}

.reward-glow {
  background:
    radial-gradient(circle, rgba(255, 120, 120, .62) 0%, rgba(255, 77, 77, .24) 34%, rgba(255, 80, 80, .22) 54%, transparent 74%);
  filter: blur(18px);
}

.reward-shell {
  width: clamp(210px, 68vw, 330px);
  min-height: clamp(255px, 74vw, 405px);
  border-radius: 34px;
  padding: 19px 16px 21px;
  gap: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(255, 220, 220, .98) 44%, rgba(255, 241, 241, .98) 100%);
  border: 2px solid rgba(255, 82, 82, .68);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .36),
    0 0 0 5px rgba(255, 82, 82, .10),
    0 0 34px rgba(255, 82, 82, .25),
    0 0 58px rgba(255, 65, 65, .14),
    inset 0 1px 0 rgba(255, 255, 255, .84);
}

.reward-shell::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .06) 42%, transparent 68%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 82, 82, .10) 0 7px,
      rgba(255, 107, 107, .08) 7px 14px,
      rgba(255, 104, 104, .07) 14px 21px
    );
}

.reward-shell::after {
  content: "🎉 JACKPOT 🎉";
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ff6c6c, #d82929);
  color: #3b0000;
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 1000;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow:
    0 8px 18px rgba(96, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  z-index: 3;
}

.reward-media {
  width: clamp(145px, 43vw, 225px);
  height: clamp(145px, 43vw, 225px);
  margin-top: 18px;
  border-radius: 30px;
}

.reward-media::before {
  inset: 2%;
  background:
    radial-gradient(circle, rgba(255, 82, 82, .30), rgba(255, 83, 83, .10) 44%, rgba(255, 90, 90, .12) 62%, transparent 78%);
  filter: blur(12px);
}

.reward-media img {
  filter:
    drop-shadow(0 18px 24px rgba(100, 36, 36, .22))
    drop-shadow(0 0 16px rgba(255, 82, 82, .22));
}

.reward-name[hidden] {
  display: none !important;
}

.reward-code {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 96%;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .34), transparent 42%),
    linear-gradient(135deg, #ff3f3f 0%, #ff2e2e 46%, #ff5a5a 100%);
  border: 2px solid rgba(255, 255, 255, .70);
  color: #ffffff;
  font-size: clamp(19px, 6vw, 30px);
  line-height: 1.12;
  font-weight: 1000;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  word-break: break-word;
  text-shadow:
    0 2px 0 rgba(84, 0, 0, .36),
    0 0 16px rgba(88, 0, 0, .20);
  box-shadow:
    0 12px 22px rgba(96, 0, 0, .18),
    0 0 24px rgba(255, 82, 82, .28),
    inset 0 1px 0 rgba(255, 255, 255, .52);
  animation: rewardCodePulse 1.35s ease-in-out infinite;
}

.reward-code::before {
  content: "HADIAH KAMU";
  display: block;
  margin-bottom: 5px;
  color: rgba(60, 0, 0, .78);
  font-size: clamp(9px, 2.4vw, 11px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .16em;
  text-shadow: none;
}

.overlay.reward-shown .reward-shell {
  animation: rewardPopVertical .72s cubic-bezier(.2,.9,.2,1) forwards, rewardShellGlow 1.6s ease-in-out infinite .75s;
}

.result-actions {
  gap: 10px;
}

.result-action {
  height: 50px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #ff7676 0%, #f63a3a 52%, #d81717 100%);
  color: #2a0000;
  font-size: 14px;
  letter-spacing: .01em;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .32),
    0 0 24px rgba(255, 82, 82, .22),
    inset 0 1px 0 rgba(255, 255, 255, .62);
  position: relative;
  overflow: hidden;
}

.result-action::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -35%;
  width: 28%;
  height: 220%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(22deg);
  animation: rewardButtonShine 2.2s ease-in-out infinite;
}

.result-close {
  height: 46px;
  border-radius: 17px;
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 82, 82, .18);
}

@keyframes rewardCarnivalSpin {
  0% { opacity: .72; transform: scale(.98) rotate(0deg); }
  100% { opacity: .72; transform: scale(.98) rotate(360deg); }
}

@keyframes rewardCarnivalSpinReverse {
  0% { opacity: .42; transform: scale(1) rotate(360deg); }
  100% { opacity: .42; transform: scale(1) rotate(0deg); }
}

@keyframes rewardFadeIn {
  from { opacity: 0; }
  to { opacity: .7; }
}

@keyframes rewardCodePulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-2px) scale(1.025);
    filter: brightness(1.08);
  }
}

@keyframes rewardShellGlow {
  0%, 100% {
    box-shadow:
      0 30px 70px rgba(0, 0, 0, .36),
      0 0 0 5px rgba(255, 82, 82, .10),
      0 0 34px rgba(255, 82, 82, .25),
      0 0 58px rgba(255, 65, 65, .14),
      inset 0 1px 0 rgba(255, 255, 255, .84);
  }
  50% {
    box-shadow:
      0 34px 78px rgba(0, 0, 0, .40),
      0 0 0 6px rgba(255, 82, 82, .15),
      0 0 46px rgba(255, 82, 82, .36),
      0 0 78px rgba(255, 65, 65, .22),
      inset 0 1px 0 rgba(255, 255, 255, .90);
  }
}

@keyframes rewardButtonShine {
  0% { left: -45%; opacity: 0; }
  18% { opacity: 1; }
  44% { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

@media (max-height: 720px) {
  .reward-shell {
    width: 205px;
    min-height: 250px;
    border-radius: 30px;
    padding: 17px 13px 18px;
  }

  .reward-shell::after {
    top: 9px;
  }

  .reward-media {
    width: 132px;
    height: 132px;
    margin-top: 16px;
  }

  .reward-code {
    font-size: clamp(17px, 5.2vw, 24px);
    padding: 10px 12px;
  }
}

@media (max-width: 360px) {
  .reward-shell {
    width: 198px;
    min-height: 245px;
  }

  .reward-media {
    width: 128px;
    height: 128px;
  }

  .reward-code {
    font-size: 17px;
    border-radius: 16px;
  }
}


.overlay.reward-shown .reward-stage::before,
.overlay.reward-shown .reward-stage::after {
  width: min(132vw, 760px) !important;
  height: min(132vw, 760px) !important;
}

.overlay.reward-shown .reward-ray {
  width: min(124vw, 700px) !important;
  height: min(124vw, 700px) !important;
  opacity: .92 !important;
  filter: drop-shadow(0 0 22px rgba(255, 82, 82, .24)) !important;
}

.overlay.reward-shown .reward-glow {
  width: min(118vw, 640px) !important;
  height: min(118vw, 640px) !important;
  opacity: .92 !important;
}

.overlay.reward-shown .reward-shell {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 112, 112, .16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03) 28%, rgba(255, 255, 255, .00) 55%),
    linear-gradient(160deg, rgba(86, 33, 33, .98) 0%, rgba(58, 22, 22, .985) 52%, rgba(42, 14, 14, .99) 100%) !important;
  border: 2px solid rgba(240, 96, 96, .82) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, .36),
    0 0 0 4px rgba(240, 96, 96, .08),
    0 0 24px rgba(255, 116, 116, .14),
    0 0 54px rgba(255, 102, 102, .12),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

.overlay.reward-shown .reward-shell::before {
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 255, 255, .72) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 18% 28%, rgba(255, 120, 120, .82) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .68) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 76% 30%, rgba(255, 124, 124, .72) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 24% 74%, rgba(255, 124, 124, .68) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 88% 74%, rgba(255, 120, 120, .82) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 56% 82%, rgba(255, 255, 255, .72) 0 1.2px, transparent 2.2px),
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 34%, transparent 74%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, .025) 0 12px,
      transparent 12px 24px
    ) !important;
  animation: rewardStarsDrift 6s linear infinite alternate, rewardSoftGlow 2.8s ease-in-out infinite !important;
}

.overlay.reward-shown .reward-shell::after {
  content: "" !important;
  width: clamp(112px, 34vw, 152px) !important;
  height: clamp(38px, 11vw, 46px) !important;
  padding: 0 !important;
  top: 11px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background:
    url('assets/logo1.png') center / 82% auto no-repeat,
    linear-gradient(180deg, rgba(136, 53, 53, .98), rgba(86, 29, 29, .98)) !important;
  border: 1px solid rgba(240, 96, 96, .36) !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, .24),
    0 0 18px rgba(210, 98, 98, .18),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

.overlay.reward-shown .reward-media {
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .10), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 12px 22px rgba(0, 0, 0, .18) !important;
}

.overlay.reward-shown .reward-media::before {
  inset: 1% !important;
  background: radial-gradient(circle, rgba(255, 117, 117, .22), rgba(255, 108, 108, .10) 50%, transparent 74%) !important;
  filter: blur(12px) !important;
}

.overlay.reward-shown .reward-media::after {
  content: "✦" !important;
  right: 10px !important;
  top: 8px !important;
  color: #ff7a7a !important;
  font-size: 22px !important;
  text-shadow: 0 0 12px rgba(255, 120, 120, .95), 0 0 20px rgba(255, 120, 120, .45) !important;
  animation: rewardTwinklePop 1.5s ease-in-out infinite !important;
}

.overlay.reward-shown .reward-media img {
  filter:
    drop-shadow(0 16px 24px rgba(58, 18, 18, .28))
    drop-shadow(0 0 14px rgba(255, 112, 112, .12)) !important;
}

@keyframes rewardTwinklePop {
  0%, 100% { transform: scale(.84) rotate(0deg); opacity: .56; }
  50% { transform: scale(1.2) rotate(16deg); opacity: 1; }
}

@keyframes rewardStarsDrift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 3px -4px, -4px 3px, 2px -2px, -3px 3px, 2px 2px, -2px -2px, 2px -1px, 0 0, 0 0; }
}

@keyframes rewardSoftGlow {
  0%, 100% { opacity: .92; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.08); }
}

@media (max-width: 420px) {
  .overlay.reward-shown .reward-stage::before,
  .overlay.reward-shown .reward-stage::after {
    width: 138vw !important;
    height: 138vw !important;
  }

  .overlay.reward-shown .reward-ray {
    width: 132vw !important;
    height: 132vw !important;
  }

  .overlay.reward-shown .reward-glow {
    width: 124vw !important;
    height: 124vw !important;
  }
}

.overlay.reward-shown .reward-media {
  width: clamp(168px, 52vw, 260px) !important;
  height: clamp(168px, 52vw, 260px) !important;
  max-width: 100% !important;
  margin-top: 16px !important;
}

.overlay.reward-shown .reward-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform: scale(1.08) !important;
}

.overlay.reward-shown .reward-code {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 88px !important;
  padding: 14px 16px !important;
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}

.overlay.reward-shown .reward-code::before {
  content: "SELAMAT HADIAH KAMU" !important;
  display: block !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(16px, 4.8vw, 28px) !important;
  line-height: 1.12 !important;
  font-weight: 1000 !important;
  letter-spacing: .03em !important;
  text-align: center !important;
  text-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
}

@media (max-width: 420px) {
  .overlay.reward-shown .reward-media {
    width: clamp(172px, 54vw, 250px) !important;
    height: clamp(172px, 54vw, 250px) !important;
  }

  .overlay.reward-shown .reward-code {
    min-height: 82px !important;
    padding: 12px 14px !important;
  }

  .overlay.reward-shown .reward-code::before {
    font-size: clamp(15px, 4.6vw, 24px) !important;
  }
}

.overlay.reward-shown .reward-code {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 74px !important;
  padding: 12px 16px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(122, 46, 46, .96) 0%, rgba(92, 34, 34, .98) 100%) !important;
  border: 1.5px solid rgba(245, 111, 111, .72) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(255, 255, 255, .08) inset,
    0 0 20px rgba(224, 94, 94, .20),
    0 0 36px rgba(245, 111, 111, .10) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.overlay.reward-shown .reward-code::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 26%, transparent 58%),
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, .22) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 84% 28%, rgba(255, 132, 132, .28) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 22% 78%, rgba(255, 119, 119, .18) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 78% 74%, rgba(255, 96, 96, .18) 0 1.3px, transparent 2.3px) !important;
  opacity: .92 !important;
  pointer-events: none !important;
}

.overlay.reward-shown .reward-code::before {
  content: "SELAMAT HADIAH KAMU" !important;
  position: relative !important;
  z-index: 2 !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 6px !important;
  color: #fffdf8 !important;
  font-size: clamp(12px, 3.25vw, 16px) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, .28),
    0 0 10px rgba(255, 255, 255, .08) !important;
}

@media (max-width: 420px) {
  .overlay.reward-shown .reward-code {
  min-height: 48px !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
}

  .overlay.reward-shown .reward-code::before {
    font-size: clamp(11px, 3.2vw, 14px) !important;
    letter-spacing: .08em !important;
  }
}

/* MENYATUKAN LOGO + BOX UCAPAN DENGAN BOX UTAMA */

.overlay.reward-shown .reward-shell {
  overflow: hidden !important;
  padding-top: 54px !important;
  padding-bottom: 14px !important;
  border-radius: 28px !important;
}

.overlay.reward-shown .reward-shell::after {
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: clamp(108px, 33vw, 145px) !important;
  height: clamp(36px, 10vw, 44px) !important;
  border-radius: 18px !important;
  background:
    url('assets/logo1.png') center / 80% auto no-repeat,
    linear-gradient(180deg, rgba(132, 49, 49, .98), rgba(92, 30, 30, .98)) !important;
  border: 1px solid rgba(245, 111, 111, .45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px rgba(255, 255, 255, .04) !important;
}

.overlay.reward-shown .reward-media {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

.overlay.reward-shown .reward-code {
  position: relative !important;
  width: calc(100% - 8px) !important;
  margin: -2px auto 0 !important;
  min-height: 54px !important;
  padding: 10px 14px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(120, 45, 45, .98) 0%, rgba(94, 33, 33, .99) 100%) !important;
  border: 1px solid rgba(245, 111, 111, .40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 1px rgba(255, 255, 255, .03) !important;
}

.overlay.reward-shown .reward-code::before {
  content: "SELAMAT HADIAH KAMU" !important;
  font-size: clamp(10px, 2.9vw, 13px) !important;
  letter-spacing: .08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: #fffdf8 !important;
}

.overlay.reward-shown .reward-code::after {
  content: "" !important;
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 72% !important;
  height: 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(109, 40, 40, .95), rgba(96, 34, 34, .95)) !important;
  border-top: 1px solid rgba(245, 111, 111, .18) !important;
  border-left: 1px solid rgba(245, 111, 111, .10) !important;
  border-right: 1px solid rgba(245, 111, 111, .10) !important;
  box-shadow: none !important;
  z-index: 0 !important;
}

.overlay.reward-shown .reward-shell {
  overflow: hidden !important;
  padding-top: 54px !important;
  padding-bottom: 12px !important;
  border-radius: 28px !important;
}

/* LOGO MASUK KE DALAM CARD */
.overlay.reward-shown .reward-shell::after {
  content: "" !important;
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: clamp(108px, 33vw, 145px) !important;
  height: clamp(34px, 9.5vw, 42px) !important;
  padding: 0 !important;
  border-radius: 16px !important;
  background:
    url('assets/logo1.png') center / 82% auto no-repeat,
    linear-gradient(180deg, rgba(132, 49, 49, .98), rgba(92, 30, 30, .98)) !important;
  border: 1px solid rgba(245, 111, 111, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px rgba(255, 255, 255, .035),
    0 8px 16px rgba(0, 0, 0, .16) !important;
  z-index: 6 !important;
}

/* GAMBAR TETAP FULL DAN RAPI */
.overlay.reward-shown .reward-media {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* BOX UCAPAN MENYATU DENGAN CARD */
.overlay.reward-shown .reward-code {
  position: relative !important;
  width: calc(100% - 10px) !important;
  min-height: 48px !important;
  margin: -1px auto 0 !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(120, 45, 45, .98) 0%, rgba(94, 33, 33, .99) 100%) !important;
  border: 1px solid rgba(245, 111, 111, .40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 1px rgba(255, 255, 255, .025) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* JEMBATAN KECIL BIAR BOX BAWAH TIDAK TERASA PISAH */
.overlay.reward-shown .reward-code::after {
  content: "" !important;
  position: absolute !important;
  top: -11px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 76% !important;
  height: 13px !important;
  border-radius: 14px 14px 0 0 !important;
  background:
    linear-gradient(180deg, rgba(109, 40, 40, .96), rgba(96, 34, 34, .98)) !important;
  border-top: 1px solid rgba(245, 111, 111, .15) !important;
  border-left: 1px solid rgba(245, 111, 111, .08) !important;
  border-right: 1px solid rgba(245, 111, 111, .08) !important;
  box-shadow: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* TULISAN UCAPAN */
.overlay.reward-shown .reward-code::before {
  content: "SELAMAT HADIAH KAMU" !important;
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fffdf8 !important;
  font-size: clamp(9px, 2.7vw, 12px) !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, .25),
    0 0 10px rgba(255, 255, 255, .08) !important;
}

.overlay.reward-shown .reward-code {
  animation: rewardUnifiedSoftGlow 2.4s ease-in-out infinite !important;
}

@keyframes rewardUnifiedSoftGlow {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      0 0 0 1px rgba(255, 255, 255, .025);
  }
  50% {
    filter: brightness(1.05);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .11),
      0 0 0 1px rgba(255, 255, 255, .03),
      0 0 16px rgba(255, 120, 120, .16);
  }
}

@media (max-width: 420px) {
  .overlay.reward-shown .reward-shell {
    padding-top: 52px !important;
  }

  .overlay.reward-shown .reward-code {
    min-height: 46px !important;
    padding: 7px 10px !important;
    border-radius: 15px !important;
  }

  .overlay.reward-shown .reward-code::before {
    font-size: clamp(8.5px, 2.65vw, 11px) !important;
    letter-spacing: .07em !important;
  }
}


.token-step {
  display: grid;
  gap: 10px;
}

.token-step[hidden] {
  display: none !important;
}

.token-label {
  margin-bottom: 0 !important;
}

.token-input {
  margin: 0 !important;
}

.token-step .shake-btn,
.token-step .member-next-btn {
  margin-top: 2px !important;
}

.token-msg {
  margin-top: 12px !important;
  padding-top: 2px;
}

.token-box {
  padding: clamp(14px, 2.2vh, 18px) !important;
}

.shake-subnote {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 96px;
  z-index: 8;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 190, 190, .14);
  background: rgba(28, 8, 8, .62);
  color: rgba(255, 243, 243, .82);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .25s ease, transform .25s ease;
}

.overlay.reveal-start .shake-subnote,
.overlay.reward-shown .shake-subnote {
  opacity: 0 !important;
  transform: translateY(8px);
  pointer-events: none;
}

/* Pastikan tombol claim/tutup tetap sebagai footer overlay, bukan numpuk di atas hadiah. */
.result-actions {
  flex: 0 0 auto;
  position: relative;
  z-index: 20;
}

.result-actions[hidden] {
  display: none !important;
}

.result-actions.show {
  display: grid !important;
}

/* Saat overlay aktif, tombol floating HUBUNGI jangan menutup area shake. */
.app:has(.overlay.show) ~ #ua-side-contact,
body:has(.overlay.show) #ua-side-contact {
  display: none !important;
}

@media (max-height: 720px) {
  .shake-subnote {
    bottom: 86px;
    font-size: 11px;
    padding: 9px 10px;
  }
}

.screenshot-btn {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  cursor: pointer !important;
  color: #f7b5b5 !important;
  border: 1px solid rgba(245, 111, 111, .46) !important;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .28), transparent 34%),
    linear-gradient(145deg, rgba(202, 78, 78, .88), rgba(72, 24, 24, .96) 58%, rgba(42, 13, 13, .98)) !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(255, 255, 255, .07) inset,
    0 0 20px rgba(255, 116, 116, .18),
    0 0 22px rgba(245, 111, 111, .10) !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

.screenshot-btn:hover {
  filter: brightness(1.08) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(255, 255, 255, .10) inset,
    0 0 24px rgba(255, 116, 116, .24),
    0 0 26px rgba(245, 111, 111, .14) !important;
}

.screenshot-btn:active {
  transform: scale(.96) !important;
}

.screenshot-btn svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter:
    drop-shadow(0 0 6px rgba(245, 111, 111, .22))
    drop-shadow(0 1px 2px rgba(0, 0, 0, .22)) !important;
  pointer-events: none !important;
}

.screenshot-btn:not(:has(svg)) {
  font-size: 0 !important;
}

.screenshot-btn:not(:has(svg))::before {
  content: "" !important;
  width: 21px !important;
  height: 15px !important;
  border: 2px solid currentColor !important;
  border-radius: 6px !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 4px, currentColor 4.4px 5.9px, transparent 6.2px),
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)) !important;
  display: block !important;
  position: relative !important;
  box-shadow: 0 0 8px rgba(245, 111, 111, .18) !important;
}

.screenshot-btn:not(:has(svg))::after {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 12px !important;
  width: 9px !important;
  height: 5px !important;
  border-radius: 5px 5px 2px 2px !important;
  background: currentColor !important;
  opacity: .95 !important;
}

.screenshot-btn.is-capturing {
  pointer-events: none !important;
  opacity: .78 !important;
  transform: scale(.96) !important;
  filter: brightness(.95) !important;
}

.screenshot-btn .capture-loader {
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(246, 184, 184, .28) !important;
  border-top-color: #f7b5b5 !important;
  animation: broCaptureSpin .8s linear infinite !important;
}

body.bro-capturing-shot,
body.bro-capturing-shot .app,
body.bro-capturing-shot .overlay {
  background-color: #140606 !important;
}

body.bro-capturing-shot .overlay {
  background:
    radial-gradient(circle at 50% 15%, rgba(217, 116, 116, .16), transparent 34%),
    radial-gradient(circle at 52% 76%, rgba(184, 80, 80, .24), transparent 45%),
    linear-gradient(180deg, #351010 0%, #1d0909 52%, #0d0404 100%) !important;
}

body.bro-capturing-shot .reward-shell {
  box-shadow:
    0 30px 72px rgba(0, 0, 0, .42),
    0 0 0 4px rgba(240, 96, 96, .08),
    0 0 28px rgba(255, 116, 116, .16),
    0 0 58px rgba(255, 102, 102, .13),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

body.bro-capturing-shot .screenshot-btn {
  visibility: hidden !important;
}

@keyframes broCaptureSpin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   IBETWIN SOFT RED + BLACK THEME
   Main UI = black/charcoal + restrained red accent.
   Semantic notifications intentionally use distinct colors:
   error = red, success = green, warning = orange, info = blue.
   ========================================================= */

:root {
  --soft-black-0: #07080a;
  --soft-black-1: #0b0c0f;
  --soft-black-2: #111216;
  --soft-black-3: #17181d;
  --soft-red: #a92f34;
  --soft-red-2: #c43d43;
  --soft-red-glow: rgba(196, 61, 67, .13);
  --soft-border: rgba(255, 255, 255, .085);
  --soft-border-strong: rgba(255, 255, 255, .14);
  --soft-text: #f5f5f6;
  --soft-muted: #a7a8ad;

  --notice-error: #ff5f68;
  --notice-error-bg: rgba(255, 95, 104, .09);
  --notice-success: #45d483;
  --notice-success-bg: rgba(69, 212, 131, .09);
  --notice-warning: #f2a93b;
  --notice-warning-bg: rgba(242, 169, 59, .09);
  --notice-info: #64a8ff;
  --notice-info-bg: rgba(100, 168, 255, .09);
}

html,
body {
  background: var(--soft-black-0) !important;
  color: var(--soft-text) !important;
}

body {
  background:
    radial-gradient(circle at 18% 4%, rgba(169, 47, 52, .105), transparent 30%),
    radial-gradient(circle at 82% 92%, rgba(196, 61, 67, .055), transparent 30%),
    linear-gradient(180deg, #0d0e11 0%, #090a0c 56%, #07080a 100%) !important;
}

.app {
  background:
    radial-gradient(circle at 50% -6%, rgba(196, 61, 67, .085), transparent 31%),
    linear-gradient(180deg, rgba(17, 18, 22, .985), rgba(8, 9, 11, .995)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035),
    0 30px 80px rgba(0,0,0,.38) !important;
}

.app::before,
.hero::before,
.token-box::before {
  background: linear-gradient(90deg, transparent, rgba(196, 61, 67, .30), transparent) !important;
}

.hero,
.story-panel,
.gift-card,
.token-box {
  border-color: var(--soft-border) !important;
}

.hero {
  background:
    radial-gradient(circle at 12% 8%, rgba(196, 61, 67, .07), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.012)),
    linear-gradient(180deg, rgba(21,22,26,.96), rgba(12,13,15,.98)) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.logo-box {
  border-color: rgba(196,61,67,.16) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.018)),
    linear-gradient(180deg, #1b1c20 0%, #0e0f12 100%) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 16px rgba(169,47,52,.07) !important;
}

.title,
.overlay-title,
.token-label,
.shake-hint {
  color: var(--soft-text) !important;
}

.subtitle,
.story-panel-head,
.token-msg,
.member-preview,
.shake-subhint {
  color: var(--soft-muted) !important;
}

.story-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.010)),
    linear-gradient(180deg, rgba(18,19,22,.96), rgba(10,11,13,.98)) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.028) !important;
}

.story-panel::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(196,61,67,.045), transparent 42%),
    radial-gradient(circle at 88% 100%, rgba(169,47,52,.035), transparent 48%) !important;
}

.story-panel-head i {
  background: linear-gradient(90deg, rgba(196,61,67,.20), transparent) !important;
}

.bro-highlight-slot {
  background: rgba(8,9,11,.66) !important;
}

.gift-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.012)),
    linear-gradient(180deg, #18191d 0%, #0e0f12 100%) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.018) inset !important;
}

.gift-card::before {
  background:
    linear-gradient(140deg, rgba(255,255,255,.075), transparent 35%),
    radial-gradient(circle at 50% 0%, rgba(196,61,67,.045), transparent 46%) !important;
}

.gift-card::after {
  border-color: rgba(196,61,67,.075) !important;
}

.gift-card:hover {
  border-color: rgba(196,61,67,.24) !important;
  box-shadow:
    0 16px 32px rgba(0,0,0,.29),
    0 0 18px rgba(169,47,52,.095),
    0 0 0 1px rgba(255,255,255,.025) inset !important;
}

.gift-image {
  background:
    radial-gradient(circle at 50% 36%, rgba(196,61,67,.075), transparent 52%),
    linear-gradient(180deg, #1c1d21 0%, #111216 100%) !important;
}

.gift-image::before {
  background: radial-gradient(circle, rgba(196,61,67,.07), rgba(169,47,52,.035) 42%, transparent 72%) !important;
}

.gift-image img {
  filter:
    drop-shadow(0 12px 18px rgba(0,0,0,.26))
    drop-shadow(0 0 8px rgba(196,61,67,.045)) !important;
}

.token-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.014)),
    linear-gradient(180deg, #16171b 0%, #0d0e11 100%) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.025) inset !important;
}

.token-input {
  border-color: rgba(255,255,255,.095) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
    #090a0c !important;
  color: #f7f7f8 !important;
}

.token-input::placeholder {
  color: rgba(244,244,245,.34) !important;
}

.token-input:focus {
  border-color: rgba(196,61,67,.45) !important;
  background: #0d0e11 !important;
  box-shadow:
    0 0 0 3px rgba(196,61,67,.075),
    0 0 16px rgba(169,47,52,.075),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.shake-btn,
.result-action {
  background: linear-gradient(180deg, #b43a40 0%, #8f292e 100%) !important;
  color: #fff !important;
  box-shadow:
    0 12px 22px rgba(0,0,0,.28),
    0 0 16px rgba(169,47,52,.08),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}

.shake-btn:hover,
.result-action:hover {
  filter: brightness(1.06) !important;
}

.member-preview {
  border-color: rgba(255,255,255,.085) !important;
  background: rgba(255,255,255,.025) !important;
}

.member-preview strong {
  color: #fff !important;
}

.member-preview button {
  background: rgba(196,61,67,.12) !important;
  color: #e98c90 !important;
}

.overlay {
  background:
    radial-gradient(circle at 50% 14%, rgba(196,61,67,.10), transparent 42%),
    radial-gradient(circle at 50% 78%, rgba(169,47,52,.05), transparent 34%),
    linear-gradient(180deg, #141519 0%, #0b0c0f 54%, #07080a 100%) !important;
}

.overlay.reward-shown {
  background:
    radial-gradient(circle at 50% 16%, rgba(196,61,67,.13), transparent 25%),
    radial-gradient(circle at 18% 22%, rgba(169,47,52,.09), transparent 29%),
    radial-gradient(circle at 82% 76%, rgba(196,61,67,.07), transparent 31%),
    linear-gradient(180deg, #17181c 0%, #0b0c0f 56%, #07080a 100%) !important;
}

.icon-btn,
.result-close {
  border-color: rgba(255,255,255,.085) !important;
  background: rgba(255,255,255,.035) !important;
  color: #f2f2f3 !important;
}

.curtain-half {
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)),
    linear-gradient(180deg, #1a1b20 0%, #0e0f12 100%) !important;
}

.center-line {
  background: linear-gradient(180deg, transparent, rgba(196,61,67,.08), rgba(255,255,255,.09), rgba(169,47,52,.06), transparent) !important;
}

.shake-device::before {
  background: radial-gradient(circle, rgba(196,61,67,.12), rgba(169,47,52,.035) 44%, transparent 76%) !important;
  box-shadow: 0 0 24px rgba(169,47,52,.08) !important;
}

.reward-glow {
  background: radial-gradient(circle, rgba(196,61,67,.33) 0%, rgba(169,47,52,.13) 40%, transparent 72%) !important;
}

.reward-orbit {
  border-color: rgba(196,61,67,.13) !important;
}

.reward-shell {
  background: linear-gradient(145deg, #fafafa 0%, #f3f3f4 50%, #ececef 100%) !important;
  border-color: rgba(196,61,67,.48) !important;
  box-shadow:
    0 28px 64px rgba(0,0,0,.40),
    0 0 0 4px rgba(196,61,67,.07),
    0 0 28px rgba(169,47,52,.13),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}

.reward-name {
  color: #24252a !important;
}

.reward-code {
  color: #777980 !important;
}

/* Soft overlay helper styles that are defined inline in index.php. */
.shake-subnote {
  border-color: rgba(255,255,255,.09) !important;
  background: rgba(9,10,12,.70) !important;
  color: rgba(245,245,246,.78) !important;
}

.overlay-refresh-btn {
  color: #f1f1f2 !important;
  border-color: rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,.08), transparent 38%),
    linear-gradient(145deg, rgba(28,29,34,.96), rgba(10,11,13,.98)) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.31),
    0 0 0 1px rgba(255,255,255,.035) inset !important;
}

.screenshot-reminder-btn {
  color: #fff !important;
  border-color: rgba(196,61,67,.38) !important;
  background: linear-gradient(180deg, #b63a40, #8f292e) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.31),
    0 0 0 1px rgba(255,255,255,.09) inset,
    0 0 16px rgba(169,47,52,.10) !important;
}

#broClaimReminder {
  background: rgba(4,5,7,.64) !important;
}

#broClaimReminder .bro-reminder-card {
  border-color: rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(196,61,67,.075), transparent 42%),
    linear-gradient(180deg, rgba(22,23,27,.99), rgba(9,10,12,.99)) !important;
  color: #f5f5f6 !important;
  box-shadow:
    0 24px 58px rgba(0,0,0,.48),
    0 0 18px rgba(169,47,52,.07) !important;
}

#broClaimReminder .bro-reminder-icon {
  color: #fff !important;
  background: linear-gradient(180deg, #b63a40, #8f292e) !important;
  box-shadow: 0 0 18px rgba(169,47,52,.10) !important;
}

#broClaimReminder span {
  color: rgba(245,245,246,.72) !important;
}

#broClaimReminder button {
  background: linear-gradient(180deg, #b63a40, #8f292e) !important;
  color: #fff !important;
}

/* Contact widget: black shell with restrained red brand accent. */
#ua-side-contact {
  --ua-gold: #c64248 !important;
  --ua-gold-soft: #dc7478 !important;
  --ua-dark: rgba(12,13,15,.95) !important;
  --ua-dark-soft: rgba(18,19,22,.94) !important;
  --ua-border: rgba(196,61,67,.17) !important;
  --ua-glow: rgba(169,47,52,.09) !important;
}

#ua-side-contact .ua-toggle,
#ua-side-contact .ua-item {
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 12px rgba(169,47,52,.065) !important;
}

#ua-side-contact .ua-label {
  background: rgba(10,11,13,.97) !important;
  color: #e8a2a5 !important;
  border-color: rgba(196,61,67,.15) !important;
}

/* =========================================================
   SEMANTIC NOTIFICATIONS
   These classes are ready for index.js to toggle.
   ========================================================= */

.token-msg.is-error,
.token-msg.error,
.token-msg[data-state="error"],
.token-msg[data-status="error"] {
  color: var(--notice-error) !important;
  background: var(--notice-error-bg) !important;
  border: 1px solid rgba(255,95,104,.20) !important;
  border-radius: 11px;
  padding: 7px 10px;
}

.token-msg.is-success,
.token-msg.success,
.token-msg[data-state="success"],
.token-msg[data-status="success"] {
  color: var(--notice-success) !important;
  background: var(--notice-success-bg) !important;
  border: 1px solid rgba(69,212,131,.20) !important;
  border-radius: 11px;
  padding: 7px 10px;
}

.token-msg.is-warning,
.token-msg.warning,
.token-msg[data-state="warning"],
.token-msg[data-status="warning"] {
  color: var(--notice-warning) !important;
  background: var(--notice-warning-bg) !important;
  border: 1px solid rgba(242,169,59,.20) !important;
  border-radius: 11px;
  padding: 7px 10px;
}

.token-msg.is-info,
.token-msg.info,
.token-msg[data-state="info"],
.token-msg[data-status="info"] {
  color: var(--notice-info) !important;
  background: var(--notice-info-bg) !important;
  border: 1px solid rgba(100,168,255,.20) !important;
  border-radius: 11px;
  padding: 7px 10px;
}

/* Neutral/default message remains soft grey so it is visually distinct. */
.token-msg:not(.is-error):not(.error):not(.is-success):not(.success):not(.is-warning):not(.warning):not(.is-info):not(.info):not([data-state]):not([data-status]) {
  color: #a7a8ad !important;
}

/* =========================================================
   IBETWIN — SOFT LUXURY RED / BLACK
   Strong visual reset: true black surfaces + restrained burgundy/red
   ========================================================= */

:root{
  --lux-black:#050505;
  --lux-black-2:#090909;
  --lux-black-3:#0f0f10;
  --lux-black-4:#151516;
  --lux-card:#111112;
  --lux-card-2:#171718;
  --lux-red:#8f171d;
  --lux-red-2:#b3262e;
  --lux-red-3:#d64b52;
  --lux-red-soft:rgba(179,38,46,.14);
  --lux-red-glow:rgba(179,38,46,.12);
  --lux-line:rgba(255,255,255,.075);
  --lux-line-strong:rgba(255,255,255,.12);
  --lux-text:#f7f5f5;
  --lux-muted:#9d999a;
  --lux-muted-2:#777476;
}

/* GLOBAL */
html,body{
  background:#050505 !important;
  color:var(--lux-text)!important;
}

body{
  background:
    radial-gradient(circle at 12% 0%, rgba(179,38,46,.075), transparent 28%),
    radial-gradient(circle at 88% 100%, rgba(143,23,29,.045), transparent 34%),
    linear-gradient(180deg,#080808 0%,#050505 100%) !important;
}

body::before{
  opacity:.18!important;
}

.app{
  background:
    radial-gradient(circle at 50% -10%, rgba(179,38,46,.085), transparent 34%),
    linear-gradient(180deg,#0c0c0d 0%,#070708 56%,#050505 100%) !important;
  border-left:1px solid rgba(255,255,255,.025)!important;
  border-right:1px solid rgba(255,255,255,.025)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.55)!important;
}

.app::before{
  background:linear-gradient(90deg,transparent,rgba(214,75,82,.32),transparent)!important;
  opacity:.45!important;
}

/* HERO / BRAND */
.hero{
  background:
    linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008)),
    linear-gradient(180deg,#121213 0%,#0c0c0d 100%) !important;
  border:1px solid var(--lux-line)!important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.026)!important;
}

.hero::before{
  background:linear-gradient(90deg,transparent,rgba(179,38,46,.28),transparent)!important;
  opacity:.50!important;
}

.logo-box{
  background:
    radial-gradient(circle at 50% 10%,rgba(214,75,82,.10),transparent 48%),
    linear-gradient(180deg,#171718,#0b0b0c)!important;
  border:1px solid rgba(179,38,46,.18)!important;
  box-shadow:
    0 16px 30px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 20px rgba(143,23,29,.055)!important;
}

.logo-box::after{opacity:.20!important;}

.title{
  color:#fff!important;
  text-shadow:0 8px 24px rgba(0,0,0,.40)!important;
}

.subtitle{
  color:#a7a3a4!important;
}

/* STORY */
.story-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),
    #0d0d0e!important;
  border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.28)!important;
}

.story-panel::before{
  background:
    radial-gradient(circle at 16% 0%,rgba(179,38,46,.038),transparent 42%),
    radial-gradient(circle at 90% 100%,rgba(143,23,29,.025),transparent 48%)!important;
}

.story-panel-head{
  color:#777477!important;
}
.story-panel-head i{
  background:linear-gradient(90deg,rgba(179,38,46,.20),transparent)!important;
}

/* GIFT CARDS */
.gift-grid{gap:10px!important;}

.gift-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.006)),
    #101011!important;
  border:1px solid rgba(255,255,255,.065)!important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.018)!important;
}

.gift-card::before{
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),transparent 36%),
    radial-gradient(circle at 50% 0%,rgba(179,38,46,.035),transparent 50%)!important;
}

.gift-card::after{
  border-color:rgba(179,38,46,.06)!important;
}

.gift-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(179,38,46,.23)!important;
  box-shadow:
    0 18px 36px rgba(0,0,0,.38),
    0 0 0 1px rgba(179,38,46,.035) inset,
    0 0 18px rgba(143,23,29,.065)!important;
}

.gift-image{
  background:
    radial-gradient(circle at 50% 38%,rgba(179,38,46,.05),transparent 55%),
    linear-gradient(180deg,#151516 0%,#0c0c0d 100%)!important;
}

.gift-image::before{
  background:radial-gradient(circle,rgba(214,75,82,.055),rgba(143,23,29,.018) 46%,transparent 74%)!important;
  opacity:.55!important;
}

/* TOKEN AREA */
.token-box{
  background:
    linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),
    #0c0c0d!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.02)!important;
}

.token-box::before{
  background:linear-gradient(90deg,transparent,rgba(179,38,46,.28),transparent)!important;
  opacity:.55!important;
}

.token-label{
  color:#c7c3c4!important;
}

.token-input{
  background:#080809!important;
  color:#f6f4f4!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 8px 20px rgba(0,0,0,.14)!important;
}

.token-input:focus{
  background:#0a0a0b!important;
  border-color:rgba(179,38,46,.50)!important;
  box-shadow:
    0 0 0 3px rgba(179,38,46,.07),
    0 0 18px rgba(143,23,29,.06)!important;
}

.token-input::placeholder{color:#666366!important;}

.shake-btn,
.result-action{
  background:linear-gradient(180deg,#a51f26 0%,#771219 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.055)!important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 18px rgba(143,23,29,.08)!important;
}

.shake-btn:hover,
.result-action:hover{
  filter:brightness(1.07)!important;
  box-shadow:
    0 16px 32px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 22px rgba(143,23,29,.11)!important;
}

.shake-btn:disabled{
  background:linear-gradient(180deg,#3b2224,#251719)!important;
  color:#8d8586!important;
  opacity:.70!important;
}

.member-preview{
  background:#0a0a0b!important;
  border-color:rgba(255,255,255,.07)!important;
  color:#8f8b8d!important;
}
.member-preview strong{color:#f5f3f3!important;}
.member-preview button{
  background:rgba(179,38,46,.11)!important;
  color:#df777c!important;
}

/* OVERLAY / SHAKE */
.overlay{
  background:
    radial-gradient(circle at 50% 12%,rgba(179,38,46,.07),transparent 38%),
    linear-gradient(180deg,#101011 0%,#080809 55%,#050505 100%)!important;
}

.overlay.reward-shown{
  background:
    radial-gradient(circle at 50% 18%,rgba(179,38,46,.105),transparent 28%),
    radial-gradient(circle at 20% 24%,rgba(143,23,29,.052),transparent 30%),
    radial-gradient(circle at 80% 78%,rgba(179,38,46,.045),transparent 34%),
    linear-gradient(180deg,#111112 0%,#080809 58%,#050505 100%)!important;
}

.curtain-half{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.003)),
    linear-gradient(180deg,#131314 0%,#09090a 100%)!important;
}

.center-line{
  background:linear-gradient(180deg,transparent,rgba(179,38,46,.07),rgba(255,255,255,.065),rgba(143,23,29,.04),transparent)!important;
}

.icon-btn{
  background:#0e0e0f!important;
  color:#ebe8e9!important;
  border-color:rgba(255,255,255,.075)!important;
}

.shake-subnote{
  background:rgba(7,7,8,.78)!important;
  border-color:rgba(255,255,255,.07)!important;
  color:#aaa6a7!important;
}

.overlay-refresh-btn{
  background:linear-gradient(180deg,#171718,#0d0d0e)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:#efedef!important;
}

.screenshot-reminder-btn{
  background:linear-gradient(180deg,#9d1c23,#701218)!important;
  border-color:rgba(214,75,82,.32)!important;
  color:#fff!important;
}

/* REWARD — luxury contrast */
.reward-glow{
  background:radial-gradient(circle,rgba(179,38,46,.28) 0%,rgba(143,23,29,.11) 42%,transparent 72%)!important;
  filter:blur(20px)!important;
}

.reward-ray{
  filter:drop-shadow(0 0 12px rgba(143,23,29,.18))!important;
}

.reward-shell{
  background:
    linear-gradient(145deg,#fbfaf9 0%,#f0eeee 52%,#e7e4e4 100%)!important;
  border:1px solid rgba(179,38,46,.34)!important;
  box-shadow:
    0 30px 72px rgba(0,0,0,.48),
    0 0 0 4px rgba(179,38,46,.045),
    0 0 30px rgba(143,23,29,.09),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
}

.reward-shell::after{
  background:linear-gradient(180deg,#a51f26,#761319)!important;
  color:#fff!important;
  box-shadow:
    0 8px 18px rgba(70,0,4,.24),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.reward-name{color:#242225!important;}
.reward-code{color:#7c7779!important;}

/* CONTACT WIDGET */
#ua-side-contact{
  --ua-gold:#b3262e!important;
  --ua-gold-soft:#d85b61!important;
  --ua-dark:rgba(9,9,10,.97)!important;
  --ua-dark-soft:rgba(15,15,16,.96)!important;
  --ua-border:rgba(179,38,46,.14)!important;
  --ua-glow:rgba(143,23,29,.07)!important;
}

#ua-side-contact .ua-toggle{
  background:
    linear-gradient(180deg,rgba(179,38,46,.045),rgba(179,38,46,.01)),
    #09090a!important;
  color:#cf565c!important;
}

#ua-side-contact .ua-item{
  background:
    radial-gradient(circle at 30% 25%,rgba(179,38,46,.055),transparent 46%),
    #0f0f10!important;
}

#ua-side-contact .ua-label{
  background:#0b0b0c!important;
  color:#d18b8f!important;
  border-color:rgba(179,38,46,.12)!important;
}

/* SEMANTIC NOTIFICATION COLORS */
.token-msg{
  color:#8f8b8d!important;
  transition:all .2s ease!important;
}

.token-msg.is-error,
.token-msg.error,
.token-msg[data-state="error"],
.token-msg[data-status="error"]{
  color:#ff6b73!important;
  background:rgba(255,70,80,.085)!important;
  border:1px solid rgba(255,70,80,.20)!important;
  border-radius:11px!important;
  padding:7px 10px!important;
}

.token-msg.is-success,
.token-msg.success,
.token-msg[data-state="success"],
.token-msg[data-status="success"]{
  color:#45d483!important;
  background:rgba(69,212,131,.075)!important;
  border:1px solid rgba(69,212,131,.18)!important;
  border-radius:11px!important;
  padding:7px 10px!important;
}

.token-msg.is-warning,
.token-msg.warning,
.token-msg[data-state="warning"],
.token-msg[data-status="warning"]{
  color:#f1a744!important;
  background:rgba(241,167,68,.075)!important;
  border:1px solid rgba(241,167,68,.18)!important;
  border-radius:11px!important;
  padding:7px 10px!important;
}

.token-msg.is-info,
.token-msg.info,
.token-msg[data-state="info"],
.token-msg[data-status="info"]{
  color:#65a8ff!important;
  background:rgba(101,168,255,.075)!important;
  border:1px solid rgba(101,168,255,.18)!important;
  border-radius:11px!important;
  padding:7px 10px!important;
}