/*
 * 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). */
/* Items start at the left; the right-hand group pushes itself over with
   ms-auto. (Bootstrap spreads them out, which put Games at the far right on
   pages with no search box.) */
.site-nav > .container {
    justify-content: flex-start;
}

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

.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 {
    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: solid amber, as in designs 8a and 9b (and the genre chips). "One
   amber button per view" is about actions; a picked option isn't one
   (Peter, 2026-09-30). */
.chip[aria-pressed="true"] {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #1a1204;
}

/* 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 (design 11a): the header and tabs, cover grids, and the
   Played list. */
.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: 3px;
    background-color: var(--bs-primary);
    color: #1a1204;
    font-size: 1.5rem;
    font-weight: 800;
}

.profile-avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
}

.profile-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 24px;
    padding-bottom: 20px;
}

.profile-head .profile-avatar {
    width: 72px;
    height: 72px;
    font-size: 2rem;
    box-shadow: 6px 6px 0 var(--site-amber-shade);
}

.profile-who {
    flex: 1 1 16rem;
    min-width: 0;
}

.profile-name {
    margin: 2px 0 4px;
    font-size: 1.9rem;
}

.profile-name a {
    color: inherit;
}

.profile-bio {
    margin: 0 0 6px;
    max-width: 40rem;
    color: color-mix(in oklab, var(--bs-body-color) 85%, var(--bs-secondary-color));
}

.profile-meta {
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.profile-meta a {
    color: inherit;
}

.profile-actions {
    display: flex;
    gap: 8px;
}

.profile-tabs {
    display: flex;
    gap: 28px;
    margin-bottom: 28px;
    overflow-x: auto;
    border-bottom: 1px solid var(--site-divider);
    scrollbar-width: none;
}

.profile-tabs a {
    padding: 10px 0 12px;
    border-bottom: 2px solid transparent;
    color: var(--bs-secondary-color);
    font-weight: 500;
    white-space: nowrap;
}

.profile-tabs a:hover {
    color: var(--bs-body-color);
}

.profile-tabs a.active {
    border-bottom-color: var(--bs-primary);
    color: var(--bs-body-color);
    font-weight: 600;
}

.profile-tabs a span,
.profile-section-count {
    margin-left: 4px;
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

/* Covers: a wrapping grid on the Want to Play and Collection tabs. */
.poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 1rem 0.75rem;
}

/* Five covers in a row on the overview (Want to Play, Collection). */
.profile-covers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

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

/* Played (design 11a): one row per log. Columns: date, cover, title and
   review, platform, rating, how it went. On phones the last three stack
   under the title. */
.played-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 6px;
}

.played-chips-rule {
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: var(--site-control-border);
}

a.toggle-chip span {
    color: var(--bs-body-color);
}

/* The picked year chip on History: an amber outline with a light amber tint
   (design 11a). Genre and theme chips, which are toggles, fill solid. */
a.toggle-chip[aria-current="true"] span {
    border-color: var(--bs-primary);
    background: color-mix(in oklab, var(--bs-primary) 14%, transparent);
    color: var(--bs-primary);
    font-weight: 600;
}

.played-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--site-divider);
}

.played-row {
    display: grid;
    /* The title and review column stops at 38rem, so platform, rating and
       outcome sit close to it (design 11a); the outcome column takes the
       rest of the row. */
    grid-template-columns: 56px 44px minmax(0, 38rem) 70px 100px minmax(150px, 1fr);
    align-items: start;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--site-divider);
}

.played-row:target {
    background: color-mix(in oklab, var(--bs-primary) 8%, transparent);
}

