/* ==========================================================================
   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;
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  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-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  line-height: 1.15;
}

.house-banner-words {
  font-size: 0.68rem;
  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-size: 0.6rem;
  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;
}

/* 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: 0.8rem;
  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. */
.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%);
}

/* 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; }
.seat-banner-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.seat-banner-gold {
  font-size: 0.78rem;
  font-weight: 700;
  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(--border-dim);
}
.house-banner--minor {
  min-height: 62px;
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  opacity: 0.92;
}
.house-banner--minor:hover,
.house-banner--minor.selected { opacity: 1; }
.house-banner--minor .house-banner-name  { font-size: 0.74rem; font-weight: 600; }
.house-banner--minor .house-banner-words { font-size: 0.72rem; line-height: 1.2; }
.house-banner--minor .house-banner-seat  { font-size: 0.72rem; margin-top: 0.05rem; }

/* The heading over them is a sub-heading, not a peer of "Your Blood". */
.house-minor-head {
  font-size: 0.72rem;
  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; }
}