/* ── Races landing page ──────────────────────────────────── */

/* The site gives no width to a page; each one caps its own, and the two kinds cap differently. A
   landing page is centred -- .home at 1040px, the item directory at 1180px -- and a detail page is
   left-aligned under a narrower cap. This is a landing page, so it follows those: 1180px, which is
   also what keeps all three bands side by side, since three 310px columns and their gaps need a
   shade under a thousand. */
.race-index {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 40px;
}

.race-page-heading {
    margin: 20px 0 16px;
    font-size: 1.5rem;
    color: #d8d8d8;
}

/* The three bands sit side by side on a wide screen the way the store presents them, and stack
   once there is no longer room for three columns of cards. */
.race-bands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 14px;
    margin-bottom: 34px;
}

.race-band {
    background: #131313;
    border: 1px solid #262626;
    border-top: 3px solid var(--race-band-accent, #444);
    border-radius: 4px;
    padding: 12px 14px 16px;
}

.race-band--free { --race-band-accent: #6e7681; }
.race-band--premium { --race-band-accent: #3f7fb5; }
.race-band--iconic { --race-band-accent: #9a5fb0; }

.race-band-head {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.race-band-name {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--race-band-accent, #999);
}

.race-band-count {
    font-size: 0.75rem;
    color: #666;
    background: #1c1c1c;
    border-radius: 9px;
    padding: 1px 7px;
}

.race-band-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.78rem;
    color: #6b6b6b;
    line-height: 1.4;
}

.race-band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px 6px;
}

.race-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 2px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.12s ease;
}
.race-card:hover { background: #1d1d1d; }

/* The frame is drawn even when a race has no icon, so a missing picture leaves a gap the size of
   the picture rather than pulling the name up out of line with its neighbours.

   Sized to hold the art rather than to fill the card. The client's race icons are 20x20 glyphs --
   that is the whole of what it ships for a race, the "avatar" being a 3D character entity rather
   than a portrait -- so a frame any bigger than this is a frame asking to have 20 pixels stretched
   across it. See .race-card-icon. */
.race-card-frame {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c0c0c;
    border: 1px solid #333;
    border-radius: 3px;
    overflow: hidden;
}
.race-card:hover .race-card-frame { border-color: #5a5a5a; }

/* Doubled, and doubled exactly: 20x20 art at 40x40, with nearest-neighbour so each source pixel
   becomes a clean block of four.

   The scale factor and the rendering mode go together and neither works without the other. A
   browser's default smoothing is what made these mush at 2.7x, and it would do the same at 2x;
   nearest-neighbour at a fractional scale is worse still, dropping and doubling rows unevenly. An
   integer factor is the one case where scaling client art up stays honest, so if this size ever
   changes it should change to 60px (3x), not to something in between. */
.race-card-icon {
    width: 40px;
    height: 40px;
    /* crisp-edges first as the fallback for older Firefox, pixelated last because it is the one
       that actually specifies nearest-neighbour and wins wherever it is understood. */
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.race-card-name {
    font-size: 0.8rem;
    color: #b0b0b0;
    text-align: center;
    line-height: 1.2;
}
.race-card:hover .race-card-name { color: #c8a84b; }

/* ── Comparison table ────────────────────────────────────── */

.race-table-heading {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: #d8d8d8;
}

.race-table-note {
    margin: 0 0 12px;
    max-width: 74ch;
    font-size: 0.8rem;
    color: #6b6b6b;
    line-height: 1.5;
}

.race-table-wrap {
    overflow-x: auto;
    margin-bottom: 30px;
}

.race-table {
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 640px;
}

.race-table th,
.race-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #202020;
    text-align: left;
    white-space: nowrap;
}

.race-table thead th {
    position: sticky;
    top: 0;
    background: #141414;
    border-bottom: 1px solid #333;
    color: #8a8a8a;
    font-weight: normal;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.race-table tbody tr:hover { background: #1a1a1a; }

.race-table .race-col-name a { color: #b8b8b8; text-decoration: none; }
.race-table .race-col-name a:hover { color: #c8a84b; text-decoration: underline; }

.race-table .race-col-mod {
    text-align: center;
    width: 3.4rem;
    font-variant-numeric: tabular-nums;
}

.race-table .race-col-pl { color: #9a9a9a; }

/* A positive modifier is the reason to pick a race and a negative one is the price; the two are
   worth telling apart at a glance, and a zero is drawn as nothing at all. */
.race-mod-up { color: #7fb069; }
.race-mod-down { color: #b5645a; }
.race-mod-zero { color: #3a3a3a; }

.race-tag {
    margin-left: 6px;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 1px 5px;
    vertical-align: 1px;
}
.race-tag--premium { color: #7fb2dc; background: #16242e; }
.race-tag--iconic { color: #c194d6; background: #241a2b; }

/* ── One race ────────────────────────────────────────────── */

/* Capped and left-aligned, the way .class-detail and .spell-detail are -- a detail page is read as
   prose down a column, and the enhancement panel is the only thing on it that wants width. 900px
   matches the class pages, which are the nearest thing to this one. */
.race-detail {
    max-width: 900px;
    padding: 0 0 40px;
}

/* The race plate, at the 308x124 it is drawn at. Stretching it to the column width was a 2.9x
   upscale of the best art a race has, which is the last thing on the page that should be soft. */
.race-header-image {
    margin: 16px 0 0;
    width: max-content;
    max-width: 100%;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    overflow: hidden;
}
.race-header-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.race-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 18px 0 16px;
}

.race-title-text { min-width: 0; }

.race-heading {
    margin: 0 0 4px;
    font-size: 1.5rem;
    color: #e0e0e0;
}

.race-badge {
    margin-left: 8px;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 2px 6px;
    vertical-align: 5px;
}
.race-badge--premium { color: #7fb2dc; background: #16242e; }
.race-badge--iconic { color: #c194d6; background: #241a2b; }

.race-subline {
    font-size: 0.82rem;
    color: #777;
    margin-bottom: 8px;
}
.race-subline a { color: #a99055; text-decoration: none; }
.race-subline a:hover { text-decoration: underline; }

/* The way through to the Studio. The doll sits on the text's own baseline row rather than above it,
   and takes the link's colour, so hovering moves the pair together. */
.race-studio-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.race-studio-link svg { flex: 0 0 auto; }

.race-blurb {
    margin: 0 0 8px;
    max-width: 82ch;
    font-size: 0.86rem;
    line-height: 1.55;
    color: #9d9d9d;
}

/* The ability strip: six fixed cells, so the eye can find Con in the same place on every race. */
.race-stat-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 96px));
    gap: 6px;
    margin-bottom: 12px;
}

.race-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 4px 8px;
    background: #131313;
    border: 1px solid #262626;
    border-radius: 3px;
}

.race-stat-label {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6a6a6a;
}

.race-stat-value {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.race-stat--up { border-color: #2f4526; }
.race-stat--up .race-stat-value { color: #7fb069; }
.race-stat--down { border-color: #4a2b27; }
.race-stat--down .race-stat-value { color: #b5645a; }
.race-stat--zero .race-stat-value { color: #454545; }

.race-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 22px;
    font-size: 0.8rem;
    color: #808080;
}
.race-extra b { color: #b9a05e; font-weight: normal; }

.race-section { margin-bottom: 32px; }

.race-section-heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: #d0d0d0;
    border-bottom: 1px solid #262626;
    padding-bottom: 5px;
}

.race-section-link {
    font-size: 0.78rem;
    color: #a99055;
    text-decoration: none;
    font-weight: normal;
}
.race-section-link:hover { text-decoration: underline; }

.race-section-note {
    margin: 0 0 12px;
    max-width: 80ch;
    font-size: 0.8rem;
    color: #6b6b6b;
    line-height: 1.5;
}

.race-feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.race-feat {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    background: #131313;
    border: 1px solid #222;
    border-radius: 3px;
}

.race-feat-frame {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: #0c0c0c;
    border: 1px solid #303030;
    border-radius: 2px;
    overflow: hidden;
}

.race-feat-icon { width: 100%; height: 100%; display: block; }

.race-feat-body { min-width: 0; }

.race-feat-name {
    font-size: 0.88rem;
    color: #cfcfcf;
    margin-bottom: 2px;
}

.race-feat-shared {
    margin-left: 8px;
    font-size: 0.72rem;
    color: #6f6f6f;
    font-style: italic;
}

.race-feat-desc {
    font-size: 0.81rem;
    line-height: 1.5;
    color: #8e8e8e;
}

/* The enhancement panel is borrowed whole from the enhancement pages. It is a fixed 301x468 box
   pinned to its background art, so it needs no width or overflow handling here — it already fits
   any column this page gives it.

   It must not get any, either. An earlier version set overflow-x on it to be safe, which is what
   put two scrollbars on a box that could not overflow in either direction: CSS computes a visible
   overflow on one axis to auto when the other axis is not visible, so asking for horizontal
   scrolling silently asked for vertical scrolling too, and the panel clipped its own art.

   All that is left to say is where it sits. The panel centres itself (margin: 0 auto), which is
   right on its own page and wrong in a section whose heading, prose and feat lists all start at
   the left edge. */
.race-section .enh-panel { margin-left: 0; }

@media (max-width: 720px) {
    .race-stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .race-title-row { flex-wrap: wrap; }
}

/* The house link gold, not the name's grey. A feat with no page of its own is written into this same
   element as plain text, so a link dressed like the text around it could not be found until the
   pointer happened to cross it. */
.race-feat-name a { color: var(--gold); text-decoration: none; }
.race-feat-name a:hover { color: var(--gold-lit); text-decoration: underline; }

/* How many feats a section holds, beside its heading. Whether a race gets three automatic feats or
   twelve is part of what the section says, and counting a list by eye is what it saves. */
.race-section-count {
    font-size: 0.72rem;
    color: #666;
    background: #1c1c1c;
    border-radius: 9px;
    padding: 1px 7px;
    font-weight: normal;
}

/* What a feat asks for beyond the race, above its description rather than buried in it: on a
   selectable feat this is the line that decides whether it is reachable at all. */
.race-feat-prereqs {
    font-size: 0.78rem;
    color: #8a7a4e;
    margin-bottom: 3px;
}
.race-feat-prereqs-label {
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.68rem;
    margin-right: 5px;
}