/* TypeIt: all text is white. Different kinds of text are told apart by
   typeface (and opacity for secondary text), never by color. The background
   hue drifts by 1 degree per second (see client/main.js), so the page stays
   dark enough for white text at every hue. The two side panels drift the
   same way, starting a third and two thirds of the way round the wheel. */

:root {
  --hue: 265;
  --bg: hsl(var(--hue) 45% 25%);
  --bg-left: hsl(calc(var(--hue) + 120) 40% 23%);
  --bg-right: hsl(calc(var(--hue) + 240) 40% 23%);
  --panel: rgba(0, 0, 0, .28);
  --line: rgba(255, 255, 255, .14);
  --text: #fff;
  --soft: rgba(255, 255, 255, .62);
  --faint: rgba(255, 255, 255, .4);

  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --f-room: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-glitch: 'VT323', ui-monospace, monospace;
  --f-speech: 'Lora', Georgia, serif;
  --f-type: 'Special Elite', 'Courier New', monospace;
  --f-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --f-ui: 'Space Grotesk', system-ui, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 15px;
  line-height: 1.5;
}
body {
  background-color: var(--bg);
  transition: background-color 1s linear;
}

#shell {
  display: flex;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
}
#app {
  display: flex;
  flex-direction: column;
  flex: 0 1 980px;
  min-width: 0;
  height: 100%;
}

/* ---- side HUD: drawn in text (client/hud.js), only on wide screens ---- */
.hud { display: none; }
@media (min-width: 1180px) {
  .hud {
    display: block;
    flex: 1 0 auto;          /* grow to fill the window edge to edge */
    padding: 12px 14px;
    transition: background-color 1s linear;
    overflow-y: auto;
    /* System monospace fonts, not the web font: IBM Plex Mono from Google Fonts
       lacks box-drawing and block characters, and mixing fonts breaks the grid. */
    font-family: 'Cascadia Mono', Consolas, Menlo, 'DejaVu Sans Mono', 'Liberation Mono', monospace;
    font-size: 13px;
    line-height: 1.3;
    white-space: pre;
  }
  #hud-left { background-color: var(--bg-left); text-align: right; }    /* hug the text column */
  #hud-right { background-color: var(--bg-right); text-align: left; }
  body:not(.playing) .hud > * { visibility: hidden; }
  /* The left panel replaces the top status bar. */
  body.playing #status { display: none; }
}
.h-line { height: 1.3em; }
.h-dim { color: var(--faint); }
.h-hot { font-weight: 700; }
.h-warn { font-weight: 700; animation: urgent 1s steps(1) infinite; }
.h-here { font-weight: 700; background: rgba(255, 255, 255, .18); }
.h-link { cursor: pointer; }
.h-link:hover, .h-link:focus-visible { background: rgba(255, 255, 255, .16); text-decoration: underline; text-underline-offset: 2px; }

