/* SATYA live habitat page (habitat.html): one full-screen view. Her feed fills the frame; HUD cards float over it and a
   sidebar slides in. Game art (icons, meters, stamps) comes from site/img/hud/. The site's tokens: yellow on near-black,
   Impact display, mono labels. */
:root {
  --y: #FED804; --ink: #0A0A0B; --paper: #F4F2EC; --grey: #9a98a3; --line: rgba(255, 255, 255, .14); --you: #6D28D9;
  --glass: rgba(12, 10, 20, .66);
  --imp: Impact, Anton, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --sans: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", Consolas, monospace;
  --top: 56px; --dock: 128px; --gap: 18px;
}
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* one screen: nothing on this page scrolls away */
html, body.hp { height: 100%; overflow: hidden; }
body.hp { margin: 0; font: 400 15px/1.45 var(--sans); background: var(--ink); overscroll-behavior: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 3000; padding: 10px 14px; background: var(--y); color: var(--ink); font: 600 14px var(--sans); }
.skip:focus { top: 12px; }
.hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { display: inline-block; flex: none; width: 28px; height: 28px; background: center / contain no-repeat; }

.hp-screen { position: fixed; inset: 0; overflow: hidden; }
.hud { transition: opacity .25s, transform .25s; }
.hud-off .hud { opacity: 0; pointer-events: none; }
.hud-off .hp-top { opacity: 1; pointer-events: auto; background: none; }
.hud-off .hp-top > :not([data-hud-toggle]) { opacity: 0; pointer-events: none; }
.hp-card { background: var(--glass); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }

/* ---------- the stage fills the frame ---------- */
.hp-stage { position: absolute; inset: 0; background: #07060c; cursor: crosshair; }
.hp-stage .hl { z-index: 1; background: transparent; }
.hp-backdrop { display: none; position: absolute; z-index: 0; }
.hp-stage.is-towerfit .hl__p, .hp-stage.is-towerfit .hl__v { object-fit: contain; object-position: 50% 50% !important; }
.hp-stage.is-towerfit .hl { background: radial-gradient(ellipse at 50% 60%, #241540, #07060c 70%); }
.hp-stage.is-ringing .hl { filter: blur(8px) brightness(.5); transform: scale(1.04); transition: filter .3s, transform .3s; }
.hp-stage.is-off::before { content: "her habitat is offline right now"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 28px var(--imp); text-transform: uppercase; color: var(--grey); }
/* the feed's edges fade into the HUD */
.hp-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 4, 10, .55), transparent 18%, transparent 70%, rgba(5, 4, 10, .7)); }

/* ---------- top bar ---------- */
.hp-top { position: absolute; left: 0; right: 0; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; gap: 18px; padding: 0 var(--gap);
  background: linear-gradient(180deg, rgba(5, 4, 10, .85), rgba(5, 4, 10, 0)); }
