:root {
  --bg: #090a0c;
  --text: #f4f4f5;
  --muted: rgba(244, 244, 245, .68);
  --line: rgba(255, 255, 255, .14);
  --gold: #b83b3b;
  --gold-2: #e56b6b;
  --purple-1: #230d0d;
  --purple-2: #321414;
  --purple-3: #431b1b;
  --purple-4: #b85050;
  --maxw: 430px;
  --brewek-pack-width: 400px;
  --brewek-pack-height: 520px;
  --brewek-pack-y: -18px;

  --brewek-line-top: 120px;
  --brewek-line-left: 25px;
  --brewek-line-right: 22px;
  --brewek-cut-y: 120px;

  --brewek-handle-size: 35px;
}

* {
  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(159, 47, 47, .24), transparent 31%),
    radial-gradient(circle at 78% 88%, rgba(184, 59, 59, .10), transparent 30%),
    linear-gradient(180deg, #151012 0%, #090a0c 54%, #070708 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: .35;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), transparent 78%);
}

button,
input {
  font: inherit;
}

button {
  appearance: none;
}

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

[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(229, 107, 107, .16), transparent 30%),
    linear-gradient(180deg, rgba(18, 19, 22, .95) 0%, rgba(9, 10, 12, .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(184, 59, 59, .45), transparent);
  opacity: .72;
  z-index: 2;
  pointer-events: none;
}

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

.app:has(.overlay.show) > .screen {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.top-area {
  display: grid;
  gap: 7px;
  position: relative;
  z-index: 5;
}

.hero {
  position: relative;
  display: block;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 8%, rgba(229, 107, 107, .12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018)),
    linear-gradient(180deg, rgba(20, 18, 20, .82), rgba(10, 10, 12, .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(184, 59, 59, .34), transparent);
  opacity: .85;
  pointer-events: none;
}

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

.logo-box {
  width: 58px;
  height: 58px;
  margin: 0;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .15);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025)),
    linear-gradient(180deg, #1b1517 0%, #0d0d0f 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(159, 47, 47, .10);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
}

.logo-box::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 14px;
  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%);
  opacity: .55;
  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));
}

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

.title {
  margin: 0;
  font-size: clamp(17px, 4vw, 21px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.03em;
  text-align: left;
  color: #ffffff;
  text-wrap: balance;
  text-shadow:
    0 10px 28px rgba(0, 0, 0, .26),
    0 0 22px rgba(229, 107, 107, .10);
}

.subtitle {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: clamp(10px, 2.55vw, 12px);
  line-height: 1.32;
  color: rgba(244, 244, 245, .66);
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.brewek-pack-section {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 6px 0 8px !important;
  padding: 0 !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(229, 107, 107, .13), transparent 28%),
    radial-gradient(circle at 50% 42%, rgba(229, 107, 107, .33), transparent 48%),
    radial-gradient(circle at 50% 84%, rgba(184, 59, 59, .13), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)),
    linear-gradient(180deg, rgba(18, 17, 19, .92), rgba(8, 8, 10, .96)) !important;
  box-shadow:
    0 20px 42px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -30px 60px rgba(0, 0, 0, .18) !important;
  overflow: hidden !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

.brewek-pack-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -48%;
  right: -48%;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 30%,
      rgba(255, 255, 255, .045) 41%,
      rgba(184, 59, 59, .060) 49%,
      rgba(229, 107, 107, .045) 56%,
      transparent 68%,
      transparent 100%
    );
  opacity: .84;
  z-index: 0;
  pointer-events: none;
  animation: broPackLightSweep 5.8s ease-in-out infinite;
}

.brewek-pack-section::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 56px;
  height: 46px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, .58), rgba(0, 0, 0, .18) 44%, rgba(0, 0, 0, 0) 74%);
  filter: blur(11px);
  opacity: .88;
  pointer-events: none;
  z-index: 1;
}

.brewek-pack-viewport {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  display: block !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  cursor: grab !important;
  z-index: 3 !important;
  pointer-events: auto !important;
  touch-action: pan-x !important;
  padding-top: 20px !important;
  padding-bottom: 44px !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000000 12%, #000000 88%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 12%, #000000 88%, transparent 100%) !important;
}

.brewek-pack-viewport::-webkit-scrollbar {
  display: none !important;
}

.brewek-pack-viewport.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

.brewek-pack-track {
  position: relative !important;
  min-width: max-content !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding-left: calc(50% - 62px) !important;
  padding-right: calc(50% - 62px) !important;
  z-index: 3 !important;
}

.brewek-pack-card:first-child {
  margin-left: 0 !important;
}

.brewek-pack-card:last-child {
  margin-right: 0 !important;
}

.brewek-pack-card {
  position: relative !important;
  flex: 0 0 345px !important;
  width: 345px !important;
  height: 308px !important;
  min-width: 345px !important;
  min-height: 308px !important;
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  margin-left: -85px !important;
  margin-right: -85px !important;
  opacity: .66 !important;
  transform: scale(.83) translateY(4px) !important;
  transform-origin: center center !important;
  scroll-snap-align: center !important;
  overflow: visible !important;
  cursor: pointer !important;
  z-index: 8 !important;
  isolation: isolate !important;
  will-change: transform, opacity, filter !important;
  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    opacity .34s ease,
    filter .34s ease !important;
  filter: brightness(.78) saturate(.88) blur(.12px) !important;
}

.brewek-pack-card::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -14px;
  height: 32px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .46), rgba(0, 0, 0, 0) 74%);
  filter: blur(7px);
  z-index: -2;
  pointer-events: none;
}

.brewek-pack-card.is-selected {
  opacity: 1 !important;
  transform: scale(1.10) translateY(-2px) !important;
  z-index: 30 !important;
  filter: brightness(1.08) saturate(1.12) contrast(1.02) !important;
  animation: broPackSelectedFloat 2.8s ease-in-out infinite !important;
}

.brewek-pack-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  filter:
    drop-shadow(0 18px 16px rgba(0, 0, 0, .42))
    drop-shadow(0 0 10px rgba(229, 107, 107, .07)) !important;
}

.brewek-pack-card.is-selected .brewek-pack-img {
  filter:
    drop-shadow(0 34px 28px rgba(0, 0, 0, .58))
    drop-shadow(0 0 20px rgba(229, 107, 107, .22))
    drop-shadow(0 0 34px rgba(229, 107, 107, .14)) !important;
}

.brewek-dots {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 14px !important;
  z-index: 10 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.brewek-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  border: 0 !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, .24) !important;
  cursor: pointer !important;
  opacity: .62 !important;
  transition:
    width .28s cubic-bezier(.16,1,.3,1),
    opacity .25s ease,
    transform .25s ease,
    background .25s ease !important;
}

.brewek-dot.is-active {
  width: 24px !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
  background: linear-gradient(90deg, var(--gold-2), var(--gold)) !important;
  box-shadow:
    0 0 12px rgba(184, 59, 59, .28),
    0 0 22px rgba(229, 107, 107, .10) !important;
}

.bottom-stack {
  display: grid;
  gap: 6px;
  align-content: end;
  margin-top: 0 !important;
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

.token-box {
  position: relative !important;
  z-index: 21 !important;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(184, 59, 59, .18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)),
    linear-gradient(180deg, #171315 0%, #0d0d0f 100%);
  padding: 14px 14px !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .27),
    0 0 0 1px rgba(229, 107, 107, .06) inset;
  pointer-events: auto !important;
}

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

.token-step {
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 22;
}

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

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

.token-input {
  width: 100%;
  height: 43px !important;
  margin: 0 !important;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, .15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)),
    #090a0c;
  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;
  position: relative !important;
  z-index: 22 !important;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  touch-action: manipulation !important;
  cursor: text !important;
}

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

.token-input:focus {
  border-color: rgba(184, 59, 59, .42);
  background: #111012;
  box-shadow:
    0 0 0 3px rgba(184, 59, 59, .08),
    0 0 22px rgba(159, 47, 47, .12),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

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

.shake-btn,
.member-next-btn {
  width: 100%;
  height: 44px !important;
  margin-top: 2px !important;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #c94747 0%, #9f2f2f 100%);
  color: #ffffff;
  font-size: clamp(12px, 3vw, 15px);
  font-weight: 950;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow:
    0 14px 24px rgba(8, 8, 10, .26),
    0 0 20px rgba(184, 59, 59, .12),
    inset 0 1px 0 rgba(255, 255, 255, .36);
  transition: transform .18s ease, opacity .2s ease, filter .2s ease, box-shadow .2s ease;
  position: relative !important;
  z-index: 22 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

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

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

.token-msg {
  margin-top: 12px !important;
  padding-top: 2px;
  min-height: 16px;
  text-align: center;
  font-size: clamp(10px, 2.7vw, 12px);
  line-height: 1.35;
  color: rgba(244, 244, 245, .60);
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
}

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

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

.member-preview button,
#userIdEditBtn {
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(184, 59, 59, .16);
  color: #e8a3a3;
  font-weight: 850;
  cursor: pointer;
  position: relative !important;
  z-index: 22 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 999 !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
  background: #090a0c !important;
}

.overlay[hidden],
.overlay:not(.show) {
  display: none !important;
  pointer-events: none !important;
}

.overlay.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: #090a0c !important;
  isolation: isolate !important;
}

.overlay.show::before {
  content: "";
  position: absolute;
  inset: 56px 0 0 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 8, 10, .22), rgba(8, 8, 10, .74)),
    radial-gradient(circle at 50% 24%, rgba(229, 107, 107, .22), transparent 34%),
    radial-gradient(circle at 50% 78%, rgba(184, 59, 59, .11), transparent 32%),
    linear-gradient(180deg, #181214, #09090b);
}

.overlay.show::after {
  content: "";
  position: absolute;
  inset: 56px 0 0 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 34%, rgba(229, 107, 107, .13), transparent 24%),
    radial-gradient(circle at 18% 42%, rgba(229, 107, 107, .12), transparent 24%),
    radial-gradient(circle at 82% 48%, rgba(184, 59, 59, .10), transparent 26%);
  opacity: .72;
}

