/**
 * SEIK Halloween "Kummituste jaht" — Authentic Design-File Clue Card + 3D Living Room Hidden-Object Hunt
 * Authentic SEIK Kummituste Jaht (#795899) + Flatsome Storefront Branding
 * Palette: Starry Pitch Black (#0a0909 / #181717), Crisp White (#ffffff), Warm Cream (#f5efe6),
 *          Blush Pink (#eabec3), Witch Hat Purple (#5c436f), Warm Peach Orange (#e08e55), Star Gold (#f2e294).
 * Strictly zero checkmarks on any buttons.
 */

:root {
  --seik-hw-card-black: #0a0909;
  --seik-hw-night: #181717;
  --seik-hw-night-soft: #222020;
  --seik-hw-paper: #faf0ef;
  --seik-hw-cream: #f5efe6;
  --seik-hw-white: #ffffff;
  --seik-hw-pink: #eabec3;
  --seik-hw-mauve: #d99cb3;
  --seik-hw-purple: #5c436f;
  --seik-hw-peach: #e08e55;
  --seik-hw-star: #f2e294;
  --seik-hw-bat: #595757;
  --seik-hw-border: rgba(24, 23, 23, 0.14);
  --seik-hw-serif: "SEIKserif", Georgia, serif;
  --seik-hw-sans: "SEIK-font", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   1. STOREFRONT SPOOKY FACELIFT & FLATSOME PROMO RIBBON
   ========================================================================== */

body.seik-spooky-facelift #top-bar,
body.seik-spooky-facelift .header-top {
  background: var(--seik-hw-night) !important;
  color: var(--seik-hw-cream) !important;
  border-bottom: 1px solid var(--seik-hw-pink) !important;
}

body.seik-spooky-facelift #top-bar a,
body.seik-spooky-facelift .header-top a,
body.seik-spooky-facelift #top-bar strong {
  color: var(--seik-hw-pink) !important;
}

.seik-spooky-decor {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  z-index: 90;
}

.seik-spooky-web {
  position: fixed;
  top: 0;
  width: 82px;
  height: 82px;
  color: var(--seik-hw-night);
  opacity: 0.22;
  pointer-events: none;
}

.seik-spooky-web--left { left: 0; }
.seik-spooky-web--right { right: 0; }

@media (max-width: 767px) {
  .seik-spooky-web { width: 48px; height: 48px; opacity: 0.14; }
}

body.seik-spooky-facelift .seik-locker-float-ribbon:not(.seik-hw-promo-ribbon) {
  display: none !important;
}

#seikHwPromoRibbon.seik-hw-promo-ribbon {
  position: fixed !important;
  left: 16px !important;
  bottom: 16px !important;
  z-index: 99985 !important;
  display: flex !important;
  align-items: stretch !important;
  max-width: 350px !important;
  background: var(--seik-hw-night) !important;
  color: var(--seik-hw-cream) !important;
  border: 2px solid var(--seik-hw-pink) !important;
  border-radius: 0 !important;
  box-shadow: 0 14px 32px rgba(24, 23, 23, 0.34) !important;
  font-family: var(--seik-hw-sans) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#seikHwPromoRibbon.seik-hw-promo-ribbon:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 38px rgba(24, 23, 23, 0.44) !important;
}

.seik-hw-promo-ribbon__hit {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 11px !important;
  text-decoration: none !important;
  color: inherit !important;
}

.seik-hw-promo-ribbon__thumb {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #232121 !important;
  border: 1px solid rgba(234, 190, 195, 0.35) !important;
}

.seik-hw-promo-ribbon__thumb svg {
  width: 36px !important;
  height: 36px !important;
}

.seik-hw-promo-ribbon__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: left !important;
}

.seik-hw-promo-ribbon__tag {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--seik-hw-pink) !important;
}

.seik-hw-promo-ribbon__title {
  font-family: var(--seik-hw-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--seik-hw-white) !important;
}

.seik-hw-promo-ribbon__sub {
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  color: rgba(245, 239, 230, 0.82) !important;
}

