/* ============================================================
   Theme stylesheet. Hand-authored - no utility framework.
   Class vocabulary is local to this template:
     crown / gate / spread / block / slab / tilewall / chipwall /
     datatable / steplist / tally / scorecard / voices / qalist /
     rail / underdeck
   Breakpoints: 640px, 768px, 1024px.
   ============================================================ */

/* ---------- webfont ----------
   Cinzel is a variable face, so one rule per subset covers weights 600-900.
   Keep the latin-ext rule: it carries the Central/Eastern European diacritics. */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt7-GT7PkRXM8Xx.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7PkRXMw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
    --ink: #161413;
    --ink-2: #1f1c1b;
    --ink-rgb: 22, 20, 19;
    --gold: #f88d14;
    --gold-lt: #fbaa3a;
    --gold-dk: #c97010;
    --gold-rgb: 248, 141, 20;
    --blood: #8e1220;
    --blood-lt: #b8202f;
    --blood-rgb: 142, 18, 32;
    --vellum: #fcebbb;
    --vellum-rgb: 252, 235, 187;
    --leaf: #039938;
    --leaf-lt: #05bf38;
    --leaf-dk: #012b10;

    --face-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
    --face-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --shell: 80rem;
    --gutter: 1rem;
    --round-s: .5rem;
    --round-l: .75rem;
    --rule: 1px solid rgba(var(--gold-rgb), .25);
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
}

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body {
    font-family: var(--face-body);
    line-height: 1.5;
    background: var(--ink);
    color: rgba(var(--vellum-rgb), .9);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b, strong {
    font-weight: bolder;
}

small {
    font-size: 80%;
}

ul, ol {
    list-style: none;
}

img, svg, figure {
    display: block;
}

img {
    max-width: 100%;
    height: auto;
}

table {
    text-indent: 0;
    border-collapse: collapse;
    border-color: inherit;
}

summary {
    display: list-item;
}

::selection {
    background-color: var(--gold);
    color: var(--ink);
}

/* ---------- shared pieces ---------- */
.shell-row {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* green CTA button (Westio brand primary) + amber variant */
.pressbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.6rem;
    border: 1px solid #027a2e;
    border-radius: var(--round-s);
    background: linear-gradient(#05bf38 0%, #039938 48%, #027a2e 100%);
    box-shadow: 0 5px #015c22, 0 10px 18px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .3);
    color: #fff;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: transform .12s, box-shadow .12s;
}

.pressbtn:hover {
    transform: translateY(2px);
    box-shadow: 0 3px #015c22, 0 7px 14px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .3);
}

.pressbtn:active {
    transform: translateY(5px);
    box-shadow: 0 0 #015c22, 0 3px 8px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .2);
}

.pressbtn--ghost {
    padding: .8rem 1.4rem;
    border-color: #a05810;
    background: linear-gradient(#fbaa3a 0%, #f88d14 55%, #c97010 100%);
    box-shadow: 0 5px #8a4c0c, 0 10px 18px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .35);
    color: #1a0800;
    font-weight: 700;
}

.pressbtn--ghost:hover {
    box-shadow: 0 3px #8a4c0c, 0 7px 14px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .35);
}

.pressbtn--sm {
    padding: .6rem 1rem;
    font-size: .8125rem;
}

.pressbtn--full {
    width: 100%;
}

/* parchment panel */
.slab {
    border: 1px solid rgba(var(--gold-rgb), .28);
    border-radius: var(--round-s);
    background: linear-gradient(rgba(46, 38, 28, .92), rgba(var(--ink-rgb), .95));
}

.slab--crimson {
    border-color: rgba(var(--gold-rgb), .3);
    background: linear-gradient(rgba(var(--blood-rgb), .32), rgba(var(--ink-rgb), .9));
}

/* hairline gold divider */
.filigree {
    height: 2px;
    background-image: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-lt) 50%, var(--gold) 82%, transparent);
}

/* animated sweep over artwork */
.gleam {
    position: relative;
    overflow: hidden;
}

.gleam::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(105deg, transparent 38%, rgba(255, 235, 180, .2) 48%, transparent 58%);
    animation: gleam-sweep 7s ease-in-out infinite;
}