.overlay-topbar {
  position: relative !important;
  z-index: 80 !important;
  flex: 0 0 56px !important;
  height: 56px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(8px, env(safe-area-inset-top)) 12px 0;
  background:
    linear-gradient(180deg, rgba(29, 23, 25, .98), rgba(20, 18, 20, .94)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

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

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

.icon-btn:active {
  transform: scale(.99);
}

.bro-top-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shake-scene {
  position: relative !important;
  z-index: 2 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.overlay.pack-mode .center-line,
.overlay.pack-mode .curtain-split,
.overlay.pack-mode .curtain-half,
.overlay.pack-mode .shake-device-wrap,
.overlay.pack-mode .shake-device,
.overlay.pack-mode .shake-subnote,
.overlay.pack-mode:not(.reward-shown) .reward-stage,
.overlay.pack-mode:not(.reward-shown) .result-actions {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.overlay-pack-stage {
  position: absolute !important;
  inset: 56px 0 0 0 !important;
  z-index: 40 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  gap: 10px !important;
  padding: 8px 0 18px !important;
  background: transparent !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

.overlay-pack-stage[hidden] {
  display: none !important;
}

.overlay-pack-head,
.overlay-pack-kicker,
.overlay-pack-title,
.overlay-pack-subtitle {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.overlay-pack-open-btn,
#packOpenBtn {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.overlay-pack-viewport {
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 10px 0 22px !important;
  touch-action: pan-x !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000000 8%, #000000 92%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 8%, #000000 92%, transparent 100%) !important;
  animation: broPackViewportIn .55s cubic-bezier(.16, 1, .3, 1) both;
}

.overlay-pack-viewport::-webkit-scrollbar {
  display: none !important;
}

.overlay-pack-viewport.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

.overlay-pack-track {
  min-width: max-content !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding-left: calc(50% - 170px) !important;
  padding-right: calc(50% - 170px) !important;
}

.overlay-pack-card {
  width: 340px !important;
  height: 520px !important;
  flex: 0 0 340px !important;
  margin: 0 -72px !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative !important;
  overflow: visible !important;
  scroll-snap-align: center !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transform: scale(.80) translateY(8px) !important;
  filter: brightness(1.02) saturate(1.08) contrast(1.03) !important;
  transition:
    transform .46s cubic-bezier(.16, 1, .3, 1),
    opacity .32s ease,
    filter .32s ease !important;
  will-change: transform, opacity, filter;
}

.overlay-pack-card::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: -24px;
  height: 48px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .62), rgba(0, 0, 0, .16) 46%, rgba(0, 0, 0, 0) 76%) !important;
  filter: blur(12px) !important;
  z-index: -2;
  pointer-events: none;
}

.overlay-pack-card.is-selected {
  transform: scale(1.08) translateY(-2px) !important;
  opacity: 1 !important;
  filter: brightness(1.10) saturate(1.16) contrast(1.05) !important;
  z-index: 20 !important;
}

.overlay-pack-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 28px 26px rgba(0, 0, 0, .42))
    drop-shadow(0 0 8px rgba(255, 255, 255, .03)) !important;
}

.overlay-pack-card.is-selected .overlay-pack-img {
  filter:
    drop-shadow(0 44px 36px rgba(0, 0, 0, .66))
    drop-shadow(0 0 28px rgba(229, 107, 107, .28))
    drop-shadow(0 0 44px rgba(229, 107, 107, .20)) !important;
}

.overlay-pack-dots {
  position: relative !important;
  z-index: 6 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
}

.overlay-pack-dot {
  width: 7px !important;
  height: 7px !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .38) !important;
  transition: .25s ease !important;
}

.overlay-pack-dot.is-active {
  width: 26px !important;
  background: linear-gradient(90deg, var(--gold-2), var(--gold)) !important;
  box-shadow: 0 0 14px rgba(184, 59, 59, .30) !important;
}

.overlay-pack-footer {
  position: relative !important;
  z-index: 6 !important;
  display: grid !important;
  gap: 0 !important;
  align-self: end !important;
  padding: 0 16px !important;
}

.overlay-pack-selected {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  padding: 13px 14px !important;
  border-radius: 18px !important;
  background: rgba(14, 14, 16, .72) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}

.overlay.result-brewek-mode .overlay-pack-stage,
.overlay.result-brewek-mode .shake-subnote,
.overlay.result-brewek-mode .shake-device-wrap,
.overlay.result-brewek-mode .curtain-split,
.overlay.result-brewek-mode .center-line,
.overlay.result-brewek-mode .reward-stage,
.overlay.result-brewek-mode .result-actions {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.overlay.result-brewek-mode .overlay-title {
  text-align: center !important;
  letter-spacing: .04em !important;
}

.result-brewek-stage {
  position: absolute !important;
  inset: 56px 0 0 0 !important;
  z-index: 60 !important;
  display: block !important;
  padding: 0 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.result-brewek-stage[hidden],
.overlay.reward-shown .result-brewek-stage {
  display: none !important;
}


.result-brewek-content {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.result-brewek-pack-wrap {
  --brewek-progress: 0;
  position: relative !important;
  width: min(94vw, var(--brewek-pack-width)) !important;
  height: var(--brewek-pack-height) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  top: var(--brewek-pack-y) !important;
  display: block !important;
  animation: none !important;
  transform: none !important;
  translate: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  perspective: 900px !important;
}

.result-brewek-pack-wrap::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 12px;
  height: 32px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .62), rgba(0, 0, 0, .16) 52%, transparent 76%);
  filter: blur(10px);
  z-index: -3;
  opacity: .52;
  pointer-events: none;
}

.result-brewek-pack-wrap::after {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 20%, rgba(229, 107, 107, .22), transparent 30%),
    radial-gradient(circle at 50% 52%, rgba(229, 107, 107, .14), transparent 62%);
  filter: blur(18px);
  opacity: .82;
  z-index: -2;
  pointer-events: none;
}

.result-brewek-pack-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  filter:
    brightness(calc(1.02 + (var(--brewek-progress) * .12)))
    saturate(calc(1.08 + (var(--brewek-progress) * .10)))
    drop-shadow(0 34px 28px rgba(0, 0, 0, .58))
    drop-shadow(0 0 20px rgba(229, 107, 107, .14))
    drop-shadow(0 0 28px rgba(229, 107, 107, .12)) !important;
  transition: filter .12s linear !important;
}

/* Top tear layers default mati kalau class belum aktif */
.result-brewek-pack-layer,
.result-brewek-mouth {
  display: none !important;
}

/* Aktif hanya di mode brewek-top-tear */
.overlay.brewek-top-tear .result-brewek-pack-img {
  opacity: 0 !important;
  visibility: hidden !important;
}

.overlay.brewek-top-tear .result-brewek-pack-layer {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  transform-origin: center var(--brewek-cut-y) !important;
  will-change: transform, opacity, filter, clip-path !important;
}

.overlay.brewek-top-tear .result-brewek-pack-base {
  z-index: 1 !important;
  opacity: calc(.14 + (var(--brewek-progress) * .10)) !important;
  filter:
    brightness(.82)
    saturate(.90)
    blur(.2px)
    drop-shadow(0 34px 28px rgba(0, 0, 0, .54)) !important;
}

.overlay.brewek-top-tear .result-brewek-pack-bodycut {
  z-index: 3 !important;
  opacity: 1 !important;
  clip-path: polygon(
    0 calc(var(--brewek-cut-y) + 5px),
    5% calc(var(--brewek-cut-y) - 5px),
    10% calc(var(--brewek-cut-y) + 9px),
    16% calc(var(--brewek-cut-y) - 7px),
    23% calc(var(--brewek-cut-y) + 7px),
    31% calc(var(--brewek-cut-y) - 4px),
    39% calc(var(--brewek-cut-y) + 10px),
    48% calc(var(--brewek-cut-y) - 8px),
    56% calc(var(--brewek-cut-y) + 6px),
    65% calc(var(--brewek-cut-y) - 6px),
    74% calc(var(--brewek-cut-y) + 9px),
    83% calc(var(--brewek-cut-y) - 4px),
    92% calc(var(--brewek-cut-y) + 7px),
    100% calc(var(--brewek-cut-y) - 2px),
    100% 100%,
    0 100%
  ) !important;
  transform:
    translateY(calc(var(--brewek-progress) * 7px))
    scale(calc(1 + (var(--brewek-progress) * .012))) !important;
  filter:
    brightness(calc(1.02 + (var(--brewek-progress) * .09)))
    saturate(calc(1.08 + (var(--brewek-progress) * .08)))
    drop-shadow(0 34px 28px rgba(0, 0, 0, .58))
    drop-shadow(0 0 20px rgba(229, 107, 107, .14))
    drop-shadow(0 0 28px rgba(229, 107, 107, .12)) !important;
}

.overlay.brewek-top-tear .result-brewek-pack-topcap {
  z-index: 6 !important;
  opacity: 1 !important;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(var(--brewek-cut-y) + 3px),
    94% calc(var(--brewek-cut-y) - 7px),
    88% calc(var(--brewek-cut-y) + 8px),
    80% calc(var(--brewek-cut-y) - 6px),
    72% calc(var(--brewek-cut-y) + 7px),
    64% calc(var(--brewek-cut-y) - 8px),
    56% calc(var(--brewek-cut-y) + 6px),
    48% calc(var(--brewek-cut-y) - 9px),
    40% calc(var(--brewek-cut-y) + 8px),
    32% calc(var(--brewek-cut-y) - 5px),
    24% calc(var(--brewek-cut-y) + 8px),
    16% calc(var(--brewek-cut-y) - 7px),
    8% calc(var(--brewek-cut-y) + 7px),
    0 calc(var(--brewek-cut-y) - 2px)
  ) !important;
  transform:
    translateY(calc(var(--brewek-progress) * -54px))
    rotateX(calc(var(--brewek-progress) * -20deg))
    rotateZ(calc(var(--brewek-progress) * -2.5deg))
    scale(calc(1 + (var(--brewek-progress) * .018))) !important;
  filter:
    brightness(calc(1.04 + (var(--brewek-progress) * .16)))
    saturate(calc(1.08 + (var(--brewek-progress) * .08)))
    drop-shadow(0 18px 18px rgba(0, 0, 0, .42))
    drop-shadow(0 0 18px rgba(229, 107, 107, .16)) !important;
}

.overlay.brewek-top-tear .result-brewek-mouth {
  display: block !important;
  position: absolute !important;
  left: var(--brewek-line-left) !important;
  right: var(--brewek-line-right) !important;
  top: calc(var(--brewek-cut-y) - 4px) !important;
  height: calc(10px + (var(--brewek-progress) * 42px)) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  opacity: calc(var(--brewek-progress) * .92) !important;
  border-radius: 50% 50% 42% 42% / 60% 60% 42% 42% !important;
  background:
    radial-gradient(ellipse at center, rgba(4, 2, 8, .92) 0%, rgba(16, 12, 13, .86) 46%, rgba(70, 16, 16, .48) 72%, transparent 100%) !important;
  box-shadow:
    inset 0 8px 14px rgba(0, 0, 0, .78),
    0 7px 16px rgba(0, 0, 0, .32),
    0 0 18px rgba(229, 107, 107, .10) !important;
  clip-path: polygon(0 42%, 6% 14%, 13% 54%, 20% 18%, 28% 64%, 36% 20%, 44% 58%, 52% 12%, 60% 62%, 68% 18%, 76% 56%, 84% 20%, 92% 60%, 100% 34%, 100% 100%, 0 100%) !important;
}

.result-brewek-tear-line {
  position: absolute !important;
  top: var(--brewek-line-top) !important;
  left: var(--brewek-line-left) !important;
  right: var(--brewek-line-right) !important;
  height: 38px !important;
  z-index: 12 !important;
  transform: none !important;
  pointer-events: none !important;
  opacity: calc(1 - (var(--brewek-progress) * .72)) !important;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .30)) !important;
}

.result-brewek-tear-line::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 3px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .22),
    rgba(255, 255, 255, .55),
    rgba(255, 255, 255, .22)
  ) !important;
  box-shadow:
    0 0 8px rgba(255, 255, 255, .12),
    0 0 14px rgba(229, 107, 107, .10) !important;
  clip-path: none !important;
}
.result-brewek-tear-line::after {
  content: "GESER DI SINI" !important;
  position: absolute !important;
  left: 50% !important;
  top: -13px !important;
  transform: translateX(-50%) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(14, 14, 16, .84) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .18) !important;
  opacity: calc(1 - (var(--brewek-progress) * .70)) !important;
}

.result-brewek-swipe {
  position: absolute !important;
  top: var(--brewek-line-top) !important;
  left: var(--brewek-line-left) !important;
  right: var(--brewek-line-right) !important;
  width: auto !important;
  height: 2% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 30 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.result-brewek-swipe:active {
  cursor: grabbing !important;
}

.result-brewek-swipe-fill {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  height: 3px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .10),
    rgba(255, 255, 255, .40),
    rgba(255, 255, 255, .10)
  ) !important;
  box-shadow: none !important;
  opacity: calc(.75 - (var(--brewek-progress) * .35)) !important;
}

.result-brewek-swipe-text,
.result-brewek-selected-name {
  display: none !important;
}

.result-brewek-swipe-handle {
  position: absolute !important;
  width: var(--brewek-handle-size) !important;
  height: var(--brewek-handle-size) !important;
  top: -25% !important;
  left: 0 !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  color: #160d0e !important;
  background: linear-gradient(180deg, #ef8b8b 0%, #b83b3b 100%) !important;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, .32),
    0 0 11px rgba(229, 107, 107, .28),
    inset 0 1px 0 rgba(255, 255, 255, .56) !important;
  opacity: calc(1 - (var(--brewek-progress) * .15)) !important;
}

.result-brewek-swipe-handle::before {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  border-top: 2px solid #5b171b !important;
  border-right: 2px solid #5b171b !important;
  transform: rotate(45deg) !important;
  display: block !important;
  margin-left: -2px !important;
}

.result-brewek-swipe-handle span {
  display: none !important;
}

.result-brewek-rip-mask {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.result-brewek-rip-left {
  right: 50% !important;
  transform:
    translateY(-50%)
    rotate(calc(var(--brewek-progress) * -8deg))
    translateX(calc(var(--brewek-progress) * -26px))
    translateY(calc(var(--brewek-progress) * -10px)) !important;
  transform-origin: right center !important;
}

.result-brewek-rip-right {
  left: 50% !important;
  transform:
    translateY(-50%)
    rotate(calc(var(--brewek-progress) * 8deg))
    translateX(calc(var(--brewek-progress) * 26px))
    translateY(calc(var(--brewek-progress) * -10px))
    scaleX(-1) !important;
  transform-origin: left center !important;
}

.overlay.brewek-opened .result-brewek-pack-wrap {
  animation: broTopTearPackOpenedV214 .58s cubic-bezier(.2,.9,.2,1) both !important;
}

.overlay.brewek-opened .result-brewek-tear-line {
  opacity: 0 !important;
  transition: opacity .16s ease !important;
}

.overlay.brewek-opened .result-brewek-rip-mask {
  opacity: 1 !important;
}

.center-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(184, 59, 59, .12), rgba(255, 255, 255, .16), rgba(184, 59, 59, .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(184, 59, 59, .08);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
}

.curtain-bottom {
  bottom: 0;
  border-top: 1px solid rgba(184, 59, 59, .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(184, 59, 59, .18) 42%, transparent 70%);
  opacity: 0;
  transform: scale(.45);
  pointer-events: none;
}

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

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

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

.overlay.reward-shown {
  background:
    radial-gradient(circle at 50% 16%, rgba(229, 107, 107, .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(184, 59, 59, .18), transparent 35%),
    linear-gradient(180deg, #471111 0%, #1f0909 54%, #0d0404 100%) !important;
}

.reward-stage::before,
.reward-stage::after {
  content: "";
  position: absolute;
  width: min(132vw, 760px);
  height: min(132vw, 760px);
  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(184, 59, 59, .32) 120deg 132deg, transparent 132deg 360deg);
}

.reward-stage::after {
  width: min(118vw, 640px);
  height: min(118vw, 640px);
  border: 1px dashed rgba(255, 82, 82, .42);
  box-shadow:
    0 0 34px rgba(255, 82, 82, .16),
    inset 0 0 28px rgba(229, 107, 107, .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 {
  position: absolute;
  width: min(124vw, 700px);
  height: min(124vw, 700px);
  border-radius: 50%;
  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 22px rgba(255, 82, 82, .24));
  opacity: 0;
  transform: scale(.45) rotate(0deg);
}

.reward-glow {
  position: absolute;
  width: min(118vw, 640px);
  height: min(118vw, 640px);
  border-radius: 50%;
  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);
  opacity: 0;
  transform: scale(.55);
}

.overlay.reward-shown .reward-ray {
  opacity: .92 !important;
  animation: rewardRayIn .9s ease forwards, spinRay 12s linear infinite .9s;
}

.overlay.reward-shown .reward-glow {
  opacity: .92 !important;
  animation: rewardGlowPulse 1.25s ease-in-out infinite alternate;
}

.reward-orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(184, 59, 59, .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);
}

.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;
}

.reward-shell {
  position: relative;
  z-index: 2;
  width: clamp(210px, 68vw, 330px);
  min-height: clamp(255px, 74vw, 405px);
  border-radius: 28px;
  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(20, 18, 20, .985) 52%, rgba(42, 14, 14, .99) 100%);
  border: 2px solid rgba(240, 96, 96, .82);
  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);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 54px 16px 12px;
  opacity: 0;
  transform: scale(.2) translateY(18px);
  transform-origin: center;
  overflow: hidden;
}

.reward-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  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);
  pointer-events: none;
}

.reward-shell::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(108px, 33vw, 145px);
  height: clamp(34px, 9.5vw, 42px);
  border-radius: 16px;
  background:
    url('assets/logo1.png') center / 82% auto no-repeat,
    linear-gradient(180deg, rgba(132, 49, 49, .98), rgba(92, 30, 30, .98));
  border: 1px solid rgba(245, 111, 111, .42);
  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);
  z-index: 6;
}

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

.overlay.reward-shown .reward-shell::before {
  animation: rewardStarsDrift 6s linear infinite alternate, rewardSoftGlow 2.8s ease-in-out infinite;
}

.reward-media {
  width: clamp(168px, 52vw, 260px);
  height: clamp(168px, 52vw, 260px);
  max-width: 100%;
  margin-top: 8px;
  margin-bottom: 0;
  border-radius: 28px;
  overflow: visible;
  display: grid;
  place-items: center;
  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));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 12px 22px rgba(0, 0, 0, .18);
  position: relative;
}

.reward-media::before {
  content: "";
  position: absolute;
  inset: 1%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 117, 117, .22), rgba(255, 108, 108, .10) 50%, transparent 74%);
  filter: blur(12px);
  z-index: 0;
}

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

.reward-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: scale(1.08);
  filter:
    drop-shadow(0 16px 24px rgba(58, 18, 18, .28))
    drop-shadow(0 0 14px rgba(255, 112, 112, .12));
}

.overlay.reward-shown .reward-media img {
  animation: rewardItemFloat 2.4s ease-in-out infinite;
}

.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: #fffdf8;
  margin-top: 2px;
  word-break: break-word;
}

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

.reward-code {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 10px);
  min-height: 48px;
  margin: -1px auto 0;
  padding: 8px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(120, 45, 45, .98) 0%, rgba(94, 33, 33, .99) 100%);
  border: 1px solid rgba(245, 111, 111, .40);
  color: transparent;
  font-size: 0;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
  word-break: break-word;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 1px rgba(255, 255, 255, .025);
  overflow: hidden;
  isolation: isolate;
  animation: rewardUnifiedSoftGlow 2.4s ease-in-out infinite;
}

.reward-code::after {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 76%;
  height: 13px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(109, 40, 40, .96), rgba(96, 34, 34, .98));
  border-top: 1px solid rgba(245, 111, 111, .15);
  border-left: 1px solid rgba(245, 111, 111, .08);
  border-right: 1px solid rgba(245, 111, 111, .08);
  z-index: 0;
  pointer-events: none;
}

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

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

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

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

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

.result-action {
  height: 50px;
  border: 0;
  background: linear-gradient(180deg, #ff7676 0%, #f63a3a 52%, #d81717 100%);
  color: #2a0000;
  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 {
  border: 1px solid rgba(255, 82, 82, .18);
  background: rgba(255, 255, 255, .075);
  color: #ffeded;
  backdrop-filter: blur(4px);
}

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

#broClaimReminder {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(13, 4, 4, .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bro-reminder-card {
  width: min(100%, 340px);
  display: grid;
  gap: 9px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(245, 111, 111, .30);
  background:
    radial-gradient(circle at 20% 0%, rgba(229, 107, 107, .18), transparent 38%),
    linear-gradient(180deg, rgba(72, 28, 28, .98), rgba(10, 10, 12, .98));
  color: #f4f4f5;
  text-align: center;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.bro-reminder-card strong {
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
}

.bro-reminder-card span {
  color: rgba(244, 244, 245, .72);
  font-size: 12px;
  line-height: 1.45;
}

.bro-reminder-card button {
  height: 42px;
  margin-top: 5px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #c94747 0%, #9f2f2f 100%);
  color: #ffffff;
  font-weight: 950;
  cursor: pointer;
}

.confetti-layer,
.fireworks-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: #b83b3b; }
.confetti.c3 { background: #ffffff; border-radius: 50%; }
.confetti.c4 { background: #f57d7d; }
.confetti.c5 { background: #ffd9d9; border-radius: 50%; }
.confetti.c6 { background: #efc1c1; }

@keyframes broPackLightSweep {
  0%, 100% {
    transform: translateX(-18%) skewX(-8deg);
    opacity: .45;
  }
  50% {
    transform: translateX(18%) skewX(-8deg);
    opacity: .95;
  }
}

@keyframes broPackSelectedFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes broPackViewportIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes broTopTearPackOpenedV214 {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1.08);
  }
  44% {
    transform: scale(1.035) translateY(-4px);
    opacity: 1;
    filter: brightness(1.28);
  }
  100% {
    transform: scale(1.10) translateY(-12px);
    opacity: 0;
    filter: brightness(1.62) blur(4px);
  }
}

@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 rewardRayIn {
  0% { opacity: 0; transform: scale(.35) rotate(0deg); }
  100% { opacity: .92; 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.08); }
  50% { transform: translateY(-7px) scale(1.105); }
}

@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 rewardShellGlow {
  0%, 100% {
    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);
  }
  50% {
    box-shadow:
      0 34px 78px rgba(0, 0, 0, .40),
      0 0 0 5px rgba(240, 96, 96, .12),
      0 0 34px rgba(255, 116, 116, .20),
      0 0 72px rgba(255, 102, 102, .18),
      inset 0 1px 0 rgba(255, 255, 255, .20);
  }
}

@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); }
}

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

@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);
  }
}

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

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

  .brewek-pack-viewport {
    padding-top: 18px !important;
    padding-bottom: 44px !important;
  }

  .overlay-pack-card {
    width: 324px !important;
    height: 500px !important;
    flex-basis: 324px !important;
    margin: 0 -68px !important;
    transform: scale(.81) translateY(6px) !important;
  }

  .overlay-pack-card.is-selected {
    transform: scale(1.07) translateY(-2px) !important;
  }
}

@media (max-width: 390px) {
  .hero {
    padding: 9px 11px;
    border-radius: 21px;
  }

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

  .title {
    font-size: 16.5px;
  }

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

  .overlay-pack-track {
    padding-left: calc(50% - 150px) !important;
    padding-right: calc(50% - 150px) !important;
  }

  .overlay-pack-card {
    width: 300px !important;
    height: 462px !important;
    flex-basis: 300px !important;
    margin: 0 -62px !important;
    transform: scale(.82) translateY(4px) !important;
  }

  .overlay-pack-card.is-selected {
    transform: scale(1.06) translateY(-2px) !important;
  }
}