.played-date {
    padding-top: 2px;
    font-family: var(--bs-font-monospace);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* A year's header above its logs: "2026 · 3 logs", "No date". */
.played-group-head {
    margin: 22px 0 0;
    padding-bottom: 8px;
    font-family: var(--bs-font-monospace);
    font-size: 14px;
    font-weight: 600;
}

.played-group-head span {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

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

.played-title {
    color: var(--bs-body-color);
    font-weight: 600;
}

.played-year,
.played-platform {
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.played-platform {
    padding-top: 3px;
}

.played-review {
    margin: 6px 0 2px;
    max-width: 42rem;
    font-size: 14px;
    line-height: 1.55;
}

.played-rating,
.played-outcome {
    padding-top: 2px;
}

.played-under {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--bs-secondary-color);
}

/* Status in words, in its color (Completed, Abandoned, Paused). */
.status-text {
    color: var(--site-on, var(--bs-secondary-color));
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .played-row {
        grid-template-columns: 48px 40px minmax(0, 1fr);
        gap: 12px;
    }
}

/* A member's page for one game (design 14): reads as a review. On large
   screens the blurred cover makes a band behind the top, with the cover
   overlapping it; on phones the cover sits small beside the title. */
.take-hero {
    position: relative;
    width: 100vw;
    height: 200px;
    margin-inline: calc(50% - 50vw);
    /* Up against the nav, over its bottom margin. */
    margin-top: -1.5rem;
    overflow: hidden;
    background: var(--site-panel-bg);
}

.take-hero img {
    position: absolute;
    inset: -30px;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    object-fit: cover;
    object-position: center 25%;
    filter: blur(12px) saturate(1.1);
    opacity: 0.45;
}

.take-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* The fade sits over the scanlines, so they fade out with the band. */
    background:
        linear-gradient(to bottom, rgba(var(--bs-body-bg-rgb), 0) 30%, rgb(var(--bs-body-bg-rgb))),
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
}

[data-bs-theme="light"] .take-hero::after {
    background:
        linear-gradient(to bottom, rgba(var(--bs-body-bg-rgb), 0) 30%, rgb(var(--bs-body-bg-rgb))),
        repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 3px);
}

.take {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px 16px;
    position: relative;
    padding-bottom: 40px;
}

.take-cover {
    display: block;
    align-self: end;
}

.take-cover img,
.take-cover span {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--site-control-border);
    border-radius: 3px;
}

.take-cover span {
    display: flex;
    align-items: center;
    padding: 8px;
    background: var(--site-panel-bg);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
}

.take-head {
    align-self: end;
    min-width: 0;
}

.take-body {
    grid-column: 1 / -1;
    min-width: 0;
}

.take-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 14px;
}

.take-avatar {
    width: 22px;
    height: 22px;
    font-size: 11px;
}

.take-member {
    font-weight: 600;
    text-decoration: none;
}

.take-title {
    margin: 8px 0 0;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.take-title a {
    text-decoration: none;
}

.take-year {
    font-family: var(--bs-font-monospace);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--bs-secondary-color);
}

.take-verdict {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

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

.take-rating .rating-value {
    font-size: 15px;
}

.take-loved {
    color: var(--site-loved);
    font-size: 14px;
    font-weight: 600;
}

.take-you {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 14px;
    border-left: 1px solid var(--site-control-border);
    color: var(--bs-secondary-color);
    font-size: 13px;
    font-weight: 500;
}

.take-you .rating-value {
    font-size: 13px;
}

.take-shelf {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
}

.take-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.take-mark::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
}

.take-mark-copy::before {
    background: var(--site-status-collection);
    transform: rotate(45deg);
}

.take-mark-want::before {
    background: var(--site-status-want);
}

/* The cover and title link to the game, so there's no "About the game"
   button. On phones the buttons share the row. */
.take-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.take-actions > * {
    flex: 1;
}

.take-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: 14px;
    font-size: 14px;
    font-weight: 600;
}

.take-plays-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 28px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--site-control-border);
}

.take-plays-head h2 {
    margin: 0;
    font-size: 18px;
}

