:root {
  --peat: #141d1c;
  --peat-2: #1b2624;
  --text: #dde4df;
  --muted: #87968f;
  --dim: #5c6b65;
  --amber: #e0a94b;
  --hair: rgba(221, 228, 223, 0.12);
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--peat);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* One column. The side panel is gone — buying is on the shelf and selling is at the
   stall, so nothing needed a third surface, least of all one taking 304px of map. */
#app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
}

header {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--hair);
}

footer {
  grid-column: 1 / -1;
}

/* A shelf under the map, not a screen in front of it — the map is where the choice is
   now made, so it has to stay whole and reachable. */
#roster {
  flex: none;
  width: 100%;
  z-index: 20;
}

#roster[hidden] {
  display: none;
}

header h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#readout {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}

#readout b {
  color: var(--amber);
  font-weight: 500;
}

/* The purse. Loud on purpose — it is the one figure the player is spending against, and
   it was not on the screen at all. */
#readout i {
  font-style: normal;
  font-weight: 700;
  color: #f0c46a;
  background: rgba(224, 169, 75, 0.14);
  border: 1px solid rgba(224, 169, 75, 0.35);
  border-radius: 2px;
  padding: 1px 7px;
  margin-right: 2px;
}

#seed-readout {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  flex: none;
}

#reset {
  display: flex;
  gap: 5px;
  flex: none;
}

#reset button {
  font-family: var(--sans);
  font-size: 11.5px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--hair);
  border-radius: 2px;
  padding: 4px 10px;
  cursor: pointer;
}

#reset button:hover {
  color: var(--text);
  border-color: rgba(221, 228, 223, 0.3);
}

#readout em {
  color: var(--amber);
  font-style: normal;
}

/* The stage is the room; the board is the map inside it, centred and no bigger than it
   has to be. Everything absolutely positioned over the map hangs off the board, so on a
   wide window the tool rail does not end up thirty centimetres from the thing it acts on. */
#stage {
  grid-column: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Auto margins above and below take all the slack the snapped scale leaves over, which
   centres the map and pushes the shelf to the very bottom in one rule. */
#board {
  position: relative;
  flex: none;
  margin: auto 0;
}

#world {
  display: block;
  image-rendering: pixelated;
  /* The view sizes this to the largest whole multiple of the world that fits the stage,
     and falls back to a fractional fit on a screen too small for one. Input is mapped
     through toWorld(), which divides by the displayed size, so a scaled map still hits
     where the player aims. */
  touch-action: none;
}

/* The colony's situation, stated plainly. Sits over the terrarium because it is about
   what you are looking at, not a reading you have to go and find. */
#diagnosis {
  position: absolute;
  left: 158px;
  top: 12px;
  right: 14px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
  pointer-events: none;
}

#diagnosis:empty {
  display: none;
}

.dx-plain {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.dx-reading,
.dx-remedy {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
}

.dx-remedy {
  color: var(--muted);
  font-style: italic;
}

#diagnosis[data-level="dire"] .dx-plain,
#diagnosis[data-level="dire"] .dx-remedy {
  color: var(--rose);
}

#diagnosis[data-level="warning"] .dx-plain {
  color: var(--amber);
}

#card {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 268px;
  background: rgba(11, 15, 20, 0.93);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 10px 12px 12px;
}

#card[hidden] {
  display: none;
}

#card input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--hair);
  color: var(--amber);
  font-family: var(--sans);
  font-size: 14px;
  padding: 2px 0 4px;
  margin-bottom: 8px;
}

#card input:focus {
  outline: none;
  border-bottom-color: var(--amber);
}

#card input::placeholder {
  color: var(--dim);
  font-style: italic;
}

.card-body {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.65;
}

.card-body > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px;
}

.card-body span:first-child {
  color: var(--dim);
}

.card-body span:last-child {
  color: var(--text);
}

.meter {
  color: var(--amber);
  letter-spacing: -1px;
}

footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 18px;
  border-top: 1px solid var(--hair);
  font-size: 12.5px;
  color: var(--muted);
}

/* A rail down the left of the map. The placeables are dragged out of it onto the
   ground, so it sits beside the thing they are dropped on rather than under it. */
#tools {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 15;
}

#tools button {
  font-family: var(--sans);
  font-size: 12px;
  background: rgba(11, 15, 20, 0.82);
  color: var(--muted);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 132px;
  text-align: left;
  backdrop-filter: blur(2px);
}

#tools button[data-draggable="true"] {
  cursor: grab;
  touch-action: none;
}

#tools button[data-dragging="true"] {
  cursor: grabbing;
  opacity: 0.45;
}

#tools .tool-name {
  flex: 1;
}

/* Two labels are in the markup; exactly one is ever shown. */
#tools .tool-short { display: none; }

#tools button:hover {
  color: var(--text);
  border-color: rgba(221, 228, 223, 0.3);
}

#tools button .key {
  font-family: var(--mono);
  font-size: 9px;
  opacity: 0.5;
  margin-left: 5px;
  text-transform: uppercase;
}

#tools button[aria-pressed="true"] {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(224, 169, 75, 0.12);
}

/* The destructive tools should not look like the neutral one. */
#tools[data-tool="hammer"] button[aria-pressed="true"] {
  border-color: var(--rose);
  color: var(--rose);
  background: rgba(196, 87, 107, 0.14);
}

#tools[data-tool="smoke"] button[aria-pressed="true"] {
  border-color: #9a8bc4;
  color: #bca6e8;
  background: rgba(154, 139, 196, 0.16);
}

