/* Creature companions: a fixed layer above the page that never takes clicks. */
.wc-layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; overflow: visible; }
:is(.wc-layer, .b-pic) .k { stroke: #24160d; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .ln { fill: none; stroke: #24160d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(.wc-layer, .b-pic) .lnt { fill: none; stroke: #24160d; stroke-width: 1.1; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .sp { fill: none; stroke: #d9a441; stroke-width: 1.3; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .sp-r { fill: none; stroke: #c4452e; stroke-width: 1.2; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .in { fill: none; stroke: #f0e3c4; stroke-width: 1.1; stroke-linecap: round; opacity: 0.85; }
:is(.wc-layer, .b-pic) .dot { fill: #c4452e; }
:is(.wc-layer, .b-pic) .eye { fill: #1a120c; }
:is(.wc-layer, .b-pic) .hl { fill: #f6ecd2; }
:is(.wc-layer, .b-pic) .f-hart { fill: #a5552b; }
:is(.wc-layer, .b-pic) .f-hart-far { fill: #7e3f20; }
:is(.wc-layer, .b-pic) .f-boar { fill: #6a4b33; }
:is(.wc-layer, .b-pic) .f-boar-far { fill: #4c3524; }
:is(.wc-layer, .b-pic) .f-bristle { fill: #2c1f16; }
:is(.wc-layer, .b-pic) .f-ivory { fill: #efe3c8; }
:is(.wc-layer, .b-pic) .f-raven { fill: #1f2230; }
:is(.wc-layer, .b-pic) .f-raven-far { fill: #14161f; }
:is(.wc-layer, .b-pic) .f-beak { fill: #3a3a3e; }
:is(.wc-layer, .b-pic) .f-drake { fill: #5f7a33; }
:is(.wc-layer, .b-pic) .f-drake-far { fill: #455a24; }
:is(.wc-layer, .b-pic) .f-belly { fill: #d6b45a; }
:is(.wc-layer, .b-pic) .f-wing { fill: #8e3a26; }
:is(.wc-layer, .b-pic) .f-wing-far { fill: #6b2a1b; }
:is(.wc-layer, .b-pic) .f-hoof { fill: #2a1d14; }
:is(.wc-layer, .b-pic) .ant-k { fill: none; stroke: #24160d; stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; }
:is(.wc-layer, .b-pic) .ant { fill: none; stroke: #d9a441; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:is(.wc-layer, .b-pic) .ant-far { fill: none; stroke: #9c7128; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:is(.wc-layer, .b-pic) .tusk-k { fill: none; stroke: #24160d; stroke-width: 4.2; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .tusk { fill: none; stroke: #efe3c8; stroke-width: 2.2; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .f-whale { fill: #51657a; }
:is(.wc-layer, .b-pic) .f-whale-far { fill: #3c4c5c; }
:is(.wc-layer, .b-pic) .f-swan { fill: #f3ecdb; }
:is(.wc-layer, .b-pic) .f-swan-far { fill: #d6ccb6; }
:is(.wc-layer, .b-pic) .f-beak-o { fill: #d9822b; }
:is(.wc-layer, .b-pic) .f-nicor { fill: #3f6b66; }
:is(.wc-layer, .b-pic) .f-fin { fill: #9a3b26; }
:is(.wc-layer, .b-pic) .teeth { fill: none; stroke: #f3ecdb; stroke-width: 1.1; stroke-linejoin: miter; }
:is(.wc-layer, .b-pic) .f-horse { fill: #c39a52; }
:is(.wc-layer, .b-pic) .f-horse-shade { fill: #9c7840; }
:is(.wc-layer, .b-pic) .f-horse-far { fill: #a9843f; }
:is(.wc-layer, .b-pic) .f-horse-far-shade { fill: #84652f; }
:is(.wc-layer, .b-pic) .f-mane { fill: #3a2a1c; }
:is(.wc-layer, .b-pic) .f-eagle { fill: #6a4a2a; }
:is(.wc-layer, .b-pic) .f-eagle-far { fill: #4f361e; }
:is(.wc-layer, .b-pic) .f-eagle-head { fill: #c8973f; }
:is(.wc-layer, .b-pic) .f-beak-y { fill: #e0b33c; }
:is(.wc-layer, .b-pic) .claw { fill: none; stroke: #e0b33c; stroke-width: 2; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .f-wolf { fill: #77746c; }
:is(.wc-layer, .b-pic) .f-wolf-far { fill: #5a5852; }
:is(.wc-layer, .b-pic) .drop { fill: #b8d6e4; stroke: #3c5566; stroke-width: 0.5; }
:is(.wc-layer, .b-pic) .smoke { fill: #b9b0a2; }
:is(.wc-layer, .b-pic) .spark { fill: #f0a43a; }
:is(.wc-layer, .b-pic) .earth { fill: #7a5634; }
:is(.wc-layer, .b-pic) .burst { fill: #c4452e; }
:is(.wc-layer, .b-pic) .halo-v { flood-color: #f1e6cc; }
/* the word that wakes a creature */
.cr { border-radius: 3px; }
.cr.awake { animation: cr-wake 1.8s ease-out 1; }
@keyframes cr-wake {
  0% { background-color: rgba(212, 160, 60, 0); }
  20% { background-color: rgba(212, 160, 60, 0.55); box-shadow: 0 0 0.6em rgba(212, 160, 60, 0.6); }
  100% { background-color: rgba(212, 160, 60, 0); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .cr.awake { animation: none; background-color: rgba(212, 160, 60, 0.3); } }
/* sound toggle: off by default; shown only while a creature is about */
.wc-sound { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 41;
  width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--accent, #b08d57); background: var(--bg, #141311);
  color: var(--fg-soft, #b9b0a2); display: grid; place-items: center; cursor: pointer; }
.wc-sound.in-bar { position: static; width: 36px; height: 36px; border-color: var(--rule, #2d2a25); }
.wc-sound:hover { color: var(--fg, #efe8db); border-color: var(--accent, #b08d57); }
.wc-sound svg { width: 20px; height: 20px; }
.wc-sound .spk { fill: currentColor; }
.wc-sound .wav, .wc-sound .mute { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.wc-sound[aria-pressed="false"] .wav { display: none; }
.wc-sound[aria-pressed="true"] .mute { display: none; }
.wc-sound[aria-pressed="true"] { color: var(--accent, #b08d57); border-color: var(--accent, #b08d57); }
.wc-sound[hidden] { display: none; }

/* the bestiary in the Fitts panel: met creatures in colour, the others as a red-dotted outline */
.bestiary { margin: 0; }
.bestiary h3 { margin: 0 0 0.3rem; font-family: var(--display, Georgia, serif); font-weight: 400; font-size: 1.15rem; }
.bestiary .b-count { margin: 0 0 0.75rem; font-size: 0.86rem; color: var(--fg, #efe8db); }
.bestiary .b-note { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rule, #2d2a25); font-size: 0.82rem; line-height: 1.55; color: var(--fg-soft, #b9b0a2); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.b-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr)); gap: 0.7rem; }
.b-card { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.55rem 0.4rem 0.6rem; border: 1px solid var(--rule, #2d2a25); border-radius: 8px; text-align: center; }
.b-card .b-call { margin-top: auto; }
.b-pic { width: 100%; height: 4.6rem; flex: none; overflow: visible; }
.b-en { min-height: 2.1em; }
.b-oe { font-family: var(--display, Georgia, serif); font-size: 1rem; color: var(--fg, #efe8db); }
.b-en { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-soft, #b9b0a2); }
.b-card.unmet .b-pic * { fill: none !important; stroke: #c4452e !important; stroke-width: 1.6 !important; stroke-dasharray: 0.1 3.4; stroke-linecap: round; filter: none; }
.b-card.unmet .b-pic .dot, .b-card.unmet .b-pic .eye, .b-card.unmet .b-pic .hl { display: none; }
.b-card.unmet .b-oe { color: var(--fg-soft, #b9b0a2); }
.b-call, .b-forget { font: inherit; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  border: 1px solid var(--accent, #b08d57); border-radius: 999px; background: transparent; color: var(--fg, #efe8db); padding: 0.3rem 0.8rem; margin-top: 0.25rem; min-height: 32px; }
.b-call:hover, .b-forget:hover { background: var(--accent, #b08d57); color: var(--accent-ink, #141311); }
.b-forget { margin: 0; border-color: var(--rule, #2d2a25); color: var(--fg-soft, #b9b0a2); }
/* The Wonders of the East: the palette of the Vitellius pictures (tawny, brick and vermilion, blue-grey, the grey-brown
   of bare vellum, black), flat, with the creatures' dark outline */
:is(.wc-layer, .b-pic) .bleg { fill: none; stroke: #24160d; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
:is(.wc-layer, .b-pic) .f-hen { fill: #b8402a; }
:is(.wc-layer, .b-pic) .f-hen-far { fill: #8a2c1c; }
:is(.wc-layer, .b-pic) .f-comb { fill: #d9a441; }
:is(.wc-layer, .b-pic) .f-eight { fill: #c98a4b; }
:is(.wc-layer, .b-pic) .f-eight-far { fill: #9c6533; }
:is(.wc-layer, .b-pic) .gorgon { fill: #f6ecd2; stroke: #24160d; stroke-width: 1.2; }
:is(.wc-layer, .b-pic) .gorgon-i { fill: #24160d; }
:is(.wc-layer, .b-pic) .tongue-w { fill: none; stroke: #c4452e; stroke-width: 2; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .tongue { fill: none; stroke: #c4452e; stroke-width: 1.1; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .f-snake-a { fill: #8d9cab; }
:is(.wc-layer, .b-pic) .f-snake-b { fill: #c98a4b; }
:is(.wc-layer, .b-pic) .ring { fill: #b8402a; stroke: #24160d; stroke-width: 1.1; }
:is(.wc-layer, .b-pic) .lamp { fill: #fff3b0; }
:is(.wc-layer, .b-pic) .lamp-glow { fill: #f6c64a; opacity: 0.45; }
:is(.wc-layer, .b-pic) .f-hatch { fill: #cfc3a8; }
:is(.wc-layer, .b-pic) .f-hatch-far { fill: #ad9f84; }
:is(.wc-layer, .b-pic) .f-cloak { fill: #8d9cab; }
:is(.wc-layer, .b-pic) .f-tunic-r { fill: #a8442c; }
:is(.wc-layer, .b-pic) .f-hund { fill: #d9a07a; }
:is(.wc-layer, .b-pic) .arm-k { fill: none; stroke: #24160d; stroke-width: 5; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .arm-cloak { fill: none; stroke: #8d9cab; stroke-width: 3; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .arm-blem { fill: none; stroke: #9a958a; stroke-width: 3; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .arm-man { fill: none; stroke: #d8c3a0; stroke-width: 3; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .f-ant-red { fill: #c0552e; }
:is(.wc-layer, .b-pic) .f-ant-red-far { fill: #943f22; }
:is(.wc-layer, .b-pic) .f-ant-black { fill: #231a16; }
:is(.wc-layer, .b-pic) .fur { fill: none; stroke: #5a463a; stroke-width: 1; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .f-lert { fill: #c99a5c; }
:is(.wc-layer, .b-pic) .f-hair { fill: #9c6f3c; }
:is(.wc-layer, .b-pic) .spot { fill: #7a4e2a; }
:is(.wc-layer, .b-pic) .f-blem { fill: #9a958a; }
:is(.wc-layer, .b-pic) .f-blem-far { fill: #7b766c; }
:is(.wc-layer, .b-pic) .f-cloth { fill: #a8442c; }
:is(.wc-layer, .b-pic) .brow { fill: none; stroke: #c4452e; stroke-width: 1.5; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .mouth { fill: none; stroke: #a8442c; stroke-width: 1.8; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .f-drac-a { fill: #d0a76c; }
:is(.wc-layer, .b-pic) .f-drac-b { fill: #8d9cab; }
:is(.wc-layer, .b-pic) .f-ass { fill: #a39888; }
:is(.wc-layer, .b-pic) .f-ass-far { fill: #7f7568; }
:is(.wc-layer, .b-pic) .dapple { fill: #3d322b; opacity: 0.75; }
:is(.wc-layer, .b-pic) .f-man { fill: #d8c3a0; }
:is(.wc-layer, .b-pic) .f-hood { fill: #cfc3a8; }
:is(.wc-layer, .b-pic) .bangle { fill: none; stroke: #a8442c; stroke-width: 2.4; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .f-done { fill: #b9a68a; }
:is(.wc-layer, .b-pic) .f-done-far { fill: #978569; }
:is(.wc-layer, .b-pic) .f-milk { fill: #efe7d6; }
:is(.wc-layer, .b-pic) .f-milk-far { fill: #cfc4ae; }
:is(.wc-layer, .b-pic) .f-curl { fill: #b9a68a; }
:is(.wc-layer, .b-pic) .curl-d { fill: none; stroke: #24160d; stroke-width: 0.9; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .f-ear { fill: #e3d5bb; }
:is(.wc-layer, .b-pic) .f-ear-far { fill: #c7b797; }
:is(.wc-layer, .b-pic) .ear-in { fill: none; stroke: #b8402a; stroke-width: 1.2; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .f-cat { fill: #dcc192; }
:is(.wc-layer, .b-pic) .f-cat-far { fill: #b79c6c; }
:is(.wc-layer, .b-pic) .f-cat-mane { fill: #c98a4b; }
:is(.wc-layer, .b-pic) .tail-k { fill: none; stroke: #24160d; stroke-width: 4.6; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .tail-c { fill: none; stroke: #dcc192; stroke-width: 2.4; stroke-linecap: round; }
:is(.wc-layer, .b-pic) .flame { fill: #e2572b; }
:is(.wc-layer, .b-pic) .flame-y { fill: #f3b23c; }
:is(.wc-layer, .b-pic) .gold { fill: #e3b341; stroke: #7a5634; stroke-width: 0.5; }
/* the Bestiary's second book, and the notice when the tenth creature of Beowulf is met */
.bestiary .b-book { margin: 1.3rem 0 0.4rem; padding-top: 1rem; border-top: 1px solid var(--rule, #2d2a25); font-family: var(--display, Georgia, serif); font-weight: 400; font-size: 1.05rem; color: var(--fg, #efe8db); }
.bestiary .b-count a { color: var(--accent, #c9a45c); }
.wc-toast {
  position: fixed; left: 50%; bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.6rem; max-width: calc(100% - 2rem); padding: 0.7rem 0.7rem 0.7rem 1.1rem;
  border: 1px solid var(--accent, #c9a45c); border-radius: 12px; background: var(--bg, #141311); color: var(--fg, #efe8db);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-size: 0.86rem; line-height: 1.4; animation: wc-toast-in 0.4s ease-out;
}
.wc-toast p { margin: 0; }
.wc-toast a { color: var(--accent, #c9a45c); font-weight: 600; }
.wc-toast-x { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule, #2d2a25); background: transparent; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.wc-toast.out { opacity: 0; transition: opacity 0.8s ease; }
@keyframes wc-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .wc-toast { animation: none; } }
/* something new waits in the panel: a gold mark on its button */
.toc-btn.wc-news { position: relative; border-color: var(--accent, #c9a45c); }
.toc-btn.wc-news::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #c9a45c); box-shadow: 0 0 0 2px var(--bg, #141311); }
@media (prefers-reduced-motion: no-preference) { .toc-btn.wc-news::after { animation: wc-news 2.4s ease-in-out infinite; } }
@keyframes wc-news { 50% { transform: scale(1.35); } }
/* the way to the Wonders, after the ten cards */
.bestiary .b-open { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; margin: 1rem 0 0; padding: 0.8rem 1rem; border: 1px solid var(--accent, #c9a45c); border-radius: 10px; color: var(--fg, #efe8db); text-decoration: none; font-size: 0.9rem; background: color-mix(in srgb, var(--accent, #c9a45c) 10%, transparent); }
.bestiary .b-open:hover { background: color-mix(in srgb, var(--accent, #c9a45c) 20%, transparent); }
.bestiary .b-open-go { color: var(--accent, #c9a45c); font-weight: 600; white-space: nowrap; }
/* the notices: text, then what to do */
.wc-toast { align-items: flex-start; width: min(30rem, calc(100% - 2rem)); max-width: none; box-sizing: border-box; }
.wc-toast-do { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.55rem; }
.wc-toast { flex-wrap: wrap; }
.wc-toast p { flex: 1 1 0; min-width: 0; }
.wc-toast-do { order: 3; flex-basis: 100%; }
.wc-toast-go, .wc-toast-b { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--accent, #c9a45c); border-radius: 999px; background: transparent; color: var(--fg, #efe8db); font: inherit; font-size: 0.8rem; text-decoration: none; cursor: pointer; }
.wc-toast-go { background: color-mix(in srgb, var(--accent, #c9a45c) 22%, transparent); font-weight: 600; }
.wc-toast .wc-toast-x { order: 2; }
/* calls are waiting for a tap (a new page, or the audio stopped while the tab was away) */
.wc-sound.wc-wait { border-color: var(--accent, #c9a45c); color: var(--fg, #efe8db); }
@media (prefers-reduced-motion: no-preference) { .wc-sound.wc-wait { animation: wc-wait 1.8s ease-in-out infinite; } }
@keyframes wc-wait { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent, #c9a45c) 35%, transparent); } }