/* The HUD (hud.js): menu top left, weather top right, controls bottom left. Same cream as the town's chips and
   the gate's card; every card keeps the 16 px gutter and fits a 375 px phone. */
.hud { --cream: #fffdf6; --ink: #2d3a2a; --soft: #7a6a4f; --line: rgba(45, 58, 42, .14); --accent: #e0703a; --top: max(14px, env(safe-area-inset-top)); }
.hud-btn { top: var(--top); height: 40px; min-width: 40px; padding: 0 14px 0 11px; gap: 7px; }
.hud-btn svg { width: 20px; height: 20px; flex: none; }
.hud-menu { left: 16px; padding: 0; justify-content: center; }
/* Top right is one row (8.17b), from the right: the weather chip at one fixed width (Day, Dusk, Night and Live
   never change it), the environment chip, the speaker chip. The speaker chip lives outside .hud, so its offset repeats the 140 px. */
.hud { --sky-w: 140px; }
.hud-sky { right: 16px; width: var(--sky-w); justify-content: flex-start; }
.hud-sky .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:has(.hud) .sound { top: max(14px, env(safe-area-inset-top)); right: calc(16px + 140px + 8px + 40px + 8px); height: 40px; }
.hud-btn[aria-expanded="true"] { background: #fffaf0; box-shadow: 0 0 0 2.5px var(--accent), 0 3px 0 rgba(45, 58, 42, .18); }
.hud-btn:focus-visible, .hud-card button:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }

.hud-card { position: fixed; z-index: 5; padding: 14px; border-radius: 22px; background: var(--cream); color: var(--ink); box-shadow: 0 4px 0 rgba(45, 58, 42, .2), 0 14px 32px rgba(40, 30, 10, .12); font-size: 14px; }
.hud-card[hidden] { display: none; }
.hud-card button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hud-card h2 { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.hud-card h3 { margin: 14px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.hud-card small { display: block; font-size: 12.5px; font-weight: 600; color: var(--soft); }

/* Main menu */
.hud-main { left: 16px; top: calc(var(--top) + 50px); width: min(270px, calc(100vw - 32px)); padding: 8px; display: grid; gap: 2px; }
.hud-who { margin: 6px 10px 6px; font-size: 12.5px; font-weight: 700; color: var(--soft); overflow-wrap: anywhere; }
.hud-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 10px; border: 0; border-radius: 14px; background: none; font-weight: 700; font-size: 15px; text-align: left; }
.hud-item:hover:not(:disabled), .hud-item:active:not(:disabled) { background: rgba(224, 112, 58, .1); }
.hud-item:disabled { cursor: default; color: rgba(45, 58, 42, .42); }
.hud-item small { padding: 3px 9px; border-radius: 999px; background: rgba(45, 58, 42, .07); color: var(--soft); font-size: 11.5px; letter-spacing: .03em; }
.hud-main hr { width: calc(100% - 20px); margin: 4px 10px; border: 0; border-top: 1.5px solid var(--line); }
.hud-out { color: #b4472a; }

/* Weather menu */
.hud-weather { right: 16px; top: calc(var(--top) + 50px); width: min(340px, calc(100vw - 32px)); }
.hud-live { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 2px solid var(--line); border-radius: 16px; background: #fffdf6; text-align: left; }
.hud-live b { display: block; font-size: 15px; }
.hud-live[aria-pressed="true"] { border-color: var(--accent); }
.hud-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgba(45, 58, 42, .2); transition: background .2s ease; }
.hud-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: translate .2s ease; }
.hud-live[aria-pressed="true"] .hud-switch { background: var(--accent); }
.hud-live[aria-pressed="true"] .hud-switch::after { translate: 16px 0; }
/* Five skies (Thunder, 8.26g) in one row of equal columns: 340 px leaves each "Thunder" its width at 12.5 px. */
.hud-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.hud-opt { display: grid; justify-items: center; gap: 4px; min-height: 58px; padding: 8px 0 7px; border: 2px solid var(--line); border-radius: 14px; background: #fffdf6; font-weight: 700; font-size: 12.5px; }
.hud-opt svg { width: 22px; height: 22px; }
.hud-opt[aria-pressed="true"] { border-color: var(--accent); background: #fff1e6; color: #a8461b; }
.hud-live[aria-pressed="true"] ~ .hud-seg .hud-opt[aria-pressed="true"] { border-color: rgba(224, 112, 58, .45); background: #fffdf6; }
.hud-credit { margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: var(--soft); }

/* Bottom left (8.14b): the Navigation and Controls chips side by side; their cards open above them. */
.hud-dock { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); }
.hud-nav-btn { left: 16px; width: var(--nav-w, 132px); justify-content: flex-start; }
.hud-ctl-btn { left: calc(16px + var(--nav-w, 132px) + 8px); }   /* same 8 px gap as before ADMIN (8.30) */
.hud-ctl-btn[aria-pressed="true"] { background: #fffaf0; box-shadow: 0 0 0 2.5px var(--accent), 0 3px 0 rgba(45, 58, 42, .18); }
body.gate .hud-dock, body.gate .hud-controls, body.gate .hud-nav { display: none; }
/* Switched off in the main menu (8.17c): the chip and its card go; Controls moves into Navigation's place. */
body.hide-nav .hud-nav-btn, body.hide-nav .hud-nav, body.hide-ctl .hud-ctl-btn, body.hide-ctl .hud-controls { display: none; }
body.hide-nav .hud-ctl-btn { left: 16px; }
.hud-toggle .hud-switch { transform: scale(.85); }
.hud-toggle[aria-checked="true"] .hud-switch { background: var(--accent); }
.hud-toggle[aria-checked="true"] .hud-switch::after { translate: 16px 0; }
.hud-nav, .hud-controls { left: 16px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 50px); }
.hud-nav { width: min(320px, calc(100vw - 32px)); max-height: calc(100dvh - 140px); overflow-y: auto; }
.hud-nav:not([hidden]) ~ .hud-controls, .hud:has(.hud-nav:not([hidden])) .hud-controls { display: none; }
.hud-centre { width: 100%; border: 2px solid var(--line) !important; }
.hud-centre span { display: flex; align-items: center; gap: 8px; }
.hud-centre svg { width: 18px; height: 18px; }
.hud-centre kbd, .hud-controls kbd { font: inherit; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 5px; background: rgba(45, 58, 42, .07); box-shadow: inset 0 -2px 0 rgba(45, 58, 42, .18); }
.hud-dest { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hud-dest li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; min-height: 42px; font-weight: 700; font-size: 15px; }
.hud-go { min-height: 34px; padding: 0 11px; border: 2px solid var(--line); border-radius: 999px; background: #fffdf6; font-weight: 700 !important; font-size: 13px !important; }
.hud-go.primary { border-color: var(--accent); color: #a8461b; }
.hud-go:hover { background: #fff1e6; }
body:not(.pc-member) .hud-go.primary { display: none; }   /* teleport: members only (8.18a) */
body:not(.pc-admin) .hud-admin { display: none !important; }   /* admin features: admins only (8.19a) */
body:not(.pc-bro) .hud-bro { display: none !important; }       /* the bro rows: only for a visitor with the dog (8.25b) */
.hud-controls { width: min(232px, calc(100vw - 32px)); z-index: 4; }   /* narrow, keys tight to the text (8.19b) */
.hud-controls h2 { font-size: 15px; margin-bottom: 8px; }
/* Text left, symbols right (8.17d): each dt goes to the right column and dense flow pulls its dd into the same row. */
.hud-controls dl { display: grid; grid-template-columns: 1fr auto; grid-auto-flow: row dense; gap: 5px 6px; margin: 0; }
.hud-controls dt { grid-column: 2; justify-content: flex-end; font-weight: 800; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.hud-controls dd { grid-column: 1; }
.hud-controls .hud-mouse { width: 14px; height: 19px; overflow: visible; margin: 0 3px; }
.hud-controls kbd { background: rgba(255, 255, 255, .7); min-width: 17px; height: 18px; padding: 0 4px; font-size: 10.5px; }
.hud-controls dd { align-self: center; margin: 0; color: var(--soft); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
/* On a phone the two chips are only their icons, so the walking hint in the middle stays free. */
@media (max-width: 480px) {
  .hud-dock, .hud-nav-btn { width: 40px; padding: 0; justify-content: center; }
  .hud-dock .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hud-ctl-btn { left: 64px; }
}

/* Environment menu (8.14b): its chip sits between the speaker and the weather chip; the card opens under the row. */
.hud-env { right: calc(16px + var(--sky-w) + 8px); width: 40px; padding: 0; justify-content: center; }
.hud-env-card { right: 16px; top: calc(var(--top) + 50px); width: min(300px, calc(100vw - 32px)); max-height: calc(100dvh - var(--top) - 66px); overflow-y: auto; overscroll-behavior: contain; }
.hud-range { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; margin: 0 0 10px; font-weight: 700; }
.hud-range-all { margin-bottom: 14px; font-weight: 800; }
.hud-range output { color: var(--soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.hud-range input { grid-column: 1 / -1; width: 100%; margin: 4px 0 0; accent-color: var(--accent); }
/* Wardrobe (wardrobe.js): a card on the right on wide screens, a bottom sheet on phones, so the guest stays in
   view (town.js frames the camera on them while it is open). The other HUD cards step aside. */
.wardrobe { right: 16px; top: calc(var(--top) + 50px); bottom: max(16px, env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 32px)); display: flex; flex-direction: column; padding: 0; overflow: hidden; z-index: 6; }
.wr-head { padding: 14px 16px 6px; }
.wr-head h2 { margin: 0 0 2px; }
.wr-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 8px; }
.wr-body h3 { margin: 12px 0 7px; }
.wr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.wr-chip { min-height: 38px; padding: 0 13px; border: 2px solid var(--line); border-radius: 999px; background: #fffdf6; font-weight: 700; font-size: 13.5px; }
.wr-chip[aria-pressed="true"] { border-color: var(--accent); background: #fff1e6; color: #a8461b; }
.wr-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.wr-swatch { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--c); border: 3px solid rgba(45, 58, 42, .16); }
.wr-swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px #fffaf0 inset; }
.wr-name { width: 100%; min-height: 42px; padding: 0 12px; border-radius: 14px; border: 2px solid var(--line); background: #fffdf6; color: var(--ink); font: 600 15px/1.2 inherit; font-family: inherit; -webkit-user-select: text; user-select: text; }
.wr-name:focus { outline: none; border-color: var(--accent); }
.wr-foot { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1.5px solid var(--line); }
.wr-btn { flex: 1; min-height: 44px; border-radius: 14px; border: 2px solid var(--line); background: #fffdf6; font-weight: 700 !important; font-size: 15px !important; }
.wr-btn.primary { background: var(--accent); border-color: var(--accent); color: #fffdf6; }
.wr-btn:disabled { opacity: .6; }
body.wardrobe-open .hud-sky, body.wardrobe-open .hud-env, body.wardrobe-open #bubbles, body.wardrobe-open .sound, body.wardrobe-open .hud-controls, body.wardrobe-open .hud-dock, body.wardrobe-open .hud-nav, body.wardrobe-open .hint { display: none; }
@media (max-width: 640px) {
  .wardrobe { left: 16px; right: 16px; top: auto; width: auto; height: 46vh; height: 46dvh; }
}
.wr-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 10px; padding: 4px; border-radius: 14px; background: rgba(45, 58, 42, .06); }
.wr-tab { min-height: 34px; border: 0; border-radius: 10px; background: none; font-weight: 800 !important; font-size: 13.5px !important; color: var(--soft) !important; }
.wr-tab[aria-selected="true"] { background: var(--cream); color: var(--ink) !important; box-shadow: 0 1px 0 rgba(45, 58, 42, .15); }
.wr-head { position: relative; }
.wr-shuffle { position: absolute; top: 12px; right: 14px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--line); background: #fffdf6; font-weight: 800 !important; font-size: 13px !important; color: #a8461b; }
.wr-tabs .wr-tab { padding: 0 2px; font-size: 12.5px !important; }
.wr-own { background: repeating-linear-gradient(135deg, #fffdf6 0 5px, #e8e1d4 5px 10px); }
/* 8.27 b: each heading names the choice (Hat · Wizard); the swatch in use carries a tick, not only a ring. */
.wr-body h3 .wr-val { margin-left: 6px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #a8461b; }
.wr-body h3 .wr-val::before { content: '\00b7'; margin-right: 6px; color: var(--soft); }
.wr-swatch { position: relative; }
.wr-swatch[aria-pressed="true"]::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 11px; margin: -8px 0 0 -3px; border: solid #fffdf6; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .55)); }
.wr-tab:focus-visible, .wr-chip:focus-visible, .wr-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Phones: a compact head so the sheet shows the options, not mostly its own header. */
@media (max-width: 640px) {
  .wardrobe { height: 52vh; height: 52dvh; }
  .wr-head { padding: 10px 14px 4px; }
  .wr-head h2 { font-size: 18px; }
  .wr-shuffle { top: 8px; right: 12px; }
  .wr-name { min-height: 38px; margin-top: 6px !important; }
  .wr-tabs { margin-top: 8px; }
  .wr-body { padding: 0 14px 8px; }
  .wr-body h3 { margin: 10px 0 6px; }
  .wr-foot { padding: 8px 14px 10px; }
}
/* Vibe picker at the gate (wardrobe.js openPicker): a configurator strip, arrows round the look's name and eight
   pips; compact, so the character stands free above it (a short sheet on phones). */
.picker { bottom: auto; }
@media (max-width: 640px) { .picker { height: auto; bottom: max(16px, env(safe-area-inset-bottom)); } }
.pk-strip { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; padding: 6px 16px 12px; touch-action: pan-y; }
.pk-arrow { width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 2px solid var(--line); background: #fffdf6; font-size: 28px !important; line-height: 1; font-weight: 700 !important; color: var(--ink); }
.pk-arrow:active { transform: scale(.94); }
.pk-label { display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.pk-label b { font-size: 19px; font-weight: 800; color: #a8461b; }
.pk-label small { font-size: 12.5px; line-height: 1.25; min-height: 1.25em; }
.pk-dots { display: flex; gap: 6px; margin-top: 6px; }
.pk-pip { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 0; background: rgba(45, 58, 42, .2); }
.pk-pip[aria-current="true"] { background: radial-gradient(circle, var(--t) 40%, var(--a) 45%); box-shadow: 0 0 0 2px var(--accent); }
/* The walking hint never runs under the bottom-left chips (8.29, hud.js placeHint): beside the last chip when the
   centred hint would touch it, above the row on the chips' left edge when it does not fit beside; on a phone always above. */
body:has(.hud) .hint.hint-side { left: var(--hint-left); transform: none; }
body:has(.hud) .hint.hint-lift { left: 16px; transform: none; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 48px); }
@media (max-width: 480px) { body:has(.hud) .hint { left: 16px; transform: none; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 48px); } }
/* Roadmap (8.19a): a page over the town. One left edge for head, bar and sections (the card's 24 px padding);
   Live, In progress, Ready to deploy (8.26j), Next, Backlog carry a coloured rule on top instead of a box, so no text moves in. Badges one fixed width. */
.hud-roadmap { --pad: 24px; inset: max(16px, env(safe-area-inset-top)) 16px 16px; margin: 0 auto; width: auto; max-width: 1180px; display: flex; flex-direction: column; padding: var(--pad) 0 0; z-index: 7; box-shadow: 0 0 0 100vmax rgba(28, 24, 14, .42), 0 14px 32px rgba(40, 30, 10, .2); }
.hud-road-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 0 var(--pad); }
.hud-x { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: #fffdf6; }
.hud-x svg { width: 18px; height: 18px; }
.hud-x:hover { background: #fff1e6; }
.hud-road-crest { width: 46px; height: 46px; display: block; }
.hud-road-title h2 { margin: 0; font: 400 30px/1 'Town Sign', Georgia, serif; letter-spacing: .01em; }
.hud-road-note { margin: 5px 0 0; font-size: 12.5px; font-weight: 600; color: var(--soft); }
.hud-road-sum { margin: 18px var(--pad) 6px; font-size: 13px; font-weight: 600; color: var(--soft); }
.hud-road-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hud-road-bar { position: relative; height: 5px; margin: 0 var(--pad); border-radius: 999px; background: rgba(45, 58, 42, .1); overflow: hidden; }
.hud-road-bar span { position: absolute; top: 0; bottom: 0; }
.hud-road-live { left: 0; width: var(--live, 0); background: #5b8a3c; }
.hud-road-ready-bar { left: var(--live, 0); width: var(--ready, 0); background: #3f86b5; }
.hud-road-doing { left: calc(var(--live, 0) + var(--ready, 0)); width: var(--doing, 0); background: var(--accent); }
.hud-road-cols { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 26px 40px; padding: 22px var(--pad) var(--pad); }
/* Two columns of about equal length: Live on the left, In progress, Next and Backlog under each other on the right. */
.hud-road-now { grid-row: span 4; }
.hud-road-col { --c: #5b8a3c; min-width: 0; border-top: 3px solid var(--c); }
.hud-road-progress { --c: var(--accent); }
.hud-road-col.hud-road-ready { --c: #3f86b5; }
.hud-road-next { --c: #c9a24a; }
.hud-road-backlog { --c: rgba(45, 58, 42, .3); }
.hud-card .hud-road-col h3 { display: flex; gap: 6px; margin: 12px 0 10px; color: var(--ink); }
.hud-road-count { color: var(--soft); }
.hud-road-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hud-road-col li { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: baseline; gap: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.hud-road-col li b { padding: 2px 0; border-radius: 7px; background: rgba(45, 58, 42, .07); text-align: center; font-size: 11.5px; font-weight: 800; color: #a8461b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-road-progress li b { background: rgba(224, 112, 58, .16); }
.hud-road-col.hud-road-ready li b { background: rgba(63, 134, 181, .16); color: #2c6690; }
@media (max-width: 640px) {
  .hud-roadmap { --pad: 16px; inset: max(10px, env(safe-area-inset-top)) 10px 10px; }
  .hud-road-crest { width: 38px; height: 38px; }
  .hud-road-title h2 { font-size: 25px; }
  .hud-road-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hud-road-now { grid-row: auto; }
  /* Stacked on a phone, In progress, Ready to deploy and Next come first: that is what bepo opens the roadmap for; the long Live list follows. */
  .hud-road-progress { order: -3; } .hud-road-col.hud-road-ready { order: -2; } .hud-road-next { order: -1; }
}
.hud-item[hidden] { display: none; }

/* First person (8.16f, firstperson.js): the dot a locked mouse clicks with; the eye chip bottom right on a phone. */
.fp-dot { position: fixed; left: 50%; top: 50%; z-index: 4; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fffdf6; box-shadow: 0 0 0 1.5px rgba(45, 58, 42, .5); pointer-events: none; }
.fp-dot[hidden] { display: none; }
.fp-chip { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; width: 40px; height: 40px; padding: 0; justify-content: center; }
.fp-chip svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.fp-chip[aria-pressed="true"] { background: #fffaf0; box-shadow: 0 0 0 2.5px #e0703a, 0 3px 0 rgba(45, 58, 42, .18); }
body.gate .fp-chip { display: none; }

/* Multiplayer (8.19d, net.js): "2 in town" left of the speaker chip in the top-right row; on a phone the row is
   full, so it sits under the weather chip. Its card lists who is here and holds the chat field. */
.presence { right: calc(16px + var(--sky-w) + 8px + 40px + 8px + 40px + 8px); }
.presence .label { white-space: nowrap; }
.presence.alone { opacity: .82; }
.presence-card { right: 16px; top: calc(var(--top) + 50px); width: min(280px, calc(100vw - 32px)); }
.presence-card ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; max-height: 40vh; overflow: auto; }
.presence-card li { padding: 7px 10px; border-radius: 12px; background: rgba(45, 58, 42, .06); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presence-card form { display: flex; gap: 6px; }
.presence-card input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 16px; -webkit-user-select: text; user-select: text; }
.presence-card input:focus { outline: 2.5px solid var(--accent); outline-offset: 0; border-color: transparent; }
.presence-card .send { height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 800; }
/* Its rows (8.26h, hud.js): Airbnb-like, as in the admin panel. Every row: the portrait, the name; you: the admin
   panel's icon (admins); anyone else: round icon buttons (profile for admins, Go there, Teleport for members). */
.presence-card li.pt-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-radius: 0; background: none; border-top: 1px solid var(--line); white-space: normal; overflow: visible; }
.presence-card li.pt-row:first-child { border-top: 0; }
.presence-card ul:has(.pt-row) { gap: 0; }
.pt-face { position: static; display: block; flex: none; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffffff, #dfe8d6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); cursor: inherit; touch-action: auto; }
.pt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pt-row.you .pt-name::after { content: " (you)"; font-weight: 600; color: var(--soft); }
.pt-icons { display: flex; gap: 6px; flex: none; }
.presence-card .pt-icon { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #dddddd; border-radius: 50%; background: #fff; color: #222; }
.presence-card .pt-icon:hover { border-color: #222; background: #f7f7f7; }
.pt-icon svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .presence { right: 16px; top: calc(var(--top) + 50px); height: 34px; } .presence-card { top: calc(var(--top) + 92px); } }

/* ADMIN (8.21, 8.26c, admins only): a chip in the bottom-left row right of Controls (hud.js places it), on phones and
   desktops; the menu's ADMIN switch shows or hides it (body.hide-adm). It opens the admin panel (panel.css). */
.hud-adm-btn { left: calc(16px + var(--nav-w, 128px) + 8px + 128px); letter-spacing: .04em; }
.hud-adm-btn[hidden], body:not(.pc-admin) .hud-adm-btn, body.gate .hud-adm-btn, body.hide-adm .hud-adm-btn, body.wardrobe-open .hud-adm-btn { display: none; }
.hud-toggle.hud-admin[hidden], body:not(.pc-admin) .hud-toggle.hud-admin { display: none; }