:root {
  color-scheme: dark;
  --nc-orange: #F1A21A;
  --nc-black: #1E1F21;
  --nc-cream: #F1EFE4;
  --ibc-green: #559348;
  --signal-red: #D4554D;
  --signal-blue: #4C97C8;
  --hostinger-violet: #673DE6;
  --hostinger-deep: #2F1C6A;
  --panel: rgba(30, 31, 33, .88);
  --focus: #F1A21A;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #080A09; }
body { touch-action: none; user-select: none; }
button, input { font: inherit; }
button { min-width: 44px; min-height: 44px; touch-action: manipulation; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#game-shell { position: relative; width: 100%; height: 100%; overflow: hidden; background: #080A09; }
#game-canvas { display: block; width: 100%; height: 100%; outline: none; }
#world-vignette, #world-grain { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#world-vignette { box-shadow: inset 0 0 13vmax rgba(0, 0, 0, .52); }
#world-grain {
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  animation: grain 260ms steps(2) infinite;
}
@keyframes grain { 50% { transform: translate(-1%, 1%); } }
body.reduced-motion #world-grain { animation: none; opacity: .02; }

.overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgba(8, 10, 9, .62); }
.title-frame, .dialog-frame, .terminal-frame, .end-frame {
  width: min(760px, 94vw);
  color: var(--nc-cream);
  background: rgba(12, 14, 13, .94);
  border: 1px solid rgba(241, 239, 228, .24);
  border-radius: 8px;
  padding: clamp(22px, 4vw, 44px);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .54);
}
.title-frame { text-align: center; }
.eyebrow { margin: 0 0 12px; color: var(--nc-orange); font: 800 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
h1, h2 { margin: 0; color: var(--nc-cream); font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; font-weight: 800; letter-spacing: 0; }
h1 { font-size: clamp(38px, 6vw, 78px); line-height: .92; }
h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1; }
.title-frame p, .dialog-frame p, .end-frame p { color: #D8D2BC; line-height: 1.5; }
.title-actions, .drawer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.primary-button, .secondary-button, .hud-button, .command-chip {
  border-radius: 7px;
  font-weight: 800;
  letter-spacing: .04em;
}
.primary-button { border: 0; color: #11130F; background: var(--nc-orange); padding: 0 22px; }
.secondary-button { border: 1px solid rgba(241, 239, 228, .34); color: var(--nc-cream); background: transparent; padding: 0 18px; }
.small { min-height: 44px; padding-inline: 16px; font-size: 13px; }
.controls-copy, .legal { font-size: 13px; color: #A9A28F; }
.legal { font-size: 11px; }

.hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.objective-panel {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  width: min(320px, calc(100vw - 104px));
  color: var(--nc-cream);
  background: var(--panel);
  border: 1px solid rgba(241, 239, 228, .24);
  border-left: 4px solid var(--ibc-green);
  border-radius: 7px;
  padding: 12px 14px;
}
.objective-panel small { display: block; color: #BDB5A1; font: 800 11px/1.2 ui-monospace, monospace; letter-spacing: .08em; }
.objective-panel strong { display: block; margin-top: 5px; font-size: 14px; }
.objective-panel p { margin: 5px 0 0; color: #D9D5C7; font-size: 13px; line-height: 1.35; }
.hud-actions { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; gap: 8px; pointer-events: auto; }
.hud-button { color: var(--nc-cream); background: var(--panel); border: 1px solid rgba(241, 239, 228, .28); padding-inline: 12px; }
#reticle { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--nc-cream); box-shadow: 0 0 0 1px #070807; }
#reticle.aimed { width: 13px; height: 13px; background: transparent; border: 2px solid var(--nc-orange); }
.interaction-prompt {
  position: absolute;
  left: 50%;
  top: 61%;
  transform: translateX(-50%);
  color: var(--nc-cream);
  background: rgba(12, 14, 13, .9);
  border: 1px solid rgba(241, 162, 26, .48);
  border-radius: 7px;
  padding: 10px 14px;
  font: 800 13px/1 ui-monospace, monospace;
  white-space: nowrap;
}
.interaction-prompt b { color: #11130F; background: var(--nc-orange); border-radius: 4px; padding: 3px 6px; }
.toast {
  position: absolute;
  top: max(78px, calc(env(safe-area-inset-top) + 60px));
  left: 50%;
  max-width: min(560px, 88vw);
  transform: translateX(-50%);
  opacity: 0;
  color: #11130F;
  background: var(--nc-orange);
  border-radius: 7px;
  padding: 10px 14px;
  font: 800 12px/1.35 ui-monospace, monospace;
  text-align: center;
}
.toast.show { opacity: 1; }
.signal-drawer, .fact-drawer {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  width: min(620px, calc(100vw - 40px));
  transform: translateX(-50%);
  color: var(--nc-cream);
  background: rgba(12, 14, 13, .94);
  border: 1px solid rgba(241, 239, 228, .24);
  border-radius: 8px;
  padding: 14px 16px;
  pointer-events: auto;
}
.signal-drawer strong { color: var(--nc-cream); font: 800 12px ui-monospace, monospace; }
.signal-drawer p, .fact-drawer p { margin: 6px 0 0; color: #D9D5C7; line-height: 1.45; }
.signal-drawer button { margin-top: 12px; pointer-events: auto; }
.fact-drawer { z-index: 25; }
.fact-drawer small { color: var(--nc-orange); font: 800 11px ui-monospace, monospace; }
.fact-drawer h2 { margin-top: 4px; font-size: 24px; }

.touch-controls { position: absolute; inset: 0; z-index: 14; display: none; pointer-events: none; }
.touch-stick {
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 104px;
  height: 104px;
  border: 1px solid rgba(241, 239, 228, .32);
  border-radius: 50%;
  background: rgba(8, 10, 9, .38);
  pointer-events: auto;
  touch-action: none;
}
.touch-stick i { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px; border-radius: 50%; background: rgba(241, 239, 228, .62); }
#move-stick { left: max(22px, env(safe-area-inset-left)); }
#look-stick { right: max(22px, env(safe-area-inset-right)); }
.touch-action {
  position: absolute;
  right: max(34px, env(safe-area-inset-right));
  bottom: calc(max(22px, env(safe-area-inset-bottom)) + 118px);
  min-width: 92px;
  min-height: 60px;
  color: #11130F;
  background: var(--nc-orange);
  border: 0;
  border-radius: 8px;
  pointer-events: auto;
}

.terminal-frame { background: #030704; border-color: rgba(114, 255, 143, .34); }
.terminal-frame h2 { color: #8CFF9E; }
#terminal-output { min-height: 180px; max-height: 36vh; overflow: auto; margin: 14px 0; padding: 14px; color: #8CFF9E; background: #010301; border: 1px solid rgba(114, 255, 143, .24); font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.terminal-form { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.terminal-form input { min-height: 44px; color: #B9FFC5; background: transparent; border: 1px solid rgba(114, 255, 143, .28); border-radius: 6px; padding: 0 10px; }
.command-chip { width: 100%; margin-top: 12px; color: #071008; background: #8CFF9E; border: 0; }
.end-card { background: linear-gradient(145deg, rgba(47, 28, 106, .94), rgba(103, 61, 230, .96)); }
.end-frame { text-align: center; background: transparent; border-color: rgba(255, 255, 255, .32); box-shadow: none; }
.end-frame h2 { font-size: clamp(30px, 5vw, 62px); }
.error-frame { border-color: #E66B63; }

@media (pointer: coarse), (max-width: 760px) {
  .touch-controls { display: block; }
  .objective-panel { width: min(220px, calc(100vw - 112px)); padding: 10px 12px; }
  .objective-panel p { display: none; }
  .hud-actions { gap: 6px; }
  .hud-button { width: 54px; padding: 0; font-size: 11px; }
  .interaction-prompt { top: auto; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 194px); font-size: 12px; max-width: calc(100vw - 36px); overflow: hidden; text-overflow: ellipsis; }
  .fact-drawer, .signal-drawer { bottom: calc(max(22px, env(safe-area-inset-bottom)) + 118px); max-height: 32vh; overflow: auto; }
  .terminal-form { grid-template-columns: 1fr; }
  #terminal-output { min-height: 132px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .touch-stick { width: 90px; height: 90px; }
  .touch-action { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 102px); min-height: 54px; }
  .fact-drawer, .signal-drawer { left: max(14px, env(safe-area-inset-left)); right: auto; bottom: max(14px, env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 260px)); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #world-grain { animation: none; }
  * { scroll-behavior: auto !important; }
}