:root {
  --g: #6fffa8;
  --g-dim: #1d5a3a;
  --amber: #ffb347;
  --red: #ff4a3a;
  --cyan: #7fe8ff;
  --font: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #cfe;
  font-family: var(--font);
}

#view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.hidden { display: none !important; }

.btn {
  pointer-events: auto;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--g);
  background: rgba(10, 40, 25, 0.55);
  border: 1px solid var(--g-dim);
  padding: 6px 12px;
  cursor: pointer;
  text-transform: uppercase;
}
.btn:hover { border-color: var(--g); background: rgba(20, 80, 50, 0.6); color: #fff; }
.btn.big { padding: 10px 18px; font-size: 14px; }
.btn.armed { color: #000; background: var(--amber); border-color: var(--amber); animation: blink 0.5s steps(2) infinite; }

@keyframes blink { 50% { opacity: 0.45; } }
.blink { animation: blink 0.6s steps(2) infinite; }
.warn { color: var(--red); }
.ok { color: var(--g); }

/* ---------------------------------------------------------------- HUD */

.hud { position: absolute; inset: 0; }

.crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: rgba(220, 255, 235, 0.6);
}
.crosshair.active { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: none; border: 1px solid var(--g); }

.prompt {
  position: absolute;
  top: calc(50% + 22px);
  width: 100%;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--g);
  text-shadow: 0 0 6px rgba(0, 0, 0, 1);
}

.hold-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: conic-gradient(var(--g) var(--p), transparent 0);
  mask: radial-gradient(circle, transparent 15px, #000 16px);
  -webkit-mask: radial-gradient(circle, transparent 15px, #000 16px);
}

.subtitle {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(760px, 90%);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: #dff;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 14px;
  opacity: 0;
  transition: opacity 0.4s;
}
.subtitle b { color: var(--cyan); letter-spacing: 0.15em; }
.subtitle.visible { opacity: 1; }

.notice {
  position: absolute;
  top: 27%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.4em;
  color: #eee;
  text-shadow: 0 0 10px #000;
  opacity: 0;
  transition: opacity 0.6s;
}
.notice.visible { opacity: 0.9; }

.objectives {
  position: absolute;
  top: 16px;
  left: 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--g);
  text-shadow: 0 0 4px #000;
  max-width: 44vw;
}
.obj-title { color: var(--g-dim); letter-spacing: 0.3em; margin-bottom: 2px; }
.obj.done { color: var(--g-dim); text-decoration: line-through; }

.wrist {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 250px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--g);
  background: rgba(0, 12, 6, 0.6);
  border: 1px solid var(--g-dim);
}
.wrist-title { color: var(--g-dim); letter-spacing: 0.25em; margin-bottom: 6px; }
.wrist .row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.wrist .row span { width: 34px; }
.wrist .row b { width: 38px; text-align: right; font-weight: normal; }
.wrist .bar { flex: 1; height: 6px; background: rgba(111, 255, 168, 0.1); }
.wrist .bar i { display: block; height: 100%; background: var(--g); }
.wrist .bar i.crit { background: var(--red); animation: blink 0.8s steps(2) infinite; }
.wrist .orbit { margin-top: 6px; color: #9fd; line-height: 1.5; }
.crit-t { color: var(--red); }
.burning { color: var(--amber); animation: blink 0.5s steps(2) infinite; }

.deckmap {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  background: rgba(0, 10, 6, 0.85);
  border: 1px solid var(--g-dim);
}
.deckmap-title { font-size: 11px; color: var(--g); letter-spacing: 0.2em; margin-bottom: 6px; }
.deckmap canvas { display: block; image-rendering: pixelated; }

.resume {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  letter-spacing: 0.4em;
  color: var(--g);
  background: rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------- Consoles */

.console-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(0, 20, 10, 0.35), rgba(0, 0, 0, 0.75));
}

.console-frame {
  width: min(980px, 96vw);
  max-height: 94vh;
  overflow: auto;
  background: #010805;
  border: 1px solid var(--g-dim);
  box-shadow: 0 0 40px rgba(60, 255, 150, 0.12), inset 0 0 80px rgba(0, 0, 0, 0.9);
  color: var(--g);
  position: relative;
}
.console-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}