@media (max-height: 740px) {
  :root {
    --brewek-pack-height: 500px;
    --brewek-pack-y: -12px;
    --brewek-line-top: 112px;
    --brewek-cut-y: 112px;
  }

  .screen {
    gap: 8px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .hero {
    padding: 9px 11px;
  }

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

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

  .brewek-pack-viewport {
    padding-top: 16px !important;
    padding-bottom: 40px !important;
  }

  .brewek-dots {
    bottom: 12px !important;
  }

  .token-box {
    padding: 11px 13px !important;
  }

  .token-input,
  .shake-btn,
  .member-next-btn {
    height: 41px !important;
  }

  .overlay-pack-stage {
    inset: 54px 0 0 0 !important;
    padding: 6px 0 14px !important;
    gap: 8px !important;
  }

  .overlay-pack-card {
    width: 284px !important;
    height: 430px !important;
    flex-basis: 284px !important;
    margin: 0 -56px !important;
    transform: scale(.83) translateY(4px) !important;
  }

  .overlay-pack-card.is-selected {
    transform: scale(1.04) translateY(-2px) !important;
  }

  .overlay-pack-selected {
    padding: 11px 14px !important;
    font-size: 12.5px !important;
  }

  .reward-shell {
    width: 205px;
    min-height: 250px;
    border-radius: 30px;
    padding: 52px 13px 12px;
  }

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

  .reward-code {
    min-height: 46px;
    padding: 7px 10px;
  }
}

@media (max-height: 680px) {
  :root {
    --brewek-pack-height: 460px;
    --brewek-pack-y: -8px;
    --brewek-line-top: 102px;
    --brewek-cut-y: 102px;
  }

  .hero {
    padding: 8px 10px;
  }

  .logo-box {
    width: 48px;
    height: 48px;
  }

  .title {
    font-size: 16px;
  }

  .subtitle {
    font-size: 9.5px;
  }

  .brewek-pack-card {
    flex-basis: 300px !important;
    width: 300px !important;
    height: 270px !important;
    margin-left: -96px !important;
    margin-right: -96px !important;
    transform: scale(.80) translateY(4px) !important;
  }

  .brewek-pack-card.is-selected {
    transform: scale(1.08) translateY(-2px) !important;
  }

  .brewek-pack-viewport {
    padding-top: 14px !important;
    padding-bottom: 36px !important;
  }

  .token-box {
    padding: 10px !important;
  }

  .token-input,
  .shake-btn,
  .member-next-btn {
    height: 39px !important;
  }

  .overlay-pack-card {
    width: 256px !important;
    height: 386px !important;
    flex-basis: 256px !important;
    margin: 0 -50px !important;
    transform: scale(.84) translateY(2px) !important;
  }

  .overlay-pack-card.is-selected {
    transform: scale(1.03) translateY(-2px) !important;
  }

  .overlay-pack-selected {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .reward-shell {
    width: 198px;
    min-height: 245px;
  }

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

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

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

:root {
  --safe-top: max(8px, env(safe-area-inset-top));
  --safe-bottom: max(8px, env(safe-area-inset-bottom));
  --ui-gap: clamp(6px, 1.4dvh, 10px);
  --ui-pad-x: clamp(10px, 3vw, 14px);
  --header-h: 56px;
  --overlay-bg-image: url("assets/bg-wallpaper.jpg");

  --home-pack-w: clamp(285px, 80vw, 345px);
  --home-pack-overlap: clamp(-110px, -25.5vw, -82px);

  --overlay-pack-w: clamp(260px, 79vw, 340px);
  --overlay-pack-overlap: clamp(-72px, -16vw, -46px);

  --result-pack-scale: .90;
  --result-pack-x: 0px;
  --result-pack-y: clamp(10px, 3.8dvh, 34px);

  --brewek-line-top: 23.5%;
  --brewek-cut-y: 25.0%;
  --brewek-line-left: 0px;
  --brewek-line-right: 0px;
  --brewek-handle-size: clamp(28px, 7.4vw, 32px);
}

html,
body {
  min-width: 320px;
  overflow-x: hidden !important;
}

.app {
  width: min(100vw, var(--maxw)) !important;
  height: 100svh !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
}

.screen {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: var(--ui-gap) !important;
  padding: var(--safe-top) var(--ui-pad-x) var(--safe-bottom) !important;
}

.hero {
  padding: clamp(8px, 1.6dvh, 11px) clamp(10px, 2.8vw, 13px) !important;
  border-radius: clamp(19px, 5vw, 22px) !important;
}

.logo-box {
  width: clamp(48px, 13.5vw, 58px) !important;
  height: clamp(48px, 13.5vw, 58px) !important;
  border-radius: clamp(15px, 4vw, 18px) !important;
}

.brand {
  gap: clamp(8px, 2.3vw, 10px) !important;
}

.title {
  font-size: clamp(16px, 4.2vw, 21px) !important;
  line-height: 1.06 !important;
}

.subtitle {
  font-size: clamp(9.5px, 2.75vw, 12px) !important;
  line-height: 1.28 !important;
}

.brewek-pack-section {
  min-height: 0 !important;
  margin: clamp(4px, 1.2dvh, 8px) 0 !important;
}

.brewek-pack-viewport {
  padding-top: clamp(12px, 2.4dvh, 20px) !important;
  padding-bottom: clamp(34px, 5.5dvh, 46px) !important;
}

.brewek-pack-track {
  padding-left: calc(50% - (var(--home-pack-w) / 2)) !important;
  padding-right: calc(50% - (var(--home-pack-w) / 2)) !important;
}

.brewek-pack-card {
  flex: 0 0 var(--home-pack-w) !important;
  width: var(--home-pack-w) !important;
  min-width: var(--home-pack-w) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 345 / 308 !important;
  margin-left: var(--home-pack-overlap) !important;
  margin-right: var(--home-pack-overlap) !important;
  transform: scale(.83) translateY(4px) !important;
}

.brewek-pack-card.is-selected {
  transform: scale(1.08) translateY(-2px) !important;
}

.brewek-pack-img,
.overlay-pack-img,
.result-brewek-pack-img,
.result-brewek-pack-layer,
.reward-media img,
.logo-box img {
  object-fit: contain !important;
}

.brewek-dots {
  bottom: clamp(10px, 2dvh, 14px) !important;
}

.bottom-stack {
  gap: clamp(5px, 1dvh, 7px) !important;
}

.token-box {
  padding: clamp(10px, 2dvh, 14px) clamp(11px, 3.2vw, 14px) !important;
  border-radius: clamp(19px, 5vw, 22px) !important;
}

.token-step {
  gap: clamp(8px, 1.5dvh, 10px) !important;
}

.token-input,
.shake-btn,
.member-next-btn {
  height: clamp(39px, 6.1dvh, 44px) !important;
  border-radius: clamp(14px, 3.8vw, 16px) !important;
}

.token-msg {
  margin-top: clamp(8px, 1.8dvh, 12px) !important;
}

.member-preview {
  padding: clamp(8px, 1.7dvh, 10px) clamp(10px, 3vw, 12px) !important;
  border-radius: clamp(13px, 3.8vw, 15px) !important;
}

.overlay-topbar {
  flex: 0 0 var(--header-h) !important;
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  padding: max(8px, env(safe-area-inset-top)) 12px 0 !important;
}

.overlay.show::before,
.overlay.show::after,
.overlay.pack-mode::before,
.overlay.pack-mode::after,
.overlay.result-brewek-mode::before,
.overlay.result-brewek-mode::after {
  inset: var(--header-h) 0 0 0 !important;
}

.shake-scene {
  flex: 1 1 auto !important;
  height: calc(100dvh - var(--header-h)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.overlay.pack-mode::before,
.overlay.result-brewek-mode::before,
.overlay.reward-shown {
  background:
    linear-gradient(180deg, rgba(8, 8, 10, .20), rgba(8, 8, 10, .56)),
    var(--overlay-bg-image) center center / cover no-repeat !important;
}

.overlay.pack-mode::after,
.overlay.result-brewek-mode::after {
  background:
    radial-gradient(circle at 50% 24%, rgba(229, 107, 107, .16), transparent 34%),
    radial-gradient(circle at 50% 82%, rgba(184, 59, 59, .10), transparent 34%) !important;
  opacity: .75 !important;
}

.overlay-pack-stage {
  inset: var(--header-h) 0 0 0 !important;
  gap: clamp(8px, 1.5dvh, 10px) !important;
  padding: clamp(6px, 1.2dvh, 10px) 0 clamp(12px, 2.4dvh, 18px) !important;
}

.overlay-pack-viewport {
  padding: clamp(8px, 1.8dvh, 12px) 0 clamp(18px, 3.2dvh, 24px) !important;
}

.overlay-pack-track {
  padding-left: calc(50% - (var(--overlay-pack-w) / 2)) !important;
  padding-right: calc(50% - (var(--overlay-pack-w) / 2)) !important;
}

.overlay-pack-card {
  flex: 0 0 var(--overlay-pack-w) !important;
  width: var(--overlay-pack-w) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 340 / 520 !important;
  margin-left: var(--overlay-pack-overlap) !important;
  margin-right: var(--overlay-pack-overlap) !important;
  transform: scale(.80) translateY(6px) !important;
}

.overlay-pack-card.is-selected {
  transform: scale(1.06) translateY(-2px) !important;
}

.overlay-pack-footer {
  padding: 0 clamp(12px, 3.7vw, 16px) !important;
}

.overlay-pack-selected {
  padding: clamp(10px, 2dvh, 13px) clamp(12px, 3.4vw, 14px) !important;
  border-radius: clamp(16px, 4.2vw, 18px) !important;
  font-size: clamp(12px, 3.2vw, 13px) !important;
}

.overlay.result-brewek-mode {
  --result-pack-scale: .90 !important;
  --result-pack-x: 0px !important;
  --result-pack-y: clamp(10px, 3.8dvh, 34px) !important;
  --brewek-line-top: 23.5% !important;
  --brewek-cut-y: 25.0% !important;
  --brewek-line-left: 0px !important;
  --brewek-line-right: 0px !important;
  --brewek-handle-size: clamp(28px, 7.4vw, 32px) !important;
}

.overlay.result-brewek-mode .result-brewek-stage {
  inset: var(--header-h) 0 0 0 !important;
  width: 100% !important;
  height: calc(100dvh - var(--header-h)) !important;
  min-height: calc(100dvh - var(--header-h)) !important;
  overflow: hidden !important;
}


.overlay.result-brewek-mode .result-brewek-content {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: visible !important;
  animation: resultBrewekContentFloat 3s ease-in-out infinite !important;
}

.overlay.brewek-swiping .result-brewek-content,
.overlay.brewek-opened .result-brewek-content,
.overlay.reward-shown .result-brewek-content {
  animation: none !important;
  transform: translateY(0) !important;
}

.overlay.result-brewek-mode .result-brewek-pack-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  transform:
    translate(var(--result-pack-x), var(--result-pack-y))
    scale(var(--result-pack-scale)) !important;
  transform-origin: center top !important;
}

.overlay.result-brewek-mode .result-brewek-pack-wrap::before,
.overlay.result-brewek-mode .result-brewek-pack-wrap::after {
  display: none !important;
}

.overlay.result-brewek-mode .result-brewek-pack-img,
.overlay.result-brewek-mode .result-brewek-pack-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  border-radius: 0 !important;
}

.overlay.brewek-top-tear .result-brewek-pack-base {
  opacity: 0 !important;
  filter: none !important;
}

.overlay.brewek-top-tear .result-brewek-pack-bodycut {
  filter:
    brightness(calc(1.02 + (var(--brewek-progress) * .06)))
    saturate(calc(1.06 + (var(--brewek-progress) * .04))) !important;
  clip-path: polygon(0 calc(var(--brewek-cut-y) - 2px),4% calc(var(--brewek-cut-y) + 2px),8% calc(var(--brewek-cut-y) - 2px),12% calc(var(--brewek-cut-y) + 2px),16% calc(var(--brewek-cut-y) - 2px),20% calc(var(--brewek-cut-y) + 2px),24% calc(var(--brewek-cut-y) - 2px),28% calc(var(--brewek-cut-y) + 2px),32% calc(var(--brewek-cut-y) - 2px),36% calc(var(--brewek-cut-y) + 2px),40% calc(var(--brewek-cut-y) - 2px),44% calc(var(--brewek-cut-y) + 2px),48% calc(var(--brewek-cut-y) - 2px),52% calc(var(--brewek-cut-y) + 2px),56% calc(var(--brewek-cut-y) - 2px),60% calc(var(--brewek-cut-y) + 2px),64% calc(var(--brewek-cut-y) - 2px),68% calc(var(--brewek-cut-y) + 2px),72% calc(var(--brewek-cut-y) - 2px),76% calc(var(--brewek-cut-y) + 2px),80% calc(var(--brewek-cut-y) - 2px),84% calc(var(--brewek-cut-y) + 2px),88% calc(var(--brewek-cut-y) - 2px),92% calc(var(--brewek-cut-y) + 2px),96% calc(var(--brewek-cut-y) - 2px),100% calc(var(--brewek-cut-y) + 2px),100% 100%,0 100%) !important;
}

.overlay.brewek-top-tear .result-brewek-pack-topcap {
  background: transparent !important;
  box-shadow: none !important;
  filter:
    brightness(calc(1.04 + (var(--brewek-progress) * .08)))
    saturate(calc(1.04 + (var(--brewek-progress) * .04))) !important;
  clip-path: polygon(0 0,100% 0,100% calc(var(--brewek-cut-y) + 2px),96% calc(var(--brewek-cut-y) - 2px),92% calc(var(--brewek-cut-y) + 2px),88% calc(var(--brewek-cut-y) - 2px),84% calc(var(--brewek-cut-y) + 2px),80% calc(var(--brewek-cut-y) - 2px),76% calc(var(--brewek-cut-y) + 2px),72% calc(var(--brewek-cut-y) - 2px),68% calc(var(--brewek-cut-y) + 2px),64% calc(var(--brewek-cut-y) - 2px),60% calc(var(--brewek-cut-y) + 2px),56% calc(var(--brewek-cut-y) - 2px),52% calc(var(--brewek-cut-y) + 2px),48% calc(var(--brewek-cut-y) - 2px),44% calc(var(--brewek-cut-y) + 2px),40% calc(var(--brewek-cut-y) - 2px),36% calc(var(--brewek-cut-y) + 2px),32% calc(var(--brewek-cut-y) - 2px),28% calc(var(--brewek-cut-y) + 2px),24% calc(var(--brewek-cut-y) - 2px),20% calc(var(--brewek-cut-y) + 2px),16% calc(var(--brewek-cut-y) - 2px),12% calc(var(--brewek-cut-y) + 2px),8% calc(var(--brewek-cut-y) - 2px),4% calc(var(--brewek-cut-y) + 2px),0 calc(var(--brewek-cut-y) - 2px)) !important;
}

.overlay.brewek-top-tear .result-brewek-mouth {
  top: calc(var(--brewek-cut-y) - 2px) !important;
  height: calc(2px + (var(--brewek-progress) * 8px)) !important;
  opacity: calc(var(--brewek-progress) * .14) !important;
  background: rgba(18, 6, 6, .12) !important;
  box-shadow: none !important;
}

.overlay.result-brewek-mode .result-brewek-tear-line,
.overlay.result-brewek-mode .result-brewek-swipe {
  top: var(--brewek-line-top) !important;
  left: var(--brewek-line-left) !important;
  right: var(--brewek-line-right) !important;
  width: auto !important;
}

.overlay.result-brewek-mode .result-brewek-swipe-handle {
  width: var(--brewek-handle-size) !important;
  height: var(--brewek-handle-size) !important;
  left: clamp(12px, 3.8vw, 16px) !important;
}

.result-brewek-rip-mask,
.result-brewek-rip-left,
.result-brewek-rip-right,
.overlay.brewek-opened .result-brewek-rip-mask {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.reward-stage {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.overlay.reward-shown .reward-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px 92px !important;
  overflow: visible !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode,
.overlay.reward-shown .reward-shell:has(.reward-media img) {
  width: min(92vw, 360px) !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 auto !important;
  gap: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform-origin: center center !important;
  animation:
    broRewardCardPop .72s cubic-bezier(.2,.9,.2,1) forwards,
    broRewardCardFloatSpin 3.2s ease-in-out infinite .75s !important;
  will-change: transform, filter !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode::before,
.overlay.reward-shown .reward-shell:has(.reward-media img)::before {
  display: none !important;
  content: none !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode::after,
.overlay.reward-shown .reward-shell:has(.reward-media img)::after {
  content: "SELAMAT HADIAH KAMU" !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: min(82vw, 300px) !important;
  min-height: 38px !important;
  margin: 8px auto 0 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 120, 120, .42) !important;
  background: linear-gradient(180deg, rgba(145, 46, 46, .96), rgba(89, 27, 27, .98)) !important;
  color: #ffffff !important;
  font-size: clamp(11px, 3vw, 14px) !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 0 18px rgba(184, 59, 59, .18) !important;
  animation: broRewardTextGlow 1.7s ease-in-out infinite alternate !important;
  z-index: 5 !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-media,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-media {
  width: min(92vw, 360px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1000 / 1414 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-media::before,
.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-media::after,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-media::before,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-media::after {
  display: none !important;
  content: none !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-media img,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  animation: broRewardImageGlow 2.4s ease-in-out infinite !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-name,
.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-code,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-name,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-code {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.overlay.reward-shown .reward-stage::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .55), transparent 18%),
    radial-gradient(circle at 50% 48%, rgba(255, 92, 92, .28), transparent 34%),
    conic-gradient(from 0deg, transparent 0 8deg, rgba(255, 82, 82, .45) 8deg 15deg, transparent 15deg 32deg, rgba(255, 70, 70, .32) 32deg 42deg, transparent 42deg 66deg, rgba(255, 88, 88, .35) 66deg 76deg, transparent 76deg 110deg, rgba(255, 255, 255, .28) 110deg 120deg, transparent 120deg 360deg) !important;
  opacity: .85 !important;
  z-index: 1 !important;
  animation: rewardCarnivalSpin 7s linear infinite, broRewardLightPulse 1.8s ease-in-out infinite alternate !important;
}

.overlay.reward-shown .reward-stage::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 3 !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 18% 22%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 16% 24%, #ff6d6d 0 3px, transparent 4px),
    radial-gradient(circle at 20% 26%, #ff4f4f 0 2px, transparent 3px),
    radial-gradient(circle at 82% 24%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 84% 27%, #ff6d6d 0 3px, transparent 4px),
    radial-gradient(circle at 78% 28%, #ff4f4f 0 2px, transparent 3px),
    radial-gradient(circle at 22% 72%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 78% 72%, #ffffff 0 2px, transparent 3px) !important;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .8)) drop-shadow(0 0 18px rgba(255, 82, 82, .45)) !important;
  animation: broFireworksPop 1.45s ease-in-out infinite !important;
}

.overlay.pack-opening .reward-stage:not([hidden])::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 9997 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 16%, rgba(255, 255, 255, .94) 30%, rgba(255, 225, 225, .76) 48%, rgba(255, 255, 255, .42) 64%, rgba(255, 255, 255, 0) 84%) !important;
  opacity: 0 !important;
  transform: scale(.2) !important;
  border: 0 !important;
  border-radius: 0 !important;
  mix-blend-mode: screen !important;
  filter: brightness(3.4) blur(0px) !important;
  animation: broRewardOnlyWhiteFlash 1.15s cubic-bezier(.16,1,.3,1) forwards !important;
}

.overlay.pack-opening .reward-stage:not([hidden])::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 9996 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .86) 26%, rgba(255, 255, 255, .62) 52%, rgba(255, 255, 255, .26) 74%, rgba(255, 255, 255, 0) 100%) !important;
  opacity: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  mix-blend-mode: screen !important;
  animation: broRewardOnlyWhiteWash 1.05s ease-out forwards !important;
}

.overlay.flash-on .flash-burst {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 999 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .96) 18%, rgba(255, 220, 220, .78) 38%, rgba(255, 180, 180, .34) 58%, transparent 82%) !important;
  mix-blend-mode: screen !important;
  animation: broWhiteFlashScreen 1s cubic-bezier(.16,1,.3,1) forwards !important;
}

.overlay.pack-opening .shake-scene::before,
.overlay.pack-opening .shake-scene::after,
.overlay.brewek-opened .shake-scene::before,
.overlay.brewek-opened .shake-scene::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.overlay.reward-shown .confetti-layer {
  z-index: 15 !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.overlay.reward-shown .confetti {
  box-shadow:
    0 0 8px rgba(255, 255, 255, .38),
    0 0 14px rgba(255, 82, 82, .20) !important;
  animation-name: broConfettiFallMega !important;
}

.overlay.reward-shown .fireworks-layer {
  z-index: 14 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.overlay.reward-shown .fireworks-layer::before,
.overlay.reward-shown .fireworks-layer::after {
  content: "" !important;
  position: absolute !important;
  inset: -10% !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 82, 82, .95) 0 3px, transparent 4px),
    radial-gradient(circle at 26% -4%, rgba(255, 255, 255, .9) 0 3px, transparent 4px),
    radial-gradient(circle at 44% -2%, rgba(255, 145, 145, .95) 0 3px, transparent 4px),
    radial-gradient(circle at 62% -5%, rgba(255, 100, 100, .92) 0 3px, transparent 4px),
    radial-gradient(circle at 80% -3%, rgba(255, 126, 126, .92) 0 3px, transparent 4px) !important;
  background-repeat: no-repeat !important;
  opacity: .75 !important;
  animation: broDotPaperRain 4.2s linear infinite !important;
}

.overlay.reward-shown .fireworks-layer::after {
  animation-duration: 5.4s !important;
  animation-delay: -1.8s !important;
  opacity: .45 !important;
}

.result-actions {
  padding: clamp(8px, 1.8dvh, 10px) 12px max(12px, env(safe-area-inset-bottom)) !important;
  gap: clamp(8px, 1.6dvh, 10px) !important;
}

.result-action,
.result-close {
  height: clamp(44px, 6.5dvh, 50px) !important;
  border-radius: clamp(15px, 4.5vw, 17px) !important;
}

@media (max-height: 700px) {
  :root {
    --header-h: 54px;
    --ui-gap: 6px;
  }

  .overlay.result-brewek-mode {
    --result-pack-scale: .90 !important;
    --result-pack-y: clamp(8px, 3.2dvh, 28px) !important;
    --brewek-line-top: 23.5% !important;
    --brewek-cut-y: 25.0% !important;
  }

  .reward-shell {
    width: clamp(196px, 62vw, 285px) !important;
  }
}

@media (max-height: 740px) {
  .overlay.reward-shown .reward-stage {
    padding-bottom: 86px !important;
  }

  .overlay.reward-shown .reward-shell.reward-shell-image-mode,
  .overlay.reward-shown .reward-shell:has(.reward-media img),
  .overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-media,
  .overlay.reward-shown .reward-shell:has(.reward-media img) .reward-media {
    width: min(88vw, 320px) !important;
  }
}

@media (max-height: 680px) {
  .overlay.reward-shown .reward-stage {
    padding-bottom: 74px !important;
  }

  .overlay.reward-shown .reward-shell.reward-shell-image-mode,
  .overlay.reward-shown .reward-shell:has(.reward-media img),
  .overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-media,
  .overlay.reward-shown .reward-shell:has(.reward-media img) .reward-media {
    width: min(84vw, 280px) !important;
  }

  .overlay.reward-shown .reward-shell.reward-shell-image-mode::after,
  .overlay.reward-shown .reward-shell:has(.reward-media img)::after {
    min-height: 34px !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
  }

  .overlay.reward-shown .reward-shell.reward-shell-image-mode,
  .overlay.reward-shown .reward-shell:has(.reward-media img) {
    animation:
      broRewardCardPop .72s cubic-bezier(.2,.9,.2,1) forwards,
      broRewardCardFloatSpinSmall 3.2s ease-in-out infinite .75s !important;
  }
}

@media (max-width: 380px) {
  :root {
    --ui-pad-x: 10px;
    --home-pack-w: clamp(270px, 79vw, 300px);
    --home-pack-overlap: clamp(-96px, -24vw, -72px);
    --overlay-pack-w: clamp(240px, 77vw, 300px);
    --overlay-pack-overlap: clamp(-62px, -15vw, -42px);
  }

  .overlay.result-brewek-mode {
    --result-pack-scale: .90 !important;
    --brewek-line-top: 23.5% !important;
    --brewek-cut-y: 25.0% !important;
  }
}

@media (min-height: 780px) {
  .overlay.result-brewek-mode {
    --result-pack-scale: .90 !important;
    --result-pack-y: clamp(14px, 3.4dvh, 34px) !important;
    --brewek-line-top: 15.0% !important;
    --brewek-cut-y: 18.0% !important;
  }
}

@keyframes resultBrewekContentFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes broRewardCardPop {
  0% { opacity: 0; transform: scale(.32) rotate(-8deg) translateY(22px); filter: brightness(1.8) blur(2px); }
  58% { opacity: 1; transform: scale(1.08) rotate(3deg) translateY(0); filter: brightness(1.15) blur(0); }
  82% { opacity: 1; transform: scale(.98) rotate(-1deg) translateY(0); filter: brightness(1.03); }
  100% { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); filter: brightness(1); }
}

@keyframes broRewardCardFloatSpin {
  0%, 100% { transform: translateY(0) rotate(-1.2deg) scale(1); }
  25% { transform: translateY(-7px) rotate(1.4deg) scale(1.018); }
  50% { transform: translateY(-11px) rotate(-1deg) scale(1.025); }
  75% { transform: translateY(-6px) rotate(1.2deg) scale(1.014); }
}

@keyframes broRewardCardFloatSpinSmall {
  0%, 100% { transform: translateY(0) rotate(-.8deg) scale(1); }
  50% { transform: translateY(-6px) rotate(.8deg) scale(1.012); }
}

@keyframes broRewardImageGlow {
  0%, 100% { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .34)) drop-shadow(0 0 14px rgba(229, 107, 107, .12)) brightness(1); }
  50% { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .40)) drop-shadow(0 0 26px rgba(229, 107, 107, .34)) drop-shadow(0 0 38px rgba(229, 107, 107, .22)) brightness(1.08); }
}

