/* =========================================================
   LUNA ATELIER · HALLOWEEN LIMITED EDITION · 2026
   Appearance layer only.
   Does not modify nail-design state or application logic.
   ========================================================= */

:root {
  --luna-halloween-wine: #3a1720;
  --luna-halloween-ink: #21191a;
  --luna-halloween-cream: #e9ded0;
  --luna-halloween-brass: #9a8067;
}

/* ---------- THEME BUTTON ---------- */

.luna-theme-trigger {
  position: absolute;
  z-index: 45;
  top: calc(var(--safe-top) + 8px);
  left: 62px;

  width: 34px;
  height: 34px;
  padding: 0;

  display: grid;
  place-items: center;

  border-radius: 50%;
  border: 1px solid rgba(111,91,78,.14);

  color: #75665e;
  background:
    radial-gradient(circle at 35% 28%,
      rgba(255,255,255,.96),
      rgba(240,232,222,.78) 56%,
      rgba(215,202,190,.7));

  box-shadow:
    0 5px 18px rgba(75,57,50,.08),
    inset 0 0 0 1px rgba(255,255,255,.45);

  font-family: Georgia, serif;
  font-size: 16px;
  cursor: pointer;
}

.luna-theme-trigger::after {
  content: "THEME";
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  font: 500 6px/1 -apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing: .15em;
  color: rgba(91,76,69,.52);
}

/* ---------- MODAL ---------- */

.luna-theme-overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;

  display: grid;
  align-items: end;

  background: rgba(31,23,22,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.luna-theme-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.luna-theme-sheet {
  width: min(100%,520px);
  max-height: 88dvh;
  margin: 0 auto;
  overflow: auto;

  padding:
    18px
    18px
    max(24px,env(safe-area-inset-bottom));

  border-radius: 28px 28px 0 0;

  background:
    linear-gradient(
      155deg,
      rgba(250,247,243,.98),
      rgba(231,222,214,.98)
    );

  box-shadow: 0 -30px 80px rgba(36,24,22,.18);

  transform: translateY(24px);
  transition: transform .32s cubic-bezier(.22,.8,.3,1);
}

.luna-theme-overlay.is-open .luna-theme-sheet {
  transform: translateY(0);
}

.luna-theme-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 17px;
}

.luna-theme-sheet-head small {
  display: block;
  margin-bottom: 5px;

  font-size: 8px;
  letter-spacing: .22em;
  color: #978981;
}

.luna-theme-sheet-head h2 {
  margin: 0;

  font-family: "Songti SC","STSong",Georgia,serif;
  font-weight: 500;
  font-size: 22px;
  color: #443a36;
}

.luna-theme-close {
  width: 36px;
  height: 36px;
  flex: none;

  border-radius: 50%;
  background: rgba(255,255,255,.58);

  font-size: 21px;
  color: #746760;
}

.luna-theme-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.luna-theme-card {
  position: relative;
  min-height: 245px;
  overflow: hidden;

  padding: 0;
  border-radius: 21px;
  border: 1px solid rgba(89,72,65,.1);

  background: #e8dfd7;
  text-align: left;

  box-shadow: 0 14px 34px rgba(64,48,43,.08);
}

