/* ==========================================================================
   HOUSE BANNERS

   One banner per great house, reused everywhere a house has to be shown as a
   place rather than a word: the origin cards in character creation, the header
   of the Seat tab, and the Crown's roster of paramounts in the court.

   Built the same way as the travel destination rows in ui/world.js - a house
   colour wash over the seat's own region art - so a house card and a journey to
   that house read as the same place. The art is the region art we already ship
   (client/assets/art/region-*.webp); no new files are needed for a new house,
   only a colour pair here.

   Colours are per-house on purpose and are the one place in the stylesheet that
   does not come from tokens.css: they are heraldry, not theme. Everything else
   (text, borders, radii) uses the tokens.
   ========================================================================== */

.house-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 92px;
  padding: 0.55rem 0.7rem;
  /* the art banner's gilt frame (the manuscript look, stage 2, 2026-09-30):
     a gold hairline, a dark mat, a second hairline inside */
  border: 1px solid var(--gild-faint);
  border-radius: 2px;
  box-shadow: inset 0 0 0 3px var(--banner-mat), inset 0 0 0 4px var(--gild-faint);
  background-color: var(--bg-surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  box-sizing: border-box;
}

.house-banner-name {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 1.2143rem;
  color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  line-height: 1.15;
}

.house-banner-words {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--accent-gold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  line-height: 1.25;
}

.house-banner-seat {
  font-family: var(--font-serif);
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  margin-top: 0.1rem;
}

/* The heraldry wash stays dark in both themes, so the lettering on it must too:
   light mode's parchment inks put the house name at 1.2:1 on it (2026-09-17).
   These are the dark theme's own values from tokens.css, scoped to the banner. */
:root.light-mode .house-banner {
  --text-primary: #F0E8D4;
  --text-secondary: #C4B8A4;
  --accent-gold: #D4AE5A;
}

/* -- Selectable variant: the origin cards in the creation wizard ---------- */
.house-banner.selectable { cursor: pointer; transition: border-color 0.12s, transform 0.08s; }
.house-banner.selectable:hover  { border-color: var(--text-muted); }
.house-banner.selectable:active { transform: scale(0.995); }
.house-banner.selected {
  border-color: var(--accent-ember);
  box-shadow: 0 0 0 1px var(--accent-ember) inset, inset 0 0 0 3px var(--banner-mat), inset 0 0 0 4px var(--gild);
}

/* A tick in the corner, so the chosen house is obvious without relying on the
   border colour alone. */