.take-plays-head span {
    font-family: var(--bs-font-monospace);
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.take-play,
.take-none {
    padding: 18px 0;
    border-bottom: 1px solid var(--site-divider);
}

.take-none {
    margin: 0;
    color: var(--bs-secondary-color);
}

.take-play:target {
    background: color-mix(in oklab, var(--bs-primary) 6%, transparent);
}

.take-play-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.take-play-date {
    font-family: var(--bs-font-monospace);
    font-size: 13px;
    font-weight: 600;
}

.take-play-logged {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.take-play-platform {
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.take-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border: 1px solid var(--site-control-border);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.take-play-end {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.take-review {
    max-width: 680px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.7;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.take-review p {
    margin: 0 0 12px;
}

.take-review p:last-child {
    margin-bottom: 0;
}

.take-spoiler-tag {
    margin-top: 12px;
    font-family: var(--site-font-pixel);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--site-status-dropped);
}

.take-spoiler summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 680px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px dashed var(--site-underline-quiet);
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
}

.take-spoiler summary::-webkit-details-marker {
    display: none;
}

.take-spoiler[open] summary {
    display: none;
}

@media (min-width: 992px) {
    .take {
        grid-template-columns: 220px minmax(0, 760px);
        grid-template-rows: auto 1fr;
        gap: 0 56px;
        padding-bottom: 72px;
    }

    .take-overlap {
        margin-top: -150px;
    }

    .take-cover {
        grid-row: 1 / 3;
        align-self: start;
    }

    .take-cover img,
    .take-cover span {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
    }

    .take-head {
        align-self: start;
        padding-top: 96px;
    }

    .take-overlap .take-head {
        padding-top: 96px;
    }

    .take:not(.take-overlap) .take-head {
        padding-top: 0;
    }

    .take-body {
        grid-column: 2;
        margin-top: 22px;
    }

    .take-byline {
        gap: 10px;
        font-size: 15px;
    }

    .take-avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .take-title {
        margin-top: 10px;
        font-size: 56px;
        letter-spacing: -0.035em;
    }

    .take-year {
        font-size: 26px;
    }

    /* Long names would take two or three lines at full size. */
    .take-title.is-long {
        font-size: 42px;
    }

    .take-title.is-long .take-year {
        font-size: 22px;
    }

    .rating-xl {
        --block: 20px;
        vertical-align: -4px;
    }

    .take-rating .rating-value {
        font-size: 17px;
    }

    .take-actions {
        flex-wrap: wrap;
        margin-top: 24px;
    }

    .take-actions > * {
        flex: none;
    }

    .take-actions .btn {
        min-height: 40px;
    }

    .take-plays-head {
        margin-top: 44px;
    }

    .take-play,
    .take-none {
        padding: 24px 0;
    }

    .take-play-line {
        gap: 6px 14px;
    }

    .take-play-date {
        font-size: 14px;
    }

    .take-play-platform {
        font-size: 13px;
    }

    .take-review {
        margin-top: 16px;
        font-size: 17px;
    }

    .take-review p {
        margin-bottom: 14px;
    }
}

/* The "Make yours" band under the nav, for signed-out visitors on member
   pages (design 14e). Closing it hides it for good in that browser. */
.join-band {
    /* Flush under the nav; the nav's bottom margin moves below the band. */
    margin: -1.5rem 0 1.5rem;
    background: var(--site-panel-bg);
    border-bottom: 1px solid var(--site-divider);
    font-size: 13px;
    line-height: 1.4;
}

.join-band .container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 10px;
}

.join-band-mark {
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--bs-primary);
}

.join-band-close {
    flex: none;
    margin-left: auto;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    font-family: var(--bs-font-monospace);
    font-size: 16px;
    line-height: 1;
}

[data-join-band="off"] .join-band {
    display: none;
}

@media (min-width: 768px) {
    .join-band {
        font-size: 14px;
    }

    .join-band .container {
        gap: 16px;
        min-height: 44px;
        padding-block: 6px;
    }
}

/* The home feed (design 12a): one card per person and kind, Trending on the
   side, and the quiet state (12d). */
.feed-card {
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid var(--bs-border-color);
    border-radius: 3px;
    background: var(--site-panel-bg);
}

.feed-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--site-divider);
}

.feed-card-head p {
    flex: 1;
    min-width: 0;
}

.feed-card-head a.fw-semibold {
    color: var(--bs-body-color);
}

.feed-card-time {
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.feed-logs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.feed-log {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
}

.feed-log + .feed-log {
    border-top: 1px solid var(--site-divider);
}

.feed-log-title {
    color: var(--bs-body-color);
    font-size: 16px;
    font-weight: 600;
}

.feed-log-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.feed-review {
    margin: 8px 0 0;
    max-width: 40rem;
    font-size: 14px;
    line-height: 1.55;
    color: color-mix(in oklab, var(--bs-body-color) 85%, var(--bs-secondary-color));
}

/* A cover with the + menu on its corner. */
.feed-cover {
    position: relative;
    width: 48px;
}

.feed-cover img,
.feed-cover a > span {
    display: block;
    width: 48px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
    background: var(--site-control-bg);
}

.feed-cover .game-card-menu,
.feed-cover > .game-card-button {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: auto;
}

.feed-cover .game-card-button {
    width: 22px;
    height: 22px;
}

.feed-cover .game-card-button svg {
    width: 12px;
    height: 12px;
}

.feed-cover.is-big,
.feed-strip-item {
    width: 120px;
}

.feed-cover.is-big img,
.feed-cover.is-big a > span {
    width: 120px;
    height: 160px;
}

.feed-cover.is-big .game-card-button {
    width: 28px;
    height: 28px;
}

.feed-cover.is-big .game-card-button svg {
    width: 15px;
    height: 15px;
}

.feed-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 14px;
}