.luna-theme-card-preview {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

.luna-theme-card.classic .luna-theme-card-preview {
  background:
    radial-gradient(circle at 25% 15%,
      rgba(255,255,255,.92),transparent 35%),
    linear-gradient(145deg,#f5efe8,#d9ccc1);
}

.luna-theme-card.halloween .luna-theme-card-preview {
  background-image:
    linear-gradient(
      to bottom,
      rgba(28,12,15,.04),
      rgba(28,12,15,.42)
    ),
    url("assets/halloween-2026/studio-bg-1.jpg");
}

.luna-theme-card-copy {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 14px;

  padding: 12px 12px 11px;
  border-radius: 14px;

  background: rgba(247,242,236,.79);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.luna-theme-card.halloween .luna-theme-card-copy {
  color: #f3e8dc;
  background: rgba(31,16,19,.65);
}

.luna-theme-card-copy small,
.luna-theme-card-copy strong {
  display: block;
}

.luna-theme-card-copy small {
  font-size: 7px;
  letter-spacing: .16em;
  opacity: .68;
}

.luna-theme-card-copy strong {
  margin-top: 4px;

  font-family: "Songti SC","STSong",Georgia,serif;
  font-size: 15px;
  font-weight: 500;
}

.luna-theme-card.is-selected {
  outline: 1.5px solid rgba(83,65,57,.56);
  outline-offset: 2px;
}

.luna-theme-card.halloween.is-selected {
  outline-color: rgba(111,58,64,.76);
}

/* =========================================================
   HALLOWEEN STUDIO
   ========================================================= */

html[data-luna-theme="halloween"] body {
  background:
    #21191a
    url("assets/halloween-2026/detail-bg.jpg")
    center / cover fixed;
}

html[data-luna-theme="halloween"] .app-shell {
  background:
    linear-gradient(
      rgba(27,18,20,.09),
      rgba(27,18,20,.16)
    ),
    url("assets/halloween-2026/studio-bg-1.jpg")
    center top / cover no-repeat;
}

/*
  Preserve the actual nail stage.
  We only decorate the studio around it.
*/

html[data-luna-theme="halloween"] .studio {
  position: relative;
  isolation: isolate;
}

html[data-luna-theme="halloween"] .studio::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(26,15,17,.04),
      rgba(26,15,17,.14)
    ),
    var(--luna-halloween-studio-image)
    center top / cover no-repeat;

  opacity: .93;
}

html[data-luna-theme="halloween"] .studio::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(247,233,218,.05),
      transparent 32%,
      rgba(23,14,16,.12)
    );
}

html[data-luna-theme="halloween"] .topbar {
  background: rgba(34,21,23,.46);
  border-bottom-color: rgba(235,218,198,.11);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-luna-theme="halloween"] .title-button,
html[data-luna-theme="halloween"] .studio-meta,
html[data-luna-theme="halloween"] .studio-step {
  color: #efe3d5;
}

html[data-luna-theme="halloween"] .brand-button,
html[data-luna-theme="halloween"] .history-actions .icon-button,
html[data-luna-theme="halloween"] .sound-toggle {
  color: #eadccb;
  background: rgba(49,28,32,.42);
  border-color: rgba(239,220,198,.15);
}

html[data-luna-theme="halloween"] .mode-switcher,
html[data-luna-theme="halloween"] .quick-tool {
  background: rgba(43,25,29,.54);
  color: #eadfd2;
  border-color: rgba(239,220,198,.12);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-luna-theme="halloween"] .mode-button {
  color: rgba(237,222,207,.7);
}

html[data-luna-theme="halloween"] .mode-button.active {
  color: #342124;
  background: rgba(239,226,210,.9);
}

html[data-luna-theme="halloween"] .material-dock {
  background:
    linear-gradient(
      rgba(243,232,218,.80),
      rgba(232,217,201,.88)
    ),
    url("assets/halloween-2026/dock-bg.jpg")
    center / cover;

  border-top-color: rgba(83,52,51,.16);
}

html[data-luna-theme="halloween"] .dock-content {
  background: rgba(247,239,229,.54);
}

html[data-luna-theme="halloween"] .dock-tab.active {
  color: #5d3035;
}

html[data-luna-theme="halloween"] .atelier-wordmark {
  filter:
    sepia(.22)
    saturate(.72)
    brightness(1.42);
}

/* ---------- Background carousel ---------- */

.luna-halloween-bg-switch {
  display: none;

  position: absolute;
  z-index: 40;
  right: 13px;
  top: 105px;

  width: 39px;
  height: 39px;

  border-radius: 50%;
  border: 1px solid rgba(239,221,200,.2);

  color: #f1e2d0;
  background: rgba(39,21,25,.48);

  box-shadow: 0 8px 24px rgba(22,10,13,.16);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: 16px;
}

html[data-luna-theme="halloween"] .luna-halloween-bg-switch {
  display: grid;
  place-items: center;
}

/* ---------- Return to classic orb ---------- */

.luna-classic-orb {
  display: none;

  position: absolute;
  z-index: 39;

  left: 15px;
  top: 158px;

  width: 31px;
  height: 31px;

  padding: 0;

  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);

  background:
    radial-gradient(circle at 34% 28%,
      #fffaf1 0 8%,
      #e9ddcf 34%,
      #cdbbaa 72%,
      #9b8374 100%);

  box-shadow:
    0 5px 16px rgba(28,15,16,.18),
    inset 0 0 0 1px rgba(104,79,68,.12);
}