/* ---- status bar ---- */
#status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-ui);
  font-size: 13px;
}
#st-name { font-family: var(--f-room); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
#st-hp { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
#st-level { color: var(--soft); }
#st-loc { font-family: var(--f-room); font-style: italic; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#st-mode { margin-left: auto; color: var(--faint); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.bar {
  display: inline-block;
  width: 90px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 2px;
  overflow: hidden;
}
.fill { display: block; height: 100%; width: 100%; background: #fff; transition: width .3s; }
.fill.mid { background: repeating-linear-gradient(90deg, #fff 0 6px, rgba(255, 255, 255, .45) 6px 8px); }
.fill.low { background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 6px); }
.fill.enemy { background: repeating-linear-gradient(135deg, #fff 0 4px, rgba(255, 255, 255, .35) 4px 8px); }

#fight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, .4);
  border-bottom: 1px solid var(--line);
}
#fight[hidden] { display: none; }
#fight-turn { font-family: var(--f-ui); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
#fight.mine #fight-turn { color: #fff; }
#fight-turn.urgent { animation: urgent .5s steps(1) infinite; }
@keyframes urgent { 50% { opacity: .35; } }
#fight-foes { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--f-glitch); font-size: 19px; letter-spacing: .03em; }
.foe { display: inline-flex; align-items: center; gap: 6px; opacity: .7; }
.foe.target { opacity: 1; }
.foe.target::before { content: '>'; }

#combat { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
#combat[hidden], #exits[hidden] { display: none; }
#combat button { font-weight: 700; border-color: rgba(255, 255, 255, .6); }
#combat button.spell { font-family: var(--f-speech); font-style: italic; font-weight: 400; }
.t-turn { font-family: var(--f-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid #fff; }

/* ---- output ---- */
#output {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.line { margin: 0 0 7px; }
.line.echo { color: var(--faint); margin-top: 12px; }
.line.prompt { font-family: var(--f-type); font-size: 16px; margin-bottom: 2px; }

.t-room { font-family: var(--f-room); font-weight: 700; font-size: 1.22em; letter-spacing: .01em; }
.t-dim { color: var(--soft); font-size: .92em; }
.t-glitch { font-family: var(--f-glitch); font-size: 1.32em; line-height: 1.1; letter-spacing: .04em; }
.t-item { font-style: italic; }
.t-bad { font-family: var(--f-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .92em; }
.t-hurt { font-family: var(--f-ui); font-weight: 700; }
.t-dmg { font-family: var(--f-ui); font-weight: 600; color: var(--soft); }
.t-good, .t-xp { font-family: var(--f-ui); font-weight: 600; font-variant: small-caps; letter-spacing: .04em; font-size: 1.05em; }
.t-sys { font-family: var(--f-type); }
.t-say { font-family: var(--f-speech); font-style: italic; font-size: 1.05em; }
.t-name { font-weight: 700; }
.t-ambient { font-family: var(--f-type); color: var(--soft); }
.t-npc { font-family: var(--f-speech); font-weight: 700; font-size: 1.05em; }
.t-speech { font-family: var(--f-speech); font-size: 1.07em; line-height: 1.55; }
.t-npcact { font-family: var(--f-hand); font-size: 1.35em; line-height: 1.2; }
.t-you { color: var(--soft); font-style: italic; }
.t-title { display: inline-block; font-weight: 700; line-height: 1.15; }

/* Links: exits and clickable things are underlined, not colored. */
.t-link { color: inherit; text-decoration: none; cursor: pointer; }
.t-exit { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.t-cmd { text-decoration: underline dotted; text-underline-offset: 3px; }
.t-link:hover, .t-link:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }

/* Dialogue choices: full-width rows, easy to tap on a phone. */
a.t-cmd:has(> .t-opt) { display: block; text-decoration: none; margin: 4px 0; }
.t-opt {
  display: block;
  padding: 7px 12px;
  font-family: var(--f-ui);
  font-weight: 500;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line);
  border-left: 3px solid #fff;
  border-radius: 3px;
}
a.t-cmd:hover > .t-opt, a.t-cmd:focus-visible > .t-opt { background: rgba(255, 255, 255, .12); }

/* ---- controls ---- */
#controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
body:not(.playing) #controls,
body:not(.playing) #st-hp,
body:not(.playing) #st-level,
body:not(.playing) #st-loc { display: none; }
#exits, #quick { display: flex; flex-wrap: wrap; gap: 6px; }

button {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 4px;
  padding: 6px 10px;
  min-height: 34px;
  cursor: pointer;
}
button:hover { background: rgba(255, 255, 255, .12); }
button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
#exits button { min-width: 44px; font-weight: 700; letter-spacing: .04em; }
button.danger { font-weight: 700; text-transform: uppercase; border-style: dashed; }
button[hidden] { display: none; }
.inline-btn { font-family: var(--f-type); }

/* ---- input ---- */
#input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.caret { font-weight: 700; }
#input {
  flex: 1;
  min-width: 0;
  font-family: var(--f-mono);
  font-size: 16px; /* 16px stops iOS from zooming on focus */
  color: #fff;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 4px;
  padding: 8px 10px;
}
#input::placeholder { color: var(--faint); }
#input:focus { outline: none; border-color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .t-glitch { animation: flicker 6s infinite steps(1); }
  @keyframes flicker {
    0%, 96%, 100% { opacity: 1; }
    97% { opacity: .55; }
    98% { opacity: .9; }
  }
}

@media (max-width: 600px) {
  html, body { font-size: 14px; }
  #status { gap: 2px 10px; padding: 6px 10px; }
  #st-loc { order: 5; flex-basis: 100%; }
  #st-mode { margin-left: 0; }
  #output { padding: 8px 10px; }
  #controls { padding: 6px 10px; }
  #input-row { padding-left: 10px; padding-right: 10px; }
  .bar { width: 64px; }
}