/* Civ4Web theme.
 *
 * The in-game HUD is near-black with an amber accent. This is the front of
 * house: Civ4's own menu blue and gold, with that same amber held back for
 * exactly one job - "you can act now". Reserving it is what makes the
 * colour mean something instead of just being warm; see the test that
 * enumerates every selector allowed to use it.
 */
@font-face {
  font-family: "Cinzel";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cinzel-600.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/alegreya-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/alegreya-sans-700.woff2") format("woff2");
}

:root {
  --ink: #0a1420;
  --field: #16283f;
  --rule: #24405c;
  --gild: #d8b45a;
  --gild-dim: #8f7838;
  --parchment: #e6dcc4;
  --dim: #7f95ae;
  --amber: #f2a93b;
  --ink-rise: #13263d;

  --font-display: "Cinzel", Georgia, serif;
  --font-ui: "Alegreya Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}

body.page {
  margin: 0;
  background: linear-gradient(180deg, var(--ink-rise) 0%, var(--ink) 60%);
  min-height: 100vh;
  color: var(--parchment);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--gild);
  margin: 0;
}

/* The inscription base under the wordmark: a solid rule over a hairline,
 * which is what makes it read as carved rather than underlined. */
.rule { border-top: 2px solid var(--gild-dim); }
.rule + .rule { border-top: 1px solid var(--rule); margin-top: 4px; }

.status-act, .row-edge-act, .is-actionable { color: var(--amber); }
.row-edge-act { border-left: 3px solid var(--amber); }

/* ---- shared surface primitives ----
 *
 * Everything above this line dresses the FRONT OF HOUSE (portal, seat,
 * admin). Everything below is deliberately page-agnostic, because the
 * in-game play page needs the same deep-blue-and-gold treatment for its
 * modal prompts and copying the look into style.css would have left two
 * palettes to keep in step by hand. style.css links this file first and
 * supplies only the delta; its own near-black HUD tokens still win the
 * cascade for the rest of that page (see index.html's own link order,
 * pinned by tests/web/test_theme.py).
 *
 * --amber is NOT used here, on purpose - see this file's own header and
 * test_amber_is_only_used_by_act_now_rules. A frame is chrome; it never
 * means "you can act".
 */

/* A pane of tinted glass over whatever is behind it, gold-ruled. Translucent
 * rather than solid because that is most of what makes Civ4's own popups
 * read as Civ4: the map stays legible through them, so a dialog feels like
 * it is sitting ON the game rather than replacing it. The two inset lines
 * are the carved edge - a dark hairline inside a gold one, the same
 * "solid rule over a hairline" trick .rule uses above. */
.civ-frame {
  background:
    linear-gradient(180deg, rgba(19, 38, 61, 0.93) 0%, rgba(10, 20, 32, 0.95) 100%);
  border: 1px solid var(--gild-dim);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(10, 20, 32, 0.85),
    inset 0 1px 0 rgba(216, 180, 90, 0.22),
    0 18px 48px rgba(0, 0, 0, 0.55);
  color: var(--parchment);
}

/* backdrop-filter is progressive enhancement, not load-bearing: the alpha
 * above already carries the effect on its own, and a browser that ignores
 * this rule shows the map sharp through the glass rather than blurred. */
@supports (backdrop-filter: blur(2px)) {
  .civ-frame { backdrop-filter: blur(3px) saturate(1.1); }
}

/* The wash behind a frame. Ink-tinted rather than neutral black so the
 * whole screen stays in the same key as the frame itself. */
.civ-scrim { background: rgba(6, 12, 20, 0.55); }

/* One list row: art on the left, label beside it, LEFT-ALIGNED. This is the
 * shape Civ4's own popup lists have - an icon column you can read down at a
 * glance - and it is why these rows are not just .btn with a picture in
 * them. 44px min-height keeps every one of them a legal tap target
 * (style.css's own rule for the whole play page). */
.civ-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  text-align: left;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--parchment);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.civ-row:active { border-color: var(--gild); }

/* Fixed 28px, and `flex: none` so a long label cannot squeeze the art. The
 * gutter is reserved WHETHER OR NOT there is an <img> in it: icons.json is
 * absent on an install with no uiicons.py run, every lookup answers null,
 * and a caller renders no <img> at all rather than a broken one (icons.js's
 * own rule). Rows must not reflow between those two cases, so the empty
 * span holds the same width.
 *
 * These are 64px DDS button art scaled DOWN, unlike the 16px advisor icons
 * style.css pixel-doubles, so they get ordinary smooth scaling. */
.civ-row-icon {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 4px;
  object-fit: contain;
}

/* min-width: 0 is what actually lets a long label ellipsize instead of
 * pushing the row wider than its frame - a flex item's default
 * min-width:auto refuses to shrink below its content. */
.civ-row-label { flex: 1; min-width: 0; }