.seik-hw-promo-ribbon__close {
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid rgba(234, 190, 195, 0.22) !important;
  color: var(--seik-hw-cream) !important;
  padding: 0 9px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

@media (max-width: 600px) {
  #seikHwPromoRibbon.seik-hw-promo-ribbon {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    max-width: none !important;
  }
}

/* ==========================================================================
   2. PRODUCT PAGE PERMANENT DEMO GAME CALLOUT CARD (#795899)
   Exact solid-black design-file Clue Card preview (no white inner box)
   ========================================================================== */

.seik-hw-product-test-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 18px 0 22px !important;
  padding: 12px 16px !important;
  background: var(--seik-hw-night) !important;
  color: var(--seik-hw-cream) !important;
  border: 2px solid var(--seik-hw-pink) !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 30px rgba(24, 23, 23, 0.22) !important;
  font-family: var(--seik-hw-sans) !important;
  box-sizing: border-box !important;
}

.seik-hw-product-test-card__thumb {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #232121 !important;
  border: 1px solid rgba(234, 190, 195, 0.35) !important;
}

.seik-hw-product-test-card__thumb svg {
  width: 44px !important;
  height: 44px !important;
}

.seik-hw-product-test-card__body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}

.seik-hw-product-test-card__kicker {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--seik-hw-pink) !important;
}

.seik-hw-product-test-card__title {
  margin: 0 !important;
  font-family: var(--seik-hw-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--seik-hw-white) !important;
}

.seik-hw-product-test-card__sub {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: rgba(245, 239, 230, 0.84) !important;
}

.seik-hw-product-test-card__action {
  flex: 0 0 auto !important;
}

.seik-hw-product-test-card__btn {
  margin: 0 !important;
  background: var(--seik-hw-white) !important;
  color: var(--seik-hw-night) !important;
  border: 2px solid var(--seik-hw-white) !important;
  border-radius: 0 !important;
  padding: 8px 16px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.seik-hw-product-test-card__btn:hover {
  background: var(--seik-hw-pink) !important;
  border-color: var(--seik-hw-pink) !important;
}

@media (max-width: 560px) {
  .seik-hw-product-test-card {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .seik-hw-product-test-card__action {
    width: 100% !important;
  }
  .seik-hw-product-test-card__btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   3. MODAL SHELL — COMPACT SINGLE-SCREEN LAYOUT (MOBILE & DESKTOP)
   ========================================================================== */

body.seik-hw-modal-open {
  overflow: hidden !important;
}

#seikHalloweenRoot.seik-hw-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100020 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  font-family: var(--seik-hw-sans) !important;
}

#seikHalloweenRoot.seik-hw-root[hidden],
#seikHalloweenRoot [hidden],
#seikHwHuntView[hidden],
#seikHwWinView[hidden] {
  display: none !important;
}

.seik-hw-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(12, 11, 11, 0.80) !important;
  backdrop-filter: blur(3px) !important;
}

.seik-hw-phone {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 530px !important;
  max-height: 96dvh !important;
  background: var(--seik-hw-paper) !important;
  color: var(--seik-hw-night) !important;
  border: 2px solid var(--seik-hw-night) !important;
  border-radius: 0 !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.55) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Top Bar */
.seik-hw-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 12px !important;
  background: var(--seik-hw-white) !important;
  border-bottom: 1px solid var(--seik-hw-border) !important;
  flex: 0 0 auto !important;
}

.seik-hw-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.seik-hw-logo img {
  height: 21px !important;
  width: auto !important;
  display: block !important;
}

.seik-hw-top-title {
  font-family: var(--seik-hw-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--seik-hw-night) !important;
}