.console-header, .console-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.2em;
  border-bottom: 1px solid var(--g-dim);
}
.console-footer { border-bottom: 0; border-top: 1px solid var(--g-dim); color: #8fc; min-height: 34px; }
.console-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

canvas.crt {
  display: block;
  max-width: 100%;
  border: 1px solid var(--g-dim);
  background: #000;
  image-rendering: pixelated;
  cursor: crosshair;
}

.console-text { font-size: 13px; line-height: 1.6; color: #bfe; max-width: 720px; }
.console-text b { color: #fff; }
.console-text.small { font-size: 11px; color: #7ab; }
.console-text.log p { margin: 0 0 10px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

.progress { width: 100%; max-width: 560px; height: 14px; border: 1px solid var(--g-dim); }
.progress i { display: block; height: 100%; width: 0; background: var(--g); }

.power { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.power-free { font-size: 14px; letter-spacing: 0.15em; }
.power-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.power-row .pname { width: 150px; letter-spacing: 0.1em; }
.power-row .cells { display: flex; gap: 4px; }
.power-row .cells i { width: 22px; height: 14px; border: 1px solid var(--g-dim); }
.power-row .cells i.on { background: var(--g); box-shadow: 0 0 6px var(--g); }
.power-row .phelp { color: #8ab; font-size: 12px; }

.helm { display: flex; gap: 16px; flex-wrap: wrap; width: 100%; }
.helm-side { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.helm-side label { letter-spacing: 0.12em; }
.helm-side label b { color: #fff; font-weight: normal; margin-left: 6px; }
.helm-side input[type='range'] { width: 100%; accent-color: #6fffa8; }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 6px; }
.presets .btn { font-size: 11px; padding: 4px; }
.readout { font-size: 12px; line-height: 1.6; color: #bfe; min-height: 130px; border-top: 1px solid var(--g-dim); padding-top: 6px; margin-top: 4px; }
.helm-status { min-height: 18px; }

.panel-wrap { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; width: 100%; }

/* ---------------------------------------------------------------- Terminal */

.term {
  width: 100%;
  height: min(62vh, 560px);
  overflow-y: auto;
  padding: 10px 12px;
  background: #000604;
  border: 1px solid var(--g-dim);
  font-size: 14px;
  line-height: 1.38;
  color: #9fe8b8;
  cursor: text;
  text-shadow: 0 0 5px rgba(111, 255, 168, 0.35);
  scrollbar-color: #1d5a3a #000604;
}
.term .tl { white-space: pre-wrap; word-break: break-word; }
.term .tl.cmd { color: #e6fff0; }
.term .tl.err { color: #ff7a6a; }
.term .tl.ok { color: #6fffa8; }
.term .tl.warn { color: var(--amber); }
.term .tl.dim { color: #4f8a6a; }
.term .tl.hi { color: #bfffe0; }
.term-line { display: flex; align-items: baseline; }
.term-prompt { color: #e6fff0; white-space: pre; }
.term-input {
  flex: 1;
  min-width: 40px;
  font: inherit;
  color: #e6fff0;
  background: transparent;
  border: 0;
  outline: none;
  caret-color: var(--g);
  padding: 0;
  text-shadow: inherit;
}

/* ---------------------------------------------------------------- Locker view */

.locker-view {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.97) 0 7.5vh, rgba(0, 0, 0, 0) 7.5vh 11vh),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 80%);
}

.wrist .kit { margin-top: 4px; color: #9fd; }

.legal {
  position: absolute;
  right: 18px;
  bottom: 12px;
  font-size: 11px;
  color: #567;
  pointer-events: auto;
  z-index: 4;
}
.legal a { color: #7a9; text-decoration: none; border-bottom: 1px dotted #456; }
.legal a:hover { color: #fff; }

/* ---------------------------------------------------------------- Screens */

.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.title { background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.75) 60%); justify-items: end; }
.title-block { padding: 0 6vw; text-align: left; max-width: 760px; }
.logo {
  font-size: clamp(48px, 8vw, 118px);
  margin: 0;
  letter-spacing: 0.14em;
  font-weight: normal;
  color: #f4efe6;
  text-shadow: 0 0 30px rgba(255, 140, 60, 0.45), 3px 0 rgba(255, 40, 40, 0.35), -3px 0 rgba(40, 180, 255, 0.35);
}
.tagline { letter-spacing: 0.35em; font-size: 12px; color: #cba; margin: 6px 0 20px; }
.loopmark { color: var(--amber); letter-spacing: 0.3em; font-size: 13px; margin-bottom: 18px; }
.cloudmark { color: #789; letter-spacing: 0.22em; font-size: 11px; margin: -8px 0 18px; }
.cloudmark a { color: #7a9; text-decoration: none; border-bottom: 1px dotted #456; }
.cloudmark a:hover { color: #fff; }
.menu { display: flex; flex-direction: column; gap: 8px; align-items: stretch; max-width: 320px; }
.menu-btn { text-align: left; font-size: 15px; padding: 10px 16px; }
.menu-btn.primary { color: #fff; border-color: var(--amber); }
.panel { margin-top: 18px; }
.help { margin-top: 26px; font-size: 11px; color: #789; line-height: 1.7; }

.endings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ending-slot { font-size: 11px; padding: 8px; border: 1px solid #234; color: #456; letter-spacing: 0.1em; }
.ending-slot.got { color: #fff; border-color: var(--g-dim); }
.ending-slot.good { border-color: #3a8; }
.ending-slot.bitter { border-color: #a83; }
.ending-slot.strange { border-color: #58c; }
.ending-slot.death { border-color: #a33; }
.ending-slot.secret { border-color: #c5f; }

.settings { display: flex; flex-direction: column; gap: 10px; font-size: 12px; letter-spacing: 0.1em; min-width: 280px; pointer-events: auto; }
.settings label { display: flex; flex-direction: column; gap: 4px; }
.settings label.check { flex-direction: row; align-items: center; gap: 8px; }
.settings input[type='range'] { accent-color: #6fffa8; }

.pause { background: rgba(0, 0, 0, 0.75); }
.pause-block h2 { letter-spacing: 0.5em; font-weight: normal; }

.intro { background: #000; transition: opacity 1.2s; z-index: 5; }
.intro-text { text-align: center; letter-spacing: 0.5em; font-size: 16px; line-height: 2.4; color: #cde; }

.ending { background: radial-gradient(ellipse at 30% 50%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.88) 55%); justify-items: end; }
.ending-block { padding: 0 8vw; max-width: 720px; }
.ending-line { font-size: 17px; line-height: 1.7; color: #e8e4dc; opacity: 0; transform: translateY(6px); transition: opacity 1.6s, transform 1.6s; }
.ending-line.visible { opacity: 1; transform: none; }
.ending-title { margin-top: 30px; font-size: 26px; letter-spacing: 0.4em; }
.tone-good .ending-title { color: #8fd; }
.tone-bitter .ending-title { color: var(--amber); }
.tone-strange .ending-title { color: var(--cyan); }
.tone-death .ending-title { color: var(--red); }
.tone-secret .ending-title { color: #d8f; }
.ending-stats { margin: 10px 0 20px; font-size: 12px; letter-spacing: 0.2em; color: #789; }