/*
 * Site styles on top of Bootstrap 5.3. Plain CSS, no build step: override
 * Bootstrap's CSS variables here rather than recompiling its SCSS.
 * Check every change in both dark (the default) and light mode.
 */
/* The design system ("My Save State UI Design" in Claude Design, rules
   sheet 1a): dark warm surfaces so cover art carries the color, amber as the
   only action color, one hue per status. Schibsted Grotesk for the interface,
   JetBrains Mono for dates, hours and counts, Silkscreen for small labels
   (never body copy or buttons). Fonts are self-hosted in vendor/fonts. */
@font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../vendor/fonts/schibsted-grotesk.c5e9a9901938.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../vendor/fonts/jetbrains-mono.570751c5f8b4.woff2") format("woff2");
}

@font-face {
    font-family: "Silkscreen";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../vendor/fonts/silkscreen.e30bb5ca0e3c.woff2") format("woff2");
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary: #f5a524;
    --bs-primary-rgb: 245, 165, 36;
    --bs-body-font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-font-monospace: "JetBrains Mono", ui-monospace, Menlo, monospace;
    --bs-body-font-size: 0.9375rem;
    --site-font-pixel: "Silkscreen", var(--bs-font-monospace);
    /* 3px corners on everything. */
    --bs-border-radius: 3px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 3px;
    --bs-border-radius-xl: 3px;
    --bs-border-radius-xxl: 3px;
    /* Amber's dark edge, under the primary button and the brand mark. */
    --site-amber-shade: #6b4700;
}

/* The design's surfaces: Base (page), Raised (cards), Control (buttons and
   inputs), Line (borders), Muted (meta text), Ink (text). */
[data-bs-theme="dark"] {
    --bs-body-bg: #0f0e0d;
    --bs-body-bg-rgb: 15, 14, 13;
    --bs-body-color: #f3efe8;
    --bs-body-color-rgb: 243, 239, 232;
    --bs-emphasis-color: #f3efe8;
    --bs-secondary-color: #a8a196;
    --bs-secondary-color-rgb: 168, 161, 150;
    --bs-secondary-bg: #221f1c;
    --bs-tertiary-bg: #181715;
    --bs-tertiary-bg-rgb: 24, 23, 21;
    --bs-border-color: #34302b;
    --bs-link-color: #f3efe8;
    --bs-link-color-rgb: 243, 239, 232;
    --bs-link-hover-color: #fff;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --site-underline: #6f695f;
    --site-underline-quiet: #4a453e;
    --site-divider: #2a2724;
    --site-control-border: #3d3832;
    --site-block-empty: #2e2a26;
    --site-loved: oklch(0.72 0.16 10);
    --site-panel-bg: #181715;
    --site-control-bg: #221f1c;
    --site-nav-bg: #0f0e0d;
    /* Status hues: used for status only. */
    --site-status-completed: oklch(0.78 0.15 150);
    --site-status-want: oklch(0.76 0.13 245);
    --site-status-dropped: oklch(0.7 0.17 25);
    --site-status-collection: oklch(0.76 0.13 300);
    --site-status-paused: #f5a524;
}

/* Light mode: the same system on warm paper, with the status hues darkened
   enough to read on it. */
