/* The Realm of Perry — the map, the panel beside it, the conversation box and
   the running account underneath.

   Everything that is not specific to this game — the bars, the buttons, the
   stage, the dialogs — is in css/games/arcade.css, which the arcade games load
   too. If a rule in here would also be right for Knock Down, it is in the
   wrong file.

   Sized for who plays it, exactly as looseEnds.css and arcade.css are: mostly
   people over seventy, often on a laptop trackpad. Nothing here is smaller
   than 0.95rem or shorter than 2.6rem. */

.realm-page {
  /* What is behind the canvas before the first snapshot arrives, and behind
     the minimap. Deliberately the colour of nothing rather than of grass —
     a map that has not loaded should not look like a map. */
  --rm-void: #17181C;

  /* The log's four voices. Colour is the SECOND signal here, never the only
     one: every line reads correctly in black and white, because a fight
     announced only by a colour is a fight somebody misses. */
  --rm-fight: #C0392B;
  --rm-good: #3E8B4A;
  --rm-place: #2E6FA8;
  --rm-quiet: var(--ink-muted);

  /* Deliberately no teal anywhere near that blue. It has bitten this site
     twice — see the note at the top of js/games/arcade/palette.js. */
}


/* --------------------------------------------------------- the top two bars */

.rm-bar--who {
  gap: 6px 14px;
}

.rm-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.rm-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
}

/* Who else is in the world, and which tab is running it. Pushed to the right
   and kept quiet: it matters twice a session and is in the way the rest of
   the time. */
.rm-company {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ------------------------------------------------------------- the play area */

.rm-play {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.rm-shell .rm-stage {
  flex: 1;
  min-width: 0;
  border-color: transparent;
  background: none;
  position: relative;
}

/* THE CANVAS FILLS THE BOX. It has no aspect ratio and it must not be given
   one.

   This started out as `aspect-ratio: 7/5` with `height: 100%` and
   `max-width: 100%`, copied from kingdoms.css, and it is wrong here in a way
   worth writing down. When the box is TALLER than 7:5, max-width clips the
   width while the height keeps the 100% it was told — so the canvas came out
   722 by 765, the Stage letterboxed the 7:5 world into the middle of it, and
   there was a black bar across the top of the map.

   The fix is not a cleverer ratio. A scrolling map has no business having a
   fixed shape at all: it is a window onto a world, and a wider window should
   show more world. So the canvas takes whatever box it is given and
   view/mapView.js `fit()` picks the number of tiles to match — the numbers in
   data/rules.js are the LEAST you will ever see, not the most.

   Which means there is nothing here to get wrong any more. */
.rm-shell .rm-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--rm-void);
  cursor: pointer;
}

.rm-shell .rm-stage canvas:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}


/* ----------------------------------------------------------------- the panel */

.rm-side {
  flex: 0 0 16rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow-y: auto;
}

.rm-panel {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface-alt);
  padding: 8px 11px 10px;
}

.rm-panel__title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-panel__hint {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

.rm-stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 3px 0;
  font-size: 0.98rem;
  color: var(--ink);
}

.rm-stat__label {
  color: var(--ink-muted);
}

.rm-stat__value {
  font-variant-numeric: tabular-nums;
}

/* The torch, which is the only clock in the game that runs against you. Given
   its own line and its own colour for that reason. */
.rm-stat--torch {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--rule);
  justify-content: flex-start;
  color: var(--ink-muted);
  font-size: 0.95rem;
}


/* ----------------------------------------------------------------- the gauge */

.rm-gauge {
  height: 0.85rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 7px;
}

.rm-gauge__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--rm-good);
  transition: width 180ms ease-out;
}

/* Below a third, and it stops being a decoration. */
.rm-gauge__fill.low {
  background: var(--rm-fight);
}


/* --------------------------------------------------------------- the minimap */

/* The aspect ratio is set from JavaScript, because it is the shape of whichever
   map you are standing on and a stylesheet cannot know that. The 4/3 here is
   only what it looks like for the instant before the first map arrives. */
.rm-minimap {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--rm-void);
  image-rendering: pixelated;
}


/* ------------------------------------------------------------------ the pack */

.rm-pack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 11rem;
  overflow-y: auto;
}

/* Every line in the pack is a button, because every line in the pack DOES
   something — a list of things you own that you cannot use is a list. */