#tools[data-tool="pellet"] button[aria-pressed="true"] {
  border-color: #c49656;
  color: #e0b878;
  background: rgba(196, 150, 84, 0.16);
}

#tools[data-tool="dish"] button[aria-pressed="true"] {
  border-color: #5f9ab4;
  color: #8fc4d8;
  background: rgba(95, 154, 180, 0.16);
}

#tools[data-tool="fire"] button[aria-pressed="true"] {
  border-color: #e0803c;
  color: #f2a856;
  background: rgba(224, 128, 60, 0.16);
}

#hint {
  flex: 1;
  min-width: 0;
}

footer .keys {
  flex: none;
}

/* --- out of room ----------------------------------------------------------------------
   Keyed off an attribute the page sets from the space it actually measures, not off a
   width breakpoint. A current phone in landscape is about 930 CSS pixels wide, so every
   `max-width: 860px` rule below used to miss it entirely and it got the desktop layout on
   a viewport 380px tall. "tall" and "wide" are both cramped; they differ only in which
   way there is room to put things.

   Shared: everything that is about there being less of everything. */
#app[data-layout="tall"] header,
#app[data-layout="wide"] header {
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 5px 10px;
  align-items: center;
}

/* The browser is already showing this page's name in its own chrome, and the line has to
   hold the purse, the state of the colony and two controls. */
#app[data-layout="tall"] header h1,
#app[data-layout="wide"] header h1 {
  display: none;
}

#app[data-layout="tall"] #readout,
#app[data-layout="wide"] #readout {
  font-size: 10px;
  line-height: 1.4;
}

#app[data-layout="tall"] #readout i,
#app[data-layout="wide"] #readout i {
  padding: 1px 5px;
}

#app[data-layout="tall"] #seed-readout,
#app[data-layout="wide"] #seed-readout {
  margin-left: 0;
  font-size: 9px;
}

#app[data-layout="tall"] #reset button,
#app[data-layout="wide"] #reset button {
  padding: 7px 10px;
  font-size: 11.5px;
}

#app[data-layout="tall"] #card,
#app[data-layout="wide"] #card {
  width: min(290px, calc(100% - 28px));
}

/* OUT of the map. Six stacked buttons come to 223px and the map on a phone is about
   200px, so as an overlay this was not sitting on the map, it was taller than the map. */
#app[data-layout="tall"] #tools,
#app[data-layout="wide"] #tools {
  position: static;
  transform: none;
  backdrop-filter: none;
}

#app[data-layout="tall"] #tools .tool-long,
#app[data-layout="wide"] #tools .tool-long {
  display: none;
}

#app[data-layout="tall"] #tools .tool-short,
#app[data-layout="wide"] #tools .tool-short {
  display: block;
}

#app[data-layout="tall"] #tools .tool-name,
#app[data-layout="wide"] #tools .tool-name {
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app[data-layout="tall"] #tools button .key,
#app[data-layout="wide"] #tools button .key {
  display: none;
}

/* The reading and the remedy are a second and third line laid over a short map. The plain
   sentence says what to do; the figures behind it are a desktop luxury. */
#app[data-layout="tall"] .dx-reading,
#app[data-layout="tall"] .dx-remedy,
#app[data-layout="wide"] .dx-reading,
#app[data-layout="wide"] .dx-remedy {
  display: none;
}

#app[data-layout="tall"] .dx-plain,
#app[data-layout="wide"] .dx-plain {
  font-size: 12.5px;
}

/* --- tall: a column, the rail as a row under the map --------------------------------- */
#app[data-layout="tall"] footer {
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 5px 10px;
  font-size: 10.5px;
}

#app[data-layout="tall"] footer .keys {
  display: none;
}

#app[data-layout="tall"] #tools {
  order: 2;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  gap: 3px;
  padding: 5px 4px;
}

#app[data-layout="tall"] #tools button {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 2px;
  font-size: 10.5px;
  justify-content: center;
  text-align: center;
}

#app[data-layout="tall"] #board {
  order: 1;
  margin: 0 auto;
}

/* The shelf takes what is left after the map rather than a flat slice of the screen. The
   map is width-bound here, so its height is settled before the shelf is asked for
   anything. The view knows not to reserve room for a child that grows. */
#app[data-layout="tall"] #roster {
  order: 3;
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#app[data-layout="tall"] #diagnosis {
  left: 8px;
  right: 8px;
  top: 8px;
  gap: 0;
}

/* --- wide: a row, because sideways there is width and no height ----------------------- */
#app[data-layout="wide"] footer {
  display: none;
}

#app[data-layout="wide"] #stage {
  flex-direction: row;
  align-items: stretch;
}

#app[data-layout="wide"] #tools {
  order: 1;
  flex-direction: column;
  justify-content: center;
  width: auto;
  padding: 4px;
  gap: 3px;
}

#app[data-layout="wide"] #tools button {
  flex: 0 0 auto;
  min-width: 0;
  padding: 6px 7px;
  font-size: 10px;
  justify-content: center;
  text-align: center;
}

#app[data-layout="wide"] #board {
  order: 2;
  margin: auto;
}

/* Fixed, NOT flexible, unlike the tall shelf. Letting it stretch here gave the map 70% of
   a test window and was a trap: sideways the map is bound by height, so on a shorter,
   narrower phone it would have taken its full width and left the shelf about five pixels. */
#app[data-layout="wide"] #roster {
  order: 3;
  flex: 0 0 auto;
  width: min(232px, 30%);
  min-width: 116px;
  margin-top: 0;
  height: 100%;
}

#app[data-layout="wide"] #diagnosis {
  left: 6px;
  right: 6px;
  top: 5px;
}

footer .keys {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
}