html[data-luna-theme="halloween"] .luna-classic-orb {
  display: block;
}

/* =========================================================
   CONFIRM
   ========================================================= */

.luna-classic-confirm {
  position: fixed;
  z-index: 10010;
  inset: 0;

  display: grid;
  place-items: center;

  padding: 24px;

  background: rgba(24,15,17,.4);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.luna-classic-confirm.is-open {
  opacity: 1;
  pointer-events: auto;
}

.luna-classic-confirm-card {
  width: min(100%,350px);
  padding: 25px 21px 18px;

  border-radius: 24px;

  color: #443a35;

  background:
    linear-gradient(
      145deg,
      rgba(251,247,241,.97),
      rgba(229,218,207,.97)
    );

  box-shadow: 0 30px 80px rgba(24,13,14,.25);
}

.luna-classic-confirm-card small {
  display: block;
  margin-bottom: 8px;

  color: #98877d;
  font-size: 8px;
  letter-spacing: .2em;
}

.luna-classic-confirm-card h3 {
  margin: 0;

  font: 500 20px/1.35
    "Songti SC","STSong",Georgia,serif;
}

.luna-classic-confirm-card p {
  margin: 10px 0 20px;

  color: #796c65;
  font-size: 12px;
  line-height: 1.7;
}

.luna-classic-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.luna-classic-confirm-actions button {
  min-height: 42px;

  border-radius: 13px;

  background: rgba(255,255,255,.55);

  font-size: 11px;
}

.luna-classic-confirm-actions .confirm {
  color: #f3e9dc;
  background: #3c2529;
}

/* =========================================================
   HALLOWEEN SPLASH
   ========================================================= */

html[data-luna-theme="halloween"] .atelier-splash {
  background: #1f1517;
}

html[data-luna-theme="halloween"] .atelier-splash-image {
  filter: none;
}

html[data-luna-theme="halloween"] .atelier-splash-veil {
  background:
    linear-gradient(
      to bottom,
      rgba(18,8,11,.02),
      rgba(18,8,11,.18)
    );
}

html[data-luna-theme="halloween"] .atelier-splash-progress {
  color: #eee0cf;
}

/* =========================================================
   TRANSITION
   ========================================================= */

.luna-halloween-transition {
  position: fixed;
  z-index: 20000;
  inset: 0;

  display: grid;
  place-items: center;

  padding: 25px;

  background: #201517;

  opacity: 0;
  pointer-events: none;

  transition: opacity .18s ease;
}

.luna-halloween-transition.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.luna-halloween-transition-inner {
  width: min(76vw,330px);
  text-align: center;
  color: #eee0d1;
}

.luna-halloween-transition-image {
  width: 100%;
  aspect-ratio: 2 / 2.45;

  border-radius: 24px;

  background:
    url("assets/halloween-2026/transition.png")
    center / cover no-repeat;

  box-shadow: 0 25px 70px rgba(0,0,0,.22);
}

.luna-halloween-loading {
  margin-top: 18px;

  font-size: 9px;
  letter-spacing: .2em;
}

.luna-halloween-dots {
  display: flex;
  justify-content: center;
  gap: 6px;

  margin-top: 10px;
}

.luna-halloween-dots i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: currentColor;

  animation: lunaHalloweenDot 1.1s infinite ease-in-out;
}

.luna-halloween-dots i:nth-child(2) {
  animation-delay: .14s;
}

.luna-halloween-dots i:nth-child(3) {
  animation-delay: .28s;
}

