/* web/style.css — page chrome for the WASM shell (node P1). */

:root {
  color-scheme: dark;
  /* `ink` from ui_tokens.json, and `render::camera::BACKGROUND_COLOR`. This is the surround the
     bench stands in, not the table: node S2 measured that the light face was brighter than 28
     of the 34 gameplay colours and moved the table to the dark one, and the surround had to go
     below that. The two must stay equal or the canvas and the page around it read as two
     surfaces — nothing enforces it but this comment, so it is a comment that has to be read.
     Node T2 changed the whole sheet from warm wood to cool slate and this followed. */
  --bg: #1F2834;
  --fg: #e7ecef;
  --dim: #8a959c;
  --accent: #4fc3f7;
  --error: #ff6b6b;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SFMono-Regular", "Fira Mono", Menlo, monospace;
  /* The game owns every gesture: no double-tap zoom, no pull-to-refresh. */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Whatever canvas bevy_winit creates gets this class from boot.js. */
canvas,
canvas.pf-canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  /* Keep the pixel-art look crisp when the backing store is scaled. */
  image-rendering: pixelated;
  outline: none;
  touch-action: none;
}

/* The game is laid out for a phone held upright (the 390x844 the HUD tests pin). A screen
   wider than 3:4 — a desktop, a tablet on its side — gets a centred portrait frame at that
   aspect instead of a stretched landscape board; a phone keeps the whole screen. `!important`
   because `fit_canvas_to_parent` writes `width/height: 100%` inline on the canvas, and bevy
   follows the canvas's CSS size, so the render resolution is the frame, not the window. */
@media (min-aspect-ratio: 3/4) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  canvas,
  canvas.pf-canvas {
    width: min(100vw, calc(100vh * 390 / 844)) !important;
    height: min(100vh, calc(100vw * 844 / 390)) !important;
    flex: none;
  }
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--bg);
}

.overlay[hidden] {
  display: none;
}

.overlay h1 {
  margin: 0;
  font-size: clamp(1.4rem, 6vw, 2.5rem);
  letter-spacing: 0.08em;
}

.overlay .sub {
  margin: 0;
  max-width: 42ch;
  color: var(--dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

#pf-status {
  margin: 0;
  min-height: 1.2em;
  color: var(--dim);
  font-size: 0.8rem;
}

.bar {
  width: min(22rem, 70vw);
  height: 6px;
  border-radius: 3px;
  background: #1c2329;
  overflow: hidden;
}

.bar-fill {
  width: 0%;
  height: 100%;
  background: var(--accent);
  transition: width 120ms linear;
}

.error h1 {
  color: var(--error);
}

.error pre {
  max-width: min(60rem, 90vw);
  max-height: 40vh;
  margin: 0;
  padding: 0.75rem 1rem;
  overflow: auto;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  background: #15191d;
  border: 1px solid #262d33;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.45;
}