:root {
  --hud-bg: rgb(12 16 24 / 0.62);
  --hud-fg: #eef2f7;
  --hud-muted: #a9b4c2;
  --accent: #6db3ff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0e14; color: var(--hud-fg); font: 14px/1.35 system-ui, sans-serif; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
/* Name tags, bubbles, chat log, targeting: see the "In-world HUD" block at the end (js/hud.mjs). */
.hud { position: fixed; background: var(--hud-bg); border-radius: 10px; padding: 6px 10px; backdrop-filter: blur(6px); }
header.hud { top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; width: fit-content; max-width: calc(100% - 20px); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#status { bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 20px); font-size: 13px; text-align: center; }
#stats { top: max(10px, env(safe-area-inset-top)); right: 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
#chat-log:empty { display: none; }
select, button, input { font: inherit; color: var(--hud-fg); background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.18); border-radius: 7px; padding: 4px 8px; }
button { cursor: pointer; }
button:hover, select:hover { border-color: var(--accent); }
.muted { color: var(--hud-muted); }
@media (max-width: 600px) { #stats { top: auto; bottom: max(52px, calc(env(safe-area-inset-bottom) + 52px)); right: 10px; } }

/* Menus, Navigator, Options, loading, start-up and news viewer: see the "Home menus" block at the end; sign-in and first run: the last block. */
/* Expression menu: Home's groups as tabs, then the group's emotes (touch-sized). */
.emotes { position: fixed; top: max(64px, calc(env(safe-area-inset-top) + 54px)); left: 10px; width: min(440px, calc(100% - 20px)); display: grid; gap: 8px; padding: 8px; z-index: 5; }
.emotes[hidden] { display: none; }
@media (max-width: 600px) { .emotes { top: max(96px, calc(env(safe-area-inset-top) + 86px)); } }
.emote-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.emote-tabs::-webkit-scrollbar { display: none; }
.emote-tabs button { flex: none; min-height: 34px; padding: 4px 12px; border-radius: 17px; background: transparent; }
.emote-tabs button[aria-selected="true"] { background: rgb(109 179 255 / 0.22); border-color: var(--accent); }
.emote-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; max-height: min(46vh, 320px); overflow-y: auto; overscroll-behavior: contain; }
.emote-items button { min-height: 42px; padding: 6px 8px; }
.emote-items button.active { border-color: var(--accent); background: rgb(109 179 255 / 0.18); }

/* Native-game feel on phones: no zoom on focus (iOS zooms inputs under 16px), no page
   scroll/bounce, no text selection or callouts on the game; text fields stay selectable. */
html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
canvas, #labels { touch-action: none; }
input, textarea, select { font-size: 16px; -webkit-user-select: text; user-select: text; touch-action: manipulation; }
button { touch-action: manipulation; }
.navigator, .menu-screen, .panel, .emotes, #chat-log, [data-scroll] { touch-action: pan-y; }

/* --- Touch HUD: html.touch is set by js/touch.mjs on phones and tablets only ------------ */
html.touch { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
html.touch, html.touch body { position: fixed; inset: 0; overflow: hidden; }
/* Top bar: icon buttons, then place / instance / players in one chip. */
html.touch header.hud { top: calc(var(--sat) + 6px); left: calc(var(--sal) + 8px); right: calc(var(--sar) + 8px); width: auto; max-width: none; flex-wrap: nowrap; gap: 6px; padding: 5px; border-radius: 14px; z-index: 6; }
html.touch .tbutton { position: relative; flex: none; width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 0; border-radius: 12px; background: rgb(255 255 255 / 0.07); }
html.touch .tbutton img, html.touch .tbutton .ticon { width: 28px; height: 28px; pointer-events: none; }
html.touch .ticon { display: inline-grid; place-items: center; color: var(--hud-fg); }
html.touch .tbutton:active, html.touch .chat-row button:active { background: rgb(109 179 255 / 0.28); border-color: var(--accent); }
html.touch #chat-button.unread::after { content: ""; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
html.touch #place-chip { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, max-content) auto; justify-content: start; column-gap: 8px; align-items: center; padding: 0 4px; line-height: 1.25; }
html.touch #place-chip > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.touch #place { grid-column: 1 / -1; font-size: 13px; }
html.touch #instance, html.touch #peers { font-size: 11px; }
html.touch #peers { color: #9fe39a; }
/* Transient status under the bar; tiny stats on the right. */
html.touch #status { top: calc(var(--sat) + 62px); bottom: auto; max-width: calc(100% - 24px); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .4s; z-index: 4; }
html.touch #status.show { opacity: 1; transition-duration: .1s; }
html.touch #stats { top: calc(var(--sat) + 98px); bottom: auto; right: calc(var(--sar) + 8px); padding: 2px 7px; font-size: 10px; opacity: .65; pointer-events: none; }
/* Chat closed: the latest lines float top-left and fade when quiet. */
html.touch #chat { top: calc(var(--sat) + 98px); bottom: auto; left: calc(var(--sal) + 8px); width: min(62vw, 340px); padding: 0; background: none; backdrop-filter: none; pointer-events: none; transition: opacity .8s; }
html.touch #chat.quiet { opacity: 0; }
html.touch #chat-log { max-height: calc(4 * 1.35em + 12px); gap: 3px; font-size: 13px; }
html.touch #chat-log > div { align-self: flex-start; max-width: 100%; padding: 2px 8px; border-radius: 8px; background: var(--hud-bg); overflow-wrap: anywhere; }
html.touch .chat-row { display: none; }
/* Chat open: a sheet docked on the keyboard (--kb, from visualViewport). */
html.touch.chat-open #chat { top: auto; left: 0; right: 0; bottom: var(--kb, 0px); width: auto; max-width: 720px; margin: 0 auto; opacity: 1; pointer-events: auto; z-index: 8; display: grid; gap: 8px;
  padding: 10px calc(var(--sar) + 10px) max(10px, calc(var(--sab) - var(--kb, 0px))) calc(var(--sal) + 10px); border-radius: 16px 16px 0 0; background: rgb(10 14 22 / 0.94); backdrop-filter: blur(8px); animation: sheet-up .18s ease-out; }
html.touch.chat-open #chat-log { display: block; max-height: clamp(54px, calc(var(--vvh, 100vh) * 0.38), 320px); overflow-y: auto; overscroll-behavior: contain; }
html.touch.chat-open #chat-log:empty { display: none; }
html.touch.chat-open #chat-log > div { width: fit-content; margin-top: 3px; background: rgb(255 255 255 / 0.07); }
html.touch.chat-open .chat-row { display: flex; gap: 6px; }
html.touch #chat-input { flex: 1; min-width: 0; margin: 0; height: 44px; border-radius: 22px; padding: 0 14px; }
html.touch .chat-row button { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
html.touch .chat-send { background: #2d6fd6; border-color: #5c9cff; }
/* Emotes: Home's grouped expression menu as a bottom sheet. */
html.touch .emotes { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: 640px; margin: 0 auto; z-index: 7; gap: 10px;
  padding: 10px calc(var(--sar) + 10px) calc(var(--sab) + 10px) calc(var(--sal) + 10px); border-radius: 18px 18px 0 0; background: rgb(10 14 22 / 0.9); animation: sheet-up .18s ease-out; }
html.touch .emotes::before { content: ""; justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.3); }
html.touch .emote-tabs button { min-height: 40px; }
html.touch .emote-items { max-height: min(38vh, 300px); grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
html.touch .emote-items button { min-height: 48px; }
html.touch .emote-items button:active { background: rgb(109 179 255 / 0.28); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
/* Floating sticks (visual only; the canvas takes the touches). */
#touch-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1; transition: opacity .2s; }
html.sheet-open #touch-layer, html.chat-open #touch-layer { opacity: 0; }
.vstick { position: absolute; bottom: calc(var(--sab) + 30px); width: 132px; height: 132px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.55);
  background: radial-gradient(circle, rgb(12 16 24 / 0.08) 35%, rgb(12 16 24 / 0.4) 100%); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25), inset 0 0 18px rgb(109 179 255 / 0.2);
  opacity: .26; transition: opacity .4s, transform .3s cubic-bezier(.2, .8, .2, 1); will-change: transform, opacity; }
.vstick-move { left: calc(var(--sal) + 24px); }
.vstick-look { right: calc(var(--sar) + 24px); }
.vstick.held { opacity: .8; transition: opacity .08s; }
.vstick-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #ffffff 0%, #dfe5ee 42%, #8d99ab 100%); box-shadow: 0 2px 8px rgb(0 0 0 / 0.45); transition: transform .2s ease-out, box-shadow .15s; }
.vstick.held .vstick-knob { transition: box-shadow .15s; }
.vstick.hot { border-color: var(--accent); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25), inset 0 0 18px rgb(109 179 255 / 0.35), 0 0 14px rgb(109 179 255 / 0.5); }
.vstick.hot .vstick-knob { box-shadow: 0 0 14px rgb(109 179 255 / 0.95), 0 2px 8px rgb(0 0 0 / 0.45); }
/* Interaction button for prompts (sit, …): above the camera stick, thumb-sized. */
#action-button { position: fixed; z-index: 5; right: calc(var(--sar) + 46px); bottom: calc(var(--sab) + 184px); width: 76px; height: 76px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: #fff; border: 2px solid rgb(255 255 255 / 0.75); background: radial-gradient(circle at 40% 30%, #6db3ff, #2d6fd6 70%, #1b4a99);
  box-shadow: 0 0 18px rgb(109 179 255 / 0.6), 0 3px 10px rgb(0 0 0 / 0.4); animation: action-pop .22s ease-out; }
#action-button[hidden], html.sheet-open #action-button, html.chat-open #action-button { display: none; }
#action-button:active { transform: scale(.94); }
@keyframes action-pop { from { transform: scale(.6); opacity: 0; } }
/* Add to Home Screen hint (iPhone Safari has no Fullscreen API). */
#a2hs { top: calc(var(--sat) + 62px); left: 50%; transform: translateX(-50%); z-index: 9; display: flex; gap: 10px; align-items: center; width: max-content; max-width: calc(100% - 24px); font-size: 13px; animation: sheet-up .25s ease-out; }
#a2hs button { flex: none; width: 32px; height: 32px; padding: 0; border-radius: 50%; }
/* Menu and Navigator: clear of the notch and home indicator, bigger rows. */
html.touch #overlay { padding: calc(var(--sat) + 8px) calc(var(--sar) + 8px) calc(var(--sab) + 8px) calc(var(--sal) + 8px); }
html.touch .nav-row { min-height: 52px; }
html.touch .nav-back, html.touch .nav-close { min-width: 40px; min-height: 40px; }
@media (orientation: landscape) and (max-height: 520px) {
  html.touch .vstick { bottom: calc(var(--sab) + 16px); }
  html.touch .vstick-move { left: calc(var(--sal) + 36px); }
  html.touch .vstick-look { right: calc(var(--sar) + 36px); }
  html.touch #action-button { bottom: calc(var(--sab) + 40px); right: calc(var(--sar) + 196px); }
  html.touch .emote-items { max-height: calc(var(--vvh, 100vh) * 0.42); }
  html.touch #chat-log { max-height: calc(3 * 1.35em + 8px); }
}