.house-banner.selected::after {
  content: '';
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  font-size: var(--fs-text);
  color: var(--accent-ember);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* -- Per-house heraldry --------------------------------------------------
   Two stops of house colour, then the region photograph. The wash is heavy on
   the left so the name stays readable over any part of the image. */

.hb-targaryen {
  background-image:
    linear-gradient(100deg, rgba(31, 13, 53, 0.94) 0%, rgba(13, 6, 32, 0.72) 52%, rgba(13, 13, 13, 0.42) 100%),
    url('../../assets/art/region-dragonstone.webp');
}

.hb-stark {
  background-image:
    linear-gradient(100deg, rgba(20, 30, 42, 0.94) 0%, rgba(10, 16, 24, 0.72) 52%, rgba(13, 13, 13, 0.42) 100%),
    url('../../assets/art/region-winterfell.webp');
}

.hb-arryn {
  background-image:
    linear-gradient(100deg, rgba(12, 31, 53, 0.94) 0%, rgba(6, 16, 24, 0.72) 52%, rgba(13, 13, 13, 0.42) 100%),
    url('../../assets/art/region-the_eyrie.webp');
}

.hb-lannister {
  background-image:
    linear-gradient(100deg, rgba(45, 32, 8, 0.94) 0%, rgba(24, 14, 3, 0.72) 52%, rgba(13, 13, 13, 0.42) 100%),
    url('../../assets/art/region-casterly_rock.webp');
}

.hb-tyrell {
  background-image:
    linear-gradient(100deg, rgba(15, 45, 10, 0.94) 0%, rgba(8, 24, 8, 0.72) 52%, rgba(13, 13, 13, 0.42) 100%),
    url('../../assets/art/region-highgarden.webp');
}

.hb-baratheon {
  background-image:
    linear-gradient(100deg, rgba(10, 24, 48, 0.94) 0%, rgba(5, 14, 29, 0.72) 52%, rgba(13, 13, 13, 0.42) 100%),
    url('../../assets/art/region-storms_end.webp');
}

.hb-hightower {
  background-image:
    linear-gradient(100deg, rgba(8, 42, 44, 0.94) 0%, rgba(4, 21, 24, 0.72) 52%, rgba(13, 13, 13, 0.42) 100%),
    url('../../assets/art/region-oldtown.webp');
}

/* TULLY HAS NO PICTURE EITHER (2026-09-28) - the same missing
   region-riverlands.webp as Mooton below. A wash of the house's own river blue
   running into its red, and nothing else, until the art exists. */
.hb-tully {
  background-image:
    linear-gradient(100deg, rgba(14, 32, 58, 0.96) 0%, rgba(44, 14, 18, 0.82) 60%, rgba(13, 13, 13, 0.6) 100%);
}

/* -- The houses of trade (2026-08-28) --------------------------------------

   The third rung. Each wears its LIEGE'S region art, because that is where it
   lives - a Redwyne stands in the Reach and a Glover in the North - but with a
   darker, plainer wash than the paramount above it. That difference is the
   point: a bannerman's banner should not look like a Lord Paramount's, and
   nobody should have to read the caption to see which rung they are on.

   No new art files. Same rule as the great houses: a new house needs a colour
   pair here and nothing else. */
.hb-house_velaryon {
  background-image:
    linear-gradient(100deg, rgba(10, 34, 44, 0.96) 0%, rgba(5, 17, 24, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-dragonstone.webp');
}
.hb-house_glover {
  background-image:
    linear-gradient(100deg, rgba(24, 28, 30, 0.96) 0%, rgba(12, 15, 16, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-winterfell.webp');
}
.hb-house_grafton {
  background-image:
    linear-gradient(100deg, rgba(14, 26, 40, 0.96) 0%, rgba(7, 13, 20, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-the_eyrie.webp');
}
.hb-house_lefford {
  background-image:
    linear-gradient(100deg, rgba(38, 29, 10, 0.96) 0%, rgba(20, 15, 5, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-casterly_rock.webp');
}
.hb-house_redwyne {
  background-image:
    linear-gradient(100deg, rgba(42, 12, 20, 0.96) 0%, rgba(22, 6, 10, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-highgarden.webp');
}
.hb-house_wylde {
  background-image:
    linear-gradient(100deg, rgba(16, 26, 34, 0.96) 0%, rgba(8, 13, 18, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-storms_end.webp');
}
.hb-house_beesbury {
  background-image:
    linear-gradient(100deg, rgba(44, 32, 8, 0.96) 0%, rgba(23, 17, 4, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-oldtown.webp');
}
/* MOOTON HAS NO PICTURE, and that is not an oversight. There is no
   region-riverlands.webp in client/assets/art - the Riverlands arrived after the
   art did, which is also why Harrenhal has no banner class of its own. Naming
   the file anyway would leave a broken image request on every creation screen,
   so this is a gradient and nothing else until the art exists. Add the url here
   the day it does. */
/* HARRENHAL - the Riverlands' great seat (riverlands) - had no class at all and
   fell to the plain fallback below. Its own colours (houses.json: ash #3b3530,
   bone #b7a57f), a gradient like Tully's until region-riverlands.webp exists. */
.hb-harrenhal {
  background-image:
    linear-gradient(100deg, rgba(59, 53, 48, 0.96) 0%, rgba(40, 34, 28, 0.84) 55%, rgba(110, 98, 72, 0.55) 100%);
}
.hb-house_mooton {
  background-image:
    linear-gradient(100deg, rgba(20, 30, 26, 0.96) 0%, rgba(10, 16, 13, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%);
}
/* THE EIGHT SWORN HOUSES OF 2026-10-21, one more per region; Mallister, like
   Mooton, has no Riverlands picture to stand on. */
.hb-house_forrester {
  background-image:
    linear-gradient(100deg, rgba(18, 32, 22, 0.96) 0%, rgba(9, 16, 11, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-winterfell.webp');
}
.hb-house_royce {
  background-image:
    linear-gradient(100deg, rgba(36, 28, 16, 0.96) 0%, rgba(18, 14, 8, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-the_eyrie.webp');
}
.hb-house_marbrand {
  background-image:
    linear-gradient(100deg, rgba(42, 22, 10, 0.96) 0%, rgba(21, 11, 5, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-casterly_rock.webp');
}
.hb-house_oakheart {
  background-image:
    linear-gradient(100deg, rgba(20, 34, 18, 0.96) 0%, rgba(10, 17, 9, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-highgarden.webp');
}
.hb-house_caron {
  background-image:
    linear-gradient(100deg, rgba(40, 32, 12, 0.96) 0%, rgba(20, 16, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-storms_end.webp');
}
.hb-house_bulwer {
  background-image:
    linear-gradient(100deg, rgba(42, 12, 12, 0.96) 0%, rgba(21, 6, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-oldtown.webp');
}
.hb-house_mallister {
  background-image:
    linear-gradient(100deg, rgba(28, 20, 38, 0.96) 0%, rgba(14, 10, 19, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%);
}
.hb-house_celtigar {
  background-image:
    linear-gradient(100deg, rgba(40, 14, 12, 0.96) 0%, rgba(20, 7, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-dragonstone.webp');
}

/* THE SIXTEEN OF 2026-10-21 (the rest of every lord's roster, made playable).
   The Riverlands four, like Mooton, have no picture to stand on. */
.hb-house_bolton {
  background-image:
    linear-gradient(100deg, rgba(33, 12, 12, 0.96) 0%, rgba(16, 6, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-winterfell.webp');
}
.hb-house_karstark {
  background-image:
    linear-gradient(100deg, rgba(12, 12, 12, 0.96) 0%, rgba(6, 6, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-winterfell.webp');
}
.hb-house_manderly {
  background-image:
    linear-gradient(100deg, rgba(12, 22, 22, 0.96) 0%, rgba(6, 11, 11, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-winterfell.webp');
}
.hb-house_belmore {
  background-image:
    linear-gradient(100deg, rgba(21, 14, 26, 0.96) 0%, rgba(10, 7, 13, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-the_eyrie.webp');
}
.hb-house_hunter {
  background-image:
    linear-gradient(100deg, rgba(21, 14, 12, 0.96) 0%, rgba(10, 7, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-the_eyrie.webp');
}
.hb-house_reyne {
  background-image:
    linear-gradient(100deg, rgba(32, 12, 12, 0.96) 0%, rgba(16, 6, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-casterly_rock.webp');
}
.hb-house_tarbeck {
  background-image:
    linear-gradient(100deg, rgba(12, 15, 28, 0.96) 0%, rgba(6, 7, 14, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-casterly_rock.webp');
}
.hb-house_florent {
  background-image:
    linear-gradient(100deg, rgba(41, 22, 12, 0.96) 0%, rgba(20, 11, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-highgarden.webp');
}
.hb-house_dondarrion {
  background-image:
    linear-gradient(100deg, rgba(18, 12, 24, 0.96) 0%, rgba(9, 6, 12, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-storms_end.webp');
}
.hb-house_estermont {
  background-image:
    linear-gradient(100deg, rgba(12, 21, 14, 0.96) 0%, rgba(6, 10, 7, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-storms_end.webp');
}
.hb-house_costayne {
  background-image:
    linear-gradient(100deg, rgba(18, 18, 18, 0.96) 0%, rgba(9, 9, 9, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-oldtown.webp');
}
.hb-house_cuy {
  background-image:
    linear-gradient(100deg, rgba(44, 36, 12, 0.96) 0%, rgba(22, 18, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-oldtown.webp');
}
.hb-house_blackwood {
  background-image:
    linear-gradient(100deg, rgba(12, 12, 12, 0.96) 0%, rgba(6, 6, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%);
}
.hb-house_bracken {
  background-image:
    linear-gradient(100deg, rgba(28, 12, 12, 0.96) 0%, rgba(14, 6, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%);
}
.hb-house_frey {
  background-image:
    linear-gradient(100deg, rgba(27, 28, 30, 0.96) 0%, rgba(13, 14, 15, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%);
}
.hb-house_darry {
  background-image:
    linear-gradient(100deg, rgba(24, 18, 12, 0.96) 0%, rgba(12, 9, 6, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%);
}

/* A sellsword company's banner on its own tab (2026-10-13, ui/mercenaries.js):
   Lys, where every company is raised. */
.hb-company_lys {
  background-image:
    linear-gradient(100deg, rgba(34, 22, 40, 0.96) 0%, rgba(17, 11, 20, 0.82) 52%, rgba(13, 13, 13, 0.6) 100%),
    url('../../assets/art/region-lys.webp');
}
/* A house with no class of its own still gets a banner rather than a bare box. */
.house-banner:not([class*=' hb-']):not([class^='hb-']) {
  background-image: linear-gradient(100deg, rgba(30, 24, 20, 0.94) 0%, rgba(13, 13, 13, 0.6) 100%);
}

/* -- The Seat tab header ------------------------------------------------- */
.seat-banner { min-height: 108px; margin-bottom: 0.6rem; }
/* -- A section's banner (2026-10-15, her word: "make it a bit more obvious
      with some banners"): the house banner's gilt frame and dark wash, short,
      over a card's own section - the Herbal card on About, the medicine
      orders on the Player market. No house colours: the plain wash. -- */
.section-banner { min-height: 52px; margin-bottom: 0.6rem; }
.seat-banner-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.seat-banner-gold {
  font-family: var(--font-serif);
  font-size: 1.2143rem;
  font-weight: 600;
  color: var(--accent-gold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

/* -- Creation wizard grid: wide enough that the words never wrap to a sliver.
      The old grid used minmax(150px, 1fr), which squashed each card until the
      house name broke over three lines and the motto overlapped the seat. -- */
.house-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.5rem;
}

/* THE DRAGON SITS ABOVE THE REST.
   House Targaryen is not one great house among seven here - it is the default,
   the one with dragons and the claim to the throne, and the only one a courtier
   can be. In a plain grid it sat in the top-left looking like a peer of the
   Arryns. Spanning the full width puts it where it belongs and lets the other
   houses fall into the same grid beneath it, unchanged. */
.house-card-grid .house-banner.hb-targaryen {
  grid-column: 1 / -1;
  min-height: 104px;
}

/* THREE RUNGS, THREE SIZES (2026-08-28).
   The dragon spans the row, a great house is a card, and a house of trade is a
   SMALLER card in a tighter grid, set in and hung off a rule down the left. The
   size difference is the whole point: these are bannermen, and a chooser who
   sees sixteen cards of one size reads sixteen equal choices, which is exactly
   what the three-rung design is not. Nothing here is decoration - it is the
   hierarchy, said in the only language a picker has. */
.house-card-grid--minor {
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 0.35rem;
  margin-left: 0.85rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--gild-faint);
}
.house-banner--minor {
  min-height: 62px;
  padding: 0.4rem 0.5rem;
  border-radius: 2px;
  opacity: 0.92;
}
.house-banner--minor:hover,
.house-banner--minor.selected { opacity: 1; }
.house-banner--minor .house-banner-name  { font-size: var(--fs-small); font-weight: 600; }
.house-banner--minor .house-banner-words { font-size: var(--fs-small); line-height: 1.2; }
.house-banner--minor .house-banner-seat  { font-size: var(--fs-small); margin-top: 0.05rem; }

/* The heading over them is a sub-heading, not a peer of "Your Blood". */
.house-minor-head {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.8;
  margin: 0 0 0.35rem 1.7rem;
}

@media (max-width: 560px) {
  .house-card-grid { grid-template-columns: 1fr; }
  .house-banner { min-height: 78px; }
  /* Two to a row even on a phone: they are meant to look smaller than the
     banner above them, and one per row makes them look the same size. */
  .house-card-grid--minor { grid-template-columns: repeat(2, 1fr); }
  .house-banner--minor { min-height: 58px; }
}

/* The Sworn Houses list on a wide page (2026-10-01): a house's name and its
   loyalty ended up 1,700px apart at Page Width 1800. The rows take 26rem
   columns instead - one column on a phone or the default desktop page. */
.seat-vassals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); column-gap: 2rem; }