/* roll-page.css — the one-die pages (/d20, /stat-roller, /advantage ...) and the /dice hub.
   Pages are written by build.js from src/rolls/rolls.js; the roller is roll-page.js.
   Colours are theme tokens only (lintColours() in build.js). Panes use the shared
   .glass rule in assets/stylesheet.css. */

.rp-page {
    max-width: 1100px;
    margin: 0 auto 2.5em;
    padding: 0 12px;
    box-sizing: border-box;
    color: var(--text-primary);
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.rp-hero {
    position: relative;
    margin: 0 0 1.25em;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);   /* allowed: depth shadow */
}
.rp-hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 6;
    object-fit: cover;
}
.rp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 75%);   /* allowed: scrim so the title reads on any art */
    pointer-events: none;
}
.rp-hero-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 1.1em 1.4em 1.2em;
}
.rp-hero h1 {
    margin: 0;
    font-family: 'celticg', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.9em, 5vw, 3.2em);
    line-height: 1.05;
    letter-spacing: .02em;
    color: var(--theme-primary-light);
    -webkit-text-fill-color: var(--theme-primary-light);
    text-shadow:
        -1px -1px 0 var(--title-stroke),
         1px -1px 0 var(--title-stroke),
        -1px  1px 0 var(--title-stroke),
         1px  1px 0 var(--title-stroke);
}
.rp-lede {
    margin: .35em 0 0;
    max-width: 44em;
    font-family: 'Bookinsanity', Georgia, serif;
    font-size: clamp(1em, 2.2vw, 1.2em);
    color: var(--text-footer);
    text-shadow: 0 1px 3px var(--title-stroke);
}
.rp-crumbs {
    margin: 0 0 .4em;
    font-size: .85em;
    color: var(--text-footer);
    text-shadow: 0 1px 2px var(--title-stroke);
}
.rp-crumbs a { color: var(--text-footer); }

/* ── roller + facts ───────────────────────────────────────────────────── */

.rp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 1.25em;
    align-items: start;
}
@media (max-width: 860px) {
    .rp-grid { grid-template-columns: minmax(0, 1fr); }
}

.rp-tool,
.rp-facts,
.rp-article,
.rp-more,
.rp-also {
    border-radius: 14px;
    border: 1px solid var(--border-light);
    padding: 1.1em 1.2em;
    box-sizing: border-box;
}

.rp-well {
    border-radius: 10px;
    background: var(--card-well);
    padding: .4em .4em .6em;
    text-align: center;
}
.rp-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 420;
}
.rp-result {
    margin: .2em 0 0;
    min-height: 1.6em;
    font-family: 'Bookinsanity', Georgia, serif;
    font-size: 1.1em;
    color: var(--text-primary);
}
.rp-result-label { margin-right: .5em; color: var(--text-secondary); }
.rp-total {
    font-family: 'celticg', Georgia, serif;
    font-size: 2.4em;
    line-height: 1;
    color: var(--theme-primary-light);
    -webkit-text-fill-color: var(--theme-primary-light);
    text-shadow:
        -1px -1px 0 var(--title-stroke),
         1px -1px 0 var(--title-stroke),
        -1px  1px 0 var(--title-stroke),
         1px  1px 0 var(--title-stroke);
    vertical-align: middle;
}
.rp-detail {
    margin: .2em 0 0;
    min-height: 1.3em;
    font-size: .92em;
    color: var(--text-secondary);
}

.rp-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .7em 1.2em;
    align-items: center;
    margin: 1em 0;
}
.rp-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    width: 100%;
}
.rp-die,
.rp-step {
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: var(--bg-button);
    color: var(--text-primary);
    padding: .45em .8em;
    font-weight: 700;
    transition: background-color .15s, border-color .15s;
}
.rp-die:hover,
.rp-step:hover { background: var(--bg-hover); }
.rp-die.is-on {
    background: var(--theme-primary-bg);
    border-color: var(--theme-primary);
    color: var(--text-on-accent);
}
.rp-die:focus-visible,
.rp-step:focus-visible,
.rp-roll:focus-visible,
.rp-input:focus-visible {
    outline: 2px solid var(--theme-primary-light);
    outline-offset: 2px;
}
.rp-stepper {
    display: inline-flex;
    align-items: center;
    gap: .4em;
}
.rp-stepper-label { color: var(--text-secondary); font-size: .92em; margin-right: .2em; }
.rp-step { padding: .3em .7em; }
.rp-step-value { min-width: 2.2em; text-align: center; font-weight: 700; }

.rp-roll {
    display: block;
    width: 100%;
    padding: .7em 1em;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    background: var(--theme-primary-bg);
    color: var(--text-on-accent);
    font-family: "celticg", 'Bookinsanity', Georgia, serif;
    font-size: 1.5em;
    letter-spacing: .05em;
    transition: background-color .15s, transform .08s;
}
.rp-roll:hover { background: var(--theme-primary-hover); }
.rp-roll:active { transform: translateY(1px); background: var(--theme-primary-dark); }
.rp-roll[disabled] { cursor: progress; }

