:root {
  --radius: 0.75rem;
  --background: oklch(0.985 0.012 80);
  --foreground: oklch(0.22 0.04 25);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.04 25);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.04 25);
  --primary: oklch(0.52 0.22 25);
  --primary-foreground: oklch(0.985 0.012 80);
  --secondary: oklch(0.96 0.03 70);
  --secondary-foreground: oklch(0.30 0.10 30);
  --muted: oklch(0.95 0.02 70);
  --muted-foreground: oklch(0.50 0.05 40);
  --accent: oklch(0.78 0.16 65);
  --accent-foreground: oklch(0.22 0.04 25);
  --destructive: oklch(0.55 0.24 28);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.90 0.03 60);
  --input: oklch(0.90 0.03 60);
  --ring: oklch(0.52 0.22 25);
  --gold: oklch(0.78 0.14 85);
  --gold-foreground: oklch(0.22 0.05 40);
  --cream: oklch(0.97 0.025 80);
  --gradient-hero: linear-gradient(135deg, oklch(0.45 0.24 25) 0%, oklch(0.55 0.22 35) 50%, oklch(0.65 0.18 60) 100%);
  --gradient-gold: linear-gradient(135deg, oklch(0.82 0.14 88), oklch(0.70 0.16 65));
  --gradient-red-gold: linear-gradient(135deg, oklch(0.52 0.22 25), oklch(0.78 0.14 85));
  --shadow-festive: 0 20px 50px -15px oklch(0.52 0.22 25 / 0.45);
  --shadow-card: 0 10px 30px -10px oklch(0.40 0.10 30 / 0.25);
  --shadow-gold: 0 0 30px oklch(0.78 0.14 85 / 0.5);
}
* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; background: var(--background); color: var(--foreground); }
button, a { -webkit-tap-highlight-color: transparent; }
.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-gold { background: var(--gradient-gold); }
.bg-gradient-red-gold { background: var(--gradient-red-gold); }
.text-gradient-gold { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shadow-festive { box-shadow: var(--shadow-festive); }
.shadow-card-soft { box-shadow: var(--shadow-card); }
.shadow-gold-glow { box-shadow: var(--shadow-gold); }
@keyframes float-lantern { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.animate-float-lantern { animation: float-lantern 4s ease-in-out infinite; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal.is-open { display: flex; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }
.modal__content { position: relative; z-index: 1; width: min(100%, 48rem); max-height: 90vh; overflow-y: auto; background: var(--card); border-radius: .75rem; box-shadow: 0 25px 80px rgba(0,0,0,.35); animation: modalIn .18s ease-out; }
.modal__content.rules { width: min(100%, 42rem); max-height: 85vh; padding: 1.5rem; }
.modal__close { position: absolute; z-index: 3; top: .75rem; right: .75rem; width: 2rem; height: 2rem; border-radius: 999px; background: rgba(255,255,255,.9); color: #111; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.accordion-content { display: none; }
.accordion-item.is-open .accordion-content { display: block; }
.accordion-trigger::after { content: '⌄'; margin-left: auto; transition: transform .2s; color: var(--muted-foreground); }
.accordion-item.is-open .accordion-trigger::after { transform: rotate(180deg); }
.theme-window { overflow: hidden; }
.theme-track { display: flex; transition: transform .56s cubic-bezier(.22,.61,.36,1); margin-left: -1rem; will-change: transform; }
.theme-item { padding-left: 1rem; flex: 0 0 100%; }
@media (min-width: 640px) { .theme-item { flex-basis: 50%; } }
@media (min-width: 1024px) { .theme-item { flex-basis: 33.333333%; } }
@media (min-width: 768px) { .featured-reverse > *:first-child { order: 2; } }

/* 2026-06 visual fidelity patch: restore Tailwind color opacity utilities when using CSS variables via CDN */
.bg-primary\/95 { background-color: color-mix(in oklch, var(--primary) 95%, transparent) !important; }
.bg-primary\/70 { background-color: color-mix(in oklch, var(--primary) 70%, transparent) !important; }
.bg-primary\/40 { background-color: color-mix(in oklch, var(--primary) 40%, transparent) !important; }
.bg-primary\/20 { background-color: color-mix(in oklch, var(--primary) 20%, transparent) !important; }
.bg-primary\/10 { background-color: color-mix(in oklch, var(--primary) 10%, transparent) !important; }
.bg-gold\/80 { background-color: color-mix(in oklch, var(--gold) 80%, transparent) !important; }
.bg-gold\/40 { background-color: color-mix(in oklch, var(--gold) 40%, transparent) !important; }
.bg-gold\/20 { background-color: color-mix(in oklch, var(--gold) 20%, transparent) !important; }
.bg-secondary\/60 { background-color: color-mix(in oklch, var(--secondary) 60%, transparent) !important; }
.bg-secondary\/50 { background-color: color-mix(in oklch, var(--secondary) 50%, transparent) !important; }
.bg-card\/95 { background-color: color-mix(in oklch, var(--card) 95%, transparent) !important; }
.bg-white\/95 { background-color: rgba(255,255,255,.95) !important; }
.bg-white\/70 { background-color: rgba(255,255,255,.7) !important; }
.bg-white\/25 { background-color: rgba(255,255,255,.25) !important; }
.bg-white\/20 { background-color: rgba(255,255,255,.2) !important; }
.bg-white\/15 { background-color: rgba(255,255,255,.15) !important; }
.bg-white\/10 { background-color: rgba(255,255,255,.1) !important; }
.bg-black\/70 { background-color: rgba(0,0,0,.7) !important; }
.bg-black\/40 { background-color: rgba(0,0,0,.4) !important; }
.bg-black\/20 { background-color: rgba(0,0,0,.2) !important; }
.text-primary-foreground\/95 { color: color-mix(in oklch, var(--primary-foreground) 95%, transparent) !important; }
.text-primary-foreground\/90 { color: color-mix(in oklch, var(--primary-foreground) 90%, transparent) !important; }
.text-primary-foreground\/80 { color: color-mix(in oklch, var(--primary-foreground) 80%, transparent) !important; }
.text-primary-foreground\/60 { color: color-mix(in oklch, var(--primary-foreground) 60%, transparent) !important; }
.text-foreground\/90 { color: color-mix(in oklch, var(--foreground) 90%, transparent) !important; }
.border-gold\/80 { border-color: color-mix(in oklch, var(--gold) 80%, transparent) !important; }
.border-gold\/40 { border-color: color-mix(in oklch, var(--gold) 40%, transparent) !important; }
.border-primary\/60 { border-color: color-mix(in oklch, var(--primary) 60%, transparent) !important; }
.border-\[\#06C755\]\/30 { border-color: rgba(6,199,85,.3) !important; }
.from-primary\/70 { --tw-gradient-from: color-mix(in oklch, var(--primary) 70%, transparent) var(--tw-gradient-from-position) !important; --tw-gradient-to: color-mix(in oklch, var(--primary) 0%, transparent) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.via-primary\/40 { --tw-gradient-to: color-mix(in oklch, var(--primary) 0%, transparent) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), color-mix(in oklch, var(--primary) 40%, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.to-background { --tw-gradient-to: var(--background) var(--tw-gradient-to-position) !important; }
.from-black\/40 { --tw-gradient-from: rgba(0,0,0,.4) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(0,0,0,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-black\/70 { --tw-gradient-from: rgba(0,0,0,.7) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(0,0,0,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.via-black\/20 { --tw-gradient-to: rgba(0,0,0,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,.2) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.to-transparent { --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; }
.from-\[\#06C755\]\/10 { --tw-gradient-from: rgba(6,199,85,.1) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(6,199,85,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-\[\#06C755\]\/5 { --tw-gradient-to: rgba(6,199,85,.05) var(--tw-gradient-to-position) !important; }

/* Ensure project-specific visual tokens exist even before Tailwind CDN finishes compiling dynamic JS classes */
.bg-background { background-color: var(--background) !important; }
.bg-card { background-color: var(--card) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-muted { background-color: var(--muted) !important; }
.bg-primary { background-color: var(--primary) !important; }
.bg-gold { background-color: var(--gold) !important; }
.bg-cream { background-color: var(--cream) !important; }
.text-foreground { color: var(--foreground) !important; }
.text-muted-foreground { color: var(--muted-foreground) !important; }
.text-primary { color: var(--primary) !important; }
.text-primary-foreground { color: var(--primary-foreground) !important; }
.text-gold { color: var(--gold) !important; }
.text-gold-foreground { color: var(--gold-foreground) !important; }
.border-border { border-color: var(--border) !important; }
.border-gold { border-color: var(--gold) !important; }
.border-primary { border-color: var(--primary) !important; }

/* Restore original premium festive depth */
#tours { background:
  radial-gradient(circle at 12% 8%, color-mix(in oklch, var(--gold) 18%, transparent), transparent 28rem),
  radial-gradient(circle at 88% 18%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 26rem),
  color-mix(in oklch, var(--secondary) 40%, transparent);
}
#promo { position: relative; }
#promo::before, #themes::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22rem;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--gold) 12%, transparent), transparent 70%);
  z-index: -1;
}
#themes { position: relative; }
header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.18), transparent 28rem),
    linear-gradient(to bottom, transparent 0%, transparent 72%, var(--background) 100%);
  z-index: -1;
}
.group:hover .group-hover\:scale-105 { transform: scale(1.05) !important; }
.group:hover .group-hover\:scale-110 { transform: scale(1.10) !important; }
.group:hover .group-hover\:text-primary { color: var(--primary) !important; }
.group:hover .group-hover\:opacity-100 { opacity: 1 !important; }
.hover\:shadow-festive:hover { box-shadow: var(--shadow-festive) !important; }
.hover\:shadow-card-soft:hover { box-shadow: var(--shadow-card) !important; }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem) !important; }
.hover\:scale-105:hover { transform: scale(1.05) !important; }
.hover\:scale-110:hover { transform: scale(1.10) !important; }
.hover\:bg-primary\/10:hover { background-color: color-mix(in oklch, var(--primary) 10%, transparent) !important; }
.hover\:bg-gold\/40:hover { background-color: color-mix(in oklch, var(--gold) 40%, transparent) !important; }
.hover\:bg-white\/20:hover { background-color: rgba(255,255,255,.2) !important; }
.hover\:bg-white\/25:hover { background-color: rgba(255,255,255,.25) !important; }
.hover\:bg-white\/70:hover { background-color: rgba(255,255,255,.7) !important; }
.hover\:border-primary\/60:hover { border-color: color-mix(in oklch, var(--primary) 60%, transparent) !important; }
.hover\:opacity-90:hover { opacity: .9 !important; }

/* Closer dialog overlay and card border/shadow behavior to shadcn dialog */
.modal__overlay { background: rgba(0,0,0,.8); backdrop-filter: blur(4px); }
.modal__content { border: 1px solid var(--border); box-shadow: 0 24px 70px -20px rgba(0,0,0,.55), var(--shadow-festive); }
.modal__close:hover { transform: scale(1.08); background: #fff; }

/* Gift card styling for promo section */
.gift-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.gift-image-container {
  flex: 0 0 auto;
  min-height: 12rem;
}
.gift-card:hover {
  transform: translateY(-4px);
}

/* Sticky navbar styling */
.navbar-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  pointer-events: none;
}
.navbar-sticky.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.navbar-content {
  max-width: 100%;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}
.navbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  height: 2.5rem;
}
.navbar-logo img {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.navbar-social {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.navbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 150, 80, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
}
.navbar-icon:hover {
  background: rgba(255, 150, 80, 0.3);
  transform: scale(1.1);
}
.navbar-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.activity-window { overflow: hidden; }
.activity-track { display: flex; transition: transform .56s cubic-bezier(.22,.61,.36,1); margin-left: -1rem; will-change: transform; }
.activity-item { padding-left: 1rem; flex: 0 0 100%; }
@media (min-width: 640px) { .activity-item { flex-basis: 50%; } }
@media (min-width: 1024px) { .activity-item { flex-basis: 25%; } }


.theme-track.is-resetting,
.activity-track.is-resetting {
  transition: none !important;
}

#theme-prev,
#theme-next,
#activity-prev,
#activity-next {
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, opacity .25s ease;
}

#theme-prev:hover,
#theme-next:hover,
#activity-prev:hover,
#activity-next:hover {
  transform: translateY(-50%) scale(1.12);
  filter: brightness(1.08);
  box-shadow: 0 18px 38px -12px oklch(0.52 0.22 25 / 0.55);
}

#theme-prev:active,
#theme-next:active,
#activity-prev:active,
#activity-next:active {
  transform: translateY(-50%) scale(0.96);
}