.hp-brand { font: 400 20px/1 var(--imp); letter-spacing: .02em; text-decoration: none; }
.hp-brand span { color: var(--y); }
.hp-title { margin: 0; font: 400 26px/1 var(--imp); letter-spacing: .02em; text-transform: uppercase; }
.hp-title span, .hp-title em { color: var(--y); font-style: normal; }
.hp-clock { margin: 0 0 0 auto; display: flex; align-items: center; gap: 10px; font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #d6d4cd; }
.hp-pill { padding: 6px 9px; border-radius: 4px; background: #ff3b3b; color: #fff; }
.is-rewind .hp-pill { background: var(--you); }
.hp-iconbtn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--glass); color: var(--paper);
  font: 600 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.hp-iconbtn:hover, .hp-iconbtn[aria-expanded="true"] { border-color: var(--y); color: var(--y); }
.hp-iconbtn .ico { width: 24px; height: 24px; }
.hp-iconbtn[aria-pressed="false"] { color: var(--y); border-color: var(--y); }

/* ---------- left column: her status and now/next ---------- */
.hp-left { position: absolute; z-index: 10; left: var(--gap); top: calc(var(--top) + 6px); width: 300px; display: grid; gap: 10px; }
.hp-status { padding: 14px; }
.hp-status__head { display: flex; align-items: center; gap: 12px; }
.hp-status__face { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: radial-gradient(#3b2560, #140d22);
  border: 2px solid var(--y); box-shadow: 0 0 14px rgba(254, 216, 4, .35); }
.hp-status__mood { margin: 0; font: 400 24px/1 var(--imp); letter-spacing: .03em; text-transform: uppercase; }
.hp-status__doing { margin: 4px 0 0; font-size: 13px; color: #d6d4cd; }
.hp-meters { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.hp-meter { display: grid; grid-template-columns: 28px 44px 1fr; align-items: center; gap: 6px; }
.hp-meter b { font: 600 8.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #d6d4cd; }
.hp-meter__bar { position: relative; display: block; aspect-ratio: 640 / 71; }
.hp-meter__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
/* the liquid sits inside the frame's see-through window (site/img/hud/hud.json: 4.7 / 4.7 / 24.9 / 24 %) */
.hp-meter__fill { position: absolute; z-index: 1; left: 4.7%; right: 4.7%; top: 24.9%; bottom: 24%; background: center / 100% 100% no-repeat;
  clip-path: inset(0 calc(100% - var(--v, 50) * 1%) 0 0 round 99px); transition: clip-path .8s ease; }
.hp-meter.is-low .ico { animation: hp-low 1.6s ease-in-out infinite; }
@keyframes hp-low { 50% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(255, 90, 90, .9)); } }
.hp-status__today { margin: 10px 0 0; font: 600 9px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.hp-status__today:empty { display: none; }
.hp-ticket { padding: 10px 14px; display: grid; gap: 8px; }
.hp-ticket__row { display: flex; align-items: center; gap: 10px; }
.hp-ticket__row .ico { width: 34px; height: 34px; }
.hp-ticket__row b { display: block; font: 600 8px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }
.hp-ticket__row.is-now b { color: var(--y); }
.hp-ticket__row span { display: block; margin-top: 3px; font: 400 17px/1.05 var(--imp); letter-spacing: .02em; text-transform: uppercase; }
.hp-ticket__row small { display: block; margin-top: 3px; font: 600 8.5px/1 var(--mono); letter-spacing: .1em; color: var(--grey); }

/* ---------- camera tag, ticker ---------- */
.hp-camtag { position: absolute; z-index: 10; left: 50%; top: calc(var(--top) + 6px); transform: translateX(-50%); display: flex; gap: 6px; font: 600 9.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.hp-camtag > span { padding: 7px 9px; border-radius: 6px; background: var(--glass); border: 1px solid var(--line); white-space: nowrap; }
.hp-rec { display: flex; align-items: center; gap: 6px; color: #ff7a7a; }
.hp-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: hl-rec 1.6s steps(2) infinite; }
.hp-mode { background: var(--y) !important; color: var(--ink); border-color: var(--y) !important; }
.hp-moment { background: rgba(254, 216, 4, .92) !important; color: var(--ink); }
.hp-moment[hidden] { display: none; }
.hp-ticker { position: absolute; z-index: 10; left: var(--gap); bottom: calc(var(--dock) + 10px); max-width: min(640px, calc(100% - 420px)); margin: 0; padding: 8px 12px;
  border-radius: 6px; background: var(--glass); border-left: 3px solid var(--y); font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-ticker:empty { display: none; }

/* ---------- the small tower ---------- */
.hp-mini { position: absolute; z-index: 10; right: var(--gap); top: calc(var(--top) + 6px); width: 168px; }
.hp-mini__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; padding: 6px 8px; border-radius: 6px; background: var(--glass); border: 1px solid var(--line); cursor: pointer;
  font: 600 8.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--y); }
.hp-mini__head::before { content: "tower"; color: var(--paper); }
.hp-tower { position: relative; aspect-ratio: 480 / 832; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.hp-tower .hl { background: #07060c; }
.hp-tower__floors { position: absolute; inset: 0; z-index: 2; }
.hp-floor { position: absolute; padding: 0; border: 1px solid transparent; background: none; color: inherit; cursor: pointer; }
.hp-floor span { position: absolute; left: 3px; bottom: 3px; padding: 2px 4px; border-radius: 3px; background: rgba(10, 10, 11, .75); font: 600 6.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .15s; }
.hp-mini:hover .hp-floor span, .hp-floor:focus-visible span, .hp-floor.is-her span { opacity: 1; }
.hp-floor:hover, .hp-floor:focus-visible { border-color: rgba(254, 216, 4, .8); background: rgba(254, 216, 4, .08); }
.hp-floor.is-her span { background: var(--y); color: var(--ink); }
.hp-floor--lift span { left: 50%; transform: translateX(-50%); bottom: 50%; writing-mode: vertical-rl; }
.hp-tower__here { position: absolute; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--y); box-shadow: 0 0 0 3px rgba(10, 10, 11, .7), 0 0 14px 4px rgba(254, 216, 4, .8);
  transition: left .6s, top .6s; pointer-events: none; }
.hp-tower__here::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--y); animation: hl-ring 1.4s ease-out infinite; }

/* her room, floating, in tower mode */
.hp-float { position: absolute; z-index: 5; right: 16px; top: calc(var(--top) + 60px); width: 28%; max-width: 420px; aspect-ratio: 16 / 9; border: 1px solid var(--y); border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .7); cursor: grab; touch-action: none; }
.hp-float[hidden] { display: none; }
.hp-float.is-drag { cursor: grabbing; opacity: .9; }
.hp-float__tag { position: absolute; left: 6px; top: 6px; z-index: 3; padding: 3px 5px; border-radius: 3px; background: rgba(254, 216, 4, .92); color: var(--ink); font: 600 8px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }

/* every camera at once */
.hp-wall { position: absolute; inset: calc(var(--top) + 4px) var(--gap) calc(var(--dock) + 10px); z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; }
.hp-wall[hidden] { display: none; }
.hp-tile { position: relative; padding: 0; border: 0; border-radius: 6px; background: #111; color: inherit; cursor: pointer; overflow: hidden; }
.hp-tile .hl__p { filter: saturate(.7) contrast(1.05); }
.hp-tile.is-her { outline: 2px solid var(--y); outline-offset: -2px; z-index: 1; }
.hp-tile.is-her .hl__p { filter: none; }
.hp-tile__k { position: absolute; left: 6px; top: 6px; z-index: 3; padding: 3px 5px; border-radius: 3px; background: rgba(10, 10, 11, .7); font: 600 8px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hp-tile.is-her .hp-tile__k { background: var(--y); color: var(--ink); }
.hp-tile.is-scrambled::after { content: "no signal"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font: 600 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #ccc;
  background: repeating-linear-gradient(0deg, #222 0 2px, #333 2px 3px, #181818 3px 5px); animation: hp-static .25s steps(3) infinite; }
.hp-tile.is-scrambled.is-her { outline: none; }
.hp-tile.is-scrambled.is-her .hp-tile__k { background: rgba(10, 10, 11, .7); color: var(--paper); }
@keyframes hp-static { 33% { background-position: 0 2px; } 66% { background-position: 0 4px; } }
.hp-tile:disabled { cursor: default; opacity: .5; }
/* the wall replaces the cards while it is up */
body:has(.hp-stage.is-wall) .hp-left, body:has(.hp-stage.is-wall) .hp-mini, body:has(.hp-stage.is-wall) .hp-camtag { opacity: 0; pointer-events: none; }
/* tower mode shows the whole tower already */
body:has(.hp-stage.is-towerfit) .hp-mini { opacity: 0; pointer-events: none; }

/* the call: a FaceTime-style window over her blurred room, beside the chat */
.hp-callwin { position: absolute; z-index: 6; top: calc(var(--top) + 56px); left: calc((100vw - 400px - var(--gap)) / 2); transform: translateX(-50%);
  width: min(calc(100vw - 440px), calc((100vh - var(--top) - var(--dock) - 110px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 30px 90px rgba(0, 0, 0, .65), 0 0 0 1px rgba(254, 216, 4, .25); background: #0d0b12; opacity: 0; transition: opacity .3s; pointer-events: none; }
.hp-callwin.on { opacity: 1; }
.hp-callwin__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(.85); transform: scale(1.05); }
.hp-callwin__you { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 88px; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 10px; background: #050506;
  border: 1px solid rgba(255, 255, 255, .25); font: 600 8px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); text-align: center; }
.hp-callwin__tag { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 5px 8px; border-radius: 6px; background: rgba(10, 10, 11, .6); font: 600 8.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
body.is-cam .hp-stage .hl { filter: blur(14px) brightness(.45); transform: scale(1.06); transition: filter .4s, transform .4s; }
@media (max-width: 760px) { .hp-callwin { display: none; } }

/* toast, call bar, captions, knocks, gifts */
.hp-toast { position: absolute; left: 50%; top: calc(var(--top) + 52px); z-index: 30; transform: translate(-50%, -6px); margin: 0; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 8px;
  background: rgba(10, 10, 11, .9); border: 1px solid rgba(254, 216, 4, .5); font: 400 13px/1.4 var(--sans); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; display: flex; align-items: center; gap: 10px; }
.hp-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hp-callbar { position: absolute; left: 50%; top: calc(var(--top) + 6px); z-index: 25; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 8px;
  background: var(--y); color: var(--ink); font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.hp-callbar[hidden] { display: none; }
.hp-callbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: hl-rec 1.2s steps(2) infinite; }
.hp-callbar__fine { font-size: 8px; letter-spacing: .1em; opacity: .7; }
.is-call .hp-left, .is-call .hp-camtag, .is-call .hp-ticker, .is-call .hp-mini { opacity: 0; pointer-events: none; }
.hp-cap { position: absolute; left: 50%; bottom: calc(var(--dock) + 22px); z-index: 25; transform: translateX(-50%); width: max-content; max-width: min(760px, calc(100% - 40px)); margin: 0; padding: 9px 14px;
  border-radius: 8px; background: rgba(5, 5, 6, .82); font: 400 18px/1.4 var(--sans); text-align: center; }
.hp-cap:empty { display: none; }
.hp-ripple { position: absolute; z-index: 4; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid var(--y); pointer-events: none; animation: hp-ripple .9s ease-out forwards; }
@keyframes hp-ripple { to { transform: scale(7); opacity: 0; } }
.hp-fly { position: absolute; left: 50%; bottom: 34%; z-index: 5; width: 72px; height: 72px; pointer-events: none; animation: hp-fly 1.6s ease-out forwards; }
@keyframes hp-fly { 0% { transform: translate(-50%, 40px) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%, -140px) scale(1.2); opacity: 0; } }

/* ---------- the dock: rewind and a hotbar ---------- */
.hp-dock { position: absolute; z-index: 15; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(1180px, calc(100% - 2 * var(--gap))); padding: 8px 10px 10px; }
.hp-dock::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); box-shadow: 0 16px 50px rgba(0, 0, 0, .55); }
.hp-dvr { display: flex; align-items: center; gap: 8px; }
.hp-dvr__track { position: relative; flex: 1; height: 26px; }
.hp-dvr__day { position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 3px; overflow: hidden; background: #1a1820; }
.hp-dvr__day i { position: absolute; top: 0; bottom: 0; opacity: .8; }
.hp-dvr input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.hp-dvr input::-webkit-slider-runnable-track { height: 26px; background: none; }
.hp-dvr input::-moz-range-track { height: 26px; background: none; }
.hp-dvr input::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 26px; border-radius: 2px; background: var(--paper); box-shadow: 0 0 0 2px var(--ink), 0 0 10px rgba(255, 255, 255, .6); }
.hp-dvr input::-moz-range-thumb { width: 4px; height: 26px; border: 0; border-radius: 2px; background: var(--paper); }
.hp-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 5px; border: 1px solid var(--line); border-radius: 6px; background: rgba(10, 10, 11, .6); color: var(--paper);
  font: 600 8.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.hp-chip .ico { width: 18px; height: 18px; }
.hp-chip--y { padding: 0 10px; background: var(--y); border-color: var(--y); color: var(--ink); }
.hp-bar { display: flex; align-items: stretch; gap: 10px; margin-top: 8px; }
.hp-bar__group { display: flex; gap: 6px; }
.hp-bar__props { display: contents; }
.hp-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 58px; height: 60px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, rgba(40, 26, 70, .65), rgba(12, 10, 20, .75)); color: var(--paper); cursor: pointer; font: 600 7.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  transition: transform .12s, border-color .12s, box-shadow .12s; }
.hp-slot .ico { width: 32px; height: 32px; }
.hp-slot:hover { transform: translateY(-2px); border-color: rgba(254, 216, 4, .6); }
.hp-slot[aria-pressed="true"] { border-color: var(--y); box-shadow: 0 0 0 1px var(--y), 0 0 18px rgba(254, 216, 4, .35); color: var(--y); }
.hp-slot:disabled { opacity: .4; cursor: default; transform: none; }
.hp-slot[hidden] { display: none; }
.hp-slot--num b { font: 400 26px/1 var(--imp); color: var(--paper); }
.hp-slot--num[aria-pressed="true"] b { color: var(--y); }
.hp-slot--prop { border-color: rgba(254, 216, 4, .45); }
.hp-call { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 0 20px 0 12px; border: 0; border-radius: 12px; background: var(--y); color: var(--ink); cursor: pointer;
  font: 400 20px/1 var(--imp); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 24px rgba(254, 216, 4, .35); }
.hp-call .ico { width: 40px; height: 40px; }
.hp-call:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ---------- the sidebar ---------- */
.hp-side { position: absolute; z-index: 18; top: calc(var(--top) + 6px); right: var(--gap); bottom: calc(var(--dock) + 22px); width: min(400px, calc(100% - 2 * var(--gap))); display: flex; flex-direction: column;
  background: rgba(10, 8, 18, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); overflow: hidden; }
.hp-side[hidden] { display: none; }
.side-open .hp-mini { opacity: 0; pointer-events: none; }
.hp-side__head { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.hp-tabs { display: flex; gap: 4px; flex: 1; }
.hp-tabs button { flex: 1; height: 34px; padding: 0 4px; border: 1px solid var(--line); border-radius: 8px; background: none; color: #c9c7c1; font: 600 8.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.hp-tabs button[aria-selected="true"] { background: var(--y); border-color: var(--y); color: var(--ink); }
.hp-side__body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.hp-panel { display: none; }
.hp-panel.on { display: block; }
.hp-panel__k { display: flex; justify-content: space-between; margin: 18px 0 8px; font: 600 8.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.hp-panel__k:first-child { margin-top: 0; }
.hp-panel__k span { color: var(--y); }
.hp-guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hp-guide li { position: relative; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; }
.hp-guide li .ico { width: 34px; height: 34px; }
.hp-guide b { display: block; font: 400 16px/1.1 var(--imp); letter-spacing: .02em; text-transform: uppercase; }
.hp-guide small { display: block; margin-top: 2px; font-size: 12px; color: var(--grey); }
.hp-guide time { font: 600 10px/1.2 var(--mono); color: #d6d4cd; text-align: right; }
.hp-guide time span { display: block; font-size: 8.5px; color: var(--grey); }
.hp-guide .is-past { opacity: .42; }
.hp-guide .is-now { border-color: var(--y); background: rgba(254, 216, 4, .08); }
.hp-guide em { position: absolute; right: 10px; top: -7px; padding: 2px 6px; border-radius: 4px; background: var(--y); color: var(--ink); font: 600 7.5px/1.2 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.hp-ping { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 600 8.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #c9c7c1; }
.hp-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hp-post { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; text-decoration: none; }
.hp-post img, .hp-post__plate { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #1d1b22; display: grid; place-items: center; font: 600 8px var(--mono); text-transform: uppercase; color: var(--grey); }
.hp-post__b { min-width: 0; }
.hp-post b { display: block; font-weight: 600; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-post small { font: 600 8.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.hp-post:hover b { color: var(--y); }
.hp-iv { display: block; text-decoration: none; padding: 12px; border-radius: 10px; border: 1px solid #2a2830; }
.hp-iv__k, .hp-iv__go { display: block; font: 600 8.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--y); }
.hp-iv q { display: block; margin: 8px 0; font: 700 15px/1.35 Georgia, serif; quotes: "“" "”"; }
.hp-bond { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 12px; border-radius: 12px;
  border: 1px solid rgba(109, 40, 217, .7); background: rgba(109, 40, 217, .14); }
.hp-bond .ico { grid-row: 1 / 3; width: 36px; height: 36px; }
.hp-bond b { font: 400 20px/1 var(--imp); text-transform: uppercase; }
.hp-bond small { font: 600 8.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #c4b5fd; }
.hp-bond .hp-meter__bar { grid-column: 1 / -1; }
.hp-stamps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hp-stamps li { text-align: center; font: 600 7.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.hp-stamps img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; filter: grayscale(1) brightness(.45); opacity: .7; transition: filter .3s, opacity .3s, transform .3s; }
.hp-stamps .is-seen img { filter: none; opacity: 1; transform: rotate(-6deg); }
.hp-stamps .is-seen { color: var(--paper); }
.hp-caught { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: 4px; }
.hp-caught li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: rgba(255, 255, 255, .04); }
.hp-caught .ico { width: 22px; height: 22px; filter: grayscale(1) brightness(.35); }
.hp-caught .is-seen .ico { filter: none; }
.hp-caught .is-rare:not(.is-seen) { box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .6); }
.hp-caught .is-rare:not(.is-seen) .ico { filter: grayscale(1) brightness(.5) drop-shadow(0 0 4px #a78bfa); }
.hp-mem { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: #d6d4cd; }
.hp-mem time { font: 600 8.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #a78bfa; margin-right: 6px; }
.hp-note { margin: 0 0 10px; font-size: 12.5px; color: #c9c7c1; }
.hp-local { margin-top: 16px; font-size: 11.5px; color: var(--grey); }
.hp-link { padding: 0; border: 0; background: none; color: var(--y); font: inherit; text-decoration: underline; cursor: pointer; }
.hp-about { margin: 0; font-size: 14px; line-height: 1.55; color: #d6d4cd; }
.hp-keys { margin: 0; font: 600 9px/1.8 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #c9c7c1; }
.hp-keys b { color: var(--y); }

/* the docked terminal sits above the dock; on desktop a call plays on the stage, so the chat gets the room */
.hp .hab { bottom: calc(var(--dock) + 24px); right: var(--gap); }
.hp .hab[data-size="open"] { height: min(560px, calc(100vh - var(--dock) - var(--top) - 40px)); }
.side-open .hab { right: calc(min(400px, 100vw) + 2 * var(--gap)); }
@media (min-width: 761px) { .hp .hab[data-size="open"] .hab__win { display: none; } }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .hp-camtag { left: auto; right: calc(168px + 2 * var(--gap)); transform: none; }
  .hp-title { display: none; }
}
@media (max-width: 900px) {
  .hp-bar { overflow-x: auto; scrollbar-width: none; }
  .hp-bar::-webkit-scrollbar { display: none; }
  .hp-ticker { max-width: calc(100% - 2 * var(--gap)); }
}
@media (max-width: 760px) {
  :root { --top: 48px; --dock: 116px; --gap: 10px; }
  .hp-brand { font-size: 17px; }
  .hp-clock { font-size: 8.5px; gap: 6px; }
  .hp-iconbtn { height: 32px; padding: 0 9px; }
  .hp-iconbtn span { display: none; }
  .hp-iconbtn[data-hud-toggle] span { display: inline; }
  /* portrait phone: the feed is a 16:9 band over a blurred copy of itself, so the HUD has room above and below */
  .hp-backdrop { display: block; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(22px) brightness(.42) saturate(1.25); }
  .hp-stage .hl { inset: auto 0; top: 47%; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%); box-shadow: 0 0 0 1px rgba(254, 216, 4, .35), 0 20px 60px rgba(0, 0, 0, .6); }
  .hp-stage::after { background: linear-gradient(180deg, rgba(5, 4, 10, .6), transparent 20%, transparent 70%, rgba(5, 4, 10, .7)); }
  .hp-left { left: var(--gap); right: var(--gap); width: auto; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hp-status { padding: 10px; }
  .hp-status__face { width: 40px; height: 40px; }
  .hp-status__mood { font-size: 18px; }
  .hp-status__doing { font-size: 11.5px; }
  .hp-meter { grid-template-columns: 22px 1fr; }
  .hp-meter b { display: none; }
  .hp-meter .ico { width: 22px; height: 22px; }
  .hp-meters { gap: 4px; margin-top: 8px; }
  .hp-status__today { font-size: 7.5px; }
  .hp-ticket { padding: 10px; }
  .hp-ticket__row .ico { width: 28px; height: 28px; }
  .hp-ticket__row span { font-size: 14px; }
  .hp-mini { display: none; }
  .hp-camtag { left: var(--gap); right: auto; top: calc(47% - 28.125vw + 8px); font-size: 8px; }
  .hp-camtag > span { padding: 5px 7px; }
  .hp-ticker { left: var(--gap); right: 86px; max-width: none; bottom: calc(var(--dock) + 8px); font-size: 8.5px; }
  .side-open .hab { display: none; }
  .hp-callbar b { white-space: nowrap; }
  .hp-callbar { gap: 8px; padding-left: 10px; }
  .hp-status__today { display: none; }
  .hp-dock { width: calc(100% - 2 * var(--gap)); bottom: 8px; padding: 6px 8px 8px; }
  .hp-slot { min-width: 54px; height: 56px; }
  .hp-call { padding: 0 14px 0 8px; font-size: 16px; white-space: nowrap; }
  .hp-call .ico { width: 32px; height: 32px; }
  .hp-side { left: 0; right: 0; width: auto; top: 30%; bottom: 0; border-radius: 16px 16px 0 0; }
  .hp-wall { inset: calc(var(--top) + 4px) 6px calc(var(--dock) + 8px); }
  .hp-float { width: 46%; top: calc(var(--top) + 8px); }
  .hp .hab { right: 12px; bottom: calc(var(--dock) + 16px); }
  .hp .hab[data-size="open"] { right: 0; bottom: 0; height: 82vh; }
  .hp-cap { bottom: calc(var(--dock) + 16px); font-size: 14px; }
  .hp-callbar__fine { display: none; }
}
@media (max-width: 760px) and (max-height: 640px) { .hp-ticket { display: none; } .hp-left { grid-template-columns: 1fr; } }
/* landscape phones: the feed fills the screen again, the HUD shrinks to the essentials */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --top: 44px; --dock: 96px; }
  .hp-backdrop { display: none; }
  .hp-stage .hl { inset: 0; top: 0; aspect-ratio: auto; transform: none; height: 100%; }
  .hp-left { width: 240px; grid-template-columns: 1fr; }
  .hp-ticket, .hp-mini, .hp-dvr { display: none; }
  .hp-slot { height: 48px; min-width: 50px; }
  .hp-slot .ico { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-rec i, .hp-callbar__dot, .hp-tower__here::after, .hp-tile.is-scrambled::after, .hp-ripple, .hp-fly, .hp-meter.is-low .ico { animation: none; }
  .hp-tower__here, .hp-meter__fill, .hud, .hp-slot { transition: none; }
}

/* animated art over the stage (Codex's FX strips), the clickable-thing highlight, the tower zoom */
.hp-fxlayer { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.hp-fx { position: absolute; display: block; background-repeat: no-repeat; }
.hp-fx--band { left: 0; width: 100%; height: 26%; transform: translateY(-50%); mix-blend-mode: screen; opacity: .85; }
.hp-flash { position: absolute; inset: 0; background: #fff; animation: hp-flash .45s ease-out forwards; }
@keyframes hp-flash { from { opacity: .6; } to { opacity: 0; } }
.hp-hot { position: absolute; border: 1.5px solid rgba(254, 216, 4, .9); border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(10, 10, 11, .3), inset 0 0 22px rgba(254, 216, 4, .25); transition: left .12s, top .12s, width .12s, height .12s; }
.hp-hot[hidden] { display: none; }
.hp-hot__tag { position: absolute; left: -1px; bottom: calc(100% + 5px); padding: 3px 6px; border-radius: 4px; white-space: nowrap; background: var(--y); color: var(--ink);
  font: 700 8.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.hp-hot--room { border-color: rgba(63, 216, 232, .95); box-shadow: 0 0 0 2px rgba(10, 10, 11, .3), inset 0 0 26px rgba(63, 216, 232, .3); }
.hp-hot--room .hp-hot__tag { background: #3fd8e8; }
.hp-stage.is-hot { cursor: pointer; }
.hl--stage.is-zooming { transition: transform .62s cubic-bezier(.55, .05, .3, 1); }
.hl--stage.is-arrive { animation: hp-arrive .7s ease-out; }
@keyframes hp-arrive { from { transform: scale(1.12); filter: blur(6px); opacity: .55; } to { transform: none; filter: none; opacity: 1; } }
/* her meters: the liquid repeats one frame across the bar; a gift makes the bar flare */
.hp-meter__fill.is-liquid { background-size: auto 100%; background-repeat: repeat-x; background-position: left center; }
.hp-meter.is-up .hp-meter__bar { animation: hp-up 1.3s ease-out; }
@keyframes hp-up { 0% { filter: brightness(1.9) drop-shadow(0 0 8px #fed804); } 100% { filter: none; } }
/* the floating room window: move it anywhere, resize from the corner */
.hp-float { cursor: grab; }
.hp-float.is-resize { cursor: nwse-resize; }
.hp-float__grip { position: absolute; right: 0; bottom: 0; z-index: 4; width: 20px; height: 20px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 52%, rgba(254, 216, 4, .95) 52%); border-bottom-right-radius: 9px; }
body.is-expanded .hp-left, body.is-expanded .hp-mini, body.is-expanded .hp-ticker, body.is-expanded .hp-camtag { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hl--stage.is-zooming, .hl--stage.is-arrive, .hp-meter.is-up .hp-meter__bar { transition: none; animation: none; } }

/* Little Satya on the tower (Codex run 1 B strips), drawn over the empty tower */
.hp-pet { position: absolute; z-index: 3; display: block; pointer-events: none; background-repeat: no-repeat; image-rendering: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.hp-pet[hidden] { display: none; }
.hp-tower .hp-pet { z-index: 4; }

/* the visits panel's animated pieces */
.hp-stamps li { position: relative; }
.hp-stamp-fx { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; display: block; background-repeat: no-repeat; pointer-events: none; }
.hp-caught .is-rare:not(.is-seen) .ico[style*="star-rare"] { filter: none; }
.hp-fx--amb { opacity: .92; }

/* the dock below 900 px: the slots scroll sideways (the right edge fades while there's more), and on phones
   "call her" is pinned as a bar above the dock so it's never scrolled out of reach */
@media (max-width: 900px) {
  /* a gradient over the slots' right edge, not a mask (a mask would also hide the pinned call bar below) */
  .hp-dock::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 44px; height: 56px; border-radius: 0 10px 10px 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(10, 10, 11, .9)); transition: opacity .2s; }
  .hp-dock.is-end::after { opacity: 0; }
}
@media (max-width: 760px) {
  .hp-dock .hp-call { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); height: 44px; justify-content: center; margin: 0; }
  .hp-dock .hp-call .ico { width: 30px; height: 30px; }
  /* the ticker and the terminal's bubble move up over the pinned call bar */
  .hp-ticker { bottom: calc(var(--dock) + 64px); }
  .hp .hab:not([data-size="open"]) { bottom: calc(var(--dock) + 64px); }
}