/* Shared type system: rem-based sizes scale consistently across every page. */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-base: 112.5%;
    --btn-h: 42px;
    --btn-h-lg: 46px;
    --btn-h-sm: 34px;
    --btn-pad: 10px 14px;
    --btn-pad-lg: 12px 18px;
    --btn-font: 0.8125rem;
    --btn-font-lg: 0.875rem;
    --btn-radius: 6px;
}

html { font-size: var(--font-size-base); }
body { font-family: var(--font-sans); line-height: 1.5; }
button, input, select, textarea { font-family: inherit; }

/* ==========================================================================
   Shared button scale for index.html, track.html and admin.html.

   Every button takes its height, padding, font and radius from these custom
   properties, so the three pages cannot drift apart again. 42px is the everyday
   height: still a safe tap target on a phone, but noticeably slimmer than the
   46-48px these buttons used to be.

   Without box-sizing the min-height below would be a CONTENT height and the
   padding would be added on top, which is why buttons used to render about 20px
   taller than the size they asked for.
   ========================================================================== */

button,
a[role="button"],
.btn-action,
.summary-btn,
.missing-order-btn,
.no-active-btn,
.load-order-btn,
.browse-games-btn,
.submit-btn,
.remove-btn,
.clear-btn,
.clear-search-btn,
.copy-link-btn,
.guide-btn,
.close-modal,
.back-to-orders-btn,
.refresh-btn,
.copy-link-header-btn,
.view-order-header-btn,
.edit-order-header-btn,
.cancel-order-btn,
.shipping-btn,
.wa-btn,
.action-btn,
.adjust-save-btn,
.adjust-reset-btn,
.missing-order-close {
    box-sizing: border-box;
}

