@font-face {
  font-family: "ArkPixel";
  src: url("./assets/fonts/ark-pixel-zh-cn.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ink: #17121b;
  --ink-2: #241c29;
  --panel: #33283a;
  --panel-2: #493747;
  --paper: #f0d7a0;
  --paper-2: #d9b97c;
  --amber: #d68b4b;
  --orange: #b85e45;
  --green: #83a66f;
  --blue: #657d91;
  --line: #705466;
  --shadow: #0b080d;
  --page: min(1420px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% -20%, rgba(179, 100, 63, .18), transparent 34rem),
    linear-gradient(180deg, #17121b 0%, #110d15 100%);
  font-family: "ArkPixel", "Microsoft YaHei", sans-serif;
  image-rendering: pixelated;
  min-width: 300px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 4px 4px;
  z-index: 100;
}

button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed;
  z-index: 9999;
  left: 16px;
  top: -80px;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
}
.skip-link:focus { top: 16px; }

.topbar {
  width: var(--page);
  min-height: 86px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 2px solid rgba(240, 215, 160, .16);
}

.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand__portrait {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow), inset -4px -4px 0 var(--paper-2);
  font-size: 23px;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: .06em; }
.brand small { margin-top: 4px; color: #a99083; font-size: 10px; letter-spacing: .08em; }

.topbar__signal {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 248px;
  padding: 10px 13px;
  border: 2px solid var(--line);
  background: rgba(35, 27, 41, .84);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.025);
  color: #bba99b;
  font-size: 12px;
}
.topbar__signal time { margin-left: auto; color: var(--paper); }
.signal-dot { width: 9px; height: 9px; background: #c49755; box-shadow: 0 0 0 2px #32283a, 0 0 10px rgba(196,151,85,.6); }
body[data-status="online"] .signal-dot { background: #7fc776; box-shadow: 0 0 0 2px #32283a, 0 0 10px rgba(127,199,118,.8); }
body[data-status="partial"] .signal-dot { background: #e0b35a; }
body[data-status="offline"] .signal-dot { background: #d76758; }

.topbar__actions { justify-self: end; display: flex; gap: 9px; }
.pixel-button, .copy-button {
  min-height: 38px;
  padding: 7px 14px;
  border: 3px solid var(--paper-2);
  color: var(--paper);
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--shadow), inset -3px -3px 0 rgba(0,0,0,.25), inset 3px 3px 0 rgba(255,255,255,.08);
  cursor: pointer;
}
.pixel-button:hover, .pixel-button:focus-visible, .copy-button:hover, .copy-button:focus-visible { background: var(--panel-2); transform: translate(-1px,-1px); }
.pixel-button:active, .copy-button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--shadow); }
.copy-button:disabled { opacity: .58; cursor: not-allowed; transform: none; }

main { width: var(--page); margin: 0 auto; }
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: clamp(34px, 7vw, 110px);
  align-items: end;
  padding: clamp(58px, 9vw, 126px) 0 56px;
}
.eyebrow { margin: 0 0 15px; color: var(--amber); font-size: 13px; letter-spacing: .08em; }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 0; color: #f8e8bd; font-size: clamp(46px, 7vw, 104px); line-height: .96; letter-spacing: -.05em; }
h1 span { color: var(--amber); }
.intro__note {
  position: relative;
  padding: 30px 28px 24px;
  color: #3c2d37;
  background: #e3c68e;
  border: 3px solid #72566a;
  box-shadow: 8px 8px 0 #0c0910;
  transform: rotate(-1deg);
}
.intro__note::after { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(73,55,71,.35); pointer-events: none; }
.intro__note p { position: relative; z-index: 1; margin: 0; font-size: 16px; line-height: 1.8; }
.note-pin { position: absolute; z-index: 2; width: 14px; height: 14px; left: 50%; top: 8px; background: var(--orange); border: 2px solid #6f3d3b; border-radius: 50%; box-shadow: 2px 2px 0 rgba(0,0,0,.35); }

.room-section { padding: 10px 0 52px; }
.room-section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.room-section__head h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); color: #f4dfae; }
.room-legend { display: flex; gap: 18px; color: #a99289; font-size: 12px; }
.room-legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend-key { padding: 4px 6px; color: var(--ink); background: var(--paper-2); border: 2px solid var(--line); font-style: normal; }

.game-frame {
  position: relative;
  padding: 10px;
  background: #2a202f;
  border: 4px solid #705466;
  box-shadow: 0 0 0 4px #110d15, 12px 14px 0 rgba(7,5,9,.55);
}
#game-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #0d0a10;
  border: 2px solid #120e16;
}
#game-container canvas { display: block; image-rendering: pixelated; }
#loading-overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  background: #17121b;
  transition: opacity .25s steps(3), visibility .25s;
}
#loading-overlay.is-hidden { opacity: 0; visibility: hidden; }
.loading-window { width: min(340px, calc(100% - 32px)); padding: 22px; color: var(--ink); background: var(--paper); border: 4px solid var(--panel); box-shadow: 8px 8px 0 #08060a; }
.loading-window strong, .loading-window span { display: block; }
.loading-window strong { margin-bottom: 8px; }
.loading-window span { font-size: 13px; }
.loading-track { height: 15px; margin-top: 18px; padding: 2px; background: #4a3948; }
.loading-track i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #b65d43 0 10px, #d6904d 10px 20px); transition: width .12s linear; }

.scene-corner {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--paper);
  background: rgba(28, 20, 31, .9);
  border: 2px solid var(--paper-2);
  box-shadow: 3px 3px 0 rgba(0,0,0,.55);
  font-size: 12px;
  pointer-events: none;
}
.scene-corner--left { left: 24px; bottom: 24px; }
.scene-corner--right { right: 24px; top: 24px; flex-direction: column; align-items: flex-end; }
.scene-corner__icon { color: #ffc56d; }
.scene-corner__source { color: #a9948c; font-size: 9px; }

.object-dock {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.object-dock button {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  text-align: left;
  border: 3px solid #60495d;
  color: var(--paper);
  background: #281f2e;
  box-shadow: 4px 4px 0 #09070b, inset -3px -3px 0 rgba(0,0,0,.18);
  cursor: pointer;
}
.object-dock button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; color: #2f2532; background: var(--paper-2); border: 2px solid #72566a; font-size: 21px; }
.object-dock strong { font-size: 15px; }
.object-dock small { color: #a58d82; font-size: 11px; }
.object-dock button:hover, .object-dock button:focus-visible { border-color: var(--amber); background: #382a39; transform: translateY(-2px); }
.room-footnote { display: flex; justify-content: space-between; gap: 20px; margin-top: 18px; color: #806d70; font-size: 11px; }

.room-manifesto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 34px 0 88px; }
.room-manifesto article { display: grid; grid-template-columns: auto 1fr; gap: 15px; padding: 22px; background: rgba(42,32,47,.72); border: 2px solid #4c394a; }
.room-manifesto article > span { display: grid; place-items: center; width: 38px; height: 38px; color: var(--ink); background: var(--paper-2); border: 2px solid var(--line); }
.room-manifesto h3 { margin: 2px 0 8px; color: #ead29e; font-size: 17px; }
.room-manifesto p { margin: 0; color: #a49189; font-size: 13px; line-height: 1.7; }

.footer { width: var(--page); margin: 0 auto; padding: 28px 0 34px; display: flex; justify-content: space-between; gap: 24px; border-top: 2px solid rgba(240,215,160,.13); color: #78676d; font-size: 11px; }

.panel-dialog {
  width: min(980px, calc(100% - 32px));
  max-height: min(780px, calc(100dvh - 34px));
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  overflow: visible;
}
.panel-dialog::backdrop { background: rgba(10,7,12,.78); backdrop-filter: blur(5px); }
.panel-window { display: flex; flex-direction: column; max-height: min(780px, calc(100dvh - 34px)); background: #ead09a; border: 5px solid #392c3a; box-shadow: 10px 10px 0 rgba(0,0,0,.55), inset 0 0 0 3px #a87955; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; background: #c88952; border-bottom: 4px solid #3a2d3b; }
.panel-head p { margin: 0 0 5px; color: #66424a; font-size: 11px; letter-spacing: .08em; }
.panel-head h2 { margin: 0; color: #2d2330; font-size: clamp(25px, 4vw, 42px); }
.panel-close { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; color: #2d2330; background: #d96b50; border: 3px solid #3a2d3b; box-shadow: 3px 3px 0 rgba(0,0,0,.3); font-size: 25px; cursor: pointer; }
.panel-body { padding: clamp(20px, 4vw, 36px); overflow: auto; }
.panel-footer { display: flex; justify-content: space-between; padding: 12px 20px; color: #705760; background: #d4ad72; border-top: 3px solid #72566a; font-size: 10px; }
.panel-lead { margin: 0 0 24px; font-size: 17px; line-height: 1.8; }
.profile-grid, .contact-card { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.profile-avatar { display: grid; place-items: center; width: 128px; aspect-ratio: 1; color: var(--paper); background: #3d3040; border: 5px solid #9d6e56; box-shadow: 6px 6px 0 rgba(0,0,0,.22); font-size: 58px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-row span { padding: 7px 9px; background: #d4ad72; border: 2px solid #7b5961; font-size: 12px; }
.project-list, .timeline { display: grid; gap: 12px; margin: 0; padding: 0; }
.project-list article, .timeline li { display: grid; grid-template-columns: 58px 1fr; gap: 16px; padding: 17px; background: rgba(255,247,220,.4); border: 3px solid #89646a; list-style: none; }
.project-list article > span, .timeline time { color: #a54f3e; font-size: 13px; }
.project-list h3, .timeline h3, .skill-grid h3 { margin: 0 0 7px; font-size: 18px; }
.project-list p, .timeline p, .skill-grid p { margin: 0; color: #624b53; line-height: 1.65; font-size: 13px; }
.skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skill-grid article { padding: 18px; background: rgba(255,247,220,.38); border: 3px solid #89646a; }
.skill-grid article > strong { color: #b15d43; }
.contact-cat { display: grid; place-items: center; min-width: 210px; min-height: 110px; padding: 16px; color: #f1d9a5; background: #3a2c3a; border: 4px solid #9c6d56; font-size: 22px; }

/* Knowledge base: a two-page archive book rather than a conventional app pane. */
.library-book { max-width: 920px; margin: 0 auto; color: #3b2a2c; }
.library-book__spread {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
  gap: 4px;
  padding: 10px;
  overflow: hidden;
  background: #4a3031;
  border: 4px solid #2d2028;
  box-shadow: 8px 10px 0 rgba(45, 28, 31, .34), inset 0 0 0 3px #9b654d;
}
.library-book__spread::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 9px;
  bottom: 9px;
  left: calc(35.7% - 4px);
  width: 8px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(47, 28, 30, .65), rgba(255, 239, 196, .22) 45%, rgba(47, 28, 30, .72));
  box-shadow: 1px 0 0 rgba(255, 231, 181, .22), -1px 0 0 rgba(54, 31, 31, .54);
}
.library-book__page {
  position: relative;
  min-height: 460px;
  padding: clamp(20px, 3vw, 34px);
  overflow: hidden;
  background-color: #f4dfb0;
  background-image:
    linear-gradient(rgba(115, 72, 61, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .32), transparent 12%, transparent 88%, rgba(100, 55, 50, .08));
  background-size: 100% 25px, 100% 100%;
  box-shadow: inset 0 0 0 2px rgba(122, 76, 61, .34), inset 0 0 30px rgba(112, 63, 54, .12);
}
.library-book__page--index { border-radius: 5px 0 0 5px; }
.library-book__page--reading { border-radius: 0 5px 5px 0; }
.library-book__page--index::after,
.library-book__page--reading::after {
  content: "";
  position: absolute;
  right: 17px;
  bottom: 14px;
  left: 17px;
  height: 1px;
  background: rgba(106, 64, 56, .28);
}
.library-book__bookplate { padding: 16px 14px 14px; border: 2px solid #9d6a50; background: rgba(255, 246, 214, .38); box-shadow: inset 0 0 0 3px rgba(160, 101, 70, .13); }
.library-book__eyebrow, .library-panel__eyebrow { display: block; color: #a04e3e; font-size: 9px; letter-spacing: .13em; }
.library-book__title { margin: 9px 0 6px; color: #39242a; font-size: clamp(25px, 3.5vw, 38px); line-height: 1; }
.library-book__note { margin: 0; color: #745455; font-size: 11px; line-height: 1.6; }
.library-panel__lead { margin: 18px 0 13px; color: #6c4d50; font-size: 12px; line-height: 1.8; }
.library-panel__collections { display: grid; gap: 8px; margin-top: 15px; }
.library-panel__collection {
  position: relative;
  width: 100%;
  padding: 10px 24px 10px 11px;
  color: #51343b;
  background: #ddb176;
  border: 2px solid #8f5949;
  box-shadow: 3px 3px 0 rgba(94, 52, 49, .23);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.library-panel__collection::after { content: "›"; position: absolute; right: 9px; color: #8c493f; font-size: 17px; line-height: .8; }
.library-panel__collection:hover, .library-panel__collection:focus-visible, .library-panel__collection.is-active { color: #fff0c8; background: #9c4f42; border-color: #5e3540; outline: 0; transform: translateX(3px); }
.library-panel__collection.is-active::after { content: "●"; color: #f9df9a; font-size: 10px; top: 12px; }
.library-panel__status { margin: 18px 0 0; color: #775254; font-size: 10px; line-height: 1.5; }
.library-panel__status[data-state="loading"]::before { content: "◆ "; color: #b85d45; animation: library-book-status 1.1s steps(2) infinite; }
@keyframes library-book-status { 50% { opacity: .35; } }
.library-panel__shelf { display: grid; align-content: start; min-height: 100%; }
.library-panel__workspace-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 13px; border-bottom: 2px solid rgba(120, 70, 60, .35); }
.library-panel__workspace-head h3, .library-panel__shelf-head h3 { margin: 5px 0 0; color: #3a252c; font-size: clamp(20px, 2.8vw, 29px); }
.library-panel__workspace-head p { margin: 6px 0 0; color: #765758; font-size: 11px; line-height: 1.55; }
.library-panel__search { display: flex; align-self: start; border: 2px solid #8d5b50; background: #fff0c7; box-shadow: 2px 2px 0 rgba(89, 49, 46, .2); }
.library-panel__search input { width: min(185px, 26vw); min-width: 0; padding: 9px; color: #3d292e; background: transparent; border: 0; outline: 0; font: inherit; font-size: 11px; }
.library-panel__search button, .library-panel__ghost, .library-panel__crumb, .library-panel__suggestion { font: inherit; cursor: pointer; }
.library-panel__search button { padding: 0 11px; color: #fff0c8; background: #9c4e42; border: 0; border-left: 2px solid #8d5b50; font-size: 11px; }
.library-panel__results { margin-top: 18px; }
.library-panel__shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.library-panel__ghost { padding: 6px 8px; color: #73484c; background: transparent; border: 1px solid #9b6654; font-size: 10px; }
.library-panel__path { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 11px 0; color: #8c5a52; font-size: 10px; }
.library-panel__crumb { padding: 0; color: #8c4b43; background: transparent; border: 0; text-decoration: underline; }
.library-panel__path-separator { color: #aa7b61; }
.library-panel__items { display: grid; gap: 8px; }
.library-entry { display: grid; grid-template-columns: 29px 1fr; gap: 10px; align-items: start; width: 100%; padding: 12px 11px; color: #412d31; background: rgba(255, 249, 222, .55); border: 1px solid #b98468; box-shadow: inset 3px 0 0 rgba(179, 92, 67, .18); text-align: left; }
button.library-entry { cursor: pointer; }
button.library-entry:hover, button.library-entry:focus-visible { background: #fff0c9; border-color: #8e534a; outline: 2px solid #8e534a; outline-offset: 1px; }
.library-entry__icon { display: grid; place-items: center; width: 27px; height: 27px; color: #fff0c8; background: #9d5547; border: 2px solid #613b41; font-size: 13px; }
.library-entry--folder .library-entry__icon { color: #624031; background: #d5a965; }
.library-entry h4 { margin: 0 0 4px; font-size: 13px; line-height: 1.45; }
.library-entry p { display: -webkit-box; margin: 0; overflow: hidden; color: #79595a; font-size: 10px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.library-panel__suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 2px; }
.library-panel__suggestion { padding: 5px 7px; color: #754b4d; background: rgba(255, 247, 213, .5); border: 1px solid #aa725d; font-size: 10px; }
.library-panel__suggestion:hover, .library-panel__suggestion:focus-visible { color: #fff0c8; background: #9c4f42; outline: 0; }
.library-panel__empty, .library-panel__more { margin: 18px 0; color: #76575a; font-size: 12px; line-height: 1.7; }
.library-panel__more { padding-top: 10px; border-top: 1px dashed #a97761; font-size: 10px; }

.status-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.status-stat { padding: 15px; background: rgba(255,247,220,.38); border: 3px solid #89646a; }
.status-stat span, .status-stat strong { display: block; }
.status-stat span { color: #745b61; font-size: 10px; }
.status-stat strong { margin-top: 8px; font-size: 20px; }
.status-source { margin: 0 0 14px; color: #765d61; font-size: 11px; }
.server-grid { display: grid; gap: 10px; }
.server-card { padding: 16px; background: rgba(255,247,220,.38); border: 3px solid #89646a; }
.server-card__head { display: flex; justify-content: space-between; gap: 20px; }
.server-card h3 { margin: 0 0 4px; font-size: 17px; }
.server-card__region { color: #765d61; font-size: 10px; }
.server-card__state { height: max-content; padding: 5px 7px; color: #7d3b35; background: #d7a36d; border: 2px solid #82545a; font-size: 9px; }
.server-card.is-online .server-card__state { color: #37553c; background: #a8be79; }
.server-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 13px; }
.server-metrics div { padding-top: 8px; border-top: 2px solid rgba(112,84,102,.35); }
.server-metrics span, .server-metrics strong { display: block; }
.server-metrics span { color: #785f63; font-size: 9px; }
.server-metrics strong { margin-top: 4px; font-size: 13px; }
.server-chart { margin-top: 12px; }
.server-chart svg { display: block; width: 100%; height: 44px; }
.server-chart path { fill: none; stroke: #5f815c; stroke-width: 3; vector-effect: non-scaling-stroke; }
.server-chart small { display: block; margin-top: 2px; color: #765d61; text-align: right; font-size: 8px; }

@media (max-width: 1000px) {
  :root { --page: min(100% - 28px, 920px); }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar__signal { grid-row: 2; grid-column: 1 / 3; width: 100%; margin-bottom: 14px; }
  .intro { grid-template-columns: 1fr; align-items: start; }
  .intro__note { width: min(620px, 100%); }
  .object-dock { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  :root { --page: calc(100% - 22px); }
  .topbar { min-height: 72px; gap: 12px; }
  .brand small { display: none; }
  .brand__portrait { width: 38px; }
  .topbar__actions .pixel-button:first-child { display: none; }
  .pixel-button { padding-inline: 10px; }
  .topbar__signal { min-width: 0; font-size: 11px; }
  .intro { padding: 54px 0 42px; gap: 30px; }
  h1 { font-size: clamp(44px, 14vw, 70px); }
  .intro__note { padding: 26px 20px 20px; }
  .intro__note p { font-size: 14px; }
  .room-section__head { align-items: start; flex-direction: column; }
  .room-legend { flex-wrap: wrap; }
  .game-frame { padding: 5px; border-width: 3px; box-shadow: 6px 8px 0 rgba(7,5,9,.55); }
  .scene-corner { font-size: 9px; padding: 6px 7px; }
  .scene-corner--left { left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
  .scene-corner--right { right: 12px; top: 12px; }
  .scene-corner__source { display: none; }
  .object-dock { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .object-dock button { grid-template-columns: 32px 1fr; padding: 9px; }
  .object-dock button > span { width: 30px; height: 30px; font-size: 17px; }
  .room-footnote { flex-direction: column; gap: 6px; }
  .room-manifesto { grid-template-columns: 1fr; padding-bottom: 60px; }
  .footer { flex-direction: column; gap: 8px; }
  .profile-grid, .contact-card { grid-template-columns: 1fr; }
  .profile-avatar { width: 92px; }
  .skill-grid, .status-overview { grid-template-columns: 1fr; }
  .server-metrics { grid-template-columns: 1fr 1fr; }
  .contact-cat { min-width: 0; }
  .library-book__spread { grid-template-columns: 1fr; gap: 10px; padding: 7px; }
  .library-book__spread::before { display: none; }
  .library-book__page { min-height: 0; padding: 20px 17px; border-radius: 3px; }
  .library-book__page--reading { min-height: 390px; }
  .library-panel__workspace-head { display: grid; gap: 13px; }
  .library-panel__search { width: 100%; }
  .library-panel__search input { width: 100%; }
}

@media (max-width: 390px) {
  .brand strong { font-size: 14px; }
  .room-section__head h2 { font-size: 27px; }
  .object-dock strong { font-size: 13px; }
  .object-dock small { font-size: 9px; }
  .scene-corner--left span:last-child { max-width: 190px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .panel-head { padding: 15px; }
  .panel-body { padding: 16px; }
  .panel-footer span:last-child { display: none; }
}

body.is-motion-reduced *,
body.is-motion-reduced *::before,
body.is-motion-reduced *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

/* Full-screen room shell */
html, body { width: 100%; height: 100%; overflow: hidden; }
.topbar {
  position: fixed;
  z-index: 80;
  inset: 12px 12px auto;
  width: auto;
  min-height: 60px;
  padding: 7px 9px;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  background: rgba(24, 18, 28, .9);
  border: 3px solid #705466;
  box-shadow: 5px 5px 0 rgba(7, 5, 9, .58);
  backdrop-filter: blur(5px);
}
.brand__portrait { width: 36px; }
.brand strong { font-size: 14px; }
.brand small { font-size: 9px; }
.topbar__signal { min-width: 220px; padding: 8px 10px; }
.pixel-button { min-height: 34px; padding: 5px 11px; }
.room-app { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; }
.room-section { width: 100%; height: 100%; padding: 0; }
.game-frame { width: 100%; height: 100%; padding: 0; border: 0; box-shadow: none; background: #100c13; }
#game-container {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  background-color: #0d0a10;
  background-image:
    linear-gradient(rgba(9, 8, 15, .12), rgba(9, 8, 15, .22)),
    url("./assets/modern/exterior-topdown-night.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* In the handheld preview, the exterior is only peripheral atmosphere. The
   room canvas stays untouched while the exposed side garden recedes into the
   screen bezel. Immersive room mode keeps the original exterior treatment. */
body.is-handheld-mode #game-container {
  background-image:
    linear-gradient(180deg, rgba(18, 12, 20, .2), rgba(9, 7, 12, .34)),
    linear-gradient(90deg,
      rgba(5, 4, 8, .44) 0%,
      rgba(8, 6, 11, .16) 24%,
      rgba(8, 6, 11, .16) 76%,
      rgba(5, 4, 8, .44) 100%),
    url("./assets/modern/exterior-topdown-night.png");
}
#game-container canvas { background: transparent !important; }

/* Modern User Interface 16px cursor, extracted from the bundled UI sheet. */
html,
body,
#game-container,
#game-container canvas,
button,
a,
[role="button"] {
  cursor: url("./assets/modern/ui-cursor.png") 1 1, auto !important;
}

.room-settings-dialog {
  width: min(720px, calc(100% - 28px));
  max-height: min(640px, calc(100dvh - 28px));
  height: min(640px, calc(100dvh - 28px));
  padding: 0;
  overflow: hidden;
  color: #f0d7a0;
  background: #17121b;
  border: 4px solid #d2a46e;
  box-shadow: 10px 12px 0 rgba(0,0,0,.58), inset 0 0 0 3px #372b37;
  font-family: "ArkPixel", "Microsoft YaHei", sans-serif;
}
/* Only show when the dialog is actually open. A bare display:flex would override
   the browser default dialog:not([open]) { display: none } and trap the panel on screen. */
.room-settings-dialog[open] {
  display: flex;
  flex-direction: column;
}
.room-settings-dialog::backdrop { background: rgba(9, 7, 12, .78); backdrop-filter: blur(4px); }
.room-settings-window {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(135deg, #33283a, #201923);
}
.room-settings-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 23px 26px 20px; border-bottom: 3px solid #b88459; background: #2b2130; box-shadow: inset 0 -3px 0 rgba(0,0,0,.22); }
.room-settings-head span, .room-settings-section__head span { display: block; color: #bda58f; font-size: 9px; letter-spacing: .12em; }
.room-settings-head h2, .room-settings-section__head h3 { margin: 7px 0 0; color: #f5dc9d; font-size: 24px; line-height: 1; }
.room-settings-close { width: 38px; height: 38px; padding: 0; color: #2b2130; background: #d06d56; border: 3px solid #f1d5a0; box-shadow: 3px 3px 0 #120d16; font: inherit; font-size: 26px; line-height: 1; }
.room-settings-body { display: grid; gap: 14px; padding: 22px 26px 26px; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; }
.room-settings-section { padding: 18px; background: #211923; border: 3px solid #72566a; box-shadow: inset 0 0 0 2px rgba(255,255,255,.035); }
.room-settings-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.room-settings-section__head h3 { font-size: 16px; }
.room-settings-section p { margin: 13px 0 16px; color: #c5b1a3; font-size: 11px; line-height: 1.75; }
.room-settings-current { flex: 0 0 auto; padding: 7px 8px; color: #2a2230; background: #e9c780; border: 2px solid #9c694e; font-size: 10px; }
.room-settings-city-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.room-settings-city { min-height: 74px; padding: 9px 6px; color: #d7c2ac; background: #332735; border: 3px solid #68505e; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); text-align: left; }
.room-settings-city strong, .room-settings-city small { display: block; }
.room-settings-city strong { color: #f0d59e; font-size: 13px; }
.room-settings-city small { margin-top: 8px; color: #9c8a8d; font-size: 8px; }
.room-settings-city:hover, .room-settings-city:focus-visible, .room-settings-city.is-selected { color: #2b2130; background: #e5c779; border-color: #f6dda0; outline: none; }
.room-settings-city:hover strong, .room-settings-city:focus-visible strong, .room-settings-city.is-selected strong { color: #2b2130; }
.room-settings-city:hover small, .room-settings-city:focus-visible small, .room-settings-city.is-selected small { color: #6d4f50; }
.room-settings-custom-city { margin-top: 16px; padding: 13px; background: #2a202d; border: 2px solid #634a56; }
.room-settings-custom-city label { display: block; color: #efd59c; font-size: 11px; }
.room-settings-custom-city__entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 9px; }
.room-settings-custom-city input { width: 100%; min-width: 0; padding: 9px 10px; color: #2a2230; background: #f0d59e; border: 3px solid #9c694e; outline: none; font: inherit; font-size: 12px; }
.room-settings-custom-city input::placeholder { color: #81656a; opacity: 1; }
.room-settings-custom-city input:focus { border-color: #f7e2aa; box-shadow: 0 0 0 2px #d16d56; }
.room-settings-custom-city button { min-width: 68px; padding: 8px 11px; color: #2b2130; background: #d9a968; border: 3px solid #f2d79d; box-shadow: 2px 2px 0 #120d16; font: inherit; font-size: 11px; }
.room-settings-custom-city button:hover, .room-settings-custom-city button:focus-visible { color: #2b2130; background: #f1d58e; border-color: #fff0bd; outline: none; }
.room-settings-custom-city small { display: block; margin-top: 9px; color: #bba49b; font-size: 9px; line-height: 1.55; }
.room-settings-section--builder { border-color: #5d806f; background: linear-gradient(135deg, #263a39, #211923); }
.room-settings-section--builder em { padding: 5px 7px; color: #20302c; background: #92caa9; border: 2px solid #d8edbd; font-size: 9px; font-style: normal; }
.room-settings-builder-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; color: #25302f; background: #a6d0a5; border: 3px solid #e6f1bf; box-shadow: 3px 3px 0 #16251f; font-size: 12px; text-decoration: none; }
.room-settings-builder-link:hover, .room-settings-builder-link:focus-visible { color: #1d2926; background: #d6e7af; border-color: #fff5c6; outline: none; }
.room-settings-builder-link span { color: #3b5d50; font-size: 20px; line-height: .6; }
.room-settings-section--news { border-color: #65728d; background: linear-gradient(135deg, #2b3447, #211923); }
.room-settings-section--news em { padding: 5px 7px; color: #24303e; background: #a5c8dd; border: 2px solid #e1edcf; font-size: 9px; font-style: normal; }
.room-settings-topic-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.room-settings-topic { min-height: 76px; padding: 8px 6px; color: #d1d5dc; background: #29303d; border: 3px solid #586276; box-shadow: inset 0 -3px 0 rgba(0,0,0,.22); text-align: left; }
.room-settings-topic strong, .room-settings-topic small { display: block; }
.room-settings-topic strong { color: #edf0ce; font-size: 12px; }
.room-settings-topic small { margin-top: 8px; color: #aab2be; font-size: 8px; line-height: 1.25; }
.room-settings-topic:hover, .room-settings-topic:focus-visible, .room-settings-topic.is-selected { color: #202938; background: #9fc4d2; border-color: #e6f0ca; outline: none; }
.room-settings-topic:hover strong, .room-settings-topic:focus-visible strong, .room-settings-topic.is-selected strong { color: #202938; }
.room-settings-topic:hover small, .room-settings-topic:focus-visible small, .room-settings-topic.is-selected small { color: #39556a; }
.room-settings-section--motion { border-color: #8d6b57; background: linear-gradient(135deg, #3a2b28, #211923); }
.room-settings-section--motion em { padding: 5px 7px; color: #2f241d; background: #e2bd76; border: 2px solid #f2e0ad; font-size: 9px; font-style: normal; }
.room-settings-topic-grid--motion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.room-settings-section--motion [data-settings-motion-note] { display: block; margin-top: 10px; color: #cbb5a4; font-size: 9px; line-height: 1.4; }
.room-settings-section--ncm { border-color: #6b7794; background: linear-gradient(135deg, #273044, #211923); }
.room-settings-section--ncm [data-settings-ncm-note] { display: block; margin-top: 11px; color: #c5cbd9; font-size: 9px; line-height: 1.5; }
.room-settings-ncm-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.room-settings-ncm-actions button { min-width: 108px; padding: 9px 11px; color: #263045; background: #b8cbe5; border: 3px solid #e5eefb; box-shadow: 2px 2px 0 #101520; font: inherit; font-size: 11px; }
.room-settings-ncm-actions button:hover, .room-settings-ncm-actions button:focus-visible { color: #182133; background: #e0ebfb; outline: none; }
.room-settings-ncm-actions button:disabled { cursor: wait; opacity: .6; }
.room-settings-ncm-actions .is-danger { color: #fff1df; background: #8c4952; border-color: #e09a87; }
.room-settings-ncm-qr { display: grid; justify-items: center; gap: 10px; margin-top: 14px; padding: 14px; color: #c5cbd9; background: #171d2a; border: 2px solid #61708d; font-size: 10px; text-align: center; }
.room-settings-ncm-qr img { width: min(100%, 188px); aspect-ratio: 1; image-rendering: pixelated; background: #fff; border: 5px solid #e7edf7; }
.room-settings-section--future { opacity: .84; background: #261e2a; border-style: dashed; }
.room-settings-section--future em { padding: 5px 7px; color: #b69f91; background: #18131c; border: 2px solid #5d4759; font-size: 9px; font-style: normal; }
.room-settings-foot { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 16px; padding: 12px 26px; color: #a9938d; background: #17131c; border-top: 2px solid #634a56; font-size: 9px; }
@media (max-width: 640px) {
  .room-settings-dialog { width: min(100% - 14px, 720px); max-height: calc(100dvh - 14px); height: calc(100dvh - 14px); }
  .room-settings-window { min-height: 0; }
  .room-settings-head, .room-settings-body { padding-left: 14px; padding-right: 14px; }
  .room-settings-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-settings-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-settings-custom-city__entry { grid-template-columns: 1fr; }
  .room-settings-custom-city button { width: 100%; }
  .room-settings-foot { padding: 11px 14px; }
}
.game-frame { transition: opacity .24s steps(4), transform .24s steps(4); }
body.is-floor-changing .game-frame { opacity: .24; transform: scale(.985); }

.layout-editor {
  position: fixed;
  z-index: 20000;
  top: 82px;
  right: 16px;
  width: min(292px, calc(100vw - 32px));
  padding: 14px;
  color: #2d2330;
  background: #ead09a;
  border: 4px solid #392c3a;
  box-shadow: 7px 7px 0 rgba(0,0,0,.52), inset 0 0 0 2px #b47a55;
  font-family: ArkPixel, monospace;
  transition: width .16s steps(4), height .16s steps(4), padding .16s steps(4);
}
.layout-editor__head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.layout-editor__head-actions { display: flex; align-items: center; gap: 6px; }
.layout-editor__head-actions button { padding: 5px 7px; color: #f2d79d; background: #76515d; font-size: 9px; }
.layout-editor__head strong,
.layout-editor__head small { display: block; }
.layout-editor__head small { margin-top: 5px; color: #735963; font-size: 9px; }
.layout-editor__head a { padding: 5px 7px; color: #f2d79d; background: #392c3a; border: 0; text-decoration: none; }
.layout-editor__selected { display: flex; align-items: center; gap: 6px; min-height: 28px; margin: 12px 0 9px; padding: 7px 8px; color: #f2d79d; background: #392c3a; font-size: 11px; }
.layout-editor__selected > span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-editor__selected select { width: 106px; min-width: 0; padding: 4px; color: #2d2330; background: #f5dfae; border: 1px solid #b77b57; font: inherit; font-size: 8px; }
.layout-editor__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.layout-editor__fields label { color: #674d58; font-size: 9px; }
.layout-editor__fields input { width: 100%; margin-top: 4px; padding: 6px 4px; color: #2d2330; background: #f5dfae; border: 2px solid #75596a; font: inherit; }
.layout-editor__selection-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
.layout-editor__selection-actions button { padding: 6px 5px; color: #fff3cc; background: #76515d; font-size: 9px; }
.layout-editor__selection-actions [data-layout-move] { background: #5c7c72; }
.layout-editor__depth-guide { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 7px; padding: 6px 7px; color: #735963; background: rgba(57, 44, 58, .12); font-size: 8px; line-height: 1.4; }
.layout-editor__nudges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.layout-editor button { padding: 7px 5px; color: #2d2330; background: #d49a62; border: 2px solid #664c59; font: inherit; cursor: pointer; }
.layout-editor button:hover,
.layout-editor button:focus-visible { background: #e5b877; }
.layout-editor__snap { display: flex; align-items: center; gap: 7px; margin: 9px 0; color: #674d58; font-size: 9px; }
.layout-editor__actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.layout-editor__actions [data-layout-reset] { grid-column: 1 / -1; background: #c97c62; }
.layout-editor__actions [data-layout-import-trigger] { background: #5c7c72; color: #fff3cc; }
.layout-editor__actions [data-layout-paste-trigger] { background: #76515d; color: #fff3cc; }
.layout-editor__import-dialog { width: min(620px, calc(100vw - 32px)); max-width: 620px; padding: 0; color: #2d2330; background: #ead09a; border: 4px solid #392c3a; box-shadow: 8px 8px 0 rgba(0, 0, 0, .52); font-family: ArkPixel, monospace; }
.layout-editor__import-dialog::backdrop { background: rgba(17, 12, 20, .72); }
.layout-editor__import-dialog form { display: grid; gap: 10px; padding: 14px; }
.layout-editor__import-dialog header, .layout-editor__import-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.layout-editor__import-dialog header strong { font-size: 13px; }
.layout-editor__import-dialog button { padding: 7px 10px; color: #2d2330; background: #d49a62; border: 2px solid #664c59; font: inherit; cursor: pointer; }
.layout-editor__import-dialog textarea { min-height: 280px; resize: vertical; padding: 9px; color: #2d2330; background: #f5dfae; border: 2px solid #75596a; font: 11px/1.45 ui-monospace, Consolas, monospace; }
.layout-editor__import-dialog p { margin: 0; color: #735963; font-size: 9px; line-height: 1.5; }
.local-layout-preview { position: fixed; z-index: 96; top: 14px; right: 14px; display: grid; gap: 7px; width: min(266px, calc(100vw - 28px)); padding: 10px; color: #f5dfae; background: rgba(45, 35, 48, .93); border: 2px solid #b77b57; box-shadow: 4px 4px 0 rgba(0, 0, 0, .48); font: 10px/1.35 ArkPixel, monospace; }
.local-layout-preview strong { color: #f2d79d; font-size: 10px; letter-spacing: .04em; }
.local-layout-preview small { color: #d8c6b6; font-size: 9px; }
.local-layout-preview small[data-tone="success"] { color: #99d887; }
.local-layout-preview small[data-tone="error"] { color: #f08c7c; }
.local-layout-preview > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.local-layout-preview button { min-height: 27px; padding: 5px; color: #fff3cc; background: #5c7c72; border: 1px solid #d9ad70; font: inherit; cursor: pointer; }
.local-layout-preview button[data-local-layout-reset] { grid-column: 1 / -1; color: #f1d3bd; background: #76515d; }
.layout-editor__hint { margin: 9px 0 0; color: #735963; font-size: 9px; line-height: 1.55; }
.layout-editor__map { margin: 9px 0; padding: 7px; border: 2px solid #75596a; background: rgba(245, 223, 174, .58); }
.layout-editor__map-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.layout-editor__map-head strong { color: #503b49; font-size: 10px; }
.layout-editor__map-head button { padding: 5px 6px; font-size: 9px; }
.layout-editor__map-head button[aria-pressed="true"] { color: #fff3cc; background: #76515d; }
.layout-editor__test { width: 100%; margin-top: 7px; padding: 7px 6px; font-size: 10px; }
.layout-editor__test[aria-pressed="true"] { color: #fff3cc; background: #4c7860; box-shadow: inset 0 0 0 2px #9ae0b0; }
.layout-editor__map p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin: 7px 0 0; color: #674d58; font-size: 8px; line-height: 1.35; }
.layout-editor__map i { width: 9px; height: 9px; border: 1px solid rgba(44, 30, 39, .65); }
.layout-editor__map .is-walkable { background: #57c887; }
.layout-editor__map .is-blocked { background: #e46d68; }
.layout-editor__map .is-interaction { background: #f1c75b; }
.layout-editor__map .is-spawn { background: #66b9ee; }
.layout-editor__cell-tools { margin: 9px 0; padding: 7px; border: 2px solid #75596a; background: rgba(232, 203, 145, .42); }
.layout-editor__cell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; }
.layout-editor__cell-head strong { color: #503b49; font-size: 10px; }
.layout-editor__cell-head span { color: #735963; font-size: 8px; text-align: right; }
.layout-editor__cell-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
.layout-editor__cell-buttons button { min-height: 30px; padding: 5px; font-size: 9px; }
.layout-editor__cell-buttons button[aria-pressed="true"] { color: #fff3cc; background: #76515d; box-shadow: inset 0 0 0 2px #f0ca7f; }
.layout-editor__cell-buttons--simple button { min-height: 38px; font-size: 11px; }
.layout-editor__cell-buttons--paint { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.layout-editor__cell-buttons--paint button { min-height: 36px; }
.layout-editor__cell-buttons--paint [data-layout-cell-tool="walkable"] { background: #88c999; }
.layout-editor__cell-buttons--paint [data-layout-cell-tool="blocked"] { background: #d98378; }
.layout-editor__cell-note { margin: 7px 0 0; color: #735963; font-size: 8px; line-height: 1.45; }
.layout-editor.is-collapsed { width: 48px; height: 48px; padding: 4px; overflow: hidden; }
.layout-editor.is-collapsed > :not(.layout-editor__head) { display: none; }
.layout-editor.is-collapsed .layout-editor__head { display: block; }
.layout-editor.is-collapsed .layout-editor__head > div:first-child,
.layout-editor.is-collapsed .layout-editor__head a { display: none; }
.layout-editor.is-collapsed .layout-editor__head-actions { display: block; }
.layout-editor.is-collapsed [data-layout-panel-toggle] { width: 36px; height: 36px; padding: 3px; font-size: 8px; line-height: 1.05; }
body.layout-editor-active .object-dock,
body.layout-editor-active .scene-corner { opacity: .2; pointer-events: none; }

@media (max-width: 700px) {
  .layout-editor { top: 68px; right: 8px; max-height: calc(100dvh - 150px); overflow: auto; }
}
.scene-corner--left { left: 18px; bottom: 90px; }
.scene-corner--right { display: none; }
.object-dock {
  position: absolute;
  z-index: 70;
  left: 50%;
  bottom: 14px;
  width: min(760px, calc(100% - 28px));
  margin: 0;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  transform: translateX(-50%);
}
.object-dock button { padding: 7px 8px; grid-template-columns: 28px 1fr; column-gap: 7px; border-width: 2px; box-shadow: 3px 3px 0 rgba(7,5,9,.72); background: rgba(35, 27, 40, .94); }
.object-dock button > span { width: 26px; height: 26px; font-size: 15px; border-width: 1px; }
.object-dock strong { font-size: 12px; }
.object-dock small { font-size: 8px; }

@media (max-width: 700px) {
  .topbar { inset: 7px 7px auto; grid-template-columns: 1fr auto; min-height: 52px; padding: 5px 6px; }
  .brand small { display: none; }
  .topbar__signal { position: fixed; z-index: 81; left: 7px; right: 7px; top: 65px; width: auto; min-width: 0; margin: 0; border-width: 2px; background: rgba(24,18,28,.88); }
  .topbar__actions .pixel-button:first-child { display: none; }
  .scene-corner--left { left: 8px; bottom: 118px; max-width: calc(100% - 16px); }
  .object-dock { bottom: 7px; width: calc(100% - 14px); grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .object-dock button { padding: 5px 6px; grid-template-columns: 24px 1fr; min-height: 42px; }
  .object-dock button > span { width: 22px; height: 22px; font-size: 13px; }
  .object-dock strong { font-size: 10px; }
  .object-dock small { font-size: 7px; }
}

/* The room itself is the interface; keep only the small day/night control visible. */
.topbar {
  display: block !important;
  position: fixed;
  z-index: 90;
  inset: 14px 14px auto auto;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}
.topbar .brand,
.topbar__signal,
#help-button,
.object-dock,
.scene-corner { display: none !important; }
.topbar__actions { display: block; pointer-events: auto; }
.layout-editor { top: 16px; }

@media (max-width: 700px) {
  .topbar { inset: 8px 8px auto auto; }
  .layout-editor { top: 8px; }
}

/* Private access gate.
   Authentication lives inside the handheld display as a room HUD, not a
   separate window layered over the product. */
body.is-auth-open {
  overflow: hidden;
}
body.is-auth-open .handheld-screen__launch {
  pointer-events: none;
  opacity: 0;
  filter: none;
  transform: translateY(6px);
  transition: opacity 180ms ease-out, transform 220ms ease-out;
}
body.is-auth-open .handheld-dpad,
body.is-auth-open .handheld-actions {
  pointer-events: none;
  opacity: .72;
}

.auth-gate {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 26px);
  color: #f4dfae;
  background: transparent;
  overflow: hidden;
  opacity: 0;
  isolation: isolate;
  transition: opacity 220ms ease-out, visibility 220ms;
  visibility: hidden;
  pointer-events: none;
}
.auth-gate::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 231, 184, .12) 0,
    rgba(255, 231, 184, .12) 1px,
    transparent 1px,
    transparent 4px
  );
}
.auth-gate[hidden] { display: none !important; }
.auth-gate.is-open {
  display: grid;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.auth-gate__backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(24, 17, 27, .22), rgba(8, 6, 11, .66) 76%),
    linear-gradient(180deg, rgba(12, 9, 15, .18), rgba(8, 6, 11, .46));
  box-shadow: inset 0 0 72px rgba(5, 3, 7, .48);
}
.auth-window {
  position: relative;
  z-index: 1;
  width: min(92%, 420px);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(4px, 1vw, 10px);
  color: #f6e3b3;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  scrollbar-width: none;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 240ms ease-out 60ms, transform 360ms cubic-bezier(.16, .76, .2, 1) 40ms;
}
.auth-window::-webkit-scrollbar { display: none; }
.auth-gate.is-open .auth-window {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.auth-window__chrome {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 24px;
  padding: 0 34px 8px;
  background: transparent;
  border: 0;
}
.auth-window__pill {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #97c477;
  box-shadow: 0 0 0 2px rgba(20, 14, 18, .86), 0 0 9px rgba(151, 196, 119, .72);
}
.auth-window__signal {
  color: #e0c796;
  font-size: clamp(8px, .78vw, 10px);
  letter-spacing: .16em;
  text-shadow: 2px 2px 0 rgba(20, 13, 20, .9);
}
.auth-window__close {
  position: absolute;
  top: -2px;
  right: 0;
  width: 26px;
  height: 24px;
  padding: 0;
  color: rgba(240, 215, 170, .8);
  background: rgba(18, 12, 20, .5);
  border: 1px solid rgba(219, 180, 123, .45);
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: .78;
  transition: color 140ms ease, background 140ms ease, opacity 140ms ease;
}
.auth-window__close:hover,
.auth-window__close:focus-visible {
  color: #fff0c4;
  background: rgba(116, 65, 61, .72);
  opacity: 1;
  outline: none;
}
.auth-window__body {
  display: grid;
  justify-items: center;
  padding: 0;
  text-align: center;
}
.auth-window__lock {
  position: relative;
  width: 20px;
  height: 16px;
  margin: 2px 0 7px;
  background: rgba(22, 15, 23, .78);
  border: 2px solid #e0bd78;
  box-shadow: 2px 2px 0 rgba(12, 8, 13, .9);
}
.auth-window__lock::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -9px;
  width: 8px;
  height: 8px;
  border: 2px solid #e0bd78;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}
.auth-window__lock span {
  position: absolute;
  width: 3px;
  height: 7px;
  left: 7px;
  top: 4px;
  background: #e0bd78;
}
.auth-window__kicker {
  margin: 0;
  color: #d4aa6b;
  font-size: clamp(8px, .78vw, 10px);
  letter-spacing: .14em;
  text-shadow: 2px 2px 0 rgba(17, 11, 18, .9);
}
.auth-window h1 {
  margin: 5px 0 6px;
  color: #f6e3b3;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: .025em;
  text-shadow: 3px 3px 0 rgba(20, 13, 21, .96), 0 0 18px rgba(241, 199, 126, .14);
}
.auth-window__lead {
  min-height: 0;
  margin: 0;
  max-width: 34em;
  color: #d1c0ad;
  font-size: clamp(9px, .82vw, 11px);
  line-height: 1.55;
  text-shadow: 2px 2px 0 rgba(18, 12, 19, .94);
}
.auth-form {
  display: grid;
  gap: 8px;
  width: min(100%, 320px);
  margin-top: 11px;
}
.auth-form[aria-busy="true"] { opacity: .72; }
.auth-form__field {
  display: grid;
  gap: 3px;
  color: #e1c17d;
  font-size: clamp(8px, .75vw, 10px);
  text-align: left;
  text-shadow: 2px 2px 0 rgba(16, 10, 17, .9);
}
.auth-form__field[hidden] { display: none; }
.auth-form__field input {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  color: #f5e5c2;
  caret-color: #a9d48a;
  background: rgba(18, 12, 20, .76);
  border: 1px solid rgba(218, 177, 111, .54);
  border-bottom: 2px solid #c99a58;
  border-radius: 0;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .28), 0 2px 0 rgba(11, 7, 12, .55);
  font: inherit;
  font-size: 12px;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.auth-form__field input:focus {
  background: rgba(31, 20, 31, .9);
  border-color: #f2d49a;
  border-bottom-color: #a9d48a;
  box-shadow: 0 0 0 2px rgba(169, 212, 138, .2), inset 2px 2px 0 rgba(0, 0, 0, .3);
  outline: none;
}
.auth-form__submit {
  min-height: 36px;
  margin-top: 2px;
  color: #f5dfa9;
  background: rgba(22, 15, 24, .78);
  border: 1px solid rgba(224, 184, 119, .58);
  border-bottom: 2px solid #d1a261;
  box-shadow: 0 2px 0 rgba(10, 6, 11, .72);
  font: inherit;
  font-size: 11px;
  letter-spacing: .08em;
  text-shadow: 2px 2px 0 rgba(14, 9, 15, .9);
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.auth-form__submit:hover,
.auth-form__submit:focus-visible {
  color: #fff0c2;
  background: rgba(67, 45, 52, .88);
  border-color: #efd39a;
  outline: none;
  transform: translate(-1px, -1px);
}
.auth-form__submit:active {
  transform: translateY(1px);
  box-shadow: none;
}
.auth-form__submit:disabled {
  cursor: wait;
  opacity: .66;
  transform: none;
}
.auth-window__message {
  min-height: 15px;
  margin: 7px 0 0;
  color: #edaf78;
  font-size: 9px;
  line-height: 1.5;
  text-shadow: 2px 2px 0 rgba(17, 10, 17, .92);
}
.auth-window__message.is-error { color: #ff9b89; }
.auth-window__message.is-success { color: #a9d48a; }
.auth-window__foot {
  margin: 5px 0 0;
  padding: 0;
  color: #aa9696;
  border: 0;
  font-size: 8px;
  line-height: 1.5;
  text-shadow: 2px 2px 0 rgba(14, 9, 15, .92);
}
body.is-motion-reduced .auth-gate,
body.is-motion-reduced .auth-window,
body.is-motion-reduced.is-auth-open .handheld-screen__launch {
  transition: none !important;
}
@media (max-width: 960px), (max-height: 680px) {
  .auth-gate { padding: 8px 12px; }
  .auth-window {
    width: min(90%, 380px);
    padding: 0;
  }
  .auth-window__chrome {
    min-height: 18px;
    padding: 0 28px 4px;
  }
  .auth-window__close {
    top: 0;
    width: 22px;
    height: 20px;
    font-size: 14px;
  }
  .auth-window__pill {
    width: 6px;
    height: 6px;
  }
  .auth-window__lock { display: none; }
  .auth-window__kicker { font-size: 8px; }
  .auth-window h1 {
    margin: 2px 0 3px;
    font-size: clamp(15px, 2.2vw, 20px);
  }
  .auth-window__lead {
    font-size: 8px;
    line-height: 1.35;
  }
  .auth-form {
    gap: 5px;
    width: min(100%, 300px);
    margin-top: 6px;
  }
  .auth-form__field {
    gap: 2px;
    font-size: 8px;
  }
  .auth-form__field input {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 11px;
  }
  .auth-form__submit {
    min-height: 30px;
    margin-top: 0;
    font-size: 10px;
  }
  .auth-window__message {
    min-height: 12px;
    margin-top: 3px;
    font-size: 8px;
  }
  .auth-window__foot { display: none; }
}
.handheld-screen__launch em[data-auth-hint] {
  display: block;
  color: #c8b49a;
  font-size: clamp(8px, .85vw, 11px);
  font-style: normal;
  letter-spacing: .06em;
  text-align: center;
}
.handheld-screen__boot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #f0cf90;
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: .14em;
}
.handheld-screen__boot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #97c477;
  box-shadow: 0 0 0 2px rgba(20, 14, 18, .8), 0 0 10px rgba(151, 196, 119, .75);
}

/* Immersive mode never keeps the in-screen auth UI. */
body.is-room-immersive .auth-gate { display: none !important; }
/* Private mailbox: only text returned by the authenticated server is rendered. */
.mailbox-panel { color: #2d2330; }
.mailbox-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: #3a2d3c; border: 3px solid #725565; box-shadow: inset 0 0 0 2px #5a4455; }
.mailbox-panel__badge, .mailbox-panel__account { display: block; }
.mailbox-panel__badge { color: #f2be70; font-size: 9px; letter-spacing: .1em; }
.mailbox-panel__badge.is-offline { color: #d78670; }
.mailbox-panel__account { margin-top: 5px; color: #f2dfaf; font-size: 12px; }
.mailbox-panel__refresh { flex: 0 0 auto; min-height: 34px; padding: 6px 9px; color: #2d2330; background: #d59a58; border: 2px solid #f0d59b; box-shadow: 3px 3px 0 #161018; font: inherit; font-size: 10px; cursor: pointer; }
.mailbox-panel__refresh:hover, .mailbox-panel__refresh:focus-visible { background: #e8b86a; outline: none; transform: translate(-1px, -1px); }
.mailbox-panel__refresh:disabled { cursor: wait; opacity: .7; transform: none; }
.mailbox-panel__content { min-height: 220px; padding-top: 14px; }
.mailbox-panel__loading, .mailbox-panel__notice { margin: 0; padding: 18px; color: #765a62; background: #f4dfae; border: 2px solid #b48161; font-size: 12px; line-height: 1.7; }
.mailbox-panel__notice { color: #704f57; background: #eed7a1; }
.mailbox-panel__layout { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(0, 1.1fr); min-height: 350px; border: 3px solid #725565; background: #f3dca7; }
.mailbox-panel__list { max-height: 480px; overflow: auto; background: #e8ce97; border-right: 3px solid #725565; }
.mailbox-message { display: block; width: 100%; padding: 12px 13px; color: #332636; background: transparent; border: 0; border-bottom: 2px solid rgba(104, 73, 85, .4); text-align: left; font: inherit; cursor: pointer; }
.mailbox-message:hover, .mailbox-message:focus-visible, .mailbox-message.is-selected { color: #f9e7ba; background: #493747; outline: none; }
.mailbox-message.is-unread { border-left: 5px solid #c96f50; padding-left: 8px; }
.mailbox-message__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mailbox-message__top strong { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-message__top time { flex: 0 0 auto; color: #896a66; font-size: 8px; }
.mailbox-message:hover time, .mailbox-message:focus-visible time, .mailbox-message.is-selected time { color: #d8bd9f; }
.mailbox-message__subject { display: block; margin-top: 6px; overflow: hidden; color: #725a61; font-size: 10px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-message:hover .mailbox-message__subject, .mailbox-message:focus-visible .mailbox-message__subject, .mailbox-message.is-selected .mailbox-message__subject { color: #f2d9ac; }
.mailbox-panel__detail { min-width: 0; padding: 17px; background: #f8e4b1; }
.mailbox-panel__detail-label { display: block; color: #a16455; font-size: 9px; letter-spacing: .1em; }
.mailbox-panel__message-head { padding-bottom: 12px; border-bottom: 2px solid #c4956e; }
.mailbox-panel__message-head h3 { margin: 8px 0 7px; color: #35283a; font-size: 17px; line-height: 1.5; }
.mailbox-panel__message-head time { color: #89696a; font-size: 9px; }
.mailbox-panel__message-body { max-height: 360px; margin: 15px 0 0; overflow: auto; color: #3c2e3c; font: inherit; font-size: 11px; line-height: 1.9; white-space: pre-wrap; word-break: break-word; }
.mailbox-panel__truncated { display: block; margin-top: 12px; color: #9c6256; font-size: 9px; line-height: 1.5; }

@media (max-width: 640px) {
  .mailbox-panel__head { align-items: flex-start; flex-direction: column; }
  .mailbox-panel__refresh { width: 100%; }
  .mailbox-panel__layout { grid-template-columns: 1fr; }
  .mailbox-panel__list { max-height: 230px; border-right: 0; border-bottom: 3px solid #725565; }
  .mailbox-panel__detail { min-height: 260px; }
}

/* Pixel notification pinned to the wall mailbox's position in the 960 x 640 room. */
.room-mail-alert {
  position: absolute;
  z-index: 31;
  left: 18.6%;
  top: 60.8%;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  color: #fff2ca;
  background: #d4544f;
  border: 2px solid #fff0bd;
  box-shadow: 2px 2px 0 #401d2b, 0 0 0 2px rgba(48, 25, 37, .82);
  font: 8px/1 "ArkPixel", monospace;
  cursor: pointer;
  image-rendering: pixelated;
}
.room-mail-alert:hover,
.room-mail-alert:focus-visible { background: #f06a5e; outline: none; transform: translate(-1px, -1px); }
.room-mail-alert.is-announcing { animation: room-mail-alert-pulse .34s steps(2) 5; }
@keyframes room-mail-alert-pulse {
  50% { transform: scale(1.32); background: #ffd378; box-shadow: 0 0 0 2px #fff0bd, 0 0 14px rgba(255, 188, 98, .95); }
}
@media (max-width: 640px) {
  .room-mail-alert { min-width: 15px; height: 15px; border-width: 1px; font-size: 7px; box-shadow: 1px 1px 0 #401d2b, 0 0 0 1px rgba(48, 25, 37, .82); }
}

/* Handheld landing mode: the live room remains on screen, but is framed as a
   warm personal console until the visitor chooses to enter it. */
.handheld-shell { display: none; }

body.is-handheld-mode {
  /* Async-area inspired warm grid field for the dark home shell. */
  background-color: #1a1418;
  background-image:
    radial-gradient(circle at 50% 10%, rgba(255, 214, 150, .12), transparent 28rem),
    radial-gradient(circle at 18% 72%, rgba(120, 72, 108, .14), transparent 22rem),
    radial-gradient(circle at 84% 66%, rgba(140, 78, 70, .12), transparent 20rem),
    linear-gradient(rgba(255, 232, 198, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 232, 198, .075) 1px, transparent 1px),
    linear-gradient(180deg, #20181e 0%, #171218 48%, #100c12 100%);
  background-size:
    auto,
    auto,
    auto,
    28px 28px,
    28px 28px,
    auto;
}
body.is-handheld-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .55), transparent 58%),
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .24) 100%);
}
body.is-handheld-mode .topbar { display: none; }
body.is-handheld-mode .room-app {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  padding: clamp(18px, 3.2vh, 40px) 24px clamp(18px, 3vh, 32px);
}
body.is-handheld-mode .room-section {
  display: grid;
  place-items: center;
  padding: 0;
  width: 100%;
  height: 100%;
}
body.is-handheld-mode .handheld-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: clamp(12px, 2vh, 24px);
  width: 100%;
  height: 100%;
  padding-top: clamp(8px, 2.2vh, 28px);
  padding-bottom: clamp(8px, 2vh, 24px);
}
body.is-handheld-mode .handheld-device {
  align-self: center;
}
.handheld-hero {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  width: min(720px, 92vw);
  max-width: min(720px, 92vw);
  /* Reserve a fixed hero band so typing never reflows the console below. */
  min-height: 7.4rem;
  padding: 0 12px;
  text-align: center;
  pointer-events: none;
  contain: layout style;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.handheld-hero__kicker {
  margin: 0;
  color: #c8ae86;
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: .22em;
  will-change: transform;
  animation: handheld-hero-float 5.6s ease-in-out infinite;
}
.handheld-hero__title {
  margin: 0;
  color: #f6e4b8;
  font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.05;
  letter-spacing: .08em;
  text-shadow:
    0 2px 0 rgba(20, 12, 18, .55),
    0 0 28px rgba(240, 196, 120, .18);
  will-change: transform;
  animation: handheld-hero-float 6.4s ease-in-out infinite;
  animation-delay: -.9s;
}
.handheld-hero__lead {
  position: relative;
  margin: 2px 0 0;
  width: min(18em, 92vw);
  max-width: 18em;
  min-height: 1.7em;
  color: #b7a18f;
  font-size: clamp(11px, 1.2vw, 14px);
  line-height: 1.7;
  letter-spacing: .04em;
}

/* Typewriter lead only: fixed box + overlay caret (no border reflow). */
.handheld-hero [data-typewriter] {
  display: inline-block;
  box-sizing: border-box;
  min-height: 1.7em;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
}
.handheld-hero__lead[data-typewriter] {
  display: block;
  width: min(18em, 92vw);
  max-width: 18em;
  min-height: 1.7em;
  margin-left: auto;
  margin-right: auto;
  padding-right: 0;
  text-align: center;
}
.handheld-hero [data-typewriter]::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: .95em;
  margin-left: 4px;
  vertical-align: -0.08em;
  background: transparent;
  opacity: 0;
}
.handheld-hero [data-typewriter].is-typing::after,
.handheld-hero [data-typewriter].is-typed::after,
.handheld-hero [data-typewriter].is-erasing::after {
  background: rgba(246, 228, 184, .9);
  opacity: 1;
  animation: handheld-type-caret .75s step-end infinite;
}
.handheld-hero [data-typewriter].is-typed::after {
  background: rgba(246, 228, 184, .55);
  animation-duration: .9s;
}
.handheld-hero [data-typewriter].is-erasing::after {
  background: rgba(246, 228, 184, .75);
  animation-duration: .55s;
}
.handheld-hero__lead.is-typing::after {
  background: rgba(196, 168, 140, .9);
  width: 2px;
}
@keyframes handheld-type-caret {
  50% { opacity: 0; }
}
@keyframes handheld-hero-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}
body.is-motion-reduced .handheld-ambient__grid,
body.is-motion-reduced .handheld-hero__kicker,
body.is-motion-reduced .handheld-hero__title {
  animation: none;
}
body.is-motion-reduced .handheld-hero [data-typewriter]::after {
  content: none;
  animation: none;
}

.handheld-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.handheld-ambient__grid {
  position: absolute;
  inset: -6%;
  opacity: 1;
  background-image:
    linear-gradient(rgba(255, 232, 198, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 232, 198, .16) 1px, transparent 1px);
  background-size:
    28px 28px,
    28px 28px;
  background-position: center center;
  mask-image: radial-gradient(circle at 50% 42%, #000 18%, rgba(0,0,0,.92) 62%, transparent 92%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 18%, rgba(0,0,0,.92) 62%, transparent 92%);
}
.handheld-ambient__grain {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 236, 210, .55), transparent),
    radial-gradient(1px 1px at 28% 42%, rgba(255, 220, 180, .35), transparent),
    radial-gradient(1px 1px at 44% 12%, rgba(255, 236, 210, .4), transparent),
    radial-gradient(1px 1px at 62% 36%, rgba(255, 220, 180, .3), transparent),
    radial-gradient(1px 1px at 78% 16%, rgba(255, 236, 210, .45), transparent),
    radial-gradient(1px 1px at 88% 48%, rgba(255, 220, 180, .28), transparent),
    radial-gradient(1px 1px at 18% 70%, rgba(255, 230, 190, .25), transparent),
    radial-gradient(1px 1px at 72% 78%, rgba(255, 220, 180, .22), transparent);
  mix-blend-mode: soft-light;
}
.handheld-ambient__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, transparent 12%, rgba(10, 6, 12, .16) 52%, rgba(6, 4, 9, .78) 100%);
}
.handheld-ambient__haze {
  position: absolute;
  width: min(48vw, 520px);
  height: min(48vw, 520px);
  border-radius: 50%;
  filter: blur(1px);
  opacity: .55;
}
.handheld-ambient__haze--left {
  left: -12%;
  top: 18%;
  background:
    radial-gradient(circle, rgba(148, 88, 120, .28), rgba(90, 50, 90, .1) 42%, transparent 70%);
}
.handheld-ambient__haze--right {
  right: -14%;
  top: 12%;
  background:
    radial-gradient(circle, rgba(180, 100, 72, .24), rgba(110, 60, 58, .1) 44%, transparent 70%);
}
.handheld-ambient__floor {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: min(96vw, 1280px);
  height: min(46vh, 420px);
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 196, 120, .12), transparent 52%),
    radial-gradient(ellipse at 50% 78%, rgba(28, 16, 24, .72), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(12, 8, 14, .4) 100%);
  opacity: 1;
}
/* Soft side pillars / frame glow so empty flanks aren't flat. */
.handheld-ambient::before,
.handheld-ambient::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 10%;
  width: min(18vw, 220px);
  opacity: .42;
  background:
    linear-gradient(180deg, transparent 0%, rgba(240, 196, 130, .06) 30%, rgba(240, 196, 130, .1) 50%, rgba(240, 196, 130, .06) 70%, transparent 100%),
    repeating-linear-gradient(
      180deg,
      transparent 0 18px,
      rgba(240, 210, 160, .04) 18px 19px
    );
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.handheld-ambient::before { left: 0; }
.handheld-ambient::after {
  right: 0;
  transform: scaleX(-1);
}

.handheld-stage {
  position: absolute;
  inset: auto 0 2% 0;
  height: min(46vh, 390px);
  pointer-events: none;
  z-index: 0;
}
.handheld-stage__glow {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: min(70vw, 760px);
  height: min(34vh, 260px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(245, 196, 124, .22), transparent 68%);
  filter: blur(2px);
}
.handheld-stage__floor {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(78vw, 920px);
  height: 48%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at center, rgba(18, 12, 18, .72), transparent 70%);
  opacity: .9;
}
.handheld-device {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(138px, .22fr) minmax(0, 1fr) minmax(138px, .22fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top top top"
    "dpad screen actions"
    "foot foot foot";
  gap: clamp(10px, 1.5vw, 20px);
  width: min(1180px, calc(100vw - 48px), calc((100dvh - 150px) * 2.05));
  aspect-ratio: 21 / 10;
  padding: clamp(16px, 2vw, 28px);
  color: #392c3a;
  background:
    radial-gradient(70% 100% at 0% 54%, rgba(255,255,255,.30), transparent 50%),
    radial-gradient(70% 100% at 100% 54%, rgba(255,255,255,.26), transparent 50%),
    linear-gradient(145deg, rgba(255,255,255,.34), transparent 28%),
    linear-gradient(165deg, #ede4d2 0%, #d2c4b4 46%, #b39f93 100%);
  border: 5px solid #5a4754;
  border-radius: clamp(34px, 4.8vw, 68px);
  box-shadow:
    0 0 0 5px #1b141d,
    0 28px 50px rgba(0, 0, 0, .45),
    0 8px 0 rgba(255, 255, 255, .08) inset,
    0 -10px 18px rgba(0, 0, 0, .12) inset;
  overflow: hidden;
  /* Use margin (not transform) so enter/exit transitions can reset transform safely. */
  margin-top: clamp(6px, 1.6vh, 20px);
}
.handheld-device__shoulders {
  position: absolute;
  z-index: 0;
  top: 9px;
  left: 6%;
  right: 6%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.handheld-device__shoulders i {
  width: clamp(48px, 7vw, 86px);
  height: clamp(7px, .8vw, 11px);
  border: 2px solid rgba(92, 73, 83, .54);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(101,78,85,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}
.handheld-device::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(clamp(28px, 4.2vw, 58px) - 12px);
  border: 1px solid rgba(255, 255, 255, .16);
  pointer-events: none;
  opacity: .55;
}
.handheld-device::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.16), transparent);
  pointer-events: none;
}
.handheld-device__top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 18px;
  padding: 0 4px 2px;
  color: #6a5564;
  font-size: clamp(8px, .8vw, 11px);
  letter-spacing: .12em;
}
.handheld-device__brand {
  color: #4c3d49;
  font-weight: bold;
}
.handheld-device__model {
  opacity: .82;
}
.handheld-device__led {
  width: 8px;
  height: 8px;
  background: #c86657;
  box-shadow: 0 0 0 2px #725563, 0 0 9px rgba(214, 102, 82, .72);
}
.handheld-screen {
  position: relative;
  z-index: 1;
  grid-area: screen;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(8px, 1vw, 14px);
  background:
    linear-gradient(180deg, #3a2f3c 0%, #241c28 100%);
  border: clamp(5px, .7vw, 9px) solid #4a3947;
  border-radius: clamp(14px, 1.6vw, 24px);
  box-shadow:
    inset 0 0 0 2px #1a1218,
    inset 0 18px 28px rgba(0, 0, 0, .28),
    0 10px 0 rgba(0, 0, 0, .18);
}
.handheld-screen__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 16px;
  padding: 0 3px 7px;
  color: #d8c0a1;
  font-size: clamp(7px, .7vw, 10px);
  letter-spacing: .1em;
}
.handheld-screen__label i { color: #97c477; font-style: normal; }
body.is-handheld-mode .handheld-screen .game-frame {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 3px solid #17121b;
  box-shadow: inset 0 0 0 3px #6f5966;
}
body.is-handheld-mode .handheld-screen #game-container {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
body.is-handheld-mode .handheld-screen #game-container canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
body.is-handheld-mode .scene-corner,
body.is-handheld-mode .object-dock { display: none; }
.handheld-screen__launch {
  position: absolute;
  z-index: 12;
  inset: clamp(30px, 4vw, 45px) clamp(8px, 1vw, 14px) clamp(8px, 1vw, 14px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  width: auto;
  padding: clamp(14px, 1.8vw, 20px);
  color: #f7e7c2;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(24, 18, 29, .06), rgba(24, 18, 29, .58)),
    radial-gradient(circle at 50% 42%, rgba(255, 214, 140, .10), transparent 48%);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  text-shadow: 2px 2px 0 #201622;
  transition: background 180ms ease, transform 160ms ease, filter 180ms ease;
}
.handheld-screen__launch span,
.handheld-screen__launch .handheld-screen__boot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #f0cf90;
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: .14em;
}
.handheld-screen__launch strong {
  font-size: clamp(16px, 1.8vw, 24px);
}
.handheld-screen__launch small {
  color: #a8d182;
  font-size: clamp(8px, .8vw, 11px);
  letter-spacing: .08em;
}
.handheld-screen__launch:hover,
.handheld-screen__launch:focus-visible {
  outline: none;
  filter: brightness(1.05);
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(24, 18, 29, .04), rgba(24, 18, 29, .66)),
    radial-gradient(circle at 50% 40%, rgba(255, 214, 140, .16), transparent 52%);
}
.handheld-left-controls {
  position: relative;
  grid-area: dpad;
  align-self: stretch;
  min-height: 0;
}
.handheld-dpad {
  position: absolute;
  left: 50%;
  bottom: 15%;
  width: clamp(68px, 8vw, 106px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  filter: drop-shadow(4px 5px 0 rgba(65,48,58,.4));
}
.handheld-dpad i,
.handheld-dpad b {
  position: absolute;
  display: block;
  background: linear-gradient(135deg, #716274, #403545);
  border: 3px solid #332a37;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.11), inset -3px -3px 0 rgba(0,0,0,.25);
}
.handheld-dpad i:nth-child(1), .handheld-dpad i:nth-child(2) { left: 31%; width: 38%; height: 33%; }
.handheld-dpad i:nth-child(1) { top: 0; }
.handheld-dpad i:nth-child(2) { bottom: 0; }
.handheld-dpad i:nth-child(3), .handheld-dpad i:nth-child(4) { top: 31%; width: 33%; height: 38%; }
.handheld-dpad i:nth-child(3) { left: 0; }
.handheld-dpad i:nth-child(4) { right: 0; }
.handheld-dpad b { inset: 31%; background: #564858; }
.handheld-stick {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(54px, 6.2vw, 82px);
  aspect-ratio: 1;
  border: 4px solid #5a4a54;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #92838c 0 7%, #4a3e49 9% 46%, #271f2b 48% 100%);
  box-shadow: 4px 5px 0 rgba(67,48,57,.34), inset 3px 4px 0 rgba(255,255,255,.13), inset -4px -5px 0 rgba(0,0,0,.3);
}
.handheld-stick::before {
  content: "";
  position: absolute;
  inset: 15%;
  border: 2px solid rgba(14, 10, 15, .72);
  border-radius: 50%;
}
.handheld-stick i {
  width: 46%;
  aspect-ratio: 1;
  border: 2px solid rgba(218,205,191,.18);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #9b8d96, #4a3d48 64%, #2a212d 66%);
  box-shadow: 0 2px 0 rgba(0,0,0,.28);
}
.handheld-stick b { display: none; }
.handheld-stick--left { left: 50%; top: 10%; transform: translateX(-50%); }
.handheld-system-button {
  display: grid;
  place-items: center;
  width: clamp(20px, 2.1vw, 28px);
  aspect-ratio: 1;
  color: #f1dfbc;
  border: 3px solid #493b46;
  border-radius: 6px;
  background: linear-gradient(145deg, #5f5360, #312934);
  box-shadow: 2px 3px 0 rgba(67,48,57,.32), inset 1px 1px 0 rgba(255,255,255,.12);
  font-size: clamp(12px, 1.5vw, 18px);
  font-weight: 700;
  line-height: 1;
}
.handheld-system-button--select { position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%); }
.handheld-actions {
  position: relative;
  z-index: 2;
  grid-area: actions;
  align-self: stretch;
  min-height: 0;
}
.handheld-speaker {
  position: absolute;
  top: 11%;
  right: 6%;
  width: min(76px, 54%);
  height: 22px;
  background: radial-gradient(circle, #715b65 35%, transparent 39%) 0 0 / 9px 9px;
  opacity: .72;
  transform: rotate(-16deg);
}
.handheld-system-button--plus { position: absolute; top: 12%; left: 9%; }
.handheld-face-buttons {
  position: absolute;
  top: 31%;
  right: 4%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, .9vw, 12px);
}
.handheld-button {
  display: grid;
  place-items: center;
  width: clamp(35px, 3.8vw, 54px);
  aspect-ratio: 1;
  padding: 0;
  color: #f7e4b6;
  border: 4px solid #523942;
  border-radius: 50%;
  box-shadow: 4px 5px 0 rgba(67,48,57,.48), inset 4px 4px 0 rgba(255,255,255,.18), inset -4px -4px 0 rgba(0,0,0,.24);
  font: inherit;
  font-size: clamp(13px, 1.55vw, 20px);
  line-height: 1;
  cursor: pointer;
}
.handheld-button--a { background: #b85e45; }
.handheld-button--b { background: #76586d; }
.handheld-button--x { background: #76916f; }
.handheld-button--y { background: #b28a56; }
.handheld-button--a:hover,
.handheld-button--a:focus-visible { background: #d87552; outline: 3px solid #f8dfa3; outline-offset: 2px; transform: translate(-1px, -1px); }
.handheld-button--a:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 rgba(67,48,57,.48), inset 4px 4px 0 rgba(0,0,0,.24); }
.handheld-stick--right { right: 10%; bottom: 7%; }
.handheld-device__foot {
  grid-area: foot;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 58px);
  color: #755a63;
  font-size: clamp(7px, .75vw, 10px);
  letter-spacing: .11em;
}

body.is-room-immersive .topbar { display: none; }
body.is-room-immersive .room-app,
body.is-room-immersive .room-section {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body.is-room-immersive .handheld-shell {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  place-items: initial;
}
body.is-room-immersive .handheld-device {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  grid-template-columns: none;
  grid-template-rows: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
body.is-room-immersive .handheld-ambient,
body.is-room-immersive .handheld-hero,
body.is-room-immersive .handheld-stage,
body.is-room-immersive .handheld-device__top,
body.is-room-immersive .handheld-dpad,
body.is-room-immersive .handheld-actions,
body.is-room-immersive .handheld-device__foot,
body.is-room-immersive .handheld-screen__label,
body.is-room-immersive .handheld-screen__launch { display: none !important; }
/* Pre-paint the ambient layers under the exit cover. They are invisible while
   the room is fullscreen, but ready before the handheld shell comes back. */
body.is-room-immersive.is-handheld-prerender .handheld-ambient,
body.is-room-immersive.is-handheld-prerender .handheld-stage {
  display: block !important;
  visibility: visible;
  opacity: 0;
  will-change: opacity;
}
body.is-handheld-mode.is-room-transition-exit .handheld-ambient,
body.is-handheld-mode.is-room-transition-exit .handheld-stage {
  opacity: 1;
  transition: opacity 320ms ease-out;
}
/* The home heading belongs to the completed handheld view. Keep it out of the
   shrinking exit mask, then let it settle in only after transition cleanup. */
body.is-handheld-mode.is-room-transitioning.is-room-transition-exit .handheld-hero {
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: none;
}
body.is-room-immersive .handheld-screen {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
body.is-room-immersive .handheld-screen .game-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  transform: none !important;
  filter: none;
  opacity: 1;
}
body.is-room-immersive #game-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
}
body.is-room-immersive #game-container canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
/* Console-to-room cinematic: black veil expands from the handheld screen, the
   shell dissolves, then the room is revealed underneath (async-area inspired). */
.handheld-transition-veil {
  position: fixed;
  inset: 0;
  z-index: 140;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms ease;
}
.handheld-transition-veil.is-visible {
  opacity: 1;
  visibility: visible;
}
.handheld-transition-veil.is-resetting {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}
.handheld-transition-veil.is-resetting .handheld-transition-veil__panel,
.handheld-transition-veil.is-resetting .handheld-transition-veil__snapshot,
.handheld-transition-veil.is-resetting .handheld-transition-veil__label {
  opacity: 0 !important;
  transition: none !important;
}
.handheld-transition-veil.is-label-soft .handheld-transition-veil__label {
  opacity: 0;
  transform: translate(-50%, -46%) scale(.98);
  transition: opacity 260ms ease, transform 260ms ease;
}
.handheld-transition-veil__label {
  transition: opacity 220ms ease, transform 220ms ease;
}
.handheld-transition-veil__panel {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(68, 48, 56, .55), rgba(8, 6, 10, .98) 62%),
    linear-gradient(180deg, #1a1218 0%, #0a080d 100%);
  border: 2px solid rgba(232, 196, 138, .28);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .55),
    0 18px 48px rgba(0, 0, 0, .45),
    inset 0 0 40px rgba(0, 0, 0, .55);
  transition:
    transform 460ms cubic-bezier(.2, .7, .18, 1),
    border-radius 460ms cubic-bezier(.2, .7, .18, 1),
    opacity 800ms cubic-bezier(.22, .7, .2, 1),
    border-color 400ms ease,
    box-shadow 400ms ease;
  transform-origin: 0 0;
  contain: layout paint style;
  backface-visibility: hidden;
  will-change: auto;
}
.handheld-transition-veil.is-visible .handheld-transition-veil__panel { will-change: transform, opacity; }
.handheld-transition-veil__snapshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  image-rendering: pixelated;
  transform: scale(1.025);
  transition: opacity 150ms ease-out, transform 460ms cubic-bezier(.2, .7, .18, 1);
}
.handheld-transition-veil.has-snapshot .handheld-transition-veil__snapshot { opacity: 1; }
.handheld-transition-veil.has-snapshot.is-fullscreen .handheld-transition-veil__snapshot { transform: scale(1); }
.handheld-transition-veil.has-snapshot.is-fading .handheld-transition-veil__snapshot {
  opacity: 0;
  transition: opacity 650ms cubic-bezier(.22, .7, .2, 1);
}
.handheld-transition-veil.has-snapshot .handheld-transition-veil__grain,
.handheld-transition-veil.has-snapshot .handheld-transition-veil__scan { opacity: .28; }
.handheld-transition-veil.is-fullscreen .handheld-transition-veil__panel {
  border-color: transparent;
  box-shadow: none;
}
.handheld-transition-veil.is-solid .handheld-transition-veil__panel {
  opacity: 1;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(48, 34, 40, .72), rgba(6, 4, 8, 1) 58%),
    linear-gradient(180deg, #120d12 0%, #070509 100%);
}
.handheld-transition-veil.is-fading .handheld-transition-veil__panel {
  opacity: 0;
  border-color: transparent;
  box-shadow: none;
  transition:
    opacity 800ms cubic-bezier(.22, .7, .2, 1),
    border-color 440ms ease,
    box-shadow 440ms ease;
}
.handheld-transition-veil__grain,
.handheld-transition-veil__scan,
.handheld-transition-veil__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.handheld-transition-veil__grain {
  opacity: .18;
  background-image:
    radial-gradient(rgba(255, 236, 196, .14) 0.6px, transparent 0.7px),
    radial-gradient(rgba(0, 0, 0, .28) 0.7px, transparent 0.8px);
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 1px 2px;
  animation: handheld-veil-grain 520ms steps(2) infinite;
}
.handheld-transition-veil__scan {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 221, 160, .05) 46%,
    rgba(255, 221, 160, .14) 50%,
    rgba(255, 221, 160, .05) 54%,
    transparent 100%
  );
  background-size: 100% 220%;
  animation: handheld-veil-scan 760ms linear infinite;
  opacity: .48;
}
.handheld-transition-veil__glow {
  background:
    radial-gradient(circle at 50% 42%, rgba(240, 196, 120, .22), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(120, 70, 84, .28), transparent 48%);
}
.handheld-transition-veil__label {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 8px;
  min-width: min(72vw, 280px);
  padding: 14px 18px;
  color: #f3d9a2;
  text-align: center;
  letter-spacing: .12em;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(34, 24, 32, .22), rgba(16, 11, 16, .55));
  border: 2px solid rgba(232, 196, 138, .28);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  text-shadow: 2px 2px 0 rgba(18, 11, 16, .85);
}
.handheld-transition-veil__label small {
  color: #b89b8d;
  font-size: 9px;
}
.handheld-transition-veil__label strong {
  font-size: clamp(12px, 2.2vw, 16px);
  font-weight: 700;
}
body.is-room-transition-prep .handheld-screen__launch {
  opacity: 0;
  pointer-events: none;
  transform: scale(.96);
  filter: brightness(1.15);
  transition: opacity 160ms ease-out, transform 180ms ease-out, filter 180ms ease-out;
}
body.is-room-transition-prep .handheld-screen__label {
  opacity: .3;
  transition: opacity 160ms ease-out;
}
body.is-room-transition-prep .handheld-device__led {
  animation: handheld-boot-pulse 180ms steps(2) both;
}
body.is-room-transitioning {
  overflow: hidden;
}
body.is-room-transitioning .handheld-device {
  transition:
    opacity 400ms cubic-bezier(.4, 0, .2, 1),
    transform 400ms cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}
body.is-room-transition-mask .handheld-device,
body.is-room-immersive.is-room-transitioning:not(.is-room-transition-reveal) .handheld-device {
  opacity: 0;
  filter: none;
  transform: scale(.985);
  pointer-events: none;
}
/* Once reveal starts, the fullscreen room's parent must be visible. Keeping
   this at opacity: 0 until finish() was the source of the final hard pop. */
body.is-room-immersive.is-room-transition-reveal .handheld-device {
  opacity: 1;
  filter: none;
  transform: none;
  pointer-events: none;
  transition:
    opacity 800ms cubic-bezier(.22, .7, .2, 1),
    transform 800ms cubic-bezier(.22, .7, .2, 1);
}
/* Content crossfade: keep the room fully covered until size settles, then ease in. */
body.is-room-transitioning .game-frame,
body.is-room-transitioning #game-container {
  transition: opacity 800ms cubic-bezier(.22, .7, .2, 1);
  will-change: opacity;
}
body.is-room-content-dim .game-frame,
body.is-room-content-dim #game-container {
  opacity: .42;
  filter: brightness(.62) saturate(.85);
}
body.is-room-content-hidden .game-frame,
body.is-room-content-hidden #game-container {
  opacity: 0 !important;
  filter: brightness(.35) saturate(.7);
  /* No transform during transition: scale changes fight Phaser resize and flash. */
  transform: none !important;
}
body.is-room-content-visible .game-frame,
body.is-room-content-visible #game-container {
  opacity: 1;
  filter: none;
  transform: none !important;
}
body.is-room-transition-reveal .game-frame,
body.is-room-transition-reveal #game-container {
  animation: none;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
/* Enter reveal is veil-only: keep the live room fully painted underneath. */
body[data-room-transition="enter"].is-room-transitioning .game-frame,
body[data-room-transition="enter"].is-room-transitioning #game-container {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
/* The black cover and the room exposure now crossfade together, rather than
   revealing a fully bright room in a single visual step. */
body.is-room-transition-reveal.is-room-content-revealing .game-frame {
  opacity: .56 !important;
  filter: none !important;
}
body.is-room-transition-reveal.is-room-content-revealing #game-container {
  opacity: 1 !important;
  filter: none !important;
}
body.is-room-immersive:not(.is-room-transitioning) .game-frame,
body.is-room-immersive:not(.is-room-transitioning) #game-container,
body.is-handheld-mode:not(.is-room-transitioning) .game-frame,
body.is-handheld-mode:not(.is-room-transitioning) #game-container {
  animation: none;
  transform: none !important;
  filter: none;
  opacity: 1;
}
body.is-room-transition-exit.is-room-content-hidden .handheld-device {
  opacity: 0;
  filter: none;
  transform: none;
}
body.is-room-transition-exit.is-room-content-visible .handheld-device {
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity 800ms cubic-bezier(.22, .7, .2, 1);
}
/* The exterior night background stays painted under the transition cover.
   Removing it here made the side scenery appear only after enter completed. */
body.is-room-transition-exit.is-room-transition-active .handheld-device {
  opacity: 1;
  filter: none;
  transform: none;
}
body.is-handheld-mode.is-room-transitioning .handheld-screen__launch {
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease 220ms;
}
body.is-handheld-mode.is-room-transition-active .handheld-screen__launch {
  opacity: 1;
  pointer-events: auto;
}
@keyframes handheld-boot-pulse {
  0% { box-shadow: 0 0 0 2px #725563, 0 0 0 rgba(214, 102, 82, 0); }
  100% { box-shadow: 0 0 0 2px #725563, 0 0 12px rgba(255, 222, 136, .95); }
}
@keyframes handheld-veil-grain {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-1px, 1px); }
  100% { transform: translate(1px, -1px); }
}
@keyframes handheld-veil-scan {
  0% { background-position: 0 -40%; }
  100% { background-position: 0 140%; }
}
@keyframes handheld-room-reveal {
  0% {
    opacity: 0;
    filter: brightness(.5) saturate(.75);
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

body.is-motion-reduced .handheld-transition-veil,
body.is-motion-reduced .handheld-transition-veil__panel,
body.is-motion-reduced.is-room-transition-prep .handheld-screen__launch,
body.is-motion-reduced.is-room-transitioning .handheld-device,
body.is-motion-reduced.is-room-transitioning .game-frame,
body.is-motion-reduced.is-room-transitioning #game-container,
body.is-motion-reduced.is-room-transition-reveal .game-frame,
body.is-motion-reduced.is-handheld-mode.is-room-transitioning .handheld-screen__launch {
  animation: none !important;
  transition: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}
body.is-motion-reduced .handheld-transition-veil {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 720px) {
  body.is-handheld-mode .room-app { padding: 10px; }
  body.is-handheld-mode .handheld-shell { gap: 10px; padding-top: 2px; }
  .handheld-hero { gap: 5px; min-height: 6.4rem; }
  .handheld-hero__title { font-size: clamp(22px, 7vw, 30px); letter-spacing: .06em; }
  .handheld-hero__lead { font-size: 11px; line-height: 1.55; }
  .handheld-device {
    grid-template-columns: minmax(64px, .18fr) minmax(0, 1fr) minmax(84px, .24fr);
    gap: 8px;
    width: min(100%, calc((100dvh - 20px) * 1.5));
    aspect-ratio: 16 / 10;
    padding: 12px;
    border-width: 4px;
    border-radius: 24px;
  }
  .handheld-device__top { gap: 7px; font-size: 7px; }
  .handheld-device__model { display: none; }
  .handheld-device__led { width: 6px; height: 6px; }
  .handheld-screen { padding: 5px; border-width: 5px; border-radius: 10px; }
  .handheld-screen__label { min-height: 12px; padding-bottom: 4px; font-size: 6px; }
  .handheld-screen__launch { inset: 24px 5px 5px; gap: 6px; padding: 9px; }
  .handheld-dpad { width: 52px; }
  .handheld-actions { gap: 7px; }
  .handheld-speaker { height: 14px; background-size: 6px 6px; }
  .handheld-button { width: 34px; border-width: 3px; font-size: 15px; }
  .handheld-button small { display: none; }
  .handheld-device__foot { gap: 18px; font-size: 6px; }
}

/* Mobile presentation: portrait opens with a deliberate rotate cue; landscape
   turns the landing into a wider title-and-console composition. */
.mobile-orientation-hint,
.mobile-room-controls {
  display: none;
}

@media (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  .mobile-orientation-hint {
    position: fixed;
    z-index: 260;
    inset: 0;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 28px;
    color: #f4dfb5;
    text-align: center;
    background:
      radial-gradient(circle at 50% 42%, rgba(137, 83, 104, .35), transparent 30%),
      rgba(13, 9, 16, .94);
    backdrop-filter: blur(10px);
  }
  .mobile-orientation-hint__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 2px solid #e7c887;
    border-radius: 16px;
    color: #f4d69a;
    font-size: 36px;
    line-height: 1;
    box-shadow: inset 0 0 0 4px rgba(43, 28, 37, .9), 0 0 28px rgba(234, 186, 112, .22);
    animation: mobile-orientation-turn 1.8s ease-in-out infinite;
  }
  .mobile-orientation-hint strong { font-size: 18px; letter-spacing: .08em; }
  .mobile-orientation-hint small { color: #bda58f; font-size: 9px; letter-spacing: .16em; }
  body:not(.layout-editor-active) .mobile-orientation-hint { display: grid; }

  body.is-room-immersive .mobile-room-controls {
    position: absolute;
    z-index: 70;
    inset: 0;
    display: block;
    pointer-events: none;
  }
  .mobile-room-joystick {
    position: absolute;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    width: clamp(88px, 16vw, 124px);
    aspect-ratio: 1;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .mobile-room-joystick__ring,
  .mobile-room-joystick__thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
  }
  .mobile-room-joystick__ring {
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(244, 218, 166, .62);
    background:
      radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .2), transparent 26%),
      rgba(31, 22, 32, .5);
    box-shadow: inset 0 0 0 6px rgba(9, 6, 11, .28), 0 4px 16px rgba(0, 0, 0, .28);
  }
  .mobile-room-joystick__thumb {
    width: 46%;
    height: 46%;
    border: 2px solid #f2d49a;
    background: radial-gradient(circle at 35% 28%, #f8e7bf, #c88f62 70%);
    box-shadow: 0 3px 0 rgba(38, 23, 30, .7), inset 0 0 0 3px rgba(255, 255, 255, .16);
    transform: translate3d(-50%, -50%, 0);
    transition: transform 80ms ease-out;
  }
  .mobile-room-joystick.is-active .mobile-room-joystick__thumb { transition-duration: 0ms; }
  .mobile-room-joystick small {
    position: absolute;
    left: 50%;
    top: calc(100% + 7px);
    transform: translateX(-50%);
    color: rgba(244, 222, 181, .8);
    font-size: 8px;
    letter-spacing: .18em;
    text-shadow: 1px 1px 0 rgba(15, 8, 15, .8);
  }
  body.is-room-transitioning .mobile-room-controls,
  body.layout-editor-active .mobile-room-controls { display: none !important; }
}

@media (hover: none) and (pointer: coarse) and (max-width: 1024px) and (orientation: landscape) {
  .mobile-orientation-hint { display: none !important; }
  body.is-handheld-mode .room-app { padding: 8px clamp(16px, 4vw, 42px); }
  body.is-handheld-mode .handheld-shell {
    grid-template-columns: minmax(168px, .32fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: clamp(16px, 3vw, 42px);
    max-width: 1280px;
    padding: 0;
  }
  body.is-handheld-mode .handheld-hero {
    justify-items: start;
    align-content: center;
    width: 100%;
    min-height: 0;
    max-width: 320px;
    padding: 0;
    text-align: left;
  }
  body.is-handheld-mode .handheld-hero__lead,
  body.is-handheld-mode .handheld-hero__lead[data-typewriter] {
    width: 100%;
    max-width: 18em;
    margin-inline: 0;
    text-align: left;
  }
  body.is-handheld-mode .handheld-device {
    justify-self: end;
    width: min(100%, calc((100dvh - 16px) * 2.05));
    margin-top: 0;
  }
}

@keyframes mobile-orientation-turn {
  0%, 100% { transform: rotate(0deg); }
  36% { transform: rotate(-90deg); }
  54% { transform: rotate(-90deg); }
}

body.is-motion-reduced .mobile-orientation-hint__icon { animation: none; }