/* White keeps the original palette. Only explicit Dark changes menu colors. */
.menu-page .menu-theme-options { display: flex; gap: 6px; margin: 5px 6px 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.menu-page .menu-theme-options button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; flex: 1; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font: 600 .8rem var(--ff-body); border-radius: 8px; padding: 9px 10px; min-height: 40px; cursor: pointer; }
.menu-page .menu-theme-options button[aria-pressed="true"] { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.menu-page .menu-theme-options button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) { color-scheme: dark; background: #121619; }
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page {
  color-scheme: dark;
  --bg: #121619; --surface: #1c2227; --surface-2: #252d34;
  --fg: #f6f2eb; --muted: #a9b1b8; --gold: #d88749; --gold-hi: #f1b482;
  --on-accent: #201208; --line: rgba(220, 228, 235, .12);
  --glow: rgba(216, 135, 73, .3); --veg: #a4c991; --spicy: #f19c8e;
  background: radial-gradient(ellipse at 0 0, #29231f, transparent 55%), var(--bg);
}
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .catbar { background: rgba(18,22,25,.95); }
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .sheet-desc { color: #c7beb3; }
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .photo-note,
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .cart-note,
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .madewith { color: var(--muted); }
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .grabber { background: #59616a; }
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .sheet-photo::before { border-color: rgba(241,180,130,.25); }
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .sheet-photo::after { background: radial-gradient(120% 90% at 50% 20%, transparent, rgba(18,22,25,.3)), linear-gradient(to bottom, transparent 58%, var(--surface)); }
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .tag.veg { border-color: rgba(164,201,145,.5); }
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .tag.spicy { border-color: rgba(241,156,142,.5); }
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .sheet .closebtn { color: #f6f2eb; background: rgba(18,22,25,.75); }
html:is([data-menu-theme="dark"], [data-menu-theme="halloween"]) .menu-page .overlay { background: rgba(0,0,0,.72); }

/* Seasonal accents are isolated and disappear when the 2026 event expires. */
.menu-page .halloween-logo { display: none; }
html[data-menu-theme="halloween"] .menu-page .hero-brand .standard-logo { display: none; }
html[data-menu-theme="halloween"] .menu-page .hero-brand .halloween-logo { display: block; filter: drop-shadow(0 4px 12px rgba(244,110,25,.28)); }
html[data-menu-theme="halloween"] { background: #170f20; }
html[data-menu-theme="halloween"] .menu-page {
  --bg: #170f20; --surface: #24192e; --surface-2: #302038;
  --fg: #fff0db; --muted: #c7adc9; --gold: #f49a38; --gold-hi: #ffbe73;
  --line: rgba(244,154,56,.25); --glow: rgba(244,154,56,.32);
  --spicy: #d59af1; --on-accent: #241208;
  background: radial-gradient(ellipse at 0 0, rgba(126,58,151,.25), transparent 55%), var(--bg);
}
html[data-menu-theme="halloween"] .menu-page .hero-photo::before { background: linear-gradient(180deg,rgba(23,15,32,.72),rgba(59,22,64,.4) 42%,rgba(23,15,32,.85)); }
html[data-menu-theme="halloween"] .menu-page .hero-photo::after { content: '\1F987'; position: absolute; top: 94px; right: 12%; font-size: 30px; pointer-events: none; filter: drop-shadow(0 4px 9px rgba(0,0,0,.4)); animation: halloween-float 4s ease-in-out infinite; }
html[data-menu-theme="halloween"] .menu-page .hero-title { color: #fff0db; text-shadow: 0 3px 24px rgba(244,154,56,.35); }
html[data-menu-theme="halloween"] .menu-page .catbar { background: rgba(23,15,32,.95); }
html[data-menu-theme="halloween"] .menu-page .campaign { background: linear-gradient(110deg,rgba(244,154,56,.17),rgba(126,58,151,.12)); }
html[data-menu-theme="halloween"] .menu-page .hl .kicker::before { content: '\1F383'; margin-right: 8px; letter-spacing: 0; }
html[data-menu-theme="halloween"] .menu-page .item:hover { box-shadow: 0 10px 30px rgba(0,0,0,.2),0 0 25px rgba(244,154,56,.17); }
html[data-menu-theme="halloween"] .menu-page .sheet-desc { color: #e5cfe5; }
html[data-menu-theme="halloween"] .menu-page .sheet-add,
html[data-menu-theme="halloween"] .menu-page .cartfab { background: linear-gradient(135deg,#ffb34d,#ed8530); border-color: #f49a38; }
@keyframes halloween-float { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-7px) rotate(7deg); } }
.menu-page .halloween-ghost { display: none; }
html[data-menu-theme="halloween"] .menu-page:not(.mode-admin):not(.locked) .halloween-ghost {
  --ghost-size: clamp(44px, 7vw, 66px);
  display: block; position: fixed; top: 0; left: 0;
  width: var(--ghost-size); height: calc(var(--ghost-size) * 1.17);
  z-index: 30; pointer-events: none; user-select: none;
  opacity: 0; filter: drop-shadow(0 0 10px rgba(212,172,239,.35));
  animation: halloween-ghost-wander 24s ease-in-out infinite;
}
.menu-page .halloween-ghost svg { display: block; width: 100%; height: 100%; }
@keyframes halloween-ghost-wander {
  0%, 9% { opacity: 0; transform: translate(12vw, 44vh) rotate(-8deg); }
  10% { opacity: .88; transform: translate(12vw, 44vh) rotate(-8deg); }
  24% { opacity: .88; transform: translate(calc(88vw - var(--ghost-size)), 29vh) rotate(9deg); }
  35% { opacity: .85; transform: translate(calc(88vw - var(--ghost-size)), 65vh) rotate(-7deg); }
  47% { opacity: .88; transform: translate(44vw, 42vh) rotate(7deg); }
  57% { opacity: .78; transform: translate(20vw, 63vh) rotate(-8deg); }
  61% { opacity: 0; transform: translate(16vw, 54vh) rotate(-8deg); }
  62%, 100% { opacity: 0; transform: translate(12vw, 44vh) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-menu-theme="halloween"] .menu-page .hero-photo::after { animation: none; }
  html[data-menu-theme="halloween"] .menu-page .halloween-ghost { display: none !important; animation: none; }
}