.feed-strip-title {
    display: block;
    overflow: hidden;
    margin-top: 6px;
    color: var(--bs-body-color);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.feed-strip-meta {
    overflow: hidden;
    font-family: var(--bs-font-monospace);
    font-size: 11px;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .feed-cover.is-big,
    .feed-strip-item,
    .feed-cover.is-big img,
    .feed-cover.is-big a > span {
        width: 96px;
    }

    .feed-cover.is-big img,
    .feed-cover.is-big a > span {
        height: 128px;
    }
}

/* Nothing to show yet (12d). */
.feed-quiet {
    padding: 40px 24px;
    border: 1px dashed var(--site-control-border);
    border-radius: 3px;
    text-align: center;
}

.feed-quiet p {
    max-width: 30rem;
    margin-inline: auto;
}

.feed-quiet-mark {
    display: grid;
    grid-template-columns: repeat(3, 12px);
    gap: 3px;
    justify-content: center;
    margin-bottom: 16px;
}

.feed-quiet-mark span {
    height: 12px;
    background: var(--site-block-empty);
}

.feed-quiet-mark span.is-on {
    background: var(--bs-primary);
}

.feed-quiet-search {
    display: flex;
    gap: 8px;
    max-width: 22rem;
    margin: 20px auto 16px;
}

/* Trending (or Popular) beside the feed. */
.trending {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--site-divider);
}

.trending-row {
    display: grid;
    grid-template-columns: 18px 36px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--site-divider);
}

.trending-rank {
    font-family: var(--bs-font-monospace);
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.trending-cover img,
.trending-cover span {
    display: block;
    width: 36px;
    height: 48px;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
    background: var(--site-control-bg);
}

.trending-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.trending-name a {
    color: var(--bs-body-color);
    font-size: 14px;
    font-weight: 600;
}

.trending-menu .game-card-menu,
.trending-menu > .game-card-button {
    position: static;
}

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

.find-people {
    max-width: 36rem;
}

.people-list li + li {
    border-top: 1px solid var(--site-divider);
}

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

/* The example history: one play per row, like History (design 3b). */
.home-play {
    display: grid;
    grid-template-columns: 52px 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    border-top: 1px solid var(--site-divider);
}

.home-play:last-child {
    border-bottom: 1px solid var(--site-divider);
}

.home-plays {
    margin-top: 12px;
}

.home-play-date {
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    font-weight: 600;
}

.home-play img {
    display: block;
    width: 32px;
    height: 42px;
    object-fit: cover;
    border-radius: 2px;
}

.home-play-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

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

.home-play-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-play-meta .status-text {
    font-size: 12px;
}

.home-play-platform {
    font-family: var(--bs-font-monospace);
    font-size: 11px;
    color: var(--bs-secondary-color);
}

/* Faint scanlines behind the hero, edge to edge (design 3b). */
.home-hero {
    position: relative;
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
}

[data-bs-theme="light"] .home-hero::before {
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 4px);
}

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

/* Remove from Collection, in the copy's details dialog (design 9b): the one
   red control, and only inside Edit. */
.btn-remove {
    --bs-btn-color: var(--site-status-dropped);
    --bs-btn-border-color: color-mix(in oklab, var(--site-status-dropped) 55%, transparent);
    --bs-btn-hover-color: var(--site-status-dropped);
    --bs-btn-hover-bg: color-mix(in oklab, var(--site-status-dropped) 12%, transparent);
    --bs-btn-hover-border-color: var(--site-status-dropped);
    --bs-btn-active-color: var(--site-status-dropped);
    --bs-btn-active-bg: color-mix(in oklab, var(--site-status-dropped) 18%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-remove svg {
    width: 16px;
    height: 16px;
}

/* The phone nav (below md): icon buttons for search and the menu, and your
   initial in place of the username. */
.nav-icon,
.nav-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--site-control-border);
    border-radius: 3px;
    background: transparent;
    color: var(--bs-body-color);
}

.nav-icon svg {
    width: 18px;
    height: 18px;
}

