:root {
  --void: #12100c;
  --paper: #1b1712;
  --paper-2: #221c16;
  --raise: #2c241c;
  --ink: #e8dcc8;
  --ink-2: #a89478;
  --faint: #6e5c48;
  --line: #3a3026;
  --rust: #c45c2a;
  --rust-2: #e07838;
  --sand: #c8a86a;
  --wafer: #4ec8d4;
  --power: #f0c040;
  --mars: #d45a32;
  --ok: #7dbe6a;
  --bad: #d4544a;
  --font: "Segoe UI", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Cascadia Mono", "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box }
html, body { margin: 0; background: var(--void); color: var(--ink); font-family: var(--font); }
a { color: var(--wafer); text-decoration: none }
a:hover { color: var(--sand); text-decoration: underline }
:focus-visible { outline: 2px solid var(--power); outline-offset: 2px }
button, .btn {
  font-family: var(--font); font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  background: var(--rust); color: #1c1008; border: 1px solid var(--rust-2);
  padding: .55rem .9rem; min-height: 32px; cursor: pointer;
}
button:hover, .btn:hover { background: var(--rust-2) }
button.ghost { background: transparent; color: var(--ink); border-color: var(--line) }
input, select {
  background: var(--void); color: var(--ink); border: 1px solid var(--line);
  padding: .4rem .5rem; font: inherit; min-height: 32px;
}
.hud {
  display: flex; gap: .8rem 1.2rem; flex-wrap: wrap; align-items: center;
  padding: .45rem .7rem; background: var(--paper-2); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
}
.hud b { color: var(--sand) }
.hud .wafer, .wafer { color: var(--wafer) }
#view { min-height: 0; height: 100%; background: #0e0c09 }
.play #view { position: absolute; inset: 0; height: auto; }
#mini {
  display: block; width: 128px; height: 128px; margin: 0 0 .8rem;
  border: 1px solid var(--line); cursor: crosshair; image-rendering: pixelated;
}
.log { font-family: var(--mono); font-size: 11px; color: var(--ink-2); white-space: pre-wrap }
.inv { font-family: var(--mono); font-size: 12px; line-height: 1.55 }
.err { color: var(--bad) }
.ok { color: var(--ok) }
#win {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: color-mix(in srgb, var(--void) 72%, transparent);
  pointer-events: none; opacity: 0; transition: opacity .35s;
}
#win.show { opacity: 1; pointer-events: auto; }
.win-card {
  max-width: 28rem; margin: 0 auto; padding: 1.4rem 1.6rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--mars); text-align: center;
}
.win-card h1 {
  margin: 0 0 .6rem; font-size: 1.35rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mars);
}
.win-card p { margin: .35rem 0; line-height: 1.45; }
.win-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.era-chip {
  display: inline-block; margin-left: .45rem; padding: .1rem .4rem;
  border: 1px solid var(--line); color: var(--sand); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
}