/* People (js/social.mjs): who is here / online, apartments, friends. Phone first. */
.people { width: min(520px, 100%); max-height: min(640px, 100%); grid-template-rows: auto auto 1fr auto; padding: 12px; gap: 10px; min-height: 0; }
.people-header { display: flex; align-items: center; gap: 10px; }
.people-header h1 { flex: 1; }
.people-online { font-size: 12px; font-variant-numeric: tabular-nums; }
.people-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.people-tabs::-webkit-scrollbar { display: none; }
.people-tabs button { flex: none; min-height: 36px; padding: 4px 14px; border-radius: 18px; background: transparent; }
.people-tabs button[aria-selected="true"] { background: rgb(109 179 255 / 0.22); border-color: var(--accent); }
.people-list { overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 6px; min-height: 0; }
.people-list p { margin: 4px 2px; }
.people-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgb(255 255 255 / 0.05); }
.people-who { flex: 1; min-width: 0; display: grid; }
.people-name { display: flex; align-items: center; gap: 6px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-badge { font-size: 10px; font-weight: 400; padding: 1px 6px; border-radius: 8px; background: rgb(109 179 255 / 0.2); color: var(--hud-muted); }
.people-actions { display: flex; gap: 6px; flex: none; }
.people-actions button { min-height: 36px; }
.people-card { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.12); }
.people-card p { margin: 0; }
.people-card-title { display: flex; align-items: center; gap: 10px; }
.people-card-title h2 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
@media (max-width: 600px) { .people { max-height: 100%; } .people-row { flex-wrap: wrap; } .people-actions { width: 100%; justify-content: flex-end; } }
/* The People panel's RPCN parts (js/rpcn.mjs, js/social.mjs). */
.rpcn-form { display: grid; gap: 6px; }
.rpcn-form input { text-align: left; font-size: 16px; }
.linkish { background: none; border: none; color: var(--accent); padding: 0; min-height: 0; text-decoration: underline; cursor: pointer; }
.people-compose { display: grid; gap: 6px; }
.people-compose textarea { width: 100%; min-height: 64px; resize: vertical; font: inherit; }
.people-item { display: grid; gap: 2px; padding: 6px 8px; border-radius: 10px; background: rgb(255 255 255 / 0.05); }
.people-item.outgoing { background: rgb(109 179 255 / 0.1); }
.people-item-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.people-add { display: flex; gap: 6px; }
.people-add input { flex: 1; min-width: 0; }
.people-unread { font-size: 11px; padding: 0 6px; border-radius: 8px; background: #d9706b; color: #fff; margin-left: 4px; }
#chat-log .chat-pm b { color: #f0c36b; }

/* Wardrobe (js/wardrobe.mjs): Home's tiles over the 3D preview (background = COREDATA
   wardrobe_background_c.dds, drawn by three.js); avatar right of the menu, or above it on phones. */
#wardrobe { position: fixed; inset: 0; z-index: 12; display: grid; grid-template-columns: minmax(0, 640px) 1fr; align-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(70px, calc(env(safe-area-inset-bottom) + 70px)) max(16px, env(safe-area-inset-left), 7vw); color: #fff; touch-action: none; user-select: none; }
#wardrobe[hidden] { display: none; }
#wardrobe .ward-stage { grid-column: 2; grid-row: 1; align-self: stretch; }
.ward-panel { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; max-height: 100%; min-height: 0; }
.ward-crumbs { display: grid; gap: 0; }
.ward-crumb { position: relative; display: block; width: 44px; height: 44px; margin-top: -30px; background: #fff; border: 3px solid #1d8fd6; border-radius: 6px; box-shadow: 0 2px 4px rgb(0 0 0 / .25); }
.ward-crumb:first-child { margin-top: 0; }
.ward-crumb .ward-mask { position: absolute; inset: 4px; background: #1a9be0; mask: center / contain no-repeat; -webkit-mask: center / contain no-repeat; }
.ward-grid { display: grid; grid-template-columns: repeat(4, minmax(64px, 142px)); gap: 8px; overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 120px); padding: 12px 10px; overscroll-behavior: contain; touch-action: pan-y; }
.ward-tile { position: relative; display: grid; grid-template-rows: 1fr auto; padding: 0; aspect-ratio: 1 / 1.05; border: 4px solid #1d8fd6; border-radius: 6px; background: linear-gradient(#2aa3ea, #1678c4); box-shadow: 0 2px 5px rgb(0 0 0 / .25); overflow: hidden; color: #fff; transition: transform .12s; }
.ward-tile .ward-icon { display: grid; place-items: center; margin: 3px 3px 0; background: linear-gradient(#fff, #e9eef3); border-radius: 3px; min-height: 0; overflow: hidden; }
.ward-tile .ward-icon { position: relative; }
.ward-tile img { width: 100%; height: 100%; object-fit: contain; }
/* Home tints its white menu art with the OSD colour (default blue). */
.ward-tile.tint .ward-mask { position: absolute; inset: 8%; background: #1a9be0; mask: center / contain no-repeat; -webkit-mask: center / contain no-repeat; }
.ward-tile.tint img { position: absolute; inset: 8%; width: 84%; height: 84%; mix-blend-mode: multiply; }
html.wardrobe-open #labels, html.wardrobe-open header.hud, html.wardrobe-open #chat, html.wardrobe-open #status, html.wardrobe-open #stats, html.wardrobe-open .emotes, html.wardrobe-open #touch-layer, html.wardrobe-open #action-button { visibility: hidden; }
.ward-tile .ward-label { padding: 3px 4px 4px; font-size: 15px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgb(0 0 0 / .3); }
.ward-tile.small .ward-label { font-size: 13px; }
.ward-tile.selected, .ward-tile:focus-visible { transform: scale(1.1); z-index: 1; border-color: #3cb2f5; box-shadow: 0 4px 12px rgb(0 0 0 / .35); outline: none; }
.ward-tile:not(:disabled):hover { border-color: #3cb2f5; }
.ward-tile:disabled { opacity: .45; cursor: default; filter: grayscale(.5); }
.ward-empty { grid-column: 1 / -1; color: #1d5f8f; background: rgb(255 255 255 / .7); padding: 8px 12px; border-radius: 8px; }
.ward-hint { position: fixed; left: 50%; bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 6px; background: rgb(40 44 50 / .78); white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; }
.ward-hint button { background: transparent; border: 0; color: #fff; font-weight: 600; padding: 4px 6px; }
.ward-hint button:disabled { opacity: .45; }
.ward-hint b { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
.ward-turn { position: fixed; right: 16px; bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)); display: flex; gap: 6px; }
.ward-turn button { width: 42px; height: 42px; border-radius: 50%; background: rgb(40 44 50 / .6); border-color: transparent; color: #fff; font-size: 20px; padding: 0; }
.ward-dialog { position: fixed; inset: 0; display: grid; place-items: center; background: rgb(0 20 40 / .25); z-index: 2; }
.ward-dialog-card { min-width: 240px; padding: 16px 20px; border-radius: 8px; background: rgb(40 44 50 / .92); text-align: center; display: grid; gap: 12px; }
.ward-dialog-card p { margin: 0; font-size: 17px; font-weight: 600; }
.ward-dialog-card div { display: flex; gap: 10px; justify-content: center; }
.ward-dialog-card button { min-width: 80px; }
.ward-toast { position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%); padding: 6px 12px; border-radius: 6px; background: rgb(40 44 50 / .85); }
.ward-note { grid-column: 1 / -1; justify-self: center; padding: 12px 16px; border-radius: 8px; background: rgb(40 44 50 / .85); text-align: center; }
/* Home's white screen fader (js/wardrobe.mjs): the cut into and out of the wardrobe. */
#scene-fade { position: fixed; inset: 0; z-index: 13; background: #fff; pointer-events: none; display: grid; place-items: center; color: #fff; }
#scene-fade[hidden] { display: none; }
/* Home's wardrobe entrance (native frame captures): the main menu's tiles drop in from above as the
   white fade ends, at a constant speed, overshoot 4.6 % of the screen and settle by 2.6 s. */
.ward-panel.entering .ward-grid { overflow: visible; }
.ward-panel.entering .ward-tile { animation: ward-drop 1.65s calc(0.95s + var(--drop, 0s)) backwards; }
@keyframes ward-drop {
  0% { translate: 0 -64vh; animation-timing-function: linear; }
  50% { translate: 0 4.6vh; animation-timing-function: ease-in-out; }
  76% { translate: 0 -0.7vh; animation-timing-function: ease-in-out; }
  100% { translate: 0 0; }
}
@media (max-aspect-ratio: 1/1) {
  #wardrobe { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-items: end; padding-left: 10px; padding-right: 10px; }
  #wardrobe .ward-stage { grid-column: 1; grid-row: 1; }
  .ward-panel { grid-column: 1; grid-row: 2; }
  .ward-grid { grid-template-columns: repeat(4, minmax(56px, 1fr)); max-height: 42vh; }
  .ward-tile .ward-label { font-size: 12px; }
  .ward-crumb { width: 34px; height: 34px; }
  .ward-hint { left: 10px; transform: none; max-width: calc(100% - 120px); }
}
/* Storage (Home: grey tiles and dark art) and items marked to move (darkened). */
.ward-grid.storage .ward-tile { border-color: #3a3d42; background: linear-gradient(#55595f, #2f3236); }
.ward-grid.storage .ward-tile.tint .ward-mask { background: #3a3d42; }
.ward-tile.marked { filter: brightness(.45); }

/* ============================================================================================
   Home menus, panels, Navigator, Options/Graphics, loading screen, start-up and news viewer
   (js/ui.mjs, js/frontend.mjs, js/settings.mjs). Owner: menus/settings UI. Art: Home's
   own (COREDATA menuscreen + hubosd skin + data/frontend, /bundles/ui, server ui.rs); every piece
   has a CSS fallback for servers without the newer art (html.osd-art is set when it answers).
   Measured on native frames (<native>/.local/native-runs/20261023-055139-drive@settings): OSD blue
   (0,147,210), name blue (0,156,220), legend strip rgb(0 0 0 / .55) at the bottom, start-menu
   icons ~80 px at 720p with ~110 px pitch, loading text at 4.7 % / 82 % of the screen.
   ============================================================================================ */
/* Home's OSD font: the console's own Rodin Latin (PS3 firmware dev_flash/data/font, served by the
   server from the user's files: /api/lua/font/reg|bold, lua/coredata.rs; never bundled). Older
   servers answer 404 and the stack below falls back to rounded system fonts. */
@font-face { font-family: "Home Rodin"; src: url(/api/lua/font/reg) format("truetype"); font-weight: 100 549; font-display: swap; }
@font-face { font-family: "Home Rodin"; src: url(/api/lua/font/bold) format("truetype"); font-weight: 550 900; font-display: swap; }
:root {
  --osd: #0093d2; --osd-hi: #2ac0fd; --osd-deep: #005f8d; --osd-name: #009cdc;
  --h-font: "Home Rodin", "SCE-PS3 Rodin", "NewRodin", "Rodin", ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Segoe UI", system-ui, sans-serif;
  --h-panel: linear-gradient(#1d1f23, #0c0d0f);
  --h-ease: cubic-bezier(.2, .8, .2, 1);
}
header.hud button { display: inline-flex; align-items: center; gap: 6px; }
#place { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small { font-size: 12px; margin: 0; }
#overlay { position: fixed; inset: 0; z-index: 10; font-family: var(--h-font); background: rgb(0 0 0 / 0.6); display: grid; place-items: center; padding: 16px; animation: h-fade .18s ease-out; }
#overlay[hidden], #loading[hidden] { display: none; }
/* Home hides its HUD under the menu screens (the world stays, dimmed). */
html.menu-open header.hud, html.menu-open #chat, html.menu-open #stats, html.menu-open #status, html.menu-open #touch-layer, html.menu-open #action-button, html.menu-open .emotes, html.menu-open #a2hs { visibility: hidden; }
#overlay.page-menu, #overlay.page-navigator, #overlay.page-options, #overlay.page-help { display: block; padding: 0; }
/* The Navigator's own backdrop: Home's blue rays (the reference Navigator), drawn in CSS. */
#overlay.page-navigator { background:
  radial-gradient(120% 95% at 50% 45%, rgb(110 200 240 / .0) 0 30%, rgb(10 70 120 / .55) 100%),
  repeating-conic-gradient(from 0deg at 50% 46%, rgb(255 255 255 / .07) 0deg 4deg, rgb(255 255 255 / 0) 4deg 11deg),
  radial-gradient(circle at 50% 46%, #6fd0f5 0%, #3aa7e0 38%, #1c78bd 100%); }
@keyframes h-fade { from { opacity: 0; } }
@keyframes h-spin { to { transform: rotate(1turn); } }

/* --- PS3 pad symbols (hubosd fonts/buttonicons) and Home's legend line ----------------------- */
.pad { display: inline-grid; place-items: center; flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.25em; border-radius: 50%; border: 1.5px solid currentColor; font-size: inherit; line-height: 1; font-weight: 700; }
.pad::before { font-size: .62em; }
.pad.pad-l1, .pad.pad-r1, .pad.pad-l2, .pad.pad-r2, .pad.pad-start, .pad.pad-select, .pad.pad-dpadall { border-radius: 3px; font-size: .9em; }
html.osd-art .pad { border: 0; color: transparent; font-size: 0; width: 1.3em; height: 1.3em; background: center / contain no-repeat; }
html.osd-art .pad { font-size: inherit; overflow: hidden; text-indent: 200%; white-space: nowrap; }
/* UI QA: the art is a 32x32 font cell with the glyph in x 6-26, y 12-32: crop to the glyph so it sits on the line at text size. */
html.osd-art .pad { width: 1.15em; height: 1.15em; vertical-align: -.2em; background-size: 160%; background-position: 50% 100%; }
html.osd-art .pad-cross { background-image: url(/bundles/ui/pad-cross.png); }
html.osd-art .pad-circle { background-image: url(/bundles/ui/pad-circle.png); }
html.osd-art .pad-triangle { background-image: url(/bundles/ui/pad-triangle.png); }
html.osd-art .pad-square { background-image: url(/bundles/ui/pad-square.png); }
html.osd-art .pad-start { background-image: url(/bundles/ui/pad-start.png); }
html.osd-art .pad-select { background-image: url(/bundles/ui/pad-select.png); }
html.osd-art .pad-dpadall { background-image: url(/bundles/ui/pad-dpadall.png); }
html.osd-art .pad-l1 { background-image: url(/bundles/ui/pad-l1.png); }
html.osd-art .pad-r1 { background-image: url(/bundles/ui/pad-r1.png); }
html.osd-art .pad-l3 { background-image: url(/bundles/ui/pad-l3.png); }
html.osd-art .pad-r2 { background-image: url(/bundles/ui/pad-r2.png); }
/* Home's button legend strip (js/home-ui.mjs legend, every screen; docs/ui/UI-KIT.md "Legend").
 * Native 1280x720 frames (drive@settings m0, osd-colour 01-03): a near-black strip, 46 units high,
 * across the bottom; entries right-aligned ending at x 1033 (19.3 % from the right); the
 * hubosd buttonicons glyph 20 high, 3 to its label and between entries, Rodin 15 (measured: "✕ Select ○ Back" 125 wide). Same place and look on every
 * screen, so only the entries change. Phones: centred, tappable, above the home indicator. */
.h-legend { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; display: flex; justify-content: flex-end; align-items: center; flex-wrap: nowrap; gap: 0 calc(var(--hud-k, 1) * 3px);
  height: calc(var(--hud-k, 1) * 46px + env(safe-area-inset-bottom)); min-height: 0; margin: 0; padding: 0 max(19.3vw, calc(env(safe-area-inset-right) + 16px)) calc(env(safe-area-inset-bottom) + var(--hud-k, 1) * 4px) 16px;
  background: rgb(0 0 0 / .8); color: #fff; font: 400 calc(var(--hud-k, 1) * 15px) / 1 var(--h-font); white-space: nowrap; pointer-events: auto; }
.h-legend.inline, .nav-detail .h-legend, .news-article .h-legend { position: static; z-index: auto; height: auto; padding: 0; background: none; justify-content: flex-start; flex-wrap: wrap; font-size: 14px; gap: 4px 10px; }
.legend-key { display: inline-flex; align-items: center; gap: calc(var(--hud-k, 1) * 6px); margin: 0; padding: calc(var(--hud-k, 1) * 3px) calc(var(--hud-k, 1) * 1px); border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; cursor: default; }
.h-legend .hk-pad, .h-legend .pad { width: 1.3em; height: 1.3em; vertical-align: -.25em; }
button.legend-key { cursor: pointer; }
/* Home has no pointer: hover / focus only light the entry a little (no colour change). */
button.legend-key:hover, button.legend-key:focus-visible { color: #fff; outline: none; text-shadow: 0 0 6px rgb(255 255 255 / .55); background: rgb(255 255 255 / .08); }
button.legend-key:active { background: rgb(255 255 255 / .16); }
.legend-key kbd { display: none; }
html.touch .h-legend:not(.inline) { justify-content: center; flex-wrap: wrap; height: auto; min-height: calc(44px + env(safe-area-inset-bottom)); padding: 0 max(10px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px, env(safe-area-inset-left)); gap: 0 4px; font-size: 15px; }
html.touch button.legend-key { min-height: 40px; padding: 0 8px; }

/* --- Buttons, panels, lists, controls (Home's OSD art) --------------------------------------- */
.h-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 4px 18px; border: 1px solid #63c6f2; border-radius: 6px; color: #fff; font: 600 15px/1 var(--h-font);
  background: linear-gradient(#3fb4ea 0%, #0b93d3 48%, #0079b8 52%, #005f8d 100%); box-shadow: 0 2px 5px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .35); text-shadow: 0 1px 1px rgb(0 0 0 / .3); transition: filter .12s, transform .12s; }
html.osd-art .h-btn { border-color: transparent; border-width: 0 13px; border-style: solid; border-image: url(/bundles/ui/osd-legend-blue.png) 0 24 fill / 0 13px stretch; background: none; box-shadow: none; padding: 4px 6px; }
.h-btn:hover, .h-btn:focus-visible { filter: brightness(1.18); outline: none; }
.h-btn:active { transform: scale(.97); }
.h-btn:disabled { filter: grayscale(1) brightness(.7); cursor: default; }
.h-btn.small { min-height: 30px; font-size: 13px; padding: 2px 12px; }
.h-btn.dark { background: linear-gradient(#3a3d42, #16171a); border-color: #4b4f56; }
html.osd-art .h-btn.dark { border-image: url(/bundles/ui/osd-list.png) 0 12 fill / 0 12px stretch; }
.h-btn .pad { color: #fff; }
.h-panel { background: var(--h-panel); border: 1px solid rgb(255 255 255 / 0.1); border-radius: 6px; box-shadow: 0 8px 28px rgb(0 0 0 / .45); }
html.osd-art .h-panel { border: 12px solid transparent; border-image: url(/bundles/ui/osd-chip.png) 12 fill / 12px stretch; background: none; box-shadow: none; }
.h-header { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px 0 4px; color: #fff; border-radius: 8px; background: linear-gradient(#26282c, #050506); }
html.osd-art .h-header { border: 0 solid transparent; border-width: 0 12px; border-image: url(/bundles/ui/osd-header.png) 0 12 fill / 0 12px stretch; background: none; padding: 0 2px; }
.h-header h1 { flex: 1; margin: 0; font: 600 18px/1.2 var(--h-font); }
.h-list { display: grid; gap: 4px; align-content: start; }
.h-item { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 12px; text-align: left; color: #e9ecef; font: 600 13px/1.25 var(--h-font); border: 1px solid #2c2f34; border-radius: 4px;
  background: linear-gradient(#232528, #070708); transition: background .1s, color .1s; }
html.osd-art .h-item { border: 0 solid transparent; border-width: 0 12px; border-image: url(/bundles/ui/osd-list.png) 0 12 fill / 0 12px stretch; background: none; padding: 4px 2px; }
.h-item:hover, .h-item:focus-visible { color: #fff; outline: none; filter: brightness(1.25); }
.h-item.selected, .h-item[aria-checked="true"] { color: #1d1f22; background: linear-gradient(90deg, #f3f4f5, #b9bcbf 55%, #9a9da1); border-color: #e7e9eb; filter: none; }
html.osd-art .h-item.selected, html.osd-art .h-item[aria-checked="true"] { border-image-source: url(/bundles/ui/osd-list-hl.png); background: none; }
.h-check { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; padding: 0; border-radius: 4px; border: 1px solid #50555c; background: #0b0c0e; cursor: pointer; display: grid; place-items: center; }
.h-check::after { content: ""; width: 12px; height: 12px; border-radius: 2px; }
.h-check:checked::after { background: var(--osd-hi); box-shadow: 0 0 8px var(--osd); }
.h-select { min-width: 9em; max-width: 100%; font: 600 14px var(--h-font); color: #fff; background: #111316; border: 1px solid #3a3e44; border-radius: 4px; padding: 6px 8px; }
input[type="range"].h-slider { accent-color: var(--osd); width: 100%; }
.h-progress { position: relative; display: block; height: 10px; border-radius: 5px; overflow: hidden; background: linear-gradient(#050506, #2a2c30); box-shadow: inset 0 1px 2px rgb(0 0 0 / .8); }
.h-progress-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--f, 0)); transition: transform .2s linear; background: linear-gradient(#5bd0ff, var(--osd) 55%, var(--osd-deep)); border-radius: inherit; }
.indeterminate .h-progress-fill { width: 30%; transform: none; animation: h-indeterminate 1.2s linear infinite; }
@keyframes h-indeterminate { from { translate: -100% 0; } to { translate: 340% 0; } }

/* --- Start menu: Home's row of round icons ----------------------------------------------- */
.menu-screen { position: fixed; inset: 0; display: grid; align-content: start; justify-items: center; padding: max(11vh, calc(env(safe-area-inset-top) + 20px)) 12px 80px; }
.menu-ring { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(6px, 2.4vw, 30px); }
.menu-item { --size: clamp(54px, 6.4vw, 84px); position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; width: calc(var(--size) + 26px); padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  animation: menu-in .32s var(--h-ease) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-14px) scale(.9); } }
.menu-item:disabled { cursor: default; opacity: .38; }
.mi { position: relative; width: var(--size); height: var(--size); transition: transform .15s var(--h-ease); }
.mi > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.mi-white { opacity: .42; }
.mi-symbol { opacity: 0; background: linear-gradient(#7fdcff, var(--osd) 55%, #00669a); mask: center / contain no-repeat; -webkit-mask: center / contain no-repeat; transition: opacity .12s; }
.mi-ring { inset: -9%; width: 118%; height: 118%; border-radius: 50%; opacity: 0; transition: opacity .12s; box-shadow: 0 0 0 3px var(--osd), 0 0 14px 2px rgb(42 192 253 / .75), inset 0 0 10px rgb(42 192 253 / .6); }
.menu-label { font: 600 15px/1.2 var(--h-font); white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .12s, transform .12s; text-shadow: 0 1px 3px #000; }
.menu-item:not(:disabled):hover .mi, .menu-item:focus-visible .mi { transform: scale(1.06); }
.menu-item:not(:disabled):hover .mi-symbol, .menu-item:focus-visible .mi-symbol, .menu-item:not(:disabled):hover .mi-ring, .menu-item:focus-visible .mi-ring { opacity: 1; }
.menu-item:not(:disabled):hover .mi-white, .menu-item:focus-visible .mi-white { opacity: 0; }
.menu-item:not(:disabled):hover .menu-label, .menu-item:focus-visible .menu-label { opacity: 1; transform: none; }
.menu-item:focus-visible { outline: none; }
html.touch .menu-label { opacity: .85; transform: none; font-size: 12px; }
.menu-mode { margin: 26px 0 0; font: 500 13px var(--h-font); color: rgb(255 255 255 / .7); }
.menu-mode b { color: #fff; }
/* Older layered icons (People panel, Navigator fallbacks). */
.layered { position: relative; display: inline-block; flex: none; }
.layered img { position: absolute; inset: 0; width: 100%; height: 100%; }
.layered .hl { opacity: .55; transition: opacity .12s, filter .12s; }
button:hover .layered .hl, button:focus-visible .layered .hl, .active .layered .hl { opacity: 1; filter: drop-shadow(0 0 6px rgb(42 192 253 / .8)); }
button:disabled .layered .hl { opacity: .25; }
.layered.swap .hl { opacity: 0; filter: none; }
button:hover .layered.swap .hl, button:focus-visible .layered.swap .hl, .active .layered.swap .hl { opacity: 1; filter: none; }

/* --- Navigator (Home 1.87): tiles along the top, a column of cards, details beside --------- */
.navigator { --colx: max(16px, calc(50vw - 380px)); --tile-w: clamp(150px, 20.5vw, 290px); --card-w: clamp(220px, 25vw, 320px); --detail-w: min(350px, calc(100vw - var(--colx) - var(--card-w) - 40px));
  position: fixed; inset: 0; font-family: var(--h-font); color: #fff; overflow: hidden; }
.nav-top { position: absolute; top: max(14px, env(safe-area-inset-top)); left: var(--colx); right: max(16px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 12px; z-index: 3; }
.nav-search { width: min(260px, 50vw); font: 500 14px var(--h-font); padding: 6px 10px; border-radius: 16px; background: rgb(0 0 0 / .45); border: 1px solid rgb(255 255 255 / .18); }
.nav-online { flex: 1; text-align: right; font-size: 12px; color: rgb(255 255 255 / .7); font-variant-numeric: tabular-nums; }
.nav-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: rgb(0 0 0 / .35); border: 1px solid rgb(255 255 255 / .15); color: #fff; font-size: 18px; }
.nav-tiles { position: absolute; left: 0; right: 0; top: 15.5vh; display: flex; align-items: end; gap: 22px; overflow-x: auto; overflow-y: hidden;
  padding: 8px calc(100vw - var(--colx) - var(--tile-w)) 10px var(--colx); scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; z-index: 2; }
.nav-tiles::-webkit-scrollbar { display: none; }
.nav-tile { flex: none; width: calc(var(--tile-w) * .84); padding: 0; border: 0; background: none; color: #fff; text-align: right; cursor: pointer; transition: width .22s var(--h-ease); box-shadow: 0 6px 14px rgb(0 0 0 / .35); }
.nav-tile.active { width: var(--tile-w); box-shadow: 0 10px 24px rgb(0 0 0 / .45); }
.nav-tile-art { display: block; width: 100%; aspect-ratio: 324 / 152; object-fit: cover; image-rendering: auto; background: linear-gradient(115deg, #6a6a6a 0 26%, #2b2b2b 26.2% 100%); }
.nav-tile-art.fallback { display: grid; place-items: center; }
.nav-tile-label { display: block; padding: 7px 6px 6px; font: 600 13px/1 var(--h-font); letter-spacing: .01em; background: linear-gradient(#2c2e31 0 45%, #121315 55% 100%); border-top: 2px solid #050506; -webkit-font-smoothing: antialiased; }
html.osd-art .nav-tile-label { background: url(/bundles/ui/nav-bar.png) center / 100% 100%; }
.nav-tile.active .nav-tile-label { font-size: 15px; }
.nav-tile:focus-visible { outline: 2px solid var(--osd-hi); outline-offset: 3px; }
.nav-crumbs { position: absolute; left: var(--colx); top: calc(15.5vh + var(--tile-w) * 152 / 324 + 52px); z-index: 2; display: flex; gap: 6px; font-size: 13px; color: rgb(255 255 255 / .75); }
.nav-crumbs[hidden] { display: none; }
.nav-column { position: absolute; left: 0; right: 0; top: calc(15.5vh + var(--tile-w) * 152 / 324 + 76px); bottom: 56px; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y proximity; padding: 0 0 60vh var(--colx);
  scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; }
.nav-column::-webkit-scrollbar { display: none; }
.nav-row { display: grid; grid-template-columns: var(--card-w) var(--detail-w); gap: 18px; align-items: start; scroll-snap-align: start; margin-bottom: 18px; }
.nav-row.unavailable .nav-card { opacity: .45; }
.nav-card { position: relative; display: block; width: calc(var(--card-w) * .82); margin-left: calc(var(--card-w) * .09); padding: 0; border: 0; background: #111; color: #fff; text-align: right; cursor: pointer; transition: width .2s var(--h-ease), margin .2s var(--h-ease); box-shadow: 0 6px 14px rgb(0 0 0 / .4); }
.nav-row.selected .nav-card { width: var(--card-w); margin-left: 0; }
.nav-card-art { display: block; width: 100%; aspect-ratio: 320 / 176; object-fit: cover; background: linear-gradient(115deg, #5b5b5b 0 26%, #262626 26.2%); }
.nav-card-art.fallback { display: grid; place-items: center; }
.nav-card-label { display: block; padding: 7px 6px 6px; font: 600 13px/1.1 var(--h-font); background: linear-gradient(#2c2e31 0 45%, #121315 55% 100%); border-top: 2px solid #050506; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-font-smoothing: antialiased; }
.nav-row.selected .nav-card-label { font-size: 15px; }
.nav-card-fav { position: absolute; left: 6px; bottom: 34px; width: 26px; height: 26px; }
.nav-card-badges { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; align-items: center; }
.nav-players { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #c9f5c4; background: rgb(0 0 0 / .55); padding: 1px 5px; border-radius: 8px; }
.nav-card:focus-visible { outline: 2px solid var(--osd-hi); outline-offset: 3px; }
.nav-detail { display: flex; flex-direction: column; gap: 6px; height: calc(var(--card-w) * 176 / 320 + 30px); padding: 10px 12px; background: linear-gradient(rgb(48 78 98 / .9), rgb(30 56 74 / .9)); border: 1px solid rgb(160 210 235 / .35); box-shadow: 0 8px 22px rgb(0 0 0 / .3); animation: h-fade .2s ease-out; overflow: hidden; }
.nav-detail .h-progress { height: 22px; border-radius: 3px; background: linear-gradient(#0c1d28, #1f3b4d); border: 1px solid rgb(160 210 235 / .4); }
.nav-detail .h-progress-fill { border-radius: 2px; background: linear-gradient(#7fd6ff, #2a9bd8 50%, #1678b5); }
.nav-detail > * { flex: none; }
.nav-detail > .nav-description { flex: 1 1 auto; min-height: 2.6em; }
.nav-detail h2 { margin: 0; font: 600 20px/1.15 var(--h-font); }
.nav-maker { margin: 0; font: 600 14px var(--h-font); color: #e6e6e6; }
.nav-description { margin: 0; padding-left: 14px; font: 500 14px/1.32 var(--h-font); overflow-y: auto; white-space: pre-line; overscroll-behavior: contain; }
.nav-meta { margin: 0; font-size: 12px; color: rgb(255 255 255 / .7); }
/* Dev mode (docs/ops/DEV-MODE.md): a dev space's Copy link, at the end of the detail card's meta line. */
.nav-dev-copy { font: inherit; line-height: 1.2; color: #fff; background: rgb(255 255 255 / .15); border: 1px solid rgb(255 255 255 / .35); border-radius: 3px; padding: 0 6px; cursor: pointer; }
.nav-download { display: grid; gap: 4px; font-size: 13px; }
.nav-download[hidden] { display: none; }
.nav-empty { width: var(--card-w); padding: 18px 12px; text-align: center; font: 600 15px var(--h-font); color: #fff; background: rgb(0 0 0 / .45); }
.nav-row.friend .nav-card-art.fallback { background: linear-gradient(115deg, #5b5b5b 0 26%, #262626 26.2%); }
.nav-row.friend.offline .nav-card { opacity: .6; }

/* --- Options (Home's submenu: header with the icon, list of entries, the page) ------------ */
.options { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(200px, 290px) minmax(0, 600px); grid-template-rows: auto minmax(0, 1fr); align-content: start; justify-content: center; gap: 14px 24px;
  padding: max(9vh, calc(env(safe-area-inset-top) + 12px)) max(16px, env(safe-area-inset-right)) 70px max(16px, env(safe-area-inset-left)); font-family: var(--h-font); color: #fff; }
.options > .h-header { grid-column: 1; grid-row: 1; }
.options .opt-tabs { grid-column: 1; grid-row: 2; }
.options .opt-page { grid-column: 2; grid-row: 1 / 3; min-height: 0; max-height: calc(100vh - 9vh - 90px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
.h-header .mi { width: 44px; height: 44px; margin: 4px; }
.h-header .mi-symbol, .h-header .mi-ring { opacity: 1; }
.h-header .mi-white { opacity: 0; }
.h-header .nav-close { width: 34px; height: 34px; }
.opt-page h2 { margin: 0; font: 600 18px var(--h-font); }
.opt-page h3.gfx-group { margin: 8px 0 0; font: 600 13px var(--h-font); letter-spacing: .04em; text-transform: uppercase; color: rgb(255 255 255 / .65); }
.opt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 40px; padding: 4px 0; border-bottom: 1px solid rgb(255 255 255 / .06); }
.opt-row > output { min-width: 2.5em; text-align: right; font-variant-numeric: tabular-nums; }
.opt-row:has(.h-slider) { grid-template-columns: 9em minmax(0, 1fr) auto; }
.opt-label { display: grid; gap: 2px; font: 600 14px var(--h-font); }
.opt-label small { font-weight: 500; font-size: 11.5px; }
.opt-form { display: grid; gap: 10px; }
.opt-form input { font: 600 16px var(--h-font); padding: 8px 10px; }
.gfx-current { display: grid; gap: 3px; padding: 12px 14px; border-radius: 6px; background: linear-gradient(135deg, rgb(0 147 210 / .32), rgb(0 95 141 / .18)); border: 1px solid rgb(42 192 253 / .45); }
.gfx-current-label { font: 600 11px var(--h-font); letter-spacing: .08em; text-transform: uppercase; color: #9fe0ff; }
.gfx-current-name { font: 700 22px/1.1 var(--h-font); }
.gfx-current-note { font-size: 13px; color: rgb(255 255 255 / .85); }
.gfx-mode { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 52px; padding-top: 6px; padding-bottom: 6px; cursor: pointer; }
.gfx-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; opacity: .7; }
.gfx-mode[aria-checked="true"] .gfx-radio { opacity: 1; background: radial-gradient(circle, var(--osd) 0 45%, transparent 50%); border-color: var(--osd-deep); }
.gfx-mode-text { display: grid; gap: 2px; }
.gfx-mode-name { display: flex; align-items: center; gap: 8px; font: 700 14px var(--h-font); }
.gfx-mode-note { font: 500 12px/1.3 var(--h-font); opacity: .8; }
.gfx-badge { font: 700 10px var(--h-font); letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 8px; background: var(--osd); color: #fff; }
.gfx-ms { font: 700 13px var(--h-font); font-variant-numeric: tabular-nums; color: #9be59a; }
.gfx-ms.slow { color: #f0a46b; }
.gfx-other summary { cursor: pointer; padding: 6px 0; font: 600 13px var(--h-font); color: rgb(255 255 255 / .75); }
.gfx-bench-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gfx-bench-row .h-progress { flex: 1 1 160px; }
.gfx-results { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.gfx-results th, .gfx-results td { padding: 5px 6px; text-align: left; border-bottom: 1px solid rgb(255 255 255 / .08); font-variant-numeric: tabular-nums; }
.gfx-results tr.best td { color: #9fe0ff; font-weight: 700; }
.gfx-tag { display: inline-block; margin-left: 6px; font: 600 10px var(--h-font); padding: 1px 6px; border-radius: 8px; background: rgb(255 255 255 / .12); color: rgb(255 255 255 / .75); vertical-align: 1px; }
.gfx-reload { position: sticky; bottom: -14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; margin: 4px -16px -14px; background: rgb(0 30 45 / .95); border-top: 1px solid var(--osd); }
#overlay.measuring { background: rgb(0 0 0 / .15); }
#overlay.measuring .opt-tabs, #overlay.measuring > .options > .h-header { opacity: .3; }
.help { position: fixed; left: 50%; top: 12vh; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); padding: 14px 18px; display: grid; gap: 10px; font-family: var(--h-font); }
.help p { margin: 0; font-size: 14px; line-height: 1.4; }
/* Generic panels (People, older dialogs). */
.panel { font-family: var(--h-font); background: var(--h-panel); border: 1px solid rgb(255 255 255 / 0.12); border-radius: 8px; padding: 18px; width: min(420px, 100%); display: grid; gap: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .5); }
.panel label { display: grid; gap: 4px; }
.panel h1 { margin: 0; font: 600 18px var(--h-font); }
.muted { color: var(--hud-muted); }

/* --- Notifications (hubosd notifications art: a dark bar with an icon) ------------------- */
#notifications { position: fixed; top: max(14px, calc(env(safe-area-inset-top) + 8px)); right: max(14px, env(safe-area-inset-right)); z-index: 40; display: grid; gap: 8px; justify-items: end; pointer-events: none; font-family: var(--h-font); }
.h-note { display: flex; align-items: center; gap: 10px; max-width: min(460px, calc(100vw - 28px)); padding: 8px 12px 8px 8px; border-radius: 6px; background: linear-gradient(#2b2e33, #101113); border: 1px solid #3c4046; color: #fff; font-size: 13px; line-height: 1.3; box-shadow: 0 4px 16px rgb(0 0 0 / .5); pointer-events: auto; animation: note-in .25s var(--h-ease); }
.h-note.leaving { opacity: 0; transform: translateX(20px); transition: opacity .25s, transform .25s; }
@keyframes note-in { from { opacity: 0; transform: translateX(30px); } }
.note-icon { flex: none; width: 30px; height: 30px; border-radius: 6px; background: var(--osd) center / 70% no-repeat; }
html.osd-art .note-icon { background-image: url(/bundles/ui/note-info.png); }
.note-body { display: grid; gap: 6px; min-width: 0; }
.note-body .h-progress { height: 6px; }

/* --- Loading screen (Home 1.87): the picture blurred, spinner + name + tip bottom-left ------ */
#loading { position: fixed; inset: 0; z-index: 20; overflow: hidden; background: #000; font-family: var(--h-font); color: #fff; animation: h-fade .25s ease-out; }
#loading.leaving { opacity: 0; transition: opacity 1s linear; pointer-events: none; }
.ld-bg > * { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(clamp(10px, 1.6vw, 22px)) brightness(.78) saturate(1.05); }
#loading canvas { display: none; filter: blur(clamp(8px, 1.2vw, 16px)) brightness(.8); }
#loading.from-frame canvas { display: block; }
#loading.from-frame img { display: none; }
.ld-info { position: absolute; left: max(4.7vw, calc(env(safe-area-inset-left) + 12px)); right: max(16px, env(safe-area-inset-right)); bottom: max(11vh, calc(env(safe-area-inset-bottom) + 24px));
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; row-gap: 4px; align-items: center; text-shadow: 0 1px 3px rgb(0 0 0 / .7); }
.ld-spinner { grid-row: 1; width: clamp(22px, 2.4vw, 32px); height: clamp(22px, 2.4vw, 32px); border-radius: 50%; border: 3px solid #fff; border-right-color: transparent; border-left-color: transparent; animation: h-spin 1s linear infinite; }
html.osd-art .ld-spinner { border: 0; background: url(/bundles/ui/osd-spinner.png) center / contain no-repeat; }
#loading-name { grid-column: 2; margin: 0; font: 500 clamp(17px, 2.8vh, 24px)/1.2 var(--h-font); }
#loading-tip { grid-column: 2; margin: 0; font: 500 clamp(12px, 2.1vh, 17px)/1.35 var(--h-font); max-width: 64em; }
#loading-tip .pad { margin: 0 2px; }
.ld-status { grid-column: 2; margin: 2px 0 0; font: 500 12px var(--h-font); color: rgb(255 255 255 / .65); min-height: 1em; }
#loading progress { display: none; }
.ld-www { position: absolute; top: max(6.5vh, calc(env(safe-area-inset-top) + 8px)); right: max(8.8vw, calc(env(safe-area-inset-right) + 12px)); width: clamp(40px, 4.7vw, 60px); aspect-ratio: 1; }
.ld-www::before, .ld-www::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.ld-www::before { border: 3px solid rgb(255 255 255 / .85); border-right-color: rgb(255 255 255 / .25); animation: h-spin 1.6s linear infinite; }
.ld-www::after { content: "WWW"; display: grid; place-items: center; font: 700 clamp(9px, 1.05vw, 13px) var(--h-font); color: #fff; background: rgb(60 64 70 / .7); inset: 12%; }
html.osd-art .ld-www::before { border: 0; background: url(/bundles/ui/osd-www-ring.png) center / contain no-repeat; }

/* --- Start-up ("Connecting to PlayStation®Home") and the front-end background -------------- */
.frontend-bg { background: radial-gradient(130% 90% at 50% 40%, #082332 0%, #021018 55%, #000507 100%); }
.frontend-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(-14deg, transparent 0 9vh, rgb(30 80 100 / .12) 9vh 13vh, transparent 13vh 26vh); }
#connecting { position: fixed; inset: 0; z-index: 22; display: grid; place-items: center; font-family: var(--h-font); color: #fff; transition: opacity .35s; }
#connecting.leaving { opacity: 0; }
.connecting-body { position: relative; display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); padding: 0 24px; }
.connecting-body h1 { margin: 0 0 6px; font: 500 clamp(17px, 2.8vh, 22px)/1.2 var(--h-font); }
.connecting-body p { margin: 0; max-width: 26em; font: 500 clamp(12px, 2vh, 15px)/1.25 var(--h-font); }
.home-mark { flex: none; width: clamp(80px, 22vh, 160px); aspect-ratio: 1; background: #fff; -webkit-mask: url(/bundles/ui/home-mark.png) center / contain no-repeat; mask: url(/bundles/ui/home-mark.png) center / contain no-repeat; animation: mark-pulse 2.4s ease-in-out infinite; }
html:not(.osd-art) .home-mark { -webkit-mask: none; mask: none; background: none; border: 10px solid #fff; border-radius: 14px 14px 14px 4px; }
@keyframes mark-pulse { 50% { opacity: .55; } }
#connecting .ld-www { position: absolute; }
/* A new visit: the front-end background under the Navigator (overlay is z 10, the HUD below). */
#start-backdrop { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; font-family: var(--h-font); color: #fff; }
#start-backdrop .ld-www { position: absolute; }
.start-pick { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; font: 600 15px var(--h-font); color: #fff; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .35); border-radius: 6px; cursor: pointer; }
html.menu-open #start-backdrop .connecting-body { visibility: hidden; }
#start-backdrop .connecting-body > div { min-width: 0; }
@media (max-aspect-ratio: 1/1) { #start-backdrop .connecting-body { flex-direction: column; text-align: center; } }
.start-pick:hover, .start-pick:focus-visible { background: rgb(60 178 245 / .35); border-color: #3cb2f5; outline: none; }

/* --- Home's news viewer (front page) ------------------------------------------------------ */
#news { position: fixed; inset: 0; z-index: 23; display: grid; grid-template-rows: minmax(0, 1fr) auto; font-family: var(--h-font); color: #333; animation: h-fade .3s ease-out; transition: opacity .3s; }
#news.leaving { opacity: 0; }
#news::after { content: ""; position: absolute; inset: -4%; z-index: -1; background: var(--news-bg, none) center / cover; filter: blur(6px) brightness(.9); }
.news-frame { position: relative; align-self: center; justify-self: center; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 5px; width: min(870px, calc(100vw - 32px)); height: min(545px, calc(100vh - 140px)); margin-top: max(0px, env(safe-area-inset-top)); }
.news-tabs { display: grid; align-content: start; gap: 3px; }
.news-tab { width: 58px; height: 58px; padding: 0; border: 1px solid #8d9196; border-radius: 0; display: grid; place-items: center; background: linear-gradient(#d4d6d8, #a9adb1); cursor: pointer; }
.news-tab.active { background: linear-gradient(#ffffff, #e2e4e6); }
.news-tab-icon { width: 42px; height: 42px; }
.news-page { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; min-height: 0; }
.news-article { min-height: 0; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; background: #fff; border: 1px solid #b7babd; }
.news-article.big { grid-row: 1 / 3; padding: 6px 8px 0; }
.news-article h2 { margin: 0 0 12px; font: 500 clamp(18px, 3.9vh, 29px)/1.2 var(--h-font); color: #3c3c3c; }
.news-text { overflow: hidden; font: 500 clamp(12px, 2vh, 14.5px)/1.02 var(--h-font); color: #444; }
.news-text p { margin: 0 0 .9em; }
.news-article.big .news-text { flex: 1 1 auto; min-height: 3em; mask-image: linear-gradient(#000 85%, transparent); -webkit-mask-image: linear-gradient(#000 85%, transparent); }
.news-more { align-self: flex-end; margin: 2px 0 6px; padding: 0; border: 0; background: none; color: #111; font: 500 13px var(--h-font); cursor: pointer; }
.news-article img { display: block; width: 100%; min-height: 0; object-fit: cover; flex: 0 1 auto; }
.news-article.big img { max-height: 45%; margin: 0 -8px; width: calc(100% + 16px); }
.news-article.small { background: #c7c9cb; }
.news-article.small header { display: flex; align-items: baseline; gap: 6px; padding: 2px 6px 3px; background: linear-gradient(#efefef, #cfd1d3); }
.news-article.small h2 { flex: 1; margin: 0; font-size: clamp(14px, 2.6vh, 19px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555; }
.news-article.small .news-more { margin: 0; font-size: 12px; flex: none; }
.news-article.small img { flex: 1 1 auto; height: 100%; }
.news-article.small .news-text { padding: 8px; }
.news-page.detail { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.news-article.detail { padding: 8px 10px; overflow-y: auto; cursor: default; }
.news-article.detail img { max-height: 55%; object-fit: contain; background: #111; margin-top: 8px; }
.news-article.detail .news-text { overflow: visible; }
.news-article:hover { box-shadow: 0 0 0 2px var(--osd-hi); }
.news-article.detail:hover { box-shadow: none; }
.news-legend { position: relative; padding-right: max(16px, calc((100vw - 870px) / 2)); }

/* --- Welcome (name) on Home's front-end background ----------------------------------------- */

/* --- Wardrobe exit dialog (Home: blue frame, white panel, "✕ Exit Wardrobe / ○ Cancel") ---- */
.ward-dialog { background: none; }
.ward-dialog-card.home-dialog { display: grid; gap: 2px; min-width: 0; padding: 8px; border-radius: 6px; background: linear-gradient(#36c3fb, #0aa2e6 70%, #0782c0); box-shadow: 0 3px 0 #05668f, 0 6px 16px rgb(0 0 0 / .3); text-align: left; }
.home-dialog-inner { display: grid; gap: 4px; padding: 12px 22px 12px 14px; border-radius: 3px; background: #fff; box-shadow: inset 0 2px 4px rgb(0 0 0 / .25); }
.home-dialog button { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border: 0; background: none; color: #0a8fd0; font: 500 clamp(17px, 2.6vh, 22px)/1.15 var(--h-font); cursor: pointer; text-align: left; min-height: 0; }
.home-dialog button .pad { color: #0a8fd0; }
.home-dialog button:hover, .home-dialog button:focus-visible { color: #0670a6; outline: none; }
html.osd-art .home-dialog .pad-cross, html.osd-art .home-dialog .pad-circle { background-color: transparent; filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(1500%) hue-rotate(176deg) brightness(92%); }
html.touch .home-dialog button { min-height: 44px; }

/* --- Phones: the same look, re-flowed for touch --------------------------------------------- */
@media (max-width: 760px), (max-height: 500px) {
  .options { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; padding-top: max(10px, calc(env(safe-area-inset-top) + 6px)); padding-bottom: 64px; }
  .options > .h-header { grid-column: 1; }
  .options .opt-tabs { grid-column: 1; grid-row: 2; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .options .opt-tabs .h-item { min-height: 40px; }
  .options .opt-page { grid-column: 1; grid-row: 3; max-height: none; }
  .h-legend:not(.inline) { justify-content: center; padding-right: max(10px, env(safe-area-inset-right)); padding-left: max(10px, env(safe-area-inset-left)); font-size: 15px; gap: 0 6px; }
  .navigator { --colx: max(12px, env(safe-area-inset-left)); --tile-w: min(46vw, 210px); --card-w: min(calc(100vw - 24px), 420px); --detail-w: var(--card-w); }
  .nav-tiles { top: max(56px, calc(env(safe-area-inset-top) + 50px)); gap: 10px; }
  .nav-crumbs { top: calc(max(56px, calc(env(safe-area-inset-top) + 50px)) + var(--tile-w) * 152 / 324 + 46px); }
  .nav-column { top: calc(max(56px, calc(env(safe-area-inset-top) + 50px)) + var(--tile-w) * 152 / 324 + 68px); padding-right: var(--colx); bottom: 52px; }
  .nav-row { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 10px; }
  .nav-card { width: 100%; margin-left: 0; display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; text-align: left; }
  .nav-row.selected .nav-card { width: 100%; }
  .nav-card-label { white-space: normal; font-size: 14px; background: none; padding: 8px 10px; }
  .nav-card-fav { bottom: auto; top: 6px; left: 6px; }
  .nav-detail { height: auto; border-top: 0; }
  .nav-description { max-height: 9em; }
  .news-frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100% - 12px); margin-top: max(10px, env(safe-area-inset-top)); }
  .news-tabs { grid-auto-flow: column; justify-content: start; }
  .news-tab { width: 48px; height: 48px; }
  .news-tab-icon { width: 34px; height: 34px; }
  .news-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: max-content; overflow-y: auto; overscroll-behavior: contain; }
  .news-article.big { grid-row: auto; }
  .news-article.big .news-text { max-height: 12em; }
  .news-article.small img { height: auto; aspect-ratio: 400 / 240; }
  .news-legend { padding-right: 12px; }
  .menu-ring { max-width: 380px; }
  .menu-item { --size: 58px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .news-frame { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .news-tabs { grid-auto-flow: row; }
  .news-page { grid-template-columns: 1fr 1fr; }
  .navigator { --tile-w: min(24vw, 170px); --card-w: min(34vw, 240px); --detail-w: min(calc(100vw - var(--colx) - var(--card-w) - 40px), 420px); }
  .nav-tiles { top: max(8px, env(safe-area-inset-top)); padding-top: 50px; }
  .nav-top { top: max(8px, env(safe-area-inset-top)); left: auto; }
  .nav-column { top: calc(max(8px, env(safe-area-inset-top)) + 50px + var(--tile-w) * 152 / 324 + 40px); }
  .nav-crumbs { display: none; }
  .nav-row { grid-template-columns: var(--card-w) var(--detail-w); gap: 12px; }
  .nav-card { display: block; text-align: right; }
  .nav-card-label { background: linear-gradient(#26282b, #0c0d0e); }
  .menu-screen { padding-top: max(16px, env(safe-area-inset-top)); }
  .ld-info { bottom: max(9vh, calc(env(safe-area-inset-bottom) + 14px)); }
}

/* ==== In-world HUD (js/hud.mjs, js/target.mjs; docs/ui/HUD.md) ================================
 * Owner: the HUD work. Home lays its HUD out on 1280x720; --hud-k maps those pixels to CSS pixels
 * (set by js/hud.mjs). Name tags and bubbles are positioned per frame by JS (transforms only). */
:root { --hud-k: 1; --hud-font: var(--h-font, "SCE-PS3 Rodin", "Segoe UI", system-ui, sans-serif); }
#labels { contain: strict; }
#labels.hud-off { visibility: hidden; }
.hud-tags, .hud-bubbles { position: absolute; inset: 0; }
.hud-tails { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hud-tail { fill: #fff; }
/* Person label: a zero-size box at the anchor; font-size = the name's em (set per frame). */
.hud-tag { position: absolute; left: 0; top: 0; width: 0; height: 0; font-family: var(--hud-font); font-weight: 500; white-space: nowrap; }
/* Home: name rect bottom 60 units over the status line's; with CSS line boxes that puts the
 * baselines .83 em apart as in the native captures (02-a-target-menu-b.png). */
.hud-name { position: absolute; left: 0; bottom: .78em; transform: translateX(-50%); line-height: 1; text-shadow: 1px 1px 1px rgb(0 0 0 / .85); }
.hud-status { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); font-size: .72em; line-height: 1; }
.hud-status:empty { display: none; }
/* Label icons: Home's white art tinted with the label colour (mask; missing art = invisible). */
.hud-icon { position: absolute; bottom: -.05em; width: .99em; height: .99em; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.hud-icon[hidden] { display: none; }
.hud-icon-l { right: calc(100% + .2em); }
.hud-icon-r { left: calc(100% + .2em); }
/* Chat bubble: white 2 px border, OSD-colour fill (inline), white centred text, wrap at 300 px. */
.hud-bubble { position: absolute; left: 0; top: 0; box-sizing: border-box; width: max-content; min-width: calc(var(--hud-k) * 55px); max-width: calc(var(--hud-k) * 319px);
  padding: calc(var(--hud-k) * 6px) calc(var(--hud-k) * 7.5px); border: calc(var(--hud-k) * 2px) solid #fff; border-radius: calc(var(--hud-k) * 8px);
  color: #fff; font: 500 calc(var(--hud-k) * 17px) / calc(var(--hud-k) * 21px) var(--hud-font); text-align: center; white-space: normal; overflow-wrap: anywhere; }
/* Typing bubble: WritingChatIcon01-03 (one bright dot moving every 0.5 s). */
.hud-bubble.typing { display: flex; align-items: center; justify-content: center; gap: calc(var(--hud-k) * 3px); width: calc(var(--hud-k) * 51px); min-width: 0; height: calc(var(--hud-k) * 43px); padding: 0; }
.hud-bubble.typing i { width: calc(var(--hud-k) * 8px); height: calc(var(--hud-k) * 8px); border-radius: 50%; background: #fff; opacity: .55; animation: hud-dot 1.5s steps(1) infinite; }
.hud-bubble.typing i:nth-child(2) { animation-delay: -1s; }
.hud-bubble.typing i:nth-child(3) { animation-delay: -.5s; }
@keyframes hud-dot { 0% { opacity: 1; } 33.3%, 100% { opacity: .55; } }

/* Chat log (resting view, E:0x6322a8): panel x 65..517, y 444..694 of 1280x720; 22 px rows,
 * text from x 96, wrapped lines indented 20; in on a new line (0.5 s), out over 5 s after 30 s. */
html:not(.touch) #chat { left: calc(var(--hud-k) * 65px); bottom: calc(var(--hud-k) * 26px); width: calc(var(--hud-k) * 452px); height: calc(var(--hud-k) * 250px);
  padding: calc(var(--hud-k) * 15px) calc(var(--hud-k) * 12px) calc(var(--hud-k) * 15px) calc(var(--hud-k) * 31px); border-radius: calc(var(--hud-k) * 4px);
  background: rgb(0 0 0 / .65); backdrop-filter: none; opacity: 0; transition: opacity 5s linear; pointer-events: none; z-index: 3; }
html:not(.touch) #chat.log-awake, html:not(.touch) #chat.typing { opacity: 1; transition-duration: .5s; }
html:not(.touch) #chat.typing { pointer-events: auto; }
html:not(.touch) #chat-log { height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
html:not(.touch) #chat-log:empty { display: flex; }
.log-line { padding-left: calc(var(--hud-k) * 20px); text-indent: calc(var(--hud-k) * -20px); font: 500 calc(var(--hud-k) * 15px) / calc(var(--hud-k) * 22px) var(--hud-font); color: #fff; overflow-wrap: anywhere; flex: none; }
.log-prefix { color: #fff; }
/* Lines written by js/social.mjs (personal messages, notices) share the log's row format. */
html:not(.touch) #chat-log > div:not(.log-line) { flex: none; padding-left: calc(var(--hud-k) * 20px); text-indent: calc(var(--hud-k) * -20px); font: 500 calc(var(--hud-k) * 15px) / calc(var(--hud-k) * 22px) var(--hud-font); }
/* PC keyboard: Enter opens a line under the panel (Home types into its keyboard). */
html:not(.touch) #chat-input { position: absolute; left: 0; right: 0; top: 100%; width: 100%; height: calc(var(--hud-k) * 26px); margin: 0; padding: 0 calc(var(--hud-k) * 31px);
  border: 0; border-radius: 0 0 calc(var(--hud-k) * 4px) calc(var(--hud-k) * 4px); background: rgb(0 0 0 / .8); color: #fff; font: 500 calc(var(--hud-k) * 15px) var(--hud-font); opacity: 0; }
html:not(.touch) #chat.typing #chat-input { opacity: 1; }
html:not(.touch) #chat-input::placeholder { color: rgb(255 255 255 / .5); }
/* Phones keep the chat sheet (js/touch.mjs), with the log's line style. */
html.touch #chat-log > .log-line { padding-left: 8px; text-indent: 0; font-size: 13px; line-height: 1.35; }
html.touch #chat-log > div { background: rgb(0 0 0 / .55); }

/* Target banner and target menu: people (js/target.mjs), seats (js/seats.mjs), portables. Measured
 * on native 1280x720 frames (hud-capture-20261023 01/02/04, seatcap@seats atbench/menu2); colours
 * sampled for OSD colour 11 and written as mixes of --osd, so another OSD colour tints them alike.
 * --tk: the HUD scale (Home's 1280x720 units → CSS px); phones use a larger one so the menu stays
 * legible and tappable and still fits 390 px (472 units × .78 + margins). */
.tgt-banner, .tgt-menu { --tk: var(--hud-k); }
html.touch .tgt-banner, html.touch .tgt-menu { --tk: .78; }
@media (orientation: landscape) and (max-height: 520px) { html.touch .tgt-banner, html.touch .tgt-menu { --tk: .7; } }
/* Home's pad symbols (hubosd fonts/buttonicons) are 32x32 font cells with the glyph in x 6-26,
 * y 12-32: --g is the glyph size; the cell is cropped round it so it sits on the text line. */
.tgt-pad { --g: .95em; flex: none; display: inline-block; width: calc(var(--g) * 1.6); height: calc(var(--g) * 1.6); margin: calc(var(--g) * -.6) calc(var(--g) * -.3) 0; vertical-align: calc(var(--g) * -.14); }
/* Banner (TargetBannerOsd 0x668fe0): "[CROSS] name", 40 high, text + 60 wide, bottom 60 up. */
.tgt-banner { position: fixed; left: 50%; bottom: calc(var(--tk) * 61px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--tk) * 8px); height: calc(var(--tk) * 40px); max-width: calc(100vw - 16px); margin: 0; padding: 0 calc(var(--tk) * 30px) 0 calc(var(--tk) * 27px);
  border: 0; border-radius: calc(var(--tk) * 6px); color: #fff; font: 400 calc(var(--tk) * 22px) / 1 var(--hud-font); white-space: nowrap; cursor: pointer; text-shadow: 0 1px 1px rgb(0 0 0 / .2);
  background: linear-gradient(color-mix(in srgb, var(--osd) 87%, #000) 0 calc(var(--tk) * 2px), color-mix(in srgb, var(--osd) 84%, #9cf) 0 calc(var(--tk) * 3px),
    color-mix(in srgb, var(--osd) 90%, #8ab) 0 48%, color-mix(in srgb, var(--osd) 83%, #000) 0, color-mix(in srgb, var(--osd) 62%, #000) calc(100% - var(--tk) * 1px), color-mix(in srgb, var(--osd) 42%, #000) 0);
  box-shadow: 0 calc(var(--tk) * 1px) calc(var(--tk) * 4px) rgb(0 0 0 / .5); }
.tgt-banner > span { overflow: hidden; text-overflow: ellipsis; }
.tgt-banner:hover, .tgt-banner:focus-visible { border: 0; outline: none; filter: brightness(1.1); }
.tgt-banner[hidden], .tgt-menu[hidden] { display: none; }
/* Menu (0x5ed2bc): frame 472 wide in the OSD colour (light top, 4 px darker lip), white card with
 * the icon tile and the name, items 28 high on a 33 pitch, the legend line under the card. */
.tgt-menu { position: fixed; left: 50%; bottom: calc(var(--tk) * 61px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4; box-sizing: border-box;
  width: calc(var(--tk) * 472px); max-width: calc(100vw - 16px); padding: calc(var(--tk) * 8px) calc(var(--tk) * 9px) calc(var(--tk) * 4px); border-radius: calc(var(--tk) * 6px);
  font-family: var(--hud-font); color: #fff; text-align: left;
  background: linear-gradient(color-mix(in srgb, var(--osd-hi) 70%, #9ff), var(--osd) calc(100% - var(--tk) * 4px), color-mix(in srgb, var(--osd) 70%, #000) 0);
  box-shadow: 0 calc(var(--tk) * 2px) calc(var(--tk) * 8px) rgb(0 0 0 / .45); }
.tgt-card { padding: calc(var(--tk) * 9px) calc(var(--tk) * 7px) calc(var(--tk) * 7px); border-radius: calc(var(--tk) * 4px); background: #fff;
  box-shadow: inset 0 0 0 calc(var(--tk) * 1px) rgb(0 0 0 / .14), inset 0 calc(var(--tk) * 2px) calc(var(--tk) * 2px) rgb(0 0 0 / .12); }
.tgt-head { display: flex; align-items: center; gap: calc(var(--tk) * 13px); margin: 0 0 calc(var(--tk) * 12px); min-width: 0; }
/* Info.dds / GameLaunching.dds are white glyphs: Home lays them on an OSD-colour tile. */
.tgt-icon { flex: none; width: calc(var(--tk) * 57px); height: calc(var(--tk) * 57px); border-radius: calc(var(--tk) * 4px);
  background: linear-gradient(color-mix(in srgb, var(--osd) 80%, #fff), var(--osd) 50%, color-mix(in srgb, var(--osd) 82%, #000)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); }
.tgt-icon-i { display: grid; place-items: center; color: #fff; font: 700 calc(var(--tk) * 36px) / 1 var(--hud-font); }
.tgt-title { min-width: 0; font: 400 calc(var(--tk) * 28px) / 1.1 var(--hud-font); color: var(--osd-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgt-items { display: grid; gap: calc(var(--tk) * 5px); }
.tgt-item { display: block; width: 100%; height: calc(var(--tk) * 28px); margin: 0; padding: 0 calc(var(--tk) * 8px); border: 0; border-radius: calc(var(--tk) * 4px); color: #fff; cursor: pointer;
  font: 400 calc(var(--tk) * 19px) / calc(var(--tk) * 27px) var(--hud-font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgb(0 0 0 / .25);
  background: linear-gradient(color-mix(in srgb, var(--osd) 70%, #333) 0 calc(var(--tk) * 2px), color-mix(in srgb, var(--osd) 45%, #b9a99b) 0 calc(var(--tk) * 3px),
    color-mix(in srgb, var(--osd) 55%, #5a4f4a) 0, color-mix(in srgb, var(--osd) 53%, #554a45) 50%, color-mix(in srgb, var(--osd) 66%, #251e1c) 0,
    color-mix(in srgb, var(--osd) 51%, #000) calc(100% - var(--tk) * 1px), color-mix(in srgb, var(--osd) 35%, #000) 0); }
.tgt-item.selected { background: linear-gradient(color-mix(in srgb, var(--osd) 80%, #3cf) 0 calc(var(--tk) * 2px), color-mix(in srgb, var(--osd) 55%, #fff) 0 calc(var(--tk) * 3px),
    color-mix(in srgb, var(--osd) 74%, #fff) 0, color-mix(in srgb, var(--osd) 76%, #ddd) 50%, color-mix(in srgb, var(--osd) 88%, #fff) 0,
    color-mix(in srgb, var(--osd) 80%, #000) calc(100% - var(--tk) * 1px), color-mix(in srgb, var(--osd) 55%, #000) 0); }
.tgt-item:hover, .tgt-item:focus-visible { border: 0; outline: none; }
.tgt-legend { display: flex; justify-content: center; align-items: center; gap: calc(var(--tk) * 7px); height: calc(var(--tk) * 34px); font: 400 calc(var(--tk) * 15.5px) / 1 var(--hud-font); white-space: nowrap; }
.tgt-legend span, .tgt-back { display: inline-flex; align-items: center; gap: calc(var(--tk) * 3px); }
.tgt-legend .tgt-pad { --g: 1.15em; vertical-align: 0; }
.tgt-back { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.tgt-back:hover, .tgt-back:focus-visible { border: 0; outline: none; text-decoration: underline; }
/* Phones: the same pieces, items tall enough to tap. */
html.touch .tgt-item { height: max(calc(var(--tk) * 28px), 34px); line-height: max(calc(var(--tk) * 27px), 33px); }
html.touch .tgt-legend { height: max(calc(var(--tk) * 34px), 34px); }
html.touch .tgt-back { min-height: 34px; padding: 0 4px; }
html.menu-open .tgt-banner, html.menu-open .tgt-menu, html.wardrobe-open .tgt-banner, html.wardrobe-open .tgt-menu { visibility: hidden; }
html.chat-open .tgt-banner, html.chat-open .tgt-menu { visibility: hidden; }

/* --- Mods (js/mods.mjs, docs/avatars/MODS.md): Home's OSD menu with folding categories ----------- */
.mods-screen { z-index: 11; background: rgb(0 0 0 / .45); font-family: var(--h-font); animation: h-fade .18s ease-out; }
.mods-screen[hidden] { display: none; }
.hk-osd.hk-mods > .hk-card { grid-template-columns: 492px; }
.hk-osd.hk-mods .hk-body { width: 412px; max-height: calc((100dvh - 12.8vh - 60px) / var(--hk-zoom, 1) - 116px); overflow-y: auto; overscroll-behavior: contain; padding-right: 12px; scrollbar-width: thin; scrollbar-gutter: stable; }
.hk-mods .mods-list { gap: 8px; }
html.mods-open header.hud, html.mods-open #chat, html.mods-open #stats, html.mods-open #status, html.mods-open #touch-layer, html.mods-open #action-button, html.mods-open .emotes, html.mods-open #mods-fast, html.mods-open #labels, html.mods-open .tgt-banner, html.mods-open .tgt-menu { visibility: hidden; }
.hk-osd.hk-mods .hk-body { scrollbar-color: rgb(255 255 255 / .28) transparent; }
.hk-osd.hk-mods .hk-body::-webkit-scrollbar { width: 6px; }
.hk-osd.hk-mods .hk-body::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .28); border-radius: 3px; }
.hk-osd.hk-mods .hk-body::-webkit-scrollbar-track { background: transparent; }
.hk-mods .mods-cat { display: flex; align-items: center; gap: 8px; }
.hk-mods .mods-cat .hk-row-label { flex: 1; }
.hk-mods .mods-count { font-size: 13px; opacity: .85; }
.hk-mods .mods-chevron { flex: none; width: 9px; height: 12px; margin: 0 2px 0 4px; background: currentColor; -webkit-mask: url(/bundles/ui/osd-arrow-r.png) center / contain no-repeat; mask: url(/bundles/ui/osd-arrow-r.png) center / contain no-repeat; transition: transform .15s; }
.hk-mods .mods-cat.open .mods-chevron { transform: rotate(90deg); }
.hk-mods .mods-cat-body { display: grid; gap: 0; margin: -3px 0 2px; padding: 0 8px; border: 10px solid transparent; border-image: url(/bundles/ui/osd-chip.png) 12 fill / 10px stretch; }
html:not(.osd-art) .hk-mods .mods-cat-body { background: rgb(14 15 17 / .92); border-radius: 8px; }
.hk-mods .mods-mod { padding: 3px 0 6px; border-bottom: 1px solid var(--hk-line); }
.hk-mods .mods-mod:last-child { border-bottom: 0; padding-bottom: 2px; }
.hk-mods .mods-line { min-height: 30px; padding: 2px 0; border-bottom: 0; }
.hk-mods .mods-name { font: 400 16px/1.2 var(--h-font); color: var(--hk-ink); }
.hk-mods .hk-field-label small { display: block; margin-top: 1px; color: var(--hk-muted); font-size: 12px; line-height: 1.25; }
.hk-mods .mods-mod.closed .mods-name { opacity: .6; }
.hk-mods .mods-slider-line { grid-template-columns: 58px minmax(0, 1fr); gap: 4px 8px; }
.hk-mods .mods-slider-line .hk-field-label { font-size: 13px; color: var(--hk-muted); }
.hk-mods .mods-setting { display: grid; grid-template-columns: minmax(0, 1fr) 58px; align-items: center; gap: 6px; }
.hk-mods .mods-value { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--hk-ink); }
.hk-mods .mods-mod:not(.on) .mods-slider-line { opacity: .5; }
.hk-mods .mods-reset { display: flex; justify-content: flex-end; }
.hk-mods .mods-reset .hk-btn { min-height: 24px; padding: 0 10px; font-size: 12px; }
@media (max-width: 760px), (max-height: 500px) {
  .hk-osd.hk-mods > .hk-card { grid-template-columns: minmax(0, 1fr); }
  .hk-osd.hk-mods .hk-body { width: auto; max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding-right: 6px; }
  .hk-mods .mods-slider-line { grid-template-columns: 50px minmax(0, 1fr); }
  .hk-mods .mods-name { font-size: 15px; }
  .hk-mods .hk-field-label small { font-size: 11px; }
  .hk-mods .mods-mod { padding: 2px 0 4px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hk-osd.hk-mods .hk-head { height: 40px; margin-bottom: 4px; }
  .hk-osd.hk-mods .hk-icon { width: 40px; height: 40px; }
  .hk-osd.hk-mods .hk-body { max-height: calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
#mods-fast { position: fixed; z-index: 5; right: calc(var(--sar, 0px) + 54px); bottom: calc(var(--sab, 0px) + 270px); width: 60px; height: 60px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--hud-bg); border: 2px solid rgb(255 255 255 / 0.25); backdrop-filter: blur(6px); touch-action: manipulation; }
#mods-fast[hidden], html.sheet-open #mods-fast, html.chat-open #mods-fast, html.menu-open #mods-fast, html.wardrobe-open #mods-fast { display: none; }
#mods-fast.on { background: rgb(109 179 255 / 0.4); border-color: var(--accent); box-shadow: 0 0 14px rgb(109 179 255 / 0.55); }
html.touch #mods-fast { right: calc(var(--sar) + 54px); }
@media (orientation: landscape) and (max-height: 520px) {
  html.touch #mods-fast { bottom: calc(var(--sab) + 40px); right: calc(var(--sar) + 286px); }
}

/* ---- Home's furniture browser, mover and wallpaper selection (js/decorate.mjs) ---------------- */
#decorate { position: fixed; inset: 0; z-index: 11; pointer-events: none; color: #fff; user-select: none; }
#decorate[hidden] { display: none; }
#decorate > * { pointer-events: auto; }
html.decorate-open #chat, html.decorate-open #status, html.decorate-open #touch-layer, html.decorate-open #action-button, html.decorate-open .emotes, html.decorate-open header.hud { visibility: hidden; }
.dec-panel { position: absolute; left: max(16px, env(safe-area-inset-left), 7vw); top: max(16px, env(safe-area-inset-top), 10vh); bottom: 64px; display: grid; grid-template-rows: auto 1fr; gap: 8px; pointer-events: none; max-width: min(92vw, 640px); }
.dec-panel > * { pointer-events: auto; }
.dec-body { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; min-height: 0; }
.dec-grid { align-self: center; max-height: calc(100vh - 180px); }
.dec-items, .dec-organize { grid-template-columns: repeat(4, minmax(64px, 142px)); }
.dec-heads { display: flex; gap: 10px; }
.dec-head { display: grid; gap: 2px; min-width: 150px; padding: 4px 8px 6px; border: 0; border-radius: 4px; background: linear-gradient(#31b2f3, #1a8fd8); color: #fff; text-align: left; font: 600 17px/1.1 var(--h-font, inherit); box-shadow: 0 2px 5px rgb(0 0 0 / .25); }
.dec-head-title { display: flex; gap: 6px; align-items: center; }
.dec-head-value { display: block; padding: 1px 6px; border-radius: 3px; background: #fff; color: #1a8fd8; font-size: 13px; }
/* Home's heat meter: 100 cells, used (white) at the bottom, the chosen item's heat lighter. */
.dec-meter { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; padding: 6px 5px; width: 46px; height: min(290px, 52vh); border-radius: 5px; background: linear-gradient(#2aa3ea, #1678c4); border: 3px solid #1d8fd6; box-shadow: 0 2px 5px rgb(0 0 0 / .25); font: 600 14px/1 var(--h-font, inherit); }
.dec-meter-cells { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 1px; width: 100%; min-height: 0; height: 100%; }
.dec-meter-cells i { background: rgb(0 60 120 / .55); border-radius: 1px; }
.dec-meter-cells i.on { background: #fff; }
.dec-meter-cells i.next { background: #8fd4ff; }
.dec-heat-badge { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 3px; background: #1a8fd8; color: #fff; font: 700 12px/1.2 var(--h-font, inherit); }
.dec-heat-badge i { width: 10px; height: 10px; background: linear-gradient(90deg, #fff 45%, transparent 45% 55%, #fff 55%), linear-gradient(#fff 45%, transparent 45% 55%, #fff 55%); background-blend-mode: multiply; }
.ward-tile.marked .ward-icon { filter: grayscale(1) brightness(.6); }
.dec-legend { justify-content: center; padding-left: 16px; padding-right: 16px; }
.dec-dialog { gap: 6px; padding: 12px 18px; background: linear-gradient(#31b2f3, #1a8fd8); border: 3px solid #fff; }
.dec-dialog-row { display: flex; align-items: center; gap: 8px; border: 0; background: #fff; color: #1a8fd8; font: 600 18px/1.2 var(--h-font, inherit); padding: 4px 10px; border-radius: 4px; text-align: left; }
.dec-tools { position: absolute; right: max(12px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.dec-hold { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .7); background: rgb(20 40 60 / .55); color: #fff; font-size: 24px; padding: 0; touch-action: none; }
.dec-hold:active { background: rgb(26 143 216 / .85); }
html:not(.touch) .dec-tools { opacity: .75; }
.dec-wallpaper { position: absolute; left: max(16px, env(safe-area-inset-left), 20vw); bottom: max(70px, calc(env(safe-area-inset-bottom) + 70px)); width: min(400px, calc(100vw - 32px)); filter: drop-shadow(0 2px 4px rgb(0 0 0 / .3)); }
.dec-wp-head { display: flex; justify-content: space-between; align-items: end; padding: 8px 14px; border-radius: 10px 10px 0 0; background: #1a8fd8; font: 600 15px/1 var(--h-font, inherit); }
.dec-wp-icon { width: 40px; height: 40px; margin: -24px 0 -4px; background: #1a8fd8; border-radius: 6px; mask: url(/api/wardrobe/icon/SKIN_TEXTURE_BANNER_ICON_FURNITURE) center / contain no-repeat; -webkit-mask: url(/api/wardrobe/icon/SKIN_TEXTURE_BANNER_ICON_FURNITURE) center / contain no-repeat; background: #fff; }
.dec-wp-body { display: grid; gap: 6px; padding: 8px; border-radius: 0 0 6px 6px; background: linear-gradient(#31b2f3, #1a8fd8); }
.dec-wp-row { display: grid; grid-template-columns: 36px 1fr 36px; gap: 6px; padding: 4px; border-radius: 4px; background: #fff; }
.dec-wp-arrow { border: 0; border-radius: 4px; background: linear-gradient(#31b2f3, #1a8fd8); color: #fff; font-size: 14px; }
.dec-wp-name { position: relative; display: grid; place-items: center; padding: 6px; border-radius: 4px; background: linear-gradient(#31b2f3, #1a8fd8); font: 600 15px/1 var(--h-font, inherit); }
.dec-wp-name small { position: absolute; right: 8px; bottom: 4px; font-size: 13px; }
.dec-wallpaper .dec-legend { position: static; min-height: 0; padding: 6px; border-radius: 4px; background: #fff; color: #333; justify-content: center; font-size: 15px; }
.dec-toast { z-index: 3; max-width: calc(100vw - 32px); white-space: normal; text-align: center; }
@media (max-aspect-ratio: 1/1) {
  .dec-panel { left: 10px; right: 10px; top: auto; bottom: 70px; max-height: 58vh; }
  .dec-items, .dec-organize, .dec-grid { grid-template-columns: repeat(3, minmax(56px, 1fr)); max-height: 40vh; }
  .dec-meter { height: min(220px, 36vh); width: 38px; }
  .dec-head { min-width: 0; font-size: 14px; }
  .dec-wallpaper { left: 10px; }
}

/* ---- Portables (js/portables.mjs): My Inventory and the portable item labels ---------------- */
#inventory { position: fixed; inset: 0; z-index: 12; display: grid; grid-template-rows: auto 1fr auto; align-content: center; justify-items: start; gap: 10px; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left), 12vw); color: #fff; background: rgb(0 0 0 / .18); user-select: none; }
#inventory[hidden] { display: none; }
#inventory .inv-head { display: flex; gap: 10px; flex-wrap: wrap; }
#inventory .inv-box { display: grid; gap: 2px; min-width: min(280px, 40vw); padding: 6px 8px 8px; border-radius: 4px; background: linear-gradient(#2aa3ea, #1678c4); box-shadow: 0 2px 5px rgb(0 0 0 / .25); }
#inventory .inv-box b { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 600; }
#inventory .inv-box span { padding: 1px 6px; border-radius: 3px; background: #fff; color: #1678c4; font-size: 13px; font-weight: 600; }
#inventory .inv-tiles { max-height: 60vh; align-self: center; }
#inventory .inv-empty { grid-column: 1 / -1; margin: 0; font-size: 14px; }
#inventory .inv-legend, .inv-about { display: flex; gap: 14px; justify-self: center; align-items: center; padding: 6px 14px; border-radius: 6px; background: rgb(20 20 22 / .82); font-size: 14px; }
#inventory .tgt-pad, .inv-about .tgt-pad { --g: 18px; } /* UI QA 2026-10-23: pad glyph size (cell crop in the Target banner block) */
html.inventory-open #chat, html.inventory-open .emotes, html.inventory-open #touch-layer, html.inventory-open #action-button { visibility: hidden; }
.inv-about { position: fixed; left: 50%; top: 50%; z-index: 13; transform: translate(-50%, -50%); display: grid; gap: 8px; justify-items: center; max-width: min(460px, calc(100vw - 32px)); padding: 14px 18px; color: #fff; }
.inv-about h2 { margin: 0; font-size: 18px; color: var(--osd-hi, #2ac0fd); }
.inv-about p { margin: 0; font-size: 14px; line-height: 1.4; text-align: center; }
/* Home's portable item label: the owner (underlined) over the item's name, in the OSD blue. */
.portable-label { position: absolute; left: 0; top: 0; display: grid; justify-items: start; padding: 0 2px; color: var(--osd-name, #009cdc); font: 600 12px/1.15 system-ui, sans-serif; text-shadow: 0 1px 1px rgb(0 0 0 / .45); white-space: nowrap; pointer-events: none; will-change: transform; }
.portable-label[hidden] { display: none; }
.portable-label u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
html.wardrobe-open .portable-label, html.inventory-open .portable-label { visibility: hidden; }
@media (max-width: 640px) {
  #inventory { justify-items: stretch; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  #inventory .inv-box { min-width: 0; flex: 1; }
  #inventory .inv-box b { font-size: 15px; }
  #inventory .inv-tiles { grid-template-columns: repeat(4, minmax(56px, 1fr)); max-height: 46vh; }
}
.dec-wallpaper .dec-legend .legend-key { color: #1a8fd8; }
html.inventory-open .tgt-banner, html.inventory-open .tgt-menu { visibility: hidden; }

/* ==== Home UI kit (js/home-ui.mjs; docs/ui/UI-KIT.md) ======================================
 * One look for every screen: Home's pop-ups (target menu, wardrobe tiles, exit dialog) — a frame in
 * the player's Pop-up Color round a white card, glossy bars, Home's pad symbols and Rodin. The
 * colour is --osd / --osd-hi on <html> (js/home-ui.mjs `theme`, the 24 OSD colours); everything
 * else is mixed from them. Compact on computers, 40 px touch rows on phones.
 * Other screens join by class (People, Mods, notifications, decorating, inventory: marked
 * "UI kit" below) without changing their scripts. */
:root {
  --hk-ink: #2a2f35; --hk-muted: #69737e; --hk-line: #e2e6ea; --hk-paper: #fff; --hk-soft: #f3f6f8; --hk-field: linear-gradient(#fff, #eef1f4); --hk-edge: #c3cbd2;
  --hk-on-osd: #fff; --hk-on-osd-shadow: 0 1px 1px rgb(0 0 0 / .25);
  --osd-deep: color-mix(in srgb, var(--osd) 65%, #000);
  --hk-frame: linear-gradient(color-mix(in srgb, var(--osd-hi) 70%, #9ff), var(--osd) calc(100% - 4px), color-mix(in srgb, var(--osd) 70%, #000) 0);
  --hk-bar: linear-gradient(color-mix(in srgb, var(--osd) 70%, #333) 0 2px, color-mix(in srgb, var(--osd) 45%, #b9a99b) 0 3px,
    color-mix(in srgb, var(--osd) 55%, #5a4f4a) 0, color-mix(in srgb, var(--osd) 53%, #554a45) 50%, color-mix(in srgb, var(--osd) 66%, #251e1c) 0,
    color-mix(in srgb, var(--osd) 51%, #000) calc(100% - 1px), color-mix(in srgb, var(--osd) 35%, #000) 0);
  --hk-bar-sel: linear-gradient(color-mix(in srgb, var(--osd) 80%, #3cf) 0 2px, color-mix(in srgb, var(--osd) 55%, #fff) 0 3px,
    color-mix(in srgb, var(--osd) 74%, #fff) 0, color-mix(in srgb, var(--osd) 76%, #ddd) 50%, color-mix(in srgb, var(--osd) 88%, #fff) 0,
    color-mix(in srgb, var(--osd) 80%, #000) calc(100% - 1px), color-mix(in srgb, var(--osd) 55%, #000) 0);
  --hk-grey: linear-gradient(#fbfcfd, #e9edf1 50%, #dce2e7 50%, #ced5dc);
  --hk-title: var(--hk-title-light, color-mix(in srgb, var(--osd-hi) 82%, #000));
  --hk-row: 30px;
}
html.touch { --hk-row: 40px; }
/* Pad symbols: Home's 32x32 font cells (glyph in x 6-26, y 12-32) as masks in the text colour. */
.hk-pad { position: relative; flex: none; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; vertical-align: -.2em; line-height: 1; }
.hk-pad::before { content: attr(data-glyph); font-size: .72em; font-weight: 700; }
html.osd-art .hk-pad::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--pad-art) 50% 100% / 160% no-repeat; mask: var(--pad-art) 50% 100% / 160% no-repeat; }
/* Window: frame, white card (head + scrolling body), legend on the frame. */
/* popup windows end with the card (the legend is the screen strip) */
.hk-window { box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; max-height: 100%; padding: 6px 6px 8px; border-radius: 9px; background: var(--hk-frame);
  box-shadow: 0 6px 22px rgb(0 0 0 / .45); color: var(--hk-ink); font: 400 14px/1.3 var(--h-font); text-align: left; }
.hk-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 6px; background: var(--hk-paper); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14), inset 0 2px 2px rgb(0 0 0 / .1); }
.hk-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 8px 6px; min-width: 0; }
.hk-titles { flex: 1; min-width: 0; }
.hk-title { margin: 0; font: 400 22px/1.15 var(--h-font); color: var(--hk-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-subtitle { margin: 1px 0 0; font-size: 12px; color: var(--hk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-icon { position: relative; flex: none; width: 40px; height: 40px; border-radius: 5px; background: linear-gradient(color-mix(in srgb, var(--osd) 78%, #fff), var(--osd) 50%, color-mix(in srgb, var(--osd) 82%, #000)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); }
.hk-icon::after { content: ""; position: absolute; inset: 12%; background: #fff; -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }
.hk-close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--hk-title); font-size: 20px; cursor: pointer; }
.hk-close:hover, .hk-close:focus-visible { background: color-mix(in srgb, var(--osd) 16%, var(--hk-paper)); outline: none; }
.hk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 6px; align-content: start; padding: 2px 8px 8px; touch-action: pan-y; }
.hk-body h2 { margin: 4px 0 0; font: 400 17px/1.2 var(--h-font); color: var(--hk-title); }
.hk-body h3 { margin: 8px 0 0; font: 600 11px/1.2 var(--h-font); letter-spacing: .06em; text-transform: uppercase; color: var(--hk-muted); }
.hk-body p { margin: 0; }
.hk-muted, .hk-body .muted { color: var(--hk-muted); }
.hk-key { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 3px 2px; border: 0; background: none; color: inherit; font: inherit; border-radius: 4px; cursor: default; }
button.hk-key { cursor: pointer; }
button.hk-key:hover, button.hk-key:focus-visible { text-decoration: underline; outline: none; }
html.touch button.hk-key { min-height: 36px; padding: 2px 6px; }
/* Rows: Home's pop-up bars. */
.hk-row { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--hk-row); margin: 0; padding: 0 12px; border: 0; border-radius: 4px; color: var(--hk-on-osd); cursor: pointer;
  font: 400 16px/1.1 var(--h-font); text-align: center; text-shadow: var(--hk-on-osd-shadow); background: var(--hk-bar); }
.hk-row.selected, .hk-row:not(:disabled):hover, .hk-row:focus-visible { background: var(--hk-bar-sel); outline: none; }
.hk-row:disabled { cursor: default; opacity: .45; filter: grayscale(.6); }
.hk-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-list { display: grid; gap: 5px; align-content: start; }
/* Settings lines on the card. */
.hk-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 38px; padding: 4px 2px; border-bottom: 1px solid var(--hk-line); }
.hk-field.wide { grid-template-columns: minmax(7em, auto) minmax(0, 1fr) auto; }
.hk-field-label { display: grid; gap: 1px; font: 400 15px/1.2 var(--h-font); color: var(--hk-ink); }
.hk-field-label small { font-size: 12px; color: var(--hk-muted); }
.hk-field output { min-width: 2.5em; text-align: right; font-variant-numeric: tabular-nums; color: var(--hk-ink); }
/* Controls. */
/* Controls drawn with Home's option-screen art (COREDATA menuscreen: checkbox_bg/white, slider
 * bg/thumb/arrows; server ui.rs osd-*): a black rounded box with the silver square when on; a black
 * groove with the silver thumb, the filled part in the theme colour, ◀ ▶ steps at its ends. */
.hk-toggle, .mods-switch, .h-check { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 5px; cursor: pointer;
  background: #060606; box-shadow: inset 0 1px 2px rgb(255 255 255 / .12), 0 1px 0 rgb(255 255 255 / .55); }
.hk-toggle::after, .mods-switch::after, .h-check::after { content: ""; position: absolute; inset: -2px; width: auto; height: auto; top: -2px; left: -2px; border-radius: 0; box-shadow: none; transform: none;
  background: url(/bundles/ui/osd-check.png) center / 100% 100% no-repeat; opacity: 0; transition: opacity .1s; }
.hk-toggle:checked, .mods-switch:checked, .h-check:checked { background: #060606; border-color: transparent; }
.hk-toggle:checked::after, .mods-switch:checked::after, .h-check:checked::after { opacity: 1; transform: none; background-color: transparent; }
html:not(.osd-art) .hk-toggle:checked::after, html:not(.osd-art) .mods-switch:checked::after { inset: 5px; background: linear-gradient(135deg, #fff, #b9bec4); border-radius: 2px; }
.hk-toggle:focus-visible, .mods-switch:focus-visible { outline: 2px solid var(--osd); outline-offset: 2px; }
.hk-range { display: flex; align-items: center; gap: 3px; min-width: 0; }
.hk-arrow { flex: none; display: grid; place-items: center; width: 16px; height: 24px; margin: 0; padding: 0; border: 0; background: none; color: var(--hk-ink); cursor: pointer; }
.hk-arrow::before { content: ""; width: 9px; height: 12px; background: currentColor; -webkit-mask: var(--a) center / contain no-repeat; mask: var(--a) center / contain no-repeat; }
.hk-arrow.l { --a: url(/bundles/ui/osd-arrow-l.png); } .hk-arrow.r { --a: url(/bundles/ui/osd-arrow-r.png); }
html.touch .hk-arrow { width: 28px; height: 36px; }
.hk-slider, .mods-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; min-width: 70px; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; --p: 50%; accent-color: auto; }
.hk-slider::-webkit-slider-runnable-track, .mods-slider input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--osd) 80%, #fff) 0 var(--p), transparent var(--p)), #060606; box-shadow: inset 0 1px 2px rgb(0 0 0 / .8), 0 1px 0 rgb(255 255 255 / .55); }
.hk-slider::-moz-range-track, .mods-slider input[type="range"]::-moz-range-track { height: 12px; border-radius: 5px; background: #060606; }
.hk-slider::-moz-range-progress, .mods-slider input[type="range"]::-moz-range-progress { height: 12px; border-radius: 5px; background: var(--osd); }
.hk-slider::-webkit-slider-thumb, .mods-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 27px; height: 18px; margin-top: -3px; border: 0; border-radius: 4px;
  background: url(/bundles/ui/osd-slider.png) center / 100% 100% no-repeat, linear-gradient(#f4f5f6, #c9cdd1); box-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.hk-slider::-moz-range-thumb, .mods-slider input[type="range"]::-moz-range-thumb { width: 27px; height: 18px; border: 0; border-radius: 4px; background: url(/bundles/ui/osd-slider.png) center / 100% 100% no-repeat, #ddd; }
.hk-select { max-width: 100%; min-width: 8em; padding: 4px 8px; border: 1px solid var(--hk-edge); border-radius: 4px; background: var(--hk-field); color: var(--hk-ink); font: 400 14px var(--h-font); }
.hk-select:focus-visible, .hk-body input:focus-visible { outline: 2px solid var(--osd); outline-offset: 1px; }
.hk-body input:not([type]), .hk-body input[type="text"], .hk-body input[type="search"], .hk-body textarea { color: var(--hk-ink); background: var(--hk-paper); border: 1px solid var(--hk-edge); border-radius: 4px; padding: 6px 8px; font-family: var(--h-font); }
.hk-tabs { flex: none; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.hk-tabs::-webkit-scrollbar { display: none; }
.hk-tab { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; margin: 0; padding: 0 12px; border: 1px solid #c4ccd3; border-radius: 4px; background: var(--hk-grey); color: var(--hk-ink); font: 400 14px/1 var(--h-font); cursor: pointer; }
html.touch .hk-tab { min-height: 36px; }
.hk-tab.selected { border-color: transparent; background: var(--hk-bar-sel); color: var(--hk-on-osd); text-shadow: var(--hk-on-osd-shadow); }
.hk-tab:not(.selected):hover { border-color: var(--osd); }
.hk-badge { min-width: 16px; padding: 0 4px; border-radius: 8px; background: #d9534f; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.hk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; margin: 0; padding: 0 14px; border: 0; border-radius: 5px; color: var(--hk-on-osd); cursor: pointer;
  font: 400 15px/1 var(--h-font); text-shadow: var(--hk-on-osd-shadow); background: var(--hk-bar-sel); box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
html.touch .hk-btn { min-height: 40px; }
.hk-btn:hover, .hk-btn:focus-visible { filter: brightness(1.08); outline: none; }
.hk-btn.quiet { background: var(--hk-grey); color: var(--hk-ink); text-shadow: none; box-shadow: inset 0 0 0 1px #c4ccd3; }
.hk-btn:disabled { filter: grayscale(1); opacity: .55; cursor: default; }
.hk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hk-chip { display: inline-block; padding: 1px 7px; border-radius: 9px; background: color-mix(in srgb, var(--osd) 16%, #fff); color: color-mix(in srgb, var(--osd) 75%, #000); font: 600 11px/16px var(--h-font); white-space: nowrap; }
/* Tiles (the wardrobe's): frame, white icon card, label bar. */
.hk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.hk-tile { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: 1 / 1.05; margin: 0; padding: 4px 4px 0; border: 0; border-radius: 6px; background: var(--hk-frame);
  box-shadow: 0 2px 5px rgb(0 0 0 / .25); color: #fff; cursor: pointer; transition: transform .12s; }
.hk-tile-art { position: relative; display: grid; place-items: center; min-height: 0; border-radius: 3px; background: linear-gradient(var(--hk-paper), var(--hk-soft)); overflow: hidden; }
.hk-tile-art img { width: 100%; height: 100%; object-fit: contain; }
.hk-tile-mask { width: 72%; aspect-ratio: 1; background: linear-gradient(color-mix(in srgb, var(--osd) 75%, #fff), var(--osd) 55%, color-mix(in srgb, var(--osd) 85%, #000));
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.hk-tile-label { padding: 3px 2px 4px; font: 400 14px/1.1 var(--h-font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgb(0 0 0 / .3); }
.hk-tile.selected, .hk-tile:not(:disabled):hover, .hk-tile:focus-visible { transform: scale(1.06); z-index: 1; outline: none; box-shadow: 0 4px 12px rgb(0 0 0 / .35); }
.hk-tile:disabled { cursor: default; filter: grayscale(.7); opacity: .5; }
/* Dialog (Home's wardrobe exit): white panel in the frame, one line per choice in the theme colour. */
.hk-dialog { display: inline-grid; padding: 7px; border-radius: 7px; background: var(--hk-frame); box-shadow: 0 6px 20px rgb(0 0 0 / .35); }
.hk-dialog-card { display: grid; gap: 2px; padding: 10px 20px 10px 12px; border-radius: 4px; background: var(--hk-paper); box-shadow: inset 0 2px 3px rgb(0 0 0 / .18); }
.hk-dialog-line { display: flex; align-items: center; gap: 8px; margin: 0; padding: 3px 4px; border: 0; border-radius: 3px; background: none; color: var(--hk-title); font: 400 19px/1.15 var(--h-font); text-align: left; cursor: pointer; }
html.touch .hk-dialog-line { min-height: 44px; }
.hk-dialog-line:hover, .hk-dialog-line:focus-visible { background: color-mix(in srgb, var(--osd) 14%, var(--hk-paper)); outline: none; }
/* The Pop-up Color picker: Home's 8 × 3 swatches (Options › Display). */
.hk-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 32px)); gap: 6px; padding: 8px; border-radius: 6px; background: #1d1f22; justify-content: start; width: max-content; max-width: 100%; }
.hk-swatch { aspect-ratio: 1; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 3px; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28), inset 0 -6px 8px rgb(0 0 0 / .18); }
.hk-swatch.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(0 0 0 / .6); }
.hk-swatch:hover, .hk-swatch:focus-visible { outline: 2px solid rgb(255 255 255 / .7); outline-offset: 1px; }
.hk-swatches-note { font-size: 12px; color: var(--hk-muted); }
html.touch .hk-swatches { grid-template-columns: repeat(8, minmax(0, 36px)); gap: 5px; }

/* --- Screens in the kit's look (classes owned by other modules: CSS only) ------------------------- */
/* Home's notifications (js/ui.mjs notify), 1:1 with the native bar (user's PS3 photo, hubosd
 * skins/default/notifications art): a 52-unit dark bar (main_notification_l/m/r) top-left over the
 * scene, the dark rounded icon box (icon_background) with the white "i" (info_icon_small), white
 * Rodin text. Not tinted by the Pop-up Color (Home's bar is always dark); same in Night Mode. */
#notifications { top: max(calc(var(--hud-k) * 70px), calc(env(safe-area-inset-top) + 48px)); left: max(calc(var(--hud-k) * 64px), calc(env(safe-area-inset-left) + 10px)); right: auto; justify-items: start; gap: calc(var(--hud-k) * 8px); }
html.touch #notifications { top: calc(var(--sat, 0px) + 62px); left: calc(var(--sal, 0px) + 8px); }
.h-note { gap: calc(var(--hud-k) * 12px); min-height: max(calc(var(--hud-k) * 52px), 40px); max-width: min(calc(var(--hud-k) * 640px), calc(100vw - 20px)); padding: calc(var(--hud-k) * 6px) calc(var(--hud-k) * 18px) calc(var(--hud-k) * 6px) calc(var(--hud-k) * 7px);
  border: 0; border-radius: 3px; color: #fff; font: 400 max(calc(var(--hud-k) * 19px), 14px)/1.25 var(--h-font); text-shadow: none; box-shadow: none;
  background: rgb(18 18 18 / .92); animation: note-in .3s ease-out; }
html.osd-art .h-note { background: url(/bundles/ui/note-l.png) left / 12px 100% no-repeat, url(/bundles/ui/note-r.png) right / 12px 100% no-repeat, url(/bundles/ui/note-m.png) 12px 0 / calc(100% - 24px) 100% no-repeat; }
@keyframes note-in { from { opacity: 0; transform: translateX(-24px); } }
.h-note.leaving { transform: translateX(-16px); }
.note-icon { width: max(calc(var(--hud-k) * 40px), 30px); height: max(calc(var(--hud-k) * 40px), 30px); border-radius: 5px; background: #080808; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .85); }
html.osd-art .note-icon { background: url(/bundles/ui/note-info.png) center / 90% no-repeat, url(/bundles/ui/note-icon-bg.png) center / 100% no-repeat; box-shadow: none; }
.note-body { gap: 5px; }
.h-note .h-progress { height: 6px; background: #3a3a3a; box-shadow: inset 0 1px 2px rgb(0 0 0 / .6); }
.h-note .h-btn { min-height: 28px; font-size: 14px; }
.h-progress-fill { background: linear-gradient(color-mix(in srgb, var(--osd) 60%, #fff), var(--osd) 55%, var(--osd-deep)); }
/* UI kit: People (js/social.mjs) as a kit window. */
.people.panel { background: linear-gradient(var(--hk-paper), var(--hk-paper)) padding-box, var(--hk-frame) border-box; border: 6px solid transparent; border-radius: 9px; color: var(--hk-ink); box-shadow: 0 6px 22px rgb(0 0 0 / .45); }
.people-header h1 { color: var(--hk-title); font-weight: 400; font-size: 22px; }
.people-header img { width: 34px; height: 34px; padding: 4px; border-radius: 5px; background: var(--osd); }
.people .muted, .people-who .muted, .people-item .muted { color: var(--hk-muted); }
.people .nav-close { background: none; border: 0; color: var(--hk-title); }
.people-tabs button { min-height: 30px; border-radius: 4px; border: 1px solid #c4ccd3; background: var(--hk-grey); color: var(--hk-ink); }
.people-tabs button[aria-selected="true"] { border-color: transparent; background: var(--hk-bar-sel); color: #fff; }
.people-row, .people-item { background: var(--hk-soft); border: 1px solid var(--hk-line); }
.people-item.outgoing { background: color-mix(in srgb, var(--osd) 10%, #fff); }
.people-badge { background: color-mix(in srgb, var(--osd) 16%, #fff); color: color-mix(in srgb, var(--osd) 75%, #000); }
.people-card { background: var(--hk-soft); border-color: var(--hk-line); }
.people-card-title h2 { color: var(--hk-title); font-weight: 400; }
.people button:not(.nav-close):not(.linkish), .rpcn-signin button:not(.linkish) { min-height: 30px; border: 0; border-radius: 5px; padding: 0 12px; color: #fff; background: var(--hk-bar-sel); font-family: var(--h-font); text-shadow: 0 1px 1px rgb(0 0 0 / .25); }
.people .people-tabs button:not([aria-selected="true"]) { background: var(--hk-grey); color: var(--hk-ink); border: 1px solid #c4ccd3; text-shadow: none; }
.people input, .people textarea { color: var(--hk-ink); background: var(--hk-paper); border-color: var(--hk-edge); }
.people .linkish { color: var(--hk-title); }
/* UI kit: Mods panel (js/mods.mjs) as a kit window; its switches and sliders as the kit's. */
.mods-panel { background: linear-gradient(var(--hk-paper), var(--hk-paper)) padding-box, var(--hk-frame) border-box; border: 6px solid transparent; border-radius: 9px; color: var(--hk-ink); backdrop-filter: none; box-shadow: 0 6px 22px rgb(0 0 0 / .45); padding: 8px 12px 10px; }
.mods-head h2 { color: var(--hk-title); font-weight: 400; font-size: 21px; }
.mods-close { border: 0; background: none; color: var(--hk-title); }
.mods-row { border-top-color: var(--hk-line); }
.mods-title { font-weight: 400; font-size: 16px; }
.mods-help { color: var(--hk-muted); }
.mods-help.warn { color: #b35a00; }
.mods-foot { color: var(--hk-muted); }
.mods-slider, .mods-slider output { color: var(--hk-ink); }
#mods-fast.on { background: color-mix(in srgb, var(--osd) 45%, transparent); border-color: var(--osd); box-shadow: 0 0 14px color-mix(in srgb, var(--osd) 60%, transparent); }
/* UI kit: theme colour for the wardrobe tiles, decorating and inventory panels (was a fixed blue). */
.ward-tile { border-color: var(--osd); background: linear-gradient(color-mix(in srgb, var(--osd) 78%, #fff), color-mix(in srgb, var(--osd) 88%, #000)); }
.ward-tile.selected, .ward-tile:focus-visible, .ward-tile:not(:disabled):hover { border-color: color-mix(in srgb, var(--osd) 75%, #fff); }
.ward-tile.tint .ward-mask, .ward-crumb .ward-mask { background: linear-gradient(color-mix(in srgb, var(--osd) 75%, #fff), var(--osd) 55%, color-mix(in srgb, var(--osd) 85%, #000)); }
.ward-crumb { border-color: var(--osd); }
.ward-empty { color: var(--osd-deep); }
.dec-head, .dec-dialog, .dec-wp-body, .dec-wp-arrow, .dec-wp-name, #inventory .inv-box { background: linear-gradient(color-mix(in srgb, var(--osd) 78%, #fff), color-mix(in srgb, var(--osd) 88%, #000)); }
.dec-head-value, .dec-dialog-row, #inventory .inv-box span { color: var(--osd); }
.dec-meter { background: linear-gradient(color-mix(in srgb, var(--osd) 78%, #fff), color-mix(in srgb, var(--osd) 88%, #000)); border-color: var(--osd); }
.dec-wp-head, .dec-heat-badge { background: var(--osd); }
.dec-hold:active { background: color-mix(in srgb, var(--osd) 85%, transparent); }
.portable-label { color: var(--osd-name, #009cdc); }
.inv-about h2 { color: var(--osd-hi); }
/* --- Menu pages in the kit: one window on the dimmed space (Home dims the world under its menus) - */
#overlay.page-personal, #overlay.page-redecorate { display: block; padding: 0; }
#overlay.page-menu, #overlay.page-options, #overlay.page-personal, #overlay.page-redecorate, #overlay.page-help { background: rgb(0 0 0 / .68); }
.hk-screen { position: fixed; inset: 0; display: grid; align-content: start; justify-content: start; min-height: 0;
  padding: max(9vh, calc(env(safe-area-inset-top) + 12px)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left), 7vw); }
.hk-screen > .hk-window { width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 9vh - 24px); max-height: calc(100dvh - 9vh - 24px); }
.hk-screen > .hk-options { width: min(620px, calc(100vw - 32px)); height: calc(100dvh - 9vh - 32px); max-height: 640px; }
.hk-screen > .hk-help { width: min(520px, calc(100vw - 32px)); }
.hk-options .hk-tabs { margin: 0 0 4px; }
.hk-options .opt-page { display: grid; gap: 6px; align-content: start; min-width: 0; }
.hk-body .opt-page h2 { margin: 4px 0 0; font: 400 18px/1.2 var(--h-font); color: var(--hk-title); }
.hk-body .opt-form { display: grid; gap: 8px; }
.hk-body .opt-form input { width: 100%; font: 400 16px var(--h-font); }
.hk-body .small { font-size: 12px; }
@media (max-width: 760px), (max-height: 500px) {
  .hk-screen { justify-content: center; padding: max(8px, calc(env(safe-area-inset-top) + 6px)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .hk-screen > .hk-window, .hk-screen > .hk-options { width: min(620px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); }
  .hk-screen > .hk-options { height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height: none; }
}
/* Graphics page on the card (js/ui.mjs graphicsPage). */
.hk-body .gfx-current { background: color-mix(in srgb, var(--osd) 12%, var(--hk-paper)); border: 1px solid color-mix(in srgb, var(--osd) 40%, #fff); }
.hk-body .gfx-current-label { color: var(--osd-deep); }
.hk-body .gfx-current-name { font-weight: 400; color: var(--hk-ink); }
.hk-body .gfx-current-note { color: var(--hk-muted); }
.hk-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin: 0; padding: 6px 10px; border: 1px solid #d3d9de; border-radius: 5px;
  background: var(--hk-soft); color: var(--hk-ink); font: 400 14px/1.25 var(--h-font); text-align: left; cursor: pointer; }
.hk-choice:hover, .hk-choice:focus-visible { border-color: var(--osd); outline: none; }
.hk-choice.selected { border-color: var(--osd); background: color-mix(in srgb, var(--osd) 12%, var(--hk-paper)); box-shadow: inset 3px 0 0 var(--osd); }
.hk-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #9aa4ad; background: #fff; }
.hk-choice.selected .hk-radio { border-color: var(--osd); background: radial-gradient(circle, var(--osd) 0 45%, #fff 50%); }
.hk-body .gfx-mode-name { font: 400 15px var(--h-font); }
.hk-body .gfx-mode-note { color: var(--hk-muted); opacity: 1; }
.hk-body .gfx-ms { color: #2e8b3a; } .hk-body .gfx-ms.slow { color: #c0661c; }
.hk-body .gfx-other summary { color: var(--hk-muted); }
.hk-body .gfx-results th, .hk-body .gfx-results td { border-bottom-color: var(--hk-line); color: var(--hk-ink); }
.hk-body .gfx-results tr.best td { color: var(--osd-deep); }
.hk-body .gfx-reload { position: sticky; bottom: -8px; margin: 4px -8px -8px; padding: 8px; background: color-mix(in srgb, var(--osd) 14%, var(--hk-paper)); border-top: 1px solid var(--osd); color: var(--hk-ink); }
.hk-body .h-progress { background: #d7dde2; box-shadow: inset 0 1px 2px rgb(0 0 0 / .3); }
#overlay.measuring .hk-window { opacity: .35; }
/* Start menu: the selected icon's symbol and ring in the player's colour (Home tints its menu art). */
.mi-symbol { background: linear-gradient(color-mix(in srgb, var(--osd) 50%, #fff), var(--osd) 55%, var(--osd-deep)); }
.mi-ring { box-shadow: 0 0 0 3px var(--osd), 0 0 14px 2px color-mix(in srgb, var(--osd-hi) 75%, transparent), inset 0 0 10px color-mix(in srgb, var(--osd-hi) 60%, transparent); }
@media (orientation: landscape) and (max-height: 500px) { .menu-ring { max-width: none; flex-wrap: nowrap; } .menu-item { --size: 50px; } }
/* Navigator background: the selected destination's picture, cross-faded over Home's rays. */
.nav-wall { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nav-wall > span { position: absolute; inset: -5%; background: center / cover no-repeat; opacity: 0; transition: opacity .45s linear; filter: blur(14px) brightness(.5) saturate(1.05); }
.nav-wall > span.on { opacity: 1; }
html.touch .nav-wall > span { inset: 0; filter: brightness(.45); }
/* UI QA: an empty status line / stats chip draws nothing (was an empty dark pill). */
#status:empty, #stats:empty { display: none; }
/* Wardrobe exit dialog (kit dialog): where the tiles were, the tiles hidden under it (native w-exit-confirm). */
#wardrobe > .ward-dialog { position: relative; inset: auto; z-index: 2; grid-column: 1; grid-row: 1; align-self: center; justify-self: center; display: block; background: none; }
.ward-panel.under-dialog { visibility: hidden; }
@media (max-aspect-ratio: 1/1) { #wardrobe > .ward-dialog { grid-row: 2; align-self: end; margin-bottom: 20vh; } }
/* Landscape: Home's exit prompt stands just left of the avatar (native 1280×720 wardrobe-exit
   frame: top-left at 528, 330 = 41.25 %, 45.8 %), not in the tile column. */
@media (min-aspect-ratio: 1/1) { #wardrobe > .ward-dialog { position: absolute; left: 41.25%; top: 45.8%; grid-column: auto; grid-row: auto; align-self: auto; justify-self: auto; } }
@media (max-aspect-ratio: 1/1) { #connecting .connecting-body { flex-direction: column; text-align: center; } } /* UI QA: phones, the text no longer runs off the screen */
/* Phones: the top bar's six icons leave the place chip some room (UI QA). */
@media (max-width: 430px) { html.touch header.hud { gap: 4px; padding: 4px; } html.touch .tbutton { width: 38px; height: 38px; } html.touch .tbutton img, html.touch .tbutton .ticon { width: 25px; height: 25px; } }
/* Phones: the Navigator's legend can wrap to two lines; keep the cards clear of it. */
@media (max-width: 760px) { .nav-column { bottom: 84px; } }
/* The wardrobe draws on the main canvas: the start screen's backdrop (no space yet) must not cover it. */
html.wardrobe-open #start-backdrop { visibility: hidden; }
/* --- Night Mode (Options › Display): the same Home look with dark cards and light text --------- */
html.night {
  --hk-ink: #e8ecf0; --hk-muted: #9ba6b1; --hk-line: #32373d; --hk-paper: #1b1e22; --hk-soft: #24282d; --hk-field: linear-gradient(#2a2e33, #202327); --hk-edge: #454b52;
  --hk-grey: linear-gradient(#3b4046, #2c3035 50%, #24272b 50%, #1d2023);
  --hk-title: var(--hk-title-dark, color-mix(in srgb, var(--osd-hi) 65%, #fff));
  --hk-frame: linear-gradient(color-mix(in srgb, var(--osd) 78%, #000), color-mix(in srgb, var(--osd) 52%, #000) calc(100% - 4px), color-mix(in srgb, var(--osd) 32%, #000) 0);
}
html.night .hk-card, html.night .tgt-card { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 2px 2px rgb(0 0 0 / .4); }
html.night .tgt-menu { background: var(--hk-frame); }
html.night .hk-toggle, html.night .mods-switch, html.night .h-check { box-shadow: inset 0 1px 2px rgb(255 255 255 / .12), 0 0 0 1px #4a5057; }
/* The target / seat menu card follows the kit's paper and title colours (Night Mode, contrast). */
.tgt-card { background: var(--hk-paper); }
.tgt-title { color: var(--hk-title); }
.tgt-item, .tgt-banner, .tgt-legend { color: var(--hk-on-osd); }
.tgt-item, .tgt-banner { text-shadow: var(--hk-on-osd-shadow); }

/* --- PC top bar in the kit: quiet while playing, full on hover / focus / keyboard (short fade) --- */
html:not(.touch) header.hud { gap: 5px; padding: 0; background: none; backdrop-filter: none; border-radius: 0; opacity: .4; transition: opacity .35s ease-out; font-family: var(--h-font); }
html:not(.touch) header.hud:hover, html:not(.touch) header.hud:focus-within, html.hud-keys:not(.touch) header.hud { opacity: 1; transition-duration: .12s; }
html:not(.touch) header.hud button { position: relative; min-height: 28px; padding: 0 11px 0 7px; border: 0; border-radius: 5px; color: var(--hk-on-osd); background: var(--hk-bar);
  font: 400 14px/1 var(--h-font); text-shadow: var(--hk-on-osd-shadow); box-shadow: 0 1px 3px rgb(0 0 0 / .45); }
html:not(.touch) header.hud button:hover, html:not(.touch) header.hud button:focus-visible { background: var(--hk-bar-sel); outline: none; }
html:not(.touch) header.hud button img { display: none; }
html:not(.touch) header.hud button::before { content: ""; flex: none; width: 21px; height: 21px; margin: -2px 0; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#navigator-button { --ic: url(/bundles/ui/menu-navigator-hl.png); }
#emote-button { --ic: url(/bundles/ui/menu-personal-hl.png); }
#people-button { --ic: url(/bundles/ui/menu-community-hl.png); }
#mods-button { --ic: url(/icons/generated/mods-hl.png); } /* generated: docs/ui/UI-KIT.md "Generated icons" */
/* Menu = Home's START button symbol (hubosd buttonicons, a 32x32 font cell: cropped to the glyph). */
#menu-button { --ic: url(/bundles/ui/pad-start.png); }
html:not(.touch) #menu-button::before { -webkit-mask-size: 160%; mask-size: 160%; -webkit-mask-position: 50% 100%; mask-position: 50% 100%; width: 17px; height: 17px; margin: 0; }
html:not(.touch) header.hud #place, html:not(.touch) header.hud #instance, html:not(.touch) header.hud #peers { color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px rgb(0 0 0 / .6); font: 400 14px var(--h-font); }
html:not(.touch) header.hud #place { margin-left: 6px; }
html:not(.touch) header.hud #peers { color: color-mix(in srgb, var(--osd-hi) 55%, #fff); }
/* Phones: the touch bar stays visible (no hover), in the kit's colours. */
html.touch header.hud { background: linear-gradient(rgb(255 255 255 / .14), rgb(255 255 255 / .04)), rgb(8 12 18 / .5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
html.touch .tbutton { background: var(--hk-bar); border: 0; box-shadow: 0 1px 2px rgb(0 0 0 / .4); }
html.touch .tbutton:active { background: var(--hk-bar-sel); }
html.touch #place, html.touch #instance { font-family: var(--h-font); }
html.touch #peers { color: color-mix(in srgb, var(--osd-hi) 55%, #fff); }
.rpcn-form input { background: var(--hk-paper); border: 1px solid var(--hk-edge); color: var(--hk-ink); }
html.touch .hk-tab { padding: 0 9px; }
@media (max-width: 380px) { html.touch .hk-tab { padding: 0 7px; font-size: 13px; } }
/* Start menu: the graphics-mode line sits above the legend, out of the way of the space. */
.menu-mode { position: fixed; left: 0; right: 0; bottom: 58px; margin: 0; text-align: center; text-shadow: 0 1px 2px #000; }
html.touch .hk-tabs .hk-tab { flex: 1 1 auto; justify-content: center; padding: 0 4px; }
.hk-tabbar { flex: none; padding: 0 8px 6px; }
.hk-options .hk-tabs { margin: 0; }
@media (orientation: landscape) and (max-height: 500px) { .hk-head { padding: 5px 8px 4px; } .hk-icon { width: 32px; height: 32px; } .hk-title { font-size: 19px; } .nav-description { max-height: 6.2em; } }
/* Kit windows grow with the screen like Home's 1280x720 OSD (never below their compact size). */
.hk-screen > .hk-window, .people.panel, .mods-panel { --hk-zoom: max(1, var(--hud-k)); zoom: var(--hk-zoom); }
.hk-screen > .hk-window { max-height: calc((100dvh - 9vh - 24px) / var(--hk-zoom)); }
.hk-screen > .hk-options { height: calc((100dvh - 9vh - 32px) / var(--hk-zoom)); }
html:not(.touch) header.hud { zoom: max(1, var(--hud-k)); }
.people-header img { content: url(/bundles/ui/menu-community-hl.png); } /* Home's white menu art on the theme tile */

/* ==== Home's dark OSD menus (kit look "osd", the default; js/home-ui.mjs windowBox) =================
 * Native frames: drive@settings m0/n*, captures/native/20261023-osd-colour 01-options / 02-display /
 * 03-picker (1280x720): over the space dimmed to near black, the menu's round icon (80 px: Home's dark
 * plate, the symbol in the Pop-up Color, the selection ring) at x 160 y 92, the header bar art
 * (menuscreen header, 336 wide) to its right with the title, then the list from x 234: dark bars
 * (normal_bt, 336 x 29, 40 px pitch), the selected one silver (normal_bt hl) with dark text; the
 * legend centred at the bottom. Pages that need room (Options) show their content in a dark chip
 * panel beside the list. Night Mode: the same (these screens are dark in Home). */
.hk-osd, .people.panel, .mods-panel {
  --hk-ink: #eef1f4; --hk-muted: #a3acb6; --hk-line: rgb(255 255 255 / .08); --hk-paper: #121417; --hk-soft: rgb(255 255 255 / .06);
  --hk-field: linear-gradient(#26292d, #16181b); --hk-edge: #41464c; --hk-title: #fff;
  --hk-grey: linear-gradient(#3b4046, #2c3035 50%, #24272b 50%, #1d2023); }
#overlay.page-options, #overlay.page-personal, #overlay.page-redecorate, #overlay.page-help { background: rgb(0 0 0 / .78); }
.hk-screen:has(> .hk-osd) { padding-top: max(12.8vh, calc(env(safe-area-inset-top) + 10px)); padding-left: max(12.5vw, calc(env(safe-area-inset-left) + 10px)); }
.hk-screen > .hk-window.hk-osd { zoom: 1; width: auto; max-width: calc(100vw - 24px); max-height: none; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--hk-ink); }
.hk-osd > .hk-card { zoom: var(--hk-zoom, 1); display: grid; grid-template-columns: 410px; align-content: start; max-height: calc((100dvh - 12.8vh - 60px) / var(--hk-zoom, 1)); overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.hk-osd { --hk-zoom: max(1, var(--hud-k)); }
.hk-osd .hk-head { position: relative; height: 80px; padding: 0; gap: 0; margin-bottom: 30px; }
.hk-osd .hk-icon { z-index: 1; width: 80px; height: 80px; border-radius: 50%; background: var(--plate, none) center / contain no-repeat, radial-gradient(circle, #2a2d31 0 56%, #0d0e10 72%);
  box-shadow: 0 0 0 4px var(--osd), 0 0 14px 3px color-mix(in srgb, var(--osd-hi) 65%, transparent), inset 0 0 12px rgb(0 0 0 / .8); }
.hk-osd .hk-icon::after { inset: 20%; background: linear-gradient(color-mix(in srgb, var(--osd) 50%, #fff), var(--osd) 55%, var(--osd-deep)); }
.hk-osd .hk-titles { flex: 0 1 336px; display: flex; align-items: center; min-width: 0; height: 40px; margin-left: -8px; padding: 0 6px 0 4px; border: 0 solid transparent; border-width: 0 12px; border-image: url(/bundles/ui/osd-header.png) 0 12 fill / 0 12px stretch; }
html:not(.osd-art) .hk-osd .hk-titles { background: linear-gradient(#2a2c30, #0b0c0d); border-radius: 6px; }
.hk-osd .hk-title { color: #fff; font: 400 22px/1 var(--h-font); }
.hk-osd .hk-subtitle { display: none; }
.hk-osd .hk-close { display: none; }
.hk-osd .hk-body { margin-left: 74px; width: 336px; padding: 0; overflow-y: auto; gap: 11px; }
.hk-osd .hk-list { gap: 11px; }
.hk-osd .hk-row, .hk-osd .hk-tab { justify-content: flex-start; width: 100%; min-height: 29px; margin: 0; padding: 0 2px; border: 0 solid transparent; border-width: 0 12px; border-radius: 0;
  border-image: url(/bundles/ui/osd-list.png) 0 12 fill / 0 12px stretch; background: none; box-shadow: none; color: #fff; font: 400 16px/1.1 var(--h-font); text-align: left; text-shadow: none; }
.hk-osd .hk-row.selected, .hk-osd .hk-row:not(:disabled):hover, .hk-osd .hk-row:focus-visible, .hk-osd .hk-tab.selected, .hk-osd .hk-tab:hover, .hk-osd .hk-tab:focus-visible { border-image-source: url(/bundles/ui/osd-list-hl.png); background: none; color: #1d1f22; outline: none; }
html:not(.osd-art) .hk-osd .hk-row, html:not(.osd-art) .hk-osd .hk-tab { background: linear-gradient(#232528, #070708); border-radius: 4px; }
html:not(.osd-art) .hk-osd .hk-row.selected, html:not(.osd-art) .hk-osd .hk-tab.selected { background: linear-gradient(90deg, #f3f4f5, #b9bcbf 55%, #9a9da1); }
.hk-osd .hk-row:disabled { opacity: .45; filter: none; }
/* Options: the category list under the header, the page in a dark chip panel beside it. */
.hk-osd.hk-options > .hk-card { grid-template-columns: 410px minmax(0, 560px); grid-template-rows: auto auto 1fr; column-gap: 26px; height: calc((100dvh - 12.8vh - 60px) / var(--hk-zoom, 1)); }
.hk-osd.hk-options .hk-head { grid-column: 1; grid-row: 1; }
.hk-osd.hk-options .hk-tabbar { grid-column: 1; grid-row: 2; padding: 0 0 0 74px; }
.hk-osd.hk-options .hk-tabs { flex-direction: column; gap: 11px; width: 336px; overflow: visible; }
.hk-osd.hk-options .hk-body { grid-column: 2; grid-row: 1 / 4; width: auto; margin: 0; min-height: 0; align-self: start; max-height: 100%; padding: 4px 6px; gap: 8px;
  border: 12px solid transparent; border-image: url(/bundles/ui/osd-chip.png) 12 fill / 12px stretch; }
.hk-osd.hk-help .hk-body { padding: 4px 6px; border: 12px solid transparent; border-image: url(/bundles/ui/osd-chip.png) 12 fill / 12px stretch; width: 420px; }
.hk-osd.hk-help > .hk-card { grid-template-columns: 510px; }
html:not(.osd-art) .hk-osd.hk-options .hk-body, html:not(.osd-art) .hk-osd.hk-help .hk-body { background: rgb(14 15 17 / .92); border-radius: 8px; }
.hk-osd .hk-swatches { background: #050505; box-shadow: inset 0 0 0 1px #333; }
.hk-osd .hk-toggle, .mods-panel .mods-switch { box-shadow: inset 0 1px 2px rgb(255 255 255 / .12), 0 0 0 1px #50565d; }
.hk-osd .hk-arrow { color: #fff; }
@media (max-width: 760px), (max-height: 500px) {
  .hk-screen:has(> .hk-osd) { padding: max(8px, calc(env(safe-area-inset-top) + 6px)) max(8px, env(safe-area-inset-right)) 52px max(8px, env(safe-area-inset-left)); justify-content: stretch; }
  .hk-screen > .hk-window.hk-osd { max-width: none; }
  .hk-osd > .hk-card, .hk-osd.hk-options > .hk-card, .hk-osd.hk-help > .hk-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); height: auto; max-height: calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .hk-osd .hk-head { height: 58px; margin-bottom: 8px; }
  .hk-osd .hk-icon { width: 56px; height: 56px; }
  .hk-osd .hk-titles { flex: 1 1 auto; height: 36px; }
  .hk-osd .hk-body, .hk-osd.hk-help .hk-body { margin-left: 0; width: auto; }
  .hk-osd.hk-options .hk-tabbar { grid-column: 1; grid-row: 2; padding: 0 0 8px; }
  .hk-osd.hk-options .hk-tabs { flex-direction: row; width: auto; overflow-x: auto; gap: 4px; }
  .hk-osd.hk-options .hk-tab { flex: 1 0 auto; width: auto; justify-content: center; padding: 0; min-height: 36px; font-size: 14px; }
  .hk-osd.hk-options .hk-body, .hk-osd.hk-help .hk-body { grid-column: 1; grid-row: 3; }
  .hk-osd .hk-row { min-height: 38px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hk-osd.hk-options > .hk-card { grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 10px; height: calc(100dvh - 64px); }
  .hk-osd.hk-options .hk-head { grid-column: 1 / 3; margin-bottom: 4px; height: 44px; }
  .hk-osd.hk-options .hk-icon { width: 42px; height: 42px; }
  .hk-osd.hk-options .hk-tabbar { grid-column: 1; grid-row: 2; }
  .hk-osd.hk-options .hk-tabs { flex-direction: column; overflow: visible; gap: 6px; }
  .hk-osd.hk-options .hk-tab { flex: none; justify-content: flex-start; min-height: 34px; }
  .hk-osd.hk-options .hk-body { grid-column: 2; grid-row: 2; }
}
/* People and Mods (js/social.mjs, js/mods.mjs): Home's dark chip panel with the header bar. */
.people.panel, .mods-panel { background: none; border: 12px solid transparent; border-image: url(/bundles/ui/osd-chip.png) 12 fill / 12px stretch; border-radius: 0; box-shadow: 0 6px 22px rgb(0 0 0 / .45); color: var(--hk-ink); }
html:not(.osd-art) .people.panel, html:not(.osd-art) .mods-panel { background: rgb(14 15 17 / .94); border-radius: 8px; }
.people-header, .mods-head { min-height: 40px; padding: 0 2px; border: 0 solid transparent; border-width: 0 12px; border-image: url(/bundles/ui/osd-header.png) 0 12 fill / 0 12px stretch; }
.people-header h1, .mods-head h2 { color: #fff; font: 400 20px/1 var(--h-font); }
.people .nav-close, .mods-close { color: #fff; }
.people-header img { background: radial-gradient(circle, #2a2d31 0 56%, #0d0e10 72%); border-radius: 50%; box-shadow: 0 0 0 2px var(--osd); }
.people-tabs button, .people .people-tabs button:not([aria-selected="true"]) { min-height: 28px; border: 0 solid transparent; border-width: 0 10px; border-radius: 0; padding: 0 4px; border-image: url(/bundles/ui/osd-list.png) 0 12 fill / 0 10px stretch; background: none; color: #fff; text-shadow: none; }
.people .people-tabs button[aria-selected="true"] { border-image-source: url(/bundles/ui/osd-list-hl.png); background: none; color: #1d1f22; text-shadow: none; }
.people-row, .people-item, .people-card { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .08); }
.mods-row { border-top-color: rgb(255 255 255 / .08); }

/* OSD rows: the hover look follows the single selection (js/home-ui.mjs row), not :hover. */
.hk-osd .hk-row:not(.selected):not(:focus-visible):hover { border-image-source: url(/bundles/ui/osd-list.png); color: #fff; }
.people .people-tabs button[aria-selected="true"] { border: 0 solid transparent; border-width: 0 10px; border-radius: 0; padding: 0 4px; border-image: url(/bundles/ui/osd-list-hl.png) 0 12 fill / 0 10px stretch; }
@media (max-width: 760px) { .hk-osd.hk-options .hk-tab { border-width: 0 6px; border-image-width: 0 6px; font-size: 13px; } }

/* ==== Every form control in the Home look (UI QA audit 2026-10-23; docs/ui/UI-KIT.md "Controls") ====
 * No browser-styled control anywhere: choices are Home's ◀ value ▶ selector (js/home-ui.mjs select,
 * no dropdown), checkboxes / radios / sliders are Home's option-screen art, text fields Home's dark
 * recessed field, scrollbars Home's scroll bar (white art tinted: a dim groove, the thumb in the
 * Pop-up Color), focus is Home's highlight in the Pop-up Color (never a browser outline), disabled
 * is dimmed but readable. Same in Night Mode and for every Pop-up Color. */
/* Option selector: Home's black control with ◀ ▶ (menuscreen slider art), the value centred. */
.hk-select { display: inline-grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; min-width: 13em; max-width: 100%; height: 30px; padding: 0 2px; border: 0; border-radius: 5px;
  background: #060606; box-shadow: inset 0 1px 2px rgb(255 255 255 / .1), 0 0 0 1px #4a5057; color: #fff; font: 400 14px/1 var(--h-font); text-align: center; cursor: default; user-select: none; -webkit-user-select: none; }
.hk-select .hk-choice-value { min-width: 0; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-select .hk-arrow { width: 24px; height: 28px; color: #fff; border-radius: 4px; }
.hk-select .hk-arrow:disabled { opacity: .28; cursor: default; }
.hk-select .hk-arrow:not(:disabled):hover, .hk-select .hk-arrow.is-hover { color: var(--osd-hi); background: rgb(255 255 255 / .08); }
.hk-select:focus-visible, .hk-select.is-focus { outline: none; box-shadow: inset 0 1px 2px rgb(255 255 255 / .1), 0 0 0 2px var(--osd-hi), 0 0 10px 1px color-mix(in srgb, var(--osd-hi) 55%, transparent); }
.hk-select[aria-disabled="true"] { opacity: .45; }
html.touch .hk-select { height: 38px; grid-template-columns: 34px minmax(0, 1fr) 34px; font-size: 15px; }
html.touch .hk-select .hk-arrow { width: 34px; height: 36px; }
/* Checkbox (Home's checkbox_bg + checkbox_white): on = the square in the Pop-up Color with its gloss. */
.hk-toggle::after, .mods-switch::after, .h-check::after { background: linear-gradient(135deg, color-mix(in srgb, var(--osd) 45%, #fff) 0 35%, var(--osd) 36% 70%, var(--osd-deep));
  -webkit-mask: url(/bundles/ui/osd-check.png) center / 100% 100% no-repeat; mask: url(/bundles/ui/osd-check.png) center / 100% 100% no-repeat; }
.hk-toggle:checked::after, .mods-switch:checked::after, .h-check:checked::after { background-color: transparent; }
.hk-toggle:focus-visible, .mods-switch:focus-visible, .h-check:focus-visible, .hk-toggle.is-focus { outline: none; box-shadow: inset 0 1px 2px rgb(255 255 255 / .12), 0 0 0 2px var(--osd-hi), 0 0 10px 1px color-mix(in srgb, var(--osd-hi) 55%, transparent); }
.hk-toggle:disabled, .mods-switch:disabled { opacity: .4; cursor: default; }
/* Radio (Home's radio_bg + radio_white): a black well; selected = the ball in the Pop-up Color. */
.hk-radio, .looks input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; padding: 4px; border: 0; border-radius: 50%; opacity: 1;
  background: #060606; box-shadow: inset 0 1px 2px rgb(255 255 255 / .12), 0 0 0 1px #4a5057; background-clip: padding-box; }
.hk-choice.selected .hk-radio, .looks input[type="radio"]:checked { background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--osd) 40%, #fff), var(--osd) 45%, var(--osd-deep) 68%, transparent 70%) content-box, #060606; border: 0; }
/* Text fields: Home's dark recessed field; focus = the Pop-up Color edge and glow. */
.hk-input, .hk-body input:not([type]), .hk-body input[type="text"], .hk-body input[type="search"], .hk-body textarea, .people input, .people textarea, .nav-search,
.rpcn-form input, html.touch #chat-input {
  color: #fff; background: #060606; border: 1px solid #4a5057; border-radius: 4px; box-shadow: inset 0 1px 3px rgb(0 0 0 / .8); caret-color: var(--osd-hi); font-family: var(--h-font); font-weight: 400; }
html.touch #chat-input { border-radius: 22px; }
:is(.hk-input, .hk-body input, .hk-body textarea, .people input, .people textarea, .nav-search, .rpcn-form input, #chat-input)::placeholder { color: #8b949c; opacity: 1; }
:is(.hk-input, .hk-body input, .hk-body textarea, .people input, .people textarea, .nav-search, .rpcn-form input, #chat-input):focus { outline: none; border-color: var(--osd-hi); box-shadow: inset 0 1px 3px rgb(0 0 0 / .8), 0 0 0 1px var(--osd-hi), 0 0 10px color-mix(in srgb, var(--osd-hi) 50%, transparent); }
:is(.hk-input, .hk-body input, .people input):disabled { opacity: .45; }
.hk-input.is-focus { border-color: var(--osd-hi); box-shadow: inset 0 1px 3px rgb(0 0 0 / .8), 0 0 0 1px var(--osd-hi), 0 0 10px color-mix(in srgb, var(--osd-hi) 50%, transparent); }
/* Focus: Home's highlight in the Pop-up Color on every menu, never the browser's outline. */
:where(#overlay, .mods-panel, #wardrobe, #decorate, #inventory, #news, .tgt-menu, .tgt-banner, header.hud, #notifications, #emotes, #connecting, #start-backdrop) :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--osd-hi), 0 0 10px 1px color-mix(in srgb, var(--osd-hi) 55%, transparent); }
:where(#overlay, .mods-panel, #wardrobe, #decorate, #inventory, #news) :focus:not(:focus-visible) { outline: none; }
.hk-btn:focus-visible, .hk-btn.is-focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 10px 2px color-mix(in srgb, var(--osd-hi) 70%, transparent); }
.hk-btn.is-hover { filter: brightness(1.08); }
.hk-osd .hk-row.is-hover, .hk-osd .hk-tab.is-hover { border-image-source: url(/bundles/ui/osd-list-hl.png); color: #1d1f22; }
.legend-key.is-hover { text-shadow: 0 0 6px rgb(255 255 255 / .55); background: rgb(255 255 255 / .08); }
/* Disabled: dimmed, still readable (no white-on-white). */
:where(#overlay, .mods-panel) button:disabled { cursor: default; }
.hk-btn:disabled { opacity: .5; filter: grayscale(.8); }
/* Scrollbars: Home's scroll bar (Scrollbar/ScrollBase*, ScrollInner*: white art tinted): a dim
 * rounded groove and the thumb in the Pop-up Color. */
* { scrollbar-width: thin; scrollbar-color: var(--osd, #0093d2) rgb(255 255 255 / .1); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgb(255 255 255 / .1); border-radius: 4px; }
::-webkit-scrollbar-thumb { border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--osd, #0093d2) 60%, #fff), var(--osd, #0093d2) 60%, var(--osd-deep, #005f8d)); border: 1px solid rgb(0 0 0 / .35); }
::-webkit-scrollbar-corner { background: transparent; }
/* Disclosure rows (Graphics › other modes, RPCN sign-in): Home's ▶ arrow, turned when open. */
.gfx-other summary, .rpcn-signin summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.gfx-other summary::-webkit-details-marker, .rpcn-signin summary::-webkit-details-marker { display: none; }
.gfx-other summary::before, .rpcn-signin summary::before { content: ""; flex: none; width: 9px; height: 12px; background: currentColor; transition: transform .15s;
  -webkit-mask: url(/bundles/ui/osd-arrow-r.png) center / contain no-repeat; mask: url(/bundles/ui/osd-arrow-r.png) center / contain no-repeat; }
.gfx-other[open] > summary::before, .rpcn-signin[open] > summary::before { transform: rotate(90deg); }
/* The old dropdown look is gone everywhere (.h-select was the pre-kit graphics select). */
select { -webkit-appearance: none; appearance: none; }

/* Wardrobe legend pill (js/wardrobe.mjs renderHint): Home's pad art like every legend. */
.ward-hint .legend-key { gap: 5px; padding: 4px 6px; color: #fff; font: 400 15px/1 var(--h-font); }
.ward-hint .legend-key:disabled { opacity: .45; }
.ward-hint .hk-pad { width: 1.25em; height: 1.25em; }

/* --- Options > Storage (js/ui.mjs storagePage) and the kit's confirmation pop-up (home-ui.mjs confirm) --- */
.st-size .hk-select { min-width: 9.5em; }
.st-total { display: grid; justify-items: end; gap: 4px; min-width: 11em; }
.st-meter { width: 100%; height: 6px; }
.st-value { min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; color: var(--hk-ink); }
.st-row { justify-content: flex-end; flex-wrap: nowrap; gap: 6px; }
.st-row .hk-btn { padding-block: 2px; min-height: 0; font-size: 12px; }
.st-quota, .st-status { margin: 2px 2px 0; }
.st-status { color: var(--hk-ink); }
.st-status[data-state="paused"], .st-status[data-state="full"], .st-status[data-state="failed"] { color: var(--hk-muted); }
.hk-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgb(0 0 0 / .55); }
.hk-modal .hk-dialog { max-width: min(440px, 100%); }
.hk-dialog-text { margin: 2px 4px 8px; max-width: 26em; font: 400 15px/1.35 var(--h-font); color: var(--hk-ink); }
.hk-field-label .hk-chip { justify-self: start; } /* the "after reload" / "next space" tag hugs its text */

/* Wardrobe legend pill = Home's (native w-main.png, 1280x720): dark rounded pill (50,52,53), 40 high,
 * left edge at x 479 (37.4 %), bottom at 665 (55 up); "✕ Select ○ Back [R3] Camera [L2][R2] Turn"
 * (WardrobeClothingLegendAcceptChanges). L2 / R2 turn while held; no separate ⟲ ⟳ buttons. */
.ward-hint { left: 37.4vw; transform: none; bottom: calc(var(--hud-k, 1) * 55px + env(safe-area-inset-bottom)); height: calc(var(--hud-k, 1) * 40px); gap: 0 calc(var(--hud-k, 1) * 4px); padding: 0 calc(var(--hud-k, 1) * 14px);
  border-radius: calc(var(--hud-k, 1) * 6px); background: rgb(50 52 53 / .96); box-shadow: 0 1px 3px rgb(0 0 0 / .3); max-width: calc(100vw - 37.4vw - 10px); }
.ward-hint .legend-key { gap: calc(var(--hud-k, 1) * 4px); padding: 0 calc(var(--hud-k, 1) * 2px); font: 400 calc(var(--hud-k, 1) * 16px) / 1 var(--h-font); }
.ward-hint .hk-pad { width: 1.2em; height: 1.2em; }
.ward-turnkeys { gap: 1px; }
.ward-hint .ward-turnkey { display: inline-grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 3px; background: none; color: inherit; font: inherit; cursor: pointer; touch-action: none; }
.ward-turnkey:active, .ward-turnkey:hover { background: rgb(255 255 255 / .12); }
.ward-turn { display: none; }
/* Phones: the same pill, full width at the bottom, thumb-sized entries (L2 / R2 big hold targets). */
@media (max-aspect-ratio: 1/1), (max-height: 500px) {
  .ward-hint { left: 8px; right: 8px; max-width: none; height: auto; min-height: 48px; bottom: max(8px, env(safe-area-inset-bottom)); justify-content: center; flex-wrap: wrap; padding: 4px 8px; }
  .ward-hint .legend-key { min-height: 40px; padding: 0 2px; font-size: 14px; }
  .ward-hint b { display: none; }
  .ward-hint .ward-turnkey { min-width: 34px; min-height: 40px; }
  .ward-turnkey .hk-pad { width: 1.4em; height: 1.4em; }
}

/* ---- Sign-in and first run (js/signin.mjs, docs/decisions/0002-login-identity.md) ----------------
   PsHomeCentral's landing-page look (apps/site/src/styles/global.css): the Navigator's blue rays,
   the dark OSD panel, the glossy blue pill buttons with Home's ✕ pad art in a white disc, and the
   site's font, M PLUS 1p (SIL Open Font License, Latin subset, /brand). Night Mode: deeper blue. */
@font-face { font-family: "M PLUS 1p"; font-weight: 400; font-display: swap; src: url(/brand/mplus1p-400-latin.woff2) format("woff2"); }
@font-face { font-family: "M PLUS 1p"; font-weight: 700; font-display: swap; src: url(/brand/mplus1p-700-latin.woff2) format("woff2"); }
@font-face { font-family: "M PLUS 1p"; font-weight: 800; font-display: swap; src: url(/brand/mplus1p-800-latin.woff2) format("woff2"); }
.phc-screen { --phc-blue: #0aa2e6; --phc-blue-hi: #36c3fb; --phc-blue-deep: #0670a8; --phc-muted: #b9dcef; --phc-line: rgb(255 255 255 / .12);
  position: fixed; inset: 0; z-index: 31; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); color: #f4fbff; background: #0a3d66;
  font: 400 16px/1.5 "M PLUS 1p", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.phc-screen[hidden] { display: none; }
.phc-rays { position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 50% 36%, #2b8acb 0%, #1d6fae 38%, #124f84 70%, #0a3357 100%); }
.phc-rays::before { content: ""; position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / .055) 0deg 5deg, transparent 5deg 13deg);
  animation: phc-turn 140s linear infinite; will-change: transform; }
.phc-rays::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 30%, rgb(4 30 54 / .65) 100%); }
@keyframes phc-turn { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .phc-rays::before { animation: none; } }
html.night .phc-rays { background: radial-gradient(circle at 50% 36%, #164f78 0%, #0f3d63 38%, #0a2b49 70%, #051a2e 100%); }
html.night .phc-card { background: rgb(4 9 14 / .86); }
.phc-card { position: relative; margin: auto 0; width: min(440px, 100%); display: grid; gap: 12px; padding: 26px; border-radius: 14px;
  background: rgb(10 18 26 / .78); border: 1px solid var(--phc-line); box-shadow: 0 20px 50px rgb(0 15 30 / .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.phc-card.wide { width: min(720px, 100%); }
.phc-logo { display: block; width: 149px; height: 30px; }
.phc-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #dff5ff; opacity: .85; margin-top: 6px; }
.phc-card h1 { margin: -8px 0 0; font: 800 clamp(28px, 7vw, 38px)/1.08 "M PLUS 1p", "Segoe UI", system-ui, sans-serif; letter-spacing: -.3px; }
.phc-sub { margin: 0; color: #edf8ff; font-size: 15.5px; }
.phc-sub i { font-style: normal; font-weight: 700; }
.phc-choose, .phc-card form { display: grid; gap: 12px; }
.phc-card [hidden] { display: none; }
.phc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 16px "M PLUS 1p", "Segoe UI", system-ui, sans-serif; color: #fff; text-decoration: none; text-align: center;
  background: linear-gradient(var(--phc-blue-hi), var(--phc-blue) 60%, var(--phc-blue-deep)); box-shadow: 0 3px 0 #05557f, 0 10px 24px rgb(0 40 80 / .35); transition: transform .12s, filter .12s; }
.phc-btn:hover, .phc-btn:focus-visible { filter: brightness(1.08); transform: translateY(-1px); outline: none; }
.phc-btn:focus-visible { box-shadow: 0 3px 0 #05557f, 0 0 0 3px #fff; }
.phc-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #05557f; }
.phc-btn.ghost { background: rgb(4 26 46 / .62); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38); }
.phc-btn.ghost:focus-visible { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38), 0 0 0 3px #fff; }
.phc-btn:disabled { opacity: .55; cursor: default; filter: none; transform: none; }
.phc-pad { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--phc-blue-deep); flex: none; font-size: 15px; }
.phc-pad .hk-pad { width: 1em; height: 1em; vertical-align: 0; }
.phc-back { justify-self: center; border: 0; background: none; color: #fff; font: 700 14.5px "M PLUS 1p", "Segoe UI", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 10px; }
.phc-switch { margin: 2px 0 0; text-align: center; font-size: 14.5px; color: var(--phc-muted); }
.phc-switch a { color: #fff; font-weight: 700; }
.phc-field { display: grid; gap: 6px; }
.phc-field label { font-size: 14px; font-weight: 700; color: #dff3fd; }
.phc-optional { font-weight: 400; color: var(--phc-muted); }
.phc-field input { width: 100%; padding: 12px 14px; border-radius: 9px; border: 1px solid rgb(255 255 255 / .15); background: rgb(0 0 0 / .45); color: #fff;
  font: 500 16px "M PLUS 1p", "Segoe UI", system-ui, sans-serif; outline: none; box-shadow: inset 0 2px 4px rgb(0 0 0 / .4); }
.phc-field input:focus { border-color: var(--phc-blue-hi); box-shadow: inset 0 2px 4px rgb(0 0 0 / .4), 0 0 0 3px rgb(54 195 251 / .3); }
.phc-field input[aria-invalid="true"] { border-color: #ff8f80; box-shadow: inset 0 2px 4px rgb(0 0 0 / .4), 0 0 0 3px rgb(255 120 100 / .22); }
.phc-hint { font-size: 13px; color: var(--phc-muted); min-height: 1.2em; margin-top: -2px; }
.phc-hint.bad { color: #ffb4a8; }
.phc-notice { display: none; padding: 10px 12px; border-radius: 9px; font-size: 14px; }
.phc-notice.show { display: block; }
.phc-notice.ok { background: rgb(95 240 122 / .14); border: 1px solid rgb(95 240 122 / .4); }
.phc-notice.bad { background: rgb(255 120 100 / .14); border: 1px solid rgb(255 120 100 / .4); }
/* First run: Home's creator presets as the site's white tiles. */
.phc-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 10px; max-height: min(52vh, 460px); overflow-y: auto; padding: 4px; margin: 0 -4px; }
.phc-preset { aspect-ratio: 1; padding: 0; border: 3px solid transparent; border-radius: 12px; cursor: pointer; overflow: hidden; background: #f7fbfe;
  box-shadow: 0 3px 0 #9fc6dc, 0 10px 20px rgb(0 30 60 / .3); transition: transform .12s, border-color .12s; }
.phc-preset img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phc-preset:hover, .phc-preset:focus-visible { border-color: var(--phc-blue-hi); transform: translateY(-2px); outline: none; }
.phc-preset[aria-checked="true"] { border-color: var(--phc-blue); box-shadow: 0 0 0 3px #fff, 0 0 22px rgb(255 255 255 / .5), 0 10px 20px rgb(0 30 60 / .3); }
@media (max-width: 420px) { .phc-card { padding: 20px 18px; } .phc-presets { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } }
a.hk-btn { text-decoration: none; }