:root {
  --bg: #1b1410;
  --fg: #f3e3c3;
  --muted: #c9a66b;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, sans-serif;
  overflow-x: hidden;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1rem 1rem;
}

header { text-align: center; }

h1 {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 3rem);
  overflow-wrap: break-word;
}

.subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

#stage {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Size is set by js/main.js to an integer multiple of the logical resolution. */
canvas {
  display: block;
  background: #2a1f18;
  image-rendering: pixelated;
  /* Taps are for the scene, not for double-tap zoom; scrolling still works. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Wraps the canvas so the speech bubbles can be positioned over it. --px is
   css pixels per logical pixel (with unit), set by js/main.js. */
#scene-wrap {
  position: relative;
  --px: 1px;
}

#bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Positions are logical pixels (see js/bubble-layout.js) times --px. */
.bubble {
  position: absolute;
  left: calc(var(--left) * var(--px));
  bottom: calc((180 - var(--bottom)) * var(--px));
  width: calc(72 * var(--px));
  padding: calc(2 * var(--px));
  border: var(--px) solid #2a1f18;
  background: #f3e3c3;
  color: #2a1f18;
  font-size: max(10px, calc(4.5 * var(--px)));
  line-height: 1.15;
  text-align: center;
  overflow-wrap: break-word;
}

.bubble[hidden] { display: none; }

/* Tail pointing down at the Jawa. */
.bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(var(--tail) * var(--px));
  width: calc(2 * var(--px));
  height: calc(3 * var(--px));
  margin-left: calc(-2 * var(--px));
  background: #f3e3c3;
  border: var(--px) solid #2a1f18;
  border-top: 0;
}

#status {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  font-size: clamp(0.9rem, 1.4vw, 2rem); /* bigger on TVs; not tied to the canvas scale */
  text-align: center;
  color: var(--muted);
}