@keyframes gleam-sweep {
    0%, 65% {
        transform: translateX(-120%);
    }
    to {
        transform: translateX(120%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gleam::after {
        animation: none;
    }
    .pressbtn {
        transition: none;
    }
}

/* ---------- crown: sticky masthead ---------- */
.crown {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: var(--rule);
    background: rgba(var(--ink-rgb), .95);
}

@supports (backdrop-filter: blur(8px)) {
    .crown {
        background: rgba(var(--ink-rgb), .8);
        backdrop-filter: blur(8px);
    }
}

.crown__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: .75rem;
}

.crown__mark {
    flex-shrink: 0;
}

.crown__mark img {
    height: 2.75rem;
    width: auto;
}

.railmenu {
    display: none;
    align-items: center;
    gap: 1.25rem;
    margin-left: .5rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(var(--vellum-rgb), .7);
}

.railmenu a:hover {
    color: var(--gold);
}

.crown__acts {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

@media (min-width: 1024px) {
    .railmenu {
        display: flex;
    }
}

/* ---------- gate: first screen ---------- */
.gate {
    position: relative;
    overflow: hidden;
    border-bottom: var(--rule);
    background:
        radial-gradient(circle at 30% 25%, rgba(var(--gold-rgb), .28), transparent 55%),
        radial-gradient(circle at 72% 70%, rgba(var(--blood-rgb), .45), transparent 60%),
        linear-gradient(160deg, #241d15, var(--ink));
}

.gate__wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at top, rgba(var(--gold-rgb), .14), transparent 60%);
}

.gate__inner {
    position: relative;
    display: grid;
    gap: 2.5rem;
    align-items: center;
    padding-block: 3rem;
}

.gate__flag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    padding: .25rem .75rem;
    border: 1px solid rgba(var(--gold-rgb), .4);
    border-radius: 999px;
    background: rgba(31, 26, 20, .7);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
}

.gate__title {
    font-family: var(--face-display);
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--vellum);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}

.gate__lede {
    margin-top: .75rem;
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 600;
    color: rgba(var(--vellum-rgb), .75);
}

.gate__offer {
    margin-top: 1.25rem;
    font-family: var(--face-display);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--gold);
}

.gate__offer em {
    font-style: normal;
    color: var(--vellum);
}

.gate__acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

.gate__fineprint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    margin-top: 1rem;
    font-size: .75rem;
    color: rgba(var(--vellum-rgb), .55);
}

.gate__fineprint b {
    padding: .125rem .375rem;
    border: 1px solid rgba(var(--vellum-rgb), .25);
    border-radius: .25rem;
    font-weight: 700;
}

.gate__art {
    display: block;
    border: 1px solid rgba(var(--gold-rgb), .4);
    border-radius: var(--round-l);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

.gate__art img {
    width: 100%;
    border-radius: var(--round-l);
}

@media (min-width: 640px) {
    .gate__title {
        font-size: 3rem;
    }
    .gate__lede {
        font-size: 1.25rem;
    }
    .gate__offer {
        font-size: 1.875rem;
    }
}

@media (min-width: 1024px) {
    .gate__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        padding-block: 4rem;
    }
    .gate__title {
        font-size: 3.75rem;
    }
    .gate__offer {
        font-size: 2.25rem;
    }
}

/* ---------- spread: article + rail ---------- */
.spread {
    padding-block: 3rem;
}

.spread__body {
    display: grid;
    gap: 3rem;
}

.spread__main {
    min-width: 0;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: rgba(var(--vellum-rgb), .85);
}

.spread__main > * + * {
    margin-top: 3.5rem;
}