@keyframes broRewardTextGlow {
  0% { filter: brightness(1); box-shadow: 0 10px 20px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 14px rgba(184, 59, 59, .16); }
  100% { filter: brightness(1.12); box-shadow: 0 12px 24px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .20), 0 0 26px rgba(184, 59, 59, .34), 0 0 34px rgba(229, 107, 107, .20); }
}

@keyframes broFireworksPop {
  0%, 100% { opacity: .35; transform: scale(.92) rotate(0deg); filter: drop-shadow(0 0 8px rgba(255, 255, 255, .5)) drop-shadow(0 0 14px rgba(255, 82, 82, .28)); }
  45% { opacity: 1; transform: scale(1.08) rotate(4deg); filter: drop-shadow(0 0 13px rgba(255, 255, 255, .9)) drop-shadow(0 0 26px rgba(255, 82, 82, .55)); }
  70% { opacity: .65; transform: scale(1.18) rotate(-3deg); }
}

@keyframes broRewardLightPulse {
  0% { filter: brightness(1) blur(0); opacity: .58; }
  100% { filter: brightness(1.18) blur(.5px); opacity: .88; }
}

@keyframes broConfettiFallMega {
  0% { transform: translate3d(0, -18vh, 0) rotate(0deg) scale(.9); opacity: 0; }
  8%, 50% { opacity: 1; }
  100% { transform: translate3d(var(--x-shift), 120vh, 0) rotate(var(--rot)) scale(1.08); opacity: .95; }
}