.rm-pack__item {
  text-align: left;
  font: inherit;
  font-size: 0.95rem;
  min-height: 2.1rem;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.rm-pack__item:hover:not(:disabled) {
  background: var(--accent-soft);
}

.rm-pack__item:disabled {
  cursor: default;
  color: var(--ink-muted);
  background: none;
  border-style: dashed;
}


/* --------------------------------------------------------------- the journal */

.rm-journal {
  max-height: 13rem;
  overflow-y: auto;
}

.rm-quest__name {
  margin: 8px 0 3px;
  font-size: 0.95rem;
  color: var(--ink);
}

.rm-quest__name:first-child {
  margin-top: 0;
}

.rm-quest__name.is-done {
  color: var(--rm-good);
}

.rm-quest__lines {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

.rm-quest__lines li {
  margin: 3px 0;
}


/* ---------------------------------------------------------- the conversation */

/* Beside the map rather than over it. A modal would take the keyboard away
   from the world, and in a shared world the world does not stop while you
   are talking — other people keep walking, and a wolf is perfectly capable of
   finding you mid-sentence. */
.rm-talk {
  margin-top: 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--surface-alt);
  padding: 9px 12px 11px;
}

.rm-talk[hidden] {
  display: none;
}

.rm-talk__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rm-talk__head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.rm-talk__head button {
  margin-left: auto;
  min-width: 2.2rem;
  min-height: 2.2rem;
  font-size: 1.3rem;
  line-height: 1;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.rm-talk__said {
  max-height: 9rem;
  overflow-y: auto;
  margin: 7px 0;
}

.rm-talk__line {
  margin: 5px 0;
  line-height: 1.5;
  font-size: 1rem;
}

.rm-talk__line--them {
  color: var(--ink);
}

/* What you said, set back and quiet, so the eye runs down THEIR side of the
   conversation. You already know what you asked. */
.rm-talk__line--you {
  color: var(--ink-muted);
  font-style: italic;
  padding-left: 1.2rem;
}

.rm-talk__ask {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rm-talk__ask label {
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.rm-talk__ask input {
  flex: 1;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0 10px;
  font: inherit;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.rm-talk__hint {
  margin: 7px 0 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.45;
}


/* --------------------------------------------------- the two lines beneath */

.rm-rollover {
  margin: 7px 0 3px;
  min-height: 1.3rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The running account, and the most useful thing on the screen. On a grid at
   this size it is the only part that says WHY something happened — a health
   bar dropping does not tell you which of the three things beside you did
   it. So it gets real room. */
.rm-log {
  height: 7.5rem;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--surface-alt);
  padding: 6px 11px;
}

.rm-log__line {
  margin: 2px 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
}

.rm-log__line--fight { color: var(--rm-fight); }
.rm-log__line--good { color: var(--rm-good); }
.rm-log__line--place { color: var(--rm-place); }
.rm-log__line--bad { color: var(--rm-fight); font-weight: 600; }
.rm-log__line--quiet { color: var(--rm-quiet); }


/* ------------------------------------------------------------- the art page */

.rm-art__group {
  margin: 22px 0 10px;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 5px;
}

.rm-art__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 12px;
}

.rm-art__card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface-alt);
  padding: 10px;
}

.rm-art__shot {
  display: block;
  width: 100%;
  max-width: 8rem;
  height: auto;
  margin: 0 auto 8px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--rm-void);
  image-rendering: pixelated;
}

.rm-art__key {
  display: block;
  font-size: 0.95rem;
  color: var(--ink);
  word-break: break-all;
}

.rm-art__what {
  margin: 5px 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

.rm-art__state {
  margin: 5px 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.rm-art__state.is-yours {
  color: var(--rm-good);
  font-weight: 600;
}

/* The line to paste. A click copies it, which is the only thing anybody wants
   to do with it. */
.rm-art__paste {
  display: block;
  font-size: 0.82rem;
  padding: 5px 7px;
  border: 1px dashed var(--rule-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-muted);
  cursor: copy;
  word-break: break-all;
}

.rm-art__paste:hover {
  background: var(--accent-soft);
}

.rm-art__paste.is-copied {
  border-style: solid;
  border-color: var(--rm-good);
  color: var(--rm-good);
}


/* ----------------------------------------------------------------- narrower */

@media (max-width: 900px) {
  .rm-play {
    flex-direction: column;
    align-items: stretch;
  }

  .rm-shell .rm-stage {
    flex: 1 1 auto;
    min-height: 18rem;
  }

  .rm-side {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
  }

  .rm-panel {
    flex: 1 1 12rem;
    min-width: 0;
  }

  /* Both of these are scrolling lists inside a panel that is now itself in a
     row of panels. Capping them keeps the row a sensible height on a phone
     instead of one panel being four times as tall as its neighbours. */
  .rm-pack,
  .rm-journal {
    max-height: 8rem;
  }

  .rm-log {
    height: 6rem;
  }
}


/* ------------------------------------------------------------- the editor */

.rm-ed-play {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.rm-ed-stage {
  flex: 1;
  min-width: 0;
  min-height: 24rem;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--rm-void);
}

.rm-ed-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.rm-ed-side {
  flex: 0 0 17rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow-y: auto;
}

/* The one thing somebody has to understand about this page, said permanently
   rather than in a dialog they dismiss once. */
.rm-ed__nosave {
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.rm-ed__dirty {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--rm-fight);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.rm-ed__palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr));
  gap: 5px;
}

.rm-ed__swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px 3px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.rm-ed__swatch:hover {
  background: var(--accent-soft);
}

.rm-ed__swatch.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.rm-ed__chip {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  image-rendering: pixelated;
}

.rm-ed__swatch-name {
  font-size: 0.72rem;
  line-height: 1.1;
  text-align: center;
  color: var(--ink-muted);
}

/* The character it is in the map file, which is also its keyboard shortcut.
   Monospaced, because half of them are punctuation and a proportional comma
   at this size is a speck. */
.rm-ed__swatch-key {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--ink);
}

.rm-ed__status {
  margin: 7px 0 3px;
  min-height: 1.3rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.rm-ed__status--good { color: var(--rm-good); }
.rm-ed__status--warn { color: var(--rm-fight); }

.rm-ed__good { color: var(--rm-good); font-weight: 600; }
.rm-ed__bad { color: var(--rm-fight); font-weight: 600; }

.rm-ed__text {
  width: 100%;
  min-height: 16rem;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.8rem;
  line-height: 1.15;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px;
}

@media (max-width: 900px) {
  .rm-ed-play {
    flex-direction: column;
  }

  .rm-ed-side {
    flex: 0 0 auto;
    overflow: visible;
  }

  .rm-ed__nosave {
    margin-left: 0;
    flex-basis: 100%;
  }
}