:root {
  --bg: #000; --fg: #ececec; --dim: #8d8d8d; --mute: #565656; --line: #262626; --line2: #3c3c3c; --hot: #fff;
  --px: "Silkscreen", monospace; --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font: 13px/1.55 var(--mono); }
body { cursor: crosshair; }
a { color: var(--hot); }
::selection { background: #fff; color: #000; }
.muted { color: var(--dim); }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.lbl { position: absolute; transform: translate(-50%, -100%); font: 10px var(--px); letter-spacing: 1px; color: #fff; white-space: nowrap; text-shadow: 0 0 6px #000, 0 0 2px #000; padding-bottom: 6px; pointer-events: auto; cursor: pointer; }
.lbl small { display: block; text-align: center; font: 9px var(--mono); color: var(--dim); }
.lbl.agent { color: #bdbdbd; font-size: 9px; }
.lbl.agent::before { content: "▸ "; }
.lbl.you { color: #000; background: #fff; padding: 1px 5px; }

/* boot */
#boot { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-content: center; justify-items: center; gap: 22px; transition: opacity .6s; }
#boot pre { font: 13px/1.7 var(--mono); color: #cfcfcf; min-width: 300px; margin: 0; }
body.ready #boot { opacity: 0; pointer-events: none; }

/* shared bits */
.panel { background: rgba(4,4,4,.86); border: 1px solid var(--line2); backdrop-filter: blur(8px); position: relative; }
.panel::before, .panel::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid #fff; pointer-events: none; }
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; background: #fff; color: #000; border: 1px solid #fff; font: 700 12px var(--px); letter-spacing: 1px; text-decoration: none; cursor: pointer; transition: box-shadow .2s; }
.btn:hover { box-shadow: 0 0 22px rgba(255,255,255,.55); }
.btn:disabled { opacity: .4; cursor: wait; }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line2); }
.btn.ghost:hover, .btn.on { border-color: #fff; color: #000; background: #fff; }
.btn.sm { padding: 6px 10px; font-size: 10px; }
.btn.wide { width: 100%; }
.hud { position: fixed; z-index: 10; }

/* top */
.top { top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 20px; padding: 12px 18px; background: linear-gradient(180deg, rgba(0,0,0,.85), transparent); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font: 700 17px var(--px); letter-spacing: 1px; }
.brand img { width: 34px; height: 34px; border: 1px solid var(--line2); }
.xp { display: grid; grid-template-columns: auto 160px auto; align-items: center; gap: 10px; margin-left: 10px; }
.xp b { font: 700 11px var(--px); color: #fff; letter-spacing: 1px; }
.xp small { font-size: 10px; color: var(--dim); }
.bar { height: 8px; border: 1px solid var(--line2); padding: 1px; }
.bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 6px); transition: width .6s steps(12); }
.topR { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.chip { background: rgba(0,0,0,.6); border: 1px solid var(--line2); color: var(--fg); font: 10px var(--px); padding: 9px 10px; cursor: pointer; letter-spacing: 1px; }
.chip:hover { border-color: #fff; }
.sq { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line2); color: #fff; text-decoration: none; background: rgba(0,0,0,.6); }

/* quests */
.quests { top: 74px; left: 18px; width: 250px; padding: 12px 14px; }
.qHead { display: flex; justify-content: space-between; align-items: center; }
.qHead b { font: 700 12px var(--px); letter-spacing: 2px; }
.mini { background: none; border: 1px solid var(--line2); color: #fff; width: 22px; height: 20px; cursor: pointer; font: 12px var(--mono); line-height: 1; }
#questList { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
#questList li { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; font-size: 11px; color: #cfcfcf; align-items: start; }
#questList li::before { content: ""; width: 10px; height: 10px; border: 1px solid var(--dim); margin-top: 3px; }
#questList li.done { color: var(--mute); text-decoration: line-through; }
#questList li.done::before { background: #fff; border-color: #fff; box-shadow: 0 0 8px #fff; }
#questList li em { font: 9px var(--px); color: var(--dim); font-style: normal; }
.quests.min #questList { display: none; }

/* location */
.loc { left: 18px; bottom: 20px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.loc small { font: 9px var(--px); color: var(--mute); letter-spacing: 2px; }
.loc b { font: 700 24px var(--px); color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.4); letter-spacing: 1px; }
.loc span { font-size: 11px; color: var(--dim); }

/* dock */
.dock { bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; background: rgba(0,0,0,.7); border: 1px solid var(--line2); }
.dock button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 8px 10px; background: transparent; border: 1px solid transparent; color: var(--dim); font: 10px var(--px); letter-spacing: 1px; cursor: pointer; }
.dock button i { font-style: normal; font-size: 16px; color: #fff; }
.dock button:hover, .dock button.on { color: #000; background: #fff; }
.dock button:hover i, .dock button.on i { color: #000; }

/* toast */
#toast { position: fixed; top: 76px; left: 50%; transform: translate(-50%, -20px); z-index: 30; background: #fff; color: #000; font: 700 11px var(--px); padding: 9px 14px; letter-spacing: 1px; opacity: 0; transition: .3s; pointer-events: none; box-shadow: 0 0 30px rgba(255,255,255,.5); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* sheets */
.sheet { position: fixed; z-index: 20; top: 74px; right: 18px; bottom: 96px; width: 380px; padding: 16px 18px; overflow: hidden auto; display: flex; flex-direction: column; gap: 12px; animation: slide .25s steps(5); }
.sheet.wide { width: 520px; }
.sheet[hidden] { display: none; }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.sHead { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--line2); padding-bottom: 10px; }
.sHead b { font: 700 14px var(--px); letter-spacing: 1px; color: #fff; }
.x { background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; }
.note { margin: 0; color: var(--dim); font-size: 11px; }
.tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.tabs button { background: transparent; border: 1px solid var(--line2); color: var(--dim); padding: 5px 9px; font: 10px var(--px); cursor: pointer; }
.tabs button.on, .tabs button:hover { color: #000; background: #fff; border-color: #fff; }
.wlist { display: flex; flex-direction: column; gap: 6px; }
.wrow { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); cursor: pointer; background: rgba(0,0,0,.5); text-align: left; color: inherit; font: inherit; }
.wrow:hover { border-color: #fff; }
.wrow img { width: 48px; height: 48px; image-rendering: pixelated; }
.wrow b { font: 700 13px var(--px); color: #fff; display: block; }
.wrow small { color: var(--dim); font-size: 11px; }
.pill { font: 9px var(--px); padding: 3px 6px; border: 1px solid var(--line2); color: var(--dim); letter-spacing: 1px; white-space: nowrap; }
.pill.hot { background: #fff; color: #000; border-color: #fff; }
.pill.seen { border-style: dashed; }

/* dossier */
.dImg { width: 100%; max-width: 240px; aspect-ratio: 1; image-rendering: pixelated; display: block; margin: 0 auto; }
#dInfo h3 { font: 700 26px var(--px); margin: 6px 0 0; color: #fff; }
#dInfo .tag { font: 10px var(--px); color: var(--dim); letter-spacing: 2px; margin: 0; }
#dInfo p { color: #cfcfcf; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 11px; margin: 10px 0; }
.kv span { color: var(--mute); }
.residents { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 14px; }

/* forms */
form { display: flex; flex-direction: column; gap: 11px; }
label { display: flex; flex-direction: column; gap: 5px; font: 10px var(--px); color: var(--dim); letter-spacing: 1px; min-width: 0; }
input, textarea, select { width: 100%; min-width: 0; background: #000; border: 1px solid var(--line2); color: #fff; padding: 9px 11px; font: 12px var(--mono); outline: none; border-radius: 0; }
input:focus, textarea:focus, select:focus { border-color: #fff; box-shadow: 0 0 14px rgba(255,255,255,.15); }
.row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.row label.btn { flex-direction: row; }
.row2 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.types { display: flex; flex-wrap: wrap; gap: 5px; }
#ownPrev { width: 34px; height: 34px; object-fit: cover; border: 1px solid var(--line2); }
details summary { font: 10px var(--px); color: var(--dim); cursor: pointer; letter-spacing: 1px; }
.launchSteps { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.launchSteps li { counter-increment: s; font: 9px var(--px); color: var(--mute); border: 1px solid var(--line); padding: 4px 7px; }
.launchSteps li::before { content: counter(s) " "; }
.launchSteps li.doing { color: #fff; border-color: #fff; animation: blink .8s steps(2) infinite; }
.launchSteps li.done { background: #fff; color: #000; border-color: #fff; }
.launchSteps li.fail { color: #fff; border-style: dashed; text-decoration: line-through; }
@keyframes blink { 50% { opacity: .2; } }
.result { border: 1px dashed var(--dim); padding: 12px; font-size: 12px; word-break: break-all; }

/* agents */
.agentList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.agent { display: flex; gap: 8px; align-items: center; padding: 7px; cursor: pointer; border: 1px solid var(--line); background: rgba(0,0,0,.5); color: inherit; font: inherit; text-align: left; min-width: 0; }
.agent:hover { border-color: var(--line2); }
.agent.on { border-color: #fff; box-shadow: inset 3px 0 0 #fff; }
.agent canvas { width: 28px; height: 28px; image-rendering: pixelated; flex: none; }
.agent div { min-width: 0; }
.agent b { display: block; font: 700 10px var(--px); color: #fff; overflow: hidden; text-overflow: ellipsis; }
.agent small { color: var(--dim); font-size: 10px; }
.term { display: flex; flex-direction: column; border: 1px solid var(--line); flex: 1; min-height: 300px; }
.termHead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.termHead canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.termHead b { display: block; font: 700 14px var(--px); color: #fff; }
.termHead small { color: var(--dim); font-size: 10px; }
.termHead .btn { margin-left: auto; }
.termLog { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.msg { max-width: 94%; font-size: 12px; }
.msg .who { font: 9px var(--px); color: var(--mute); letter-spacing: 1px; }
.msg .body { border-left: 2px solid var(--line2); padding: 3px 0 3px 10px; color: #dadada; white-space: pre-wrap; }
.msg.me { align-self: flex-end; text-align: right; }
.msg.me .body { border-left: 0; border-right: 2px solid #fff; padding: 3px 10px 3px 0; color: #fff; }
.idea { border: 1px solid var(--line2); padding: 8px 10px; margin-top: 6px; white-space: normal; }
.idea b { font: 700 13px var(--px); color: #fff; }
.idea .btn { margin-top: 6px; }
.coinRow { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--line); text-decoration: none; color: inherit; white-space: normal; }
.coinRow img { width: 24px; height: 24px; filter: grayscale(1) contrast(1.2); }
.coinRow div:nth-child(2) { flex: 1; }
.coinRow small { color: var(--dim); display: block; font-size: 10px; }
.termIn { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); }
.termIn span { color: #fff; font-weight: 700; }
.termIn input { border: 0; background: transparent; padding: 7px 0; box-shadow: none !important; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 12px; }
.chips button { background: transparent; border: 1px dashed var(--line2); color: var(--dim); font: 10px var(--mono); padding: 4px 8px; cursor: pointer; }
.chips button:hover { color: #fff; border-color: #fff; }
.cursor::after { content: "█"; animation: blink 1s steps(2) infinite; margin-left: 2px; }

/* token */
.tokenTop { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; }
.tokenTop img { width: 90px; border: 1px solid var(--line2); }
.tokenTop h3 { margin: 0 0 4px; font: 700 15px var(--px); color: #fff; }
.tokenTop p { margin: 0; font-size: 11px; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; margin: 0; font-size: 11px; }
dt { color: var(--mute); } dd { margin: 0; color: #fff; }
.ca { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line2); padding: 7px 9px; }
.ca span { font: 9px var(--px); color: var(--mute); }
.ca code { flex: 1; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
h4 { margin: 8px 0 0; font: 700 12px var(--px); letter-spacing: 2px; color: #fff; }
.road { list-style: none; margin: 0; padding: 0; }
.road li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.road i { font: 700 11px var(--px); color: var(--mute); font-style: normal; width: 22px; }
.road b { font: 700 12px var(--px); color: var(--dim); }
.road small { display: block; color: var(--mute); font-size: 11px; }
.road li.ok i, .road li.ok b { color: #fff; }
.road li.ok b::after { content: " ✓"; }
.fine { font-size: 10px; color: var(--mute); margin: 0; }

@media (max-width: 820px) {
  .xp { display: none; }
  .chip, #buyTop { display: none; }
  .top { padding: 10px 12px; }
  .brand span { font-size: 14px; }
  .quests { top: 62px; left: 10px; width: 210px; }
  .loc { display: none; }
  .dock { bottom: 10px; left: 10px; right: 10px; transform: none; justify-content: space-between; }
  .dock button { min-width: 0; flex: 1; padding: 7px 2px; font-size: 9px; }
  .sheet, .sheet.wide { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 72vh; padding: 14px; border-left: 0; border-right: 0; z-index: 25; }
  .agentList { grid-template-columns: 1fr 1fr; }
  .row3 { grid-template-columns: 1fr; }
}