/* The store, and the "uncurse my dice" banner on the roller.
 *
 * Colours come from themes.css, so both follow the site's schemes and day/night
 * mode. The one deliberate departure is the gold accent, kept from Tia's
 * original badge — it reads as "premium" against a site that is otherwise red,
 * and it is the only place on the site that colour appears. */

:root {
    --store-gold: #c9a227;
}

/* ── The banner on the roller ─────────────────────────────────────
   Lives at the end of the roller pane. #pane-wrapper is a row on desktop and a
   column on mobile, so that one position puts it below the roller on a desktop
   and between the roller and the log on a phone — where it scrolls with the
   page instead of sitting over the roll buttons. */
#quantum-banner {
    display: none;              /* revealed once we know it isn't already owned */
    margin: 4px 0 18px;
    padding: 14px 16px;
    border: 2px solid var(--store-gold);
    border-radius: 12px;
    background-color: var(--bg-tertiary, rgba(255, 255, 255, 0.85));
    color: var(--text-primary, #000);
}

#quantum-banner.show { display: block; }

.qb-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.qb-title {
    font-weight: 700;
    font-size: 1.02em;
}

.qb-mark { color: var(--store-gold); }

/* The product name, not a section heading - it is what the page is selling and
   the first thing worth reading. Left in the body serif rather than the celtic
   display face, which is spoken for by the "Store" page title directly above:
   two display headings stacked read as two page titles. */
.store-title {
    /* Scales with the viewport so it stays on one line on a phone. "True
       Randomness" broken across two lines reads as two things, not one product
       name, and the diamond ends up orphaned above the words. */
    font-size: clamp(1.4rem, 6.4vw, 2em);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 4px;
}

.qb-price {
    margin-left: auto;
    font-weight: 700;
    color: var(--text-secondary, #666);
    font-variant-numeric: tabular-nums;
}

.qb-body {
    font-size: 0.88em;
    color: var(--text-secondary, #666);
    margin: 0 0 12px;
}

.qb-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Also worn by the signed-out sign-in link, so it has to behave as a button
   whether it is a <button> or an <a>: an anchor otherwise arrives underlined
   and in the browser's own link colour. */
.qb-buy {
    display: inline-block;
    background-color: #12100e;
    color: var(--store-gold);
    border: 1px solid var(--store-gold);
    border-radius: 999px;
    padding: 9px 18px;
    font-weight: 700;
    font-size: 0.9em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

a.qb-buy:link,
a.qb-buy:visited,
a.qb-buy:hover {
    color: var(--store-gold);
    text-decoration: none;
}

.qb-buy:hover:not(:disabled) { background-color: #1b1815; }
.qb-buy:disabled { opacity: 0.6; cursor: default; }

.qb-more {
    font-size: 0.85em;
    color: var(--theme-primary, #cc0000);
    font-weight: 700;
}

/* ── The store page ──────────────────────────────────────────────── */

.store-content { max-width: 640px; }

.store-price {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--theme-primary, #cc0000);
    font-variant-numeric: tabular-nums;
    /* Centred to sit with .store-title as one block. Left-aligned under a
       centred title, it read as the first line of the body copy. */
    text-align: center;
}

.store-owned {
    display: inline-block;
    border: 2px solid #2e7d32;
    color: #2e7d32;
    background-color: var(--bg-secondary, #fff);
    border-radius: 999px;
    padding: 5px 14px;
    font-weight: 700;
    font-size: 0.85em;
}

.store-points {
    margin: 0;
    padding-left: 18px;
    font-size: 0.92em;
    color: var(--text-primary, #000);
}

.store-points li { margin-bottom: 6px; }

.store-fineprint {
    font-size: 0.8em;
    color: var(--text-secondary, #666);
    font-style: italic;
}

/* ── The entropy control on the roller ───────────────────────────
   Two parts. The outer element is an invisible column exactly as wide as a
   dice line, sitting in the same place: .button-group hangs outside each line
   at left:-28px, so .d-line is the first in-flow child and starts at x=0, and
   so does this. The pill inside is sized to its own text and centred within
   that column — so its midpoint is the midpoint of the input boxes above it,
   not of the whole row.

   The top offset centres it on ALL, which is 54px tall at top:7px and so
   overhangs this row. */
.entropy-status {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 190px;
    width: 190px;
    margin: 20px 0 0 0;
}

/* Tia's pill, kept close to how she wrote it — dark ground, gold rule,
   monospace, fully rounded — but 2px to match the roller's own controls, and
   in the row rather than floating over the page where it covered the roll
   buttons on a phone. */
.entropy-status a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    height: 27px;
    padding: 0 15px;
    font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #12100e;
    color: var(--store-gold);
    border: 2px solid rgba(201, 162, 39, 0.6);
    border-radius: 999px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entropy-status a:hover { background: #1b1815; }

/* Bought, but rolling locally: same pill, muted, so it recedes. It is a status
   rather than an offer and should not compete with the roll button. */
.entropy-status.es-device a {
    background: transparent;
    color: var(--text-secondary, #666);
    border-color: var(--border-light, #ccc);
    box-shadow: none;
}

.entropy-status.es-device a:hover {
    background: var(--bg-secondary, #ffffff);
}

@media screen and (max-width: 640px) {
    .entropy-status a { font-size: 12px; padding: 0 12px; }
}

/* The notes under the button inherit the browser's link colour otherwise,
   which lands as blue-on-parchment next to a gold-and-red page. */
.setting-note a,
.store-fineprint a {
    color: var(--theme-primary, #cc0000);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Payment terms. Upright rather than italic so it reads as terms and not as a
   third aside, and sat directly under the button where it is seen before
   paying rather than buried at the bottom of the page. */
.store-terms {
    margin: 18px 0 0;
    font-size: 0.82em;
    line-height: 1.55;
    color: var(--text-secondary, #666);
}