/* Rune Halloween looks. Three looks, picked by data-hw on <html> (decor.js): arcade (the default), cozy, storybook.
   Nothing here applies unless <html data-hw> is set, so turning Halloween off removes every trace.
   Plain colours, outlines and gradients only: no live blur, no 3D. Decorations come from decor.js. */

/* ---------- colours for each look (same names the real pages already use) ---------- */
html[data-hw="arcade"] {
  --bg: #0b0620; --glass: #0e0826; --glass-2: #1a0d3d; --line: #35d2ff; --text: #f4eeff; --muted: #cdbdff; --faint: #9c8ac7;
  --accent: #ffe94a; --accent-2: #ff3fa4; --accent-soft: #ffe94a1f; --good: #ffe94a; --error: #ff8aa8;
  --serif: "Arial Black", "Trebuchet MS", sans-serif; --sans: "Trebuchet MS", "Segoe UI", sans-serif;
  --rune: #ffe94a; --glass-solid: #0e0826; --link: #35d2ff; --soft: #ffd0ec; --you-text: #1a0630; --on-accent: #1a0630; --bubble: #1d1050; --field: #0b0620; --code-bg: #0006;
  --win-shadow: 0 0 0 3px #0e0826, 0 0 0 6px #35d2ff, 0 0 36px #ff3fa488; --win-shadow-focus: 0 0 0 3px #0e0826, 0 0 0 6px #35d2ff, 0 0 44px #ff3fa4aa; --bar-shadow: 0 0 22px #ff3fa455;
  --accent-44: #ffe94a44; --accent-55: #ffe94a55; --accent-66: #ffe94a66; --accent-88: #ffe94a88;
  --fail-bg: #3b0f2e; --fail-text: #ffc0d8; --close-bg: #ff3fa422; --close-text: #ffb0d6; --stop-bg: #1a0d3d; --stop-hover: #2a1560;
  --lk-page: linear-gradient(#0b0620, #170a3a 60%, #240a4a); --lk-c1: #ff3fa4; --lk-c2: #35d2ff; --lk-c3: #ffe94a; --lk-ground: repeating-linear-gradient(90deg, #1a0d3d 0 38px, #24114e 38px 40px); --lk-line: #ff3fa4;
  --sky-glow: none; --pane-bg: #120a30; --viewer-bg: #0b0620; --row-bg: #160c3a; --hover: #ffe94a14; --tree-line: #35d2ff55;
  --label: #ffe94a; --label-2: #ffd0ec; --tag-bg: #ffe94a1a; --warn: #ffb347; --warn-2: #ffcf8a; --code-text: #f4eeff; --code-num: #9c8ac7;
  --qbox-bg: #0e0826; --qbox-shadow: 0 0 22px #ff3fa455; --overlay: #0b0620e6; --media-open-bg: #0e0826e0; --mic-ring: #ff3fa455;
  color-scheme: dark;
}
html[data-hw="cozy"] {
  --bg: #2a1a22; --glass: #fff3e1; --glass-2: #f6dcb4; --line: #e2c493; --text: #3f2b27; --muted: #6e5248; --faint: #8a7468;
  --accent: #8a4b52; --accent-2: #6e3540; --accent-soft: #8a4b521f; --good: #4f7a52; --error: #a3333f;
  --serif: Georgia, "Palatino Linotype", serif; --sans: Georgia, "Palatino Linotype", serif;
  --rune: #8a4b52; --glass-solid: #fff3e1; --link: #8a4b52; --soft: #5a3a3e; --you-text: #fff6ea; --on-accent: #fff3e1; --bubble: #fffaf0; --field: #fffaf0; --code-bg: #0001;
  --win-shadow: 0 0 0 10px #f5d8a244, 0 0 80px #f2c27a55, 0 18px 40px #0008; --win-shadow-focus: 0 0 0 10px #f5d8a266, 0 0 90px #f2c27a77, 0 18px 40px #0008; --bar-shadow: 0 8px 22px #0006;
  --accent-44: #8a4b5244; --accent-55: #8a4b5255; --accent-66: #8a4b5266; --accent-88: #8a4b5288;
  --fail-bg: #fde0dc; --fail-text: #7a2a2a; --close-bg: #c9757d22; --close-text: #7a3a40; --stop-bg: #f6dcb4; --stop-hover: #efd0a0;
  --lk-page: radial-gradient(60% 55% at 50% 38%, #5a3a3e 0%, #3a2530 55%, #241820 100%); --lk-c1: #c9757d; --lk-c2: #f6dcb4; --lk-c3: #f8dca0; --lk-ground: linear-gradient(#2c1b23, #1d1218); --lk-line: #f2c27a44;
  --sky-glow: none; --pane-bg: #fffaf0; --viewer-bg: #f6e6c8; --row-bg: #fbeed4; --hover: #8a4b520d; --tree-line: #e2c493;
  --label: #8a4b52; --label-2: #6e3540; --tag-bg: #8a4b5214; --warn: #a35a14; --warn-2: #8a4b14; --code-text: #3f2b27; --code-num: #8a7468;
  --qbox-bg: #fffaf0; --qbox-shadow: 0 -8px 30px #0004; --overlay: #2a1a22e6; --media-open-bg: #fff3e1e0; --mic-ring: #8a4b5233;
  color-scheme: light;
}
html[data-hw="storybook"] {
  --bg: #d9c7a0; --glass: #f6ecd2; --glass-2: #efe0bb; --line: #2b2118; --text: #2b2118; --muted: #5a4733; --faint: #7d6a52;
  --accent: #7a1f2b; --accent-2: #5e1520; --accent-soft: #7a1f2b1a; --good: #3f6a3a; --error: #8f1f2b;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --sans: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --rune: #2b2118; --glass-solid: #f6ecd2; --link: #7a1f2b; --soft: #3a2c1e; --you-text: #7a1f2b; --on-accent: #f6ecd2; --bubble: transparent; --field: #f6ecd2; --code-bg: #0001;
  --win-shadow: 6px 7px 0 #2b211833; --win-shadow-focus: 6px 7px 0 #2b211844; --bar-shadow: 4px 5px 0 #2b211833;
  --accent-44: #7a1f2b44; --accent-55: #7a1f2b55; --accent-66: #7a1f2b66; --accent-88: #7a1f2b88;
  --fail-bg: #f1d3c8; --fail-text: #7a1f2b; --close-bg: #7a1f2b18; --close-text: #7a1f2b; --stop-bg: #efe0bb; --stop-hover: #e4d2a6;
  --lk-page: radial-gradient(120% 90% at 50% 40%, #e6d6b0 0%, #d9c7a0 60%, #bfa878 100%); --lk-c1: #7a1f2b; --lk-c2: #2b2118; --lk-c3: #7a1f2b; --lk-ground: #c4ae82; --lk-line: #2b2118;
  --sky-glow: none; --pane-bg: #f6ecd2; --viewer-bg: #efe0bb; --row-bg: #f1e4c2; --hover: #7a1f2b0d; --tree-line: #2b211866;
  --label: #7a1f2b; --label-2: #5e1520; --tag-bg: #7a1f2b14; --warn: #8a4a10; --warn-2: #6e3a0c; --code-text: #2b2118; --code-num: #7d6a52;
  --qbox-bg: #f6ecd2; --qbox-shadow: 0 -6px 0 #2b211822; --overlay: #2b2118e6; --media-open-bg: #f6ecd2e0; --mic-ring: #7a1f2b33;
  color-scheme: light;
}

/* ---------- shared page rules for all three looks ---------- */
html[data-hw="arcade"] body, html[data-hw="cozy"] body, html[data-hw="storybook"] body { background: var(--lk-page) fixed; color: var(--text); font-family: var(--sans); }
html[data-hw="arcade"] #sky, html[data-hw="cozy"] #sky, html[data-hw="storybook"] #sky, html[data-hw="arcade"] .wallmark, html[data-hw="cozy"] .wallmark, html[data-hw="storybook"] .wallmark { display: none !important; }
html[data-hw="arcade"] .rn .aura, html[data-hw="cozy"] .rn .aura, html[data-hw="storybook"] .rn .aura { display: none; }
html[data-hw="arcade"] .win, html[data-hw="cozy"] .win, html[data-hw="storybook"] .win { background: var(--glass) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-hw="arcade"] .taskbar, html[data-hw="cozy"] .taskbar, html[data-hw="storybook"] .taskbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* arcade details */
html[data-hw="arcade"] .win { border: 3px solid #ff3fa4 !important; border-radius: 10px; }
html[data-hw="arcade"] .win .bar, html[data-hw="arcade"] .win header { border-bottom: 2px solid #35d2ff; }
html[data-hw="arcade"] .win b, html[data-hw="arcade"] .win h1, html[data-hw="arcade"] .win h2 { font-family: var(--serif); letter-spacing: .04em; color: #ffe94a; }
html[data-hw="arcade"] .win h1 { text-shadow: 0 0 12px #ff3fa488; }
html[data-hw="arcade"] .m.rune, html[data-hw="arcade"] .m.fail { border: 2px solid #35d2ff; border-radius: 6px; background: #1d1050; }
html[data-hw="arcade"] .m.you { border: 2px solid #ffd0ec; border-radius: 6px; background: #ff3fa4; color: #1a0630; }
html[data-hw="arcade"] button, html[data-hw="arcade"] .btn, html[data-hw="arcade"] .start { font-weight: 700; }
html[data-hw="arcade"] .start, html[data-hw="arcade"] #go { background: #ffe94a !important; color: #1a0630 !important; border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 0 18px #ffe94a66; }
html[data-hw="arcade"] input, html[data-hw="arcade"] textarea { background: #0b0620 !important; color: #f4eeff !important; border: 2px solid #35d2ff !important; border-radius: 6px !important; }
html[data-hw="arcade"] .taskbar { background: #0e0826f2 !important; border: 2px solid #35d2ff !important; border-radius: 8px; }
html[data-hw="arcade"] .looks button { background: #1a0d3d !important; color: #f4eeff !important; border: 2px solid #35d2ff !important; border-radius: 6px !important; }
html[data-hw="arcade"] .looks button[aria-pressed="true"], html[data-hw="arcade"] .looks button:hover { border-color: #ffe94a !important; }
html[data-hw="arcade"] .pill { color: #ffe94a; border-color: #ffe94a66; background: transparent; }
html[data-hw="arcade"] .test-banner { background: #3b0f2e; color: #ffd0ec; }
html[data-hw="arcade"] a { color: #35d2ff; }
#hwswitch button[data-l="off"] { opacity: .8; }
html[data-hw="arcade"] .pubfoot, html[data-hw="arcade"] .pubfoot a { color: #cdbdff; }

/* cozy details */
html[data-hw="cozy"] .win { border: 0 !important; border-radius: 26px; }
html[data-hw="cozy"] .m.rune { background: #fffaf0; border: 1px solid #ecd2a8; border-radius: 20px; }
html[data-hw="cozy"] .m.you { background: #c9757d; color: #fff6ea; border-radius: 20px; }
html[data-hw="cozy"] .start, html[data-hw="cozy"] #go { background: #8a4b52 !important; color: #fff3e1 !important; border-radius: 22px; }
html[data-hw="cozy"] input, html[data-hw="cozy"] textarea { background: #fffaf0 !important; color: #3f2b27 !important; border: 1px solid #e2c493 !important; border-radius: 22px !important; }
html[data-hw="cozy"] .taskbar { background: #fff3e1f2 !important; border: 0 !important; }
html[data-hw="cozy"] .looks button { background: #f6dcb4 !important; color: #3f2b27 !important; border: 1px solid #e2c493 !important; }
html[data-hw="cozy"] .pubfoot, html[data-hw="cozy"] .pubfoot a { color: #f7e9d6; }

/* storybook details */
html[data-hw="storybook"] .win { border: 3px double #2b2118 !important; border-radius: 4px 14px 6px 12px; }
html[data-hw="storybook"] .m.rune { background: transparent; font-style: italic; border: 0; border-left: 3px solid #2b2118; border-radius: 0; }
html[data-hw="storybook"] .m.you { background: transparent; color: #7a1f2b; text-align: right; border: 0; border-right: 3px solid #7a1f2b; border-radius: 0; }
html[data-hw="storybook"] .start, html[data-hw="storybook"] #go { background: #7a1f2b !important; color: #f6ecd2 !important; border: 1.5px solid #2b2118 !important; border-radius: 3px 8px 4px 9px; }
html[data-hw="storybook"] input, html[data-hw="storybook"] textarea { background: #f6ecd2 !important; color: #2b2118 !important; border: 1.5px solid #2b2118 !important; border-radius: 3px 8px 4px 9px !important; }
html[data-hw="storybook"] .taskbar { background: #efe0bbf2 !important; border: 2px solid #2b2118 !important; }
html[data-hw="storybook"] .looks button { background: #efe0bb !important; color: #2b2118 !important; border: 1.5px solid #2b2118 !important; }
html[data-hw="storybook"] .pubfoot, html[data-hw="storybook"] .pubfoot a { color: #2b2118; }

/* ---------- decorations (built by decor.js) ---------- */
#hw { display: none; }
html[data-hw="arcade"] #hw, html[data-hw="cozy"] #hw, html[data-hw="storybook"] #hw { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#hw .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: var(--lk-ground); border-top: 3px solid var(--lk-line); }
#hw .fox { position: absolute; left: 0; bottom: 56px; width: clamp(240px, 22vw, 360px); aspect-ratio: 480 / 252; transform: translate3d(-110%, 0, 0); will-change: transform; z-index: 1; }
#hw .fox i { display: block; width: 100%; height: 100%; background: url(fox-sheet.webp) 0 0 / 1600% 100% no-repeat; }
#hw .fox.go { animation: fox-cross 8s linear forwards; }
#hw .fox.go i { animation: fox-legs .667s steps(16, jump-none) infinite; }
#hw .fox.paused, #hw .fox.paused i { animation-play-state: paused; }
@keyframes fox-cross { from { transform: translate3d(-110%, 0, 0); } to { transform: translate3d(calc(100vw + 10%), 0, 0); } }
@keyframes fox-legs { from { background-position: 0 0; } to { background-position: 100% 0; } }
@media (max-width: 700px) { #hw .fox { width: 58vw; bottom: 46px; } #hw .ground { height: 66px; } }

/* BOO signs */
#hw .boo { position: absolute; font: 900 var(--s, 34px)/1 var(--serif); color: var(--c); letter-spacing: .04em; transform: rotate(var(--r, 0deg)); white-space: nowrap; }
html[data-hw="arcade"] #hw .boo { text-shadow: 0 0 4px var(--c), 0 0 14px var(--c2, var(--c)), 0 0 34px var(--c2, var(--c)); }
#hw .boo.frame { padding: .18em .32em; border: .09em solid var(--c); border-radius: .22em; }
html[data-hw="arcade"] #hw .boo.frame { box-shadow: 0 0 14px var(--c2, var(--c)); }
#hw .boo.big { --s: 76px; --c: #ffe94a; --c2: #ff3fa4; --r: 6deg; bottom: 215px; right: 1.5vw; }
#hw .boo.a { --s: 38px; --c: #35d2ff; --r: -9deg; top: 34%; left: 3vw; }
#hw .boo.b { --s: 30px; --c: #ff3fa4; --r: 8deg; top: 58%; right: 3vw; }
#hw .boo.c { --s: 26px; --c: #ffe94a; --r: -6deg; top: 14%; left: 24vw; }
#hw .boo.d { --s: 24px; --c: #ff3fa4; --r: 12deg; bottom: 30%; left: 20vw; }
html[data-hw="cozy"] #hw .boo { --c: #f8dca0 !important; --c2: #f8dca0; font-family: Georgia, serif; font-style: italic; font-weight: 700; text-shadow: 0 0 20px #f6c87a66; }
html[data-hw="cozy"] #hw .boo.frame { border-color: #f8dca066; }
html[data-hw="storybook"] #hw .boo { --c: #7a1f2b !important; font-style: italic; text-shadow: 3px 3px 0 #2b211822; }
html[data-hw="storybook"] #hw .boo.frame { border-color: #7a1f2b; border-style: double; border-width: .12em; }
@media (max-width: 1100px) { #hw .boo.a, #hw .boo.b, #hw .boo.c, #hw .boo.d { display: none; } }
@media (max-width: 700px) { #hw .boo.big { --s: 40px; bottom: 120px; right: 8px; } }

/* Pumpkins: outlines drawn once as vector shapes (arcade), soft shapes (cozy), ink shapes (storybook). */
#hw .pk { position: absolute; width: var(--w, 140px); aspect-ratio: 1; overflow: visible; }
#hw .pk.p1 { --w: 190px; --p1: #ff3fa4; --p2: #ffe94a; --p3: #35d2ff; left: calc(50% - 560px); bottom: 56px; }
#hw .pk.p2 { --w: 130px; --p1: #35d2ff; --p2: #ff3fa4; --p3: #ffe94a; right: calc(50% - 560px); bottom: 56px; }
#hw .pk.p3 { --w: 96px; --p1: #ffe94a; --p2: #35d2ff; --p3: #ff3fa4; left: 3vw; top: 5vh; }
#hw .pk.p4 { --w: 150px; --p1: #ff3fa4; --p2: #35d2ff; --p3: #ffe94a; right: 2vw; bottom: 56px; }
@media (max-width: 1250px) { #hw .pk.p1 { left: 1vw; --w: 140px; } #hw .pk.p2 { display: none; } }
@media (max-width: 700px) { #hw .pk.p1 { display: none; } #hw .pk.p3 { --w: 64px; left: auto; right: 10px; top: 8px; } #hw .pk.p4 { --w: 86px; right: 6px; bottom: 46px; } }
.hwg, .hwl { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hwg { stroke-width: 11; opacity: .22; }
.hwl { stroke-width: 3.5; }
.hwb { stroke: var(--p1); } .hwf { stroke: var(--p2); } .hws { stroke: var(--p3); }
.hwbody { fill: none; stroke: none; }
html[data-hw="cozy"] .hwg { display: none; }
html[data-hw="cozy"] .hwbody { fill: #c9757d; }
html[data-hw="cozy"] .hwl.hwb { stroke: #8a4b52; } html[data-hw="cozy"] .hwl.hwf { stroke: #fff3d6; stroke-width: 5; } html[data-hw="cozy"] .hwl.hws { stroke: #7d9a62; }
html[data-hw="storybook"] .hwg { display: none; }
html[data-hw="storybook"] .hwbody { fill: #ead7aa; }
html[data-hw="storybook"] .hwl { stroke: #2b2118 !important; stroke-width: 3; }
html[data-hw="cozy"] #hw .pk, html[data-hw="storybook"] #hw .pk { --p1: #8a4b52; }

/* the Halloween Rune logo */
#hwlogo { display: none; }
html[data-hw="arcade"] #hwlogo, html[data-hw="cozy"] #hwlogo, html[data-hw="storybook"] #hwlogo { display: flex; align-items: center; gap: 10px; position: fixed; z-index: 6; top: 4px; left: 50%; transform: translateX(-50%); pointer-events: none; white-space: nowrap; }
#hwlogo svg { width: 30px; height: 30px; overflow: visible; }
#hwlogo span { font: 900 19px/1 var(--serif); letter-spacing: .08em; text-transform: uppercase; }
html[data-hw="arcade"] #hwlogo { padding: 3px 14px; border: 3px solid #ffe94a; border-radius: 10px; background: #0b0620cc; box-shadow: 0 0 14px #ff3fa4, inset 0 0 12px #ff3fa433; }
html[data-hw="arcade"] #hwlogo span { color: #ffe94a; text-shadow: 0 0 4px #ffe94a, 0 0 16px #ff3fa4, 0 0 30px #ff3fa4; }
html[data-hw="cozy"] #hwlogo { padding: 8px 20px; border-radius: 26px; background: #fff3e1; box-shadow: 0 0 40px #f6c87a66; }
html[data-hw="cozy"] #hwlogo span { color: #8a4b52; text-transform: none; font-style: italic; letter-spacing: .02em; }
html[data-hw="storybook"] #hwlogo { padding: 6px 18px; border: 3px double #2b2118; background: #f6ecd2; box-shadow: 4px 5px 0 #2b211833; border-radius: 3px 8px 4px 9px; }
html[data-hw="storybook"] #hwlogo span { color: #7a1f2b; text-transform: none; font-style: italic; letter-spacing: .02em; }
@media (max-width: 700px) { #hwlogo { top: 4px; gap: 6px; } #hwlogo span { font-size: 12px; } #hwlogo svg { width: 20px; height: 20px; } html[data-hw] #hwlogo { padding: 3px 9px; border-width: 2px; } }

/* look switcher (preview only) */
#hwswitch { position: fixed; z-index: 8; right: 10px; bottom: 8px; display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: #000a; font: 13px/1 system-ui, sans-serif; }
#hwswitch button { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 999px; color: #fff; }
#hwswitch button[aria-pressed="true"] { background: #fff; color: #111; }

/* BOO! pops (transform and opacity only) */
.hwpop { position: fixed; z-index: 20; pointer-events: none; font: 900 34px/1 var(--serif); color: #ffe94a; text-shadow: 0 0 4px #ffe94a, 0 0 16px #ff3fa4, 0 0 34px #ff3fa4; animation: hwpop 1.1s ease-out forwards; }
html[data-hw="cozy"] .hwpop { color: #f8dca0; text-shadow: 0 0 18px #f6c87a; font-style: italic; }
html[data-hw="storybook"] .hwpop { color: #7a1f2b; text-shadow: 3px 3px 0 #2b211833; font-style: italic; }
@keyframes hwpop { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4) rotate(-8deg); } 20% { opacity: 1; transform: translate(-50%, -14px) scale(1.25) rotate(-8deg); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .hwpop { display: none; } }
@media (max-width: 700px) {
  #hwswitch { bottom: auto; top: 72px; right: 6px; gap: 2px; padding: 3px; font-size: 11px; } #hwswitch button { padding: 5px 8px; }
  /* In the member app the pill sat on top of the Menu panel (hiding Advanced) and the first message; the Looks panel lists every Halloween look and Normal, so the pill steps away there. */
  body:has(#looksBtn) #hwswitch { display: none; }
}

/* Halloween cards in the member site's Looks panel: little pictures wearing each Halloween look's colours. */
.lc-frame[data-hwcard="arcade"] { --bg: #0b0620; --glass: #0e0826; --line: #35d2ff; --text: #f4eeff; --accent-2: #ff3fa4; --bubble: #1d1050; --you-text: #1a0630; --field: #0b0620; }
.lc-frame[data-hwcard="cozy"] { --bg: #2a1a22; --glass: #fff3e1; --line: #e2c493; --text: #3f2b27; --accent-2: #6e3540; --bubble: #fffaf0; --you-text: #fff6ea; --field: #fffaf0; }
.lc-frame[data-hwcard="storybook"] { --bg: #d9c7a0; --glass: #f6ecd2; --line: #2b2118; --text: #2b2118; --accent-2: #5e1520; --bubble: #efe0bb; --you-text: #f6ecd2; --field: #f6ecd2; }