@keyframes broDotPaperRain {
  0% { background-position: 12% -10%, 26% -14%, 44% -12%, 62% -15%, 80% -13%; }
  100% { background-position: 16% 115%, 22% 118%, 48% 112%, 58% 120%, 84% 116%; }
}

@keyframes broWhiteFlashScreen {
  0% { opacity: 0; transform: scale(.18); filter: blur(0px) brightness(1.2); }
  16% { opacity: 1; transform: scale(.65); filter: blur(0px) brightness(1.8); }
  38% { opacity: 1; transform: scale(1.15); filter: blur(1px) brightness(2.2); }
  65% { opacity: .42; transform: scale(1.55); filter: blur(6px) brightness(1.5); }
  100% { opacity: 0; transform: scale(1.9); filter: blur(12px) brightness(1); }
}

@keyframes broRewardOnlyWhiteFlash {
  0% { opacity: 0; transform: scale(.18); filter: brightness(1.8) blur(0px); }
  14% { opacity: 1; transform: scale(.72); filter: brightness(4) blur(0px); }
  36% { opacity: 1; transform: scale(1.16); filter: brightness(4.4) blur(1px); }
  62% { opacity: .62; transform: scale(1.55); filter: brightness(2.4) blur(6px); }
  100% { opacity: 0; transform: scale(2.05); filter: brightness(1) blur(14px); }
}

@keyframes broRewardOnlyWhiteWash {
  0% { opacity: 0; }
  14% { opacity: .98; }
  36% { opacity: .82; }
  66% { opacity: .34; }
  100% { opacity: 0; }
}

:root {
  --header-h: 56px;
  --brewek-line-top-lock: 23.5%;
  --brewek-cut-y-lock: 25%;
  --brewek-pack-scale-lock: .90;
  --reward-action-h: 116px;
  --reward-text-h: 46px;
  --reward-card-max-w: 330px;
  --reward-card-w-lock: min(
    86vw,
    var(--reward-card-max-w),
    calc((100dvh - var(--header-h) - var(--reward-action-h) - var(--reward-text-h) - 28px) * 0.70)
  );
}

.screen {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(7px, 1.35dvh, 10px) !important;
  padding:
    max(8px, env(safe-area-inset-top))
    clamp(10px, 3vw, 14px)
    max(8px, env(safe-area-inset-bottom)) !important;
}

.top-area {
  gap: clamp(6px, 1dvh, 8px) !important;
}

.hero {
  padding: clamp(8px, 1.4dvh, 10px) clamp(10px, 2.7vw, 12px) !important;
}

.logo-box {
  width: clamp(48px, 12.8vw, 56px) !important;
  height: clamp(48px, 12.8vw, 56px) !important;
}

.brewek-pack-section {
  margin: 0 !important;
  min-height: 0 !important;
}

.brewek-pack-viewport {
  padding-top: clamp(10px, 2dvh, 18px) !important;
  padding-bottom: clamp(32px, 5dvh, 44px) !important;
}

.bottom-stack {
  margin-top: 0 !important;
  gap: clamp(5px, 1dvh, 7px) !important;
}

.token-box {
  padding: clamp(10px, 1.8dvh, 13px) clamp(11px, 3vw, 14px) !important;
}

.token-input,
.shake-btn,
.member-next-btn {
  height: clamp(39px, 5.8dvh, 44px) !important;
}

.token-msg {
  margin-top: clamp(7px, 1.5dvh, 10px) !important;
}

.overlay.result-brewek-mode {
  --brewek-line-top: var(--brewek-line-top-lock) !important;
  --brewek-cut-y: var(--brewek-cut-y-lock) !important;
  --result-pack-scale: var(--brewek-pack-scale-lock) !important;
  --result-pack-y: 0px !important;
  --brewek-line-left: 0px !important;
  --brewek-line-right: 0px !important;
}

.overlay.result-brewek-mode .result-brewek-stage {
  inset: var(--header-h) 0 0 0 !important;
  width: 100% !important;
  height: calc(100dvh - var(--header-h)) !important;
  overflow: hidden !important;
}

.overlay.result-brewek-mode .result-brewek-pack-wrap {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: scale(var(--brewek-pack-scale-lock)) !important;
  transform-origin: center top !important;
}

.overlay.result-brewek-mode .result-brewek-pack-img,
.overlay.result-brewek-mode .result-brewek-pack-layer {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
}

.overlay.result-brewek-mode .result-brewek-tear-line,
.overlay.result-brewek-mode .result-brewek-swipe {
  top: var(--brewek-line-top-lock) !important;
  left: 0 !important;
  right: 0 !important;
}

.overlay.brewek-top-tear .result-brewek-mouth {
  top: calc(var(--brewek-cut-y-lock) - 2px) !important;
}

.overlay.reward-shown .result-actions {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  z-index: 30 !important;
  width: 100% !important;
  padding: 9px 12px max(10px, env(safe-area-inset-bottom)) !important;
  gap: 8px !important;
  background: transparent !important;
  transform: translateY(0) !important;
}