@media (min-width: 1024px) {
    .spread__body {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

.block__title {
    font-family: var(--face-display);
    font-size: 1.875rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--vellum);
}

.block__title b {
    color: var(--gold);
}

.block__rule {
    width: 10rem;
    margin-block: 1.25rem;
}

.block__sub {
    margin-top: 2rem;
    font-family: var(--face-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
}

.block__note {
    margin-top: 1rem;
}

@media (min-width: 640px) {
    .block__title {
        font-size: 2.25rem;
    }
}

.bodycopy > * + * {
    margin-top: 1.25rem;
}

.bodycopy p {
    max-width: 74ch;
}

.bodycopy h2 {
    margin-top: 2.5rem;
    font-family: var(--face-display);
    font-size: 1.875rem;
    font-weight: 900;
    color: var(--vellum);
}

.bodycopy h3 {
    margin-top: 2rem;
    font-family: var(--face-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
}

.bodycopy strong {
    color: var(--vellum);
}

.bodycopy em {
    color: rgba(var(--vellum-rgb), .95);
}

.bodycopy ul,
.bodycopy ol {
    padding-left: 1.5rem;
    max-width: 74ch;
}

.bodycopy li {
    margin-top: .5rem;
    list-style: disc;
}

.bodycopy ol li {
    list-style: decimal;
}

.bodycopy li::marker {
    color: var(--gold);
    font-weight: 700;
}

.bodycopy table {
    width: 100%;
    margin-top: 1.5rem;
    border: 1px solid rgba(var(--gold-rgb), .3);
    border-radius: var(--round-l);
    overflow: hidden;
    font-size: .9375rem;
    text-align: left;
}

.bodycopy th,
.bodycopy td {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(var(--gold-rgb), .15);
}

.bodycopy th {
    font-family: var(--face-display);
    font-weight: 700;
    background: rgba(var(--blood-rgb), .4);
    color: var(--vellum);
}

/* ---------- byline strip ---------- */
.byline {
    padding: 1.25rem;
    font-size: .875rem;
    color: rgba(var(--vellum-rgb), .7);
}

.byline b {
    font-weight: 600;
    color: var(--vellum);
}

.byline i {
    font-style: normal;
    font-weight: 600;
    color: var(--gold);
}

/* ---------- wayfinder: table of contents ---------- */
.wayfinder {
    padding: 1.5rem;
    border-radius: var(--round-l);
}

.wayfinder__list {
    display: grid;
    gap: .5rem 2rem;
    counter-reset: waypoint;
    font-size: .9375rem;
}

.wayfinder__list li {
    counter-increment: waypoint;
}

.wayfinder__list li::before {
    content: counter(waypoint) ".";
    margin-right: .5rem;
    font-family: var(--face-display);
    font-weight: 700;
    color: var(--gold);
}

.wayfinder__list a {
    color: rgba(var(--vellum-rgb), .8);
    text-underline-offset: 4px;
}

.wayfinder__list a:hover {
    color: var(--gold);
    text-decoration: underline;
}

@media (min-width: 640px) {
    .wayfinder__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- datatable ---------- */
.tablewrap {
    margin-top: 1.5rem;
    border: 1px solid rgba(var(--gold-rgb), .3);
    border-radius: var(--round-l);
    overflow: hidden;
}

.tablewrap--scroll {
    overflow-x: auto;
}

.datatable {
    width: 100%;
    font-size: .9375rem;
    text-align: left;
}

.datatable--wide {
    min-width: 560px;
}

.datatable--wider {
    min-width: 720px;
}

.datatable thead {
    background: rgba(var(--blood-rgb), .4);
    color: var(--vellum);
}

.datatable th,
.datatable td {
    padding: .75rem 1rem;
    vertical-align: top;
}

.datatable thead th {
    font-family: var(--face-display);
    font-weight: 700;
}

.datatable tbody tr {
    border-bottom: 1px solid rgba(var(--gold-rgb), .15);
}

.datatable tbody tr:last-child {
    border-bottom: 0;
}

.datatable tbody tr:nth-child(odd) {
    background: rgba(31, 26, 20, .6);
}

.datatable tbody tr:nth-child(2n) {
    background: rgba(var(--ink-rgb), .4);
}

.datatable tbody th {
    width: 40%;
    font-weight: 600;
    color: var(--gold);
}

.datatable td {
    color: rgba(var(--vellum-rgb), .82);
}

.datatable td:first-child {
    font-weight: 600;
    color: var(--gold);
}

.datatable td.is-figure {
    font-weight: 700;
    color: var(--vellum);
}

/* ---------- termgrid: bonus terms cards ---------- */
.termgrid {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.termcard {
    padding: 1rem;
}

.termcard dt {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gold);
}

.termcard dd {
    margin-top: .25rem;
    font-size: .9375rem;
    color: rgba(var(--vellum-rgb), .85);
}

@media (min-width: 640px) {
    .termgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- shout: inline CTA banner ---------- */
.shout {
    padding: 1.5rem;
    border-radius: var(--round-l);
    text-align: center;
}

.shout__title {
    font-family: var(--face-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vellum);
}

.shout__terms {
    margin-top: .25rem;
    font-size: .875rem;
    color: rgba(var(--vellum-rgb), .7);
}

.shout .pressbtn {
    margin-top: 1.25rem;
}

.shout__legal {
    margin-top: .75rem;
    font-size: .6875rem;
    color: rgba(var(--vellum-rgb), .5);
}

@media (min-width: 640px) {
    .shout__title {
        font-size: 1.5rem;
    }
}

/* ---------- tilewall: game tiles ---------- */
.tilewall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1.5rem;
}

.tile {
    display: block;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(var(--gold-rgb), .25);
    border-radius: var(--round-s);
    background: var(--ink-2);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.tile:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--gold-rgb), .7);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}

.tile__art {
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: cover;
}

.tile__meta {
    padding: .5rem;
}

.tile__name,
.tile__maker {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tile__name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vellum);
}

.tile:hover .tile__name {
    color: var(--gold);
}

.tile__maker {
    font-size: .6875rem;
    color: rgba(var(--vellum-rgb), .55);
}

@media (min-width: 640px) {
    .tilewall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .tilewall {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ---------- makerlist: annotated providers ---------- */
.makerlist {
    margin-top: 1.5rem;
}

.makerlist > li {
    padding: .75rem 1rem;
}

.makerlist > li + li {
    margin-top: .75rem;
}

.makerlist b {
    font-family: var(--face-display);
    font-weight: 700;
    color: var(--gold);
}

.makerlist i {
    font-style: normal;
    color: rgba(var(--vellum-rgb), .5);
}

.makerlist span {
    font-size: .9375rem;
    color: rgba(var(--vellum-rgb), .85);
}

/* ---------- chipwall: name grids ---------- */
.chipwall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1.5rem;
}

.chip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    padding-inline: .75rem;
    border-radius: var(--round-s);
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
    color: rgba(var(--vellum-rgb), .8);
    overflow-wrap: anywhere;
    transition: border-color .15s, color .15s;
}

.chip:hover {
    border-color: rgba(var(--gold-rgb), .7);
    color: var(--gold);
}

.chipwall--pay .chip {
    height: 3.5rem;
    padding-inline: .5rem;
}

@media (min-width: 640px) {
    .chipwall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .chipwall {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .chipwall--pay {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ---------- plate: wide inline artwork ---------- */
.plate {
    display: block;
    margin-top: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(var(--gold-rgb), .35);
    border-radius: var(--round-l);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .5);
}

.plate img {
    width: 100%;
}

/* ---------- steplist: numbered walkthrough ---------- */
.steplist {
    margin-top: 1.5rem;
    counter-reset: stride;
}

.steplist > li {
    display: flex;
    gap: .75rem;
    padding: .75rem 1rem;
    font-size: .9375rem;
    counter-increment: stride;
}

.steplist > li + li {
    margin-top: .75rem;
}

.steplist > li::before {
    content: counter(stride) ".";
    flex-shrink: 0;
    margin-top: .125rem;
    font-family: var(--face-display);
    font-weight: 900;
    color: var(--gold);
}

.steplist span {
    color: rgba(var(--vellum-rgb), .85);
}

/* plain decimal list */
.numlist {
    margin-top: 1rem;
    padding-left: 1.5rem;
    font-size: .9375rem;
    color: rgba(var(--vellum-rgb), .85);
}

.numlist li {
    margin-top: .5rem;
    list-style: decimal;
}

.numlist li::marker {
    font-weight: 700;
    color: var(--gold);
}

/* ---------- toollist: glyph-marked bullets ---------- */
.toollist {
    margin-top: 1rem;
}

.toollist > li {
    display: flex;
    gap: .75rem;
    font-size: .9375rem;
    color: rgba(var(--vellum-rgb), .85);
}

.toollist > li + li {
    margin-top: .5rem;
}

.toollist > li::before {
    content: "\2694";
    flex-shrink: 0;
    margin-top: .25rem;
    color: var(--gold);
}

/* ---------- tally: pros and cons ---------- */
.tally {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.tally__box {
    padding: 1.25rem;
    border-radius: var(--round-l);
}

.tally__box--plus {
    border: 1px solid rgba(16, 185, 129, .4);
    background: rgba(2, 44, 34, .25);
}

.tally__box--minus {
    border: 1px solid rgba(184, 32, 47, .5);
    background: rgba(var(--blood-rgb), .15);
}

.tally__title {
    font-family: var(--face-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.tally__box--plus .tally__title {
    color: var(--leaf-lt);
}

.tally__box--minus .tally__title {
    color: var(--blood-lt);
}

.tally__list {
    margin-top: 1rem;
    font-size: .9375rem;
}

.tally__list > li {
    display: flex;
    gap: .5rem;
    color: rgba(var(--vellum-rgb), .85);
}

.tally__list > li + li {
    margin-top: .5rem;
}

.tally__list > li::before {
    flex-shrink: 0;
    margin-top: .125rem;
}

.tally__box--plus .tally__list > li::before {
    content: "\2714";
    color: var(--leaf);
}

.tally__box--minus .tally__list > li::before {
    content: "\2716";
    color: var(--blood-lt);
}

@media (min-width: 768px) {
    .tally {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- scorecard: verdict ---------- */
.scorecard {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: var(--round-l);
}

.scorecard__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.scorecard__overall {
    text-align: center;
}

.scorecard__figure {
    font-family: var(--face-display);
    font-size: 3.75rem;
    font-weight: 900;
    line-height: 1;
    color: var(--gold);
}

.scorecard__outof {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(var(--vellum-rgb), .6);
}

.scorecard__meters {
    flex: 1;
    min-width: 240px;
}

.meter {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
}

.meter + .meter {
    margin-top: .5rem;
}

.meter__label {
    flex-shrink: 0;
    width: 10rem;
    color: rgba(var(--vellum-rgb), .75);
}

.meter__track {
    flex: 1;
    height: .5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ink-2);
}

.meter__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gold);
}

.meter__value {
    flex-shrink: 0;
    width: 2.5rem;
    text-align: right;
    font-weight: 700;
    color: var(--gold);
}

.scorecard .pressbtn {
    margin-top: 1.5rem;
}

/* ---------- voices: player reviews ---------- */
.chorus__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.25rem;
    border-radius: var(--round-l);
}

.chorus__avg {
    font-family: var(--face-display);
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--gold);
}

.chorus__stars {
    color: var(--gold);
}

.chorus__count {
    font-size: .875rem;
    color: rgba(var(--vellum-rgb), .7);
}

.chorus__count b {
    color: var(--vellum);
}

.chorus__list {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.voice {
    padding: 1.25rem;
    border-radius: var(--round-l);
}

.voice__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.voice__who {
    font-family: var(--face-display);
    font-weight: 700;
    color: var(--vellum);
}

.voice__when {
    font-size: .75rem;
    color: rgba(var(--vellum-rgb), .5);
}

.voice__stars {
    margin-top: .25rem;
    color: var(--gold);
}

.voice__text {
    margin-top: .5rem;
    font-size: .9375rem;
    color: rgba(var(--vellum-rgb), .85);
}

@media (min-width: 768px) {
    .chorus__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- qalist: FAQ accordion ---------- */
.qalist {
    margin-top: 1.5rem;
}

.faqrow {
    padding: 1rem;
}

.faqrow + .faqrow {
    margin-top: .75rem;
}

.faqrow__q {
    display: block;
    cursor: pointer;
    list-style: none;
    font-family: var(--face-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gold);
}

.faqrow__q::-webkit-details-marker {
    display: none;
}

.faqrow__q::before {
    content: "\FF0B";
    margin-right: .5rem;
    color: rgba(var(--vellum-rgb), .5);
}

.faqrow[open] .faqrow__q::before {
    content: "\2212";
}

.faqrow__a {
    margin-top: .75rem;
    font-size: .9375rem;
    color: rgba(var(--vellum-rgb), .85);
}

/* ---------- rail: sticky sidebar ---------- */
.ledge {
    display: none;
}

.ledge__stick {
    position: sticky;
    top: 6rem;
}

.ledge__stick > * + * {
    margin-top: 1.25rem;
}

.ledge__offer {
    padding: 1.25rem;
    border-radius: var(--round-l);
    text-align: center;
}

.ledge__offer img {
    height: 2.5rem;
    width: auto;
    margin-inline: auto;
}

.ledge__bonus {
    margin-top: .75rem;
    font-family: var(--face-display);
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--gold);
}

.ledge__bonus-extra {
    font-family: var(--face-display);
    font-size: .875rem;
    font-weight: 700;
    color: var(--vellum);
}

.ledge__offer .pressbtn {
    margin-top: 1rem;
}

.ledge__legal {
    margin-top: .75rem;
    font-size: .625rem;
    line-height: 1.375;
    color: rgba(var(--vellum-rgb), .5);
}

.ledge__score,
.ledge__jump {
    padding: 1.25rem;
    border-radius: var(--round-l);
}

.ledge__label {
    font-family: var(--face-display);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gold);
}

.ledge__figure {
    margin-top: .5rem;
    font-family: var(--face-display);
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--vellum);
}

.ledge__figure small {
    font-size: 1.125rem;
    color: rgba(var(--vellum-rgb), .5);
}

.ledge__points {
    margin-top: .75rem;
    font-size: .8125rem;
    color: rgba(var(--vellum-rgb), .75);
}

.ledge__points li + li {
    margin-top: .375rem;
}

.ledge__points li::before {
    content: "\2694 ";
    color: var(--gold);
}

.ledge__jump-list {
    margin-top: .75rem;
    font-size: .8125rem;
}

.ledge__jump-list li + li {
    margin-top: .375rem;
}

.ledge__jump-list a {
    color: rgba(var(--vellum-rgb), .75);
    text-underline-offset: 4px;
}

.ledge__jump-list a:hover {
    color: var(--gold);
    text-decoration: underline;
}

@media (min-width: 1024px) {
    .ledge {
        display: block;
    }
}

/* ---------- underdeck: footer ---------- */
.underdeck {
    border-top: var(--rule);
    background: rgba(31, 26, 20, .7);
}

.underdeck__inner {
    padding-block: 3rem;
}

.underdeck__cols {
    display: grid;
    gap: 2rem;
}

.underdeck__brand img {
    height: 2.5rem;
    width: auto;
}

.underdeck__blurb {
    margin-top: 1rem;
    font-size: .875rem;
    color: rgba(var(--vellum-rgb), .6);
}

.underdeck__menu-title {
    font-family: var(--face-display);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gold);
}

.underdeck__menu-list {
    margin-top: .75rem;
    font-size: .875rem;
}

.underdeck__menu-list li + li {
    margin-top: .5rem;
}

.underdeck__menu-list a {
    color: rgba(var(--vellum-rgb), .65);
}

.underdeck__menu-list a:hover {
    color: var(--gold);
}

.underdeck__rule {
    margin-block: 2rem;
}

.badgerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.tagpill {
    padding: .375rem .75rem;
    border: 1px solid rgba(var(--vellum-rgb), .2);
    border-radius: .25rem;
    background: rgba(var(--ink-rgb), .6);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(var(--vellum-rgb), .6);
}

.smallprint {
    margin-top: 1.5rem;
    font-size: .75rem;
    line-height: 1.625;
    color: rgba(var(--vellum-rgb), .5);
}

.smallprint b {
    color: rgba(var(--vellum-rgb), .7);
}

.copyline {
    margin-top: 1rem;
    font-size: .75rem;
    color: rgba(var(--vellum-rgb), .4);
}

@media (min-width: 768px) {
    .underdeck__cols {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================================
   Popups. Two of them share this shell:
     .veil--notes  review submission, opened by the visitor
     .veil--pitch  offer CTA, opens itself
   Visibility is the class `is-open` on .veil - never `hidden`,
   never inline display, never <dialog>. Both ship without it.
   The panel is capped and offset from the top rather than
   centred, so long content on a short screen stays reachable:
   the veil itself is what scrolls.
   ============================================================ */
.veil {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    overflow-y: auto;
}

.veil.is-open {
    display: block;
}

.veil__scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
}

.veil__panel {
    position: relative;
    max-width: 600px;
    margin: 100px auto 40px;
    padding: 1.75rem;
    border: 1px solid rgba(var(--gold-rgb), .35);
    border-radius: var(--round-l);
    background: linear-gradient(rgba(46, 38, 28, .97), rgba(var(--ink-rgb), .99));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
}

.veil__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    background: none;
    color: var(--vellum);
    opacity: .7;
    transition: opacity .15s;
}

.veil__close:hover {
    opacity: 1;
}

.veil__close svg {
    width: .9375rem;
    height: .9375rem;
    fill: currentColor;
}

@media (max-width: 767px) {
    .veil__panel {
        max-width: calc(100% - 20px);
        padding: 1.25rem;
    }
}

/* ---------- review popup ---------- */
.is-hidden {
    display: none;
}

.postform__title,
.postdone__title {
    font-family: var(--face-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--vellum);
}

.postform__field {
    margin-top: 1.25rem;
}

.postform__field span {
    display: block;
    font-weight: 600;
    color: var(--gold);
}

.postform__field small {
    display: block;
    margin-top: .25rem;
    color: rgba(var(--vellum-rgb), .65);
}

.postform input,
.postform textarea {
    width: 100%;
    margin-top: .75rem;
    padding: .625rem .75rem;
    border: 1px solid rgba(var(--gold-rgb), .3);
    border-radius: var(--round-s);
    background: rgba(var(--ink-rgb), .6);
    color: var(--vellum);
    font: inherit;
    font-size: .9375rem;
}

.postform textarea {
    min-height: 7rem;
    resize: vertical;
}

.postform input:focus,
.postform textarea:focus {
    outline: 2px solid rgba(var(--gold-rgb), .55);
    outline-offset: 1px;
}

.postform input::placeholder,
.postform textarea::placeholder {
    color: rgba(var(--vellum-rgb), .4);
}

/* star picker - rendered right-to-left so :checked can light the ones before it */
.starpick {
    margin-top: 1.25rem;
}

.starpick legend {
    font-weight: 600;
    color: var(--gold);
}

.starpick__row {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-top: .5rem;
}

.starpick__row input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.starpick__row label {
    cursor: pointer;
    padding: 0 .125rem;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(var(--vellum-rgb), .25);
    transition: color .12s;
}

.starpick__row label::before {
    content: "\2605";
}

.starpick__row input:checked ~ label,
.starpick__row label:hover,
.starpick__row label:hover ~ label {
    color: var(--gold);
}

.starpick__row input:focus-visible + label {
    outline: 2px solid rgba(var(--gold-rgb), .55);
}

.postform__buttons {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.postform__cancel {
    padding: .8rem 1.4rem;
    border: 1px solid rgba(var(--vellum-rgb), .25);
    border-radius: var(--round-s);
    background: none;
    cursor: pointer;
    color: rgba(var(--vellum-rgb), .75);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.postform__cancel:hover {
    border-color: rgba(var(--gold-rgb), .5);
    color: var(--gold);
}

.postform__send {
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.postdone {
    text-align: center;
}

.postdone__mark {
    margin: 0 auto .75rem;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--gold);
}

.postdone .postform__cancel {
    margin-top: 1.25rem;
}

.chorus__add {
    margin-left: auto;
}

/* ---------- promo popup ---------- */
.veil--pitch .veil__panel {
    overflow: hidden;
    padding-top: 2.25rem;
    text-align: center;
}

/* accent strip across the top of the panel */
.veil--pitch .veil__panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt), var(--gold-dk));
}

.pitch__title {
    font-family: var(--face-display);
    font-size: 2.125rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--vellum);
}

.pitch__text {
    margin-top: .75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(var(--vellum-rgb), .85);
}

/* gradient text where supported, flat gold everywhere else */
.pitch__accent {
    font-weight: 700;
    color: var(--gold-lt);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .pitch__accent {
        background: linear-gradient(90deg, var(--gold-lt), var(--gold));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.pitch__cta {
    margin-top: 1.5rem;
}

@media (max-width: 767px) {
    .pitch__title {
        font-size: 1.625rem;
    }
}