/* E-ink portrait. Black ink on white. No grey, no shadow, no animation. */
html {
  background: #fff;
  color: #000;
  color-scheme: light;
}

body {
  margin: 0;
  background: #fff;
  color: #000;
  font: 18px/1.35 ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

header, #notes, #review {
  padding: 4px 8px;
}

header {
  flex: 0 0 auto;
  padding: 2px 8px 4px;
}

/* The build stamp sits in the tool row, on the right, so it costs no line of
   its own. It is the one way to tell a stale page from a fresh one. */
#stamp {
  margin: 0 0 0 auto;
  font-size: 13px;
  white-space: nowrap;
}

/* The log is the only place a long message is printed. It covers the page
   while it is open, so nothing is said twice. */
#log-panel {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-top: 3px solid #000;
}

#log-panel[hidden] {
  display: none;
}

#log-bar {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-bottom: 2px solid #000;
}

#log-bar button {
  flex: 0 0 auto;
  min-height: 48px;
}

#log-hint {
  flex: 1 1 8rem;
  margin: 0;
  font-size: 14px;
}

#log-text {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 6px 8px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 15px/1.3 ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
}

#log-toggle[data-unread="1"] {
  border-width: 4px;
}

h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 12rem;
}

select, textarea, button {
  font: inherit;
  color: #000;
  background: #fff;
  border: 2px solid #000;
  border-radius: 0;
}

select, textarea {
  width: 100%;
  box-sizing: border-box;
}

button {
  min-height: 56px;
  padding: 8px 10px;
  touch-action: manipulation;
}

button:active, button:focus-visible {
  background: #000;
  color: #fff;
}

button:disabled {
  border-style: dashed;
  cursor: not-allowed;
}

/* A press stays visible after the finger lifts, and a button that is waiting on
   the server carries the wait in its own label. Both are ink, not animation. */
button[data-flash="1"] {
  background: #000;
  color: #fff;
}

button[data-busy="1"] {
  background: #000;
  color: #fff;
  border-style: solid;
  font-weight: 700;
}

#hud, #status {
  margin: 2px 0 0;
}

/* The line that answers every press. The bar marks where to look after a tap. */
#status {
  min-height: 1.35em;
  padding-left: 6px;
  border-left: 4px solid #000;
  font-weight: 700;
}

/* The board is measured against this box, so it always fits whole: no scroll,
   no cropped column, centred while there is slack. */
#map-wrap {
  flex: 1 1 auto;
  /* A floor, so a cramped window squeezes the panels instead of the board. */
  min-height: 22vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  background: #fff;
}

canvas {
  display: block;
  touch-action: manipulation;
  background: #fff;
}

#notes {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 14vh;
  overflow: auto;
}

#review {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 14vh;
  overflow: auto;
  border-top: 2px solid #000;
}

#actions {
  flex: 0 0 auto;
  padding: 0 8px 8px;
}

#note-list {
  margin: 0 0 8px;
  padding-left: 1.2em;
}

#note-list button {
  min-height: 44px;
}

#board-text {
  margin: 6px 0;
  white-space: pre;
  font: inherit;
}

#controls {
  display: flex;
  flex: 0 1 auto;
  min-height: 96px;
  max-height: min(30vh, 192px);
  background: #fff;
  border-top: 2px solid #000;
}

/* The pads give up height before the board does. */
#controls button {
  min-height: 0;
}

#dpad {
  width: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

#dpad button[data-move="up"] { grid-column: 2; grid-row: 1; }
#dpad button[data-move="left"] { grid-column: 1; grid-row: 2; }
#dpad button[data-move="right"] { grid-column: 3; grid-row: 2; }
#dpad button[data-move="down"] { grid-column: 2; grid-row: 3; }

#digs {
  width: 50%;
  display: flex;
  flex-direction: column;
  border-left: 2px solid #000;
}

#digs button {
  flex: 1;
  min-height: 0;
}