/* 5Hack - terminal styling.  Everything is sized off --cw/--ch (cell metrics)
   which main.js recomputes whenever the window resizes. */

:root {
  --bg: #0b0b0d;
  --fg: #b0b0b0;
  --dim: #666;
  --cw: 11px;
  --ch: 20px;
  --font: "DejaVu Sans Mono", "Menlo", "Consolas", "Liberation Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: var(--fg);
  font-family: var(--font);
  overflow: hidden;
}

#term {
  position: relative;
  width: calc(var(--cw) * 80);
  margin: 0 auto;
  padding: 6px 0;
  background: var(--bg);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.msgline, .statusline {
  height: var(--ch);
  line-height: var(--ch);
  font-size: calc(var(--ch) * 0.78);
  white-space: pre;
  overflow: hidden;
  flex: 0 0 auto;
  letter-spacing: 0;
}

#topline { color: #e8e8e8; }
#topline .more { color: #ffd24a; }

.statusline { color: #c8c8c8; }
.statusline .warn { color: #ee7722; }
.statusline .bad  { color: #cc3333; font-weight: bold; }
.statusline .good { color: #55ee55; }

#mapwrap {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
}

#map {
  display: block;
  image-rendering: auto;
}

/* ---- overlay menus / full-screen text ---- */

#overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
}

#overlay.hidden { display: none; }

.menu {
  pointer-events: auto;
  background: #0b0b0d;
  border: 1px solid #444;
  box-shadow: 0 0 0 1px #000, 6px 6px 0 rgba(0, 0, 0, 0.6);
  padding: 2px 8px 4px 8px;
  font-size: calc(var(--ch) * 0.78);
  line-height: calc(var(--ch) * 0.95);
  white-space: pre;
  max-height: 100%;
  overflow-y: auto;
  color: #d0d0d0;
  min-width: 22ch;
}

.menu.full { width: 100%; }
.menu .mtitle { color: #ffd24a; }
.menu .mhead  { color: #7fb3ff; }
.menu .msel   { color: #ffd24a; }
.menu .mrow   { display: block; }
.menu .mrow.selected { background: #333; color: #fff; }
.menu .mrow.pick { cursor: pointer; }
.menu .mrow.pick:hover { background: #222; }
.menu .mfoot  { color: #888; }

/* colours used by both canvas and menus */
.c-black   { color: #55557f; }
.c-red     { color: #cc3333; }
.c-green   { color: #33aa33; }
.c-brown   { color: #aa7722; }
.c-blue    { color: #4466dd; }
.c-magenta { color: #aa33aa; }
.c-cyan    { color: #33aaaa; }
.c-gray    { color: #b0b0b0; }
.c-darkgray{ color: #666666; }
.c-orange  { color: #ee7722; }
.c-brightgreen  { color: #55ee55; }
.c-yellow  { color: #eeee55; }
.c-brightblue   { color: #6688ff; }
.c-brightmagenta{ color: #ee66ee; }
.c-brightcyan   { color: #55eeee; }
.c-white   { color: #ffffff; }

/* ---- splash / character creation ---- */
.splash { color: #b0b0b0; }
.splash b { color: #ffd24a; font-weight: normal; }
.splash .logo { color: #55ee55; }

/* ---- on-screen controls for touch devices ---- */
#touchbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 2px;
  background: #111;
  z-index: 20;
}
#touchbar.hidden { display: none; }
#touchbar button {
  font-family: var(--font);
  font-size: 15px;
  padding: 10px 0;
  background: #1c1c22;
  color: #ccc;
  border: 1px solid #333;
  border-radius: 4px;
}
#touchbar button:active { background: #333; }