.nav-icon[aria-expanded="true"] {
    border-color: var(--bs-secondary-color);
    background: var(--site-control-bg);
}

.nav-avatar {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #1a1204;
    font-weight: 700;
}

.site-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);
    min-width: 12rem;
}

/* Released, as exact dates: From and To in front of the pickers. */
.games-date {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    margin: 0;
    font-size: 13px;
    color: var(--bs-secondary-color);
}

/* The search typeahead under the nav's search box. */
.search-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: min(70vh, 30rem);
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--site-control-border);
    border-radius: 3px;
    background: var(--site-panel-bg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.search-suggest-item,
.search-suggest-all {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 3px;
    color: var(--bs-body-color);
}

.search-suggest-item:hover,
.search-suggest-all:hover,
.search-suggest [aria-selected="true"] {
    background: var(--site-control-bg);
    color: var(--bs-body-color);
}

.search-suggest-item img,
.search-suggest-cover {
    flex-shrink: 0;
    width: 28px;
    height: 38px;
    object-fit: cover;
    border-radius: 2px;
    background: var(--site-control-bg);
}

.search-suggest-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-suggest-name {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.search-suggest-meta {
    font-family: var(--bs-font-monospace);
    font-size: 11px;
    color: var(--bs-secondary-color);
}

.search-suggest-all {
    margin-top: 4px;
    border-top: 1px solid var(--site-divider);
    border-radius: 0 0 3px 3px;
    font-size: 13px;
    color: var(--bs-secondary-color);
}

/* The overview's Loved row: eight covers across the full width. */
.played-none {
    color: var(--bs-secondary-color);
    opacity: 0.5;
}

/* Profile section titles (design 11a): 18px bold, the count in gray mono. */
.profile-section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
}

/* "See all" beside a profile section: amber, 13px semibold, no underline
   (design 11a), an exception to the gray-underlined link rule. */
.section-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-primary);
    text-decoration: none;
}

.section-more:hover {
    color: var(--bs-link-hover-color);
    text-decoration: none;
}

/* Edit profile, Follow and Share in the profile header: 36px, same type. */
.profile-actions .btn {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 14px;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 600;
    display: inline-flex;
    align-items: center;
    height: 36px;
    min-height: 36px;
}

/* Text pages (About, FAQ): one readable column. */
.page-text {
    max-width: 42rem;
    padding-bottom: 32px;
}

.page-text h1 {
    margin-bottom: 16px;
}

.page-text h2 {
    margin: 28px 0 8px;
    font-size: 18px;
}

.page-text .lead {
    color: color-mix(in oklab, var(--bs-body-color) 85%, var(--bs-secondary-color));
}

.page-text li {
    margin-bottom: 8px;
}

.faq-item p {
    margin: 0;
    color: color-mix(in oklab, var(--bs-body-color) 85%, var(--bs-secondary-color));
}

/* The footer: About, FAQ, Contact, and where the game data comes from. */
.site-footer {
    margin-top: 48px;
    padding: 24px 0 32px;
    border-top: 1px solid var(--site-divider);
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 8px;
}

.site-footer-links a {
    color: var(--bs-body-color);
    font-weight: 500;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--bs-body-color);
}

/* Sign up and sign in (design 15, account/base_auth.html): the title on the
   left, the form in a HUD frame on the right, over faint scanlines. */
.auth {
    position: relative;
    display: grid;
    gap: 24px;
    padding: 4px 0 40px;
}

.auth::before {
    content: "";
    position: absolute;
    inset: -1.5rem calc(50% - 50vw) 0;
    z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
}

[data-bs-theme="light"] .auth::before {
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.018) 0 1px, transparent 1px 3px);
}

.auth-intro h1 {
    margin: 0 0 12px;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.auth-intro p {
    max-width: 440px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--bs-secondary-color);
    text-wrap: pretty;
}

.auth-panel {
    padding: 22px 18px;
    border: 0;
}

.auth-panel form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
}

.auth-field .form-control {
    height: 48px;
    font-size: 16px;
}

.auth-field .form-control:focus {
    border-color: var(--bs-primary);
}

.auth-field .form-control.is-invalid {
    border-color: var(--site-status-dropped);
    background-image: none;
    padding-right: 12px;
}