[data-bs-theme="light"] {
    --bs-body-bg: #faf8f4;
    --bs-body-bg-rgb: 250, 248, 244;
    --bs-body-color: #1b1916;
    --bs-body-color-rgb: 27, 25, 22;
    --bs-emphasis-color: #1b1916;
    --bs-secondary-color: #6b655c;
    --bs-secondary-color-rgb: 107, 101, 92;
    --bs-secondary-bg: #efebe4;
    --bs-tertiary-bg: #fff;
    --bs-tertiary-bg-rgb: 255, 255, 255;
    --bs-border-color: #dcd6cc;
    --bs-link-color: #1b1916;
    --bs-link-color-rgb: 27, 25, 22;
    --bs-link-hover-color: #000;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --site-underline: #a39b8f;
    --site-underline-quiet: #cfc8bc;
    --site-divider: #e6e0d6;
    --site-control-border: #cfc8bc;
    --site-block-empty: #e3ddd3;
    --site-loved: oklch(0.58 0.19 10);
    --site-panel-bg: #fff;
    --site-control-bg: #efebe4;
    --site-nav-bg: #faf8f4;
    --site-status-completed: oklch(0.5 0.13 150);
    --site-status-want: oklch(0.5 0.13 245);
    --site-status-dropped: oklch(0.52 0.17 25);
    --site-status-collection: oklch(0.5 0.14 300);
    --site-status-paused: #9a5f00;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1, .h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Links are ink with a thin gray underline; amber is kept for the one
   primary action. Links styled as something else (buttons, tags, nav,
   covers) carry a class and opt out. Titles in headings aren't underlined. */
a {
    text-decoration: none;
}

a:not([class]),
.link-quiet {
    text-decoration: underline;
    text-decoration-color: var(--site-underline);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:not([class]):hover {
    text-decoration-color: currentColor;
}

:is(h1, h2, h3, h4, h5, h6) a:not([class]) {
    text-decoration: none;
}

:is(h1, h2, h3, h4, h5, h6) a:not([class]):hover {
    text-decoration: underline;
}

/* Edit, Delete and the like: muted, with a fainter underline. */
.link-quiet {
    color: var(--bs-secondary-color);
    text-decoration-color: var(--site-underline-quiet);
}

.link-quiet:hover {
    color: var(--bs-body-color);
}

button.link-quiet {
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
}

/* Small labels in the pixel face: section labels, never body copy. */
.pixel-label {
    font-family: var(--site-font-pixel);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.mono {
    font-family: var(--bs-font-monospace);
}

@media (min-width: 1200px) {
    .container {
        max-width: 1240px;
    }
}

.site-nav {
    background-color: var(--site-nav-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/* 14px nav links, as in the design: their capitals match the pixel
   brand's, so the two line up by eye (16px ones made the brand look low). */
.site-nav .nav-link {
    font-size: 14px;
    font-weight: 500;
}

.site-nav .nav-link.active {
    font-weight: 600;
}

/* The brand: an amber square with a hard shadow, and the name in pixel type. */
.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--site-font-pixel);
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Silkscreen draws its letters about half a pixel below the baseline, and
   its capitals are shorter than the nav links', so the name reads 1px low
   beside them (measured from rendered pixels). Raise it to match, which
   also centers it on the mark. */
.site-brand-name {
    position: relative;
    top: -1px;
}

.site-brand-mark {
    width: 14px;
    height: 14px;
    background: var(--bs-primary);
    box-shadow: 4px 4px 0 var(--site-amber-shade);
}

/* One amber button per view: everything else is secondary or plain. */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 0.9375rem;
    min-height: 40px;
}

.btn-sm {
    --bs-btn-font-size: 0.8125rem;
    min-height: 32px;
}

.btn-primary {
    --bs-btn-bg: #f5a524;
    --bs-btn-border-color: #f5a524;
    --bs-btn-color: #1a1204;
    --bs-btn-hover-bg: #ffb83d;
    --bs-btn-hover-border-color: #ffb83d;
    --bs-btn-hover-color: #1a1204;
    --bs-btn-active-bg: #e0931a;
    --bs-btn-active-border-color: #e0931a;
    --bs-btn-active-color: #1a1204;
    --bs-btn-disabled-bg: #f5a524;
    --bs-btn-disabled-border-color: #f5a524;
    --bs-btn-disabled-color: #1a1204;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
}

.btn-secondary {
    --bs-btn-bg: var(--site-control-bg);
    --bs-btn-border-color: var(--site-control-border);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-border-color);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-border-color);
    --bs-btn-active-border-color: var(--bs-secondary-color);
    --bs-btn-active-color: var(--bs-body-color);
}

/* A secondary button that's switched on takes its status hue: Want to
   Play in blue, Collection in purple. */
.btn-secondary.is-want[aria-pressed="true"],
.btn-secondary.is-collection[aria-pressed="true"] {
    --site-on: var(--site-status-want);
    color: var(--site-on);
    border-color: color-mix(in oklab, var(--site-on) 55%, transparent);
    background-color: color-mix(in oklab, var(--site-on) 12%, var(--site-control-bg));
}

.btn-secondary.is-collection[aria-pressed="true"] {
    --site-on: var(--site-status-collection);
}

.form-control,
.form-select {
    background-color: var(--bs-body-bg);
    border-color: var(--site-control-border);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-secondary-color);
    box-shadow: none;
}

/* Status chips: a tinted box in the status hue. */
.status-chip {
    --site-on: var(--bs-secondary-color);
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 8px;
    border: 1px solid color-mix(in oklab, var(--site-on) 40%, transparent);
    border-radius: 3px;
    background: color-mix(in oklab, var(--site-on) 14%, transparent);
    color: var(--site-on);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.status-completed { --site-on: var(--site-status-completed); }
.status-abandoned { --site-on: var(--site-status-dropped); }
.status-paused { --site-on: var(--site-status-paused); }
.status-want { --site-on: var(--site-status-want); }
.status-collection { --site-on: var(--site-status-collection); }

/* Platform and detail tags: small mono boxes. */
.tag {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--bs-border-color);
    border-radius: 3px;
    color: var(--bs-body-color);
    font-family: var(--bs-font-monospace);
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
}

a.tag:hover {
    border-color: var(--bs-secondary-color);
    text-decoration: none;
}

/* Ratings: five blocks in half-block steps (templates/logs/_stars.html),
   16px on the game page, smaller in lists. The number sits beside them in
   mono. */
.rating {
    --block: 12px;
    display: inline-flex;
    gap: calc(var(--block) / 4);
    vertical-align: -1px;
}

.rating-sm {
    --block: 9px;
}

.rating-lg {
    --block: 16px;
    vertical-align: -3px;
}

.rating-block {
    width: var(--block);
    height: var(--block);
    background: var(--site-block-empty);
}

.rating-block.is-full {
    background: var(--bs-primary);
}

.rating-block.is-half {
    background: linear-gradient(90deg, var(--bs-primary) 50%, var(--site-block-empty) 50%);
}

.rating-value {
    font-family: var(--bs-font-monospace);
    font-size: 14px;
    font-weight: 600;
}

/* The one HUD frame a page gets: amber brackets on the corners. */
.hud-frame {
    --hud: 12px;
    position: relative;
    border: 1px solid var(--bs-border-color);
    background: var(--site-panel-bg);
}

.hud-frame::before,
.hud-frame::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        linear-gradient(var(--bs-primary), var(--bs-primary)) top left / var(--hud) 2px,
        linear-gradient(var(--bs-primary), var(--bs-primary)) top left / 2px var(--hud),
        linear-gradient(var(--bs-primary), var(--bs-primary)) top right / var(--hud) 2px,
        linear-gradient(var(--bs-primary), var(--bs-primary)) top right / 2px var(--hud);
    background-repeat: no-repeat;
}

.hud-frame::after {
    transform: scaleY(-1);
}

/* Sign up, sign in and the other account entrance pages: one centered
   card (allauth/layouts/entrance.html). */
.entrance {
    max-width: 28rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
    padding: 2rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0.75rem;
    background-color: var(--site-panel-bg);
}

@media (max-width: 575.98px) {
    .entrance {
        margin-top: 0;
        padding: 1.5rem 1.25rem;
        border-radius: 0;
        border-inline: 0;
    }
}

/* Django's password rules come as a list; keep them small and tidy. */
.entrance-help ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

