/* The Handbill Ledger — game shell.
 *
 * Deliberately small: this file dresses the frame (HUD bar, canvas stage, panel
 * overlay) and nothing inside it. Wanted posters, the store form and the
 * showdown overlay each style themselves in Phase 4, against the custom
 * properties declared here so the palette stays in one place.
 */

:root {
  /* Dusk over a lamplit street: near-black wood, brass, dried blood. */
  --wood-dark: #241a12;
  --wood: #3a2a1c;
  --wood-light: #5a4128;
  --brass: #c9a227;
  --ink: #2b1d10;
  --parchment: #e8d9b5;
  --parchment-edge: #c2ab7d;
  --blood: #7b2214;
  --hud-height: 3rem;

  --serif: "Hoefler Text", "Palatino Linotype", Palatino, Georgia, serif;
  --slab: "Rockwell", "Courier New", Courier, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--wood-dark);
  color: var(--parchment);
  font-family: var(--serif);
  /* The canvas fills the viewport; nothing here is meant to scroll. */
  overflow: hidden;
}

/* --- The overworld ------------------------------------------------------- */

.stage {
  display: block;
  width: 100%;
  height: 100%;
  /* Non-negotiable for a tile game: the browser must not smooth the upscale.
   * The 2D context sets imageSmoothingEnabled=false for its own blits; this
   * covers the separate scaling of the canvas *element* to its CSS box. */
  image-rendering: pixelated;
  background: #1a1209;
  touch-action: none; /* arrow-key/tap movement, never a pan gesture */
}

/* --- HUD ----------------------------------------------------------------- */

.hud {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2;
  height: var(--hud-height);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1rem;
  color: var(--parchment);
  /* Planed wood: two stacked gradients, no image to ship. */
  background:
    repeating-linear-gradient(
      90deg,
      rgb(0 0 0 / 12%) 0 2px,
      transparent 2px 7px
    ),
    linear-gradient(var(--wood-light), var(--wood) 60%, var(--wood-dark));
  border-bottom: 2px solid var(--brass);
  box-shadow: 0 2px 10px rgb(0 0 0 / 60%);
  font-family: var(--slab);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

.hud__brand {
  color: var(--brass);
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

.hud__stats {
  display: flex;
  gap: 1.25rem;
  margin: 0;
}

.hud__stat {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.hud__stat dt {
  color: var(--parchment-edge);
  text-transform: uppercase;
  font-size: 0.7rem;
}

.hud__stat dd {
  margin: 0;
  font-weight: 700;
}

.hud__cash {
  color: var(--brass);
}

.hud__where {
  margin-left: auto;
  color: var(--parchment-edge);
  font-style: italic;
  white-space: nowrap;
}

/* --- Panel overlay ------------------------------------------------------- */

/* Closing a panel is emptying it, so an empty panel must take no space and
 * swallow no clicks. Keep this rule ahead of the styled state. */
#panel:empty {
  display: none;
}

.panel {
  position: fixed;
  inset: var(--hud-height) 0 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
  background: rgb(10 6 3 / 70%);
}

/* Shared card for anything that opens over the map. */
.parchment {
  max-width: 46rem;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  margin: auto;
  padding: 1.75rem 2rem;
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 35%), transparent 60%),
    var(--parchment);
  border: 1px solid var(--parchment-edge);
  border-radius: 2px;
  box-shadow:
    0 0 0 6px rgb(0 0 0 / 15%),
    0 18px 40px rgb(0 0 0 / 55%);
}

.parchment h1 {
  margin-top: 0;
  font-family: var(--slab);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn {
  font: inherit;
  font-family: var(--slab);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--parchment);
  background: var(--blood);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  background: #94301d;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Speech bubble ------------------------------------------------------- */

/* Dialogue is flavour on top of the map, not an interior that replaces it, so
 * it sits over the canvas instead of in `#panel` — which stays reserved for
 * HTMX fragments, and whose emptiness is what "no interior is open" means. */
.speech {
  position: fixed;
  inset: auto 0 2rem 0;
  z-index: 3;
  width: min(36rem, calc(100% - 3rem));
  margin: 0 auto;
  padding: 1rem 1.25rem;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--parchment-edge);
  border-radius: 2px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 55%);
  cursor: pointer;
}

.speech__speaker {
  margin: 0 0 0.35rem;
  font-family: var(--slab);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--blood);
}

.speech__text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
}

.speech__hint {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  font-style: italic;
  color: #6b5a41;
}

/* --- Toast --------------------------------------------------------------- */

/* For things worth saying but not worth stopping the game for — chiefly a
 * panel request that came back an error, which htmx would otherwise swallow.
 * Above the panel so a message about a failed swap is not hidden behind the
 * interior that failed to change. */
.toast {
  position: fixed;
  inset: calc(var(--hud-height) + 1rem) 1rem auto auto;
  z-index: 4;
  max-width: 22rem;
  padding: 0.7rem 1rem;
  color: var(--parchment);
  background: var(--wood);
  border: 1px solid var(--brass);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 55%);
  font-size: 0.9rem;
  cursor: pointer;
}

/* --- Nowhere to stand ---------------------------------------------------- */

/* Shown instead of the game loop when there is no map: a hunter whose town was
 * deleted, or a database the map compiler never ran against. */
.wilderness {
  position: fixed;
  inset: var(--hud-height) 0 0 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  text-align: center;
  background: rgb(10 6 3 / 85%);
}

.wilderness h1 {
  margin: 0;
  font-family: var(--slab);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brass);
}

.wilderness p {
  margin: 0;
  max-width: 32rem;
  color: var(--parchment-edge);
}

/* The enlist page has no canvas behind it, so it centres in the viewport
 * itself rather than inside a panel. `body` hides its overflow for the game
 * shell's sake, so the card has to keep itself inside the viewport. */
body > .parchment {
  margin-top: 12vh;
  max-height: 76vh;
}