.auth-address {
    margin-top: 7px;
    overflow: hidden;
    font-family: var(--bs-font-monospace);
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.auth-address span {
    color: var(--site-underline);
}

.auth-field.has-name .auth-address span {
    color: var(--bs-primary);
}

.auth-address.is-taken span,
.auth-field.has-name .auth-address.is-taken span {
    color: var(--site-status-dropped);
}

.auth-error,
.auth-hint {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.45;
    text-wrap: pretty;
}

.auth-error {
    font-weight: 500;
    color: var(--site-status-dropped);
}

.auth-hint {
    color: var(--bs-secondary-color);
}

.auth-banner {
    padding: 12px 14px;
    border: 1px solid var(--site-status-dropped);
    border-radius: 3px;
    background: color-mix(in oklab, var(--site-status-dropped) 10%, transparent);
    font-size: 14px;
    font-weight: 500;
}

.auth-submit {
    height: 48px;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
}

.auth-alt {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--bs-secondary-color);
}

@media (min-width: 992px) {
    .auth {
        grid-template-columns: minmax(0, 1fr) 460px;
        gap: 80px;
        align-items: center;
        padding: 64px 56px 80px;
    }

    .auth-intro h1 {
        margin-bottom: 18px;
        font-size: 56px;
    }

    .auth-intro p {
        font-size: 18px;
    }

    .auth-panel {
        padding: 32px;
    }

    .auth-panel form {
        gap: 18px;
    }

    .auth-field .form-control {
        height: 44px;
        font-size: 15px;
    }

    .auth-submit {
        height: 46px;
    }
}

/* Home for a new member (design 16a, social/_start.html): log what you've
   played first, then find people. */
.start-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.start-head h1 {
    margin: 0;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.start-head form {
    flex: none;
    margin-left: auto;
}

.start-skip {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    font-size: 13px;
    font-weight: 500;
}

.start-skip:hover {
    color: var(--bs-body-color);
}

.start-search {
    margin-top: 22px;
}

.start-search > svg {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 20px;
    height: 20px;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.start-search .form-control {
    height: 52px;
    padding-left: 46px;
    background: var(--site-panel-bg);
    border-color: var(--site-underline-quiet);
    font-size: 16px;
}

.start-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 32px 0 14px;
}

.start-section-head h2,
.start-people h2 {
    margin: 0;
    font-size: 18px;
}

.start-section-head span {
    font-size: 13px;
}

.start-section-head .section-more {
    margin-left: auto;
}

.game-grid.start-covers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 12px;
}

.start-people {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--site-divider);
}

.start-people > p {
    margin: 4px 0 16px;
    font-size: 14px;
}

.start-people .feed-quiet-search {
    max-width: 32rem;
    margin: 0;
}

.start-people .feed-quiet-search .form-control {
    flex: 1;
}

.start-people .pixel-label {
    margin: 22px 0 4px;
    color: var(--bs-secondary-color);
}

.start-people-list {
    display: grid;
    column-gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.start-people-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--site-divider);
}

.start-person {
    flex: 1;
    min-width: 0;
}

.start-person a {
    display: block;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-person span {
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.start-share {
    margin: 16px 0 0;
    font-size: 14px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .game-grid.start-covers {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .start-people-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .start-head h1 {
        font-size: 34px;
    }

    .game-grid.start-covers {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 20px 14px;
    }
}

/* The Steam import page (templates/steam/page.html). */
.steam-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin-bottom: 12px;
}

.steam-summary dt {
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.steam-summary dd {
    margin: 2px 0 0;
    font-family: var(--bs-font-monospace);
    font-size: 20px;
    font-weight: 600;
}

.steam-status {
    color: var(--bs-secondary-color);
}

.steam-status::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    background: var(--bs-primary);
    animation: steam-blink 1s steps(2) infinite;
}

@keyframes steam-blink {
    50% { opacity: 0; }
}

.steam-unmatched {
    columns: 2;
    column-gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.steam-unmatched li {
    padding: 3px 0;
    break-inside: avoid;
}

@media (max-width: 575.98px) {
    .steam-unmatched {
        columns: 1;
    }
}

/* Steam's hours under the game page's history (steam app). */
.game-steam {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.start-steam {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--bs-secondary-color);
}

/* Steam's hours on a member's page for one game: muted, no status marker. */
.take-steam {
    color: var(--bs-secondary-color);
}

/* Edit beside the copies line: the line's own size, so they sit on one
   baseline. */
.take-edit {
    margin-left: 4px;
    font-size: inherit;
}