/* The World (#75 W1, D84; D93: in the site's own colours — no borrowed desktop chrome): a slim row with the scene's
   name, the menus, the log and the Places box; a row of tool chips; the world filling everything under them; the box
   to talk in; a status strip. The kits are the site's own floating windows. */
.nx-main:has(> .wd) { padding: 0; max-width: none; }
/* hidden means hidden (D90): a kit's own display rules (.pl-bars is a grid) must not show a hidden part — that left the last roshi's drives on screen */
.wd [hidden], .nx-win [hidden], .wd-kit[hidden] { display: none !important; }
.wd { --wd-h: calc(100dvh - 56px); --wd-line: #1c2440; --wd-chip: rgba(11, 222, 251, .07);
  display: flex; flex-direction: column; height: var(--wd-h); min-height: 520px; margin: 0; background: var(--nx-void); color: var(--nx-text); font: 13px/1.35 var(--nx-font-body); user-select: none; }
.wd:fullscreen { --wd-h: 100vh; }
.wd a { color: var(--nx-link); } .wd kbd { font: 10px var(--nx-font-console); color: var(--nx-text-dim); margin-left: auto; padding-left: 12px; }
/* the top row: the scene's name, the menus, the log, the Places box */
.wd-top { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 10px; background: linear-gradient(180deg, var(--nx-deep), var(--nx-ink)); border-bottom: 1px solid var(--wd-line); position: relative; z-index: 950; flex-wrap: nowrap; }
.wd-top > * { flex-shrink: 0; } .wd-top .wd-speechf { flex: 0 1 280px; min-width: 90px; flex-shrink: 1; } .wd-top .wd-speechf select { width: 100%; min-width: 0; } .wd-top .wd-placesf { flex-shrink: 1; min-width: 0; } .wd-top .wd-placesf select { min-width: 0; }
.wd-menubtn { display: none !important; } /* above the kit windows' layer (900): a menu opens over them */
.wd-name { margin: 0; display: flex; align-items: baseline; gap: 8px; font: 22px/1 var(--nx-font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: var(--nx-text-outline), 0 0 12px rgba(11, 222, 251, .45); white-space: nowrap; }
.wd-name small { font: 600 10px var(--nx-font-console); letter-spacing: .12em; color: var(--nx-cyan); text-shadow: none; }
.wd-menu { display: flex; align-items: center; gap: 2px; }
.wd-mi { position: relative; } .wd-mi > button { height: 28px; padding: 0 10px; background: none; border: 1px solid transparent; border-radius: 14px; color: var(--nx-text-dim); font: 600 11px var(--nx-font-console); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.wd-mi > button:hover, .wd-mi > button[aria-expanded="true"] { color: #fff; border-color: rgba(11, 222, 251, .5); background: var(--wd-chip); }
.wd-dd { position: absolute; left: 0; top: 32px; min-width: 230px; padding: 6px; background: var(--nx-ink); border: 1px solid var(--nx-cyan); border-radius: 10px; box-shadow: 0 0 24px rgba(11, 222, 251, .35), 0 12px 30px rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: 1px; z-index: 40; }
.wd-dd hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--wd-line); }
.wd-dd > button, .wd-dd > a, .wd-dd .wd-mf > button { display: flex; align-items: center; width: 100%; padding: 6px 10px; background: none; border: 0; border-radius: 6px; color: var(--nx-text); font: 13px var(--nx-font-body); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.wd-dd > button:hover, .wd-dd > a:hover, .wd-dd .wd-mf > button:hover { background: rgba(242, 9, 243, .18); color: #fff; } .wd-dd .wd-mf { margin: 0; }
.wd-dd > a.locked { color: var(--nx-text-dim); } .wd-lock { display: inline-block; width: 12px; height: 12px; margin-left: 6px; vertical-align: -2px; } .wd-lock svg { width: 12px; height: 12px; }
.wd-field { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--nx-font-console); letter-spacing: .12em; text-transform: uppercase; color: var(--nx-text-dim); }
.wd-field select, .wd-chat select { max-width: 240px; height: 28px; padding: 0 8px; background: var(--nx-void); color: var(--nx-text); border: 1px solid #2a3350; border-radius: 6px; font: 12px var(--nx-font-console); letter-spacing: 0; text-transform: none; }
.wd-field select:focus, .wd-chat select:focus, .wd-chat input:focus { outline: none; border-color: var(--nx-cyan); box-shadow: 0 0 0 2px rgba(11, 222, 251, .25); }
.wd-speechf select { max-width: 280px; }
/* the tool row: chips */
.wd-tools { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 8px; background: var(--nx-ink); border-bottom: 1px solid var(--wd-line); flex-wrap: wrap; }
.wd-tg { display: flex; gap: 3px; } .wd-sep { width: 1px; height: 24px; margin: 0 6px; background: var(--wd-line); } .wd-grow { flex: 1; }
.wd-tb { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; background: transparent; border: 1px solid transparent; border-radius: 15px; color: var(--nx-text-dim); font: 600 11px var(--nx-font-console); letter-spacing: .04em; text-decoration: none; cursor: pointer; position: relative; }
.wd-tb:hover:not(:disabled) { color: #fff; background: var(--wd-chip); border-color: rgba(11, 222, 251, .45); }
.wd-tb:active:not(:disabled) { transform: scale(.96); } .wd-tb[aria-pressed="true"] { color: #fff; border-color: var(--nx-magenta); background: rgba(242, 9, 243, .14); box-shadow: 0 0 10px rgba(242, 9, 243, .35); }
.wd-tb:disabled { opacity: .38; cursor: default; } .wd-tb.locked .wd-ic { filter: grayscale(.7) opacity(.7); } .wd-tb .wd-lock { position: absolute; right: 0; bottom: 0; margin: 0; }
.wd-tb.wd-sq { width: 30px; padding: 0; justify-content: center; font-size: 15px; }
.wd-ic { display: inline-block; width: 18px; height: 18px; } .wd-ic svg { width: 18px; height: 18px; display: block; }
@media (max-width: 1200px) { .wd-tb .wd-tl { position: absolute; left: -9999px; } .wd-tb { padding: 0 6px; } }
/* the viewport */
.wd-view { position: relative; flex: 1; min-height: 240px; overflow: hidden; background: #000; }
.wd-scene { position: absolute; inset: 0; } .wd-canvas { position: absolute; inset: 0; } .wd-canvas .pl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; cursor: none; background: #000; }
.wd-canvas .pl-canvas.carry { cursor: none; } .wd-hint { position: absolute; left: 10px; bottom: 8px; padding: 3px 8px; background: rgba(5, 6, 36, .7); color: var(--nx-text-dim); font: 11px var(--nx-font-console); border: 1px solid var(--wd-line); border-radius: 12px; pointer-events: none; opacity: .9; }
.wd-hint kbd { color: #fff; margin: 0; padding: 0 3px; border: 1px solid #2a3350; border-radius: 3px; }
.wd-hint-touch { display: none; } @media (pointer: coarse) { .wd-hint-touch { display: inline; } .wd-hint-mouse { display: none; } }
.wd.is-canvas .wd-view:hover .wd-hint { opacity: 0; transition: opacity .6s 2s; }
.wd-html { position: absolute; inset: 0; overflow: auto; padding: 14px 18px 40px; background: var(--nx-void); color: var(--nx-text); font: 14px/1.45 var(--nx-font-body); user-select: text; }
.wd-html .ho-map { max-height: calc(100% - 20px); }
.wd-notice { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 5; margin: 0; max-width: 80%; }
.wd-canvas .nx-notice { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 5; margin: 0; }
.wd.scan .wd-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); }
.wd.is-loading .wd-view::before { content: "LOADING"; position: absolute; right: 12px; top: 10px; z-index: 6; font: 600 11px var(--nx-font-console); letter-spacing: .2em; color: var(--nx-acid); text-shadow: 0 0 8px rgba(206, 244, 27, .6); }
/* the box under the world */
.wd-chat { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--nx-ink); border-top: 1px solid var(--wd-line); }
.wd-chat input { flex: 1; min-width: 0; height: 32px; padding: 0 14px; background: var(--nx-void); color: var(--nx-text); border: 1px solid rgba(11, 222, 251, .45); border-radius: 16px; font: 13px var(--nx-font-body); }
.wd-chat input::placeholder { color: #6f78a8; }
.wd-chat button { height: 32px; padding: 0 16px; border-radius: 16px; border: 2px solid rgba(11, 222, 251, .7); background: var(--nx-grad-pill); color: #fff; font: 14px var(--nx-font-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.wd-chat button:hover { box-shadow: var(--nx-glow-hot); }
.wd-chat .wd-mode { font: 11px var(--nx-font-console); color: var(--nx-text-dim); white-space: nowrap; } .wd-chat .wd-mode b { color: var(--nx-cyan); }
@media (max-width: 900px) { .wd-chat .wd-mode { display: none; } }
/* the status strip */
.wd-status { display: flex; align-items: center; gap: 0; height: 26px; padding: 0 6px; background: var(--nx-void); border-top: 1px solid var(--wd-line); font: 11px var(--nx-font-console); color: var(--nx-text-dim); overflow: hidden; }
.wd-status > span { padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wd-status > span + span { border-left: 1px solid var(--wd-line); }
.wd-status .wd-where { color: var(--nx-acid-text, #cef41b); max-width: 34%; } .wd-status .wd-help-hint { flex: 1; } .wd-status .wd-room { color: var(--nx-cyan); min-width: 120px; } .wd-status .pl-link::before { content: '●'; margin-right: 4px; color: var(--nx-danger); } .wd-status .pl-link.on::before { color: var(--nx-acid); text-shadow: 0 0 6px rgba(206, 244, 27, .6); }
.wd-hearts { color: #ff4f8a; letter-spacing: 1px; } #wd-health { min-width: 180px; }
/* the kits: the site's own windows */
.nx-win.wd-kitwin { width: 360px; max-width: 94vw; max-height: 78vh; } .nx-win.wd-kitwin.wide { width: 740px; }
.nx-win.wd-kitwin .nx-win-title { padding: 6px 10px; } .nx-win.wd-kitwin .nx-win-btn { white-space: nowrap; }
.nx-win.wd-kitwin .nx-win-body { max-height: 70vh; overflow: auto; padding: 12px 14px; font-size: 13px; user-select: text; }
.nx-win.wd-kitwin .pl-box { background: transparent; border: 0; border-radius: 0; padding: 0; }
.wd-kit h2 { margin: 0 0 6px; font: 600 14px var(--nx-font-console); letter-spacing: .08em; text-transform: uppercase; color: var(--nx-cyan); }
.wd-kit h3 { margin: 10px 0 4px; font: 600 12px var(--nx-font-console); letter-spacing: .06em; text-transform: uppercase; color: var(--nx-magenta); }
.wd-kit .dim { color: var(--nx-text-dim); }
.wd-kit input, .wd-kit select, .wd-kit textarea { background: var(--nx-void); color: var(--nx-text); border: 1px solid #2a3350; border-radius: 4px; padding: 3px 6px; font: 12px var(--nx-font-console); }
.wd-help p { margin: 2px 0 8px; } .wd-help h2 { margin-top: 10px; }
.pl-rules-box { margin: 6px 0; font: 12px var(--nx-font-body); } .pl-rules-box ul { margin: 2px 0; padding-left: 16px; } .pl-rules-box .rule-src { color: var(--nx-text-dim); font-style: italic; }
/* Info (D90): the Vetti's face, a thing's facts */
.if-vetti .if-head { display: flex; gap: 10px; align-items: center; } .if-vetti .if-head h2 { margin: 0; } .if-vetti .if-head p { margin: 2px 0 0; }
.if-vetti .kp-sprite.if-portrait { width: 64px; height: 64px; border: 1px solid #2a3350; border-radius: 8px; background: var(--nx-void); }
.if-call { margin: 4px 0 0; } .if-call[hidden] { display: none; } .if-line, .if-doing { margin: 6px 0 0; } .if-doing [data-v="doing"] { color: var(--nx-acid-text); } .if-says { margin: 6px 0; color: var(--nx-ice); font-style: italic; }
.if-acts { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 6px; } .if-vetti .kp-memory { margin: 0; padding-left: 16px; font-size: 12px; }
.pl-facts { display: grid; grid-template-columns: 76px 1fr; gap: 3px 8px; margin: 6px 0; font-size: 12px; } .pl-facts dt { font: 600 10px var(--nx-font-console); letter-spacing: .08em; text-transform: uppercase; color: var(--nx-text-dim); padding-top: 2px; } .pl-facts dd { margin: 0; }
.wd-toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; padding: 8px 14px; background: var(--nx-ink); color: var(--nx-text); border: 2px solid var(--nx-acid); border-radius: 8px; box-shadow: 0 0 18px rgba(206, 244, 27, .45); font: 600 12px var(--nx-font-console); letter-spacing: .04em; max-width: 80%; }
.wd.no-labels .pl-canvas { filter: none; }
@media (max-width: 760px) { .wd { min-height: 420px; } .wd-tools .wd-tg:nth-child(5) { display: none; } .wd-field select { max-width: 150px; } .wd-speechf { display: none; } .wd-name small { display: none; } }

/* ---------------------------------------------------------------- the Leet's progs as kits (D92): GENE, BRAIN, CHEM in the site's windows */
.wd-hack { font-size: 12px; } .wd-hack .lt-blurb { margin: 0 0 8px; color: var(--nx-text-dim); }
.wd-hack .lt-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; } .wd-hack .lt-ro { color: var(--nx-warn); font: 600 11px var(--nx-font-console); }
.wd-hack .lt-btn { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--nx-cyan); border-radius: 13px; background: var(--nx-ink); color: var(--nx-text); font: 600 11px var(--nx-font-console); letter-spacing: .08em; text-decoration: none; cursor: pointer; } .wd-hack .lt-btn:hover { border-color: var(--nx-magenta); box-shadow: 0 0 10px rgba(242, 9, 243, .4); }
.wd-hack .lt-btn.small { height: 22px; padding: 0 8px; font-size: 10px; }
.wd-hack .lt-box { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #2a3350; border-radius: 8px; background: rgba(8, 12, 24, .6); overflow: auto; }
.wd-hack .lt-box h3 { margin: 0 0 6px; } .wd-hack .lt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 760px) { .wd-hack .lt-cols { grid-template-columns: 1fr; } }
.wd-hack .lt-genes { width: 100%; border-collapse: collapse; font: 11px var(--nx-font-console); } .wd-hack .lt-genes th { text-align: left; color: var(--nx-text-dim); font-weight: 600; border-bottom: 1px solid #2a3350; padding: 2px 4px; } .wd-hack .lt-genes td { padding: 2px 4px; border-bottom: 1px dotted #1c2440; vertical-align: top; }
.wd-hack .lt-genes tr.on td { color: var(--nx-acid-text); } .wd-hack .lt-genes tr.locked td { opacity: .6; } .wd-hack .lt-num { text-align: right; } .wd-hack .lt-meaning { color: var(--nx-ice); } .wd-hack .lt-edit { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.wd-hack .lt-edit input { padding: 1px 4px; } .wd-hack meter { width: 70px; height: 8px; vertical-align: middle; }
.wd-hack .lt-denied { color: var(--nx-danger); font-weight: 600; } .wd-hack .lt-ok { color: var(--nx-ok); } .wd-hack .lt-sum { margin: 0 0 8px; color: var(--nx-text-dim); }
.wd-hack .lt-foot { display: flex; justify-content: space-between; margin: 6px 0 0; font: 10px var(--nx-font-console); letter-spacing: .12em; color: var(--nx-text-dim); }

/* ---------------------------------------------------------------- the Home (D89): the Vetti's room — the room drawn in the game's own flat shapes; the panels, the speech and the row of things to do in the site's */
.hm { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--nx-void); color: var(--nx-text); font: 13px/1.35 var(--nx-font-body); overflow: hidden; }
.hm .wd-notice { position: absolute; z-index: 5; left: 50%; top: 12px; }
.hm-room { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.hm-room::before { content: ""; position: absolute; inset: -30px; background: url(/static/world/home/room.webp) center bottom / cover no-repeat; filter: blur(16px) brightness(.45) saturate(1.2); } /* the painting's own colours past its edges */
.hm-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 24px rgba(0, 0, 0, .6)); }
/* the room (D94): the owner's painting; the hour over it — a tint at dawn, dusk and night, the window dark, the lamp and the candle lit */
.hm-tint { fill: #000; opacity: 0; mix-blend-mode: multiply; transition: opacity 1s; } .hm-window-night { fill: #0c1636; opacity: 0; } .hm-glow { opacity: 0; mix-blend-mode: screen; }
.hm[data-tod="night"] .hm-tint { fill: #1c2a5c; opacity: .62; } .hm[data-tod="night"] .hm-window-night { opacity: .78; } .hm[data-tod="night"] .hm-glow { opacity: 1; }
.hm[data-tod="dusk"] .hm-tint { fill: #ff8a5c; opacity: .22; } .hm[data-tod="dusk"] .hm-window-night { fill: #7a3a5a; opacity: .35; } .hm[data-tod="dusk"] .hm-glow { opacity: .6; }
.hm[data-tod="night"] .hm-vetti { filter: brightness(.62) saturate(.85) drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); } .hm[data-tod="dusk"] .hm-vetti { filter: brightness(.9) sepia(.12) drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
.hm[data-tod="dawn"] .hm-tint { fill: #ffc08a; opacity: .14; } .hm[data-tod="dawn"] .hm-window-night { fill: #f0a080; opacity: .2; }
/* the panels: the date top left, the sheet on the right */
.hm-guests { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hm-guests-line { position: absolute; left: 12px; bottom: 12px; max-width: min(46%, 420px); margin: 0; padding: 6px 10px; background: rgba(8, 12, 24, .9); color: var(--nx-text); border: 1px solid var(--nx-acid, #cef41b); border-radius: 10px; font: 12px/1.35 var(--nx-font-console); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hm-guests-line[hidden] { display: none !important; } .hm-guests-line .hm-btn.small { padding: 2px 8px; font-size: 11px; }
.hm-date, .hm-stats { position: absolute; background: rgba(8, 12, 24, .9); color: var(--nx-text); border: 1px solid var(--nx-cyan); border-radius: 10px; box-shadow: 0 0 18px rgba(11, 222, 251, .3); }
.hm-date { left: 12px; top: 12px; padding: 8px 12px; display: grid; gap: 2px; min-width: 190px; } .hm-date b { font: 20px/1 var(--nx-font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; } .hm-date span { font: 600 12px var(--nx-font-console); color: var(--nx-cyan); } .hm-date small { font: 11px var(--nx-font-console); color: var(--nx-text-dim); }
.hm-stats { right: 12px; top: 12px; width: 220px; padding: 10px 12px; } .hm-stats h3 { margin: 0 0 4px; font: 18px/1.1 var(--nx-font-display); letter-spacing: .03em; text-transform: uppercase; color: #fff; } .hm-stats h3 small { font: 600 10px var(--nx-font-console); letter-spacing: .1em; color: var(--nx-magenta); }
.hm-mood { margin: 0 0 8px; font-size: 12px; } .hm-hearts { color: #ff4f8a; letter-spacing: 1px; }
.hm-bars { display: grid; gap: 3px; } .hm-bar { display: grid; grid-template-columns: 56px 1fr; gap: 6px; align-items: center; font: 11px var(--nx-font-console); } .hm-bar-k { color: var(--nx-text-dim); }
.hm-bar-t { display: flex; gap: 2px; } .hm-bar-t i { flex: 1; height: 9px; background: #0a0e1a; border: 1px solid #2a3350; border-radius: 2px; } .hm-bar-t i.on { background: linear-gradient(180deg, #ff5ca8, var(--nx-magenta)); border-color: var(--nx-magenta); box-shadow: 0 0 4px rgba(242, 9, 243, .5); }
.hm-temper { margin: 8px 0 0; font-size: 11px; color: var(--nx-ice); } .hm-tally { margin: 4px 0 0; font: 10px var(--nx-font-console); color: var(--nx-text-dim); }
/* the Vetti, large, on the rug; what it wears over it in flat shapes */
.hm-vetti-wrap { position: absolute; left: 43.6%; bottom: 8%; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; } /* world.js stands it on the rug */
.hm-vetti { position: relative; width: 258px; height: 240px; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); transform-origin: 50% 100%; }
.hm-vetti.hm-sil { --skin: #ccc; background: radial-gradient(circle at 50% 30%, var(--skin) 0 26%, transparent 27%), radial-gradient(ellipse at 50% 80%, var(--skin) 0 38%, transparent 39%); opacity: .8; }
.hm-vetti.is-praised { animation: hm-jump .6s ease-out 2; } .hm-vetti.is-scolded { animation: hm-shake .5s linear 1; } .hm-vetti.is-pat { animation: hm-wobble .9s ease-in-out 1; } .hm-vetti.is-gift { animation: hm-jump .6s ease-out 1; }
@keyframes hm-jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-22px); } } @keyframes hm-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } @keyframes hm-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.hm-outfit { position: absolute; inset: 0; pointer-events: none; } .hm-outfit::before, .hm-outfit::after { content: ""; position: absolute; display: none; }
.hm[data-outfit="scarf"] .hm-outfit::before { display: block; left: 34%; top: 40%; width: 34%; height: 9%; background: #c33; border-radius: 40%; box-shadow: 2px 2px 0 #722; } .hm[data-outfit="scarf"] .hm-outfit::after { display: block; left: 56%; top: 46%; width: 9%; height: 20%; background: #c33; border-radius: 0 0 40% 40%; }
.hm[data-outfit="straw-hat"] .hm-outfit::before { display: block; left: 22%; top: 6%; width: 56%; height: 10%; background: #e8c36a; border-radius: 50%; box-shadow: 0 2px 0 #8a6a10; } .hm[data-outfit="straw-hat"] .hm-outfit::after { display: block; left: 36%; top: -3%; width: 28%; height: 12%; background: #d9b25a; border-radius: 40% 40% 0 0; box-shadow: inset 0 -4px 0 #c33; }
.hm[data-outfit="flowers"] .hm-outfit::before { display: block; left: 30%; top: 4%; width: 40%; height: 8%; background: radial-gradient(circle, #f66 0 30%, transparent 32%) 0 0/14% 100%, radial-gradient(circle, #ffd34a 0 30%, transparent 32%) 7% 0/14% 100%; }
.hm[data-outfit="cloak"] .hm-outfit::before { display: block; left: 18%; top: 36%; width: 64%; height: 62%; background: rgba(90, 90, 110, .78); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); } .hm[data-outfit="cloak"] .hm-outfit::after { display: block; left: 44%; top: 36%; width: 12%; height: 6%; background: #e8c36a; border-radius: 50%; }
.hm[data-outfit="apron"] .hm-outfit::before { display: block; left: 32%; top: 52%; width: 36%; height: 40%; background: #e9d9b8; border: 2px solid #b8a070; border-top-width: 0; } .hm[data-outfit="apron"] .hm-outfit::after { display: block; left: 40%; top: 48%; width: 20%; height: 5%; background: #b8a070; }
.hm[data-outfit="goggles"] .hm-outfit::before { display: block; left: 34%; top: 20%; width: 13%; height: 9%; border: 3px solid #5a3a10; border-radius: 50%; background: rgba(120, 200, 240, .7); } .hm[data-outfit="goggles"] .hm-outfit::after { display: block; left: 53%; top: 20%; width: 13%; height: 9%; border: 3px solid #5a3a10; border-radius: 50%; background: rgba(120, 200, 240, .7); }
.hm[data-outfit="ribbon"] .hm-outfit::before { display: block; left: 60%; top: 8%; width: 14%; height: 9%; background: #ffd34a; clip-path: polygon(0 0, 50% 50%, 0 100%, 100% 100%, 50% 50%, 100% 0); } .hm[data-outfit="ribbon"] .hm-outfit::after { display: block; left: 65%; top: 10%; width: 4%; height: 5%; background: #c90; }
.hm[data-outfit="pendant"] .hm-outfit::before { display: block; left: 47%; top: 44%; width: 7%; height: 7%; background: #ffb040; border: 2px solid #5a3a10; border-radius: 30%; box-shadow: 0 0 8px #ffb040; } .hm[data-outfit="pendant"] .hm-outfit::after { display: block; left: 50%; top: 38%; width: 1px; height: 7%; background: #5a3a10; }
.hm-nobody { position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); width: 360px; padding: 14px; background: rgba(8, 12, 24, .92); color: var(--nx-text); border: 1px solid var(--nx-cyan); border-radius: 10px; text-align: center; }
/* the speech box and the row of things to do */
.hm-speech { flex: 0 0 auto; min-height: 50px; margin: 0; padding: 10px 16px; background: var(--nx-ink); color: var(--nx-text); border-top: 2px solid var(--nx-magenta); font-size: 14px; box-shadow: 0 -8px 20px rgba(242, 9, 243, .12); }
.hm-speech b { font: 15px var(--nx-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--nx-magenta); margin-right: 10px; } .hm-speech q { quotes: "“" "”"; }
.hm-beat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .hm-choices { display: flex; gap: 6px; margin: 0; }
.hm-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--nx-ink); border-top: 1px solid var(--wd-line, #1c2440); position: relative; z-index: 6; flex-wrap: wrap; }
.hm-act { margin: 0; display: inline; }
.hm-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: transparent; border: 1px solid rgba(11, 222, 251, .45); border-radius: 16px; color: var(--nx-text); font: 600 12px var(--nx-font-console); letter-spacing: .04em; cursor: pointer; list-style: none; }
.hm-btn:hover { background: rgba(11, 222, 251, .1); border-color: var(--nx-cyan); box-shadow: 0 0 10px rgba(11, 222, 251, .35); color: #fff; } .hm-btn:active { transform: scale(.96); } .hm-btn::-webkit-details-marker { display: none; }
.hm-dd { position: relative; } .hm-ddl { position: absolute; left: 0; bottom: 38px; min-width: 220px; padding: 6px; background: var(--nx-ink); border: 1px solid var(--nx-cyan); border-radius: 10px; box-shadow: 0 0 24px rgba(11, 222, 251, .35), 0 12px 30px rgba(0, 0, 0, .6); z-index: 40; }
.hm-ddl .hm-act { display: block; } .hm-ddl button { display: block; width: 100%; padding: 6px 10px; background: none; border: 0; border-radius: 6px; color: var(--nx-text); font: 13px var(--nx-font-body); text-align: left; cursor: pointer; } .hm-ddl button:hover { background: rgba(242, 9, 243, .18); color: #fff; } .hm-ddl button.is-on::after { content: " ✓"; color: var(--nx-acid); } .hm-ddl p { margin: 4px 10px; color: var(--nx-text-dim); }
/* D128: one place at a time — the now line under the date; a prop by it at what it is doing; z z z over the bed; the room
   quiet when it is out, a card saying where it is and calling it back */
.hm-date .hm-now { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(206, 244, 27, .35); max-width: 320px; font: 600 12px/1.35 var(--nx-font-console); color: var(--nx-acid-text, #cef41b); }
.hm-date .hm-now i { font-style: normal; color: var(--nx-text-dim); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; margin-right: 4px; }
.hm-release { margin: 4px 0 0; } .hm-release .hm-btn.small, .hm-out .hm-btn { height: 26px; padding: 0 10px; font-size: 11px; }
.hm-out { position: absolute; z-index: 4; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(430px, 84%); display: grid; gap: 6px; padding: 14px 18px; background: rgba(8, 12, 24, .93); color: var(--nx-text); border: 1px solid var(--nx-magenta); border-radius: 12px; box-shadow: 0 0 26px rgba(242, 9, 243, .32), 0 14px 30px rgba(0, 0, 0, .55); text-align: center; }
.hm-out p { margin: 0; } .hm-out-h { font: 22px/1.1 var(--nx-font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; } .hm-out b { color: var(--nx-acid-text, #cef41b); font-weight: 600; }
.hm-out-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px !important; } .hm-out form.inline { display: inline; margin: 0; } .hm-out .dim { font-size: 11px; }
.hm.is-away .hm-bg { filter: brightness(.72) saturate(.8) drop-shadow(0 0 24px rgba(0, 0, 0, .6)); }
.hm-vetti-wrap[hidden] { display: none !important; }
.hm-out a.hm-btn { text-decoration: none; color: var(--nx-text); } .hm-btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; } .hm-btn:disabled:hover { background: transparent; border-color: rgba(11, 222, 251, .45); color: var(--nx-text); }
.hm-prop { position: absolute; z-index: 1; right: -14%; bottom: 34%; font-size: clamp(20px, 2.7vw, 40px); line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45)); pointer-events: none; animation: hm-prop 2.6s ease-in-out infinite; }
.hm[data-doing="eating"] .hm-prop { right: auto; left: 70%; bottom: 22%; animation-duration: 1.4s; } .hm[data-doing="playing"] .hm-prop { right: -22%; bottom: 4%; animation-name: hm-ball; animation-duration: .9s; }
.hm[data-doing="crafting"] .hm-prop, .hm[data-doing="studying"] .hm-prop, .hm[data-doing="reading"] .hm-prop { right: -6%; bottom: 30%; }
@keyframes hm-prop { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes hm-ball { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-34px) rotate(160deg); } }
.hm-zz { position: absolute; z-index: 1; left: 58%; top: -18%; font: 700 clamp(14px, 1.8vw, 26px)/1 var(--nx-font-display); color: #d6ecff; letter-spacing: .32em; text-shadow: 0 0 10px rgba(150, 200, 255, .85); pointer-events: none; animation: hm-zz 3.4s ease-in-out infinite; white-space: nowrap; }
@keyframes hm-zz { 0% { transform: translate(0, 8px) scale(.8); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(18px, -30px) scale(1.1); opacity: 0; } }
.hm.is-asleep .hm-vetti { filter: brightness(.86) saturate(.9) drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
.hm[data-spot="window"] .hm-vetti { scale: -1 1; } /* facing the window */
@media (max-width: 900px) { .hm-stats { width: 170px; } .hm-bar { grid-template-columns: 46px 1fr; } .hm-btn span { position: absolute; left: -9999px; } .hm-date .hm-now { max-width: 200px; } .hm-out { top: 40%; } }
/* #106: the sheet's name is a button that folds the sheet (the whole sheet only on a wide screen) */
.hm-sheet-toggle { all: unset; cursor: pointer; display: inline; } .hm-sheet-toggle:focus-visible { outline: 2px solid var(--nx-cyan); border-radius: 4px; }
/* #106: the first-days card: in the room's lower corner, out of the way of the Vetti */
.hm-first { position: absolute; z-index: 5; left: 12px; bottom: 12px; width: min(360px, 60%); padding: 10px 14px; background: rgba(8, 12, 24, .93); border: 1px solid var(--nx-acid-text, #cef41b); border-radius: 10px; box-shadow: 0 0 18px rgba(206, 244, 27, .25); font: 13px/1.4 var(--nx-font-body); color: var(--nx-text); }
.hm-first h4 { margin: 0 0 6px; font: 16px/1.1 var(--nx-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--nx-acid-text, #cef41b); }
.hm-first ol { margin: 0 0 6px; padding-left: 18px; } .hm-first li { margin: 0 0 4px; } .hm-first a { color: var(--nx-cyan); } .hm-first .dim { margin: 0 0 8px; font-size: 12px; } .hm-first[hidden] { display: none; }
/* #106: a phone — the two panels covered the room and the Vetti; the sheet shows its name and hearts and folds open on a
   tap, the date panel is one line, the buttons keep their labels under their icons, the card sits in the flow */
@media (max-width: 600px) {
  .hm-stats { width: auto; max-width: 56%; padding: 6px 10px; } .hm-stats h3 { margin: 0; font-size: 15px; } .hm-stats .hm-mood { margin: 2px 0 0; font-size: 11px; }
  .hm-stats .hm-sheet-body, .hm-stats .hm-calling { display: none; } .hm-stats.is-open .hm-sheet-body, .hm-stats.is-open .hm-calling { display: block; } .hm-stats.is-open { max-width: 86%; }
  .hm-stats h3::after { content: ' ▾'; font-size: 11px; color: var(--nx-cyan); } .hm-stats.is-open h3::after { content: ' ▴'; }
  .hm-date { min-width: 0; max-width: 42%; padding: 6px 10px; gap: 0; } .hm-date b { font-size: 15px; } .hm-date span, .hm-date small { font-size: 10px; } .hm-date .hm-now { max-width: none; font-size: 10px; }
  .hm-actions { gap: 3px; padding: 6px 6px; justify-content: center; } .hm-btn { flex-direction: column; gap: 1px; height: auto; min-width: 54px; padding: 4px 4px; border-radius: 10px; font-size: 9px; } .hm-btn span { position: static; left: auto; }
  /* the card is one line until it is tapped open (it covered the Vetti) */
  .hm-first { left: 6px; right: 6px; bottom: 6px; width: auto; font-size: 12px; padding: 6px 10px; } .hm-first h4 { margin: 0; font-size: 13px; } .hm-first-body { display: none; } .hm-first.is-open .hm-first-body { display: block; margin-top: 6px; }
  .hm-first h4::after { content: ' ▸'; color: var(--nx-cyan); } .hm-first.is-open h4::after { content: ' ▾'; }
}
.hm-first-toggle { all: unset; cursor: pointer; } .hm-first-toggle small { font: 11px var(--nx-font-body); color: var(--nx-text); text-transform: none; letter-spacing: 0; } @media (min-width: 601px) { .hm-first-toggle small { display: none; } }

/* ELiTE.EXE's little window, in the World (D93): out of the way of the box and the Home's buttons (its skin is leet.css's, the same everywhere) */
body:has(.wd) .lt-mini { left: auto; right: 12px; bottom: 96px; }

/* D98: a scene room — the Home's kind — opened over the dimmed world (a modal: the world waits behind it, blurred) */
.pl-scene { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 10px; container-type: size; }
.pl-scene[hidden] { display: none !important; }
.pl-scene-scrim { position: absolute; inset: 0; background: rgba(5, 6, 36, .55); backdrop-filter: blur(3px) saturate(.7); -webkit-backdrop-filter: blur(3px) saturate(.7); cursor: pointer; }
.pl-scene-card { position: relative; width: min(100cqw - 8px, 760px, (100cqh - 150px) * 16 / 9); min-width: min(100cqw - 8px, 280px); max-height: 100%; display: flex; flex-direction: column; background: var(--nx-deep); border: 3px solid var(--nx-cyan); border-radius: 10px; box-shadow: 0 0 30px rgba(11, 222, 251, .5), 0 0 60px rgba(242, 9, 243, .35); overflow: hidden; animation: plScenePop .22s cubic-bezier(.175, .885, .32, 1.275); }
@keyframes plScenePop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pl-scene-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--nx-grad-chrome); color: var(--nx-void); font: 600 12px var(--nx-font-console); letter-spacing: .08em; text-transform: uppercase; }
.pl-scene-head b { font-weight: 700; white-space: nowrap; }
.pl-scene-gives { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.pl-scene-x { width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--nx-void); background: var(--nx-ink); color: var(--nx-text); font: 700 14px var(--nx-font-console); cursor: pointer; }
.pl-scene-x:hover { background: var(--nx-magenta); color: #fff; }
.pl-scene-stage { display: block; width: 100%; aspect-ratio: 16 / 9; background: #05060a; cursor: pointer; }
.pl-scene-say { margin: 0; padding: 8px 12px; min-height: 2.6em; background: rgba(5, 6, 36, .92); border-top: 2px solid var(--nx-cyan); color: var(--nx-text); font: 13px/1.4 var(--nx-font-body); }
.pl-scene-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; background: var(--nx-ink); border-top: 1px solid var(--wd-line, rgba(11, 222, 251, .25)); }
.pl-scene-btn { font: 600 11px var(--nx-font-console); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--nx-cyan); background: rgba(11, 222, 251, .08); color: var(--nx-text); cursor: pointer; }
.pl-scene-btn:hover:not(:disabled) { background: var(--nx-cyan); color: var(--nx-void); }
.pl-scene-btn:disabled { opacity: .45; cursor: default; }
/* D111: what was set down inside a room, each to be taken back out */
.pl-scene-kept { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 0 10px 8px; background: var(--nx-ink); font: 12px var(--nx-font-console); }
.pl-scene-btn.small { padding: 3px 8px; font-size: 10px; text-transform: none; letter-spacing: .02em; }
.pl-scene-in { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.pl-scene-in select { font: 12px var(--nx-font-console); background: var(--nx-deep); color: var(--nx-text); border: 1px solid var(--nx-cyan); border-radius: 6px; padding: 4px 6px; max-width: 12em; }
.wd-canvas.has-scene .wd-hint { opacity: 0; }
@media (max-width: 560px) { .pl-scene { padding: 4px; } .pl-scene-in { margin-left: 0; } .pl-scene-say { font-size: 12px; } }
/* CHEAT.EXE (D100) in its window */
.wd-hack .lt-cheats h3 { font: 600 11px var(--nx-font-console); letter-spacing: .16em; text-transform: uppercase; color: var(--nx-acid-text, #cef41b); }
.wd-hack .lt-cheat-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
.wd-hack .lt-cheat-btns { display: contents; }
.wd-hack .lt-cheat-pick { display: inline-flex; gap: 6px; align-items: center; font: 600 11px var(--nx-font-console); color: var(--nx-text-dim); }
.wd-hack .lt-cheat-pick select { font: 12px var(--nx-font-console); background: var(--nx-deep); color: var(--nx-text); border: 1px solid var(--nx-cyan); border-radius: 6px; padding: 3px 6px; }
.wd-hack .lt-btn.on { border-color: var(--nx-acid, #cef41b); color: var(--nx-acid-text, #cef41b); box-shadow: 0 0 10px rgba(206, 244, 27, .35); }
.wd-hack .lt-btn[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.wd-hack .lt-btn[data-confirm] { border-color: #a070ff; }

/* phones (D102): the World is the screen — the menus folded behind ☰, one scrolling row of tools, the box and a slim status strip */
@media (max-width: 760px) {
  .wd { --wd-h: calc(100dvh - 54px); min-height: 0; }
  .wd-top { gap: 6px; padding: 4px 6px; min-height: 40px; }
  .wd-name { font-size: 18px; min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; } .wd-name small { display: none; }
  .wd-menubtn { display: inline-flex !important; }
  .wd-menu { display: none; }
  .wd-top.menus-open .wd-menu { display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; right: 0; top: 100%; max-height: 70vh; overflow: auto; padding: 6px; background: var(--nx-ink); border-bottom: 2px solid var(--nx-cyan); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
  .wd-top.menus-open .wd-mi > button { width: 100%; text-align: left; height: 34px; }
  .wd-top.menus-open .wd-dd { position: static; min-width: 0; box-shadow: none; margin: 2px 0 6px 12px; }
  .wd-field > span { display: none; } .wd-placesf select { max-width: 42vw; } .wd-grow { display: none; }
  .wd-tools { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; min-height: 40px; padding: 3px 6px; }
  .wd-tools::-webkit-scrollbar { display: none; } .wd-tools .wd-tg { flex-shrink: 0; } .wd-tools .wd-tg:nth-child(5) { display: flex; }
  .wd-tb { height: 34px; min-width: 34px; justify-content: center; }
  .wd-chat { padding: 5px 6px; gap: 6px; } .wd-chat select { max-width: 92px; } .wd-chat button { padding: 0 10px; }
  .wd-status { height: 22px; } .wd-status .wd-help-hint, .wd-status #wd-temp, .wd-status #wd-season { display: none; }
}
/* D136: the calling, under the child's name on the sheet */
.hm-calling { margin: -2px 0 4px; font: 600 11px/1.3 var(--nx-font-body); color: #ffd27a; }

/* D147 (W5b): a neighbour's freehold from the gate — no hand, no box under the world, nothing to send in or out */
.wd.is-visiting .wd-hand, .wd.is-visiting .wd-chat, .pl.is-visit .pl-scene-acts { display: none; }
.vy .vy-gates { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.vy .vy-gate { display: grid; grid-template-columns: 48px 1fr; gap: 6px 10px; align-items: center; padding: 10px 12px; border: 1px solid #2a3350; border-radius: 8px; background: rgba(8, 12, 24, .6); }
.vy .vy-gate.is-mine { border-color: rgba(11, 222, 251, .55); }
.vy .vy-gate .vy-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.vy .vy-gate-t b { font-size: 15px; }
.vy .vy-who { display: block; font-size: 12px; color: #aeb6d8; margin-top: 2px; }
.vy .vy-in { color: #9f6; }
.vy-pic { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; image-rendering: pixelated; background-color: #141a30; }
.wd.is-visiting .wd-canvas .pl-canvas { cursor: zoom-in; }
.kp-sil.vy-pic { display: inline-block; }
.vy-card { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: start; margin: 6px 0 0; }
.vy-card p { margin: 0 0 6px; }
.vy-ways { display: flex; flex-wrap: wrap; gap: 6px; }

/* D150 (W5c): the valley road — a side-view walk; layers slide at their own speeds (road.js) */
.rd { display: flex; flex-direction: column; gap: 10px; }
.rd-stage { position: relative; height: clamp(220px, 52vh, 460px); overflow: hidden; border: 1px solid var(--wd-line); border-radius: 8px; background: #0a1020; }
.rd-sky { position: absolute; inset: 0; background: linear-gradient(#7ec8f0, #cfeaf7 70%); transition: background 2s; }
.rd[data-tod="dawn"] .rd-sky { background: linear-gradient(#f3b07a, #fbe1b8 70%); } .rd[data-tod="dusk"] .rd-sky { background: linear-gradient(#5b4a8a, #f19a6a 75%); } .rd[data-tod="night"] .rd-sky { background: linear-gradient(#060a22, #1c2550 80%); }
.rd-layer { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; will-change: transform; }
.rd-mtn { fill: #6f86a8; } .rd-snow { fill: #f2f6fb; } .rd-lights { fill: #ffe9a8; opacity: 0; } .rd[data-tod="night"] .rd-lights, .rd[data-tod="dusk"] .rd-lights { opacity: 1; filter: drop-shadow(0 0 3px #ffd36a); }
.rd-hill { fill: #6aa65a; } .rd-tree rect { fill: #6a4424; } .rd-tree circle { fill: #3f8a3c; } .rd-roofs path { fill: #b0452c; } .rd-roofs rect { fill: #e8d8b0; }
.rd-hedge { fill: #2f6e34; } .rd-post { fill: #7a5530; } .rd-rail { stroke: #7a5530; stroke-width: 4; }
.rd-road { fill: #b89a6a; } .rd-dash { fill: #d9c49a; } .rd-verge { stroke: #5e8a3a; stroke-width: 4; }
.rd[data-tod="night"] .rd-mtn { fill: #232c4a; } .rd[data-tod="night"] .rd-snow { fill: #7a86a8; } .rd[data-tod="night"] .rd-hill { fill: #1f3a2a; } .rd[data-tod="night"] .rd-tree circle { fill: #173020; } .rd[data-tod="night"] .rd-hedge { fill: #12301a; } .rd[data-tod="night"] .rd-road { fill: #4a4030; } .rd[data-tod="night"] .rd-dash { fill: #6a5c44; }
.rd-vetti { position: absolute; left: 42%; bottom: 9%; height: 26%; aspect-ratio: 95 / 79; overflow: hidden; }
.rd-strip { position: absolute; top: 0; left: 0; height: 100%; width: 400%; max-width: none; image-rendering: pixelated; transform: translateX(-25%); }
.rd-vetti.is-walking .rd-strip { animation: rd-bob .5s steps(2) infinite; } .rd-vetti.is-still .rd-strip { transform: translateX(0); animation: none; }
@keyframes rd-bob { 0% { transform: translateX(-25%) translateY(0); } 100% { transform: translateX(-25%) translateY(-4%); } }
.rd-vetti.rd-sil .kp-sprite { display: block; width: 100%; height: 100%; }
.rd-things { position: absolute; inset: 0; pointer-events: none; }
.rd-thing { position: absolute; bottom: 10%; font-size: clamp(28px, 6vh, 52px); transform: translateX(-50%); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
.rd-thing.is-done { opacity: .45; }
.rd-bar { position: absolute; left: 12px; right: 12px; top: 10px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .3); } .rd-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--nx-acid, #cef41b); }
.rd-box { min-height: 96px; padding: 12px 14px; border: 1px solid var(--wd-line); border-radius: 8px; background: rgba(8, 12, 24, .82); font-size: 15px; line-height: 1.5; }
.rd-box .rd-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; } .rd-box .rd-where { font: 12px var(--nx-font-console); letter-spacing: .06em; text-transform: uppercase; color: var(--nx-text-dim); margin: 0 0 4px; }
.rd-box .rd-out { color: #cfe; } .rd-go { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* D151 (W5d): the overland map */
.ov-map { display: block; height: min(64vh, 900px); width: auto; max-width: 100%; margin: 0 auto; border: 1px solid var(--wd-line); border-radius: 8px; background: #5f9e4e; }
.ov-sky { fill: #9fd0ee; } .ov-mtn { fill: #7d90b0; } .ov-snow { fill: #f4f7fb; } .ov-lights circle { fill: #ffe9a8; filter: drop-shadow(0 0 4px #ffd36a); }
.ov-land { fill: #5f9e4e; } .ov-fold { fill: #4f8a40; stroke: #3c6e30; stroke-width: 2; } .ov-fold.is-mine { fill: #6bb054; stroke: #cef41b; stroke-width: 3; }
.ov-road { fill: none; stroke: #d8c08a; stroke-width: 14; stroke-linecap: round; } .ov-road-hit { fill: none; stroke: transparent; stroke-width: 30; cursor: pointer; }
.ov-mark:hover .ov-road-hit { stroke: rgba(255, 255, 255, .18); }
.ov-vname { font: 700 22px var(--nx-font-display, sans-serif); fill: #f6f1dc; paint-order: stroke; stroke: #1d3a1a; stroke-width: 4px; } .ov-count { font: 14px var(--nx-font-console, monospace); fill: #e6f2d8; paint-order: stroke; stroke: #1d3a1a; stroke-width: 3px; }
.ov-elide { font: 28px sans-serif; fill: #e6f2d8; text-anchor: middle; }
.ov-gate .ov-roof, .ov-hollow .ov-roof { fill: #b0452c; } .ov-gate .ov-wall, .ov-hollow .ov-wall { fill: #efe2bf; } .ov-gate .ov-door { fill: #6a4424; } .ov-gate.is-mine .ov-roof { fill: #2b6fd6; }
.ov-gate.is-home .ov-door { fill: #ffd36a; } .ov-name { font: 13px var(--nx-font-console, monospace); fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #1d3a1a; stroke-width: 3px; }
.ov-green { fill: #79b862; stroke: #3c6e30; stroke-width: 2; } .ov-wheel { fill: none; stroke: #6a4424; stroke-width: 3; } .ov-place { font: 700 20px var(--nx-font-display, sans-serif); fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #1d3a1a; stroke-width: 4px; }
.ov-pads ellipse { fill: #8fe0ff; stroke: #2a6a8a; stroke-width: 2; }
.ov-mark { cursor: pointer; } .ov-mark:hover .ov-roof, .ov-mark:focus .ov-roof { filter: brightness(1.3); } .ov-mark:focus { outline: none; } .ov-mark:focus-visible .ov-name, .ov-mark:focus-visible .ov-place { fill: #cef41b; }
.ov-walking { color: #cef41b; }
.ov-me-ring { fill: #cef41b; stroke: #1d3a1a; stroke-width: 2; } .ov-me-sil { fill: #c9b8a0; } .ov-me { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }