@font-face { font-family: 'Plex Mono KH'; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Mono KH'; src: url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
:root {
  --ground: #06100C; --text: #CFE8DC; --muted: #8DB5A3; --dim: #2E5A47;
  --green: #5BE7A9; --amber: #F2B544; --red: #FF7A6B; --cyan: #6CD3F0; --white: #F2FFF8;
  --mono: 'Plex Mono KH', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --fs: 16px;
}
@media (max-width: 560px) { :root { --fs: 15px; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--text); overflow-x: hidden; }
body { font-family: var(--mono); font-size: var(--fs); min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.14) 3px); }
#app { width: 100%; max-width: 1000px; margin: 0 auto; padding: 12px 12px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
/* recommend + log sit right under the status bar so a returning player sees them without scrolling */
#top { order: 1; } #rec { order: 2; } #log { order: 3; } #main { order: 4; }
@media (min-width: 1100px) {
  #app { max-width: 1560px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  #top { grid-column: 1 / -1; grid-row: 1; }
  #main { grid-column: 1; grid-row: 2 / span 3; }
  #rec { grid-column: 2; grid-row: 2; } #log { grid-column: 2; grid-row: 3; }
}
@media (max-width: 560px) { #app { padding: 8px 8px 32px; } }

/* every panel is a grid of characters drawn to fit its width: never scrolls sideways */
.frame { width: 100%; overflow: hidden; }
.ln { white-space: pre; line-height: 1.2; height: 1.2em; overflow: hidden; font-family: var(--mono); margin: 0; }
.ln.tall { line-height: 3em; height: 3em; }
.ln.tall .vb { display: inline-block; line-height: 1.2em; transform: scaleY(2.8); transform-origin: 50% 50%; vertical-align: middle; }
.probe { position: absolute; visibility: hidden; white-space: pre; font-family: var(--mono); line-height: 1.2; }

.g { color: var(--green); } .a { color: var(--amber); } .r { color: var(--red); } .c { color: var(--cyan); }
.m { color: var(--muted); } .d { color: var(--dim); } .t { color: var(--text); } .w { color: var(--white); }
.b6 { font-weight: 600; }
.inv { background: var(--green); color: var(--ground); }

button.k { font: inherit; line-height: 1.2em; height: 2.6em; padding: 0; margin: 0; border: 0; background: transparent; color: var(--green);
  cursor: pointer; white-space: pre; vertical-align: middle; border-radius: 0; }
button.k:hover, button.k:focus-visible { background: var(--green); color: var(--ground); outline: none; }
button.k.on { background: var(--green); color: var(--ground); }
button.k.amb { color: var(--amber); } button.k.amb:hover { background: var(--amber); color: var(--ground); }
button.k.red { color: var(--red); } button.k.red:hover { background: var(--red); color: var(--ground); }
button.k.cy { color: var(--cyan); } button.k.cy:hover { background: var(--cyan); color: var(--ground); }
button.k:disabled { color: var(--dim); cursor: default; background: transparent; }
input.k { font: inherit; padding: 0; margin: 0; border: 0; height: 1.6em; background: #0E2219; color: var(--white);
  caret-color: var(--green); vertical-align: middle; border-radius: 0; text-transform: uppercase; }
input.k:focus { outline: 1px solid var(--green); }
a.k { color: var(--green); text-decoration: none; } a.k:hover { background: var(--green); color: var(--ground); }
#app.busy button.k { pointer-events: none; opacity: 0.55; }
.hide { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }