/*
 * 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 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);
}

/* Want to Play and Collection buttons on the game page rail (laid out in a
   row there by .game-rail-pair). */
.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 sheets (log, collection; design 8a): a centered dialog on desktop, a
   bottom sheet on phones, with the header and footer ruled off. */
.sheet {
    width: min(100% - 2rem, 29rem);
    max-height: calc(100dvh - 2rem);
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 3px;
    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: 6px 6px 0 0;
    }
}

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

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

.sheet-head {
    margin: -1.25rem -1.25rem 1.25rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--site-divider);
}

.sheet-eyebrow {
    margin-bottom: 2px;
    color: var(--bs-primary);
}

.sheet-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0 -1.25rem -1.25rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--site-divider);
}

.sheet-cancel {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-body-color);
    text-decoration: none;
}

/* "+ Exact date" under the year: a small text button. */
.sheet-add-link {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    font-size: 13px;
    font-weight: 600;
}

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

/* The rating input: five 32px blocks with 44px tap targets, filled by the
   rating controller in halves. */
.rating-input {
    display: flex;
    /* The first block lines up with the fields above. */
    margin-left: -4px;
}

.rating-input-block {
    display: grid;
    place-items: center;
    width: 40px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
}

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

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

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

.rating-input-block:focus-visible {
    outline: 2px solid var(--bs-body-color);
    outline-offset: -2px;
}

/* Loved on the sheet: a bordered toggle, pink when on. */
.loved-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--site-control-border);
    border-radius: 3px;
    color: var(--bs-secondary-color);
    font-weight: 600;
    cursor: pointer;
}

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

.btn-check:checked + .loved-chip {
    border-color: color-mix(in oklab, var(--site-loved) 60%, transparent);
    background: color-mix(in oklab, var(--site-loved) 12%, transparent);
    color: var(--site-loved);
}

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

.btn-check:focus-visible + .loved-chip {
    outline: 2px solid var(--bs-body-color);
    outline-offset: 2px;
}

/* Choices joined into one control (the outcome on the log sheet). */
.segmented {
    display: flex;
}

.segmented .chip {
    border-radius: 0;
}

.segmented .chip + .chip {
    margin-left: -1px;
}

.segmented .chip:first-of-type {
    border-radius: 3px 0 0 3px;
}

.segmented .chip:last-of-type {
    border-radius: 0 3px 3px 0;
}

.segmented .chip[aria-pressed="true"] {
    position: relative;
    z-index: 1;
}

/* The review, with Contains spoilers attached under it. */
.sheet-review-box {
    border: 1px solid var(--site-control-border);
    border-radius: 3px;
    background: var(--bs-body-bg);
}

.sheet-review-box textarea {
    min-height: 110px;
    border: 0;
    border-radius: 3px 3px 0 0;
    resize: vertical;
}

.sheet-review-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border-top: 1px solid var(--site-divider);
    cursor: pointer;
}

.sheet-review-foot .form-check-input {
    margin: 0;
}

.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);
}

.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;
}

/* 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);
}

/* The games list (design 7a): sidebar filters, chips, and a cover grid. */
@media (min-width: 992px) {
    .games-sidebar {
        border-right: 1px solid var(--site-divider);
        padding-right: 20px;
    }
}

.games-filters {
    display: grid;
    gap: 24px;
    padding-bottom: 24px;
}

.games-filters .pixel-label {
    display: block;
    margin-bottom: 10px;
}

.games-direction {
    flex: 0 0 40px;
    padding-inline: 0;
}

.games-checks .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.games-checks .form-check-input {
    float: none;
    margin: 0;
}

/* Genre and theme chips: checkboxes shown as small toggle buttons. */
.toggle-chip {
    cursor: pointer;
}

.toggle-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-chip span {
    display: inline-block;
    padding: 4px 9px;
    border: 1px solid var(--site-control-border);
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.4;
}

.toggle-chip:hover span {
    border-color: var(--bs-secondary-color);
}

.toggle-chip input:checked + span {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #1a1204;
    font-weight: 600;
}

.toggle-chip input:focus-visible + span {
    outline: 2px solid var(--bs-body-color);
    outline-offset: 2px;
}

.games-themes summary {
    cursor: pointer;
    list-style: none;
}

.games-themes summary::after {
    content: " +";
}

.games-themes[open] summary::after {
    content: " \2212";
}

.games-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.games-switch .form-check-input {
    float: none;
    margin: 0;
    cursor: pointer;
}

.games-switch:has(.form-check-input:not(:checked)) .form-check-label {
    color: var(--bs-secondary-color);
}

.games-view .btn {
    min-height: 32px;
}

.games-view .btn.active {
    --bs-btn-active-bg: var(--bs-border-color);
    --bs-btn-active-border-color: var(--site-control-border);
}