.rp-notation { flex: 1 1 100%; }
.rp-input {
    width: 100%;
    box-sizing: border-box;
    padding: .6em .8em;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: var(--bg-input);
    color: var(--text-primary);
    font: 1.2em Consolas, "Courier New", monospace;
}
.rp-input[aria-invalid="true"] { border-color: var(--theme-primary); }
.rp-hint { margin: 0; font-size: .88em; color: var(--text-secondary); }

.rp-stats {
    width: 100%;
    table-layout: fixed;
    margin: 1em 0 0;
    border-collapse: collapse;
    font-size: .95em;
}
.rp-stats caption { text-align: left; color: var(--text-secondary); padding-bottom: .4em; }
.rp-stats th,
.rp-stats td {
    padding: .35em .5em;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
}
.rp-stat-dice span,
.rp-stat-dice s { display: inline-block; min-width: 1.4em; }
.rp-stat-dice s { color: var(--text-secondary); }
.rp-stat-score { font-weight: 700; color: var(--theme-primary-light); }

.rp-history {
    margin: 1em 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35em;
    font-size: .85em;
}
.rp-history li {
    padding: .2em .6em;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
}
.rp-history li:first-child { color: var(--text-primary); border-color: var(--theme-primary); }

.rp-facts h2,
.rp-article h2,
.rp-more h2,
.rp-also h2 {
    margin: 0 0 .5em;
    font-family: 'celticg', Georgia, serif;
    font-weight: 500;
    font-size: 1.5em;
    color: var(--theme-primary-light);
}
.rp-facts dl { margin: 0; }
.rp-facts dt {
    margin-top: .7em;
    font-size: .8em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.rp-facts dt:first-child { margin-top: 0; }
.rp-facts dd {
    margin: .1em 0 0;
    font-family: 'Bookinsanity', Georgia, serif;
    font-size: 1.05em;
}
.rp-facts .rp-open {
    display: block;
    margin-top: 1.1em;
    padding: .55em .8em;
    border-radius: 8px;
    border: 1px solid var(--theme-primary);
    text-align: center;
    color: var(--theme-primary-light);
    text-decoration: none;
    font-weight: 700;
}
.rp-facts .rp-open + .rp-open { margin-top: .5em; }
.rp-facts .rp-open:hover { background: var(--bg-hover); }

/* ── writing ──────────────────────────────────────────────────────────── */

.rp-article {
    margin-top: 1.25em;
    font-family: 'Bookinsanity', Georgia, serif;
    font-size: 1.08em;
    line-height: 1.65;
}
.rp-article h2 { margin-top: 1.1em; }
.rp-article p { margin: .6em 0; }
.rp-article ul { margin: .5em 0 .8em; padding-left: 1.3em; }
.rp-article li { margin: .25em 0; }
.rp-article h2:first-child { margin-top: 0; }
.rp-article a { color: var(--theme-primary-light); }
.rp-article table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: .6em 0 1em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: .88em;
}
.rp-article th,
.rp-article td {
    padding: .35em .7em;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
}

/* ── other dice, and the rest of the family ───────────────────────────── */

.rp-more,
.rp-also { margin-top: 1.25em; }
.rp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .8em;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rp-card a {
    display: block;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color .15s;
}
.rp-card a:hover { border-color: var(--theme-primary); }
.rp-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}
.rp-card b {
    display: block;
    padding: .5em .7em 0;
    font-family: 'celticg', Georgia, serif;
    font-weight: 500;
    font-size: 1.15em;
    color: var(--theme-primary-light);
}
.rp-card span {
    display: block;
    padding: .15em .7em .7em;
    font-size: .88em;
    color: var(--text-secondary);
}
.rp-card.is-here a { border-color: var(--theme-primary); }

.rp-also ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .8em;
}
.rp-also li {
    padding: .8em .9em;
    border-radius: 10px;
    border: 1px solid var(--border-light);
}
.rp-also a { color: var(--theme-primary-light); font-weight: 700; }
.rp-also p { margin: .3em 0 0; font-size: .92em; color: var(--text-secondary); }

@media (max-width: 560px) {
    .rp-hero img { aspect-ratio: 16 / 9; }
    .rp-hero-text { padding: .8em .9em .9em; }
    .rp-lede { display: none; }
    .rp-tool, .rp-facts, .rp-article, .rp-more, .rp-also { padding: .9em .8em; }
    .rp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The roller's pane is solid, not frosted. Blur has to be redrawn whenever
   something moves over it, and the dice move on every roll (same lesson as
   the promo reel, 27 Sep 2026). */
.rp-tool.glass {
    background-color: var(--bg-primary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}