/* Kitten Downs, game-specific styles only.
 *
 * The site stylesheet is loaded first and supplies the star layers, the navbar,
 * the header, the section cards and the footer, so this page cannot drift away
 * from the rest of the site. Everything below is either the canvas, or a thing
 * the site has no equivalent for. */

/* Palette taken from the site tokens. Duplicated as local names rather than
   reaching for the site's, so the game's own colors are visible in one place.
   See sprites/SPEC.md. */
:root {
  --lane-dark: #0f0520;
  --rail: #3a1575;
  --accent: #b03898;
}

/* First focusable element on the page, visible only when focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 0 0 8px;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--purple-light);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The game's own title card, sitting under the site header. */
.banner {
  max-width: 100%;
  margin: 0 0 12px;
  line-height: 0;
}

.banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.canvas-frame {
  position: relative;
  width: 100%;

  /* Room for the loading message before the canvas exists. Once it does, the
     canvas sets the height. */
  min-height: 220px;
  background: var(--lane-dark);
  border: 1px solid var(--rail);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Ebitengine sizes its drawing buffer from the window, never from this
   element, which was measured rather than assumed. So the frame cannot impose
   an aspect ratio on the canvas: forcing a 16:9 box around a buffer shaped like
   the browser window scales the two axes by different amounts and the cats come
   out squashed.
   Letting the canvas keep its intrinsic ratio, by setting only the width,
   guarantees the element and the buffer always agree. Any mismatch between the
   buffer and the logical size shows up as letterbox bars in the frame colour
   instead, which is correct rather than distorted. */
.canvas-frame canvas {
  /* Scaled down uniformly to fit, never stretched to fill. The bounds stop a
     square or portrait window turning the game into a very tall box. */
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 70vh !important;
  display: block;
  image-rendering: pixelated;
}

.loading {
  text-align: center;
}

.loading p {
  margin: 0;
}

.loading-sub {
  font-size: 0.85rem;
}

/* Work-in-progress notice. Amber rather than the site's violet so it reads as
   a caveat instead of as another piece of the design, and dashed so it looks
   temporary, because it is. */
.wip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px dashed #d9a441;
  border-radius: 12px;
  background: rgba(217, 164, 65, 0.08);
}

.wip p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.wip strong {
  color: #f0c26a;
}

.wip-tape {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: #f0c26a;
}

/* The control sits in HTML rather than on the canvas, so it is focusable,
   labelled and reachable by keyboard without any of that being reimplemented in
   the renderer. */
.controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 16px;
}

.new-race {
  background: linear-gradient(135deg, var(--purple), #b03898);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.new-race:hover {
  transform: translateY(-1px);
  filter: brightness(1.1) drop-shadow(0 0 10px rgba(167, 139, 250, 0.4));
}

.controls-note {
  margin: 0;
  flex: 1 1 260px;
  min-width: 0;
  font-size: 0.85rem;
}

/* The site's list styling is a two-column definition layout, which is wrong for
   prose bullets. */
.hazard-list {
  padding-left: 20px;
  list-style: disc;
}

.hazard-list li {
  display: list-item;
  margin-bottom: 6px;
}

.hazard-list li strong {
  min-width: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
}

code {
  font-family: "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}

.card {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 8px;
}

.card caption {
  text-align: left;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding-bottom: 8px;
}

.card th,
.card td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.card thead th {
  color: var(--purple-light);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.card tbody th {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

.card td {
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .card th,
  .card td {
    padding: 8px;
  }

  .card tbody th {
    white-space: normal;
  }
}