@keyframes lunaHalloweenDot {
  0%,70%,100% {
    opacity: .25;
    transform: translateY(0);
  }

  35% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@media (max-width: 380px) {
  .luna-theme-trigger {
    left: 57px;
    width: 32px;
    height: 32px;
  }

  .luna-theme-cards {
    gap: 8px;
  }

  .luna-theme-card {
    min-height: 225px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .luna-theme-overlay,
  .luna-theme-sheet,
  .luna-classic-confirm,
  .luna-halloween-transition {
    transition: none;
  }

  .luna-halloween-dots i {
    animation: none;
  }
}


/* =========================================================
   LUNA HALLOWEEN · UI POSITION FIX · 2026-09-16
   Theme selector belongs to My Archive, not Studio.
   ========================================================= */

/* ---------- THEME ENTRY IN MY ARCHIVE ---------- */

.gallery-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
  Override original absolute Studio positioning.
*/

.luna-theme-trigger {
  position: relative !important;
  z-index: auto !important;

  top: auto !important;
  left: auto !important;
  right: auto !important;

  width: 42px !important;
  height: 42px !important;

  flex: 0 0 42px;

  display: grid;
  place-items: center;

  padding: 0 !important;

  border-radius: 50%;

  color: #75665e;

  background:
    radial-gradient(
      circle at 34% 27%,
      rgba(255,255,255,.98),
      rgba(239,231,221,.92) 58%,
      rgba(211,198,186,.9)
    );

  border:
    1px solid rgba(255,255,255,.72);

  box-shadow:
    0 7px 20px rgba(67,51,45,.1),
    inset 0 0 0 1px rgba(103,84,74,.08);
}

/* kill old pseudo label */
.luna-theme-trigger::after {
  display: none !important;
}

.luna-theme-trigger-moon {
  display: block;

  margin-top: -3px;

  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1;

  color: #71625c;
}

.luna-theme-trigger-label {
  position: absolute;

  left: 50%;
  bottom: 4px;

  transform: translateX(-50%);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  font-size: 5px;
  line-height: 1;

  letter-spacing: .12em;

  color: rgba(100,84,76,.6);
}

/*
  Luna World plaque remains beside Theme.
  Do not alter its data-action or navigation.
*/

.gallery-header-actions .luna-world-button {
  position: relative;
  z-index: 1;
}

/* =========================================================
   BACKGROUND SWITCH
   Move it away from Clear / Sound / stage controls.
   ========================================================= */

html[data-luna-theme="halloween"]
.luna-halloween-bg-switch {
  display: grid;
  place-items: center;

  position: absolute !important;

  /*
    Upper-right edge of Studio, but above the stage controls.
  */
  top: 70px !important;
  right: 14px !important;

  width: 34px !important;
  height: 34px !important;

  z-index: 38 !important;

  border-radius: 50%;

  color: rgba(242,227,210,.92);

  background:
    rgba(42,25,29,.48);

  border:
    1px solid rgba(240,221,201,.17);

  box-shadow:
    0 6px 18px rgba(22,10,13,.13);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/*
  Give it a tiny visual cue without text.
*/

html[data-luna-theme="halloween"]
.luna-halloween-bg-switch::after {
  content: "BG";

  position: absolute;

  top: calc(100% + 3px);
  left: 50%;

  transform: translateX(-50%);

  font:
    500 5px/1
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  letter-spacing: .13em;

  color: rgba(240,225,209,.6);
}

/* =========================================================
   CLASSIC ORB
   Keep it on the left, away from nails and mode controls.
   ========================================================= */

html[data-luna-theme="halloween"]
.luna-classic-orb {
  left: 14px !important;
  top: 154px !important;

  width: 30px !important;
  height: 30px !important;

  z-index: 38 !important;
}

/* =========================================================
   Mobile safety
   ========================================================= */

@media (max-width: 390px) {
  .gallery-header-actions {
    gap: 6px;
  }

  .luna-theme-trigger {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px;
  }

  html[data-luna-theme="halloween"]
  .luna-halloween-bg-switch {
    right: 10px !important;
  }
}

/* =========================================================
   LUNA HALLOWEEN · REFINEMENT II · 2026-09-16
   ========================================================= */

/* ---------------------------------------------------------
   1. MY ARCHIVE HEADER
   Theme must NEVER cover Luna Edit.
   --------------------------------------------------------- */

.gallery-header-actions {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  gap: 8px !important;

  width: auto !important;
  min-width: 0 !important;

  overflow: visible !important;
}

.gallery-header-actions .luna-theme-trigger {
  position: relative !important;

  inset: auto !important;

  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;
  max-width: 40px !important;

  flex: 0 0 40px !important;

  z-index: 1 !important;
}

.gallery-header-actions .luna-world-button {
  position: relative !important;

  inset: auto !important;

  flex: 0 0 auto !important;

  width: auto !important;

  z-index: 3 !important;

  pointer-events: auto !important;
}

/*
  Only the visible circle receives Theme clicks.
  It cannot create an invisible wide click layer.
*/

.luna-theme-trigger {
  pointer-events: auto;
}

/* ---------------------------------------------------------
   2. HALLOWEEN STUDIO WORDMARK
   Make dark Luna Atelier logo readable.
   --------------------------------------------------------- */

html[data-luna-theme="halloween"]
.atelier-wordmark {
  /*
    The original logo is dark.
    Invert it into an antique ivory/silver mark.
  */

  filter:
    invert(1)
    sepia(.18)
    saturate(.55)
    brightness(1.24)
    contrast(.92) !important;

  opacity: .92 !important;

  mix-blend-mode: screen;

  drop-shadow: none;
}

html[data-luna-theme="halloween"]
.project-title {
  isolation: isolate;
}

html[data-luna-theme="halloween"]
.project-title::before {
  content: "";

  position: absolute;
  z-index: -1;

  left: 50%;
  top: 50%;

  width: 150px;
  height: 48px;

  transform: translate(-50%,-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(244,228,207,.08),
      transparent 70%
    );

  pointer-events: none;
}

/* ---------------------------------------------------------
   3. HALLOWEEN SPLASH
   Halloween uses ONE full supplied image.
   NO fragment/shatter treatment.
   --------------------------------------------------------- */

html[data-luna-theme="halloween"]
.atelier-splash {
  background: #1c1315 !important;
}

html[data-luna-theme="halloween"]
.atelier-splash-image {
  transform: none !important;

  filter: none !important;

  object-fit: cover !important;
  object-position: center top !important;

  opacity: 1;
}

/*
  Disable the classic fragment artwork completely.
*/

html[data-luna-theme="halloween"]
.atelier-splash-fragments {
  display: none !important;
}

html[data-luna-theme="halloween"]
.atelier-splash-fragments > span {
  display: none !important;
}

/*
  No classic veil treatment over the Halloween illustration.
*/

html[data-luna-theme="halloween"]
.atelier-splash-veil {
  background:
    linear-gradient(
      to bottom,
      rgba(18,8,11,0),
      rgba(18,8,11,.04)
    ) !important;
}

/*
  When app.js starts its normal "dissolving" exit,
  Halloween image simply fades instead of shattering.
*/

html[data-luna-theme="halloween"]
.atelier-splash.is-dissolving
.atelier-splash-image {
  animation:
    lunaHalloweenSplashExit
    1.15s
    ease
    both !important;
}

html[data-luna-theme="halloween"]
.atelier-splash.is-dissolving
.atelier-splash-veil {
  animation:
    lunaHalloweenSplashVeilExit
    1.05s
    ease
    both !important;
}

@keyframes lunaHalloweenSplashExit {
  from {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }

  to {
    opacity: 0;
    transform: scale(1.012);
    filter: blur(2px);
  }
}

@keyframes lunaHalloweenSplashVeilExit {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ---------------------------------------------------------
   4. PHOTO TEMPLATE / FULL SCREEN SECONDARY PAGES
   Subtle Halloween atmosphere only.
   --------------------------------------------------------- */

html[data-luna-theme="halloween"]
.photo-template-screen,
html[data-luna-theme="halloween"]
.photo-screen {
  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(95,49,57,.10),
      transparent 29%
    ),
    radial-gradient(
      circle at 12% 76%,
      rgba(56,44,47,.07),
      transparent 32%
    ),
    linear-gradient(
      155deg,
      #f4eee7,
      #e9dfd6
    ) !important;
}

/*
  Generic full-screen treatment for Studio secondary screens.
  Deliberately very light.
*/

html[data-luna-theme="halloween"]
.full-screen:not(.gallery-screen):not(.completion-screen),
html[data-luna-theme="halloween"]
.app-screen:not(.gallery-screen) {
  --halloween-secondary-ink: #493a3d;
}

/* ---------------------------------------------------------
   5. Keep photo-template typography elegant,
   not horror-themed.
   --------------------------------------------------------- */

html[data-luna-theme="halloween"]
.photo-template-screen h1,
html[data-luna-theme="halloween"]
.photo-screen h1 {
  color: #44383a !important;
}

html[data-luna-theme="halloween"]
.photo-template-screen::before,
html[data-luna-theme="halloween"]
.photo-screen::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      120deg,
      transparent 0 58%,
      rgba(83,41,49,.025) 58% 100%
    );

  opacity: .8;
}

/* ---------------------------------------------------------
   6. Background switch final safe position
   --------------------------------------------------------- */

html[data-luna-theme="halloween"]
.luna-halloween-bg-switch {
  top: 78px !important;
  right: 12px !important;

  z-index: 32 !important;
}


/* =========================================================
   LUNA HALLOWEEN · WORLD REFINEMENT · 2026-09-16

   Everything below is Halloween-only unless explicitly
   marked as an Archive repair.
   ========================================================= */


/* =========================================================
   1. ARCHIVE · RESTORE ORIGINAL LUNA WORLD BUTTON GEOMETRY

   Previous Halloween refinement accidentally changed the
   button itself from its original positioned plaque into a
   normal flex item. Undo ONLY those injected properties.

   JS keeps the click repair.
   ========================================================= */

.gallery-header-actions .luna-world-button {
  position: absolute !important;

  /*
    Do not allow our Halloween header flex rules to stretch
    the original Luna Edit plaque.
  */
  flex: none !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  pointer-events: auto !important;

  /*
    Keep the original button above decorative theme UI.
  */
  z-index: 4 !important;
}


/* Theme control must remain a compact circle and must not
   generate a large invisible clickable region. */

.gallery-header-actions .luna-theme-trigger {
  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;
  max-width: 40px !important;

  flex: 0 0 40px !important;

  overflow: hidden !important;
}


/* =========================================================
   2. LUNA WORLD · HALLOWEEN FOUNDATION

   Classic theme receives NONE of these rules.
   ========================================================= */

html[data-luna-theme="halloween"] body.luna-world,
html[data-luna-theme="halloween"] .luna-shell,
html[data-luna-theme="halloween"] .world-screen {
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(99, 55, 62, .065),
      transparent 27%
    ),
    radial-gradient(
      circle at 7% 35%,
      rgba(104, 76, 62, .035),
      transparent 31%
    ),
    linear-gradient(
      165deg,
      #f8f3ed 0%,
      #f4ede7 52%,
      #eee4dc 100%
    ) !important;
}