/* Search box in the nav. */
.nav-search {
    max-width: 22rem;
}

/* Game lists (Grouvee's game_list_v2): slate rows, 80x120 covers. */
.game-list .list-group-item {
    --bs-list-group-bg: var(--site-panel-bg);
    padding: 0.75rem 1.25rem;
}

.game-row-cover {
    width: 80px;
    height: 120px;
    object-fit: cover;
    object-position: top;
}

.game-row-cover-missing {
    font-size: 10px;
    overflow: hidden;
}

.platform-badge {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Game page (design 2a): the artwork as a full-width banner fading into
   the page, the cover overlapping it in a left rail. */
body {
    overflow-x: clip;
}

.game-hero {
    position: relative;
    width: 100vw;
    height: 340px;
    margin-inline: calc(50% - 50vw);
    background-size: cover;
    background-position: center 25%;
}

.game-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(var(--bs-body-bg-rgb), 0.6) 0%, rgba(var(--bs-body-bg-rgb), 0.82) 55%, rgb(var(--bs-body-bg-rgb)) 100%);
}

.game-page {
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .game-page-overlap {
        margin-top: -150px;
    }

    .game-page-overlap .col-lg-9 {
        padding-top: 90px;
    }
}

.game-rail-cover {
    border: 1px solid var(--bs-border-color);
    border-radius: 3px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.game-rail-cover-missing {
    height: 260px;
    background-color: var(--site-panel-bg);
}

/* Below lg the rail stacks above the title, so a full-width cover would
   fill a phone screen. */
@media (max-width: 991.98px) {
    .game-rail-cover {
        max-width: 240px;
        margin-inline: auto;
        display: block;
    }

    .game-rail {
        max-width: 360px;
        margin-inline: auto;
    }
}

/* Log a play across the rail, Want to Play and Collection side by side. */
.game-rail-actions {
    display: grid;
    gap: 8px;
}

.game-log-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-block: 0.6rem;
}

.game-log-button svg {
    width: 1.15rem;
    height: 1.15rem;
}

.game-rail-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.game-rail-pair .game-action {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    padding: 0.45rem 0.25rem;
    font-size: 0.85rem;
}

.game-rail-pair .game-action svg {
    width: 1rem;
    height: 1rem;
}

.game-title {
    font-size: clamp(2rem, 1.2rem + 2.2vw, 2.75rem);
    line-height: 1.05;
}

.game-year {
    font-family: var(--bs-font-monospace);
    font-size: 0.55em;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--bs-secondary-color);
}

/* Names that link somewhere but aren't actions: ink, underlined. */
.game-quiet-link,
.game-details dd a {
    color: var(--bs-body-color);
    text-decoration: underline;
    text-decoration-color: var(--bs-secondary-color);
    text-underline-offset: 3px;
}

.game-details dd a {
    text-decoration: none;
}

.game-quiet-link:hover,
.game-details dd a:hover {
    color: var(--bs-link-hover-color);
}

.game-summary {
    max-width: 44rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: color-mix(in oklab, var(--bs-body-color) 85%, var(--bs-secondary-color));
}

.game-welcome {
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 3px;
    background: var(--site-panel-bg);
}

/* The history panel (design 5a): the member's plays and copies on one
   timeline in the page's HUD frame. A 64px year column, then a 2px rail
   with a square marker per row: amber for plays, purple for copies. */
.game-history {
    padding: 22px 24px;
}

.game-history-head,
.game-history-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.game-history-head {
    margin-bottom: 12px;
}

.game-history-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--site-divider);
    font-size: 13px;
}

.game-timeline-row {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: start;
    gap: 16px;
    padding: 14px 0 14px 20px;
}

.game-timeline-row + .game-timeline-row::after {
    content: "";
    position: absolute;
    top: 0;
    left: 88px;
    right: 0;
    border-top: 1px solid var(--site-divider);
}

/* The rail, and the row's marker on it. */
.game-timeline-row::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--bs-primary);
    box-shadow: 0 0 0 3px var(--site-panel-bg);
    z-index: 1;
}

.game-timeline-row.is-copy::before {
    background: var(--site-status-collection);
}

.game-timeline {
    position: relative;
}

.game-timeline::before {
    content: "";
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 4px;
    width: 2px;
    background: var(--site-divider);
}

.game-timeline-year {
    font-family: var(--bs-font-monospace);
    font-size: 14px;
    font-weight: 600;
    line-height: 26px;
}

.game-timeline-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
}

.game-timeline-meta {
    margin-top: 2px;
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.game-timeline-review {
    margin-top: 8px;
    max-width: 40rem;
    font-size: 14px;
    line-height: 1.55;
}

.game-timeline-row > .link-quiet {
    line-height: 26px;
}

.game-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--bs-font-monospace);
    font-size: 11px;
    color: var(--bs-secondary-color);
}

.game-legend::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--bs-primary);
}

.game-legend.is-copy::before {
    background: var(--site-status-collection);
}

@media (max-width: 575.98px) {
    .game-history {
        padding: 16px;
    }

    .game-timeline-row {
        grid-template-columns: 44px 1fr auto;
        gap: 10px;
    }

    .game-timeline-row + .game-timeline-row::after {
        left: 64px;
    }
}

/* Details: labels and values in two columns. Release dates: mono dates. */
.game-details {
    display: grid;
    grid-template-columns: minmax(6.5rem, max-content) 1fr;
    gap: 0.45rem 1.25rem;
}

.game-details dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.game-details dd {
    margin: 0;
}

