/* The Hollow (#75 M7): a map on the console's plastic — a generated land with paths, a stream and signs to click —
   and the places' pages: an NPC Vetti and their roshi, a line in a bubble, a shelf, a knot, a noticeboard. */
.ho-map { display: block; width: 100%; height: auto; margin: 0 0 12px; border: 3px solid #3a4470; border-radius: 8px; background: #0b1a12; box-shadow: inset 0 0 40px rgba(0, 0, 0, .6), 0 0 0 1px #05070e; }
.ho-land { fill: #2f6b3a; }
.ho-path { fill: none; stroke: #b99a5e; stroke-width: 14; stroke-linecap: round; opacity: .85; }
.ho-stream { fill: none; stroke: #3f8fb0; stroke-width: 16; stroke-linecap: round; opacity: .9; }
.ho-cob { fill: #8a7a5a; stroke: #6b5d44; stroke-width: 2; }
.ho-trunk { fill: #5a3d1e; } .ho-leaf { fill: #4f9a3f; stroke: #2e6a2a; stroke-width: 2; } .ho-knot { fill: #1e1208; }
.ho-wood { fill: #8a5a2b; stroke: #4a2e12; stroke-width: 1.5; } .ho-road { fill: none; stroke: #c9b48a; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 10 6; } .ho-sign-text { stroke: #f4f1e6; stroke-width: 1.5; } .ho-chalk { stroke: #f4f1e6; stroke-width: 2; fill: none; }
.ho-water { fill: #3f8fb0; stroke: #2a6a86; stroke-width: 2; } .ho-ripple { fill: none; stroke: #9fd6ea; stroke-width: 2; } .ho-rock { fill: #7a7f86; stroke: #4e5257; stroke-width: 1.5; }
.ho-roof { fill: #a33d2a; stroke: #5e2114; stroke-width: 1.5; } .ho-wall { fill: #e8d8b0; stroke: #8c7a52; stroke-width: 1.5; } .ho-door { fill: #4a2e12; } .ho-window { fill: #ffe28a; }
.ho-bottle { fill: #7ad1c0; stroke: #2a6a60; stroke-width: 1.5; } .ho-awning { fill: #e0e0e0; stroke: #888; stroke-width: 1; } .ho-stripe { stroke: #c23a3a; stroke-width: 6; } .ho-apple { fill: #d62e2e; stroke: #7a1515; stroke-width: 1; }
.ho-book { fill: #2d5fb3; stroke: #142c56; stroke-width: 1; } .ho-book2 { fill: #b34a2d; stroke: #561f14; stroke-width: 1; }
.ho-tent { fill: #2c1f4a; stroke: #150d28; stroke-width: 1.5; } .ho-star { fill: #ffe28a; }
.ho-sand { fill: #c9b47a; stroke: #8c7a52; stroke-width: 1.5; } .ho-fence { fill: none; stroke: #8a5a2b; stroke-width: 3; stroke-linecap: round; } .ho-bag { fill: #6b4a2a; }
.ho-hill { fill: #4f8a3f; stroke: #2e6a2a; stroke-width: 2; } .ho-wheel { fill: none; stroke: #8a5a2b; stroke-width: 6; } .ho-spoke { stroke: #8a5a2b; stroke-width: 3; }
.ho-smoke { fill: none; stroke: #ccc; stroke-width: 2; opacity: .7; } .ho-heart { fill: #ff5ea0; }
.ho-rope { fill: none; stroke: #e8d8b0; stroke-width: 2; } .ho-flag { fill: #ff5ea0; stroke: #a0205a; stroke-width: .5; }
.ho-frame { fill: #c9a86a; stroke: #6b5d44; stroke-width: 2; } .ho-canvas { fill: #f4f1e6; } .ho-ring { fill: none; stroke: #e8d8b0; stroke-width: 3; stroke-dasharray: 6 6; }
.ho-pad { fill: #2a2e3a; stroke: #7ad1c0; stroke-width: 2; } .ho-glow { fill: #7ad1c0; opacity: .8; } .ho-grass { fill: none; stroke: #7fd36a; stroke-width: 2; }
.ho-mark { cursor: pointer; } .ho-mark .ho-sign rect { fill: #f4f1e6; stroke: #4a2e12; stroke-width: 2; } .ho-mark .ho-sign text { font: 700 13px var(--nx-font-console); fill: #1e1208; letter-spacing: .02em; }
.ho-mark:hover .ho-sign rect, .ho-mark:focus .ho-sign rect { fill: var(--nx-acid); } .ho-mark:hover, .ho-mark:focus { outline: none; }
.ho-mark.soon { opacity: .55; } .ho-mark.soon .ho-sign rect { stroke-dasharray: 3 3; }
.ho-mark.done .ho-sign rect { fill: #cfe8c0; }
.ho-npc { fill: var(--nx-magenta); stroke: #05070e; stroke-width: 1.5; } .ho-npc-t { font: 700 9px var(--nx-font-console); fill: #fff; }
.ho-dailies, .ho-board, .ho-about, .ho-ways { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; } .ho-dailies li.done { color: var(--nx-text-dim); text-decoration: line-through; }
.ho-npc-box .ho-who { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 8px; }
.ho-pet { width: 43px; height: 56px; object-fit: cover; object-position: left center; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.ho-pet[data-kind="1"] { filter: hue-rotate(67deg) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); } .ho-pet[data-kind="2"] { filter: hue-rotate(12deg) saturate(.6) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.ho-pet[data-kind="3"] { filter: hue-rotate(157deg) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); } .ho-pet[data-kind="4"] { filter: hue-rotate(-20deg) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.ho-pet[data-kind="5"] { filter: hue-rotate(-28deg) saturate(.3) brightness(.7) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); } .ho-pet[data-kind="6"] { filter: hue-rotate(182deg) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.ho-pet[data-kind="7"] { filter: hue-rotate(247deg) brightness(1.2) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.ho-say { margin: 8px 0 0; padding: 8px 12px; border: 2px solid var(--nx-magenta); border-radius: 12px 12px 12px 2px; background: rgba(255, 0, 170, .08); line-height: 1.5; }
.ho-text { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--nx-acid); background: rgba(190, 255, 0, .06); line-height: 1.5; }
.ho-event { margin: 0 0 12px; padding: 8px 12px; border: 2px dashed var(--nx-acid); border-radius: 8px; background: rgba(190, 255, 0, .06); line-height: 1.5; }
.ho-stock li { margin: 0 0 8px; } .ho-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.ho .inline { display: inline; } .ho .inline button { vertical-align: middle; }
.pl-pockets li { margin: 0 0 6px; line-height: 1.6; } .pl-use { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; } .pl-use input, .pl-use select { max-width: 120px; }

/* D101: a place of the Hollow as a scene — the backdrop, the keeper and their roshi standing in it, the line at the bottom, the panel beside */
.vn { position: absolute; inset: 0; overflow: hidden; background: #05060a; color: var(--nx-text); }
.vn-stage { position: absolute; inset: 0; }
.vn-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vn-cast { position: absolute; left: 9%; bottom: 17%; height: 58%; display: flex; align-items: flex-end; gap: 1.5%; pointer-events: none; z-index: 1; }
.vn-npc { height: 100%; aspect-ratio: 100 / 160; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .55)); }
.vn-npc .vn-fig { width: 100%; height: 100%; display: block; }
.vn-npc-sheet { width: auto; object-fit: cover; object-position: 0 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.vn-npc-sheet[data-race="dark-elf"][data-sex="f"] { aspect-ratio: 91 / 74; } .vn-npc-sheet[data-race="dark-elf"][data-sex="m"] { aspect-ratio: 96 / 74; } .vn-npc-sheet[data-race="golden-high-elf"][data-sex="f"] { aspect-ratio: 87 / 72; } .vn-npc-sheet[data-race="golden-high-elf"][data-sex="m"] { aspect-ratio: 75 / 81; } .vn-npc-sheet[data-race="orc"][data-sex="f"] { aspect-ratio: 105 / 83; } .vn-npc-sheet[data-race="orc"][data-sex="m"] { aspect-ratio: 95 / 79; } /* each sheet's frame (world/races/<race>/<sex>/sprites.json) */
.vn-cast .vn-pet { width: auto; height: 34%; aspect-ratio: 86 / 112; object-fit: cover; object-position: left bottom; }
.vn-counter { position: absolute; left: 3%; width: 50%; bottom: 0; height: 29%; z-index: 2; background: linear-gradient(#9a6a38, #6a4422 30%, #4a2e16); border-top: 12px solid #b8844a; border-radius: 6px 6px 0 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, .45); }
.vn-say { position: absolute; left: 2%; right: calc(min(440px, 42%) + 3%); bottom: 2.5%; z-index: 3; margin: 0; padding: 8px 14px 10px; max-height: 40%; overflow: auto; background: rgba(5, 6, 36, .92); border: 2px solid var(--nx-cyan); border-radius: 10px; box-shadow: 0 0 22px rgba(11, 222, 251, .35); font: 15px/1.45 var(--nx-font-body); }
.vn-say .ho-say { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.vn-say .vn-who { display: inline-block; margin: 0 0 4px; padding: 1px 10px; border-radius: 10px; background: var(--nx-magenta); color: #fff; font: 600 12px var(--nx-font-console); letter-spacing: .08em; text-transform: uppercase; }
.vn-say q { display: block; quotes: "“" "”"; } .vn-say .vn-narr { color: var(--nx-text-dim); } .vn-say .ho-text { margin: 6px 0 0; color: var(--nx-acid-text, #cef41b); }
.vn-panel { position: absolute; top: 2%; right: 1.5%; bottom: 2%; width: min(440px, 42%); overflow: auto; z-index: 4; padding: 12px 14px; background: rgba(8, 12, 24, .94); border: 2px solid var(--nx-cyan); border-radius: 12px; box-shadow: 0 0 28px rgba(11, 222, 251, .3), 0 0 50px rgba(242, 9, 243, .2); }
.vn-head h2 { margin: 4px 0 2px; font: 26px/1.05 var(--nx-font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.vn-head p { margin: 0 0 8px; font-size: 12px; } .vn-back { font: 600 11px var(--nx-font-console); letter-spacing: .08em; color: var(--nx-cyan); text-decoration: none; } .vn-back:hover { color: var(--nx-magenta); }
.vn-panel .kp-box { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 10px; } .vn-panel .kp-box h2 { font: 600 12px var(--nx-font-console); letter-spacing: .14em; text-transform: uppercase; color: var(--nx-acid-text, #cef41b); margin: 6px 0; }
.vn-stock { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.vn-card { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; padding: 8px; background: rgba(255, 255, 255, .04); border: 1px solid #2a3350; border-radius: 10px; }
.vn-card:hover { border-color: var(--nx-cyan); } .vn-card.out { opacity: .6; }
.vn-good { width: 56px; height: 56px; display: block; border-radius: 8px; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .14), rgba(0, 0, 0, .25)); }
.vn-card-t b { color: #fff; } .vn-card-b { display: block; margin: 3px 0 6px; color: var(--nx-text-dim); font-size: 12px; line-height: 1.35; }
.vn-pockets { margin-top: 10px; font-size: 12px; }
@media (max-width: 760px) {
  .vn { overflow-y: auto; }
  .vn-stage { position: relative; height: 52vh; min-height: 260px; max-height: 420px; }
  .vn-cast { left: 4%; height: 56%; }
  .vn-say { right: 2%; font-size: 13px; }
  .vn-panel { position: relative; inset: auto; width: auto; margin: 8px; }
}
/* D118: the Wards' House's sign — a round window with the moon in it, a lamp by the door */
.ho-moon { fill: #fff3c0; stroke: #8c7a52; stroke-width: 1.5; } .ho-lamp { fill: #ffd36a; filter: drop-shadow(0 0 4px #ffb04a); }
/* the Curio's back room (D120): the goods are knobs */
.bk-stock .vn-card { grid-template-columns: 1fr; }
.bk-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.bk-form input[type=number] { width: 5.5em; } .bk-of { margin: 6px 0 10px; }
.bk-room .vn-stage::before { content: ''; position: absolute; inset: 0; background: rgba(10, 4, 26, .35); pointer-events: none; }
/* D134: a festival on — the Harvest Fair's banner on the map */
.ho-fest { position: relative; margin: 0 0 12px; padding: 18px 14px 10px; border: 2px solid #c8352a; border-radius: 10px; background: #fbf4e2; color: #3a2a10; font: 15px/1.5 Georgia, serif; overflow: hidden; }
.ho-fest::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(90deg, #c8352a 0 18px, #fff6e4 18px 36px); }
.ho-fest b { color: #7a2a10; } .kp.ho .ho-fest a { color: #2b4fa8; font-weight: bold; }
/* D136: the member's child, apprenticed at this place */
.vn-head p.dim a { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; } .vn-head p.dim a:hover { color: var(--nx-cyan); }
.vn-head p.ho-record { margin: -4px 0 8px; font: 600 11px var(--nx-font-console); letter-spacing: .06em; } .ho-record a { color: var(--nx-cyan); text-decoration: none; } .ho-record a:hover { color: var(--nx-magenta); }
.ho-lesson { box-shadow: inset 4px 0 0 #ffd27a; } .ho-lesson h2 { color: #ffd27a; } /* D140: the apprentice's lesson */
.ho-apprentice { margin: 6px 0 0; padding: 4px 10px; border-radius: 999px; display: inline-block; background: rgba(255, 210, 122, .12); border: 1px solid rgba(255, 210, 122, .5); color: #ffd27a; font: 600 12px var(--nx-font-body); }