:root { --luna-hw-paper: #f4e9dc; --luna-hw-paper-light: #fbf5ec; --luna-hw-paper-deep: #ead8c7; --luna-hw-wine: #58373f; --luna-hw-plum: #75505a; --luna-hw-ink: #3d3031; --luna-hw-muted: #927b74; --luna-hw-amber: #c56e32; --luna-hw-glow: #eea348; --luna-hw-line: rgba(92, 61, 56, .18); } html[data-luna-theme="halloween"] body { background: radial-gradient( circle at 84% 8%, rgba(196, 111, 60, .10), transparent 27% ), radial-gradient( circle at 12% 34%, rgba(106, 70, 91, .07), transparent 31% ), linear-gradient( 180deg, #f8efe5 0%, #f2e5d8 52%, #ecdbcd 100% ); } html[data-luna-theme="halloween"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient( circle at 18% 19%, rgba(255,255,255,.72) 0 1px, transparent 1.6px ), radial-gradient( circle at 78% 28%, rgba(105,70,65,.18) 0 1px, transparent 1.5px ), radial-gradient( circle at 63% 68%, rgba(255,255,255,.55) 0 1px, transparent 1.5px ); background-size: 83px 83px, 127px 127px, 151px 151px; opacity: .58; } .luna-hw-ghost, .luna-hw-house, .luna-hw-moon { display: none; } html[data-luna-theme="halloween"] .luna-hw-ghost, html[data-luna-theme="halloween"] .luna-hw-house, html[data-luna-theme="halloween"] .luna-hw-moon { display: block; } .luna-hw-ghost { position: fixed; z-index: 8; right: clamp(16px, 4.5vw, 72px); top: 57vh; width: clamp(72px, 9vw, 126px); height: auto; pointer-events: none; user-select: none; opacity: .90; filter: drop-shadow( 0 15px 19px rgba(89, 51, 31, .12) ); transform: translate3d( 0, var(--luna-ghost-scroll, 0px), 0 ); animation: lunaGhostFloat 4.6s ease-in-out infinite; } .luna-hw-house { position: absolute; z-index: 2; left: 50%; bottom: -2px; width: clamp(150px, 21vw, 290px); height: auto; pointer-events: none; user-select: none; transform: translateX(-50%); filter: drop-shadow( 0 17px 18px rgba(67, 38, 27, .15) ); animation: lunaHouseGlow 4.2s ease-in-out infinite; } .luna-hw-moon { position: absolute; z-index: 0; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(255, 239, 202, .52), rgba(231, 164, 91, .13) 48%, transparent 72% ); filter: blur(3px); } html[data-luna-theme="halloween"] .luna-hw-page { color: var(--luna-hw-ink); } html[data-luna-theme="halloween"] .luna-hw-page a, html[data-luna-theme="halloween"] .luna-hw-page button { -webkit-tap-highlight-color: transparent; } html[data-luna-theme="halloween"] .luna-hw-page input { accent-color: var(--luna-hw-amber); } html[data-luna-theme="halloween"] .luna-hw-page ::selection { color: #fffaf3; background: #6b4147; } html[data-luna-theme="halloween"] .vision-app { position: relative; color: var(--luna-hw-ink); } html[data-luna-theme="halloween"] .vision-header { border-bottom-color: rgba(91, 61, 57, .17); } html[data-luna-theme="halloween"] .vision-wordmark small, html[data-luna-theme="halloween"] .vision-kicker, html[data-luna-theme="halloween"] .vision-privacy { color: rgba(104, 71, 66, .62); } html[data-luna-theme="halloween"] .vision-wordmark strong, html[data-luna-theme="halloween"] .vision-intro h1, html[data-luna-theme="halloween"] .vision-intro h2 { color: #4c3036; } html[data-luna-theme="halloween"] .vision-intro h1 i, html[data-luna-theme="halloween"] .vision-intro-ornament span, html[data-luna-theme="halloween"] .vision-upload-moon { color: #b86636; } html[data-luna-theme="halloween"] .vision-intro-copy { color: #806c67; } html[data-luna-theme="halloween"] .vision-upload-frame { position: relative; overflow: hidden; border-color: rgba(108, 66, 61, .27); background: radial-gradient( circle at 50% 15%, rgba(255, 250, 240, .90), transparent 42% ), linear-gradient( 145deg, rgba(255, 249, 240, .82), rgba(235, 215, 198, .68) ); box-shadow: 0 22px 55px rgba(82, 51, 42, .09), inset 0 0 0 1px rgba(255,255,255,.72); } html[data-luna-theme="halloween"] .vision-upload-frame::after { content: "HALLOWEEN · LIMITED"; position: absolute; right: 22px; top: 17px; color: rgba(161, 84, 45, .62); font-family: Georgia, "Times New Roman", serif; font-size: 7px; font-weight: 400; letter-spacing: .23em; pointer-events: none; } html[data-luna-theme="halloween"] .vision-upload-title { color: #54343a; } html[data-luna-theme="halloween"] .vision-upload-frame small { color: #9c5e43; } html[data-luna-theme="halloween"] .vision-upload-frame em { color: rgba(91, 69, 65, .60); } html[data-luna-theme="halloween"] .vision-principles { position: relative; border-color: rgba(93, 63, 58, .18); } html[data-luna-theme="halloween"] .vision-principles span { border-color: rgba(93, 63, 58, .15); } html[data-luna-theme="halloween"] .vision-principles b { color: #664149; } html[data-luna-theme="halloween"] .vision-principles small { color: #9a7770; } html[data-luna-theme="halloween"] .vision-principles::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: min(44vw, 470px); height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, rgba(176, 94, 47, .58), transparent ); pointer-events: none; } html[data-luna-theme="halloween"] .vision-observing, html[data-luna-theme="halloween"] .vision-results { color: var(--luna-hw-ink); } html[data-luna-theme="halloween"] .vision-analysis-row, html[data-luna-theme="halloween"] .vision-reading-summary, html[data-luna-theme="halloween"] .vision-design-stage, html[data-luna-theme="halloween"] .vision-save-panel { border-color: rgba(96, 64, 58, .17); background: rgba(255, 249, 241, .60); box-shadow: 0 15px 45px rgba(80, 48, 38, .055); } html[data-luna-theme="halloween"] .vision-action-primary { background: linear-gradient( 110deg, #49373a, #795054 ); } html[data-luna-theme="halloween"] .vision-action-secondary { border-color: rgba(95, 61, 57, .24); color: #5e3d43; background: rgba(255, 248, 239, .65); } html[data-luna-theme="halloween"] .vision-studio-link { border-color: rgba(92, 59, 56, .20); color: #58383e; background: rgba(255, 247, 238, .65); } html[data-luna-theme="halloween"] .vision-back { color: #56353c; background: rgba(255, 248, 240, .66); box-shadow: 0 8px 25px rgba(83, 51, 42, .06); } html[data-luna-theme="halloween"] .luna-hw-library { background: linear-gradient( 180deg, #f8efe6, #eedfd2 ); } html[data-luna-theme="halloween"] .luna-hw-library input[type="search"], html[data-luna-theme="halloween"] .luna-hw-library input[type="text"] { color: #4e3639; border-color: rgba(98, 64, 59, .16); background: rgba(255, 249, 241, .79); box-shadow: 0 13px 35px rgba(86, 51, 40, .055); } html[data-luna-theme="halloween"] .luna-hw-library article { border-color: rgba(105, 69, 62, .12); background: rgba(255, 250, 244, .82); box-shadow: 0 16px 45px rgba(77, 47, 39, .055); } html[data-luna-theme="halloween"] .luna-hw-archive { background: radial-gradient( circle at 78% 12%, rgba(198, 111, 57, .10), transparent 28% ), linear-gradient( 180deg, #f5eadf, #ead8ca ); } html[data-luna-theme="halloween"] .luna-hw-archive .gallery-header, html[data-luna-theme="halloween"] .luna-hw-archive .gallery-screen { background-color: transparent; } html[data-luna-theme="halloween"] .luna-hw-archive .gallery-card { background: rgba(255, 248, 239, .76); box-shadow: 0 18px 45px rgba(73, 43, 36, .08); } html[data-luna-theme="halloween"] .luna-hw-share { background: radial-gradient( circle at 50% 26%, rgba(240, 177, 99, .13), transparent 29% ), linear-gradient( 180deg, #f7ede2, #ebd9cc ); } html[data-luna-theme="halloween"] .luna-hw-share button { border-color: rgba(94, 61, 58, .20); } @keyframes lunaGhostFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } } @keyframes lunaHouseGlow { 0%, 100% { filter: drop-shadow( 0 16px 18px rgba(68, 39, 27, .13) ); } 50% { filter: drop-shadow( 0 18px 24px rgba(201, 111, 43, .23) ); } } @media (max-width: 720px) { .luna-hw-ghost { right: 8px; top: 61vh; width: 76px; opacity: .82; } .luna-hw-house { width: 172px; } html[data-luna-theme="halloween"] .vision-upload-frame::after { right: 15px; top: 13px; font-size: 6px; } } @media (prefers-reduced-motion: reduce) { .luna-hw-ghost, .luna-hw-house { animation: none !important; } } /* ========================================================= LUNA HALLOWEEN · CORRECTION 2026-09-17 1. Vision house becomes a small line ornament 2. Ghost belongs to My Archive only 3. Nail Library original artwork must remain untouched ========================================================= */ /* ---------- GHOST: ARCHIVE ONLY ---------- */ html[data-luna-theme="halloween"] body:not(.luna-hw-archive) .luna-hw-ghost { display: none !important; } html[data-luna-theme="halloween"] .luna-hw-archive .luna-hw-ghost { display: block !important; position: fixed; z-index: 12; right: clamp(10px, 3vw, 42px); top: 58vh; width: clamp(68px, 8.5vw, 108px); height: auto; opacity: .92; pointer-events: none; user-select: none; transform: translate3d( 0, var(--luna-ghost-scroll, 0px), 0 ); filter: drop-shadow( 0 12px 18px rgba(88, 50, 35, .13) ); animation: lunaArchiveGhostFloat 4.8s ease-in-out infinite; } /* ---------- VISION HOUSE ---------- */ html[data-luna-theme="halloween"] .luna-hw-vision .luna-hw-house { display: block !important; position: absolute; z-index: 3; left: 50%; bottom: -2px; width: clamp(76px, 9vw, 118px); max-width: 118px; height: auto; transform: translateX(-50%); transform-origin: 50% 100%; pointer-events: none; user-select: none; opacity: .96; filter: drop-shadow( 0 7px 8px rgba(70, 39, 25, .15) ); animation: lunaTinyHouseGlow 4.4s ease-in-out infinite; } /* give the little house its own quiet clearing on the line */ html[data-luna-theme="halloween"] .luna-hw-vision .vision-principles { position: relative; } html[data-luna-theme="halloween"] .luna-hw-vision .vision-principles::before { content: ""; position: absolute; z-index: 2; left: 50%; bottom: -2px; width: clamp(96px, 11vw, 142px); height: 5px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, rgba(245, 232, 217, .94) 18%, rgba(245, 232, 217, .98) 50%, rgba(245, 232, 217, .94) 82%, transparent ); pointer-events: none; } /* ---------- NAIL LIBRARY: PROTECT ORIGINAL ART ---------- */ /* Halloween is allowed to recolour the page around the artwork, but never paint over existing image assets. */ html[data-luna-theme="halloween"] .luna-hw-library img, html[data-luna-theme="halloween"] .luna-hw-library picture, html[data-luna-theme="halloween"] .luna-hw-library picture img { opacity: 1 !important; visibility: visible !important; filter: none !important; mix-blend-mode: normal !important; } /* Remove the broad generic Halloween backgrounds that could cover the original Brand / Colour / Finish / Type artwork. */ html[data-luna-theme="halloween"] .luna-hw-library article { background-color: transparent; } /* Generic pseudo-elements are forbidden from sitting over actual image/picture elements in the library. */ html[data-luna-theme="halloween"] .luna-hw-library picture::before, html[data-luna-theme="halloween"] .luna-hw-library picture::after { content: none !important; display: none !important; } /* Keep Halloween atmosphere on the PAGE, not on the artwork. */ html[data-luna-theme="halloween"] .luna-hw-library { background: radial-gradient( circle at 91% 5%, rgba(195, 105, 50, .08), transparent 25% ), radial-gradient( circle at 8% 38%, rgba(91, 54, 76, .055), transparent 30% ), linear-gradient( 180deg, #f8efe7 0%, #f3e7dc 55%, #ecdbcf 100% ); } /* ---------- ARCHIVE ATMOSPHERE ---------- */ html[data-luna-theme="halloween"] .luna-hw-archive { position: relative; background: radial-gradient( circle at 84% 9%, rgba(208, 119, 53, .12), transparent 25% ), radial-gradient( circle at 13% 52%, rgba(87, 51, 73, .07), transparent 30% ), linear-gradient( 180deg, #f6ebdf 0%, #eedfd1 55%, #e8d4c5 100% ) !important; } /* Keep the existing Rococo artwork. Halloween should coexist with it. */ html[data-luna-theme="halloween"] .luna-hw-archive .gallery-card { background: rgba(255, 249, 241, .54) !important; box-shadow: 0 19px 46px rgba(72, 43, 36, .065) !important; } /* small warm Halloween glow near the archive */ html[data-luna-theme="halloween"] .luna-hw-archive::before { content: ""; position: fixed; right: -80px; top: 33vh; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(229, 144, 69, .13), rgba(229, 144, 69, .04) 42%, transparent 70% ); filter: blur(7px); } /* ---------- ANIMATION ---------- */ @keyframes lunaArchiveGhostFloat { 0%, 100% { margin-top: 0; rotate: -1.5deg; } 50% { margin-top: -12px; rotate: 1.5deg; } } @keyframes lunaTinyHouseGlow { 0%, 100% { filter: drop-shadow( 0 7px 8px rgba(70, 39, 25, .13) ); } 50% { filter: drop-shadow( 0 8px 12px rgba(206, 111, 39, .25) ); } } @media (max-width: 720px) { html[data-luna-theme="halloween"] .luna-hw-vision .luna-hw-house { width: 82px; } html[data-luna-theme="halloween"] .luna-hw-archive .luna-hw-ghost { right: 5px; width: 66px; opacity: .86; } } @media (prefers-reduced-motion: reduce) { html[data-luna-theme="halloween"] .luna-hw-archive .luna-hw-ghost, html[data-luna-theme="halloween"] .luna-hw-vision .luna-hw-house { animation: none !important; } } /* ========================================================= ARCHIVE + LIBRARY PRECISION FIX 2026-09-17 ========================================================= */ /* --------------------------------------------------------- MY ARCHIVE This page lives inside index.html, so these rules now intentionally target the real gallery screen as well. --------------------------------------------------------- */ html[data-luna-theme="halloween"] #gallery-screen, html[data-luna-theme="halloween"] .gallery-screen { position: relative !important; background: radial-gradient( ellipse at 88% 16%, rgba(204, 113, 54, .16), transparent 28% ), radial-gradient( ellipse at 5% 55%, rgba(91, 51, 75, .10), transparent 32% ), linear-gradient( 180deg, #f2e3d7 0%, #ead5c6 48%, #dfc5b6 100% ) !important; } /* warmer smoky top atmosphere */ html[data-luna-theme="halloween"] #gallery-screen::after, html[data-luna-theme="halloween"] .gallery-screen::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient( circle at 72% 9%, rgba(244, 172, 91, .11), transparent 20% ), radial-gradient( circle at 17% 31%, rgba(88, 49, 68, .055), transparent 24% ); mix-blend-mode: multiply; } /* keep actual archive content above atmosphere */ html[data-luna-theme="halloween"] #gallery-screen > *, html[data-luna-theme="halloween"] .gallery-screen > * { position: relative; z-index: 1; } /* Archive typography */ html[data-luna-theme="halloween"] .gallery-screen .gallery-kicker, html[data-luna-theme="halloween"] .gallery-screen .gallery-eyebrow { color: #8e5d50 !important; } html[data-luna-theme="halloween"] .gallery-screen h1, html[data-luna-theme="halloween"] .gallery-screen h2 { color: #57383e !important; } /* Design Code area */ html[data-luna-theme="halloween"] .gallery-screen input { border-color: rgba(105, 62, 59, .22) !important; color: #55373c !important; background: rgba(255, 246, 236, .72) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.50), 0 8px 25px rgba(91,52,43,.04) !important; } /* Dark button becomes smoky wine rather than neutral black */ html[data-luna-theme="halloween"] .gallery-screen button:not(.gallery-back):not(.luna-theme-trigger):not(.luna-world-button) { border-color: rgba(92, 52, 54, .20); color: #fff8ef; background: linear-gradient( 120deg, #49363a, #70464a ); } /* Do NOT recolour actual artwork images */ html[data-luna-theme="halloween"] .gallery-screen img { filter: none !important; } /* --------------------------------------------------------- GHOST Use the real gallery screen, not only body detection. --------------------------------------------------------- */ html[data-luna-theme="halloween"] .gallery-screen .luna-hw-archive-ghost { display: block; } .luna-hw-archive-ghost { position: fixed; z-index: 30; right: clamp(10px, 3.2vw, 48px); top: 56vh; width: clamp(74px, 9vw, 118px); height: auto; opacity: .94; pointer-events: none; user-select: none; transform: translate3d( 0, var(--archive-ghost-scroll, 0px), 0 ); transform-origin: 50% 50%; filter: drop-shadow( 0 14px 20px rgba(81, 44, 31, .14) ); animation: archiveGhostAlive 4.8s ease-in-out infinite; } @keyframes archiveGhostAlive { 0%, 100% { margin-top: 0; rotate: -2deg; } 50% { margin-top: -14px; rotate: 2deg; } } /* --------------------------------------------------------- NAIL LIBRARY SAFETY Never use generic article backgrounds here. --------------------------------------------------------- */ html[data-luna-theme="halloween"] .luna-hw-library article { background: transparent !important; background-color: transparent !important; } /* Existing navigation artwork must win over Halloween. */ html[data-luna-theme="halloween"] .luna-hw-library img { opacity: 1 !important; visibility: visible !important; filter: none !important; background: transparent !important; } /* The Halloween extension must never create a generic plum block on Library navigation artwork. */ html[data-luna-theme="halloween"] .luna-hw-library [class*="brand"]::before, html[data-luna-theme="halloween"] .luna-hw-library [class*="brand"]::after, html[data-luna-theme="halloween"] .luna-hw-library [class*="filter"]::before, html[data-luna-theme="halloween"] .luna-hw-library [class*="filter"]::after { pointer-events: none; } /* mobile */ @media (max-width: 720px) { .luna-hw-archive-ghost { right: 4px; width: 72px; opacity: .88; } } @media (prefers-reduced-motion: reduce) { .luna-hw-archive-ghost { animation: none !important; } } /* ========================================================= LUNA HALLOWEEN · SINGLE GHOST One ghost only. ========================================================= */ .luna-hw-ghost, .luna-hw-archive-ghost { display: none !important; } .luna-hw-single-ghost { --luna-ghost-scroll: 0px; position: fixed; z-index: 80; right: clamp(18px, 4.5vw, 70px); top: 59vh; width: clamp(82px, 9vw, 126px); height: auto; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; transform: translate3d( 0, var(--luna-ghost-scroll), 0 ); transform-origin: 50% 50%; animation: lunaSingleGhostFloat 4.6s ease-in-out infinite; -webkit-tap-highlight-color: transparent; } .luna-hw-single-ghost img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; filter: drop-shadow( 0 14px 20px rgba(78, 42, 28, .14) ); transition: transform .25s ease, filter .25s ease; } .luna-hw-single-ghost:hover img { transform: translateY(-3px) rotate(1.5deg) scale(1.025); filter: drop-shadow( 0 18px 24px rgba(185, 91, 35, .20) ); } /* Studio desktop */ html[data-luna-theme="halloween"] .luna-hw-studio .luna-hw-single-ghost { right: clamp(20px, 5vw, 82px); top: 59vh; } /* Archive */ html[data-luna-theme="halloween"] .luna-hw-archive .luna-hw-single-ghost { right: clamp(12px, 3.2vw, 48px); top: 55vh; width: clamp(80px, 9vw, 118px); } /* Dialogue */ .luna-hw-ghost-dialog { position: fixed; z-index: 100; right: clamp(24px, 5vw, 86px); top: calc(59vh - 215px); width: min(330px, calc(100vw - 38px)); box-sizing: border-box; padding: 22px 22px 18px; border: 1px solid rgba(98, 61, 58, .19); border-radius: 24px; color: #56383d; background: linear-gradient( 145deg, rgba(255, 250, 242, .96), rgba(239, 219, 201, .95) ); box-shadow: 0 24px 65px rgba(72, 40, 31, .14), inset 0 0 0 1px rgba(255,255,255,.65); opacity: 0; transform: translateY(8px) scale(.985); transform-origin: 82% 100%; transition: opacity .22s ease, transform .22s ease; } .luna-hw-ghost-dialog.is-visible { opacity: 1; transform: translateY(0) scale(1); } .luna-hw-ghost-dialog::after { content: ""; position: absolute; right: 36px; bottom: -9px; width: 17px; height: 17px; border-right: 1px solid rgba(98, 61, 58, .14); border-bottom: 1px solid rgba(98, 61, 58, .14); background: #efdbc9; transform: rotate(45deg); } .luna-hw-ghost-dialog-kicker { margin-bottom: 9px; color: rgba(166, 86, 47, .76); font-family: Georgia, "Times New Roman", serif; font-size: 9px; letter-spacing: .22em; } .luna-hw-ghost-dialog-title { color: #4f3037; font-family: Georgia, "Times New Roman", "Songti SC", serif; font-size: 21px; line-height: 1.38; } .luna-hw-ghost-dialog-copy { margin-top: 12px; color: #7c625d; font-size: 13px; line-height: 1.8; } .luna-hw-ghost-dialog-actions { display: flex; gap: 8px; margin-top: 17px; } .luna-hw-ghost-dialog-actions button { flex: 1; min-height: 39px; padding: 7px 10px; border: 1px solid rgba(93, 57, 55, .17); border-radius: 999px; color: #68474a; background: rgba(255, 249, 241, .69); font: inherit; font-size: 11px; cursor: pointer; } .luna-hw-ghost-dialog-actions button:last-child { color: #fff8ee; background: linear-gradient( 120deg, #55383d, #7b4c4c ); } /* Never show Studio ghost on phone */ @media (max-width: 720px) { html[data-luna-theme="halloween"] .luna-hw-studio .luna-hw-single-ghost { display: none !important; } html[data-luna-theme="halloween"] .luna-hw-archive .luna-hw-single-ghost { display: block; right: 4px; top: 61vh; width: 68px; } .luna-hw-ghost-dialog { right: 14px; top: auto; bottom: 102px; width: min( 315px, calc(100vw - 28px) ); } } @keyframes lunaSingleGhostFloat { 0%, 100% { margin-top: 0; rotate: -1.5deg; } 50% { margin-top: -11px; rotate: 1.5deg; } } @media (prefers-reduced-motion: reduce) { .luna-hw-single-ghost { animation: none !important; } } /* ========================================================= NAVIGATION SAFETY PATCH Halloween decoration must never block Studio controls. ========================================================= */ /* The floating ghost itself owns no large invisible hit area. */ .luna-hw-single-ghost { pointer-events: none !important; } /* Only the visible PNG receives interaction. */ .luna-hw-single-ghost img { pointer-events: auto !important; cursor: pointer; } /* Never allow decorative layers to intercept navigation. */ .luna-hw-house, .luna-hw-archive::before, .luna-hw-archive::after, .luna-hw-studio::before, .luna-hw-studio::after, .luna-hw-library::before, .luna-hw-library::after, .luna-hw-vision::before, .luna-hw-vision::after { pointer-events: none !important; } /* Original Studio top bar must remain above decorative layers. */ html[data-luna-theme="halloween"] .topbar, html[data-luna-theme="halloween"] .brand-button, html[data-luna-theme="halloween"] [data-action="open-gallery"] { position: relative; z-index: 150 !important; pointer-events: auto !important; } /* Archive back button must also remain fully interactive. */ html[data-luna-theme="halloween"] .gallery-back, html[data-luna-theme="halloween"] .gallery-screen button { pointer-events: auto; } /* ========================================================= GHOST HITBOX FIX · FINAL Visible ghost only, never block Studio navigation. ========================================================= */ /* Studio header/navigation always wins. */ html[data-luna-theme="halloween"] .topbar { position: relative !important; z-index: 1000 !important; } html[data-luna-theme="halloween"] .brand-button, html[data-luna-theme="halloween"] [data-action="open-gallery"] { position: relative !important; z-index: 1001 !important; pointer-events: auto !important; } /* Ghost stays well below navigation layer. */ .luna-hw-single-ghost { z-index: 40 !important; overflow: visible; background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Do not allow a large button rectangle to capture clicks. Only the actual image area is interactive. */ .luna-hw-single-ghost { pointer-events: none !important; } .luna-hw-single-ghost img { display: block !important; width: 100% !important; height: auto !important; pointer-events: auto !important; cursor: pointer; } /* On desktop Studio keep the ghost entirely in the right-side decorative whitespace. */ @media (min-width: 721px) { html[data-luna-theme="halloween"] .luna-hw-studio .luna-hw-single-ghost { position: fixed !important; left: auto !important; right: max( 26px, calc((100vw - 560px) / 4) ) !important; top: 60vh !important; width: clamp( 78px, 7vw, 108px ) !important; max-width: 108px !important; } } /* Studio phone: no ghost at all because Studio needs touch space. */ @media (max-width: 720px) { html[data-luna-theme="halloween"] .luna-hw-studio .luna-hw-single-ghost { display: none !important; } } /* Archive may keep the ghost on both desktop and mobile, but away from the upper-left back/navigation area. */ html[data-luna-theme="halloween"] .luna-hw-archive .luna-hw-single-ghost { left: auto !important; right: 14px !important; top: 58vh !important; z-index: 40 !important; } @media (max-width: 720px) { html[data-luna-theme="halloween"] .luna-hw-archive .luna-hw-single-ghost { right: 3px !important; top: 64vh !important; width: 64px !important; } } /* Dialogue can be interactive, but only while actually open. */ .luna-hw-ghost-dialog { z-index: 1100 !important; pointer-events: auto !important; } /* ========================================================= LUNA GHOST · TRUE DECORATION LAYER The ghost itself NEVER participates in hit testing. ========================================================= */ /* Keep the original larger visual scale. */ .luna-hw-single-ghost { position: fixed !important; z-index: 18 !important; width: clamp( 105px, 10vw, 150px ) !important; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; /* Most important rule: ghost can never intercept a click. */ pointer-events: none !important; user-select: none !important; touch-action: none !important; } .luna-hw-single-ghost img { display: block !important; width: 100% !important; height: auto !important; /* Do NOT restore pointer events on the PNG. */ pointer-events: none !important; user-select: none !important; -webkit-user-drag: none !important; } /* Desktop Studio: restore the larger cute ghost. */ @media (min-width: 721px) { html[data-luna-theme="halloween"] .luna-hw-studio .luna-hw-single-ghost { right: clamp( 38px, 6vw, 105px ) !important; top: 57vh !important; width: clamp( 112px, 10vw, 152px ) !important; } } /* Mobile Studio remains clear for nail editing. */ @media (max-width: 720px) { html[data-luna-theme="halloween"] .luna-hw-studio .luna-hw-single-ghost, html[data-luna-theme="halloween"] .luna-hw-studio .luna-hw-ghost-interaction { display: none !important; } } /* Archive keeps approximately the same visual size. It does NOT become large again because of another rule. */ html[data-luna-theme="halloween"] .luna-hw-archive .luna-hw-single-ghost { right: clamp( 10px, 3vw, 42px ) !important; top: 57vh !important; width: clamp( 100px, 9vw, 135px ) !important; pointer-events: none !important; } @media (max-width: 720px) { html[data-luna-theme="halloween"] .luna-hw-archive .luna-hw-single-ghost { right: -7px !important; top: 62vh !important; width: 82px !important; opacity: .92; } } /* ========================================================= Separate tiny interaction star ========================================================= */ .luna-hw-ghost-interaction { position: fixed; z-index: 60; right: clamp( 36px, 5.4vw, 92px ); top: calc(57vh - 18px); display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid rgba(111, 66, 56, .22); border-radius: 50%; color: #8e573d; background: rgba(255, 246, 233, .91); box-shadow: 0 7px 18px rgba(74, 43, 31, .10), inset 0 0 0 1px rgba(255,255,255,.65); cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; } .luna-hw-ghost-interaction span { font-size: 12px; line-height: 1; pointer-events: none; } .luna-hw-ghost-interaction:hover { transform: translateY(-2px) rotate(8deg); } /* Archive interaction point follows the ghost, but stays far from top navigation. */ html[data-luna-theme="halloween"] .luna-hw-archive .luna-hw-ghost-interaction { right: 16px; top: calc(57vh - 13px); } /* All real application navigation stays above decoration. */ html[data-luna-theme="halloween"] .topbar, html[data-luna-theme="halloween"] .brand-button, html[data-luna-theme="halloween"] [data-action="open-gallery"], html[data-luna-theme="halloween"] .gallery-back { position: relative !important; z-index: 200 !important; pointer-events: auto !important; } /* Dialogue itself is intentionally interactive. */ .luna-hw-ghost-dialog { z-index: 300 !important; } /* No duplicate legacy ghosts. */ .luna-hw-ghost, .luna-hw-archive-ghost { display: none !important; pointer-events: none !important; } /* ========================================================= GHOST FINAL PLACEMENT STUDIO = NEVER ARCHIVE + LUNA WORLD = INTERACTIVE ========================================================= */ /* Remove every previous interaction-star experiment. */ .luna-hw-ghost-interaction { display: none !important; } /* Absolutely no ghost on Studio. This is only a second safety net. JS also refuses to create one. */ html[data-luna-theme="halloween"] .luna-hw-studio .luna-hw-single-ghost, html[data-luna-theme="halloween"] body:not(.luna-hw-archive):not(.luna-hw-world) .luna-hw-single-ghost { display: none; } /* Ghost is directly clickable again, but only exists on Archive / Luna World. */ .luna-hw-single-ghost { --luna-ghost-scroll: 0px; position: fixed; z-index: 45; display: block; width: clamp( 105px, 9vw, 142px ); height: auto; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; pointer-events: auto; transform: translate3d( 0, var(--luna-ghost-scroll), 0 ); animation: lunaGhostFinalFloat 4.8s ease-in-out infinite; -webkit-tap-highlight-color: transparent; } .luna-hw-single-ghost img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow( 0 15px 22px rgba(74, 42, 28, .14) ); } /* MY ARCHIVE */ .luna-hw-single-ghost[data-ghost-page="archive"] { right: clamp( 12px, 3vw, 46px ); top: 57vh; } /* LUNA WORLD A little farther into the editorial margin. */ .luna-hw-single-ghost[data-ghost-page="world"] { right: clamp( 18px, 4vw, 64px ); top: 53vh; } /* Phone: Archive / World still get the little ghost, but smaller and tucked against the edge. */ @media (max-width: 720px) { .luna-hw-single-ghost { width: 76px; } .luna-hw-single-ghost[data-ghost-page="archive"] { right: -5px; top: 63vh; } .luna-hw-single-ghost[data-ghost-page="world"] { right: 5px; top: 58vh; } } /* Dialogue */ .luna-hw-ghost-dialog { position: fixed; z-index: 300; right: clamp( 24px, 5vw, 86px ); top: calc(57vh - 220px); width: min( 330px, calc(100vw - 38px) ); box-sizing: border-box; padding: 22px 22px 18px; border: 1px solid rgba(98, 61, 58, .19); border-radius: 24px; color: #56383d; background: linear-gradient( 145deg, rgba(255,250,242,.97), rgba(239,219,201,.96) ); box-shadow: 0 24px 65px rgba(72,40,31,.14), inset 0 0 0 1px rgba(255,255,255,.65); opacity: 0; transform: translateY(8px) scale(.985); transition: opacity .22s ease, transform .22s ease; } .luna-hw-ghost-dialog.is-visible { opacity: 1; transform: translateY(0) scale(1); } @keyframes lunaGhostFinalFloat { 0%, 100% { margin-top: 0; rotate: -1.5deg; } 50% { margin-top: -12px; rotate: 1.5deg; } } @media (prefers-reduced-motion: reduce) { .luna-hw-single-ghost { animation: none; } } /* ========================================================= GHOST FINAL PLACEMENT STUDIO = NEVER ARCHIVE + LUNA WORLD = INTERACTIVE ========================================================= */ /* Remove every previous interaction-star experiment. */ .luna-hw-ghost-interaction { display: none !important; } /* Absolutely no ghost on Studio. This is only a second safety net. JS also refuses to create one. */ html[data-luna-theme="halloween"] .luna-hw-studio .luna-hw-single-ghost, html[data-luna-theme="halloween"] body:not(.luna-hw-archive):not(.luna-hw-world) .luna-hw-single-ghost { display: none; } /* Ghost is directly clickable again, but only exists on Archive / Luna World. */ .luna-hw-single-ghost { --luna-ghost-scroll: 0px; position: fixed; z-index: 45; display: block; width: clamp( 105px, 9vw, 142px ); height: auto; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; pointer-events: auto; transform: translate3d( 0, var(--luna-ghost-scroll), 0 ); animation: lunaGhostFinalFloat 4.8s ease-in-out infinite; -webkit-tap-highlight-color: transparent; } .luna-hw-single-ghost img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow( 0 15px 22px rgba(74, 42, 28, .14) ); } /* MY ARCHIVE */ .luna-hw-single-ghost[data-ghost-page="archive"] { right: clamp( 12px, 3vw, 46px ); top: 57vh; } /* LUNA WORLD A little farther into the editorial margin. */ .luna-hw-single-ghost[data-ghost-page="world"] { right: clamp( 18px, 4vw, 64px ); top: 53vh; } /* Phone: Archive / World still get the little ghost, but smaller and tucked against the edge. */ @media (max-width: 720px) { .luna-hw-single-ghost { width: 76px; } .luna-hw-single-ghost[data-ghost-page="archive"] { right: -5px; top: 63vh; } .luna-hw-single-ghost[data-ghost-page="world"] { right: 5px; top: 58vh; } } /* Dialogue */ .luna-hw-ghost-dialog { position: fixed; z-index: 300; right: clamp( 24px, 5vw, 86px ); top: calc(57vh - 220px); width: min( 330px, calc(100vw - 38px) ); box-sizing: border-box; padding: 22px 22px 18px; border: 1px solid rgba(98, 61, 58, .19); border-radius: 24px; color: #56383d; background: linear-gradient( 145deg, rgba(255,250,242,.97), rgba(239,219,201,.96) ); box-shadow: 0 24px 65px rgba(72,40,31,.14), inset 0 0 0 1px rgba(255,255,255,.65); opacity: 0; transform: translateY(8px) scale(.985); transition: opacity .22s ease, transform .22s ease; } .luna-hw-ghost-dialog.is-visible { opacity: 1; transform: translateY(0) scale(1); } @keyframes lunaGhostFinalFloat { 0%, 100% { margin-top: 0; rotate: -1.5deg; } 50% { margin-top: -12px; rotate: 1.5deg; } } @media (prefers-reduced-motion: reduce) { .luna-hw-single-ghost { animation: none; } } /* ========================================================== MY ARCHIVE · HALLOWEEN GHOST DECORATION PURE DECORATION ONLY Important: - no button - no click handler - no fixed overlay - no document-flow space - no interaction blocking ========================================================== */ /* The Archive screen is the positioning context. This does NOT change its layout dimensions. */ #gallery-screen { position: relative; } /* Classic theme: never show Halloween decoration. */ .luna-hw-archive-decoration { display: none; } /* Halloween Archive only. */ html[data-luna-theme="halloween"] #gallery-screen .luna-hw-archive-decoration { display: block; position: absolute; /* Keep it away from the header/back button. */ right: clamp(18px, 3.2vw, 46px); top: clamp(500px, 55vh, 680px); width: clamp(105px, 11vw, 155px); height: auto; /* Decorative layer sits visually above background, but below real Archive controls. */ z-index: 1; /* CRITICAL: the entire decoration is invisible to hit testing. */ pointer-events: none !important; user-select: none; -webkit-user-select: none; /* It occupies zero document-flow space because it is absolutely positioned. */ margin: 0; padding: 0; border: 0; background: transparent; transform: translateZ(0); } html[data-luna-theme="halloween"] #gallery-screen .luna-hw-archive-decoration img { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; background: transparent; pointer-events: none !important; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; filter: drop-shadow( 0 14px 18px rgba(91, 49, 35, .13) ); animation: lunaArchiveDecorGhostFloat 5.2s ease-in-out infinite; } /* Every real Archive control stays above decoration. */ #gallery-screen .completion-header, #gallery-screen .gallery-heading, #gallery-screen .luna-design-restore-card, #gallery-screen .gallery-grid, #gallery-screen button, #gallery-screen input, #gallery-screen a { position: relative; z-index: 5; } /* Gentle floating only. Transform animation does not affect layout. */ @keyframes lunaArchiveDecorGhostFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.2deg); } 50% { transform: translate3d(0, -12px, 0) rotate(1.2deg); } } /* Tablet. */ @media (max-width: 900px) { html[data-luna-theme="halloween"] #gallery-screen .luna-hw-archive-decoration { right: 12px; top: 520px; width: 112px; } } /* Phone: smaller, tucked into the right margin. Still absolute inside Archive. Still pointer-events:none. Still creates zero scroll height. */ @media (max-width: 600px) { html[data-luna-theme="halloween"] #gallery-screen .luna-hw-archive-decoration { right: -5px; top: 470px; width: 82px; opacity: .94; } } /* Accessibility: retain the decoration but stop motion if requested. */ @media (prefers-reduced-motion: reduce) { html[data-luna-theme="halloween"] #gallery-screen .luna-hw-archive-decoration img { animation: none; } } /* ========================================================= ARCHIVE GHOST · PURE SCREEN DECORATION 2026-09-17 Does not belong to Studio layout. Does not belong to Archive layout. Does not receive pointer/touch events. Does not create scroll space. ========================================================= */ /* Disable the previous Archive-positioned decoration completely in case any old markup survives. */ .luna-hw-archive-decoration { display: none !important; } /* Default: the screen ghost does not exist visually. */ .luna-hw-screen-ghost { display: none !important; pointer-events: none !important; } /* Only when: 1. Halloween is active 2. Gallery / My Archive is actually open does the decorative ghost become visible. :has() observes DOM state through CSS only. There is NO JavaScript page observer. */ html[data-luna-theme="halloween"] body:has(#gallery-screen:not(.hidden)) .luna-hw-screen-ghost { display: block !important; position: fixed !important; right: clamp(18px, 3.5vw, 58px) !important; bottom: clamp(22px, 5vh, 58px) !important; width: clamp(135px, 15vw, 205px) !important; height: auto !important; margin: 0 !important; padding: 0 !important; z-index: 30 !important; border: 0 !important; background: transparent !important; pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; transform: translateZ(0); } /* The image itself also ignores ALL interaction. */ html[data-luna-theme="halloween"] body:has(#gallery-screen:not(.hidden)) .luna-hw-screen-ghost img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; border: 0 !important; background: transparent !important; pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; -webkit-user-drag: none !important; filter: drop-shadow( 0 13px 20px rgba(88, 46, 30, .14) ) !important; animation: lunaScreenGhostFloat 5s ease-in-out infinite !important; } /* Gentle floating animation. */ @keyframes lunaScreenGhostFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); } 50% { transform: translate3d(0, -11px, 0) rotate(1deg); } } /* Mobile. Keep it visible, but smaller and farther from the main Archive controls. */ @media (max-width: 700px) { html[data-luna-theme="halloween"] body:has(#gallery-screen:not(.hidden)) .luna-hw-screen-ghost { right: 8px !important; bottom: 18px !important; width: 105px !important; opacity: .96 !important; } } /* Very small phones. */ @media (max-width: 390px) { html[data-luna-theme="halloween"] body:has(#gallery-screen:not(.hidden)) .luna-hw-screen-ghost { right: 5px !important; bottom: 12px !important; width: 88px !important; } } /* Respect reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { .luna-hw-screen-ghost img { animation: none !important; } } /* ========================================================= ARCHIVE GHOST · PURE SCREEN DECORATION 2026-09-17 Does not belong to Studio layout. Does not belong to Archive layout. Does not receive pointer/touch events. Does not create scroll space. ========================================================= */ /* Disable the previous Archive-positioned decoration completely in case any old markup survives. */ .luna-hw-archive-decoration { display: none !important; } /* Default: the screen ghost does not exist visually. */ .luna-hw-screen-ghost { display: none !important; pointer-events: none !important; } /* Only when: 1. Halloween is active 2. Gallery / My Archive is actually open does the decorative ghost become visible. :has() observes DOM state through CSS only. There is NO JavaScript page observer. */ html[data-luna-theme="halloween"] body:has(#gallery-screen:not(.hidden)) .luna-hw-screen-ghost { display: block !important; position: fixed !important; right: clamp(18px, 3.5vw, 58px) !important; bottom: clamp(22px, 5vh, 58px) !important; width: clamp(135px, 15vw, 205px) !important; height: auto !important; margin: 0 !important; padding: 0 !important; z-index: 30 !important; border: 0 !important; background: transparent !important; pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; transform: translateZ(0); } /* The image itself also ignores ALL interaction. */ html[data-luna-theme="halloween"] body:has(#gallery-screen:not(.hidden)) .luna-hw-screen-ghost img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; border: 0 !important; background: transparent !important; pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; -webkit-user-drag: none !important; filter: drop-shadow( 0 13px 20px rgba(88, 46, 30, .14) ) !important; animation: lunaScreenGhostFloat 5s ease-in-out infinite !important; } /* Gentle floating animation. */ @keyframes lunaScreenGhostFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); } 50% { transform: translate3d(0, -11px, 0) rotate(1deg); } } /* Mobile. Keep it visible, but smaller and farther from the main Archive controls. */ @media (max-width: 700px) { html[data-luna-theme="halloween"] body:has(#gallery-screen:not(.hidden)) .luna-hw-screen-ghost { right: 8px !important; bottom: 18px !important; width: 105px !important; opacity: .96 !important; } } /* Very small phones. */ @media (max-width: 390px) { html[data-luna-theme="halloween"] body:has(#gallery-screen:not(.hidden)) .luna-hw-screen-ghost { right: 5px !important; bottom: 12px !important; width: 88px !important; } } /* Respect reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { .luna-hw-screen-ghost img { animation: none !important; } } /* ========================================================= GHOST SYSTEM DISABLED — CLEAN RECOVERY 2026-09-17 Decorative ghost experiments are intentionally disabled. Archive layout remains controlled by the original screen. ========================================================= */ .luna-hw-screen-ghost, .luna-hw-single-ghost, .luna-hw-archive-ghost, .luna-hw-archive-decoration, .luna-hw-ghost-interaction, [id*="ghost"], [class*="ghost-dialog"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Important: Gallery remains a fixed application screen. This restores the original overlay behavior if an experimental Halloween rule changed its positioning. */ html body #gallery-screen.gallery-screen { position: fixed !important; inset: 0 !important; width: min(100%, 520px) !important; height: auto !important; min-height: 100dvh !important; margin: auto !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 100 !important; } html body #gallery-screen.gallery-screen.hidden { display: none !important; } /* ========================================================= ARCHIVE SCREEN LAYER FIX Keep Studio chrome underneath My Archive. Does not modify app.js or Archive navigation. ========================================================= */ body:has(#gallery-screen:not(.hidden)) .app-shell > .topbar { visibility: hidden !important; pointer-events: none !important; } body:has(#gallery-screen:not(.hidden)) #gallery-screen { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 10000 !important; } body:has(#gallery-screen:not(.hidden)) #gallery-screen .completion-header, body:has(#gallery-screen:not(.hidden)) #gallery-screen .completion-header *, body:has(#gallery-screen:not(.hidden)) #gallery-screen .gallery-header-actions, body:has(#gallery-screen:not(.hidden)) #gallery-screen button, body:has(#gallery-screen:not(.hidden)) #gallery-screen input, body:has(#gallery-screen:not(.hidden)) #gallery-screen a { visibility: visible !important; pointer-events: auto !important; } body:has(#gallery-screen:not(.hidden)) #gallery-screen .completion-header { position: relative !important; z-index: 10002 !important; } body:has(#gallery-screen:not(.hidden)) #gallery-screen .gallery-heading, body:has(#gallery-screen:not(.hidden)) #gallery-screen .luna-design-restore-card, body:has(#gallery-screen:not(.hidden)) #gallery-screen .gallery-grid { position: relative !important; z-index: 10001 !important; }