/* =========================================================
   3. WORLD HEADER

   Keep the editorial structure, only deepen the ink slightly.
   ========================================================= */

html[data-luna-theme="halloween"]
.world-header {
  border-bottom-color:
    rgba(80, 53, 56, .15) !important;
}

html[data-luna-theme="halloween"]
.world-brand-title span {
  color:
    rgba(80, 54, 57, .64) !important;
}

html[data-luna-theme="halloween"]
.world-brand-title strong {
  color: #493638 !important;
}

html[data-luna-theme="halloween"]
.world-brand-title::before,
html[data-luna-theme="halloween"]
.world-brand-title::after {
  background:
    rgba(105, 67, 69, .24) !important;
}


/* =========================================================
   4. INTRO · VERY FAINT CRESCENT

   This is intentionally almost watermark-level.
   ========================================================= */

html[data-luna-theme="halloween"]
.world-intro {
  position: relative;
  isolation: isolate;
}

html[data-luna-theme="halloween"]
.world-intro::after {
  content: "☾";

  position: absolute;

  right: 12px;
  top: 20px;

  z-index: -1;

  font-family:
    Baskerville,
    "Times New Roman",
    serif;

  font-size: 86px;
  line-height: 1;

  font-weight: 400;

  color:
    rgba(91, 52, 61, .045);

  transform: rotate(-13deg);

  pointer-events: none;
  user-select: none;
}

