:root { color-scheme: dark; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; background: #0c1110; color: #dce6dd; --green: #a2e47a; --muted: #7e8d7d; --line: #29362c; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 50% 35%, #1b281d, #0c1110 70%); }
button, a { font: inherit; }
a { color: inherit; }
.topbar { height: 58px; padding-inline: clamp(18px, 4vw, 54px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: #91a18e; font-size: 9px; letter-spacing: .1em; }
.brand { color: var(--green); font-size: 13px; font-weight: 800; text-decoration: none; }.brand span { color: var(--muted); font-size: 9px; font-weight: 400; }
.topbar nav { display: flex; align-items: center; gap: 22px; }.topbar nav a { color: #899989; text-decoration: none; }.topbar nav span { color: var(--green); }
.engine { display: flex; align-items: center; gap: 7px; }.engine i,.topline i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px #a2e47a88; }
.page { width: min(1240px, calc(100% - 48px)); margin: 34px auto 20px; }
.heading { display: flex; min-height: 68px; align-items: center; justify-content: space-between; margin-bottom: 16px; }.eyebrow { margin: 0 0 7px; color: var(--green); font-size: 9px; letter-spacing: .14em; }h1 { margin: 0; font: 550 clamp(27px, 4vw, 38px)/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.05em; color: #edf4e9; }.heading > p { color: var(--muted); font: 12px ui-sans-serif, system-ui, sans-serif; }
.stage { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; border: 1px solid #394b3b; background: #17251b; box-shadow: 0 22px 80px #0006; touch-action: none; }
#schwing-view { display: block; width: 100%; height: 100%; outline: 0; }
.stage:fullscreen,.stage:-webkit-full-screen { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; }
.topline { position: absolute; z-index: 2; inset: 13px 15px auto; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: start; column-gap: 7px; color: #e0eadb; font-size: 8px; letter-spacing: .1em; text-shadow: 0 1px 5px #000; pointer-events: none; }.topline span:first-child { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topline #npc-model-readiness { min-width: 0; overflow: hidden; color: #c6e995; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.topline #npc-model-readiness[data-state="error"] { color: #ffad8d; }.topline #world-status { white-space: nowrap; }
.game-hud { position: absolute; z-index: 2; inset: auto 12px 10px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; color: #e0eadb; text-shadow: 0 1px 5px #000; pointer-events: none; }
.hud-hotbar { display: flex; align-items: center; gap: 4px; justify-self: start; padding: 5px 7px; border: 1px solid #c6d8bf44; border-radius: 4px; background: #101810b8; pointer-events: auto; }
.hud-hotbar > span { margin-right: 3px; color: #b8c7b3; font-size: 8px; letter-spacing: .08em; }
.hud-hotbar button { width: 28px; height: 28px; border: 1px solid #71816d88; border-radius: 3px; background: #172118dc; color: #e4eedf; font-size: 9px; cursor: pointer; touch-action: manipulation; }
.hud-hotbar button.selected { border-color: var(--green); color: var(--green); box-shadow: inset 0 0 0 1px #a2e47a55; }
.terrain-mode { min-height: 28px; justify-self: start; padding: 0 8px; border: 1px solid #71816d88; border-radius: 3px; background: #172118dc; color: #dce8d6; font-size: 8px; letter-spacing: .04em; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.terrain-mode[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.terrain-mode:disabled { opacity: .55; cursor: wait; }
.hud-telemetry { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; justify-self: end; max-width: 100%; padding: 6px 8px; border: 1px solid #c6d8bf44; border-radius: 4px; background: #101810b8; font-size: 8px; }
.hud-telemetry .stats,.hud-telemetry .model-stats,.hud-telemetry .mail-status { color: #c7d5c2; font-size: 8px; text-align: right; white-space: nowrap; }
.hud-telemetry .model-stats { color: #c6e995; }
.hud-telemetry .mail-status[data-ready="true"] { color: #c6e995; }
.hud-controls { grid-column: 1 / -1; justify-self: center; padding: 4px 7px; border-radius: 3px; background: #1018109c; color: #dce8d699; font-size: 7px; letter-spacing: .04em; text-align: center; }
.flight-status { position: absolute; z-index: 2; top: 36px; left: 15px; padding: 6px 8px; border: 1px solid #a2e47a66; background: #101810c9; color: var(--green); font-size: 8px; letter-spacing: .1em; pointer-events: none; }.flight-status[hidden] { display: none; }
.pbr-panel { position: absolute; z-index: 5; top: 36px; left: 12px; width: min(218px, calc(100% - 24px)); display: grid; gap: 7px; padding: 10px; border: 1px solid #a2e47a77; border-radius: 4px; background: #101810ed; color: #dce8d6; font: 8px ui-monospace, monospace; pointer-events: auto; }
.pbr-panel[hidden] { display: none; }
.pbr-panel strong { color: var(--green); letter-spacing: .1em; }
.pbr-panel label { display: grid; grid-template-columns: 78px 1fr 34px; align-items: center; gap: 6px; color: #b9c8b5; }
.pbr-panel label.shadow-extent-control { grid-template-columns: 78px 1fr 44px; }
.pbr-panel select { grid-column: 2 / 4; min-height: 23px; border: 1px solid #465748; background: #141c15; color: #dce8d6; font: inherit; }
.pbr-panel input { width: 100%; accent-color: var(--green); }
.pbr-panel input[type="number"] { grid-column: 2 / 4; min-height: 23px; padding: 2px 5px; border: 1px solid #465748; background: #141c15; color: #dce8d6; font: inherit; }
.pbr-panel input[type="checkbox"] { width: auto; justify-self: start; }
.pbr-panel output { text-align: right; color: #c6e995; }
.pbr-panel small { color: #9eae99; line-height: 1.35; }
.mail-notice { position: absolute; z-index: 3; top: 43px; left: 50%; transform: translateX(-50%); padding: 7px 10px; border: 1px solid #a2e47a88; border-radius: 3px; background: #101810e8; color: #c6e995; font-size: 8px; letter-spacing: .08em; text-align: center; text-shadow: 0 1px 4px #000; pointer-events: none; }.mail-notice[hidden] { display: none; }
.fullscreen { position: absolute; z-index: 5; top: 34px; right: 12px; width: 32px; height: 28px; border: 1px solid #b7c7b477; border-radius: 3px; background: #101810c9; color: #e4eedf; font-size: 17px; cursor: pointer; touch-action: manipulation; }.fullscreen:hover { border-color: var(--green); color: var(--green); }
.crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #f3f8e8; font: 18px/1 sans-serif; text-shadow: 0 1px 4px #000; pointer-events: none; }
.enter { position: absolute; z-index: 3; inset: 0; width: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; border: 0; background: #09110ba8; color: #edf5e8; cursor: pointer; }.enter b { color: var(--green); font-size: 25px; letter-spacing: .15em; }.enter span { color: #c0ccb9; font-size: 9px; letter-spacing: .12em; }.enter[hidden] { display: none; }
.unsupported { position: absolute; z-index: 7; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: min(420px, calc(100% - 32px)); padding: 22px; border: 1px solid #a2e47a77; border-radius: 4px; background: #101810f2; box-shadow: 0 12px 36px #0008; color: #e4eedf; text-align: center; }.unsupported[hidden] { display: none; }.unsupported b { color: var(--green); font-size: 11px; letter-spacing: .12em; }.unsupported p { margin: 13px 0 18px; color: #b3c0b0; font: 13px/1.5 ui-sans-serif, system-ui, sans-serif; }.unsupported a { display: inline-block; padding: 9px 12px; border: 1px solid #8dbf73; border-radius: 3px; color: #c6e995; font-size: 9px; letter-spacing: .08em; text-decoration: none; }.unsupported a:hover { background: #a2e47a1a; }
.message { position: absolute; z-index: 6; bottom: 15px; left: 50%; transform: translateX(-50%); padding: 8px 12px; background: #101810e8; color: #c6e995; font-size: 9px; opacity: 0; pointer-events: none; }.message.visible { opacity: 1; }
.npc-prompt { position: absolute; z-index: 3; bottom: 44px; left: 50%; transform: translateX(-50%); padding: 8px 12px; border: 1px solid #b7c7b477; border-radius: 3px; background: #101810dc; color: #e4eedf; font-size: 9px; letter-spacing: .08em; cursor: pointer; }.npc-dialogue { position: absolute; z-index: 8; top: 48px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); max-height: calc(100% - 64px); overflow: auto; padding: 13px 16px; border: 1px solid #a2e47a66; border-radius: 3px; background: #101810f2; color: #e4eedf; font: 13px/1.5 ui-sans-serif, system-ui, sans-serif; text-align: center; pointer-events: auto; }
.mailbox-dialogue { position: absolute; z-index: 9; top: 48px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 32px)); max-height: calc(100% - 64px); overflow: auto; padding: 15px 17px; border: 1px solid #a2e47a88; border-radius: 3px; background: #101810f5; color: #e4eedf; font: 13px/1.5 ui-sans-serif, system-ui, sans-serif; pointer-events: auto; }
.mailbox-dialogue[hidden] { display: none; }
.mailbox-dialogue h2 { margin: 0 0 8px; color: var(--green); font: 700 10px ui-monospace, monospace; letter-spacing: .12em; }
.mailbox-dialogue > p { color: #a8b7a5; font-size: 11px; }
.mailbox-dialogue label,.mail-heading { display: block; margin: 10px 0 5px; color: #c6e995; font: 700 8px ui-monospace, monospace; letter-spacing: .1em; }
.mailbox-dialogue textarea { display: block; width: 100%; min-height: 76px; padding: 9px; resize: vertical; border: 1px solid #334333; background: #0b100c; color: #e4eedf; font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; }
.mailbox-dialogue pre { min-height: 54px; max-height: 180px; overflow: auto; margin: 5px 0 10px; padding: 10px; background: #0b100c; color: #e4eedf; white-space: pre-wrap; font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
.mail-copy { margin: 5px 0 10px; padding: 8px; background: #131d15; color: #cbd8c8; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
.mail-error { color: #ffad8d !important; }
.mail-actions { display: flex; justify-content: flex-end; gap: 6px; }
.mailbox-dialogue button { min-height: 34px; margin: 5px 4px 0 0; padding: 0 11px; border: 1px solid #8dbf73; border-radius: 3px; background: #172318; color: #c6e995; font-size: 8px; letter-spacing: .07em; cursor: pointer; touch-action: manipulation; }
.mailbox-dialogue button:disabled { opacity: .45; cursor: wait; }
.mailbox-dialogue .mailbox-close { display: block; margin-left: auto; }
.mailbox-dialogue.keyboard-open { position: fixed; left: var(--chat-left); top: var(--chat-top); width: var(--chat-width); height: var(--chat-height); max-height: none; transform: none; }
.npc-prompt[hidden],.npc-dialogue[hidden],.npc-talk-touch[hidden] { display: none; }
.npc-dialogue p { margin: 0 0 10px; }
.npc-dialogue button { min-height: 32px; margin: 4px; padding: 0 10px; border: 1px solid #8dbf73; border-radius: 3px; background: #172318; color: #c6e995; font-size: 9px; letter-spacing: .06em; cursor: pointer; }
.npc-dialogue button:disabled { opacity: .45; cursor: wait; }
.npc-ai-panel { margin-top: 8px; padding-top: 10px; border-top: 1px solid #617856; text-align: left; }
.npc-ai-panel[hidden] { display: none; }
.npc-ai-panel p { color: #a8b7a5; font-size: 10px; }
.npc-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 8px 0; }
.npc-dialogue .npc-topics button { min-height: 28px; margin: 0; font-size: 8px; }
.npc-ai-panel pre { min-height: 42px; max-height: 130px; overflow: auto; margin: 8px 0; padding: 9px; background: #0b100c; color: #e4eedf; white-space: pre-wrap; font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
.npc-ai-panel textarea { width: 100%; min-height: 54px; padding: 9px; resize: vertical; border: 1px solid #334333; background: #0b100c; color: #e4eedf; font: 12px/1.5 ui-sans-serif, system-ui, sans-serif; }
.npc-dialogue.keyboard-open { position: fixed; left: var(--chat-left); top: var(--chat-top); width: var(--chat-width); height: var(--chat-height); max-height: none; transform: none; padding: 0; overflow: hidden; }
.npc-dialogue.keyboard-open > :not(.npc-ai-panel), .keyboard-open .npc-ai-panel > :not(.npc-chat-compose) { display: none; }
.keyboard-open .npc-ai-panel { height: 100%; margin: 0; padding: 0; border: 0; }
.keyboard-open .npc-chat-compose { display: flex; align-items: stretch; gap: 4px; height: 100%; }
.keyboard-open .npc-chat-compose textarea { flex: 1; min-width: 0; min-height: 0; height: 100%; margin: 0; padding: 3px 5px; resize: none; font-size: 16px; line-height: 1.25; }
.keyboard-open .npc-chat-actions { display: flex; gap: 3px; }
.keyboard-open .npc-chat-actions button { min-height: 0; margin: 0; padding-inline: 7px; }
.npc-model-bridge { position: fixed; z-index: -1; top: 0; left: 0; width: 1px; height: 1px; border: 0; opacity: 0.01; pointer-events: none; }
.npc-talk-touch { position: absolute; z-index: 5; top: 50%; right: 16px; min-width: 62px; min-height: 48px; border: 1px solid var(--green); border-radius: 4px; background: #101810dc; color: var(--green); font-size: 9px; pointer-events: auto; touch-action: manipulation; }
.mobile-ui { display: none; }
.toolbar { min-height: 58px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; border-bottom: 1px solid var(--line); color: #93a291; font-size: 8px; }.controls { display: flex; align-items: center; gap: 8px; }.controls b { color: #dce8d6; }.controls span { color: #526052; }
.hotbar { display: flex; align-items: center; gap: 5px; }.hotbar > span { margin-right: 3px; color: var(--muted); }.hotbar button { width: 26px; height: 27px; border: 1px solid #465748; border-radius: 3px; background: #141c15; color: #d5e1d3; font-size: 9px; cursor: pointer; }.hotbar button.selected { border-color: var(--green); color: var(--green); }
.stats { color: #91a18e; white-space: nowrap; }.model-stats { flex: 1 0 100%; color: #c6e995; text-align: right; white-space: nowrap; }.mail-status { color: #91a18e; font-size: 8px; white-space: nowrap; }.mail-status[data-ready="true"] { color: #c6e995; }.footnote { color: #637163; font: 10px ui-sans-serif, system-ui, sans-serif; }
.npc-patrol-experiment { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 14px 16px; border: 1px solid #354536; background: #111912; color: #dce6dd; }
.npc-patrol-experiment h2 { margin: 0 0 6px; color: var(--green); font-size: 9px; letter-spacing: .12em; }
.npc-patrol-experiment p { margin: 4px 0; color: #98a896; font: 11px/1.45 ui-sans-serif, system-ui, sans-serif; }
.npc-patrol-experiment #npc-patrol-status { color: #c6e995; }
.npc-patrol-experiment pre { margin: 8px 0 0; color: #dce6dd; white-space: pre-wrap; font: 10px/1.4 ui-monospace, monospace; }
.npc-patrol-experiment button { flex: 0 0 auto; min-height: 38px; padding: 0 13px; border: 1px solid #8dbf73; border-radius: 3px; background: #172318; color: #c6e995; font-size: 9px; letter-spacing: .06em; cursor: pointer; }
.npc-patrol-experiment button:disabled { opacity: .45; cursor: wait; }
@media (pointer: coarse) and (max-width: 1100px) {
  .page { width: calc(100% - 20px); margin-top: 14px; }.heading { min-height: 54px; }.heading > p { max-width: 155px; text-align: right; font-size: 10px; }.stage { aspect-ratio: 16 / 9; }
  .mobile-ui { position: absolute; z-index: 4; inset: 0; display: none; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }.stage.mobile-active .mobile-ui { display: block; }
  .move-pad { position: absolute; left: 15px; bottom: 15px; width: 108px; height: 108px; display: grid; place-items: center; color: #e3eddb; pointer-events: auto; }.move-pad > span { position: absolute; inset: 0; border: 1px solid #dce9d866; border-radius: 50%; background: #09110b66; }.move-pad i { position: absolute; width: 42px; height: 42px; border: 1px solid #d9e9cfaa; border-radius: 50%; background: #8ea78499; }.move-pad small { z-index: 1; margin-top: 75px; font-size: 8px; }.look-hint { position: absolute; top: 50%; right: 22%; color: #eff5e655; font-size: 8px; letter-spacing: .1em; }
  .touch-hotbar { display: none; }
  .game-hud { inset: 48px 8px auto; grid-template-columns: auto auto 1fr; align-items: start; gap: 6px; }
  .hud-hotbar { gap: 3px; padding: 4px; }
  .hud-hotbar > span { display: none; }
  .hud-hotbar button { width: 27px; height: 29px; }
  .terrain-mode { min-height: 29px; padding-inline: 6px; font-size: 7px; }
  .hud-telemetry { gap: 3px; max-width: 53vw; padding: 5px 6px; font-size: 7px; }
  .hud-telemetry .stats,.hud-telemetry .model-stats,.hud-telemetry .mail-status { max-width: 100%; font-size: 7px; white-space: normal; overflow-wrap: anywhere; }
  .hud-controls { display: none; }
  .fullscreen { top: 7px; right: 8px; }
  .touch-actions { position: absolute; right: 13px; bottom: 15px; display: grid; grid-template-columns: repeat(3, 54px); gap: 5px; pointer-events: auto; }.touch-actions button { min-height: 42px; border: 1px solid #b7c7b477; border-radius: 4px; background: #101810c9; color: #e4eedf; font-size: 8px; touch-action: manipulation; }.touch-actions button[aria-pressed="true"] { border-color: var(--green); color: var(--green); }.touch-actions button:disabled { opacity: .4; }
  .toolbar { flex-wrap: wrap; padding-block: 10px; }.controls { flex-wrap: wrap; }.stats { margin-left: auto; }
  .npc-patrol-experiment { align-items: stretch; flex-direction: column; gap: 8px; margin-top: 10px; padding: 11px; }.npc-patrol-experiment button { width: 100%; }
}
@media (pointer: coarse) and (max-width: 1100px) and (orientation: portrait) { .stage.mobile-active::after { position: absolute; z-index: 8; inset: 0; display: grid; place-content: center; background: #0d1512ee; color: var(--green); content: "ROTATE TO LANDSCAPE"; font-size: 12px; letter-spacing: .12em; pointer-events: none; } }
@media (pointer: coarse) and (max-width: 1100px) { .mail-notice { top: 104px; width: min(280px, calc(100% - 24px)); line-height: 1.4; } }