.seik-hw-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.seik-hw-allgames-btn {
  background: transparent !important;
  color: var(--seik-hw-night) !important;
  border: 1px solid var(--seik-hw-night) !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.seik-hw-close-btn {
  width: 28px !important;
  height: 28px !important;
  background: var(--seik-hw-night) !important;
  color: var(--seik-hw-white) !important;
  border: 1px solid var(--seik-hw-night) !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Body Container */
.seik-hw-body {
  padding: 9px 12px 11px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

/* Compact 3-Treat Progress Strip */
.seik-hw-progress {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}

.seik-hw-treat-slot {
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 6px !important;
  background: var(--seik-hw-white) !important;
  border: 1.5px solid var(--seik-hw-border) !important;
  border-radius: 0 !important;
  opacity: 0.58 !important;
  transition: all 0.2s ease !important;
}

.seik-hw-treat-slot.is-active {
  opacity: 1 !important;
  border-color: var(--seik-hw-night) !important;
  box-shadow: inset 0 -2px 0 var(--seik-hw-peach) !important;
}

.seik-hw-treat-slot.is-collected {
  opacity: 1 !important;
  background: var(--seik-hw-night) !important;
  color: var(--seik-hw-cream) !important;
  border-color: var(--seik-hw-night) !important;
}

.seik-hw-treat-slot__icon {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.seik-hw-treat-slot__icon svg {
  width: 19px !important;
  height: 19px !important;
}

.seik-hw-treat-slot__meta {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.seik-hw-treat-slot__num {
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--seik-hw-peach) !important;
  line-height: 1.1 !important;
}

.seik-hw-treat-slot.is-collected .seik-hw-treat-slot__num {
  color: var(--seik-hw-pink) !important;
}

.seik-hw-treat-slot__name {
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ==========================================================================
   4. TOP ZONE: EXACT IN-DESIGN 4:3 SEIK CLUE CARD (FLIPPABLE)
   ========================================================================== */

#seikHwHuntView {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

.seik-hw-card-scene {
  perspective: 1000px !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
}

.seik-hw-clue-card {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  max-height: 260px !important;
  transform-style: preserve-3d !important;
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
  user-select: none !important;
}

.seik-hw-clue-card.is-flipped {
  transform: rotateY(180deg) !important;
}

.seik-hw-clue-face {
  position: absolute !important;
  inset: 0 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38) !important;
  box-sizing: border-box !important;
}

.seik-hw-clue-face--front {
  padding: 22% 14% 16% 14% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.seik-hw-clue-step-badge {
  position: absolute !important;
  left: 10% !important;
  top: 8% !important;
  font-family: var(--seik-hw-sans) !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(24, 23, 23, 0.45) !important;
  background: transparent !important;
  padding: 0 !important;
  z-index: 2 !important;
}

.seik-hw-clue-riddle {
  margin: 0 !important;
  font-family: var(--seik-hw-sans) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
  color: #4a4949 !important;
  max-width: 90% !important;
}

/* Authentic SEIK InDesign Clue-Card Inner Content */
.seik-hw-clue-content {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Guide / Intro View — placed directly on the authentic white card template */
.seik-hw-intro-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 92% !important;
  margin: 0 auto !important;
}

.seik-hw-intro-heading {
  margin: 0 0 4px 0 !important;
  font-family: var(--seik-hw-sans) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #181717 !important;
  line-height: 1.2 !important;
}

.seik-hw-intro-text {
  margin: 0 0 10px 0 !important;
  font-family: var(--seik-hw-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  color: #4a4949 !important;
  max-width: 320px !important;
}

.seik-hw-start-hunt-btn {
  background: var(--seik-hw-peach) !important;
  color: var(--seik-hw-night) !important;
  border: 2px solid var(--seik-hw-night) !important;
  border-radius: 0 !important;
  padding: 6px 18px !important;
  font-family: var(--seik-hw-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease !important;
  box-shadow: 0 4px 12px rgba(224, 142, 85, 0.35) !important;
}

.seik-hw-start-hunt-btn:hover {
  background: var(--seik-hw-night) !important;
  color: var(--seik-hw-white) !important;
  border-color: var(--seik-hw-night) !important;
  transform: translateY(-1px) !important;
}

.seik-hw-clue-face--back {
  transform: rotateY(180deg) !important;
  position: relative !important;
}

/* Dynamic Card Brand Title & Diploma Sub (Localized across 23 languages) */
.seik-hw-card-brand-title {
  position: absolute !important;
  bottom: 13.5% !important;
  left: 8% !important;
  right: 8% !important;
  text-align: center !important;
  font-family: var(--seik-hw-sans) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--seik-hw-peach) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  line-height: 1.2 !important;
}

.seik-hw-card-brand-title--back {
  bottom: 9% !important;
}

.seik-hw-card-brand-title--diploma {
  bottom: 13.5% !important;
}

.seik-hw-diploma-sub {
  position: absolute !important;
  top: 67% !important;
  left: 8% !important;
  right: 8% !important;
  text-align: center !important;
  font-family: var(--seik-hw-sans) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #99938f !important;
  pointer-events: none !important;
  z-index: 3 !important;
  line-height: 1.2 !important;
}

/* Status & Next Clue Action Bar between Clue Card and 3D Living Room */
.seik-hw-action-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  background: var(--seik-hw-white) !important;
  border: 1.5px solid var(--seik-hw-night) !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
}

.seik-hw-card-status {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--seik-hw-night) !important;
  flex: 1 1 auto !important;
}

.seik-hw-card-status.is-trick {
  color: #9e2a2b !important;
}

.seik-hw-card-status.is-found {
  color: #1f5e28 !important;
  font-weight: 800 !important;
}

.seik-hw-next-clue-btn {
  flex: 0 0 auto !important;
  background: var(--seik-hw-peach) !important;
  color: var(--seik-hw-night) !important;
  border: 2px solid var(--seik-hw-night) !important;
  border-radius: 0 !important;
  padding: 5px 12px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin: 0 !important;
  box-shadow: 0 3px 10px rgba(224, 142, 85, 0.35) !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.seik-hw-next-clue-btn:hover {
  background: var(--seik-hw-night) !important;
  color: var(--seik-hw-white) !important;
  transform: translateY(-1px) !important;
}

/* Speed / Countdown Timer Badge */
.seik-hw-timer-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  background: var(--seik-hw-night) !important;
  color: var(--seik-hw-star) !important;
  border: 1px solid var(--seik-hw-night) !important;
  font-family: var(--seik-hw-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  transition: background 0.2s ease !important;
}

.seik-hw-timer-badge[hidden] {
  display: none !important;
}

.seik-hw-timer-badge.is-urgent {
  background: #9e2a2b !important;
  color: #ffffff !important;
  animation: seikHwTimerPulse 0.8s infinite alternate !important;
}

@keyframes seikHwTimerPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* Win Screen Solving Speed Badge (clean diploma text without heavy borders) */
.seik-hw-win-speed {
  font-family: var(--seik-hw-sans) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #55504c !important;
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: block !important;
  text-align: center !important;
}

/* Timeout View when clock expires */
.seik-hw-timeout {
  padding: 24px 16px !important;
  text-align: center !important;
  background: var(--seik-hw-white) !important;
  border: 2px solid var(--seik-hw-night) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.seik-hw-timeout-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: 380px !important;
  margin: 0 auto !important;
}

.seik-hw-timeout-title {
  font-family: var(--seik-hw-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #9e2a2b !important;
  margin: 0 !important;
  letter-spacing: 0.04em !important;
}

.seik-hw-timeout-text {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--seik-hw-night) !important;
  margin: 0 !important;
}

.seik-hw-timeout-btn {
  background: var(--seik-hw-peach) !important;
  color: var(--seik-hw-night) !important;
  border: 2px solid var(--seik-hw-night) !important;
  border-radius: 0 !important;
  padding: 8px 20px !important;
  font-family: var(--seik-hw-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  box-shadow: 0 4px 12px rgba(224, 142, 85, 0.35) !important;
}

.seik-hw-timeout-btn:hover {
  background: var(--seik-hw-night) !important;
  color: var(--seik-hw-white) !important;
}

/* ==========================================================================
   5. BOTTOM ZONE: PITCH-BLACK ROOM WITH TASKULAMP (FLASHLIGHT)
   ========================================================================== */

.seik-hw-stage {
  --fx: 50%;
  --fy: 50%;
  --torch-deg: 0deg;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background-color: #050404 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border: 2px solid var(--seik-hw-night) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  touch-action: none !important;
  user-select: none !important;
  box-sizing: border-box !important;
  cursor: crosshair !important;
  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.85) !important;
}

/* Pitch-black darkness overlay hiding the ENTIRE room outside the flashlight beam */
.seik-hw-darkness {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: radial-gradient(
    circle 82px at var(--fx, 50%) var(--fy, 50%),
    rgba(255, 248, 215, 0.02) 0%,
    rgba(242, 226, 148, 0.08) 40%,
    rgba(14, 12, 12, 0.82) 65%,
    rgba(8, 7, 7, 0.96) 82%,
    rgba(4, 4, 4, 1.0) 100%
  ) !important;
}

/* Golden illuminated beam ring framing the flashlight spotlight */
.seik-hw-beam-ring {
  position: absolute !important;
  left: var(--fx, 50%) !important;
  top: var(--fy, 50%) !important;
  width: 164px !important;
  height: 164px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  border: 1.5px dashed rgba(242, 226, 148, 0.55) !important;
  box-shadow: inset 0 0 25px rgba(242, 226, 148, 0.28), 0 0 20px rgba(242, 226, 148, 0.22) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* Rotating Flashlight (Taskulamp) handle at the bottom */
.seik-hw-torch {
  position: absolute !important;
  left: 50% !important;
  bottom: -4px !important;
  transform: translateX(-50%) rotate(var(--torch-deg, 0deg)) !important;
  transform-origin: 50% 90% !important;
  z-index: 6 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: transform 0.08s ease-out !important;
}

.seik-hw-torch__cone {
  width: 90px !important;
  height: 62px !important;
  margin-bottom: -10px !important;
  background: linear-gradient(to top, rgba(242, 226, 148, 0.42), rgba(242, 226, 148, 0.02)) !important;
  clip-path: polygon(0% 0%, 100% 0%, 65% 100%, 35% 100%) !important;
}

.seik-hw-torch__svg {
  width: 32px !important;
  height: 28px !important;
  display: block !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.85)) !important;
}

.seik-hw-room-nodes {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Interactive Hotspot over each small object in the Living Room */
.seik-hw-node {
  position: absolute !important;
  transform: translate(-50%, -65%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 15 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.seik-hw-node * {
  pointer-events: auto !important;
}

/* In the pitch dark, the pin is invisible! Only when lit by flashlight does it appear! */
.seik-hw-node.is-lit,
.seik-hw-node:hover {
  z-index: 30 !important;
}

.seik-hw-node .seik-hw-node__pin {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: rgba(242, 226, 148, 0.95) !important;
  border: 1.5px solid #181717 !important;
  box-shadow: 0 0 10px rgba(242, 226, 148, 0.95) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: opacity 0.16s ease, transform 0.16s ease !important;
}

/* When the flashlight beam shines on the object, it is revealed out of the dark! */
.seik-hw-node.is-lit .seik-hw-node__pin,
.seik-hw-node:hover .seik-hw-node__pin,
.seik-hw-node:focus-visible .seik-hw-node__pin {
  opacity: 1 !important;
  transform: scale(1.22) !important;
  animation: seikHwPinPulse 1.8s infinite ease-in-out !important;
}

.seik-hw-node__label {
  display: block !important;
  background: #181717 !important;
  color: #ffffff !important;
  border: 1px solid var(--seik-hw-star) !important;
  padding: 3px 8px !important;
  font-family: var(--seik-hw-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  margin-bottom: 5px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

.seik-hw-node.is-lit .seik-hw-node__label,
.seik-hw-node:hover .seik-hw-node__label,
.seik-hw-node:focus-visible .seik-hw-node__label,
.seik-hw-node.is-correct .seik-hw-node__label,
.seik-hw-node.is-wrong .seik-hw-node__label {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}

/* Correct Treat Found */
.seik-hw-node.is-correct {
  z-index: 7 !important;
}

.seik-hw-node.is-correct .seik-hw-node__pin {
  opacity: 1 !important;
  width: 38px !important;
  height: 38px !important;
  background: #ffffff !important;
  border: 2px solid var(--seik-hw-peach) !important;
  box-shadow: 0 0 24px rgba(224, 142, 85, 0.95) !important;
  animation: seikHwTreatPop 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.seik-hw-node.is-correct .seik-hw-node__pin svg {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
}

.seik-hw-node.is-correct .seik-hw-node__label {
  background: var(--seik-hw-peach) !important;
  color: var(--seik-hw-night) !important;
  border-color: var(--seik-hw-night) !important;
  font-weight: 800 !important;
}

/* Decoy / Vemp Shake */
.seik-hw-node.is-wrong {
  animation: seikHwSpotShake 0.36s ease !important;
}

.seik-hw-node.is-wrong .seik-hw-node__pin {
  opacity: 1 !important;
  background: #9e2a2b !important;
  border-color: var(--seik-hw-pink) !important;
}

.seik-hw-node.is-wrong .seik-hw-node__label {
  background: #5c436f !important;
  color: #ffffff !important;
  border-color: var(--seik-hw-pink) !important;
}

.seik-hw-node.is-correct {
  opacity: 1 !important;
  pointer-events: auto !important;
}

@keyframes seikHwPinPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}

@keyframes seikHwTreatPop {
  0%   { transform: scale(0.4); }
  70%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes seikHwSpotShake {
  0%, 100% { transform: translate(-50%, -65%); }
  25%      { transform: translate(calc(-50% - 5px), -65%); }
  75%      { transform: translate(calc(-50% + 5px), -65%); }
}

/* ==========================================================================
   6. DIPLOM WIN VIEW & RELATED PRODUCTS
   ========================================================================== */

.seik-hw-win {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.seik-hw-diploma-card {
  position: relative !important;
  width: 100% !important;
  max-width: 440px !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 auto 6px !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.seik-hw-diploma-content {
  position: absolute !important;
  top: 43% !important;
  left: 10% !important;
  right: 10% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  pointer-events: auto !important;
}

.seik-hw-coupon-box {
  width: 100% !important;
  max-width: 320px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.seik-hw-coupon-label {
  margin: 0 0 2px !important;
  font-family: var(--seik-hw-sans) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--seik-hw-night) !important;
}

.seik-hw-coupon-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.seik-hw-coupon-code {
  font-family: var(--seik-hw-sans) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  padding: 1px 4px !important;
  background: transparent !important;
  border: none !important;
  color: var(--seik-hw-night) !important;
}

.seik-hw-btn-primary {
  background: var(--seik-hw-night) !important;
  color: var(--seik-hw-white) !important;
  border: 1px solid var(--seik-hw-night) !important;
  border-radius: 0 !important;
  padding: 3px 8px !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  transition: opacity 0.15s ease !important;
}

.seik-hw-btn-primary:hover {
  opacity: 0.88 !important;
}

.seik-hw-prods-head {
  margin: 2px 0 4px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--seik-hw-night) !important;
}

.seik-hw-prods-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}

.seik-hw-prod-card {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px !important;
  background: var(--seik-hw-white) !important;
  border: 1px solid var(--seik-hw-border) !important;
  text-decoration: none !important;
  color: var(--seik-hw-night) !important;
}

.seik-hw-prod-card.is-primary {
  border-color: var(--seik-hw-night) !important;
}

.seik-hw-prod-img {
  width: 38px !important;
  height: 38px !important;
  object-fit: cover !important;
  flex: 0 0 38px !important;
}

.seik-hw-prod-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.seik-hw-prod-tag {
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--seik-hw-peach) !important;
}

.seik-hw-prod-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.seik-hw-prod-price {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #55504c !important;
}

.seik-hw-prod-cta { display: none !important; }

.seik-hw-win-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}

.seik-hw-btn-ghost {
  background: var(--seik-hw-white) !important;
  color: var(--seik-hw-night) !important;
  border: 1.5px solid var(--seik-hw-night) !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Mobile Compact Tuning */
@media (max-width: 600px) {
  #seikHalloweenRoot.seik-hw-root {
    padding: 6px !important;
  }
  .seik-hw-body {
    padding: 8px 10px 10px !important;
    gap: 6px !important;
  }
  .seik-hw-clue-frame {
    padding: 10px 16px 8px !important;
    min-height: 118px !important;
  }
  .seik-hw-clue-riddle {
    font-size: 11.5px !important;
    line-height: 1.32 !important;
    margin: 6px auto !important;
  }
  .seik-hw-action-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    padding: 6px 8px !important;
  }
  .seik-hw-node {
    width: 44px !important;
    height: 44px !important;
  }
  .seik-hw-prods-grid {
    grid-template-columns: 1fr !important;
  }
}