html[data-luna-theme="halloween"]
.world-intro > span {
  color:
    rgba(76, 52, 55, .60) !important;
}

html[data-luna-theme="halloween"]
.world-intro h1 {
  color: #493638 !important;
}


/* =========================================================
   5. WORLD NAVIGATION

   No pumpkins, no orange.
   Antique wine / cocoa ink only.
   ========================================================= */

html[data-luna-theme="halloween"]
.world-nav {
  border-top-color:
    rgba(82, 55, 58, .18) !important;

  border-bottom-color:
    rgba(82, 55, 58, .18) !important;
}

html[data-luna-theme="halloween"]
.world-nav button {
  color:
    rgba(70, 50, 52, .70) !important;
}

html[data-luna-theme="halloween"]
.world-nav button.active {
  color: #493438 !important;
}

html[data-luna-theme="halloween"]
.world-nav button.active::after {
  background:
    #6d4b50 !important;
}


/* =========================================================
   6. LUNA VISION CARD

   Preserve its current cream editorial appearance.
   Give it only a muted Halloween shadow.
   ========================================================= */

html[data-luna-theme="halloween"]
.luna-vision-card,
html[data-luna-theme="halloween"]
.vision-card {
  box-shadow:
    0 18px 42px
      rgba(72, 45, 49, .065) !important;
}