.overlay.reward-shown .reward-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px 8px !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode,
.overlay.reward-shown .reward-shell:has(.reward-media img) {
  width: var(--reward-card-w-lock) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-media,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-media {
  width: var(--reward-card-w-lock) !important;
  height: auto !important;
  aspect-ratio: 1000 / 1414 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-media img,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode::after,
.overlay.reward-shown .reward-shell:has(.reward-media img)::after {
  content: "SELAMAT HADIAH KAMU" !important;

  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(78vw, 292px) !important;
  min-height: 36px !important;
  margin: 6px auto 0 !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 120, 120, .42) !important;
  background: linear-gradient(180deg, rgba(145, 46, 46, .96), rgba(89, 27, 27, .98)) !important;
  color: #ffffff !important;
  font-size: clamp(10px, 2.8vw, 13px) !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 0 18px rgba(184, 59, 59, .18) !important;
}

.overlay.reward-shown .reward-shell.reward-shell-image-mode::before,
.overlay.reward-shown .reward-shell:has(.reward-media img)::before,
.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-code,
.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-name,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-code,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-name,
.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-media::before,
.overlay.reward-shown .reward-shell.reward-shell-image-mode .reward-media::after,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-media::before,
.overlay.reward-shown .reward-shell:has(.reward-media img) .reward-media::after {
  display: none !important;
  content: none !important;
}

@media (max-height: 700px) {
  :root {
    --header-h: 54px;
    --reward-action-h: 106px;
    --reward-card-max-w: 292px;
    --reward-card-w-lock: min(
      82vw,
      var(--reward-card-max-w),
      calc((100dvh - var(--header-h) - var(--reward-action-h) - var(--reward-text-h) - 22px) * 0.70)
    );
  }

  .overlay.reward-shown .reward-stage {
    padding-top: 6px !important;
    padding-bottom: 4px !important;
  }

  .overlay.reward-shown .reward-shell.reward-shell-image-mode::after,
  .overlay.reward-shown .reward-shell:has(.reward-media img)::after {
    min-height: 32px !important;
    padding: 7px 13px !important;
    font-size: 10px !important;
  }

  .overlay.reward-shown .result-action,
  .overlay.reward-shown .result-close {
    height: 42px !important;
  }
}

@media (max-width: 380px) {
  :root {
    --reward-card-max-w: 300px;
    --reward-card-w-lock: min(
      84vw,
      var(--reward-card-max-w),
      calc((100dvh - var(--header-h) - var(--reward-action-h) - var(--reward-text-h) - 24px) * 0.70)
    );
  }
}

@media (min-height: 780px) {
  :root {
    --brewek-line-top-lock: 15%;
    --brewek-cut-y-lock: 17%;
    --reward-card-max-w: 350px;
    --reward-action-h: 120px;
    --reward-card-w-lock: min(
      88vw,
      var(--reward-card-max-w),
      calc((100dvh - var(--header-h) - var(--reward-action-h) - var(--reward-text-h) - 34px) * 0.70)
    );
  }
}

:root {
  --brewek-overflow-room: 70px;
}

.overlay.result-brewek-mode .shake-scene,
.overlay.result-brewek-mode .result-brewek-stage,
.overlay.result-brewek-mode .result-brewek-content,
.overlay.result-brewek-mode .result-brewek-pack-wrap {
  overflow: visible !important;
}

.overlay.result-brewek-mode .result-brewek-stage {
  top: calc(var(--header-h) - var(--brewek-overflow-room)) !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: calc(100dvh - var(--header-h) + var(--brewek-overflow-room)) !important;
  min-height: calc(100dvh - var(--header-h) + var(--brewek-overflow-room)) !important;
}

.overlay.result-brewek-mode .result-brewek-content {
  transform: translateY(var(--brewek-overflow-room)) !important;
}

.overlay.brewek-swiping .result-brewek-content,
.overlay.brewek-opened .result-brewek-content {
  transform: translateY(var(--brewek-overflow-room)) !important;
}

.overlay.reward-shown .result-brewek-content {
  transform: translateY(0) !important;
}

.overlay-topbar {
  position: relative !important;
  z-index: 80 !important;
  flex: 0 0 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: max(8px, env(safe-area-inset-top)) 12px 0 !important;
  background:
    linear-gradient(180deg, rgba(29, 23, 25, .98), rgba(20, 18, 20, .94)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.overlay-title {
  position: absolute !important;
  left: 56px !important;
  right: 56px !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  color: #f4f4f5 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  pointer-events: none !important;
}

.overlay-refresh-btn,
.screenshot-reminder-btn {
  --bro-btn-size: 40px;
  position: relative !important;
  width: var(--bro-btn-size) !important;
  height: var(--bro-btn-size) !important;
  min-width: var(--bro-btn-size) !important;
  min-height: var(--bro-btn-size) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  cursor: pointer !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  isolation: isolate !important;
  z-index: 2 !important;
}

.overlay-refresh-btn::before,
.screenshot-reminder-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 46%);
  opacity: .92;
  pointer-events: none;
  z-index: 0;
}

.overlay-refresh-btn::after,
.screenshot-reminder-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 58%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 68%);
  opacity: .72;
  pointer-events: none;
  z-index: 0;
}

.overlay-refresh-btn {
  color: #ffe8e8 !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  background:
    radial-gradient(circle at 35% 24%, rgba(229, 107, 107, .22), transparent 38%),
    linear-gradient(145deg, rgba(123, 47, 47, .92), rgba(39, 12, 12, .96)) !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, .30),
    0 0 0 1px rgba(255, 255, 255, .055) inset,
    0 0 20px rgba(159, 47, 47, .14) !important;
}

.screenshot-reminder-btn {
  color: #ffffff !important;
  border: 1px solid rgba(245, 111, 111, .70) !important;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .50), transparent 36%),
    linear-gradient(180deg, #e56b6b 0%, #b83b3b 50%, #af3434 100%) !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, .32),
    0 0 0 1px rgba(255, 255, 255, .18) inset,
    0 0 24px rgba(245, 111, 111, .24) !important;
  animation: broReminderBlinkSync 1.15s ease-in-out infinite !important;
}

.overlay-refresh-btn:hover,
.screenshot-reminder-btn:hover {
  filter: brightness(1.09) !important;
  transform: translateY(-1px) !important;
}

.overlay-refresh-btn:active,
.screenshot-reminder-btn:active {
  transform: scale(.95) !important;
}

.bro-top-icon,
.overlay-refresh-btn svg,
.screenshot-reminder-btn svg {
  position: relative !important;
  z-index: 1 !important;
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)) !important;
  pointer-events: none !important;
}

.screenshot-reminder-btn .bro-top-icon,
.screenshot-reminder-btn svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.15 !important;
  animation: broReminderIconWiggleSync 1.15s ease-in-out infinite !important;
  transform-origin: center !important;
}

@keyframes broReminderBlinkSync {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      0 12px 24px rgba(0, 0, 0, .32),
      0 0 0 1px rgba(255, 255, 255, .18) inset,
      0 0 18px rgba(245, 111, 111, .18) !important;
  }
  45% {
    filter: brightness(1.28);
    box-shadow:
      0 14px 28px rgba(0, 0, 0, .36),
      0 0 0 1px rgba(255, 255, 255, .28) inset,
      0 0 16px rgba(255, 255, 255, .22),
      0 0 34px rgba(245, 111, 111, .58) !important;
  }
  62% { filter: brightness(.92); }
}

@keyframes broReminderIconWiggleSync {
  0%, 100% { transform: scale(1) rotate(0deg); }
  18% { transform: scale(1.08) rotate(-5deg); }
  38% { transform: scale(1.15) rotate(5deg); }
  58% { transform: scale(1.04) rotate(-3deg); }
  78% { transform: scale(1) rotate(0deg); }
}

@media (max-width: 420px) {
  .overlay-refresh-btn,
  .screenshot-reminder-btn {
    --bro-btn-size: 38px;
  }

  .bro-top-icon,
  .overlay-refresh-btn svg,
  .screenshot-reminder-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  .screenshot-reminder-btn .bro-top-icon,
  .screenshot-reminder-btn svg {
    width: 21px !important;
    height: 21px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screenshot-reminder-btn,
  .screenshot-reminder-btn .bro-top-icon,
  .screenshot-reminder-btn svg {
    animation: none !important;
  }
}

:root {
  --brewek-line-top-lock: 17.5% !important;
  --brewek-cut-y-lock: 19.5% !important;
  --brewek-arrow-y: -4px !important;
}

.overlay.result-brewek-mode {
  --brewek-line-top: var(--brewek-line-top-lock) !important;
  --brewek-cut-y: var(--brewek-cut-y-lock) !important;
}

.overlay.result-brewek-mode .result-brewek-tear-line,
.overlay.result-brewek-mode .result-brewek-swipe {
  top: var(--brewek-line-top-lock) !important;
  left: 0 !important;
  right: 0 !important;
}

.overlay.brewek-top-tear .result-brewek-pack-layer {
  transform-origin: center var(--brewek-cut-y-lock) !important;
}

.overlay.brewek-top-tear .result-brewek-mouth {
  top: calc(var(--brewek-cut-y-lock) - 2px) !important;
}

.overlay.result-brewek-mode .result-brewek-swipe-handle {
  top: calc(50% - (var(--brewek-handle-size) / 2) + var(--brewek-arrow-y)) !important;
}

@media (max-height: 700px), (max-height: 740px), (max-height: 680px), (min-height: 780px), (max-width: 380px), (max-width: 430px) {
  :root {
    --brewek-line-top-lock: 17.5% !important;
    --brewek-cut-y-lock: 19.5% !important;
    --brewek-arrow-y: -4px !important;
  }

  .overlay.result-brewek-mode {
    --brewek-line-top: 17.5% !important;
    --brewek-cut-y: 15.5% !important;
  }

  .overlay.result-brewek-mode .result-brewek-tear-line,
  .overlay.result-brewek-mode .result-brewek-swipe {
    top: 13.5% !important;
  }
}

:root {
  --brewek-pack-anchor-w: min(100vw, 430px);
  --brewek-pack-anchor-h: calc(100dvh - var(--header-h));
  --brewek-sobek-pos: 17.5%;
  --brewek-cut-pos: 19.5%;
  --brewek-arrow-y: -4px;
}

.overlay.result-brewek-mode .result-brewek-stage {
  top: var(--header-h) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--brewek-pack-anchor-w) !important;
  height: var(--brewek-pack-anchor-h) !important;
  min-height: var(--brewek-pack-anchor-h) !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}

.overlay.result-brewek-mode .result-brewek-content,
.overlay.result-brewek-mode .result-brewek-pack-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  transform: none !important;
  overflow: visible !important;
}

.overlay.result-brewek-mode .result-brewek-pack-img,
.overlay.result-brewek-mode .result-brewek-pack-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
}

.overlay.result-brewek-mode {
  --brewek-line-top: var(--brewek-sobek-pos) !important;
  --brewek-cut-y: var(--brewek-cut-pos) !important;
  --brewek-line-left: 0px !important;
  --brewek-line-right: 0px !important;
}

.overlay.result-brewek-mode .result-brewek-tear-line,
.overlay.result-brewek-mode .result-brewek-swipe {
  top: var(--brewek-sobek-pos) !important;
  left: 0 !important;
  right: 0 !important;
}

.overlay.brewek-top-tear .result-brewek-pack-layer {
  transform-origin: center var(--brewek-cut-pos) !important;
}

.overlay.brewek-top-tear .result-brewek-mouth {
  top: calc(var(--brewek-cut-pos) - 2px) !important;
}

.overlay.result-brewek-mode .result-brewek-swipe-handle {
  top: calc(50% - (var(--brewek-handle-size) / 2) + var(--brewek-arrow-y)) !important;
  left: clamp(12px, 3.8vw, 16px) !important;
}

@media (max-height: 700px), (max-height: 740px), (max-height: 680px), (min-height: 780px), (max-width: 380px), (max-width: 430px) {
  :root {
    --brewek-sobek-pos: 14.5% !important;
    --brewek-cut-pos: 16.5% !important;
    --brewek-arrow-y: 17px !important;
  }
  .overlay.result-brewek-mode {
    --brewek-line-top: var(--brewek-sobek-pos) !important;
    --brewek-cut-y: var(--brewek-cut-pos) !important;
  }

  .overlay.result-brewek-mode .result-brewek-tear-line,
  .overlay.result-brewek-mode .result-brewek-swipe {
    top: var(--brewek-sobek-pos) !important;
  }
}

.overlay.reward-shown .result-brewek-stage,
.overlay.reward-shown .result-brewek-content {
  transform: none !important;
}
/* =========================================================
   IBETWINS BREWEK — SHAKE MATCH / SOFT RED BLACK LUXURY
   Visual override only. Layout + animations remain unchanged.
   ========================================================= */
