/* hjkl.li — minimal terminal-dark theme. Background matches the canvas so the
 * cell grid blends into the page (the game emits no background color itself).
 */
:root {
  --bg: #0e1014;
  --fg: #dce0e8;
  --muted: #6b7080;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
    Consolas, "Liberation Mono", Menlo, monospace;
}

#wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}

#game {
  background: var(--bg);
  /* The canvas is sized in JS to fit the cell grid; allow it to shrink on
   * small screens while keeping crisp pixels. */
  max-width: 100%;
  height: auto;
  outline: none;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
              0 8px 40px rgba(0, 0, 0, 0.5);
}

#hint {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  max-width: 720px;
  justify-content: center;
}
#hint .sep { opacity: 0.5; }
#hint a { color: var(--muted); text-decoration: none; }
#hint a:hover { color: var(--fg); }
#hint code { color: var(--fg); }

kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #3a3f4d;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #161a21;
  color: var(--fg);
  font-size: 12px;
  line-height: 1.4;
}

#status {
  font-size: 12px;
  color: var(--muted);
  min-height: 1em;
}