/* A filter in use, above the results: its × link takes it off. */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid var(--site-control-border);
    border-radius: 3px;
    background: var(--site-control-bg);
    color: var(--bs-body-color);
    font-size: 13px;
    font-weight: 500;
}

.filter-chip span {
    color: var(--bs-secondary-color);
}

.filter-chip:hover span {
    color: var(--bs-body-color);
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px 20px;
}

@media (max-width: 1199.98px) {
    .game-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px 12px;
    }
}

@media (max-width: 479.98px) {
    .game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.game-card {
    display: block;
    min-width: 0;
}

.game-card-cover {
    position: relative;
    margin-bottom: 8px;
}

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

.game-card-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--site-panel-bg);
    color: var(--bs-secondary-color);
    font-size: 13px;
    text-align: center;
}

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

/* The corner button: + for nothing yet, the menu mark when the game is on
   one of your lists. */
.game-card-menu,
.game-card-cover > .game-card-button {
    position: absolute;
    right: 8px;
    bottom: 8px;
}

.game-card-button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(15, 14, 13, 0.82);
    color: #f3efe8;
}

.game-card-button svg {
    width: 16px;
    height: 16px;
}

.game-card-button:hover,
.game-card-button[aria-expanded="true"] {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.game-card-menu .dropdown-menu {
    --bs-dropdown-bg: var(--site-panel-bg);
    --bs-dropdown-border-color: var(--site-control-border);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--site-control-bg);
    --bs-dropdown-link-active-bg: var(--site-control-bg);
    --bs-dropdown-link-active-color: var(--bs-body-color);
    --bs-dropdown-font-size: 14px;
    min-width: 12rem;
}

.game-card-menu .dropdown-item.is-want.is-checked {
    color: var(--site-status-want);
}

.game-card-menu .dropdown-item.is-collection.is-checked {
    color: var(--site-status-collection);
}

.game-card-menu .dropdown-item.is-checked::after {
    content: "\2713";
    float: right;
    margin-left: 12px;
}

.game-card-title {
    display: block;
    overflow: hidden;
    color: var(--bs-body-color);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.game-card-title:hover {
    text-decoration: underline;
}

.game-card-meta {
    overflow: hidden;
    margin-top: 2px;
    font-family: var(--bs-font-monospace);
    font-size: 11px;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.game-card-status {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
}

.game-card-status .is-played { color: var(--bs-primary); }
.game-card-status .is-collection { color: var(--site-status-collection); }
.game-card-status .is-want { color: var(--site-status-want); }

.game-grid-more {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 0 32px;
}

/* The list view (design 7b): table rows on a CSS grid, since each row is its
   own Turbo Frame. Columns: cover, game, year, platforms, community, you,
   menu. Platforms hide below lg; year, community and the header below md. */
.game-table {
    --game-table-columns: 44px minmax(0, 1fr) 64px 170px 150px 180px 40px;
    border-top: 1px solid var(--site-divider);
}

.game-table-head,
.game-table-row {
    display: grid;
    grid-template-columns: var(--game-table-columns);
    align-items: center;
    column-gap: 16px;
}

.game-table-head {
    padding: 10px 0;
    border-bottom: 1px solid var(--site-divider);
}

.game-table-head .pixel-label {
    margin: 0;
}

.game-table-row {
    min-height: 72px;
    padding: 10px 0;
    border-bottom: 1px solid var(--site-divider);
}

.game-table-row:hover {
    background: color-mix(in oklab, var(--site-panel-bg) 60%, transparent);
}

.game-table-cover img,
.game-table-cover span {
    display: block;
    width: 44px;
    height: 58px;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
    background: var(--site-panel-bg);
}

.game-table-name .game-card-title {
    font-size: 15px;
}

.game-table-sub {
    overflow: hidden;
    font-size: 13px;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.game-table-year {
    font-size: 14px;
}

.game-table-platforms {
    gap: 4px;
    overflow: hidden;
}

.game-table-rating {
    align-items: center;
    gap: 8px;
}

.game-table-you {
    margin: 0;
    font-size: 13px;
}

.game-table-menu {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

/* The corner menu sits in the row here, not over a cover. */
.game-table-menu .game-card-menu,
.game-table-menu > .game-card-button {
    position: static;
}

.game-table-menu .game-card-button {
    width: 32px;
    height: 32px;
    border-color: var(--site-control-border);
    background: transparent;
}

@media (max-width: 991.98px) {
    .game-table {
        --game-table-columns: 44px minmax(0, 1fr) 64px 150px 150px 40px;
    }
}

@media (max-width: 767.98px) {
    .game-table {
        --game-table-columns: 44px minmax(0, 1fr) auto 36px;
        column-gap: 12px;
    }
}