.game-releases li {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1rem;
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.game-releases li:first-child {
    border-top: 1px solid var(--bs-border-color);
}

.game-release-date {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.card {
    --bs-card-bg: var(--site-panel-bg);
}

/* Log, Want to Play and Collection buttons: icon over a small label on
   list rows (the game page rail lays them out in a row). */
.game-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.game-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.25rem;
    font-size: 0.8rem;
    line-height: 1.2;
}

.game-action svg {
    width: 1.35rem;
    height: 1.35rem;
}

.game-loved {
    color: var(--site-loved);
}

.d-contents {
    display: contents;
}

/* The log sheet (mockup: docs/mockups/log-sheet). A centered dialog on
   desktop, a bottom sheet on phones. */
.sheet {
    width: min(100% - 2rem, 26rem);
    max-height: calc(100dvh - 2rem);
    padding: 1.25rem;
    border: 0;
    border-radius: 0.75rem;
    background-color: var(--site-panel-bg);
    color: var(--bs-body-color);
    overflow-y: auto;
}

.sheet::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

@media (max-width: 575.98px) {
    dialog.sheet {
        width: 100%;
        max-width: 100%;
        max-height: 92dvh;
        margin: auto 0 0;
        border-radius: 1rem 1rem 0 0;
    }
}

.sheet-page {
    max-width: 26rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.sheet-cover {
    width: 44px;
    height: 60px;
    object-fit: cover;
}

.sheet-eyebrow {
    letter-spacing: 0.06em;
}

.sheet-link {
    font-size: 0.9rem;
    text-decoration: none;
}

.sheet-unknown {
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

.sheet-platform {
    width: auto;
    max-width: 60%;
}

/* Rating stars on the sheet: 44px tap targets, filled by the rating
   controller in halves. */
.rating-star {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
}

.rating-star svg {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 34px;
    height: 34px;
}

.rating-star-outline {
    fill: none;
    stroke: var(--bs-secondary-color);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.rating-star-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 44px;
    width: 0;
    overflow: hidden;
}

.rating-star-fill svg {
    fill: var(--bs-primary);
    stroke: var(--bs-primary);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.loved-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 0.25rem 0 0.5rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.loved-toggle svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.btn-check:checked + .loved-toggle {
    color: var(--site-loved);
}

.btn-check:checked + .loved-toggle svg {
    fill: currentColor;
}

/* The same heart as a button, on the game page rail. */
.loved-button {
    border: 0;
    background: transparent;
    padding: 0 0.5rem;
}

.loved-button:hover {
    color: var(--site-loved);
}

.loved-button.is-loved {
    color: var(--site-loved);
}

.loved-button.is-loved svg {
    fill: currentColor;
}

.btn-check:focus-visible + .loved-toggle {
    outline: 2px solid var(--bs-primary);
    border-radius: var(--bs-border-radius);
}

/* Completed / Abandoned / Paused chips. */
.chip {
    --site-on: var(--bs-body-color);
    flex: 1 1 0;
    height: 40px;
    border: 1px solid var(--site-control-border);
    border-radius: 3px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Picked: tinted in the choice's status hue (outcomes), or neutral (the
   format), never solid amber, which is the sheet's Save. */
.chip[aria-pressed="true"] {
    border-color: color-mix(in oklab, var(--site-on) 55%, transparent);
    background: color-mix(in oklab, var(--site-on) 14%, var(--bs-body-bg));
    color: var(--site-on);
}

.chip[data-choice-value-param="completed"] { --site-on: var(--site-status-completed); }
.chip[data-choice-value-param="abandoned"] { --site-on: var(--site-status-dropped); }
.chip[data-choice-value-param="paused"] { --site-on: var(--site-status-paused); }

/* Checkboxes and switches in amber, without Bootstrap's blue glow. */
.form-check-input {
    background-color: var(--bs-body-bg);
    border-color: var(--site-control-border);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* A dark check reads on amber; Bootstrap's is white. */
.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231a1204' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--bs-secondary-color);
    box-shadow: none;
}

.sheet-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
}

.sheet-done {
    color: var(--bs-primary);
    font-weight: 700;
}

.sheet-review {
    padding: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    background-color: var(--bs-body-bg);
}

.sheet-note {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

/* Member pages (profiles app): header, cover grids, the diary table. */
.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #1b1b1b;
    font-size: 1.5rem;
    font-weight: 700;
}

.profile-avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.85rem;
}

.profile-stats a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.profile-stats strong {
    font-size: 1.25rem;
    line-height: 1.2;
}

.profile-stats span {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.profile-tabs {
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.profile-tabs .nav-link {
    color: var(--bs-secondary-color);
}

.profile-tabs .nav-link.active {
    color: var(--bs-body-color);
}

/* Covers: a wrapping grid on the tab pages, one row of eight on the
   profile. */
.poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 1rem 0.75rem;
}

.poster-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.75rem;
}

@media (max-width: 767.98px) {
    .poster-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.poster-link {
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background-color: var(--site-panel-bg);
    box-shadow: inset 0 0 0 1px var(--bs-border-color-translucent);
}

.poster-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.poster-link:hover {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

.poster-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0.5rem;
    font-size: 0.75rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.poster-meta {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.3;
}

.poster-caption {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

/* The diary, Letterboxd-style: compact rows under month headings. */
.diary-heading {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Fixed column widths, so every month's table lines up with the others. */
.diary-table {
    --bs-table-bg: transparent;
    table-layout: fixed;
}

.diary-table td {
    padding: 0.4rem 0.5rem;
}

.diary-day {
    width: 2.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    color: var(--bs-secondary-color);
}

.diary-cover {
    width: 2.75rem;
}

.diary-cover img,
.diary-cover-missing {
    display: block;
    width: 2.25rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 3px;
    background-color: var(--site-panel-bg);
}

.diary-rating {
    width: 7.5rem;
    white-space: nowrap;
}

.diary-outcome {
    width: 6.5rem;
}

.diary-platform {
    width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diary-marks {
    width: 3rem;
    white-space: nowrap;
}

.diary-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.diary-edit {
    width: 3rem;
    text-align: right;
}

/* A member's page for one game. */
.member-log {
    padding: 0.75rem 0;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.member-log:target {
    background-color: rgba(238, 177, 24, 0.08);
}

.member-review {
    max-width: 48rem;
    white-space: normal;
}

/* The feed (social app). */
.feed-entry {
    padding: 1rem 0;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.feed-cover {
    width: 4.5rem;
    height: 6rem;
    object-fit: cover;
    background-color: var(--site-panel-bg);
}

.feed-review {
    max-width: 40rem;
}

.feed-burst {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: 0.4rem;
    max-width: 40rem;
}

.feed-burst a {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 3px;
    background-color: var(--site-panel-bg);
}

.feed-burst img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-burst span {
    display: block;
    padding: 0.2rem;
    font-size: 0.55rem;
    color: var(--bs-secondary-color);
}

.feed-empty {
    padding: 1.5rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.5rem;
}

.people-list li + li {
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* The settings page: one readable column. */
.settings {
    max-width: 36rem;
}

.settings .form-check-input {
    cursor: pointer;
}

/* Log, Want to Play and Collection on game list rows: a column on the
   right on wide screens (Grouvee's spot), under the game's text on tablets
   and phones. 18rem keeps "Want to Play" on one line (it wraps below
   17rem). */
.game-row-actions {
    width: 100%;
    max-width: 18rem;
    margin-top: 0.5rem;
}

.game-actions-row {
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 992px) {
    .game-row-actions {
        width: 18rem;
        margin-top: 0;
        margin-left: 1rem;
        flex-shrink: 0;
    }
}

/* Loved on the game page rail: a small plain toggle beside the IGDB link. */
.game-rail .loved-button {
    min-height: 32px;
    padding: 0;
}

.game-rail .loved-button svg {
    width: 18px;
    height: 18px;
}

/* The landing page (design 3b). */
.home-hero {
    padding: 48px 0 64px;
}

.home-title {
    font-size: clamp(2.5rem, 1.6rem + 3vw, 3.5rem);
    line-height: 1.02;
    margin-bottom: 16px;
}

.home-lead {
    max-width: 26rem;
    margin-bottom: 24px;
    font-size: 1.125rem;
    color: var(--bs-secondary-color);
}

.home-browse {
    font-weight: 600;
    color: var(--bs-body-color);
}

.home-browse:hover {
    text-decoration: underline;
}

.home-example {
    padding: 20px 24px 12px;
}

.home-example-title {
    margin: 4px 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
}

.home-example-month {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    min-height: 56px;
    border-top: 1px solid var(--site-divider);
}

.home-example-month img {
    width: 30px;
    height: 40px;
    object-fit: cover;
    border-radius: 2px;
}

/* The three things you do here, in a full-width band. */
.home-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(0px, calc(50vw - 620px));
    border-block: 1px solid var(--bs-border-color);
}

.home-actions > div {
    padding: 24px;
}

.home-actions > div + div {
    border-left: 1px solid var(--bs-border-color);
}

.home-actions h2 {
    margin: 8px 0 6px;
    font-size: 1.2rem;
}

.home-actions p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.pixel-label.is-log { color: var(--bs-primary); }
.pixel-label.is-want { color: var(--site-status-want); }
.pixel-label.is-collection { color: var(--site-status-collection); }

@media (max-width: 767.98px) {
    .home-actions {
        grid-template-columns: 1fr;
    }

    .home-actions > div + div {
        border-left: 0;
        border-top: 1px solid var(--bs-border-color);
    }
}

.home-popular {
    padding: 40px 0 64px;
}

.home-covers {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
}

@media (max-width: 991.98px) {
    .home-covers {
        grid-template-columns: repeat(4, 1fr);
    }
}

.home-cover img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
    border-radius: 3px;
}

.home-cover:hover img {
    border-color: var(--bs-secondary-color);
}