:root {
  --ink: #ece4f2;
  --dim: #a69cb6;
  --panel: rgba(16, 12, 24, 0.94);
  --edge: #3a2f4a;
  --teal: #3af0e0;
  --pink: #ff4ab0;
  --sodium: #ffb040;
  --red: #ff4a6a;
  --green: #3aff80;
  --pad: max(12px, env(safe-area-inset-left));
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #08060c; color: var(--ink); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; font: 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
#view { position: fixed; left: 0; top: 0; image-rendering: pixelated; display: block; }
button { font: inherit; color: var(--ink); background: rgba(26, 18, 36, 0.86); border: 1px solid var(--edge); border-radius: 4px; padding: 6px 12px; cursor: pointer; }
button:disabled { opacity: 0.4; cursor: default; }
button.quiet { background: transparent; }

/* ---- the HUD ---- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#vitals { position: absolute; left: var(--pad); top: max(8px, env(safe-area-inset-top)); display: grid; gap: 4px; font-family: var(--mono); font-size: 12px; }
#charge { display: flex; gap: 2px; }
#charge i { width: 6px; height: 4px; background: rgba(255, 138, 32, 0.18); border: 1px solid rgba(255, 138, 32, 0.5); }
#charge i.on { background: #ff8a20; box-shadow: 0 0 5px #ff8a20; }
#cr { color: var(--sodium); text-shadow: 0 1px 2px #000; }
#where { position: absolute; left: 50%; transform: translateX(-50%); top: max(8px, env(safe-area-inset-top)); display: flex; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#where #clock { color: var(--teal); }
#topbtns { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); display: flex; gap: 6px; pointer-events: auto; }
#toasts { position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(8px, env(safe-area-inset-top)) + 44px); display: flex; flex-direction: column; align-items: center; gap: 3px; width: min(460px, 56vw); }
.toast { background: rgba(16, 12, 24, 0.8); border: 1px solid var(--edge); border-left: 3px solid var(--dim); padding: 3px 9px; transition: opacity 0.6s; font-size: 12px; }
.toast.good { border-left-color: var(--green); }
.toast.warn { border-left-color: var(--red); }
#bubbles .bubble { position: absolute; transform: translate(-50%, -100%); max-width: 220px; background: rgba(236, 228, 242, 0.95); color: #1a1420; padding: 4px 8px; border-radius: 3px; font-size: 12px; line-height: 1.3; }
#bubbles .bubble b { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #6a3a7a; }
#promptwrap { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 8px); display: grid; justify-items: center; gap: 3px; }
#prompt:not(:empty) { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; background: rgba(16, 12, 24, 0.82); border: 1px solid rgba(58, 240, 224, 0.5); color: var(--teal); padding: 3px 10px; }
#prompt.no:not(:empty) { border-color: rgba(255, 176, 64, 0.5); color: var(--sodium); }
#hold { width: 120px; height: 3px; }
#holdbar { height: 100%; width: 0; background: var(--sodium); box-shadow: 0 0 6px var(--sodium); }

/* ---- touch controls: shown once a touch is seen ---- */
#stickzone { position: fixed; left: 0; top: 60px; bottom: 0; width: 45vw; touch-action: none; }
#stick { position: fixed; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; border: 2px solid rgba(236, 228, 242, 0.25); background: rgba(16, 12, 24, 0.25); pointer-events: none; display: none; }
#stick.on { display: block; }
#knob { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%; background: rgba(236, 228, 242, 0.35); transform: translate(-50%, -50%); }
#pads { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); display: none; gap: 10px; align-items: flex-end; }
body.touch #pads { display: flex; }
#pads button { width: 64px; height: 64px; border-radius: 50%; background: rgba(26, 18, 36, 0.62); border: 2px solid rgba(166, 156, 182, 0.6); font-size: 12px; touch-action: none; padding: 0; }
#pads #bUse { border-color: rgba(58, 240, 224, 0.75); margin-bottom: 64px; }
#pads #bUse.idle { opacity: 0.45; }
#pads #bUse.no { border-color: rgba(255, 176, 64, 0.75); color: var(--sodium); }
#pads button.down { background: rgba(58, 240, 224, 0.35); }

/* ---- panels ---- */
/* every menu takes the whole screen */
#panel { position: fixed; inset: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: #100c18; display: flex; flex-direction: column; }
#panel[hidden] { display: none; }
#panel header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--edge); }
#panelCr { margin-left: auto; font-family: var(--mono); font-size: 15px; color: var(--sodium); padding: 3px 10px; border: 1px solid rgba(255, 176, 64, 0.45); border-radius: 4px; background: rgba(255, 176, 64, 0.08); }
#panelCr[hidden] { display: none; }
#panel h2 { margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
#panel h3 { margin: 14px 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); font-weight: 600; }
#panelBody { overflow-y: auto; padding: 10px 16px 16px; touch-action: pan-y; flex: 1; }
.sub { margin: 0 0 8px; color: var(--dim); }
.dim { color: var(--dim); font-size: 13px; }
.items { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.item { display: inline-flex; align-items: center; gap: 5px; }
.item i { width: 8px; height: 8px; display: inline-block; }
.item b { font-family: var(--mono); color: var(--sodium); font-weight: 400; }
.rows { display: grid; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(58, 47, 74, 0.6); }
.row small { display: block; color: var(--dim); font-size: 13px; }
.row small.gold { color: var(--sodium); }
.need { color: var(--red); }
.need.ok { color: var(--green); }
.tag { color: var(--dim); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.help p { color: var(--dim); }
.help b { color: var(--ink); font-weight: 600; }

/* ---- the inventory: tabs, a figure of you between its slots, gear cards ---- */
.tabs { display: flex; gap: 2px; margin: -2px 0 10px; border-bottom: 1px solid var(--edge); }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.tabs button.on { color: var(--teal); border-bottom-color: var(--teal); }
button.go { border-color: var(--teal); color: var(--teal); }
.sw { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }
.small { font-size: 12px; }

#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #08060c; color: var(--dim); font-family: var(--mono); letter-spacing: 0.1em; }
#loading[hidden] { display: none; }
#rotate { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  #rotate { display: grid; place-items: center; position: fixed; inset: 0; background: #08060c; color: var(--dim); font-style: italic; z-index: 9; }
}

/* salvage: icons and a grid of tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.tile { --r: var(--edge); display: grid; justify-items: center; gap: 2px; padding: 8px 6px; text-align: center; border: 1px solid color-mix(in srgb, var(--r) 45%, var(--edge)); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--r) 16%, transparent), rgba(16, 12, 24, 0.6) 70%); }
.tile img { width: 48px; height: 48px; image-rendering: pixelated; }
.tile b { font-weight: 500; font-size: 13px; }
.tile .n { font-family: var(--mono); color: var(--sodium); font-size: 13px; }
.tile small { color: var(--dim); font-size: 11px; }
.tbtns { display: flex; gap: 4px; margin-top: 4px; }
.tbtns button { padding: 3px 6px; font-size: 12px; }
img.ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; image-rendering: pixelated; }
img.rowico { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.row .grow { flex: 1; min-width: 0; }
.need { white-space: nowrap; margin-right: 6px; font-size: 13px; }
.need .have { font-style: normal; opacity: 0.8; }
.pay { display: grid; justify-items: end; gap: 4px; text-align: right; max-width: 48%; }
b.cr { color: var(--sodium); font-weight: 500; }
.tile.off { opacity: 0.45; }
#hud.flying > *:not(#toasts) { visibility: hidden; }
body:has(#hud.flying) #pads, body:has(#hud.flying) #stick { visibility: hidden; }

/* the map: the level as one picture, under buttons */
.mapwrap { position: relative; height: 100%; min-height: 240px; }
#panelBody:has(.mapwrap) { padding: 0; overflow: hidden; }
#mapcv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.mapbtns { position: absolute; right: 12px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mapbtns button { min-width: 44px; }
.maphint { position: absolute; left: 12px; bottom: 6px; margin: 0; color: var(--dim); font-size: 12px; pointer-events: none; }

/* ---- the detective: the objective line, talk, the test, the enhancer, the case file ---- */
#where { flex-wrap: wrap; justify-content: center; max-width: 52vw; row-gap: 2px; }
#obj { flex-basis: 100%; text-align: center; text-transform: none; letter-spacing: 0.02em; font-size: 11px; color: var(--sodium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#obj:empty { display: none; }
#obj { pointer-events: auto; cursor: pointer; text-decoration: underline dotted rgba(255, 176, 64, 0.5); text-underline-offset: 3px; }
.ask { border-left: 3px solid var(--teal); padding: 2px 0 6px 12px; margin: 10px 0; background: linear-gradient(90deg, rgba(58, 240, 224, 0.07), transparent 70%); }
.ask h3 { margin-top: 4px !important; }
.ask .buttons { margin-top: 6px; }
.obj { color: var(--sodium); font-family: var(--mono); font-size: 12px; margin: 6px 0; }
i.mark { color: var(--sodium); font-style: normal; }

.travel .rows { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 18px; }
/* the city map: the cross-section, and the card for the picked place */
.wmap #worldcv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.wminfo { position: absolute; left: 10px; right: 70px; bottom: 10px; pointer-events: auto; }
.wminfo > p { margin: 0; background: rgba(8, 6, 12, 0.8); padding: 6px 10px; display: inline-block; border: 1px solid var(--edge); }
.wmcard { display: flex; gap: 14px; align-items: center; justify-content: space-between; background: rgba(12, 9, 18, 0.92); border: 1px solid var(--edge); border-left: 3px solid var(--teal); padding: 8px 12px; max-width: 640px; }
.wmcard b { font-size: 16px; }
.wmcard small { display: block; color: var(--sodium); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; margin: 2px 0 4px; }
.wmcard p { margin: 0; color: var(--dim); font-size: 13px; }
.wmcard .tag { white-space: normal; text-align: right; max-width: 220px; }
.wmcard .tag.lock { color: var(--sodium); }

/* ---- the bench ---- */
#panelBody:has(.benchwrap) { padding-top: 6px; padding-bottom: 6px; }
.benchwrap { display: flex; gap: 10px; height: calc(100vh - 92px); min-height: 180px; }
#benchcv { flex: 1; min-width: 0; height: 100%; touch-action: none; display: block; border: 1px solid var(--edge); background: #05070a; image-rendering: pixelated; }
.benchside { width: 196px; flex: none; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.benchside .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.benchside .tools button { padding: 9px 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.benchside .tools button.on { border-color: var(--teal); color: var(--teal); background: rgba(58, 240, 224, 0.12); }
.benchside .tools button[data-lens] { grid-column: span 2; padding: 6px 4px; }
.benchside .sub { margin: 0; font-size: 13px; min-height: 3.6em; }
.benchside h3 { margin: 2px 0; font-size: 12px; }
.benchside .buttons { margin-top: auto; }
.part { --r: var(--edge); display: grid; gap: 1px; width: 100%; text-align: left; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--r) 50%, var(--edge)); border-left: 3px solid var(--r); background: rgba(16, 12, 24, 0.6); }
.part b { font-weight: 500; font-size: 13px; }
.part small { color: var(--dim); font-size: 11px; }
#benchtray { display: grid; gap: 4px; }
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
@media (max-height: 420px) { .benchside { width: 168px; } .benchside .tools button { padding: 7px 2px; } }

/* ---- heat: how close the precinct is to your door ---- */
#heat { display: flex; align-items: center; gap: 4px; color: var(--sodium); font-size: 9px; letter-spacing: 0.14em; }
#heat::before { content: "HEAT"; }
#heat > div { width: 92px; height: 5px; background: rgba(0, 0, 0, 0.6); border: 1px solid #5a3a1a; }
#heatfill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sodium), #ff6a3a); transition: width 0.4s; }
#heat.hot { color: #ff6a3a; }
#heat.hot #heatfill { background: linear-gradient(90deg, #ff6a3a, var(--red)); box-shadow: 0 0 6px var(--red); }
#heat.none { opacity: 0.5; }
#pads button.gone { visibility: hidden; }

/* ===================================================================
   The game's skin: Dragon Pixel (our own pixel font, fonts/dragon.woff),
   windows with cut corners over the dimmed game, chunky buttons, cards.
   Pixel sizes: 15px reads as text, 20px for titles and buttons, 30px big.
   =================================================================== */
@font-face { font-family: 'Dragon Pixel'; src: url('../fonts/dragon.woff') format('woff'); font-display: block; }
:root { --px: 'Dragon Pixel', var(--mono); --cut: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); --cut-s: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); --win: #140f1e; --card: #1d1629; --line: #3a2f4a; --ink2: #c8bcd8; }
html, body { font-family: var(--px); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: none; font-smooth: never; }
button { font-family: var(--px); font-size: 15px; line-height: 1.2; color: var(--ink); background: #241b33; border: 0; border-radius: 0; padding: 8px 14px; clip-path: var(--cut-s); box-shadow: inset 0 0 0 2px #4a3c5e, inset 0 -4px 0 rgba(0, 0, 0, 0.35); text-transform: uppercase; letter-spacing: 0.04em; }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 2px #4a3c5e, inset 0 2px 0 rgba(0, 0, 0, 0.35); }
button.go { background: var(--teal); color: #061416; box-shadow: inset 0 -4px 0 rgba(0, 60, 60, 0.45); }
button.quiet { background: transparent; box-shadow: inset 0 0 0 2px #3a2f4a; color: var(--dim); }
button:disabled { opacity: 0.35; }
.sub { color: var(--ink2); }
.dim, .row small, .tile small, .part small, .tog small { color: #9a8eae; font-size: 15px; }
b { font-weight: 400; color: #fff; }

/* the window: the game dimmed behind it, a frame with cut corners */
#panel { background: rgba(4, 3, 8, 0.72); padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); backdrop-filter: blur(2px); }
#panel header { background: var(--win); border-bottom: 0; padding: 8px 10px 6px 14px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); box-shadow: inset 0 2px 0 var(--teal); }
#panel h2 { font-family: var(--px); font-size: 20px; font-weight: 400; letter-spacing: 0.08em; color: var(--teal); display: flex; align-items: center; gap: 10px; }
#panel h2::before { content: ''; width: 8px; height: 8px; background: var(--pink); box-shadow: 0 0 6px var(--pink); flex: none; }
#panelBody { background: var(--win); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); box-shadow: inset 0 1px 0 var(--line), inset 0 -2px 0 #2a2238; padding: 10px 14px 16px; }
#panelClose { background: transparent; box-shadow: inset 0 0 0 2px #5a3a4a; color: #ff8aa0; padding: 4px 10px; font-size: 15px; }
#panelCr { font-family: var(--px); font-size: 20px; border: 0; background: rgba(255, 176, 64, 0.1); clip-path: var(--cut-s); padding: 2px 10px; }
#panel h3 { font-family: var(--px); font-size: 15px; font-weight: 400; letter-spacing: 0.1em; color: var(--pink); display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; }
#panel h3::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, rgba(255, 74, 176, 0.5), transparent); }
.ask h3::after, .jobcard h3::after { display: none; }

/* tabs: chips */
.tabs { border-bottom: 0; gap: 6px; margin: 0 0 12px; }
.tabs button { font-family: var(--px); font-size: 15px; background: #1d1629; color: var(--dim); border: 0; padding: 6px 14px; box-shadow: inset 0 0 0 2px #3a2f4a; }
.tabs button.on { background: var(--teal); color: #061416; box-shadow: none; }

/* cards: everything listed sits on one */
.ask, .row, .tile, .part { background: var(--card); clip-path: var(--cut); border: 0; box-shadow: inset 3px 0 0 var(--r, var(--teal)); }
.ask { padding: 8px 12px 10px 16px; margin: 0 0 10px; background: var(--card); }
.rows { gap: 6px; }
.row { padding: 8px 12px 8px 16px; border-top: 0; --r: var(--line); }
.tile { padding: 10px 8px; background: var(--card); box-shadow: inset 0 -3px 0 var(--r); }
.part { padding: 8px 12px; }
.tag { font-family: var(--px); font-size: 15px; color: #9a8eae; background: rgba(255, 255, 255, 0.05); padding: 2px 8px; clip-path: var(--cut-s); }
.help p { color: var(--ink2); } .help b { color: var(--teal); }

/* the HUD in the same hand */
#where, #prompt:not(:empty), #vitals, .toast, #bubbles .bubble, #panelCr { font-family: var(--px); }
#where { font-size: 15px; letter-spacing: 0.06em; }
#obj { font-size: 15px; }
.toast { font-size: 15px; clip-path: var(--cut-s); border: 0; box-shadow: inset 3px 0 0 var(--dim); background: rgba(20, 15, 30, 0.9); padding: 4px 12px; }
.toast.good { box-shadow: inset 3px 0 0 var(--green); } .toast.warn { box-shadow: inset 3px 0 0 var(--red); }
#bubbles .bubble { font-size: 15px; border-radius: 0; clip-path: var(--cut-s); background: #ece4f2; padding: 5px 10px; }
#bubbles .bubble b { font-size: 15px; color: #8a3a9a; }
#prompt:not(:empty) { font-size: 15px; clip-path: var(--cut-s); border: 0; box-shadow: inset 0 0 0 2px rgba(58, 240, 224, 0.6); padding: 4px 12px; }
#topbtns button { padding: 6px 12px; font-size: 15px; background: rgba(29, 22, 41, 0.86); }
#pads button { font-family: var(--px); font-size: 15px; clip-path: none; text-transform: uppercase; }
#cr { font-size: 15px; }
#heat { font-size: 15px; letter-spacing: 0.08em; }

/* ---- jobs: a card each, a face, where it stands, what it needs ---- */
.jobcard { --r: var(--teal); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px 12px 14px; margin: 0 0 10px; background: var(--card); clip-path: var(--cut); box-shadow: inset 3px 0 0 var(--r); }
.jobcard.done { --r: #5a4a6a; opacity: 0.6; }
.jobcard.ready { --r: var(--green); }
.jobcard .face { grid-row: span 2; width: 56px; height: 56px; image-rendering: pixelated; background: #0e0a14; clip-path: var(--cut-s); }
.jobcard h3 { margin: 0 !important; font-size: 20px !important; color: #fff !important; letter-spacing: 0.04em !important; }
.jobcard .state { color: var(--ink2); }
.jobcard .chip { display: inline-block; font-size: 15px; padding: 1px 8px; margin-left: 6px; background: rgba(255, 255, 255, 0.07); clip-path: var(--cut-s); color: var(--r); vertical-align: 2px; letter-spacing: 0.04em; }
.needs { grid-column: 1 / -1; display: grid; gap: 4px; margin-top: 6px; }
.need2 { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 10px 5px 6px; background: #150f1f; clip-path: var(--cut-s); }
.need2 img { width: 40px; height: 24px; image-rendering: pixelated; }
.need2 b { font-size: 15px; }
.need2 small { display: block; color: #9a8eae; font-size: 15px; }
.need2 .have { font-size: 15px; padding: 2px 8px; clip-path: var(--cut-s); white-space: nowrap; }
.need2.ok .have { background: rgba(58, 255, 128, 0.14); color: var(--green); }
.need2.no .have { background: rgba(255, 74, 106, 0.14); color: #ff8aa0; }
.need2.fine { opacity: 0.55; } .need2.fine .have { color: #9a8eae; }
.need2.unk .have { color: var(--sodium); background: rgba(255, 176, 64, 0.1); }
.heatbar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; color: var(--sodium); }
.heatbar i { flex: 1; max-width: 260px; height: 8px; background: #1d1629; clip-path: var(--cut-s); position: relative; }
.heatbar i::after { content: ''; position: absolute; inset: 0; width: var(--h); background: linear-gradient(90deg, var(--sodium), #ff4a6a); }
.part img.picon { width: 60px; height: 36px; image-rendering: pixelated; margin-bottom: 2px; }
.part .tbtns button { padding: 6px 14px; }
/* the tutorial: a card under money and heat, a box beside the bench's tools,
   a line at the top of a panel, and the button to press pulsing */
#guide { position: fixed; z-index: 3; left: var(--pad); top: calc(max(8px, env(safe-area-inset-top)) + 66px); width: min(250px, 27vw); font-family: var(--px); font-size: 15px; line-height: 1.35; color: var(--ink); background: rgba(16, 12, 24, 0.86); clip-path: var(--cut); box-shadow: inset 3px 0 0 var(--teal); padding: 8px 12px 10px 14px; pointer-events: none; }
#guide:empty, body:has(#hud.flying) #guide { display: none; }
#guide h4, .tutbox h4, .tutline h4 { margin: 0 0 4px; font-size: 15px; font-weight: 400; color: var(--pink); letter-spacing: 0.08em; text-transform: uppercase; }
#guide p, .tutbox p { margin: 0; }
#guide button { pointer-events: auto; margin-top: 8px; padding: 4px 10px; }
#guide .tutdone { color: var(--green); margin-bottom: 4px; }
#toasts { width: min(420px, 44vw); }
.tutbox, .tutline { background: #0e2226; clip-path: var(--cut-s); box-shadow: inset 3px 0 0 var(--teal); padding: 6px 10px 8px 12px; color: var(--ink); }
.tutline { margin: 0 0 10px; }
.tutbox h4 { text-transform: none; letter-spacing: 0; }
.tutbox:empty, #benchmsg:empty { display: none; }
.tut { animation: tutpulse 0.9s steps(2) infinite; }
@keyframes tutpulse { 50% { box-shadow: inset 0 0 0 3px var(--teal); filter: brightness(1.4); } }
/* the shelf, counted: a card a kind, a row a grade, a chip a state */
.stocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.stock { --r: var(--edge); display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 6px 10px; align-content: start; align-items: center; padding: 8px 12px 10px 14px; background: var(--card); clip-path: var(--cut); box-shadow: inset 3px 0 0 var(--r); }
.stock .picon { width: 60px; height: 36px; image-rendering: pixelated; }
.stock .sk { display: flex; align-items: baseline; gap: 8px; }
.stock .sk .n { margin-left: auto; color: var(--sodium); font-size: 20px; line-height: 1; }
.srows { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; }
.sr { display: contents; }
.sr i { font-style: normal; color: var(--g); }
.sr span { display: flex; flex-wrap: wrap; gap: 4px; }
em.st { font-style: normal; padding: 0 6px; clip-path: var(--cut-s); white-space: nowrap; }
em.st.ok { color: var(--green); background: rgba(58, 255, 128, 0.12); }
em.st.worn { color: var(--sodium); background: rgba(255, 176, 64, 0.12); }
em.st.dead { color: #9a8eae; background: rgba(255, 255, 255, 0.06); }
em.st.burnt { color: #ff8aa0; background: rgba(255, 74, 106, 0.14); }
.stocks + .dim { margin-top: 6px; }
.benchside > * { flex-shrink: 0; }

/* ---- the HUD without a gun: money and heat on a plate, two buttons and a stick ---- */
#vitals { background: rgba(16, 12, 24, 0.72); clip-path: var(--cut-s); padding: 6px 12px 7px; gap: 3px; }
#cr { font-size: 20px; line-height: 1; }
#heat { font-size: 15px; }
#heat > div { width: 70px; height: 6px; }
#pads { gap: 14px; align-items: flex-end; }
#pads button { --oct: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); --rim: rgba(166, 156, 182, 0.6); --fill: rgba(22, 16, 32, 0.6); position: relative; isolation: isolate; width: 68px; height: 68px; border-radius: 0; border: 0; clip-path: var(--oct); background: var(--rim); color: var(--ink); font-size: 15px; }
#pads button::before { content: ""; position: absolute; inset: 3px; clip-path: var(--oct); background: var(--fill); z-index: -1; }
#pads #bUse { --rim: rgba(58, 240, 224, 0.85); --fill: rgba(14, 40, 44, 0.72); width: 92px; height: 92px; margin-bottom: 40px; font-size: 20px; color: var(--teal); opacity: 1; }
#pads #bUse.idle { --rim: rgba(166, 156, 182, 0.5); --fill: rgba(22, 16, 32, 0.5); opacity: 0.4; color: var(--ink); }
#pads #bUse.no { --rim: rgba(255, 176, 64, 0.85); --fill: rgba(44, 30, 12, 0.7); color: var(--sodium); }
#pads #bUse:not(.idle):not(.no) { animation: usepulse 1.6s steps(4) infinite; }
@keyframes usepulse { 50% { --fill: rgba(30, 84, 88, 0.8); } }
#pads button.down { --fill: rgba(58, 240, 224, 0.5); animation: none; }
#stickhint { position: fixed; left: max(28px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom)); display: none; gap: 46px; padding: 18px 20px; font-family: var(--px); font-size: 20px; color: rgba(236, 228, 242, 0.32); background: rgba(16, 12, 24, 0.28); clip-path: var(--cut); pointer-events: none; }
body.touch #stickhint { display: flex; }
body:has(#stick.on) #stickhint, body:has(#hud.flying) #stickhint { visibility: hidden; }
#promptwrap { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 14px); }
.parts .part.tool { grid-column: 1 / -1; }
#where { background: rgba(16, 12, 24, 0.6); padding: 4px 14px 5px; clip-path: var(--cut-s); }
#toasts { top: calc(max(8px, env(safe-area-inset-top)) + 62px); }
#bubbles .bubble { box-shadow: inset 0 0 0 2px #6a2a7a; padding: 6px 11px; }
#bubbles .bubble:not(.new) { opacity: 0.82; }
#bubbles .bubble.new { z-index: 2; box-shadow: inset 0 0 0 2px #8a3a9a, inset 0 0 0 3px #f8f0ff; }
/* the dev drawer's look into a resident's mind (Tyrell's Palantír) */
/* Tyrell mode (dev): the minds on a map, a mind beside it */
#panelBody:has(.tm) { padding: 0; overflow: hidden; }
.tm { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tmbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; border-bottom: 1px solid #2a2238; }
.tmbar button { padding: 4px 10px; min-height: 32px; }
.tmbar select { font: inherit; color: #e8e0f0; background: #1a1424; border: 2px solid #3a3050; min-height: 32px; }
.tmclock { color: #3af0e0; min-width: 120px; }
.tmwhere { color: #b0a6c0; margin-left: 4px; }
.tmbody { flex: 1; display: flex; min-height: 0; }
.tmview { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; position: relative; touch-action: pan-y; }
.tmview canvas { display: block; cursor: pointer; }
.tmside { width: 340px; max-width: 46%; overflow-y: auto; padding: 4px 12px 12px; border-left: 1px solid #2a2238; font-size: 14px; }
.tmside h3 { margin: 10px 0 4px; }
.tmside p { margin: 4px 0; }
.tmlegend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; }
.tmlegend i, .tmlist i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.tmneeds { display: grid; gap: 3px; margin: 6px 0; }
.tmneeds div { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 6px; font-size: 12px; color: #b0a6c0; }
.tmneeds i { height: 6px; background: #241c30; display: block; }
.tmneeds b { height: 100%; display: block; }
.tmwhy div { padding: 3px 6px; margin: 2px 0; background: #1a1424; font-size: 12px; line-height: 1.35; }
.tmwhy div.pick { background: #12302e; box-shadow: inset 2px 0 0 #3af0e0; }
.tmwhy div.no { opacity: 0.6; }
.tmday div { font-size: 12px; padding: 1px 4px; }
.tmday div.cur { background: #2a2038; color: #ffd040; }
.tmday span { color: #8a809a; margin-right: 4px; }
.tmlog div { font-size: 12px; color: #c8c0d8; padding: 1px 0; }
.tmlist { display: flex; flex-wrap: wrap; gap: 4px; }
.tmlist button { padding: 3px 8px; font-size: 13px; }
@media (max-width: 760px) { .tmside { width: 46%; font-size: 13px; } .tmbar button { padding: 3px 7px; } }
pre.mind { white-space: pre-wrap; font: 12px/1.35 monospace; color: #cfe; background: #0008; padding: 6px 8px; margin: 6px 0 0; max-height: 180px; overflow: auto; }
pre.mind:empty { display: none; }

/* what Use just got: a line each over where it came from ("+1 coil") */
#gains .gain { position: absolute; transform: translateY(-100%); white-space: nowrap; pointer-events: none; display: flex; align-items: center; gap: 5px; font-family: var(--px); font-size: 15px; color: #f4ecff; text-shadow: 1px 0 0 #120c18, -1px 0 0 #120c18, 0 1px 0 #120c18, 0 -1px 0 #120c18, 1px 1px 0 #120c18; }
#gains .gain b { font-weight: normal; color: #ffd060; }
#gains .gain.cr b { color: #6af0a0; }
#gains .gain i { font-style: normal; color: #b0a6c0; }
#gains .gain img { height: 12px; width: auto; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 #120c18); }

/* the dev drawer (dev.js, on Tycho's: its own compact look, in the game's
   colors): docked at the right, with a panel opened beside it making room */
.dev { --dv-acc: var(--teal); --dv-hi: #ffd040; --dv-bg: rgba(10, 8, 16, 0.94); --dv-line: #2e2640; --dv-btn: #1c1628; --dv-fg: #e4dcee; --dv-dim: #9a8eae; }
.dev .dev-goto button.room::before { content: '↳ '; color: var(--dv-dim); }
.dev .dev-goto .dev-chips { margin: 2px 0; }
.dev details.dev-folk > .buttons { margin: 2px 0 6px; }
body.dev-on #panel { right: var(--dev-right, 0px); }
#dev-layer { z-index: 1; }
#dev-tag { bottom: max(4px, env(safe-area-inset-bottom)); }

/* talk (talk.js): a thread, docked on the right with the two of you in view
   on the left: their face and name, then what's been said, their bubbles on
   the left and yours on the right, said aloud as it comes (Tycho's typer;
   the answers wait till it's done), then the answers, one to a line, each
   with how it comes at them; a job's take and hand-back the main button */
#panel.talking { align-items: flex-end; background: linear-gradient(90deg, rgba(4, 3, 8, 0) 30%, rgba(4, 3, 8, 0.55) 46%, rgba(4, 3, 8, 0.78) 100%); backdrop-filter: none; }
#panel.talking header, #panel.talking #panelBody { width: min(56vw, 620px); }
#panel.talking header { display: none; }
#panel.talking #panelBody { display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px 10px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 2px 0 var(--teal); }
body:has(#panel.talking:not([hidden])) #pads, body:has(#panel.talking:not([hidden])) #stickhint, body:has(#panel.talking:not([hidden])) #promptwrap { visibility: hidden; }
.tk { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 8px; }
.tk-head { display: flex; align-items: center; gap: 10px; flex: none; }
.tk-face { width: 56px; height: 56px; image-rendering: pixelated; background: var(--card); clip-path: var(--cut-s); box-shadow: inset 0 -3px 0 var(--teal); flex: none; }
.tk-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-who b { font-family: var(--px); font-size: 20px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.tk-who small { font-family: var(--px); font-size: 15px; color: #9a8eae; }
.tk-x { flex: none; align-self: flex-start; min-width: 40px; padding: 4px 10px; }
.talk.tk-log { flex: 1 1 auto; min-height: 64px; overflow-y: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 2px 2px 4px; touch-action: pan-y; cursor: pointer; }
.tk-log > :first-child { margin-top: auto; } /* (a short thread sits down by the answers) */
.tk-line { margin: 0; max-width: 84%; padding: 6px 11px 7px; font-family: var(--px); font-size: 15px; line-height: 1.35; clip-path: var(--cut-s); }
.tk-line b { display: block; font-weight: 400; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1px; }
.tk-line.them { align-self: flex-start; background: var(--card); box-shadow: inset 3px 0 0 var(--teal); color: var(--ink); }
.tk-line.them b { color: var(--teal); }
.tk-line.you { align-self: flex-end; background: rgba(255, 176, 64, 0.1); box-shadow: inset -3px 0 0 var(--sodium); color: #e8dcc8; text-align: right; }
.tk-line.you b { color: var(--sodium); }
.tk-line.you i { display: block; font-style: normal; font-size: 15px; color: #9a8eae; text-transform: lowercase; }
.tk-line.you i.well { color: var(--green); } .tk-line.you i.badly { color: #ff8aa0; }
.tk-note { align-self: center; margin: 2px 0; font-family: var(--px); font-size: 15px; color: var(--teal); text-align: center; }
.tk-note::before { content: '✎ '; }
.tk-aside { align-self: center; margin: 0; font-family: var(--px); font-size: 15px; color: #9a8eae; text-align: center; }
.tk-card .ask { margin: 2px 0; }
.tk-say { flex: none; max-height: 52%; overflow-y: auto; transition: opacity 0.15s; }
#panel.typing .tk-say { opacity: 0; pointer-events: none; transition: none; }
.tk-wait, .tk-unsaid { visibility: hidden; }
.buttons.answers { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 0; }
.answers button { text-align: left; display: flex; align-items: baseline; gap: 10px; }
.answers button small { margin-left: auto; font-size: 15px; color: #9a8eae; text-transform: lowercase; }
.answers button small.how-warm { color: #ff8ac8; } .answers button small.how-joke { color: #ffe070; } .answers button small.how-ask { color: var(--teal); }
.answers button small.how-haggle { color: var(--sodium); } .answers button small.how-bluff { color: #b89aff; } .answers button small.how-bribe { color: var(--green); }
.answers button.go small { color: #0b3a3a; }
.tk-foot { margin-top: 8px; }
@media (max-width: 699px) {
  #panel.talking { background: rgba(4, 3, 8, 0.72); }
  #panel.talking header, #panel.talking #panelBody { width: 100%; }
}

/* ---- the notebook's People page (known.js): a card each, their face, what
   you remember of them, how well you know each other and how they stand with
   you, what they've done for you, and the work you've done for them ---- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 8px; align-items: start; }
.pcard { --r: var(--line); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 12px; padding: 10px 12px 12px 14px; background: var(--card); clip-path: var(--cut); box-shadow: inset 3px 0 0 var(--r); }
.pcard.well { --r: var(--teal); }
.pcard .face { width: 56px; height: 56px; image-rendering: pixelated; background: #0e0a14; clip-path: var(--cut-s); box-shadow: inset 0 -3px 0 var(--r); display: block; }
.pc-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-who h3 { margin: 0 !important; font-size: 20px !important; color: #fff !important; letter-spacing: 0.04em !important; display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0 10px !important; }
.pc-who h3::after { display: none !important; }
.pc-who h3 small { color: #9a8eae; font-size: 15px; letter-spacing: 0; text-transform: none; }
.pc-know { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pc-know .chip { font-size: 15px; padding: 1px 8px; background: rgba(58, 240, 224, 0.1); color: var(--teal); clip-path: var(--cut-s); }
.pc-know .chip.st { background: rgba(255, 138, 200, 0.1); color: #ff8ac8; }
.pc-meter { display: flex; align-items: center; gap: 8px; }
.pc-meter i { flex: 0 0 90px; height: 6px; background: #150f1f; clip-path: var(--cut-s); position: relative; }
.pc-meter i::after { content: ''; position: absolute; inset: 0; width: var(--f); background: linear-gradient(90deg, #2a8a84, var(--teal)); }
.pc-meter small { color: #9a8eae; font-size: 15px; }
.pc-notes, .pc-none, .pc-flags, .pc-jobs { grid-column: 1 / -1; }
.pc-notes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; padding: 6px 10px; background: #150f1f; clip-path: var(--cut-s); }
.pc-notes dt { color: var(--pink); white-space: nowrap; }
.pc-notes dt::before { content: '✎ '; color: var(--teal); }
.pc-notes dd { margin: 0; color: var(--ink2); }
.pc-none { margin: 0; }
.pc-flags p { margin: 0; }
.pc-flags .good { color: var(--green); }
.pc-flags .warn { color: #ff8aa0; }
.pc-jobs { margin-top: 0; }
.pcard .need2.fine { opacity: 0.8; } .pcard .need2.fine .have { color: var(--ink2); }
.pc-need { margin: -2px 0 2px 18px; }
.pc-need > summary { cursor: pointer; list-style: none; color: var(--sodium); padding: 2px 0; }
.pc-need > summary::-webkit-details-marker { display: none; }
.pc-need > summary::before { content: '▸ '; }
.pc-need[open] > summary::before { content: '▾ '; }
.pc-need .needs { margin-top: 4px; }
/* their trade, when they know you: a better price */
p.deal { margin: -2px 0 8px; color: var(--sodium); }
.tbtns button s { opacity: 0.55; }
.answers button small { white-space: nowrap; }
.answers button small.how-recall { color: var(--teal); }