/* The Kingdoms of Perry — the map, the panel beside it, and the two lines
   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 1rem or shorter than 2.6rem. */

.kingdoms-page {
  /* The seven resources.

     Each chip carries its NAME as well as its dot, so none of this is
     load-bearing — it is a glance aid, not the information. Which is just as
     well: seven colours that all have to differ is exactly the problem the
     arcade palette spent two goes getting wrong, and the note at the top of
     js/games/arcade/palette.js is worth reading before touching these.

     Deliberately no teal. There is a cyan here for crystal and a blue
     NOWHERE, which is the only reason that cyan is safe. */
  --kp-gold:    #D8B24A;
  --kp-wood:    #8A6A3E;
  --kp-ore:     #8E9299;
  --kp-mercury: #B2472F;
  --kp-sulfur:  #D98E2B;
  --kp-crystal: #7FC7D9;
  --kp-gems:    #4CA36B;
}


/* ----------------------------------------------------------- the top bar */

/* The calendar and the purse. Nothing in this row is a control, so it gets no
   button styling and no hover — a read-out that looks clickable is a read-out
   people click. */
.kp-bar--state {
  gap: 6px 14px;
}

.kp-date b {
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.kp-side-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
}

.kp-side-mark {
  width: 0.95rem;
  height: 0.95rem;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  background: var(--ink-faint);
}

.kp-coins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-left: auto;
}

.kp-coin {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.kp-coin b {
  font-size: 1.05rem;
}

/* The four rare resources are quieter. You spend gold, wood and ore every day
   and the other four perhaps twice a month, so they should not shout equally.
   Quieter, not hidden — the moment one of them is the thing standing between
   you and a building, it is the only number on the bar that matters. */
.kp-coin--rare b {
  font-size: 0.95rem;
  opacity: 0.85;
}

.kp-coin__mark {
  align-self: center;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 1px solid rgb(0 0 0 / 0.28);
  background: var(--ink-faint);
}

.kp-coin__name {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.6;
}

.kp-coin__mark[data-resource="gold"]    { background: var(--kp-gold); }
.kp-coin__mark[data-resource="wood"]    { background: var(--kp-wood); }
.kp-coin__mark[data-resource="ore"]     { background: var(--kp-ore); }
.kp-coin__mark[data-resource="mercury"] { background: var(--kp-mercury); }
.kp-coin__mark[data-resource="sulfur"]  { background: var(--kp-sulfur); }
.kp-coin__mark[data-resource="crystal"] { background: var(--kp-crystal); }
.kp-coin__mark[data-resource="gems"]    { background: var(--kp-gems); }

/* Below this the names are more than the bar can hold and the numbers start
   wrapping mid-purse, which is worse than losing the words — the dots and the
   tooltips still say which is which. */
@media (max-width: 62rem) {
  .kp-coin__name { display: none; }
  .kp-coins { gap: 4px 10px; }
}


/* ---------------------------------------------------- the map and the panel */

/* The map takes what it can and the panel is a fixed column beside it. */
.kp-play {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* The frame goes on the canvas, not on the room it sits in — the same move
   knockDown.css makes, for the same reason. Once the canvas is only as wide as
   the map needs, a border on the stage is a big empty box with a picture
   floating inside it. */
.kp-shell .kp-stage {
  flex: 1;
  min-width: 0;
  border-color: transparent;
  background: none;
}

/* The map window is 19 tiles by 13, so the canvas is 19:13 and no wider.

   THE OBVIOUS VERSION DOES NOT WORK, and it is worth writing down which one.
   Putting `aspect-ratio: 19/13` on the STAGE and letting flex stretch it gives
   a canvas 444 pixels wide in a 609-pixel-tall box — because aspect-ratio
   resolves against the height PROPERTY, which on a stretched flex item is
   still auto, so it falls back to the `min-height: 19rem` arcade.css sets and
   works the width out from 304 rather than from 609.

   So the canvas stays absolutely positioned, exactly as knockDown's does. An
   absolutely positioned child's percentages resolve against the containing
   block's padding BOX — a real measured height whatever the property says —
   and the width is then worked back from that through the aspect ratio. The
   long version of why every other arrangement loops is at the same place in
   knockDown.css: a canvas's intrinsic width is its width ATTRIBUTE, and Stage
   writes that attribute from the width the browser just gave it, so anything
   that lets the canvas be sized by its own content feeds last frame's answer
   straight back in. */
.kp-shell .kp-stage canvas {
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 19 / 13;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--ground);
}

.kp-side {
  flex: 0 0 15rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

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

.kp-panel__title {
  margin: 0 0 7px;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.kp-panel--hero .kp-panel__title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.12rem;
  color: var(--ink);
}

.kp-panel__hint {
  margin: 9px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-faint);
}


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

.kp-minimap {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  cursor: pointer;
  /* Four real pixels per tile, drawn from a one-pixel-per-tile picture. Let
     the browser smooth that and the whole map turns to fog. */
  image-rendering: pixelated;
}


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

.kp-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
}

.kp-stat__label {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.kp-stat__value {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* How much of the day is left, as a bar.

   A bar rather than only a number because the number is in movement points
   and nobody thinks in movement points. The bar answers "have I got most of
   the day left" at a glance, which is the actual question. */
.kp-gauge {
  height: 0.62rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--ground);
  overflow: hidden;
}

.kp-gauge__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transition: width 140ms linear;
}


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

/* Kept apart on purpose. The rollover changes on every mouse move and the
   status line changes when something happens, and sharing one line means each
   one wipes the other — which reads as text flickering for no reason. */
.kp-rollover,
.kp-status {
  margin: 0;
  min-height: 1.4em;
  line-height: 1.4;
  padding: 0 4px;
}

.kp-rollover {
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.kp-status {
  font-size: 0.95rem;
  color: var(--accent);
}


/* ------------------------------------------------------------ narrow windows */

/* The panel goes under the map rather than beside it, and the minimap and the
   hero box sit side by side so the map keeps as much height as possible.
   On a phone the map is still the thing you came for. */
@media (max-width: 52rem) {
  .kp-play {
    flex-direction: column;
    align-items: stretch;
  }

  .kp-shell .kp-stage {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 16rem;
  }

  .kp-side {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
  }

  .kp-panel {
    flex: 1 1 0;
    min-width: 0;
  }

  .kp-panel--hero .kp-panel__hint {
    display: none;
  }
}


/* ===========================================================================
   The artwork contact sheet — /kingdoms-art.html

   A different shape of page entirely: it scrolls, it is mostly reading, and
   there is no canvas that has to fit the window. So it undoes the arcade
   shell's "fill the viewport and never scroll" arrangement rather than
   working around it.
   =========================================================================== */

.kingdoms-art-page .Master > section.ar-shell {
  display: block;
  max-width: 78rem;
  margin: 0 auto;
  padding: 14px 16px 28px;
}

.kp-art-intro {
  max-width: 44rem;
  margin: 0 auto 22px;
}

.kp-art-intro h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  color: var(--ink);
}

.kp-art-intro p {
  margin: 0 0 12px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.kp-art-notes {
  margin: 0 0 14px;
  padding-left: 1.2rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

.kp-art-notes li { margin-bottom: 8px; }

.kp-art-intro code,
.kp-art-card__key,
.kp-art-card__line {
  font-family: 'Cascadia Mono', 'Consolas', monospace;
  /* Ligatures off. The monospace stack draws '=>' and '===' as single glyphs,
     which on a page whose whole content is names and one line of JavaScript is
     actively misleading. Same reason the review pages turn them off. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
}

.kp-art-tally {
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--ink) !important;
}

/* auto-fill rather than auto-fit: with auto-fit a single card stretches to the
   full width of the page and a 96-pixel picture sits marooned in the middle of
   it. auto-fill keeps the column width whatever the count is. */
.kp-art-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 14px;
}

.kp-art-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface-alt);
  padding: 12px;
}

/* A card whose picture is the real thing rather than a placeholder. Worth
   seeing at a glance: it is the answer to "did my PNG actually load". */
.kp-art-card--supplied {
  border-color: var(--accent);
}

.kp-art-card__strip {
  display: flex;
  /* Flush, not spaced. Three ground tiles side by side with a gap between them
     tells you nothing; the whole reason for showing three is to see whether
     the seams line up when they are laid next to each other on the map. */
  gap: 0;
  align-items: flex-end;
  justify-content: center;
  min-height: 7rem;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 6px;
  /* A checkerboard, so transparency in a supplied PNG is visible rather than
     blending into whatever the theme's surface happens to be. */
  background-color: #6E6E6E;
  background-image:
    linear-gradient(45deg, #5A5A5A 25%, transparent 25%, transparent 75%, #5A5A5A 75%),
    linear-gradient(45deg, #5A5A5A 25%, transparent 25%, transparent 75%, #5A5A5A 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.kp-art-shot {
  display: block;
  max-width: 100%;
  height: auto;
}

.kp-art-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 1rem;
}

.kp-art-card__key {
  font-size: 0.95rem;
  color: var(--ink);
  user-select: all;
}

.kp-art-badge {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-faint);
}

.kp-art-card--supplied .kp-art-badge {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

.kp-art-card__what,
.kp-art-card__size {
  margin: 0 0 8px;
  font-size: 0.87rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

.kp-art-card__size { color: var(--ink-faint); }

.kp-art-card__line {
  margin: 0;
  padding: 8px 9px;
  /* Wrapped rather than scrolled sideways. A soft wrap puts no newline into
     what gets copied, so the line still pastes as one line -- and a scrollbar
     on the one thing this page exists to hand you is a poor joke. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--ground);
  font-size: 0.8rem;
  color: var(--ink);
  user-select: all;
}