/* Voodookoo: one self-hosted font, a flat dusk palette and a hairline grid. Dark is the default:
   game.js sets data-theme to dark or light, and removes it for "match phone" so the media query decides. */
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --bg: #e8e3ee; --text: #1d1426; --muted: #574d65; --faint: #857b91; --surface: #f4f1f7; --tile: #ddd6e5;
  --line: #c9c0d3; --line-box: #7c6e91; --tint: rgba(90, 50, 130, .08); --sel: rgba(226, 112, 15, .24);
  --accent: #d9650c; --on-accent: #ffffff; --clash: #d7263d; --web: rgba(255, 255, 255, .7); --web-edge: rgba(40, 20, 60, .28);
  --scrim: rgba(232, 227, 238, .55); --shadow: rgba(10, 5, 20, .18);
  --stem: #4f7a28; --band: #f2b705;
  --s1: #e46c0a; --s2: #8a94ab; --s3: #3453a6; --s4: #26262b; --s5: #b29f70;
  --s6: #8a3fc0; --s7: #3a9637; --s8: #e0a800; --s9: #df3f88;
  color-scheme: light;

  /* One size for everything: a square of the grid is the larger it can be while nine fit across the screen and
     the whole game (about 18.6 squares tall, with Share and Buy me a coffee? under the tools) fits down it. Text, buttons and bars are all measured in squares. */
  --gut: 8px;
  --vh: 1vh;
  --room-w: calc(100vw - 2 * var(--gut) - env(safe-area-inset-left) - env(safe-area-inset-right));
  --room-h: calc(100 * var(--vh) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  --cell: max(26px, min(var(--room-w) / 9, var(--room-h) / 18.6));
  --board: calc(var(--cell) * 9);
  --sym: calc(var(--cell) * .76);
  --kgap: calc(var(--cell) * .06);
  --key: calc((var(--board) - 8 * var(--kgap)) / 9);
  --text-size: max(14px, calc(var(--cell) * .37));
}
@supports (height: 100dvh) { :root { --vh: 1dvh; } }
:root[data-theme="dark"] {
  --bg: #110c16; --text: #ede6f3; --muted: #aba1b8; --faint: #776d84; --surface: #1d1625; --tile: #1c1623;
  --line: rgba(255, 255, 255, .11); --line-box: rgba(255, 255, 255, .4); --tint: rgba(255, 255, 255, .06); --sel: rgba(255, 138, 42, .28);
  --accent: #ff8a2a; --on-accent: #1a1020; --clash: #ff5a6e; --web: rgba(240, 232, 248, .62); --web-edge: rgba(0, 0, 0, .32);
  --scrim: rgba(17, 12, 22, .55); --shadow: rgba(0, 0, 0, .45); --stem: #6aa43a;
  --s1: #f47f1e; --s2: #e4e8f1; --s3: #7493ea; --s4: #c7c7d1; --s5: #e3d6b0;
  --s6: #b67ae8; --s7: #5cc457; --s8: #f6c400; --s9: #f2649f;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #110c16; --text: #ede6f3; --muted: #aba1b8; --faint: #776d84; --surface: #1d1625; --tile: #1c1623;
    --line: rgba(255, 255, 255, .11); --line-box: rgba(255, 255, 255, .4); --tint: rgba(255, 255, 255, .06); --sel: rgba(255, 138, 42, .28);
    --accent: #ff8a2a; --on-accent: #1a1020; --clash: #ff5a6e; --web: rgba(240, 232, 248, .62); --web-edge: rgba(0, 0, 0, .32);
    --scrim: rgba(17, 12, 22, .55); --shadow: rgba(0, 0, 0, .45); --stem: #6aa43a;
    --s1: #f47f1e; --s2: #e4e8f1; --s3: #7493ea; --s4: #c7c7d1; --s5: #e3d6b0;
    --s6: #b67ae8; --s7: #5cc457; --s8: #f6c400; --s9: #f2649f;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  /* Keep clear of the phone's status bar, notch and home indicator. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  touch-action: manipulation; background: var(--bg); color: var(--text);
  font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif; font-weight: 400;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- charms and icons ---------- */
.sym { display: block; width: 100%; height: 100%; }
.s1 { color: var(--s1); } .s2 { color: var(--s2); } .s3 { color: var(--s3); }
.s4 { color: var(--s4); } .s5 { color: var(--s5); } .s6 { color: var(--s6); }
.s7 { color: var(--s7); } .s8 { color: var(--s8); } .s9 { color: var(--s9); }
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the game view: title bar and status as wide as the grid ---------- */
.game-view { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.game-view > .bar, .game-view > .status, .game-view > .foot { flex: none; }
.bar { display: flex; align-items: center; width: var(--board); height: calc(var(--cell) * 1.3); margin: 0 auto; padding-top: calc(var(--cell) * .25); }
.logo { flex: 1; font-weight: 370; font-size: calc(var(--cell) * .72); letter-spacing: .4px; line-height: 1; color: inherit; text-decoration: none; }
.icon-btn { width: calc(var(--cell) * .95); height: calc(var(--cell) * .95); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.icon-btn .ico { width: calc(var(--cell) * .5); height: calc(var(--cell) * .5); }
.bar .icon-btn:last-child { margin-right: calc(var(--cell) * -.2); }
.icon-btn:hover { color: var(--text); }
.status { display: flex; justify-content: space-between; align-items: center; width: var(--board); height: calc(var(--cell) * .8); margin: calc(var(--cell) * .15) auto calc(var(--cell) * .25); }
.timebox { display: inline-flex; align-items: center; gap: calc(var(--cell) * .16); }
.clock { min-width: calc(var(--cell) * 1.1); font-variant-numeric: tabular-nums; font-weight: 500; font-size: calc(var(--cell) * .44); }
.pause { display: inline-flex; align-items: center; gap: calc(var(--cell) * .08); padding: calc(var(--cell) * .08) calc(var(--cell) * .28) calc(var(--cell) * .08) calc(var(--cell) * .2);
  border: 1px solid var(--line-box); border-radius: 999px; background: transparent; font-size: max(12px, calc(var(--cell) * .34)); cursor: pointer; }
.pause .ico { width: calc(var(--cell) * .3); height: calc(var(--cell) * .3); stroke-width: 2.2; }
.pause:disabled { opacity: .4; cursor: default; }
.curses { display: inline-flex; gap: calc(var(--cell) * .1); --cut: var(--bg); }
.curses span { width: calc(var(--cell) * .48); height: calc(var(--cell) * .48); color: var(--faint); opacity: .45; }
.curses .tomb { display: block; width: 100%; height: 100%; }
.curses span.on { color: var(--accent); opacity: 1; }

/* ---------- grid: hairlines, no frame, two stronger lines each way between the patches ---------- */
.play { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.board-wrap { position: relative; flex: none; display: grid; place-items: center; width: 100%; }
.board { display: grid; grid-template-columns: repeat(9, var(--cell)); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.cell {
  --cut: var(--bg); position: relative; width: var(--cell); height: var(--cell); padding: calc(var(--cell) * .12 - .5px);
  display: grid; place-items: center; cursor: pointer;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cell.c8 { border-right-color: transparent; }
.cell.r8 { border-bottom-color: transparent; }
.cell.c2, .cell.c5 { border-right: 1.5px solid var(--line-box); }
.cell.r2, .cell.r5 { border-bottom: 1.5px solid var(--line-box); }
.cell.peer { background: var(--tint); }
.cell.cell.sel { background: var(--sel); }
.cell.clash::after, .cell.wrong::after { content: ""; position: absolute; inset: 2px; border: 1.5px dashed var(--clash); border-radius: 5px; pointer-events: none; }
.cell.wrong::after { border-style: solid; }
.cell.reveal .sym { opacity: .45; }
.cell .sym.pop { animation: pop .18s ease-out; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: calc(100% + var(--cell) * .12); height: calc(100% + var(--cell) * .12); margin: calc(var(--cell) * -.06); }
.notes span { display: grid; place-items: center; min-width: 0; min-height: 0; }
.board.shake { animation: boardshake .5s ease; }

/* ---------- charms tray and tools ---------- */
.tray { flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(var(--cell) * .3); width: var(--board); margin-top: calc(var(--cell) * .4); }
/* A charm is the same size on its button as in a square. */
.keys { display: flex; justify-content: center; gap: var(--kgap); }
.key {
  --cut: var(--tile); position: relative; width: var(--key); height: calc(var(--sym) + var(--cell) * .36); padding: 0;
  border: 0; border-radius: calc(var(--cell) * .2); background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; cursor: pointer;
}
.key .sym { width: var(--sym); height: var(--sym); }
.key:active:not(:disabled) { transform: scale(.94); }
.key:disabled { opacity: .5; cursor: default; }
.key { overflow: hidden; }
.key .web { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.key .web .edge { stroke: var(--web-edge); stroke-width: .8; }
.key .web .strand { stroke: var(--web); stroke-width: .38; }
.tools { display: flex; justify-content: space-between; width: 100%; }
.tool { display: flex; flex-direction: column; align-items: center; gap: calc(var(--cell) * .06); padding: calc(var(--cell) * .08) calc(var(--cell) * .12); border: 0; background: transparent; color: var(--muted); font-size: max(11px, calc(var(--cell) * .3)); cursor: pointer; }
.tool .ico { width: calc(var(--cell) * .52); height: calc(var(--cell) * .52); }
.tool:hover:not(:disabled) { color: var(--text); }
.tool:disabled { opacity: .4; cursor: default; }
.tool[aria-pressed="true"] { color: var(--accent); }
.foot { padding: calc(var(--cell) * .22) 16px; text-align: center; font-size: max(12.5px, calc(var(--cell) * .3)); letter-spacing: .3px; color: var(--faint); }
.foot a { color: var(--muted); text-decoration: none; }

/* ---------- covers: Ready? before the first move, Sleeping while paused ---------- */
.gen { position: absolute; inset: 0; z-index: 20; display: none; place-items: center; background: var(--bg); color: var(--muted); font-size: var(--text-size); }
.gen.on { display: grid; }
.paused-cover { position: absolute; inset: 0; z-index: 25; display: none; place-items: center; text-align: center; padding: 0 calc(var(--cell) * .3); }
.play.paused .paused-cover { display: grid; }
.play.paused .board, .play.paused .tray { filter: blur(12px); opacity: .5; pointer-events: none; }
.paused-cover h2 { margin: 0 0 calc(var(--cell) * .18); font-weight: 400; font-size: calc(var(--cell) * .8); }
.paused-cover p { margin: 0 0 calc(var(--cell) * .4); color: var(--muted); font-size: var(--text-size); }
.paused-cover p:empty { display: none; }
.start { font-size: calc(var(--cell) * .4); padding: calc(var(--cell) * .25) calc(var(--cell) * .7); }

/* ---------- toast, cards and buttons ---------- */
.toast {
  position: fixed; left: 50%; top: 84px; z-index: 80; transform: translateX(-50%); padding: 10px 18px; border-radius: 10px;
  background: var(--text); color: var(--bg); font-size: 14.5px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.on { opacity: 1; }
.modal { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; padding: 16px; background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal.on { display: grid; }
.card {
  width: 100%; max-width: 380px; height: 218px; padding: 16px 18px; border-radius: 18px; background: var(--surface);
  box-shadow: 0 10px 34px var(--shadow), 0 0 0 1px var(--line); text-align: center; display: flex; flex-direction: column; justify-content: center;
}
.card.auto { height: auto; }
/* The result card keeps its top where the tombstone and owl expect it, and grows downwards when its buttons need more rows. */
#resultModal { place-items: start center; padding-top: max(16px, calc(50vh - 109px)); padding-top: max(16px, calc(50dvh - 109px)); overflow-y: auto; }
#resultModal .card { height: auto; min-height: 218px; }
.card h2 { margin: 0 0 4px; font-weight: 400; font-size: 27px; }
.card p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border: 1px solid var(--line-box);
  border-radius: 999px; background: transparent; color: var(--text); font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn .ico { width: 17px; height: 17px; stroke-width: 1.8; }

/* ---------- settings, help and feedback: in place of the puzzle, under the title bar, as wide as the grid ---------- */
.sheet { display: none; flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; }
.sheet.on { display: flex; }
.game-view.sheet-open > .status, .game-view.sheet-open > .play, .game-view.sheet-open > .foot { display: none; }
.sheet-in { flex: 1 0 auto; width: var(--board); margin: 0 auto; padding-top: calc(var(--cell) * .1); display: flex; flex-direction: column; font-size: var(--text-size); }
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: .25em; padding: .5em 0 0; border: 0; background: transparent; color: var(--muted); font-size: .92em; cursor: pointer; }
.back .ico { width: 1em; height: 1em; }
.sheet h2 { margin: .2em 0 .4em; font-weight: 400; font-size: 1.75em; }
.help.first .back { visibility: hidden; }
.play-now { display: flex; justify-content: center; margin: .8em 0 .3em; }
.coffee-btn { flex: none; align-self: center; margin: auto 0 0; text-decoration: none; }
.ver + .coffee-btn { margin-top: .9em; }
.sheet .share-btn { flex: none; align-self: center; margin: auto 0 0; }
.ver + .share-btn { margin-top: .9em; }
.share-btn + .coffee-btn { margin-top: calc(var(--cell) * .3); }
.play > .share-btn { flex: none; align-self: center; margin: auto 0 0; }
.play > .coffee-btn { margin: auto 0 calc(var(--cell) * .15); }
.play > .share-btn + .coffee-btn { margin-top: calc(var(--cell) * .3); }
.row { display: flex; align-items: center; gap: .9em; padding: .8em 0; border-top: 1px solid var(--line); }
.row > div { flex: 1; min-width: 0; }
.row strong { display: block; font-weight: 500; font-size: 1em; }
.row small { display: block; margin-top: .15em; color: var(--muted); font-size: .84em; line-height: 1.4; }
.row .icon-btn { width: 2.4em; height: 2.4em; }
.row .icon-btn .ico { width: 1.25em; height: 1.25em; }
.switch { flex: none; position: relative; width: 2.6em; height: 1.6em; padding: 0; border: 0; border-radius: 999px; background: var(--line-box); cursor: pointer; }
.switch i { position: absolute; left: .19em; top: .19em; width: 1.22em; height: 1.22em; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] i { transform: translateX(1em); }
.seg { display: flex; width: 100%; margin-top: .5em; padding: 2px; border: 1px solid var(--line-box); border-radius: 999px; }
.seg button { flex: 1; padding: .4em .25em; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .88em; white-space: nowrap; cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--text); color: var(--bg); }
.note { margin: 0 0 .6em; color: var(--muted); font-size: .84em; }
.note:empty { display: none; }
.row small.fine { font-size: .8em; }
.ver { margin: auto 0 0; padding-top: 1em; text-align: center; color: var(--faint); font-size: .8em; }
.help .lead { margin: 0 0 .6em; font-weight: 500; font-size: 1.06em; }
.legend { display: flex; justify-content: space-between; margin: .1em 0 .7em; --cut: var(--bg); }
.legend .sym { width: 1.8em; height: 1.8em; flex: none; }
.help ul { margin: 0; padding: 0 0 0 1.1em; list-style: disc; color: var(--muted); line-height: 1.38; }
.help li { font-weight: 300; font-size: 1.04em; }
.help li + li { margin-top: .55em; }
.guide-link { margin: .9em 0 0; text-align: center; font-size: .95em; }
.guide-link a { color: var(--accent); }
.help b { font-weight: 500; color: var(--text); }
.sheet .foot { margin-top: .4em; }
.form label { display: block; margin: 0 0 .9em; font-weight: 500; }
.form label.msg { margin-bottom: .35em; }
.form label span { font-weight: 400; color: var(--muted); font-size: .84em; }
.form input, .form textarea { display: block; width: 100%; margin-top: .4em; padding: .6em .75em; border: 1px solid var(--line-box); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-weight: 400; }
.form textarea { resize: vertical; min-height: 7.5em; }
.form .hint { margin: 0 0 .3em; color: var(--muted); font-size: .8em; }
.form .hint.stripped { color: var(--clash); }
.form .hint:empty { display: none; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .note { margin-top: .6em; }
.form .btn { margin-top: .4em; font-size: .94em; }

/* ---------- home ---------- */
html.scroll, html.scroll body { height: auto; min-height: 100%; overflow: auto; }
.home-view { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.home { position: relative; z-index: 1; width: var(--board); max-width: 100%; margin: auto; padding: 0 0 var(--cell); display: flex; flex-direction: column; align-items: center; text-align: center; }
.home .logo { flex: none; margin: 0; font-size: calc(var(--cell) * 1.45); }
.home .tag { margin: calc(var(--cell) * .25) 0 0; color: var(--muted); font-size: calc(var(--cell) * .42); }
.parade { display: flex; justify-content: center; gap: calc(var(--cell) * .1); margin-top: var(--cell); --cut: var(--bg); }
.parade .sym { width: calc(var(--cell) * .82); height: calc(var(--cell) * .82); }
.choose { margin: calc(var(--cell) * 1.25) 0 0; color: var(--muted); font-size: calc(var(--cell) * .4); }
.run { margin-top: calc(var(--cell) * .55); color: var(--muted); font-size: max(12px, calc(var(--cell) * .34)); }
.dots { display: flex; justify-content: center; gap: calc(var(--cell) * .16); }
.dots i { width: calc(var(--cell) * .22); height: calc(var(--cell) * .22); border-radius: 50%; background: var(--line-box); opacity: .5; }
.dots i.on { background: var(--accent); opacity: 1; }
.run-label { margin-bottom: calc(var(--cell) * .2); }
.levels { display: flex; flex-direction: column; align-items: center; gap: calc(var(--cell) * .3); margin-top: calc(var(--cell) * .3); }
/* One size for the big buttons: the levels, Play offline, Share, Buy me a coffee and Play now on How it works. */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .4em; width: calc(var(--cell) * 5.4); padding: calc(var(--cell) * .22) 0;
  border: 1.5px solid var(--line-box); border-radius: 999px; background: transparent; color: var(--text); font-size: calc(var(--cell) * .44); font-weight: 400; line-height: 1.2; cursor: pointer; }
.btn.primary.pill { border-color: var(--accent); color: var(--on-accent); font-weight: 500; }
.pill .ico { width: 1em; height: 1em; stroke-width: 1.7; }
.level strong { font-weight: 500; }
.levels { --cut: var(--bg); }
.level .lvl { width: 1.9em; height: 1.9em; flex: none; margin: -.45em 0; }
.lvl-trick { color: var(--s6); }
.lvl-treat { color: var(--accent); }
.lvl-terror { color: var(--clash); }
.level:hover { border-color: var(--accent); }
.install { flex: none; margin: calc(var(--cell) * .6) auto calc(var(--cell) * .3); }
.home-share { flex: none; margin: 0 auto calc(var(--cell) * .3); }
.install[hidden] + .home-share { margin-top: calc(var(--cell) * .6); }
.home-view .home-coffee { margin: 0 auto calc(var(--cell) * .15); }
.install .ico { width: 1em; height: 1em; }

/* ---------- portrait only: a phone on its side is asked to turn back ---------- */
.rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .rotate { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; background: var(--bg); color: var(--text); text-align: center; }
  .rotate .ico { width: 56px; height: 56px; margin: 0 auto 12px; display: block; color: var(--accent); stroke-width: 1.3; }
  .rotate h2 { margin: 0 0 6px; font-weight: 400; font-size: 26px; }
  .rotate p { margin: 0; color: var(--muted); font-size: 17px; }
}

@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes boardshake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .board.shake, .cell .sym.pop { animation: none; } }
@media (display-mode: standalone) { body, .game-view { padding-top: calc(env(safe-area-inset-top) + 8px); } }

/* ---------- effects ---------- */
:root {
  --fx-top: #4b3a63; --fx-bot: #2a1c3b; --fx-glow: rgba(60, 30, 90, .25); --moon-top: #f3ead6; --moon-bot: #cdbf9f;
  --bat-top: #5a3a24; --bat-bot: #2a180c; --bat-rim: rgba(170, 125, 85, .75); --bat-eye: #ff7a1a; --bat-glow: rgba(0, 0, 0, .35);
}
:root[data-theme="dark"] {
  --fx-top: #e6ddf1; --fx-bot: #9d8db5; --fx-glow: rgba(220, 205, 245, .28); --moon-top: #efe6d2; --moon-bot: #bfb08f;
  --bat-top: #6a4529; --bat-bot: #2e1a0c; --bat-rim: rgba(250, 222, 190, .95); --bat-eye: #ff8a2a; --bat-glow: rgba(255, 196, 140, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fx-top: #e6ddf1; --fx-bot: #9d8db5; --fx-glow: rgba(220, 205, 245, .28); --moon-top: #efe6d2; --moon-bot: #bfb08f;
    --bat-top: #6a4529; --bat-bot: #2e1a0c; --bat-rim: rgba(250, 222, 190, .95); --bat-eye: #ff8a2a; --bat-glow: rgba(255, 196, 140, .45);
  }
}
.fx { position: fixed; inset: 0; z-index: 72; pointer-events: none; overflow: hidden; }
.fx svg { display: block; width: 100%; height: auto; }
.fx-bat { position: absolute; left: 0; top: 0; filter: drop-shadow(0 0 4px var(--bat-glow)); }
.fx-hover { display: block; }
.fx-bat svg { transform-origin: 50% 40%; }
.owl-eyes { transform-box: fill-box; transform-origin: 50% 0; }
.fx-moon { position: absolute; left: 50%; top: max(8px, calc(50% - 273px)); width: 156px; margin-left: -78px; opacity: .94; filter: drop-shadow(0 0 22px rgba(240, 225, 190, .35)); }
.fx-owl { position: absolute; left: 50%; top: max(16px, calc(50% - 265px)); width: 240px; margin-left: -120px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.fx-tomb { position: absolute; left: 50%; top: max(8px, calc(50% - 251px)); width: 112px; margin-left: -56px; filter: drop-shadow(0 0 6px var(--fx-glow)); }
.fx-wisp { position: absolute; left: 0; top: 0; width: 104px; filter: drop-shadow(0 0 6px var(--fx-glow)); }