/* =========================================================
   7. LIBRARY TYPOGRAPHY
   ========================================================= */

html[data-luna-theme="halloween"]
.section-heading h2,
html[data-luna-theme="halloween"]
.world-panel h2 {
  color: #49383a;
}

html[data-luna-theme="halloween"]
.section-heading > div > span,
html[data-luna-theme="halloween"]
.section-lead {
  color:
    rgba(79, 59, 59, .58);
}


/* =========================================================
   8. SEARCH
   ========================================================= */

html[data-luna-theme="halloween"]
.library-search {
  background:
    rgba(255, 251, 247, .72) !important;

  border-color:
    rgba(101, 70, 70, .10) !important;

  box-shadow:
    0 12px 34px
      rgba(74, 47, 50, .035);
}


/* =========================================================
   9. FACET TABS

   Selected item becomes muted chocolate-wine rather than
   Halloween orange.
   ========================================================= */

html[data-luna-theme="halloween"]
.facet-tabs button.active {
  background:
    linear-gradient(
      145deg,
      #594347,
      #6a5050
    ) !important;

  color:
    #f6eee6 !important;

  border-color:
    rgba(65, 42, 45, .42) !important;

  box-shadow:
    0 7px 18px
      rgba(63, 39, 43, .12) !important;
}


/* =========================================================
   10. SUBTLE HALLOWEEN PAPER ATMOSPHERE

   Extremely low opacity ornamental texture created entirely
   in CSS. It does not interfere with clicking.
   ========================================================= */

html[data-luna-theme="halloween"]
.world-screen::before {
  content: "";

  position: fixed;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 105% 17%,
      transparent 0 56px,
      rgba(90, 49, 58, .025) 57px 59px,
      transparent 60px
    ),
    radial-gradient(
      ellipse at -6% 71%,
      transparent 0 72px,
      rgba(91, 61, 56, .018) 73px 75px,
      transparent 76px
    );

  opacity: 1;
}

html[data-luna-theme="halloween"]
.world-screen > * {
  position: relative;
  z-index: 1;
}


/* =========================================================
   11. CLASSIC SAFETY

   Explicitly make Halloween pseudo-decoration disappear
   when Classic is selected.
   ========================================================= */

html:not([data-luna-theme="halloween"])
.world-intro::after {
  content: none !important;
}

/* =========================================================
   THEME SWITCH · FINAL RELIABLE ARCHIVE LAYOUT
   ========================================================= */

.gallery-screen .completion-header {
  grid-template-columns:
    44px
    minmax(92px, 1fr)
    minmax(136px, 152px) !important;
}

.gallery-header-actions {
  display: grid !important;
  grid-template-columns: 40px 104px;
  align-items: center !important;
  justify-content: end !important;
  gap: 8px !important;
}

.gallery-header-actions .luna-theme-trigger {
  position: relative !important;
  inset: auto !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.gallery-header-actions .luna-world-button {
  position: relative !important;
  inset: auto !important;
  width: 104px !important;
  min-width: 0 !important;
  max-width: 104px !important;
}

@media (max-width: 380px) {
  .gallery-screen .completion-header {
    grid-template-columns:
      40px
      minmax(82px, 1fr)
      134px !important;
    padding-inline: 9px !important;
  }

  .gallery-header-actions {
    grid-template-columns: 36px 92px;
    gap: 6px !important;
  }

  .gallery-header-actions .luna-theme-trigger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }

  .gallery-header-actions .luna-world-button {
    width: 92px !important;
    max-width: 92px !important;
  }
}

@media (max-width: 350px) {
  .gallery-screen .completion-header {
    grid-template-columns:
      36px
      minmax(76px, 1fr)
      122px !important;
    padding-inline: 7px !important;
  }

  .archive-wordmark {
    width: 92px !important;
  }

  .gallery-header-actions {
    grid-template-columns: 34px 82px;
  }

  .gallery-header-actions .luna-theme-trigger {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
  }

  .gallery-header-actions .luna-world-button {
    width: 82px !important;
    max-width: 82px !important;
  }
}