:root {
  --bg: #090a0c !important;
  --text: #f4f4f5 !important;
  --muted: rgba(244,244,245,.68) !important;
  --line: rgba(255,255,255,.09) !important;
  --gold: #b83b3b !important;
  --gold-2: #e56b6b !important;
  --purple-1: #0d0e10 !important;
  --purple-2: #151619 !important;
  --purple-3: #1c1d21 !important;
  --purple-4: #9f2f2f !important;
}

html, body {
  background: #090a0c !important;
  color: #f4f4f5 !important;
}

body {
  background:
    radial-gradient(circle at 18% 6%, rgba(159,47,47,.16), transparent 32%),
    radial-gradient(circle at 78% 88%, rgba(184,59,59,.07), transparent 31%),
    linear-gradient(180deg, #111113 0%, #090a0c 58%, #060607 100%) !important;
}

.app {
  background:
    radial-gradient(circle at 50% -7%, rgba(229,107,107,.10), transparent 30%),
    linear-gradient(180deg, rgba(18,19,22,.98), rgba(8,9,11,.995)) !important;
}

.hero,
.brewek-pack-section,
.token-box {
  border-color: rgba(255,255,255,.09) !important;
}

.hero {
  background:
    radial-gradient(circle at 12% 8%, rgba(229,107,107,.07), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    linear-gradient(180deg, rgba(20,20,23,.96), rgba(11,11,13,.98)) !important;
}

.logo-box {
  border-color: rgba(184,59,59,.20) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.018)),
    linear-gradient(180deg, #1c1719, #0c0c0e) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.34),
    0 0 18px rgba(184,59,59,.08) !important;
}

.brewek-pack-section {
  background:
    radial-gradient(circle at 50% 18%, rgba(184,59,59,.10), transparent 31%),
    radial-gradient(circle at 50% 48%, rgba(229,107,107,.08), transparent 47%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
    linear-gradient(180deg, #151416, #09090b) !important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -28px 58px rgba(0,0,0,.22) !important;
}

.token-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    linear-gradient(180deg, #171719, #0c0c0e) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.32),
    0 0 0 1px rgba(184,59,59,.035) inset !important;
}

.token-input {
  border-color: rgba(255,255,255,.10) !important;
  background: #0b0c0e !important;
  color: #fff !important;
}

.token-input:focus {
  border-color: rgba(229,107,107,.46) !important;
  background: #0e0f11 !important;
  box-shadow:
    0 0 0 3px rgba(184,59,59,.09),
    0 0 20px rgba(159,47,47,.09) !important;
}

.shake-btn,
.member-next-btn {
  background: linear-gradient(180deg, #c94747, #9f2f2f) !important;
  color: #fff !important;
  box-shadow:
    0 13px 25px rgba(0,0,0,.30),
    0 0 18px rgba(184,59,59,.11),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

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

.member-preview button,
#userIdEditBtn {
  background: rgba(184,59,59,.13) !important;
  color: #efb0b0 !important;
}

.overlay,
.overlay.show {
  background: #090a0c !important;
}

.overlay.show::before {
  background:
    linear-gradient(180deg, rgba(8,8,10,.18), rgba(5,5,7,.80)),
    radial-gradient(circle at 50% 24%, rgba(229,107,107,.10), transparent 35%),
    radial-gradient(circle at 50% 78%, rgba(184,59,59,.06), transparent 34%),
    linear-gradient(180deg, #171315, #08080a) !important;
}

.overlay-topbar {
  background: linear-gradient(180deg, rgba(24,21,22,.98), rgba(13,13,15,.97)) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}

.overlay-pack-selected {
  background: rgba(10,10,12,.78) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Status: jangan semua merah */
.token-msg.is-success,
.token-msg.success,
.token-msg[data-status="success"],
.token-msg[data-type="success"] {
  color: #63dc91 !important;
}

.token-msg.is-error,
.token-msg.error,
.token-msg.is-invalid,
.token-msg[data-status="error"],
.token-msg[data-type="error"] {
  color: #ff626b !important;
}

.token-msg.is-warning,
.token-msg.warning,
.token-msg[data-status="warning"],
.token-msg[data-type="warning"] {
  color: #f2b45f !important;
}

.token-msg.is-info,
.token-msg.info,
.token-msg[data-status="info"],
.token-msg[data-type="info"] {
  color: #75b9ff !important;
}

/* =========================================================
   FINAL FIX - HOME PACK CAROUSEL EDGE / MENTOK UJUNG
   Pastikan pack pertama & terakhir benar-benar bisa center.
   Ditaruh paling akhir supaya tidak ketimpa rule responsive lama.
   ========================================================= */
.brewek-pack-viewport {
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}

.brewek-pack-track {
  padding-left: calc(50% - (var(--home-pack-w) / 2)) !important;
  padding-right: calc(50% - (var(--home-pack-w) / 2)) !important;
}

.brewek-pack-card:first-child {
  margin-left: 0 !important;
}

.brewek-pack-card:last-child {
  margin-right: 0 !important;
}

.brewek-pack-card {
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
}

/* =========================================================
   FINAL FIX - OVERLAY PILIH PACK = TAMPILAN CAROUSEL HOME
   Dibuat paling akhir supaya mengalahkan seluruh rule lama
   dan responsive override yang membuat pack overlay jumbo.
   ========================================================= */

/* Pakai ukuran/overlap yang sama persis dengan carousel awal. */
:root {
  --overlay-pack-w: var(--home-pack-w) !important;
  --overlay-pack-overlap: var(--home-pack-overlap) !important;
}

/* Area pilih pack setelah token. */
.overlay.pack-mode .overlay-pack-stage {
  inset: var(--header-h) 0 0 0 !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  gap: 0 !important;
  padding: 0 0 clamp(12px, 2.4dvh, 18px) !important;
  overflow: hidden !important;
}

/* Viewport dibuat mengikuti viewport pack halaman awal. */
.overlay.pack-mode .overlay-pack-viewport {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  cursor: grab !important;
  touch-action: pan-x !important;

  /* Sama seperti home */
  padding-top: clamp(12px, 2.4dvh, 20px) !important;
  padding-bottom: clamp(34px, 5.5dvh, 46px) !important;

  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  ) !important;

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  ) !important;
}

.overlay.pack-mode .overlay-pack-viewport::-webkit-scrollbar {
  display: none !important;
}

.overlay.pack-mode .overlay-pack-viewport.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

/* Track dibuat sama dengan home carousel. */
.overlay.pack-mode .overlay-pack-track {
  position: relative !important;
  min-width: max-content !important;
  width: max-content !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;

  padding-left: calc(50% - (var(--home-pack-w) / 2)) !important;
  padding-right: calc(50% - (var(--home-pack-w) / 2)) !important;

  z-index: 3 !important;
}

/* Pack overlay sekarang punya proporsi yang sama dengan pack halaman awal. */
.overlay.pack-mode .overlay-pack-card {
  position: relative !important;
  flex: 0 0 var(--home-pack-w) !important;
  width: var(--home-pack-w) !important;
  min-width: var(--home-pack-w) !important;

  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 345 / 308 !important;

  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;

  margin-left: var(--home-pack-overlap) !important;
  margin-right: var(--home-pack-overlap) !important;

  opacity: .66 !important;

  transform: scale(.83) translateY(4px) !important;
  transform-origin: center center !important;

  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;

  overflow: visible !important;
  cursor: pointer !important;
  z-index: 8 !important;
  isolation: isolate !important;

  will-change: transform, opacity, filter !important;

  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    opacity .34s ease,
    filter .34s ease !important;

  filter: brightness(.78) saturate(.88) blur(.12px) !important;
}

/* Pack pertama & terakhir tetap bisa benar-benar center. */
.overlay.pack-mode .overlay-pack-card:first-of-type {
  margin-left: 0 !important;
}

.overlay.pack-mode .overlay-pack-card:last-of-type {
  margin-right: 0 !important;
}

/* Shadow bawah sama dengan carousel awal. */
.overlay.pack-mode .overlay-pack-card::before {
  content: "" !important;
  position: absolute !important;
  left: 14% !important;
  right: 14% !important;
  bottom: -14px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, .46),
      rgba(0, 0, 0, 0) 74%
    ) !important;
  filter: blur(7px) !important;
  z-index: -2 !important;
  pointer-events: none !important;
}

/* Pack aktif = persis karakter visual pack aktif halaman awal. */
.overlay.pack-mode .overlay-pack-card.is-selected {
  opacity: 1 !important;
  transform: scale(1.08) translateY(-2px) !important;
  z-index: 30 !important;
  filter:
    brightness(1.08)
    saturate(1.12)
    contrast(1.02) !important;

  animation: broPackSelectedFloat 2.8s ease-in-out infinite !important;
}

/* Gambar pack mengikuti gambar pada home carousel. */
.overlay.pack-mode .overlay-pack-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;

  opacity: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;

  filter:
    drop-shadow(0 18px 16px rgba(0, 0, 0, .42))
    drop-shadow(0 0 10px rgba(229, 107, 107, .07)) !important;
}

.overlay.pack-mode .overlay-pack-card.is-selected .overlay-pack-img {
  filter:
    drop-shadow(0 34px 28px rgba(0, 0, 0, .58))
    drop-shadow(0 0 20px rgba(229, 107, 107, .22))
    drop-shadow(0 0 34px rgba(229, 107, 107, .14)) !important;
}

/* Dots dibuat sama dengan dots halaman awal. */
.overlay.pack-mode .overlay-pack-dots {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 0 10px !important;
  pointer-events: auto !important;
}

.overlay.pack-mode .overlay-pack-dot {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  border-radius: 999px !important;
  border: 0 !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, .24) !important;
  cursor: pointer !important;
  opacity: .62 !important;

  transition:
    width .28s cubic-bezier(.16,1,.3,1),
    opacity .25s ease,
    transform .25s ease,
    background .25s ease !important;
}

.overlay.pack-mode .overlay-pack-dot.is-active {
  width: 24px !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
  background:
    linear-gradient(90deg, var(--gold-2), var(--gold)) !important;

  box-shadow:
    0 0 12px rgba(184, 59, 59, .28),
    0 0 22px rgba(229, 107, 107, .10) !important;
}

/* Footer tetap milik halaman PILIH PACK, hanya dirapikan. */
.overlay.pack-mode .overlay-pack-footer {
  position: relative !important;
  z-index: 40 !important;
  padding: 0 clamp(10px, 3vw, 14px) !important;
  margin: 0 !important;
}

.overlay.pack-mode .overlay-pack-selected {
  margin: 0 !important;
}

/* Responsive: tetap mengikuti ukuran home carousel, bukan rule overlay lama. */
@media (max-width: 380px) {
  .overlay.pack-mode .overlay-pack-card {
    flex-basis: var(--home-pack-w) !important;
    width: var(--home-pack-w) !important;
    min-width: var(--home-pack-w) !important;
    aspect-ratio: 345 / 308 !important;
    margin-left: var(--home-pack-overlap) !important;
    margin-right: var(--home-pack-overlap) !important;
    transform: scale(.83) translateY(4px) !important;
  }

  .overlay.pack-mode .overlay-pack-card.is-selected {
    transform: scale(1.08) translateY(-2px) !important;
  }

  .overlay.pack-mode .overlay-pack-track {
    padding-left: calc(50% - (var(--home-pack-w) / 2)) !important;
    padding-right: calc(50% - (var(--home-pack-w) / 2)) !important;
  }
}

/* Jangan biarkan animation rule overlay lama mengubah ukuran saat pertama dibuka. */
.overlay.pack-mode .overlay-pack-viewport {
  animation: none !important;
}