:root {
  color-scheme: dark;
  --bg: #07080a;
  --panel: #10141a;
  --ink: #e8eadf;
  --muted: #8b9286;
  --accent: #c9a45c;
  --line: #232a32;
  --voice: #7ec8c8;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(1200px 800px at 50% 0%, #141820, var(--bg));
  color: var(--ink);
}

.app {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  gap: 10px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 4px 0;
}

.title {
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.clock { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 13px; }
.find {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.find:active { background: var(--accent); color: #1a1408; }
.hidden { display: none !important; }
.inspect-copy {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
canvas { cursor: pointer; }

.map-wrap {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: #0b0d10;
}

.nav {
  position: absolute;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 20, 26, 0.82);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}
.nav.n { top: 8px; left: 50%; transform: translateX(-50%); }
.nav.s { bottom: 8px; left: 50%; transform: translateX(-50%); }
.nav.w { left: 8px; top: 50%; transform: translateY(-50%); }
.nav.e { right: 8px; top: 50%; transform: translateY(-50%); }
.nav:active { background: #c9a45c; color: #111; }

.player-direction-dot {
  position:absolute; left:0; top:0; z-index:3;
  width:6px; height:6px; border-radius:50%;
  background:#ffda44; box-shadow:0 0 0 1px #0b0d10;
  pointer-events:none;
}

.chunk-label {
  pointer-events: none;
  position: absolute;
  right: 12px;
  bottom: 12px;
  max-width: 62%;
  text-align: right;
  font-size: 12px;
  color: #d7c38a;
  letter-spacing: 0.04em;
}

.status {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.action-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

#actionLabel {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.activity-loader {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.activity-loader span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: response-pulse 900ms infinite ease-in-out;
}

.activity-loader span:nth-child(2) { animation-delay: 150ms; }
.activity-loader span:nth-child(3) { animation-delay: 300ms; }

.meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 4px 10px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

meter { width: 100%; height: 8px; }

.log {
  flex: 0 0 auto;
  height: clamp(110px, 20vh, 180px);
  min-height: 110px;
  max-height: 180px;
  overflow: auto;
  padding: 8px 4px;
  font-size: 14px;
  line-height: 1.45;
  color: #d5d8cc;
}

.log p { margin: 0 0 8px; }
.log .voice-line { color: var(--voice); font-style: italic; }
.log .being-line { color: var(--ink); }

.voice {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}

/* The portrait already names the audience; retain the input label for assistive technology. */
.voice-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.voice-row { display: flex; align-items: center; gap: 8px; }
.voice-length {display:block;margin-top:5px;color:var(--muted);font-size:11px;text-align:right}

.response-loader {
  display: flex;
  width: fit-content;
  margin: 10px 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 28px;
}

.response-loader.hidden { display: none; }

.response-loader span { background: var(--voice); }

.response-loader span:nth-child(2) { animation-delay: 150ms; }
.response-loader span:nth-child(3) { animation-delay: 300ms; }

@keyframes response-pulse {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

input {
  flex: 1;
  border: 0;
  background: #0b0d10;
  color: var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}

button[type="submit"] {
  border: 0;
  background: var(--accent);
  color: #1a1408;
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.find[aria-pressed="true"] { background: #27352f; border-color: #7fc8a9; color: #c9eddf; }

.meters label { display: flex; align-items: center; gap: 6px; }
.meters meter { max-width: 70px; height: 6px; }
.log .system-line { color: var(--muted); font-size: 12px; }

button[type="submit"]:disabled { opacity: 0.4; cursor: default; }
.money { margin: 4px 0; color: #d5b654; font-variant-numeric: tabular-nums; }
.inventory, .market-goods { color: var(--muted); font-size: 12px; line-height: 1.6; }
.market-goods { white-space: pre-line; }

.status-tools { display:flex; gap:6px; margin:8px 0; }
.status-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:12px; }
.status-tabs button { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:transparent; font:inherit; font-size:11px; cursor:pointer; }
.status-tabs button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.status-tabs button[aria-selected="true"] { color:var(--accent); border-color:#756a48; background:#d7c38a0b; }
.status-tabs button:hover:not(:disabled) { color:var(--ink); }
.status-tabs button:focus-visible { outline:2px solid var(--voice); outline-offset:2px; }
.status-tabs button:disabled { opacity:.35; cursor:default; }
.status-category summary { position:relative; }
.status-has-update::after { content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:#d7c38a; margin-left:6px; vertical-align:middle; }
.status-tabs .status-has-update::after { position:absolute; right:8px; top:8px; margin:0; }
.status-tools input { min-width:0; flex:1; background:var(--bg); border:1px solid var(--line); color:var(--ink); border-radius:5px; padding:7px; font:inherit; font-size:12px; }
.status-tools button { flex:none; border:1px solid var(--line); color:var(--muted); background:transparent; border-radius:5px; font:inherit; font-size:11px; padding:5px 7px; cursor:pointer; }
.status-tools :focus-visible, .status-category summary:focus-visible { outline:2px solid var(--voice); outline-offset:2px; }
.status-category { border-top:1px solid var(--line); }
.status-category summary { cursor:pointer; padding:9px 2px; font-size:13px; color:var(--ink); }
.status-category summary small { float:right; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.status-content { padding:0 4px 10px; }
.status-rows { overflow:visible; }
.status-variable { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:12px; }
.status-variable-name { color:var(--muted); overflow-wrap:anywhere; }
.status-variable-value { color:var(--ink); text-align:right; max-width:225px; overflow-wrap:anywhere; white-space:pre-wrap; font-variant-numeric:tabular-nums; }
.status-variable small { grid-column:1/-1; color:var(--muted); font-size:10px; }
.status-variable meter { grid-column:1/-1; max-width:100%; }
.status-freshness,.status-empty { color:var(--muted); font-size:10px; margin:6px 0; }

.meters output { font-size:10px; font-variant-numeric:tabular-nums; min-width:34px; }
#statusCategories { max-height:min(38vh,360px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:4px; }
.status-legend { color:var(--muted); font-size:10px; line-height:1.4; margin:3px 0; }

/* The oracle uses the same composer, with a distinct audience and conversation. */
.oracle-toggle { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; padding:9px !important; border:1px solid #526459 !important; border-radius:10px !important; background:#131d19 !important; color:#b5cbb9 !important; cursor:pointer; }
.oracle-toggle svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.oracle-toggle:hover,.oracle-toggle:focus-visible {color:#e3f1df !important;border-color:#b2d2b9 !important;outline:2px solid #5f8066;outline-offset:2px}
.oracle-mode {border-color:#4b6558}
.voice-portraits {display:grid;margin-bottom:12px}
.oracle-portrait-row {grid-area:1 / 1;display:flex;align-items:center;gap:14px;min-width:0}
.portrait-inactive {visibility:hidden;pointer-events:none}
.inner-voice-frame {border-color:#77602b;box-shadow:0 0 20px #e9bd3918}
.oracle-caption.inner-voice-caption strong {color:#e9dca3}
.oracle-caption.inner-voice-caption span {color:#b8ac87}
.inner-voice-glow {animation:inner-voice-breathe 6s ease-in-out infinite}
@keyframes inner-voice-breathe {50% {opacity:.5}}
.inner-voice-orb {transform-origin:50px 50px;animation:inner-voice-organic 7s ease-in-out infinite}
.inner-voice-electric {animation:inner-voice-current 5s ease-in-out infinite}
@keyframes inner-voice-organic {0%,100% {transform:scale(1)}35% {transform:scale(1.035,.97) rotate(-3deg)}70% {transform:scale(.98,1.03) rotate(2deg)}}
@keyframes inner-voice-current {0%,100% {opacity:.15}40% {opacity:.8}70% {opacity:.3}}
.alien-frame {width:86px;height:86px;flex:0 0 86px;border:1px solid #526357;border-radius:5px;overflow:hidden;box-shadow:0 0 20px #89b99e12;position:relative}
.alien-frame svg {display:block;width:100%;height:100%}
.alien-frame:after {content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#030a0612 3px 4px)}
.oracle-caption {min-width:0;display:flex;flex-direction:column;gap:6px;max-width:220px}
.oracle-caption strong {font-size:17px;color:#c9dcc7;font-weight:normal;letter-spacing:.08em}
.oracle-caption span {color:#8f9f91;font-size:12px;line-height:1.5}
.alien-body {transform-origin:50px 90px;animation:alien-breathe 5s ease-in-out infinite}
.alien-eyes {transform-origin:50px 44px;animation:alien-blink 7s infinite}
.speaking .alien-mouth {animation:alien-speak .32s ease-in-out infinite;transform-origin:50px 69px}
.thinking .alien-frame {box-shadow:0 0 18px #9cbfaf35}
.oracle-log {border-color:#354a3d}
.oracle-line {color:#cbdcc7}
.oracle-intro {color:#8f9f91;font-size:13px}
.oracle-place-link {background:transparent;color:#bad4be;border:1px solid #4e6654;border-radius:6px;padding:5px 9px;font:inherit;font-size:12px;cursor:pointer;margin:0 0 10px}
@keyframes alien-breathe {50% {transform:translateY(1.2px) rotate(.5deg)}}
@keyframes alien-blink {0%,44%,48%,100% {transform:scaleY(1)}46% {transform:scaleY(.08)}}
@keyframes alien-speak {50% {transform:scaleY(2.5)}}
@keyframes oracle-enter {from {opacity:0;transform:translateY(4px)}to {opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.alien-body,.alien-eyes,.speaking .alien-mouth,.inner-voice-glow,.inner-voice-orb,.inner-voice-electric {animation:none}}

.voice-row input {min-width:0;width:0;padding-inline:8px}
.voice-row input::placeholder,.status-tools input::placeholder {font-size:12px;color:var(--muted);opacity:1}

#actionLabel {min-width:0;overflow:hidden;text-overflow:ellipsis}
#beingName,.activity-loader {flex-shrink:0}
.status-row {gap:8px}

.music-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 7px; }
.music-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.music-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.top { flex-wrap: wrap; gap: 8px; }
.top-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

.status-list-hint { color:var(--muted); font-size:11px; line-height:1.4; margin:0 0 6px; }
#inspectCopy, #workDetails { display:none; }

.status-item {display:block;padding:9px 0}.status-item .status-variable-name {display:block;color:#d5dfd3}.status-item .status-variable-value {display:block;text-align:left;font-size:12px;white-space:normal;margin-top:5px;color:#97aa9d}

/* Player controls stay beside the title; world controls have their own row. */
.top {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.top .sub {overflow-wrap:anywhere}
.player-actions {display:flex;gap:6px}
.top-actions {grid-column:1 / -1;flex-wrap:nowrap;width:100%;gap:8px}
.top-actions .clock {margin-left:auto;white-space:pre; text-align:right;line-height:1.45}
.header-icon {display:grid;place-items:center;width:38px;height:38px;padding:9px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}
.header-icon svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.header-icon:hover,.dialog-close:hover {color:var(--accent);background:var(--panel)}
.header-icon:focus-visible,.dialog-close:focus-visible,.language-select:focus-visible {outline:2px solid var(--voice);outline-offset:3px}
.player-dialog {box-sizing:border-box;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:22px;border:1px solid #394039;border-radius:16px;background:var(--panel);color:var(--ink);box-shadow:0 18px 70px #0008}
.player-dialog::backdrop {background:#030609b8}
.dialog-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.dialog-heading h2 {font-size:21px;font-weight:normal;margin:0}
.dialog-close {border:0;background:transparent;color:var(--muted);font:inherit;font-size:26px;width:36px;height:36px;cursor:pointer;border-radius:8px}
.setting-row {display:flex;justify-content:space-between;align-items:center;gap:20px}
.setting-row + .setting-row {margin-top:18px}
.setting-row input[type="checkbox"] {flex:none;width:18px;height:18px;padding:0;margin:0;accent-color:var(--accent);cursor:pointer}
.language-select {font:inherit;font-size:15px;background:var(--bg);color:var(--ink);border:1px solid #394039;border-radius:8px;padding:9px 12px;cursor:pointer;max-width:65%}
.profile-account {color:var(--accent);margin:0 0 6px}
.profile-note {font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 22px}
.profile-details {margin:0}
.profile-details>div {display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 0;border-top:1px solid var(--line)}
.profile-details dt {color:var(--muted);font-size:14px;flex-shrink:0}
.profile-details dd {margin:0;text-align:right;overflow-wrap:anywhere}
#profileBalance {color:var(--accent);font-variant-numeric:tabular-nums}

#oraclePortrait .alien-frame {background:radial-gradient(ellipse at 30% 25%,#314d49,#101d27 85%);perspective:240px}
.oracle-head-image {position:absolute;display:block;width:105%;height:105%;left:-2.5%;top:0;transform-origin:65% 88%;animation:oracle-head-motion 10.8s ease-in-out infinite;will-change:transform}
@keyframes oracle-head-motion {
  0%,100% {transform:rotate(-1.5deg) rotateY(-5deg) translateY(1px)}
  28% {transform:rotate(1.8deg) rotateY(3deg) translateY(-1px)}
  61% {transform:rotate(-.4deg) rotateY(-2deg) translateX(-1px)}
  82% {transform:rotate(-2deg) rotateY(-6deg) translateY(.5px)}
}
.oracle-blink-frame {opacity:0;animation:oracle-natural-blink 5.8s ease-in-out infinite}
@keyframes oracle-natural-blink {
  0%,18%,25%,100% {opacity:0}
  20%,22.5% {opacity:1}
}
.portrait-inactive *, .portrait-inactive .oracle-head-image {animation-play-state:paused}
.inner-voice-frame:after,#oraclePortrait .alien-frame:after {display:none}
@media(prefers-reduced-motion:reduce){.oracle-head-image,.oracle-blink-frame {animation:none;will-change:auto}}

/* Recent encounters live inside the Bonds inspector category. */
.conversation-notifications { margin:0 0 10px; }
.conversation-notifications[hidden], .conversation-panel[hidden] { display:none; }
.conversation-toggle { position:relative; display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; }
.conversation-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.conversation-dot { display:none; position:absolute; right:10px; top:10px; width:6px; height:6px; border-radius:50%; background:#d7c38a; }
.conversation-toggle.has-unread { color:#d7c38a; animation:conversation-notice 3s ease-in-out infinite; }
.has-unread .conversation-dot { display:block; }
.conversation-panel { position:relative; margin-top:8px; width:100%; box-sizing:border-box; padding:12px; border:1px solid #525747; border-radius:12px; background:var(--panel); box-shadow:0 10px 35px #0008; }
.conversation-panel header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.conversation-panel header strong { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.conversation-panel header button { margin-left:auto; padding:2px 8px; font-size:20px; }
.conversation-panel button { color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.conversation-panel nav { display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; }
.conversation-panel nav button { white-space:nowrap; padding:5px 8px; font-size:12px; }
.conversation-panel nav button.has-unread { border-color:#a29670; }
.conversation-panel nav button[aria-pressed=true] { background:#d7c38a20; }
.conversation-body { max-height:min(260px,35dvh); overflow:auto; overflow-wrap:anywhere; color:#afb6ac; }
.conversation-body article + article { border-top:1px solid var(--line); }
.conversation-body p { margin:7px 0; font-size:13px; line-height:1.5; }
.conversation-body strong { color:#d5d8cc; font-weight:500; }
.conversation-body .nonverbal { font-style:italic; }
@keyframes conversation-notice { 50% { box-shadow:0 0 10px #d7c38a30; } }
@media(prefers-reduced-motion:reduce) { .conversation-toggle.has-unread { animation:none; } }

/* Unseen changes remain legible until briefly viewed, without interaction. */
.status-item-updated { background:rgba(215,195,138,.13); box-shadow:inset 2px 0 rgba(215,195,138,.45); }
.status-item-updated:focus-visible { outline:1px solid #d7c38a; outline-offset:2px; }

[data-change-direction] { position:relative; }
[data-change-direction]::before { content:attr(data-change-direction); position:absolute; right:calc(100% + 3px); top:50%; transform:translateY(-50%); color:#d7c38a; font-size:11px; font-weight:600; line-height:1; }

.status-tabs .conversation-unread { box-shadow:inset 0 0 12px #d7c38a18; }
.status-tabs .conversation-unread::after { content:""; position:absolute; right:8px; top:8px; width:4px; height:4px; margin:0; border-radius:50%; background:#d7c38a; }

.conversation-notice { color:var(--muted); font-size:12px; }
.conversation-notice:empty { display:none; }
.favourite-entity { flex:0 0 auto; padding:2px 5px; border:0; background:transparent; color:var(--muted); font-size:20px; cursor:pointer; }
.favourite-entity[aria-pressed=true] { color:#d7c38a; }
.favourite-row { display:flex; gap:8px; margin:8px 0; }
.favourite-row button { padding:8px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink); cursor:pointer; }
.favourite-row button:first-child { flex:1; min-width:0; text-align:left; overflow-wrap:anywhere; }
#favouritesNotice:empty { display:none; }

.region-search {padding:8px 0 12px;font-size:12px;color:#a9b9ad}
.region-search-row {display:flex;gap:8px;margin-top:6px}
.region-search-row input {min-width:0;flex:1;font-size:12px;padding:8px 10px}
.region-search-row button {font-size:12px;padding:6px 10px}
.region-results {display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;max-height:110px;overflow:auto}
.region-results .oracle-place-link {margin:0}

#friendInvites { border-top: 1px solid #ffffff20; padding-top: .5rem; margin-top: 1rem; }
#friendInvites p { font-size: .85rem; color: var(--muted, #a6b4b6); }
#inviteForm, #inviteResult { display: grid; gap: .65rem; }
#inviteResult[hidden], #friendInvites[hidden] { display: none; }
#friendInvites input, #friendInvites select { width: 100%; min-width: 0; box-sizing: border-box; background: #101b20; color: #e5ecea; padding: .6rem; border: 1px solid #52625b; border-radius: .4rem; }
.player-dialog { max-height: 85dvh; overflow-y: auto; }

#inviteCopy { border: 1px solid #52625b; border-radius: .4rem; padding: .65rem; background: #26332e; color: #e5ecea; cursor: pointer; }

/* Keep the same status DOM/state on desktop and inside the mobile dialog. */
.chat-panel { display:flex; flex-direction:column; gap:10px; min-width:0; }
.mobile-status-toggle { display:none; position:relative; }
.mobile-status-toggle.status-has-update::after { position:absolute; right:5px; top:5px; margin:0; }
.mobile-status-dialog { border:0; color:var(--ink); background:var(--panel); padding:0; }
.mobile-status-dialog::backdrop { background:var(--bg); }
@media (max-width:700px), (max-height:500px) and (pointer:coarse) {
  html:has(body.game-page), body.game-page { height:100%; overflow:hidden; overscroll-behavior:none; }
  .game-page .app { position:fixed; top:var(--viewport-top,0px); left:0; right:0; height:var(--viewport-height,100dvh); min-height:0; max-width:none; display:grid; grid-template-rows:auto minmax(90px,1fr) minmax(160px,.9fr); gap:6px; overflow:hidden; padding:calc(6px + env(safe-area-inset-top)) 8px calc(6px + env(safe-area-inset-bottom)); }
  .mobile-status-toggle { display:grid; }
  .game-page .top { padding:0 2px; gap:3px 6px; }
  .game-page .title { font-size:18px; }
  .game-page .sub { font-size:11px; max-width:44vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .game-page .header-icon { width:40px; height:40px; }
  .game-page .player-actions { gap:3px; }
  .game-page .top-actions { gap:7px; }
  .game-page .clock { font-size:11px; }
  .game-page .map-wrap { min-height:0; aspect-ratio:auto; width:100%; border-radius:12px; }
  .chat-panel { min-height:0; gap:4px; overflow:hidden; }
  .chat-panel .log { flex:1 1 0; height:auto; min-height:0; max-height:none; padding:4px 6px; font-size:16px; line-height:1.5; overscroll-behavior:contain; }
  .chat-panel > .inspect-copy { flex:none; margin:0 4px; font-size:12px; }
  .chat-panel .voice { flex:none; padding:7px; border-radius:12px; }
  .chat-panel .voice-portraits { margin-bottom:6px; }
  .chat-panel .alien-frame { width:42px; height:42px; flex-basis:42px; }
  .chat-panel .oracle-portrait-row { gap:9px; }
  .chat-panel .oracle-caption { max-width:none; gap:2px; }
  .chat-panel .oracle-caption strong { font-size:14px; letter-spacing:.02em; }
  .chat-panel .oracle-caption span { font-size:11px; line-height:1.2; }
  .chat-panel .voice-length { margin-top:3px; font-size:10px; }
  .game-page input { font-size:16px; }
  .mobile-status-dialog { position:fixed; inset:0; margin:0; width:100%; max-width:none; height:var(--viewport-height,100dvh); max-height:none; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overflow:hidden; }
  .mobile-status-dialog[open] { display:flex; flex-direction:column; }
  .mobile-status-dialog > .dialog-heading { flex:none; margin:0; padding:8px 12px; border-bottom:1px solid var(--line); }
  .mobile-status-dialog h2 { font-size:18px; margin:0; }
  #mobileStatusClose { width:44px; height:44px; }
  #mobileStatusContent { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
  #mobileStatusContent .status { min-height:100%; display:flex; flex-direction:column; border:0; border-radius:0; padding:12px; }
  #mobileStatusContent .status-row { flex-wrap:wrap; align-items:center; }
  #mobileStatusContent #beingName { max-width:calc(100% - 45px); overflow-wrap:anywhere; }
  #mobileStatusContent .action-status { flex:1; }
  #mobileStatusContent #statusCategories { max-height:calc(var(--viewport-height,100dvh) - 260px); min-height:110px; }
  #mobileStatusContent .status-tools input { font-size:16px; }
  #mobileStatusContent .status-variable { font-size:14px; padding:10px 0; }
}
@media (max-height:500px) and (pointer:coarse) and (orientation:landscape) {
  .game-page .app { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  .game-page .top { grid-column:1/-1; grid-template-columns:auto auto 1fr; }
  .game-page .top-actions { grid-column:auto; }
  .game-page .sub { display:none; }
  .game-page .clock { white-space:normal; }
  .chat-panel .oracle-caption span { display:none; }
}

.mobile-status-summary { display:none; }
@media (max-width:700px), (max-height:500px) and (pointer:coarse) {
  .game-page .app { grid-template-rows:auto minmax(60px,1fr) auto minmax(140px,.9fr); }
  /* Selection and moving tabs into the dialog must not resize the map. */
  .mobile-status-summary { --status-category-height:40px; display:grid; grid-template-rows:24px calc(var(--status-category-height) + 3px); height:calc(27px + var(--status-category-height)); min-width:0; }
  .mobile-status-heading { width:100%; min-width:0; height:24px; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px; border:0; color:var(--ink); background:transparent; font:inherit; line-height:16px; text-align:left; cursor:pointer; }
  .mobile-status-heading strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
  .mobile-status-heading .action-status { max-width:68%; }
  #mobileActionLabel { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:12px; }
  #mobileStatusCategories .status-tabs { margin:3px 0 0; gap:5px; }
  #mobileStatusCategories .status-tabs button { flex-direction:row; justify-content:center; gap:4px; height:var(--status-category-height); min-height:var(--status-category-height); padding:5px 2px; font-size:10px; }
  #mobileStatusCategories .status-tabs button svg { width:18px; height:18px; }
  #mobileStatusCategories .status-has-update::after { right:4px; top:3px; }
}
@media (max-height:500px) and (pointer:coarse) and (orientation:landscape) {
  .game-page .app { grid-template-rows:auto auto minmax(0,1fr); }
  .game-page .map-wrap { grid-column:1; grid-row:2 / 4; }
  .mobile-status-summary { grid-column:2; grid-row:2; }
  .chat-panel { grid-column:2; grid-row:3; }
  .chat-panel .alien-frame { width:30px; height:30px; flex-basis:30px; }
}

@media (max-width:700px) and (orientation:portrait) {
  /* Give the square region room to reach the phone's edges without stretching
     its cells. The composer keeps its own space when the keyboard opens. */
  .game-page .app { padding-left:0; padding-right:0; grid-template-rows:auto minmax(60px,1fr) auto minmax(190px,.6fr); }
  .game-page .top, .game-page .mobile-status-summary, .game-page .chat-panel { margin-left:8px; margin-right:8px; }
  .game-page .map-wrap { border-left:0; border-right:0; border-radius:0; }
  .game-page.compact-viewport .app { grid-template-rows:auto minmax(40px,.75fr) auto minmax(145px,1.5fr); gap:4px; }
  .game-page.compact-viewport .top-actions, .game-page.compact-viewport .top .sub { display:none; }
  .game-page.compact-viewport .chat-panel .alien-frame { width:28px; height:28px; flex-basis:28px; }
  .game-page.compact-viewport .oracle-caption span, .game-page.compact-viewport .voice-length { display:none; }
  .game-page.compact-viewport .voice-portraits { margin-bottom:4px; }
  .game-page.compact-viewport .voice { padding:5px; }
  .game-page.compact-viewport .mobile-status-summary { --status-category-height:34px; }
}

/* Desktop keeps the world, inspector and conversation in one viewport. */
@media (min-width:701px) and (min-height:501px), (min-width:701px) and (pointer:fine) {
  html:has(body.game-page), body.game-page { height:100%; overflow:hidden; }
  .game-page .app { position:fixed; inset:0; max-width:none; min-height:0; height:var(--viewport-height,100dvh); padding:12px; display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.65fr) minmax(280px,.9fr); grid-template-rows:auto minmax(0,1fr); grid-template-areas:"header header header" "status map chat"; gap:12px; overflow:hidden; }
  .game-page .top { grid-area:header; grid-template-columns:auto 1fr auto; align-items:center; padding:0 4px; }
  .game-page .top .player-actions { grid-column:3; grid-row:1; }
  .game-page .top-actions { grid-column:2; grid-row:1; justify-content:flex-end; padding-right:14px; }
  .game-page .map-wrap { grid-area:map; aspect-ratio:auto; min-width:0; min-height:0; }
  .game-page .app > .status { grid-area:status; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding:14px; }
  .game-page .status-row { flex:none; flex-wrap:wrap; }
  .game-page #beingName { overflow-wrap:anywhere; }
  .game-page #beingStatusDetails { display:flex; flex-direction:column; flex:1; min-height:0; }
  .game-page #statusTabs, .game-page .status-tools, .game-page .status-freshness, .game-page .status-legend { flex:none; }
  .game-page #statusCategories { flex:1; min-height:0; max-height:none; overflow:auto; }
  .game-page .status-rows { max-height:none; }
  .game-page .status-legend { font-size:11px; line-height:1.4; }
  .game-page .chat-panel { grid-area:chat; min-width:0; min-height:0; overflow:hidden; gap:10px; }
  .game-page .chat-panel .log { flex:1; min-height:0; height:auto; max-height:none; overflow:auto; padding:16px; font-size:16px; line-height:1.55; border:1px solid var(--line); border-radius:14px; background:#0b0d1080; }
  .game-page .chat-panel .voice, .game-page .chat-panel > .inspect-copy { flex:none; }
  .game-page .chat-panel .oracle-caption { min-width:0; }
}
@media (min-width:701px) and (max-width:1099px) and (min-height:501px), (min-width:701px) and (max-width:1099px) and (pointer:fine) {
  .game-page .app { grid-template-columns:minmax(0,1fr) minmax(270px,.65fr); grid-template-rows:auto minmax(0,1fr) minmax(190px,.65fr); grid-template-areas:"header header" "map status" "chat status"; }
  .game-page .chat-panel .voice-portraits { margin-bottom:5px; }
  .game-page .chat-panel .alien-frame { width:40px; height:40px; flex-basis:40px; }
}

/* Typing is a conversation surface, independent of the world's grid. Only its
   visible height follows the keyboard; the text and composer keep their size. */
.conversation-toolbar { display:none; }
@media (max-width:700px), (max-height:500px) and (pointer:coarse) {
  .game-page.conversation-focus .chat-panel { position:fixed; z-index:60; inset:auto 0; top:var(--viewport-top,0px); height:var(--viewport-height,100dvh); margin:0; padding:calc(6px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); background:var(--bg); gap:8px; isolation:isolate; animation:conversation-arrive 140ms ease-out; }
  .game-page.conversation-keyboard .chat-panel { padding-bottom:8px; }
  .conversation-focus .conversation-toolbar { display:flex; flex:none; align-items:center; min-height:44px; border-bottom:1px solid var(--line); }
  #chatBack { display:flex; align-items:center; gap:5px; min-height:44px; padding:4px 8px 4px 0; border:0; background:transparent; color:var(--accent); font:inherit; font-size:14px; cursor:pointer; }
  #chatBack svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .game-page.conversation-focus .chat-panel .log { padding:4px 6px; font-size:16px; line-height:1.5; overflow-anchor:none; }
  .game-page.conversation-focus .chat-panel .voice { padding:7px; }
  .game-page.conversation-focus .chat-panel .voice-portraits { margin-bottom:6px; }
  .game-page.conversation-focus .chat-panel .alien-frame { width:42px; height:42px; flex-basis:42px; }
  .game-page.conversation-focus .chat-panel .oracle-caption span { display:block; }
  .game-page.conversation-focus .chat-panel .voice-length { display:block; }
  .game-page.conversation-focus .chat-panel .voice-row { min-height:44px; }
  .game-page.conversation-focus .chat-panel .voice-row input { min-width:0; font-size:16px; }
  .game-page.conversation-focus .chat-panel .voice-row button { min-height:44px; }
}
@keyframes conversation-arrive { from { opacity:.65; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .game-page.conversation-focus .chat-panel { animation:none; } }