body.play-body { height: 100vh; overflow: hidden; }
.topbar {
  display: flex; gap: .8rem 1.1rem; flex-wrap: wrap; align-items: center;
  padding: .4rem .7rem; background: var(--paper-2); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
}
.topbar .hint { color: var(--sand); }
.res-row { display: flex; gap: .85rem; flex-wrap: wrap; }
.res { color: var(--ink); display: flex; align-items: center; gap: .35rem; transition: color .2s; }
.res b { color: var(--sand); }
.res.pop, .res.pop b { color: var(--ok); }
.note {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%) translateY(-6px);
  z-index: 5; pointer-events: none;
  padding: .5rem 1.1rem; min-width: 8rem; text-align: center;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border: 1px solid var(--line); color: var(--ok);
  font-family: var(--mono); font-size: 18px; letter-spacing: .03em;
  opacity: 0; transition: opacity .12s, transform .12s;
}
.note.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.note.bad { color: var(--bad); }
.task {
  position: absolute; top: 48px; left: 8px; z-index: 4; pointer-events: none;
  max-width: min(28rem, 70vw);
  padding: .4rem .7rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--line); color: var(--sand);
  font-family: var(--mono); font-size: 13px;
}
.topbar .hint.bad { color: var(--bad); }
.swatch { width: 10px; height: 10px; display: inline-block; border: 1px solid var(--line); }
.play {
  position: absolute; inset: 0;
}
.topbar { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.topbar a, .topbar span { pointer-events: auto; }
.topbar { top: 0; background: color-mix(in srgb, var(--paper-2) 88%, transparent); }
.dock {
  display: none;
  position: absolute; top: 48px; right: 8px; bottom: 120px; width: 240px; z-index: 3;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border: 1px solid var(--line); overflow: auto; padding: .65rem;
}
.dock.open { display: block; }
.panel {
  position: absolute; top: 52px; left: 12px; z-index: 5; width: min(440px, 92vw);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border: 1px solid var(--line); padding: .75rem; max-height: calc(100vh - 140px); overflow: auto;
}
.panel[hidden] { display: none !important; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.panel-head h2 { margin: 0; font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.panel h3 { font-family: var(--mono); font-size: .68rem; color: var(--ink-2); margin: .7rem 0 .35rem; text-transform: uppercase; letter-spacing: .12em; }
.panel button, .panel select { width: 100%; margin: 0 0 .3rem; }
.panel-close { width: auto !important; }
#prodGraph { width: 100%; height: auto; background: var(--void); border: 1px solid var(--line); }
.hotbars {
  position: absolute; left: 50%; bottom: 10px; z-index: 4;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  pointer-events: none;
}
.hotbars .hotbar { position: static; left: auto; bottom: auto; transform: none; pointer-events: auto; }
.hotbar-2 .tool { width: 44px; height: 44px; }
.dock h2 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sand); margin: .7rem 0 .4rem;
}
.dock h2:first-child { margin-top: 0; }
.dock button, .dock select { width: 100%; margin: 0 0 .3rem; }
.hotbar {
  position: absolute; left: 50%; bottom: 10px; z-index: 4;
  transform: translateX(-50%);
  display: flex; gap: 3px; align-items: stretch;
  padding: 6px 7px 7px;
  background: var(--paper);
  border: 1px solid var(--void);
  box-shadow: 0 4px 14px #000a, inset 0 1px 0 var(--raise);
  pointer-events: auto;
}
.hotbar .tool {
  position: relative;
  width: 52px; height: 52px; min-height: 0; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--void);
  color: var(--ink);
  border: 1px solid var(--void);
  box-shadow: inset 0 1px 0 var(--raise);
  text-transform: none; letter-spacing: 0; font-size: 0;
}
.hotbar .tool:hover { background: var(--paper-2); border-color: var(--sand); }
.hotbar .tool:active { background: var(--void); }
.hotbar .tool:focus-visible { outline: 2px solid var(--power); outline-offset: 2px; }
.hotbar .tool.on {
  border-color: var(--power);
  box-shadow: inset 0 0 0 2px var(--power), inset 0 1px 0 var(--raise);
}
.hotbar .tool.locked { opacity: .38; pointer-events: none; }
.hotbar .tool .slot-count {
  position: absolute; right: 2px; bottom: 1px;
  font: 700 9px/1 ui-monospace, Consolas, monospace;
  color: var(--sand); text-shadow: 0 1px 0 #000;
}
.hotbar .tool kbd {
  position: absolute; top: 2px; left: 3px; z-index: 1;
  font-family: var(--mono); font-size: 9px; line-height: 1;
  color: var(--ink); border: 0; padding: 0;
  text-shadow: 0 1px 2px #000;
}
.hotbar .tool::after {
  content: attr(title);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: .2rem .4rem;
  background: var(--paper); border: 1px solid var(--line); color: var(--sand);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none; opacity: 0;
}
.hotbar .tool:hover::after, .hotbar .tool:focus-visible::after { opacity: 1; }
.slot-svg { width: 30px; height: 30px; display: block; margin-top: 6px; }
.slot-spr {
  width: 36px; height: 36px; margin-top: 6px; display: block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  --fit: max(var(--sw), var(--sh));
  --sc: calc(36 / var(--fit));
  background-size: calc(256px * var(--sc)) calc(256px * var(--sc));
  background-position: calc(-1px * var(--sx) * var(--sc)) calc(-1px * var(--sy) * var(--sc));
}
.slot-tag {
  position: absolute; right: 3px; bottom: 2px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .02em;
  color: var(--sand); text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
}
.tile-tip {
  position: absolute; z-index: 6; pointer-events: none;
  padding: .28rem .5rem;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border: 1px solid var(--line); color: var(--sand);
  font-family: var(--mono); font-size: 13px; white-space: nowrap;
}
.meter {
  height: 6px; margin: .25rem 0 .1rem; background: var(--void); border: 1px solid var(--line);
}
.meter i {
  display: block; height: 100%; width: 0; background: var(--sand);
}
.logo { color: var(--rust-2); }
header.top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.faint { color: var(--ink-2); }
.queue-row {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .15rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.queue-row button.ghost {
  padding: .05rem .35rem; font-size: .72rem; min-width: auto;
}
.inv-row {
  display: flex; justify-content: space-between; gap: .5rem; cursor: pointer;
  padding: .1rem .15rem; border-radius: 2px;
}
.inv-row:hover { background: color-mix(in srgb, var(--sand) 12%, transparent); }
.inv-row.cart { color: var(--sand); }
.topic-cost { margin: .35rem 0 .5rem; line-height: 1.45; }
.cart-chip {
  display: inline-block; margin: 0 .2rem .15rem 0; padding: .05rem .35rem;
  border: 1px solid var(--line); background: var(--raise); font-size: .72rem;
}
.hub-shell { max-width: 1100px; margin: 0 auto; padding: 1.1rem 1.3rem 5rem; }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hub-panel { border: 1px solid var(--line); background: var(--paper); min-height: 12rem; }
.hub-panel h2 {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand); margin: 0; padding: .55rem .7rem; border-bottom: 1px solid var(--line);
  background: var(--raise);
}
.hub-panel .body { padding: .7rem; }
.world { border: 1px solid var(--line); background: var(--paper-2); padding: .65rem .7rem; margin: 0 0 .5rem; }
.world h3 { margin: 0 0 .2rem; color: var(--sand); }
.world p { margin: 0 0 .45rem; color: var(--ink-2); font-family: var(--mono); font-size: .78rem; }
.pub-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .78rem; }
.pub-table th, .pub-table td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--line); }
.pub-table th { color: var(--sand); font-weight: 500; }
.hub-dock {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap;
  padding: .55rem; background: var(--paper-2); border-top: 1px solid var(--line);
}
.row { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 .8rem; }
.hub-dock .btn, .hub-dock button { min-width: 7.5rem; }
.hub-dock #create {
  background: var(--rust-2); border-color: var(--sand); color: #1c1008;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--power) 35%, transparent);
}
.topbar #queue .meter { width: 7rem; display: inline-block; vertical-align: middle; margin-left: .4rem; }
.topbar #queue .meter i { background: var(--wafer); }
@media (max-width: 640px) {
  .hotbar .tool { width: 40px; height: 40px; }
  .slot-spr, .slot-svg { width: 26px; height: 26px; }
}
@media (max-width: 480px) {
  html, body { font-size: 14px; }
  .hud, .topbar { padding: .35rem .5rem; gap: .5rem .7rem; }
  .res-row { gap: .55rem; }
  .task { max-width: min(20rem, 86vw); font-size: 11px; top: 42px; left: 6px; }
  .note { font-size: 14px; padding: .35rem .8rem; }
  .panel { left: 6px; width: min(440px, 96vw); padding: .6rem; max-height: calc(100vh - 120px); }
  .dock { right: 6px; bottom: 100px; width: 180px; padding: .5rem; }
  .hotbar { padding: 4px 5px 5px; gap: 2px; }
  .hotbar .tool { width: 36px; height: 36px; }
  .hotbar-2 .tool { width: 36px; height: 36px; }
  .slot-svg { width: 22px; height: 22px; margin-top: 4px; }
  .slot-spr { width: 26px; height: 26px; margin-top: 4px; }
  .hotbars { bottom: 6px; }
  .hub-shell { padding: .75rem .7rem 4.5rem; }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-dock { gap: .35rem; padding: .4rem; }
  .hub-dock .btn, .hub-dock button { min-width: auto; flex: 1 1 40%; }
  .pub-table { font-size: .72rem; }
  .pub-table th, .pub-table td { padding: .25rem .3rem; }
  .win-card { padding: 1rem; margin: .75rem; }
}