/* The header nav, identical on the customer pages. */
.btn-action {
    background: #2e2716;
    color: #ffc000;
    border: 1px solid #3a3018;
    padding: var(--btn-pad);
    min-height: var(--btn-h);
    border-radius: var(--btn-radius);
    cursor: pointer;
    font-weight: bold;
    font-family: inherit;
    font-size: var(--btn-font);
    line-height: normal;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-action:hover {
    background: #ffc000;
    color: #14110a;
    border-color: #ffc000;
}

/* Customer-page navigation stays on one row on phones. If the controls do not
   fit, let visitors swipe the row horizontally like the admin navigation. */
@media (max-width: 600px) {
    .header-actions.public-header-nav {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .header-actions.public-header-nav::-webkit-scrollbar { display: none; }
    .header-actions.public-header-nav > * { flex: 0 0 auto; }
}

/* The browser's native date picker cannot be themed consistently across
   devices. These shared controls keep both order dates on the shop palette and
   display a locale-independent DD/MM/YYYY value. */
.date-picker { position: relative; width: 100%; min-width: 0; }
.date-picker-control { display: flex; width: 100%; position: relative; }
.date-picker .date-input {
    width: 100%; min-width: 0; padding: 12px 46px 12px 12px;
    border: 1px solid #3a3018; border-radius: 6px; box-sizing: border-box;
    background: #221c10; color: #f0e9d8; font: inherit; outline: none; cursor: pointer;
}
.date-picker .date-input:focus { border-color: #ffc000; }
.date-picker-trigger {
    position: absolute; top: 1px; right: 1px; bottom: 1px; width: 42px;
    border: 0; border-left: 1px solid #3a3018; border-radius: 0 5px 5px 0;
    background: #2e2716; color: #ffc000; font-size: 1rem; cursor: pointer;
}
.date-picker-trigger svg { width: 18px; height: 18px; vertical-align: middle; }
.date-picker-trigger:hover, .date-picker-trigger[aria-expanded="true"] { background: #3a3018; color: #ffcf4d; }
.date-picker-popover {
    position: fixed; z-index: 10050; width: 336px; max-width: calc(100vw - 24px);
    box-sizing: border-box; padding: 12px; background: #1f190e; color: #f0e9d8;
    border: 1px solid #5a4a20; border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.62);
}
.date-picker-popover[hidden] { display: none !important; }
.date-picker-head { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; margin-bottom: 10px; }
.date-picker-month { color: #f0e9d8; font-weight: 700; text-align: center; font-size: 0.875rem; }
.date-picker-nav { width: 36px; height: 36px; padding: 0; border: 1px solid #3a3018; border-radius: 6px; background: #2e2716; color: #ffc000; font-size: 1.25rem; cursor: pointer; }
.date-picker-nav:hover { background: #3a3018; border-color: #7a6820; }
.date-picker-weekdays, .date-picker-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.date-picker-weekdays { margin-bottom: 5px; color: #8a8272; font-size: 0.6875rem; font-weight: 700; }
.date-picker-weekdays span:first-child, .date-picker-weekdays span:last-child { color: #d9a34b; }
.date-picker-day { min-width: 0; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #e8dcc0; font-size: 0.78125rem; cursor: pointer; }
.date-picker-day:hover:not(:disabled) { background: #332913; border-color: #7a6820; }
.date-picker-day.outside { color: #6a6357; }
.date-picker-day.today { border-color: #7a6820; }
.date-picker-day.selected { background: #ffc000; border-color: #ffc000; color: #14110a; font-weight: 800; }
.date-picker-day:disabled { opacity: 0.35; cursor: not-allowed; }
.date-picker-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 9px; border-top: 1px solid #332a18; }
.date-picker-clear, .date-picker-today { border: 1px solid #55461f; border-radius: 5px; background: #2e2716; color: #e8dcc0; padding: 5px 10px; font-size: 0.71875rem; cursor: pointer; }
.date-picker-clear:hover, .date-picker-today:hover { border-color: #ffc000; color: #ffc000; }
@media (max-width: 380px) {
    .date-picker-popover { padding: 9px; }
    .date-picker-day { height: 34px; }
}

/* On the narrowest phones, trim the horizontal padding only. Shrinking the font
   or the height here would take the tap targets below what is comfortable. */
@media (max-width: 380px) {
    .btn-action {
        padding: var(--btn-pad) 10px;
    }
}

/* ==========================================================================
   Game detail panel — markup built by shared.js (buildDetailPanel), used by
   games.html (library) and index.html (game selection). Rating pills are
   Metacritic (MC) or OpenCritic (OC) scores; both use a /100 scale, so one
   colour scheme covers both sources.
   ========================================================================== */

.rating-pill { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 0.71875rem; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; line-height: 1.5; }
.rating-pill .rating-src { font-size: 0.53125rem; font-weight: 700; opacity: 0.75; letter-spacing: 0.5px; }
.rating-pill.good { color: #7bd88a; background: rgba(60, 180, 90, 0.14); border: 1px solid rgba(60, 180, 90, 0.45); }
.rating-pill.mid  { color: #ffce54; background: rgba(255, 193, 7, 0.12); border: 1px solid rgba(255, 193, 7, 0.45); }
.rating-pill.bad  { color: #ff7b72; background: rgba(229, 72, 77, 0.14); border: 1px solid rgba(229, 72, 77, 0.45); }

.game-detail { position: relative; grid-column: 1 / -1; background: #1f190e; border: 1px solid #3a3018; border-radius: 8px; padding: 12px 14px; cursor: default; }
.game-detail.float { position: absolute; left: 0; right: 0; z-index: 30; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); }
/* padding-right keeps the head clear of the close X */
.game-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; padding-right: 34px; }
.game-detail-meta { color: #8a8272; font-size: 0.78125rem; }
.game-detail-desc { color: #cfc7b4; font-size: 0.8125rem; line-height: 1.55; margin: 0; white-space: pre-line; }
.game-detail-desc.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.game-detail-desc.muted { color: #8a8272; font-style: italic; }
.read-more-btn { color: #ffc000; background: none; border: none; font-size: 0.78125rem; font-weight: 600; cursor: pointer; padding: 6px 0 0; font-family: inherit; }
.read-more-btn:hover { text-decoration: underline; }
.member-label { color: #8a8272; font-size: 0.75rem; font-weight: 700; margin-top: 10px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.member-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.member-chip { display: flex; align-items: center; gap: 8px; background: #221c10; border: 1px solid #2e2716; border-radius: 6px; padding: 3px 10px 3px 3px; font-size: 0.75rem; color: #e8dcc0; max-width: 300px; }
.member-chip img { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: #2a2312; }
.member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-chip .rating-pill { margin-left: auto; }
.member-chip.picked { border-color: #ffc000; background: rgba(255, 192, 0, 0.1); }
.member-pick { flex-shrink: 0; margin-left: 4px; padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(255, 192, 0, 0.45); background: rgba(255, 192, 0, 0.12); color: #ffc000; font-size: 0.6875rem; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.member-pick:hover { background: rgba(255, 192, 0, 0.22); }
.member-pick.picked { background: #ffc000; color: #1a1408; }

/* Close (X) on the detail panel — the obvious way to put the popup away on a
   phone. The ::before is an invisible hit-area extension: the visual circle
   stays small, the tap area reaches ~44px. */
.game-detail-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 192, 0, 0.4); background: rgba(20, 17, 10, 0.78); color: #ffc000; font-size: 1rem; font-weight: 700; font-family: inherit; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 1; }
.game-detail-x::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.game-detail-x:hover { background: rgba(255, 192, 0, 0.3); }

/* Per-page revision badge + the separate game-library update pill.
   Colors follow the trust-footer palette used on all pages. */
.page-version { margin: 8px auto 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; color: #625b4e; font-size: 0.5625rem; letter-spacing: 0.02em; opacity: 0.72; transition: opacity 0.2s; }
.page-version:hover { opacity: 1; }
.page-version-label { color: #746a56; font-size: 0.53125rem; font-weight: 700; letter-spacing: 0.1em; }
.page-version-number { color: #8a7847; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.59375rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.page-version-status { color: #625b4e; font-size: 0.53125rem; font-weight: 600; letter-spacing: 0.06em; }
.page-version-status[data-state="current"] { color: #667c62; }
.page-version-status[data-state="update"] { color: #927637; }
.page-version-status[data-state="ahead"] { color: #617889; }
.page-version-status[data-state="unverified"] { color: #625b4e; }
.lib-update { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); background: #1f190e; border: 1px solid #3a3018; border-radius: 10px; padding: 7px 8px 7px 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); font-size: 0.78125rem; color: #e8dcc0; line-height: 1.4; }
.lib-update-btn { flex: none; background: #ffc000; color: #1f190e; border: none; border-radius: 6px; padding: 6px 14px; font-size: 0.78125rem; font-weight: bold; font-family: inherit; cursor: pointer; }
.lib-update-btn:active { transform: scale(0.97); }
@media (max-width: 480px) {
    .lib-update { top: 8px; max-width: calc(100vw - 16px); font-size: 0.75rem; padding: 6px 6px 6px 10px; }
}

/* ============================================================================
   Price card + breakdown (shared across track / index summary / admin modal)
   ============================================================================ */
.price-card { background: #1c1808; border: 1px solid #4a3d1a; border-left: 4px solid #ffc000; border-radius: 6px; padding: 12px 16px; margin-top: 18px; }
.price-card.final { border-left-color: #00e676; }
.price-card.final .price-card-value { color: #00e676; }
.price-card-title { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: transparent; border: 0; width: 100%; color: inherit; font: inherit; cursor: pointer; padding: 0; text-align: left; }
.price-card-title:focus-visible { outline: 2px solid #ffc000; outline-offset: 2px; }
.price-card-heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.price-card-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.8px; color: #8a8272; font-weight: 700; }
.price-card-note { font-size: 0.78125rem; color: #b8b0a0; line-height: 1.5; }
.price-card-value { display: inline-flex; align-items: center; gap: 6px; font-size: 1.5rem; font-weight: bold; color: #ffc000; line-height: 1.2; white-space: nowrap; }
.price-card-value .chev { display: inline-block; font-size: 0.875rem; color: #8a8272; transition: transform 0.2s; line-height: 1; }
.price-card-title[aria-expanded="true"] .chev,
.price-card-value[aria-expanded="true"] .chev { transform: rotate(180deg); color: #ffc000; }
.price-card.repriced { border-color: #2a4530; background: #14210f; }
.price-card.repriced .price-card-label { color: #a8c4b0; }
.price-card.repriced .price-card-value { color: #7ee39b; }
.price-card.inline { background: transparent; border: 1px solid #3a3018; border-left: 3px solid #ffc000; padding: 12px 14px; border-radius: 10px; margin-top: 12px; }
.price-card.final .price-break-row.total .amount { color: #00e676; }

.price-break-list { display: none; margin-top: 10px; border-top: 1px solid #3a3018; padding-top: 10px; }
.price-break-list.open { display: block; }
.price-break-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 0.78125rem; color: #c9c1af; padding: 5px 0; }
.price-break-row .label { min-width: 0; }
.price-break-row .amount { white-space: nowrap; font-weight: 600; color: #e8dcc0; }
.price-break-row .note { display: block; font-size: 0.6875rem; color: #8a8272; font-weight: 400; margin-top: 1px; }
.price-break-row.discount .amount { color: #00e676; }
.price-break-row.quote .amount { color: #7dd3fc; }
.price-break-row.adjustment .amount { color: #ffb74d; }
.price-break-row.total { border-top: 1px solid #3a3018; margin-top: 6px; padding-top: 10px; font-size: 0.875rem; }
.price-break-row.total .label { color: #e8dcc0; font-weight: 700; }
.price-break-row.total .amount { color: #ffc000; font-size: 1rem; }

/* Kept for legacy callers, now aliased to the shared card look */
.price-card-inline-addon { background: transparent; border: 0; border-radius: 0; padding: 0; margin-top: 0; }
.price-card-inline-addon .price-card-value { color: inherit; }