/**
 * Rankings Poster Header
 *
 * "Wakasm's Tier and Rankings" promo header injected on every single game/board
 * REVIEW page. The right slot holds two minimalist bar charts (tier + score
 * distribution). All selectors are prefixed .wrh-* to avoid colliding with the
 * site-wide .tier-badge styles. Loaded only on single game/boardgame pages.
 */

/* When the poster is the section header, hide the plain <h2> it replaces. */
.game-rankings-detailed.wrh-has-poster > h2.game-section-heading { display: none; }

.wrh-header {
    --wrh-black: #141714;
    --wrh-green: #57bf4d;
    --wrh-cream: #eee4cf;

    position: relative;
    width: 100%;
    min-height: 150px;
    margin: 0 auto 18px;
    overflow: hidden;
    isolation: isolate;
    padding: 18px 24px 16px 30px;
    box-sizing: border-box;
    text-align: left;
    background:
        radial-gradient(circle at 12% 52%, rgba(87,191,77,.20), transparent 19%),
        linear-gradient(90deg, rgba(87,191,77,.12), transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.20)),
        var(--wrh-black);
    box-shadow:
        8px 10px 0 rgba(0,0,0,.35),
        inset 0 0 34px rgba(0,0,0,.62);
}

.wrh-header *,
.wrh-header *::before,
.wrh-header *::after { box-sizing: border-box; }

.wrh-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle, rgba(255,255,255,.09) 0 .75px, transparent 1.1px) 0 0 / 8px 8px,
        repeating-linear-gradient(90deg, transparent 0 28px, rgba(87,191,77,.065) 28px 29px),
        repeating-linear-gradient(0deg, transparent 0 28px, rgba(87,191,77,.045) 28px 29px);
    opacity: .35;
    mix-blend-mode: screen;
}

.wrh-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    background:
        linear-gradient(90deg, rgba(0,0,0,.20), transparent 18%, transparent 88%, rgba(0,0,0,.28)),
        radial-gradient(circle at 50% 50%, transparent 0 67%, rgba(0,0,0,.30) 100%);
}

.wrh-circle {
    position: absolute;
    left: 44px;
    top: 25px;
    width: 92px;
    height: 92px;
    z-index: -1;
    border-radius: 50%;
    border: 15px solid rgba(87,191,77,.34);
    opacity: .74;
    pointer-events: none;
}

.wrh-circle::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px solid rgba(87,191,77,.28);
}

.wrh-top {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 20px;
    align-items: start;
}

.wrh-titleblock { min-width: 0; }

.wrh-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    color: var(--wrh-green);
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.wrh-kicker::before {
    content: "";
    width: 40px;
    height: 3px;
    background: var(--wrh-green);
    box-shadow: 0 0 12px rgba(87,191,77,.38);
}

.wrh-h1 {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--wrh-cream);
    text-decoration: none;
    font-family: "Arial Black", Impact, Haettenschweiler, sans-serif;
    font-size: clamp(2.45rem, 5.85vw, 4.55rem);
    line-height: .90;
    letter-spacing: -.034em;
    text-transform: uppercase;
    text-shadow:
        3px 3px 0 rgba(0,0,0,.70),
        0 0 14px rgba(255,255,255,.05);
}

.wrh-h1:hover { color: #fff; }
.wrh-h1 .wrh-green { color: var(--wrh-green); letter-spacing: -.040em; }
.wrh-h1:hover .wrh-green { color: #6fd863; }

.wrh-and {
    display: inline-block;
    position: relative;
    top: -.10em;
    margin: 0 .12em;
    padding: .05em .20em .07em;
    color: #101010;
    background: var(--wrh-green);
    border: 2px solid rgba(0,0,0,.82);
    box-shadow: 3px 3px 0 rgba(0,0,0,.55);
    font-size: .39em;
    line-height: .92;
    transform: rotate(-3deg);
    letter-spacing: .02em;
}

/* one-line descriptor under the title */
.wrh-meta {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0 11px;
    align-items: center;
    margin-top: 13px;
    color: rgba(238,228,207,.80);
    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.wrh-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--wrh-green); flex: 0 0 auto; }

/* ── distribution charts (right slot) ────────────────────────────────────────
   The right slot holds two minimalist horizontal bar charts (tier + score
   distribution). Bars run left-to-right, coloured per tier, with a tiny count
   on the bar. Per-bar fill is an SVG attribute; fonts live here so the SVG
   carries no inline CSS. The 128px right column (.wrh-top) keeps the titleblock
   width stable regardless of the chart contents. */
.wrh-graph {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding-top: 2px;
}

/* Title runs vertically up the left of each chart so the bars get the height. */
.wrh-chart {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wrh-chart-head {
    flex: 0 0 auto;
    margin: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: rgba(238, 228, 207, .46);
    font-family: "Courier New", monospace;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.wrh-chart-svg {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.wrh-bar { fill-opacity: .9; }

.wrh-bar-n {
    fill: rgba(255, 255, 255, .95);
    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
}

.wrh-bar-x {
    fill: rgba(238, 228, 207, .62);
    font-family: "Courier New", monospace;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .02em;
}

@media (max-width: 920px) {
    .wrh-header { min-height: 194px; }
    .wrh-top { grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; }
    .wrh-circle { display: none; }
}

@media (max-width: 640px) {
    .wrh-header { min-height: 0; padding: 18px 16px 16px; }
    .wrh-top { grid-template-columns: 1fr; }
    .wrh-h1 { font-size: clamp(2.8rem, 15vw, 4.6rem); }
    .wrh-meta { flex-wrap: wrap; white-space: normal; font-size: 11px; letter-spacing: .075em; }
}