/* Terminal aesthetic: the cold UI *is* the art direction.
   Two accents only — amber (system/threat) and cyan (you). */

:root {
  --bg: #07090b;
  --bg-2: #0d1114;
  --rule: #1c2429;
  --dim: #4a5a63;
  --fg: #b9ccd4;
  --cyan: #35e0d0;
  --amber: #f0a63c;
  --red: #ff5555;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.4 var(--mono);
  overscroll-behavior: none;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 10px env(safe-area-inset-bottom);
  gap: 8px;
}

.label { color: var(--dim); letter-spacing: .12em; font-size: 10px; }
.num { color: var(--cyan); font-variant-numeric: tabular-nums; }

/* ---- threat block ------------------------------------------------------ */

#threat {
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 6px;
}

.trace-row { display: flex; align-items: center; gap: 8px; }
.trace-row .num { color: var(--amber); min-width: 3ch; text-align: right; }

.trace-bar {
  position: relative; flex: 1; height: 10px;
  background: var(--bg-2); border: 1px solid var(--rule); overflow: hidden;
}
#trace-fill {
  height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, var(--amber) 0 3px, #c9832a 3px 5px);
  transition: width .25s ease-out;
}
#trace-fill.hot { background: repeating-linear-gradient(90deg, var(--red) 0 3px, #b33 3px 5px); }
.ticks i { position: absolute; top: 0; width: 1px; height: 100%; background: var(--bg); opacity: .8; }

.esc-note { color: var(--amber); font-size: 10px; min-height: 12px; letter-spacing: .06em; }

.ice-row { display: flex; justify-content: space-between; align-items: baseline; }
#ice-name { color: var(--amber); letter-spacing: .1em; }
#ice-hp { color: var(--amber); }

.hp-bar { height: 4px; background: var(--bg-2); border: 1px solid var(--rule); }
#ice-fill { height: 100%; background: var(--amber); transition: width .25s ease-out; }

/* Intents are permanently visible — there is no hover on a phone,
   so there must never be anything to inspect. */
.queue { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.intent {
  border: 1px solid var(--rule); padding: 3px 7px; font-size: 11px;
  background: var(--bg-2); color: var(--fg);
}
.intent.next { border-color: var(--amber); color: var(--amber); }
.intent.skipped { opacity: .35; text-decoration: line-through; }
.queue .arrow { color: var(--dim); }

/* ---- stage ------------------------------------------------------------- */

#stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
#ice-art { color: var(--amber); opacity: .55; font-size: 15px; line-height: 1.15; text-align: center; }
#stage.hit { animation: shake .25s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

#toast {
  position: absolute; bottom: 6px; left: 0; right: 0; text-align: center;
  color: var(--amber); font-size: 11px; letter-spacing: .08em;
  opacity: 0; transition: opacity .2s;
}
#toast.show { opacity: 1; }

/* ---- self -------------------------------------------------------------- */

#self {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
#self .cycles { margin-left: auto; color: var(--cyan); letter-spacing: .2em; }
.chip { color: var(--cyan); border: 1px solid var(--rule); padding: 1px 5px; font-size: 11px; }
.chip:empty { display: none; }

#script { min-height: 16px; display: flex; gap: 8px; align-items: baseline; }
#script-list { color: var(--dim); font-size: 11px; }

/* ---- hand -------------------------------------------------------------- */

#hand { display: flex; gap: 6px; align-items: stretch; }

.card {
  flex: 1 1 0; min-width: 0;
  background: var(--bg-2); border: 1px solid var(--rule);
  padding: 6px 5px; text-align: left;
  color: var(--fg); font: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  min-height: 92px; overflow: hidden;
}
.card:active { transform: translateY(1px); }
.card .name { color: var(--cyan); font-size: 10px; letter-spacing: .04em; word-break: break-all; }
.card .cost { color: var(--cyan); font-size: 10px; }
.card .text {
  color: var(--fg); font-size: 9px; line-height: 1.25; opacity: .8; flex: 1;
  overflow-wrap: anywhere; hyphens: auto;
}
.card .trace { color: var(--amber); font-size: 9px; opacity: .8; }

.card.unaffordable { opacity: .35; }
.card.flagged { border-color: var(--red); }
.card.flagged .name { color: var(--red); }
.card .penalty { color: var(--red); font-size: 9px; letter-spacing: .05em; }

/* ---- controls ---------------------------------------------------------- */

#controls { display: flex; gap: 6px; padding-bottom: 4px; }
button {
  font: inherit; background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--rule); padding: 12px 10px; cursor: pointer;
  letter-spacing: .1em;
}
button:disabled { opacity: .3; cursor: default; }
button.primary { flex: 1; border-color: var(--cyan); color: var(--cyan); }
#undo { min-width: 88px; }

#tools { display: flex; gap: 6px; align-items: center; padding-bottom: 6px; flex-wrap: wrap; }
.mini { padding: 4px 8px; font-size: 10px; color: var(--dim); }
.seed { background: var(--bg-2); border: 1px solid var(--rule); color: var(--dim); width: 100px; }
#log {
  flex-basis: 100%; max-height: 26vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--rule); padding: 6px;
  font-size: 10px; color: var(--dim); white-space: pre-wrap;
}

/* ---- overlay ----------------------------------------------------------- */

#overlay {
  position: fixed; inset: 0; background: rgba(7,9,11,.94);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* display:flex above beats the hidden attribute's default display:none, which
   would leave an invisible overlay eating every tap. */
#overlay[hidden] { display: none; }
#overlay .panel { text-align: center; display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
#overlay h1 { font-size: 22px; letter-spacing: .3em; color: var(--amber); }
#overlay h1.win { color: var(--cyan); }
#overlay p { color: var(--dim); font-size: 11px; line-height: 1.6; }

/* ---- run progress ------------------------------------------------------ */

.run-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nodes { display: flex; align-items: center; gap: 0; }
.nodes .node {
  width: 7px; height: 7px; border: 1px solid var(--rule);
  transform: rotate(45deg); display: inline-block;
}
.nodes .node.done { background: var(--cyan); border-color: var(--cyan); }
.nodes .node.here { border-color: var(--amber); background: var(--amber); }
.nodes .link { width: 14px; height: 1px; background: var(--rule); display: inline-block; }

/* ---- reward draft ------------------------------------------------------ */

#reward {
  position: fixed; inset: 0; background: rgba(7,9,11,.94);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
/* Same trap as #overlay — without this the hidden panel still eats taps. */
#reward[hidden] { display: none; }
#reward .panel {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 360px; width: 100%;
}
#reward h2 {
  font-size: 15px; letter-spacing: .3em; color: var(--cyan); text-align: center;
}
#reward .detail { color: var(--dim); font-size: 11px; text-align: center; }
#reward-cards { display: flex; gap: 6px; }
.card.reward { min-height: 104px; }
#skip-reward { align-self: center; }