/* ── Design tokens ─────────────────────────────────────────────────── */

/* A neon street-art palette: hot pink leads, with neon green, cyan, orange, violet and yellow
   mixed in around it (the spectrum below), on near black. The colors with an alpha take their
   channels from the -rgb tokens, so the palette lives here. */
:root {
    --background: #0a090e;
    --background-rgb: 10, 9, 14;
    --surface: #16141d;
    --surface-raised: #201c29;
    --border: #2f2a3b;
    --text: #f4f1f8;
    --text-muted: #a39db2;
    --accent: #ff2d8a;
    --accent-rgb: 255, 45, 138;
    --accent-strong: #ff5aa6;
    --accent-light: #ff8fc4;
    --accent-deep: #d10f60;
    --on-accent: #16060e;
    --cyan: #22e3ff;
    --cyan-rgb: 34, 227, 255;
    --green: #39ff6a;
    --green-rgb: 57, 255, 106;
    --orange: #ff7a1a;
    --orange-rgb: 255, 122, 26;
    --violet: #a45cff;
    --violet-rgb: 164, 92, 255;
    --yellow: #f3ff3a;
    --yellow-rgb: 243, 255, 58;
    /* A gradient mixes two of them at most, never more. */
    --gold: #f5c518;
    /* The tags on movies: the visitor's own in cyan, a friend's in toxic yellow, a club's in pink. */
    --seen: #22e3ff;
    --seen-rgb: 34, 227, 255;
    --friend: #d8ff3c;
    --friend-rgb: 216, 255, 60;
    --club: #ff5aa6;
    --club-rgb: 255, 90, 166;
    --radius: 12px;
    --radius-small: 8px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }

::selection { background: rgba(var(--accent-rgb), 0.35); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background-color: var(--background);
    /* Sprayed glows behind the page, one color each, for the glass panels to blur. */
    background-image:
        radial-gradient(720px 520px at 6% 10%, rgba(var(--accent-rgb), 0.07), transparent 65%),
        radial-gradient(640px 520px at 94% 28%, rgba(var(--green-rgb), 0.04), transparent 65%),
        radial-gradient(780px 560px at 28% 96%, rgba(var(--violet-rgb), 0.065), transparent 65%),
        radial-gradient(540px 420px at 82% 94%, rgba(var(--orange-rgb), 0.04), transparent 65%),
        radial-gradient(480px 380px at 56% 46%, rgba(var(--cyan-rgb), 0.025), transparent 65%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-synthesis: none;
}

/* The poster face, condensed and upright, with the big titles split a hair into pink and cyan. */
.page-title, .hero-title, .movie-title {
    letter-spacing: 0.5px;
    text-shadow: -1.5px 0 rgba(var(--accent-rgb), 0.45), 1.5px 0 rgba(var(--green-rgb), 0.35);
}

.page-title, .section-title { text-transform: uppercase; letter-spacing: 1px; }

a { color: inherit; text-decoration: none; }

img { display: block; }

.container {
    --gutter: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ── Navbar ────────────────────────────────────────────────────────── */

/* The navbar is flat glass: what scrolls under it, the hero's trailer included, shows through
   blurred, so over a hero it reads as part of the picture. */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: transform 0.45s ease;
}

/* The glass is a layer of its own under the links, so it can fade without them: dark at the top,
   for the links over a bright backdrop or a trailer's letterbox, and lighter and lighter below, on
   an eased curve that reaches well past the navbar, so no edge shows where it ends. */
.navbar::before {
    content: "";
    position: absolute;
    inset: 0 0 -72px 0;
    z-index: -1;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    background: linear-gradient(
        rgba(var(--background-rgb), 0.7),
        rgba(var(--background-rgb), 0.6) 15%,
        rgba(var(--background-rgb), 0.48) 30%,
        rgba(var(--background-rgb), 0.35) 45%,
        rgba(var(--background-rgb), 0.23) 60%,
        rgba(var(--background-rgb), 0.13) 75%,
        rgba(var(--background-rgb), 0.05) 88%,
        rgba(var(--background-rgb), 0));
    -webkit-mask-image: linear-gradient(#000 30%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.2) 80%, transparent);
    mask-image: linear-gradient(#000 30%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.2) 80%, transparent);
    pointer-events: none;
}

/* The trailer brought forward has the screen: the navbar slides up out of the way, and back down
   when the trailer goes back behind the hero. */
:root:has(.trailer-playing) .navbar { transform: translateY(-100%); }

/* A hero that opens the page reaches up under the navbar (--navbar-height, measured by the script),
   so the trailer or the backdrop runs to the top of the screen; its content stays below the navbar. */
.navbar + .hero,
.navbar + .movie-hero {
    --under-nav: var(--navbar-height, 64px);
    margin-top: calc(-1 * var(--under-nav));
    padding-top: var(--under-nav);
}

.navbar-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.brand a {
    display: flex;
    align-items: center;
}

.brand-logo {
    display: block;
    height: 34px;
    width: auto;
    position: relative;
    top: -6px;  /* the dome's foot a touch under the baseline of Home, Movies and the rest */
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.45));
}

.nav-links {
    display: flex;
    gap: 4px;
}

.nav-links a {
    padding: 7px 13px;
    border-radius: var(--radius-small);
    color: var(--text-muted);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s ease;
}

/* The page's tab is told by its color alone, without a block behind it. */
.nav-links a:hover { color: var(--text); }

.nav-links a.active { color: var(--accent-strong); }

/* The search box gives way before the page links do, so the navbar stays one row. */
.navbar .search-box { margin-left: auto; flex: 0 1 320px; min-width: 190px; }

/* The suggestions are wider than the box, anchored to its right edge so they open over the page links
   rather than past the screen; a title gets the room a poster, a type and a year leave. */
.navbar .search-suggestions { left: auto; right: 0; width: 520px; max-width: calc(100vw - 32px); }

/* ── Search box + suggestions ──────────────────────────────────────── */

.search-box { position: relative; }

/* The search box is clear glass, as the tags and buttons are: barely tinted, a blur of what is
   behind it, and a light catching its top edge; focused, it lights up in the accent. */
.search-box input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239098b0' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat 15px center;
    color: var(--text);
    font-size: 14.5px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.search-box input::placeholder { color: var(--text-muted); }

.search-box input:hover { border-color: rgba(255, 255, 255, 0.22); }

.search-box input:focus {
    border-color: rgba(var(--accent-rgb), 0.8);
    background-color: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 3px rgba(var(--accent-rgb), 0.18), 0 4px 14px rgba(0, 0, 0, 0.18);
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    z-index: 60;
}

/* A box that picks a movie or a name suggests in windows: its panel scrolls, and fetches the next as it nears the end. */
.picker .search-suggestions {
    max-height: min(420px, 60vh);
    overflow-y: auto;
}

.suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    transition: background 0.1s ease;
}

.suggestion.active { background: rgba(var(--accent-rgb), 0.12); }

.suggestion-media {
    flex-shrink: 0;
    width: 30px;
    height: 42px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--surface);
    border: 1px solid var(--border);
}

.suggestion-media-person {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.suggestion-media.failed { visibility: hidden; }

.suggestion-type {
    flex-shrink: 0;
    width: 52px;
    text-align: center;
    padding: 2.5px 0;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.suggestion-type-movie { background: rgba(var(--accent-rgb), 0.18); color: var(--accent-strong); }

.suggestion-type-person { background: rgba(245, 197, 24, 0.15); color: var(--gold); }

.suggestion-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-year { margin-left: auto; color: var(--text-muted); font-size: 13px; }

/* ── Hero (home) ───────────────────────────────────────────────────── */

.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.hero-backdrop {
    position: absolute;
    inset: -60px;
    background-size: cover;
    background-position: center 20%;
    filter: blur(70px) brightness(0.46) saturate(1.55);
    transform: scale(1.25);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(var(--background-rgb), 0.55) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--background-rgb), 0.2) 0%, rgba(var(--background-rgb), 0.94) 100%);
    z-index: 1;
}

/* A sharp landscape still replaces the blurred poster once it loads. */
.hero-backdrop.backdrop-image,
.movie-backdrop.backdrop-image {
    inset: 0;
    transform: none;
    filter: brightness(0.5) saturate(1.15);
    background-size: cover;
    background-position: center 25%;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 44px;
    align-items: center;
    padding: 56px 24px 60px;
}

.hero-poster { width: 264px; flex-shrink: 0; }

.hero-eyebrow {
    color: var(--green);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 14px;
}

.hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 18px;
}

.hero-actions { display: flex; gap: 12px; }

/* ── Big search (home) ─────────────────────────────────────────────── */

.search-hero { padding: 40px 0 8px; }

.search-hero .search-box { max-width: 640px; margin: 0 auto; }

.search-hero input {
    padding: 15px 22px 15px 48px;
    font-size: 16.5px;
    background-position: 19px center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 34px rgba(0, 0, 0, 0.3);
}

.search-hero input:focus {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 3px rgba(var(--accent-rgb), 0.18), 0 12px 34px rgba(0, 0, 0, 0.3);
}

/* ── Sections ──────────────────────────────────────────────────────── */

.section { padding: 34px 0 10px; }

.section-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 18px;
}

.section-title {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

.section-title::before {
    content: "";
    width: 5px;
    height: 18px;
    margin-right: 12px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--accent), var(--cyan));
}

.section-note { color: var(--text-muted); font-size: 13.5px; }

.section-link { margin-left: auto; color: var(--accent-strong); font-size: 14px; font-weight: 500; }
/* The word by a section's title that folds it away and back: "Hide", then "Show". A word, no chevron. */
.section-toggle { background: none; border: 0; padding: 0; color: var(--text-muted); font: inherit; font-size: 13.5px; cursor: pointer; }
.section-toggle:hover { color: var(--text); text-decoration: underline; }

.section-link:hover { text-decoration: underline; }

/* The days of the recently added page, one section each. */
.day-group + .day-group { margin-top: 34px; }

/* ── Genre chips ───────────────────────────────────────────────────── */

.genre-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* A tag is clear glass: barely tinted, a blur of what is behind it, and a light catching its top edge. */
.genre-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.18);
    font-size: 13.5px;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.genre-chip:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.genre-chip.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.15); }

.genre-chip .count {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* ── Movie cards + grid ────────────────────────────────────────────── */

.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 20px;
}

.movie-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 158px;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
}

/* A row scrolls, which clips what spills out of it: the room around its cards lets their glows fade
   out before the edge, and the negative margin keeps the cards where they were. Sideways the room is
   the page's gutter, so the row never reaches past the screen. */
.movie-row { margin: -44px calc(-1 * var(--gutter, 24px)) -18px; padding: 44px var(--gutter, 24px) 28px; }

.movie-row::-webkit-scrollbar { height: 8px; }

.movie-row::-webkit-scrollbar-thumb {
    background: var(--surface-raised);
    border-radius: 4px;
}

.movie-row::-webkit-scrollbar-thumb:hover { background: var(--border); }

.movie-card { display: block; transition: transform 0.18s ease; animation: fade-up 0.2s ease backwards; }

.person-card { animation: fade-up 0.2s ease backwards; }

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.movie-card:hover { transform: translateY(-4px); }

.movie-card:hover .poster {
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
}

.movie-card:hover .poster img { transform: scale(1.05); }

.poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius-small);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.25s ease;
}

.poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    transition: transform 0.25s ease;
}

.poster img.failed { display: none; }

.poster-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
    background:
        radial-gradient(120% 90% at 20% 0%, rgba(var(--accent-rgb), 0.18) 0%, transparent 55%),
        linear-gradient(155deg, #2b1630 0%, #0b0a10 100%);
}

.poster-placeholder span {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: rgba(233, 235, 245, 0.72);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.movie-card-info { padding: 9px 2px 0; }

.movie-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.movie-card-year { color: var(--text-muted); font-size: 12.5px; margin-top: 1px; white-space: nowrap; }

/* A title is never cut short: it wraps, and once it does (title-wrapped, set by the script), the
   year follows on its last line rather than on a line of its own. */
.title-wrapped .movie-card-title,
.title-wrapped .movie-card-year { display: inline; }

/* Inline, the lines take their height from the card's text, so it is set to the title's. */
.movie-card-info.title-wrapped { font-size: 14px; line-height: 1.35; }

.title-wrapped .movie-card-year { margin-left: 6px; }

.movie-card .rank {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    background: rgba(var(--background-rgb), 0.85);
    border: 1px solid var(--border);
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
}

/* ── Person cards ──────────────────────────────────────────────────── */

.person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.person-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.person-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.avatar {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.12));
    color: var(--accent-strong);
    font-weight: 700;
    font-size: 17px;
}

.avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar img.failed { display: none; }

.avatar-large {
    width: 104px;
    height: 104px;
    font-size: 38px;
    border: 2px solid rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.person-header {
    display: flex;
    align-items: center;
    gap: 26px;
}

.person-card-name { font-weight: 600; font-size: 14.5px; }

.person-card-sub { color: var(--text-muted); font-size: 12.5px; }

/* ── Rating badge ──────────────────────────────────────────────────── */

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(245, 197, 24, 0.12);
    border: 1px solid rgba(245, 197, 24, 0.35);
    border-radius: 999px;
    color: var(--gold);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rating-badge .star { font-size: 12px; }

.votes { color: var(--text-muted); font-size: 12.5px; }

/* ── Buttons ───────────────────────────────────────────────────────── */

/* A button is clear glass: see-through over a blur of what is behind it, faintly tinted with a
   gradient of two colors (--from and --to, as channels), a light catching its top edge, and an edge
   of the same gradient (::after) that comes up on hover. */
.button {
    --from: var(--violet-rgb);
    --to: var(--cyan-rgb);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, rgba(var(--from), 0.1), rgba(var(--to), 0.04)) rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 20px rgba(0, 0, 0, 0.22);
    color: var(--text);
    font-size: 14.5px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.button::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgb(var(--from)), rgb(var(--to)));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.button:hover {
    background: linear-gradient(135deg, rgba(var(--from), 0.22), rgba(var(--to), 0.1)) rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 26px rgba(var(--from), 0.24);
    transform: translateY(-1px);
}

.button:hover::after { opacity: 1; }

.button-primary { --from: var(--accent-rgb); --to: var(--orange-rgb); }



/* The watchlist's clock and the seen list's eye: drawn in the text's color, the same on every device. */
.watchlist-button::before,
.seen-button::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.watchlist-button { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

.seen-button { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }

.list-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

/* The action buttons by a movie: small, so they fit a row. */
.list-buttons .button,
.hero-actions .button { gap: 6px; padding: 7px 14px; font-size: 13.5px; }

.list-buttons .vote-button { padding: 7px 10px; font-size: 14px; }

/* Where a movie plays: the platforms' logos after the tags, as tall as a tag, without text. */
.watch-providers { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: 6px; }

.watch-providers[hidden] { display: none; }

.watch-provider {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.list-button.active {
    --from: var(--accent-rgb);
    --to: var(--violet-rgb);
    background: linear-gradient(135deg, rgba(var(--from), 0.34), rgba(var(--to), 0.2));
    color: var(--accent-light);
}

/* The thumbs: a vote on a seen movie, pressed again to take it back. */
.vote-buttons { display: inline-flex; gap: 6px; }

.vote-buttons[hidden] { display: none; }

.vote-button { padding: 10px 13px; font-size: 15px; line-height: 1; }

/* By a movie, the thumbs keep to the end of the button row, bottom right however it wraps, in silver:
   see-through, the icons grey until one is given. */
.list-buttons .vote-buttons { order: 1; margin-left: auto; }

.list-buttons .vote-button {
    --from: 255, 255, 255;
    --to: 190, 196, 210;
    background: linear-gradient(135deg, rgba(var(--from), 0.06), rgba(var(--to), 0.02));
    filter: grayscale(1) brightness(1.5);
    opacity: 0.8;
}

.list-buttons .vote-button::after { opacity: 0.35; }

.list-buttons .vote-button.active { filter: none; opacity: 1; background: linear-gradient(135deg, rgba(var(--from), 0.14), rgba(var(--to), 0.05)); }

.list-buttons .vote-button.active::after { opacity: 0.7; }

.vote-button.active {
    background: rgba(245, 197, 24, 0.16);
    border-color: var(--gold);
}

/* The share button, and the menu that stands in for a share sheet on a desktop. */
.share { position: relative; }

.share-button::before {
    content: "↗";
    font-size: 15px;
    line-height: 1;
}

.share-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    z-index: 60;
}

.share-menu[hidden] { display: none; }

.share-option {
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s ease;
}

.share-option:hover { background: rgba(var(--accent-rgb), 0.12); }

/* ── Recommendations ───────────────────────────────────────────────── */

.movie-card-reasons { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }

/* The cards keep their reasons, but do not show them for now. */
.recommended .movie-card-reasons { display: none; }

.movie-card-reasons span {
    color: var(--accent-strong);
    font-size: 11.5px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A recommended card with its "Not interested" control over the poster's corner, shown on hover. */
.recommended { position: relative; }

.dismiss-button {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(13, 12, 22, 0.78);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.recommended:hover .dismiss-button, .dismiss-button:focus-visible { opacity: 1; }

.dismiss-button:hover { color: var(--text); }

@media (hover: none) { .dismiss-button { opacity: 1; } }

.section-note { margin: -10px 0 18px; color: var(--text-muted); font-size: 14px; }

.section-note-inline { color: var(--text-muted); font-size: 13.5px; }

.section-title-link { color: inherit; }

.section-title-link:hover { text-decoration: underline; }

.stat-note { margin: -6px 0 14px; color: var(--text-muted); font-size: 13.5px; }

/* ── Account ───────────────────────────────────────────────────────── */

/* The account: "Sign in" while signed out, then an icon, the avatar or else the initial, that opens the account page. */
.nav-account { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }

/* The counts beside the account: the movies watched behind an eye, in fuchsia; the check-ins behind a plus, in green. */
.nav-count { --tone: var(--fuchsia-rgb); display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; border: 1px solid rgba(var(--tone), 0.5); color: rgb(var(--tone)); font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; transition: background 0.15s ease; }
.nav-count:hover { background: rgba(var(--tone), 0.14); }
.nav-count svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-count-checkins { --tone: var(--green-rgb); }

/* A mark made on the page: a poster flies from the tap into the count (countMark in app.js), and the number rolls
   to its new value, the old line out one way and the new one in from the other, in a box the height of a line. */
.count-flyer { position: fixed; top: 0; left: 0; z-index: 70; width: 36px; height: 54px; object-fit: cover; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); pointer-events: none; will-change: transform, opacity; }
.count-flyer.failed { background: var(--surface-raised); border: 1px solid var(--border); }
.nav-count span.rolling { display: inline-grid; overflow: hidden; }
.nav-count .roll-line { grid-area: 1 / 1; will-change: transform; }
.nav-count.bumped { animation: count-bump 0.5s ease; }
@keyframes count-bump {
    0% { transform: scale(1); background: rgba(var(--tone), 0); }
    35% { transform: scale(1.18); background: rgba(var(--tone), 0.28); }
    100% { transform: scale(1); background: rgba(var(--tone), 0); }
}
/* A phone has no room for the counts beside the menu: the account page says them. Tablets keep
   them, the smallest iPad in portrait included. */
@media (max-width: 640px) { .nav-count { display: none; } }

.nav-account-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;       /* a tight navbar must not squeeze the circle into an oval */
    width: 34px;
    height: 34px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-raised);
    color: var(--accent-strong);
    font-weight: 700;
    font-size: 15px;
    transition: border-color 0.15s ease;
}

.nav-account-icon:hover, .nav-account-icon.active { border-color: var(--accent); }

.nav-account-icon img { width: 100%; height: 100%; object-fit: cover; }

.nav-signin {
    padding: 7px 13px;
    border-radius: var(--radius-small);
    border: 1px solid var(--border);
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.nav-signin:hover { color: var(--text); background: var(--surface-raised); }

/* The account page: the logins, each with its provider's mark, and the way out. */
.account-logins { margin-bottom: 20px; }
.signout-form { margin-top: 22px; }

.account-login { display: inline-flex; align-items: center; gap: 10px; }

.signout-form { margin: 0 0 22px; }

.country-card { margin-bottom: 22px; }

.country-select {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font: inherit;
    font-size: 16px;  /* below 16px, iOS zooms the page in on focus */
}

.country-select option { background: var(--surface-raised); color: var(--text); }

/* The streaming services of the user's country, and the movies they want picked: each choice a tile, ticked by a click. */
.services-card, .movies-card { margin-bottom: 22px; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 16px; }

.choice-heading { margin: 4px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); }

.choice-hint { margin-left: 6px; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 0.8; }

.choice-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.choice-tile input { position: absolute; opacity: 0; pointer-events: none; }

.choice-tile img { width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; }

.choice-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.choice-tile .choice-count { margin-left: auto; flex-shrink: 0; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.choice-tile:hover { border-color: rgba(255, 255, 255, 0.25); }

.choice-tile:has(input:checked) { border-color: rgba(var(--accent-rgb), 0.75); background: rgba(var(--accent-rgb), 0.12); }

.choice-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.language-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* For You: all picks, or the ones on the visitor's services, under the page title. */
.page-header .for-you-tabs { margin: 16px 0 0; }

/* The visitor's services a pick streams on, small in the poster's corner (For You). */
.poster-services { position: absolute; right: 6px; bottom: 6px; z-index: 3; display: flex; gap: 4px; }

/* The logos are images in the poster, so they undo what the poster's own image takes: the whole
   poster, and the zoom under the mouse. */
.poster .poster-services img {
    position: static;
    width: 24px;
    height: 24px;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.movie-card:hover .poster .poster-services img { transform: none; }

/* The providers in their own colours, each with its mark: the git providers' single-colour marks
   (Simple Icons, CC0) are masks filled with the button's text colour, Freepod's is its full-colour
   app icon. */
.provider-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-color: transparent;
    background: var(--brand);
    color: var(--brand-text, #fff);
}

.provider-button:hover { border-color: transparent; filter: brightness(1.08); }

.provider-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--mark) center / contain no-repeat;
    mask: var(--mark) center / contain no-repeat;
}

/* A mark on its own, as the account page lists a login: the brand colour behind it. */
.provider-badge {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--brand);
    color: var(--brand-text, #fff);
}

.provider-badge .provider-icon { width: 16px; height: 16px; }

.provider-github { --brand: #f6f8fa; --brand-text: #1f2328; --mark: url(/img/providers/github.svg); }
.provider-gitlab { --brand: #fc6d26; --mark: url(/img/providers/gitlab.svg); }
.provider-bitbucket { --brand: #0052cc; --mark: url(/img/providers/bitbucket.svg); }
.provider-codeberg { --brand: #2185d0; --mark: url(/img/providers/codeberg.svg); }
.provider-freepod { --brand: #2563eb; }

.provider-freepod .provider-icon {
    -webkit-mask: none;
    mask: none;
    background: url(/img/providers/freepod.svg) center / contain no-repeat;
}

.provider-badge.provider-freepod { background: none; }

.provider-badge.provider-freepod .provider-icon { width: 28px; height: 28px; }

.account-hint { margin: 0 0 22px; color: var(--text-muted); font-size: 14px; }

.account-hint a { color: var(--accent-strong); }

/* Under an empty list, the hint keeps its distance from the panel. */
.empty-state + .account-hint { margin-top: 16px; }

/* The provider buttons share one width, wide enough for the longest label; on a phone they span the screen. */
.signin-providers {
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    gap: 12px;
    margin-bottom: 22px;
}

.signin-providers .provider-button { justify-content: center; }

/* ── Movie detail ──────────────────────────────────────────────────── */

.movie-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #1b1421 0%, var(--background) 100%);
    border-bottom: 1px solid var(--border);
}

.movie-backdrop {
    position: absolute;
    inset: -70px;
    background-size: cover;
    background-position: center 25%;
    filter: blur(85px) brightness(0.38) saturate(1.45);
    transform: scale(1.3);
}

.movie-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(var(--background-rgb), 0.55) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--background-rgb), 0.25) 0%, rgba(var(--background-rgb), 0.92) 100%);
    z-index: 1;
}

.movie-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 44px;
    padding: 52px 24px;
}

.movie-hero-poster { width: 260px; flex-shrink: 0; }

.movie-title {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.12;
    margin: 4px 0 12px;
}

/* Who directed it, under the title; the names lead to their pages. */
.movie-directors { margin: -6px 0 12px; color: var(--text-muted); font-size: 15px; }

.movie-directors a { color: var(--text); transition: color 0.15s ease; }

.movie-directors a:hover { color: var(--accent); }

.movie-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 16px;
}

.movie-genres { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

/* ── Wikipedia summaries ───────────────────────────────────────────── */

.movie-extract {
    max-width: 720px;
    color: var(--text-muted);
    font-size: 15.5px;
    line-height: 1.65;
    margin: 0 0 24px;
}

.hero-extract {
    max-width: 640px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.person-bio {
    max-width: 720px;
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 12px 0 0;
}

/* ── Photo gallery ─────────────────────────────────────────────────── */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 20px;
}

.gallery-photo {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-small);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    animation: fade-up 0.2s ease backwards;
}

.gallery-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.gallery-photo:hover img { transform: scale(1.05); }

/* ── Cast photo grid ───────────────────────────────────────────────── */

.credit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 20px;
}

.credit-card {
    display: block;
    transition: transform 0.18s ease;
    animation: fade-up 0.2s ease backwards;
}

.credit-card:hover { transform: translateY(-3px); }

.credit-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.08));
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--accent-strong);
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 9px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.credit-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.credit-photo img.failed { display: none; }

.credit-card:hover .credit-photo img { transform: scale(1.05); }

.credit-card .person-card-name,
.credit-card .credit-role {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.credit-card .credit-role { margin-top: 2px; }

/* ── Cast + credit rows ────────────────────────────────────────────── */

.credit-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border-radius: var(--radius);
    transition: background 0.12s ease;
}

.credit-row:hover { background: var(--surface); }

.credit-role { color: var(--text-muted); font-size: 13px; }

.credit-list { display: flex; flex-direction: column; }

/* ── Ranked rows (top movies, statistics) ──────────────────────────── */

.ranked-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 16px;
    border-radius: var(--radius);
    transition: background 0.12s ease;
}

.ranked-row:hover { background: var(--surface); }

.ranked-row .rank-number {
    width: 34px;
    text-align: right;
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

#top-movies-list .ranked-row:nth-child(-n+3) .rank-number {
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 19px;
}

.ranked-row .poster { width: 46px; flex-shrink: 0; box-shadow: none; }

.ranked-row .poster-placeholder span { font-size: 7px; -webkit-line-clamp: 3; }

.ranked-main { min-width: 0; }

.ranked-title { font-weight: 600; font-size: 15.5px; }

.ranked-sub { color: var(--text-muted); font-size: 13px; }

/* The seen tag, with the day the visitor marked the movie seen (setupSeenTags in app.js):
   on a poster, in its corner; in a row, beside the year. */
.seen-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--seen-rgb), 0.14);
    color: var(--seen);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.poster .seen-tag {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 3;  /* over the poster image, like the rank */
    background: rgba(var(--background-rgb), 0.85);
    border: 1px solid rgba(var(--seen-rgb), 0.45);
    backdrop-filter: blur(6px);
}

.ranked-sub .seen-tag { margin-left: 8px; }

/* A movie only friends have seen: the same tag in yellow, naming the friend or counting them. */
.seen-tag.friend-tag { background: rgba(var(--friend-rgb), 0.14); color: var(--friend); }

.poster .seen-tag.friend-tag { background: rgba(var(--background-rgb), 0.85); border-color: rgba(var(--friend-rgb), 0.55); }

/* A movie only members of the visitor's clubs have seen: the same tag in purple. */
.seen-tag.club-tag { background: rgba(var(--club-rgb), 0.14); color: var(--club); }

.poster .seen-tag.club-tag { background: rgba(var(--background-rgb), 0.85); border-color: rgba(var(--club-rgb), 0.55); }

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

/* ── Statistics ────────────────────────────────────────────────────── */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 22px;
}

/* The cards of a row are as tall as the tallest, their rows spread over that height, so the bottoms line up. */
.stats-grid .stat-card { display: flex; flex-direction: column; }

.stats-grid .stat-card > :is(.bar-row, .stat-row) { flex: 1 0 auto; }

.stat-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
}

.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
}

.stat-card h2 { font-size: 17px; margin: 0 0 18px; }

.bar-row {
    display: grid;
    grid-template-columns: 52px 1fr 64px;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.bar-track { background: var(--surface-raised); border-radius: 5px; height: 20px; overflow: hidden; }

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
    border-radius: 5px;
    min-width: 3px;
    transform-origin: left;
    animation: bar-grow 0.7s ease-out;
}

@keyframes bar-grow {
    from { transform: scaleX(0); }
}

.bar-row .bar-value { text-align: right; color: var(--text-muted); }

.stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.stat-row:last-child { border-bottom: none; }

.stat-row .stat-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.stat-count { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ── Stat chips (person and statistics pages) ──────────────────────── */

.stat-chips { display: flex; gap: 12px; flex-wrap: wrap; }

.stat-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 20px;
    text-align: center;
}

.stat-chip .value { font-size: 22px; font-weight: 700; color: var(--accent-strong); }

.stat-chip .label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; }

/* ── Filter bar (top movies) ───────────────────────────────────────── */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.filter-label { color: var(--text-muted); font-size: 13.5px; margin-right: 4px; }

/* ── Pagination ────────────────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 30px 0;
}

.pagination .page-info { color: var(--text-muted); font-size: 14px; }

.pagination .button.disabled { opacity: 0.4; pointer-events: none; }

/* ── Spinner + sentinel ────────────────────────────────────────────── */

.scroll-sentinel { display: flex; justify-content: center; padding: 26px 0; }

.spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--surface-raised);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Misc ──────────────────────────────────────────────────────────── */

.page-header { padding: 38px 0 6px; }

.page-title { font-family: var(--font-display); font-size: 34px; margin: 0 0 6px; }

.page-subtitle { color: var(--text-muted); font-size: 15px; margin: 0; }

/* A page header with actions: the title on the left, the actions beside it on the right, under it on phones. */
.page-header-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }

.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.page-actions [aria-expanded="true"] { border-color: var(--accent); color: var(--accent-strong); }

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 70px 20px;
    font-size: 15.5px;
}

.footer {
    margin-top: 60px;
    padding: 26px 0 34px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.footer a { color: var(--accent-strong); }

.footer-credit { margin-top: 6px; font-size: 12px; opacity: 0.8; }

/* ── Trailers ──────────────────────────────────────────────────────── */

/* The trailer behind a hero, over the backdrop image and under the hero's shading: a small player
   scaled to cover (--video-scale, set by the script), blurred and dimmed, that cannot be clicked. */
.backdrop-video {
    --behind-zoom: 1.4;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.6s ease;
}

/* Shown once the player says it plays (the script adds it), so a held-back autoplay shows no player. */
.backdrop-video.visible { opacity: 1; }

.backdrop-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 480px;
    height: 270px;
    border: 0;
    /* Behind, the frame is zoomed in past YouTube's title bar and control bar, which come back for a
       few seconds every time the trailer starts over: they stay out of the picture. */
    transform: translate(-50%, -50%) scale(calc(var(--video-scale, 3) * var(--behind-zoom)));
    filter: blur(2px) brightness(0.55) saturate(1.25);
    /* Coming forward and going back are instant: the framing is the same on both sides, and a size
       and a scale animated together would swell on the way. Only the sharpness fades. */
    transition: filter 0.5s ease;
}

/* The trailer brought forward (Trailer, then exit), in the hero's own space: its content and shading
   give way, and the player, sharp and framed as it was behind, now at that size, takes clicks. The
   whole frame, asked for by its control, fits the player to the hero, with bars where it is not 16:9. */
.hero::before, .movie-hero::before, .hero-content, .movie-hero-content { transition: opacity 0.4s ease; }

.trailer-playing::before,
.trailer-playing .hero-content,
.trailer-playing .movie-hero-content { opacity: 0; pointer-events: none; }

/* Forward, the player is still never under the mouse: YouTube shows its bars and its title to a hovering
   mouse, and never to one it does not see. The site's own controls take the clicks. */
.trailer-playing .backdrop-video { z-index: 3; opacity: 1; pointer-events: none; }

.trailer-playing .backdrop-video iframe { width: var(--video-fill-width); height: var(--video-fill-height); transform: translate(-50%, -50%); filter: none; }

.trailer-playing.trailer-full-frame .backdrop-video iframe { width: 100%; height: 100%; }

/* Once forward (the script marks it a frame later), the whole frame and the fill ease into each other. */
.trailer-playing.trailer-settled .backdrop-video iframe { transition: width 0.5s ease, height 0.5s ease, filter 0.5s ease; }

/* A phone turned to landscape: the trailer covers the screen, above the navbar, the page held still. */
.trailer-fullscreen .backdrop-video { position: fixed; inset: 0; z-index: 1000; background: #000; }

.trailer-fullscreen .trailer-controls { display: none; }

:root:has(.trailer-fullscreen) { overflow: hidden; }

/* The trailer's controls float over its corner, rising with the navbar from just under it: round glass
   buttons with an icon each, the whole frame or the fill, and exit. */
@keyframes trailer-exit-rise { from { transform: translateY(var(--under-nav, 0px)); } }

.trailer-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    display: flex;
    gap: 8px;
    animation: trailer-exit-rise 0.45s ease;
}

.trailer-control { width: 38px; height: 38px; padding: 0; justify-content: center; }

.trailer-control svg { display: block; }

.trailer-button::before { content: "▶"; font-size: 11px; }

/* How many check-ins more than the one the button names. */
.check-in-more { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: inherit; font-size: 12px; }

.check-in-more[hidden] { display: none; }

/* Shown once the movie turns out to have a trailer; the button style would show it before. */
.trailer-button[hidden] { display: none; }

/* The Trailer button on the backdrop, and the rating and genres under it, are a phone's (see the phone hero below). */
.trailer-overlay,
.hero-summary { display: none; }

.hero-head, .hero-poster, .movie-hero-poster { transition: opacity 0.4s ease; }

.trailer-dialog {
    width: min(960px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #000;
    overflow: visible;
}

.trailer-dialog::backdrop { background: rgba(5, 6, 10, 0.85); backdrop-filter: blur(4px); }

.trailer-dialog iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

.trailer-close {
    position: absolute;
    top: -42px;
    right: 0;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* ── IMDb import ───────────────────────────────────────────────────── */

.notice {
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    border-radius: var(--radius);
    background: rgba(var(--accent-rgb), 0.10);
    font-size: 14px;
}

.notice-error { border-color: rgba(240, 98, 98, 0.5); background: rgba(240, 98, 98, 0.10); }

.import-panel {
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.import-panel[hidden] { display: none; }

.import-title { margin: 0; font-size: 16px; }

.import-panel p { color: var(--text-muted); font-size: 14px; line-height: 1.55; max-width: 760px; }

.import-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.import-form [data-import-submit][hidden] { display: none; }

/* The drop zone: a dashed field that lights up while a file is dragged over it. */
.drop-zone {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 22px 24px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.drop-zone:hover, .drop-zone.dragging, .drop-zone:focus-within {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
}

.drop-zone.importing { cursor: progress; opacity: 0.7; }

.drop-plus {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--orange) 100%);
    color: var(--on-accent);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.35);
}

.drop-text { color: var(--text-muted); font-size: 14px; }

.drop-text strong { color: var(--text); font-weight: 600; }

/* A touch screen drags no files: it only offers the plus. */
.drop-hint-touch { display: none; }

@media (hover: none) {
    .drop-hint-pointer { display: none; }
    .drop-hint-touch { display: inline; }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Seen: when, and catching up ───────────────────────────────────── */

/* The seen page's two views: everything, or the check-ins by day. */
.view-tabs { display: inline-flex; gap: 4px; margin: 0 0 20px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }

.view-tabs a { padding: 7px 16px; border-radius: 999px; color: var(--text-muted); font-size: 14px; font-weight: 500; }

.view-tabs a.active { background: var(--surface-raised); color: var(--accent-strong); }
.section-header .view-tabs { margin: 0; align-self: center; }

/* The welcome on the home page, for a visitor with nothing marked or saved yet. */
.welcome {
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(80% 140% at 0% 0%, rgba(var(--accent-rgb), 0.24) 0%, transparent 60%),
        radial-gradient(60% 120% at 100% 100%, rgba(var(--violet-rgb), 0.2) 0%, transparent 60%),
        radial-gradient(40% 90% at 70% 0%, rgba(var(--green-rgb), 0.08) 0%, transparent 60%),
        var(--surface);
}

.welcome-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-top: 26px; padding-bottom: 26px; }

.welcome-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 24px; }

.welcome p { margin: 0; max-width: 680px; color: var(--text-muted); line-height: 1.55; }

.welcome-button { flex-shrink: 0; }

/* The catch-up page's note for a visitor who is not signed in; after a few marks it stands out. */
.signin-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

.signin-nudge.urgent { border-color: var(--gold); background: rgba(245, 197, 24, 0.12); }

/* Checked in, the button is green rather than the pink of Watched: the two tell apart at a glance. */
.seen-button.checked-in {
    --from: var(--green-rgb);
    --to: var(--cyan-rgb);
    background: linear-gradient(135deg, rgba(var(--from), 0.26), rgba(var(--to), 0.14));
    color: var(--green);
}

/* The eye for a movie not watched yet; watched or checked in, a plus: a tap there adds a check-in. */
.seen-button.active::before,
.seen-button.checked-in::before {
    content: "+";
    width: auto;
    height: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.check-in { position: relative; }

.check-in-menu { min-width: 210px; z-index: 60; }

/* The other days, listed above the way to check in again. */
.check-in-menu .check-in-day { padding: 8px 14px; color: var(--text-muted); font-size: 13.5px; }

.check-in-menu .check-in-day::before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 700; }

/* An option set apart from the ones above it, and one that takes something back. */
.share-option-apart { border-top: 1px solid var(--border); }

.share-option-muted { color: var(--text-muted); }

/* The catch-up toolbar stays in view under the navbar while the list scrolls. */
.catch-up-toolbar {
    position: sticky;
    top: 64px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 -8px 18px;
    padding: 10px 8px;
    background: rgba(var(--background-rgb), 0.9);
    backdrop-filter: blur(12px);
}

.catch-up-search, .catch-up-genre {
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.catch-up-search { flex: 1 1 220px; min-width: 0; }

.hide-marked { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 14px; cursor: pointer; }

.hide-marked input { accent-color: var(--accent); }

.catch-up-count { margin-left: auto; color: var(--text-muted); font-size: 14px; }

.catch-up-count strong { color: var(--seen); font-size: 16px; }

#catch-up-search-results { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }

#catch-up-search-results[hidden] { display: none; }

/* On the catch-up page a card is a switch: a seen one is outlined, and dims while it is being marked. */
.catch-up .movie-card { cursor: pointer; }

.catch-up .movie-card.is-seen .poster { box-shadow: 0 0 0 2px var(--seen); }

.catch-up .movie-card.marking { opacity: 0.6; }

/* ── Friends ───────────────────────────────────────────────────────── */

.friend-seen { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--text-muted); font-size: 12.5px; }

.friend-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

.friends-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }

.friend-name { display: inline-flex; align-items: center; gap: 10px; }

.friend-name .nav-account-icon { width: 30px; height: 30px; font-size: 13px; }

.link-button { background: none; border: 0; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; }

.link-button:hover { color: var(--text); }

.invite { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; }

.invite-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.invite-link {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

.invite-link[hidden] { display: none; }

/* A Save with nothing to save is grey; with a change it is the primary button (app.js). */
form[data-saves] .button:disabled { opacity: 0.5; cursor: default; filter: grayscale(0.5); }

form[data-saves] .button:disabled::after { opacity: 0.2; }

/* The personal invite links still open, under the invite buttons. */
.open-invites { align-self: stretch; margin-top: 6px; }

.open-invites[hidden] { display: none; }

.open-invites .stat-end { flex-shrink: 0; white-space: nowrap; }

.open-invite { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }

/* Personal or public, as a small tag: a public link is open to anyone who has it, so it stands out. */
.open-invite-kind {
    padding: 2px 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.open-invite-kind.public { border-color: rgba(var(--green-rgb), 0.45); color: var(--green); }

.open-invite-age { color: var(--text-muted); font-size: 13.5px; }

/* The cog beside a page title leads to what the page manages; the way back is a link under it. */
.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* The cog with its word beside it, so it reads as the way to manage things: the cog turns on hover. */
.page-manage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.page-manage:hover { border-color: rgba(var(--accent-rgb), 0.6); }

.page-manage svg { display: block; transition: transform 0.3s ease; }
.page-manage:hover svg { transform: rotate(30deg); }

.club-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

/* The movies in common, unfolded under a person. */
.in-common-movies { grid-column: 1 / -1; margin: 6px 0 4px; }

.page-switch { margin: 0; }

.page-switch a { color: var(--accent-strong); font-size: 14px; font-weight: 500; }

.page-switch a:hover { color: var(--text); }

/* The browse page's orders, under its genres. */
.browse-tabs { margin: 22px 0 30px; }

/* What the visitor has in common with each person: the name, the numbers under it, and a bar for the share. */
.in-common-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 6px 18px; align-items: center; }

.in-common-row .friend-name { align-items: flex-start; min-width: 0; }

.in-common-row .friend-name .nav-account-icon { margin-top: 2px; }

.in-common-detail { display: block; margin-top: 2px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }

.in-common-detail strong { color: var(--text); font-weight: 600; }

.in-common-detail a { color: var(--text); }

.in-common-bar, .in-common-bar .bar-track, .in-common-bar .bar-fill { display: block; }

.in-common-bar .bar-track { height: 8px; border-radius: 4px; }

.in-common-toggle { grid-column: 1; justify-self: start; padding-left: 0; }

.in-common-bar .bar-fill { border-radius: 4px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0.9)); }

.switch-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; color: var(--text-muted); }

.switch-row strong { color: var(--text); font-weight: 600; }

.switch-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }

#sharing-card .button { margin-top: 16px; }

.invite-page { max-width: 640px; }

.invite-from { display: flex; align-items: center; gap: 16px; font-size: 17px; }

.invite-avatar { width: 56px; height: 56px; font-size: 22px; }

/* ── Clubs ─────────────────────────────────────────────────────────── */

.community-tabs { margin: 18px 0 0; }

.club-row { color: var(--text); }

.club-row:hover .club-name { color: var(--accent-strong); }

.club-name { font-weight: 600; }

.club-row .stat-end { display: flex; align-items: center; gap: 10px; }

.club-row .stat-note { margin: 0; }

.club-leave { margin-top: 14px; }

.role-badge {
    padding: 2px 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    border-radius: 999px;
    color: var(--accent-strong);
    font-size: 11.5px;
    font-weight: 600;
}

.member-actions { display: flex; gap: 14px; }

/* Becoming friends with a member: a small button, or where the two stand, in the friends' yellow. */
.button-small { padding: 5px 13px; font-size: 13px; }

.friend-action form { display: flex; align-items: center; gap: 10px; }

/* An admin's links for a member follow the friend button, set apart by a rule. */
.friend-action + .member-actions { margin-left: 0; padding-left: 14px; border-left: 1px solid var(--border); }

#members-card .stat-row { flex-wrap: wrap; row-gap: 6px; }

#members-card .friend-name { white-space: nowrap; }

.friend-badge {
    padding: 2px 9px;
    border: 1px solid rgba(var(--friend-rgb), 0.45);
    border-radius: 999px;
    color: var(--friend);
    font-size: 12px;
    font-weight: 600;
}

.friend-requested {
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

/* The friend requests to answer, at the top of the friends page. */
.request-row .stat-note { margin: 2px 0 0; }

.request-row .stat-end form { display: flex; }

/* The count of friend requests to answer, on the Community tab. */
.nav-badge {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--friend);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.club-create { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.club-create input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--background);
    color: var(--text);
    font: inherit;
}

.back-link { display: inline-block; margin-bottom: 8px; color: var(--text-muted); font-size: 14px; }

/* ── Insights ──────────────────────────────────────────────────────── */

/* The totals span the width in equal parts. */
#insight-totals .stat-chips { display: grid; grid-template-columns: repeat(6, 1fr); }

#insight-totals .stat-chip { text-align: center; }

/* Three columns: the histogram across two with the decades and the thumbs beside it, then the
   favourites and the genres abreast, each row's cards as tall as its tallest. */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.insights-ratings { grid-column: span 2; display: flex; flex-direction: column; }

/* Your services across the grid's width, their bars in two columns. */
.insights-services { grid-column: 1 / -1; }

.service-shares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; }

.service-share-row {
    display: grid;
    grid-template-columns: minmax(0, 170px) 1fr 84px;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.service-share-name { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.service-share-name img { width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; }

.service-share-row .bar-value { text-align: right; color: var(--text-muted); }

.service-shares-note { margin: 14px 0 0; }

.insights-ratings .histogram { flex: 1; min-height: 180px; }

.insights-side { display: flex; flex-direction: column; gap: 22px; }

.insights-side .stat-card { flex: 1; }

/* The standouts fill the width, six abreast, rather than scroll. */
.highlight-grid { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }

/* The ratings histogram: half-point bars, the usual range as a band behind them, the bell curve over them. */
.histogram { position: relative; height: 180px; margin-top: 8px; }

.histogram-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; }

.histogram-bin { flex: 1; height: 100%; display: flex; align-items: flex-end; padding: 0 2px; }

.histogram-bar {
    width: 100%;
    min-height: 1px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.42), rgba(var(--accent-rgb), 0.2));
}

.histogram-range {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(var(--accent-rgb), 0.10);
    border-left: 1px dashed rgba(var(--accent-rgb), 0.5);
    border-right: 1px dashed rgba(var(--accent-rgb), 0.5);
}

.histogram-curve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.histogram-curve polyline { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0.6; }

.histogram-ticks { position: relative; height: 22px; margin-top: 6px; border-top: 1px solid var(--border); }

.histogram-ticks span {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.highlight-label {
    color: var(--gold);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.thumbs-verdict { margin: 14px 0 0; }

/* A genre's name is longer than a decade's. */
.genre-bar-row { grid-template-columns: 104px 1fr 40px; }

.genre-bar-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Responsive ────────────────────────────────────────────────────── */

/* Narrow desktops: the page links tighten, so the navbar stays one row. */
@media (max-width: 1380px) {
    .navbar-inner { gap: 16px; }
    .nav-links a { padding: 7px 9px; font-size: 14px; }
}

/* Tablets: the page links scroll in their own strip rather than widen the page. The totals go in
   three, the histogram across the width, the cards in pairs, and the genres across the width. */
@media (max-width: 1024px) {
    .nav-links { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links a { white-space: nowrap; }
}

@media (max-width: 960px) {
    #insight-totals .stat-chips { grid-template-columns: repeat(3, 1fr); }
    .insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .insights-side { grid-column: span 2; flex-direction: row; }
    .insights-genres { grid-column: span 2; }
    .highlight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .navbar .search-box { width: 200px; }
    .nav-links a { padding: 7px 9px; font-size: 13.5px; }
    .hero-content, .movie-hero-content { flex-direction: column; align-items: flex-start; gap: 26px; }
    .hero-poster, .movie-hero-poster { width: 180px; }
    .hero-title, .movie-title { font-size: 32px; }
}

/* Phones: the navbar takes two rows, the logo with the page links and then the search box at
   full width, so its suggestions have room. Side-by-side layouts stack, and rows drop what does
   not fit rather than overflow the screen. */
@media (max-width: 640px) {
    /* Phones: the seen page's actions in one row, the catch-up button by its short name. */
    .label-more { display: none; }

    .container { --gutter: 16px; }

    .navbar-inner {
        flex-wrap: wrap;
        height: auto;
        gap: 6px 10px;
        padding-top: 8px;
        padding-bottom: 10px;
    }
    .nav-links {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links a { padding: 7px 10px; white-space: nowrap; }
    .navbar .search-box { flex-basis: 100%; width: auto; margin-left: 0; order: 1; }
    .navbar .search-suggestions { left: 0; right: 0; width: auto; }
    .search-box input { font-size: 16px; }  /* below 16px, iOS zooms the page in on focus */

    /* The hero on a phone: the poster, the title and the genres, with a Trailer button, lie on the
       backdrop, or on the trailer playing behind it, blurred; the description and the buttons follow
       below, on the page. The band ends where they begin (--band, measured by the script). */
    .hero-content, .movie-hero-content {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 0 16px;
        align-items: stretch;
        padding-top: 28px;
    }
    .hero-main { display: contents; }
    .hero-poster, .movie-hero-poster { width: auto; grid-column: 1; grid-row: 1; }
    /* The head spans the poster's height: the title level with its top, the Trailer button with its bottom. */
    .hero-head { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; }
    .hero-head .trailer-overlay { margin-top: auto; }
    .hero-head .hero-eyebrow { font-size: 11px; letter-spacing: 1.4px; margin-bottom: 6px; }
    .hero-head .hero-title, .hero-head .movie-title { font-size: 24px; margin: 0 0 6px; }
    .hero-head .movie-directors { margin: -2px 0 6px; font-size: 13.5px; line-height: 1.4; }
    .hero-head .hero-meta, .hero-head .movie-meta { gap: 10px; margin-bottom: 10px; font-size: 13.5px; }
    .hero-head .meta-rating, .hero-head .meta-original { display: none; }
    .hero-head :is(.hero-meta, .movie-meta) > span:not(.meta-rating) ~ span::before { content: "·"; margin-right: 10px; }
    .hero-head .movie-genres { display: none; }
    .hero-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
    .hero-summary .genre-chip { padding: 3px 9px; font-size: 11px; }
    /* No room for the vote count on a phone: the rating says enough. */
    .hero-summary .votes { display: none; }
    .hero-summary .watch-providers { gap: 6px; margin-left: 2px; }
    .hero-summary .watch-provider { width: 26px; height: 26px; border-radius: 7px; }
    .hero-body { grid-column: 1 / -1; grid-row: 2; margin-top: 28px; }
    .movie-hero { background: var(--background); }
    .hero-backdrop, .movie-backdrop, .backdrop-video { inset: 0 0 auto 0; height: var(--band, 320px); transform: none; }
    .hero::before, .movie-hero::before {
        bottom: auto;
        height: var(--band, 320px);
        background: linear-gradient(180deg, rgba(var(--background-rgb), 0.25) 0%, rgba(var(--background-rgb), 0.15) 55%, var(--background) 100%);
    }
    .backdrop-video iframe { filter: blur(4px) brightness(0.55) saturate(1.25); }
    .hero-backdrop.backdrop-image, .movie-backdrop.backdrop-image { filter: blur(4px) brightness(0.45) saturate(1.2); }
    /* On the trailer, the button is glass rather than a colour of its own, so the head stays quiet. */
    .trailer-overlay:not([hidden]) {
        --from: 255, 255, 255;
        --to: 190, 196, 210;
        display: inline-flex;
    }
    .hero-body .trailer-button { display: none; }
    /* The buttons wrap on a phone, so the thumbs follow the last of them rather than the far end. */
    .list-buttons .vote-buttons { margin-left: 0; }

    /* The trailer forward on a phone: the band itself, sharp, with Exit trailer floating over its
       corner; the head on it gives way, the body below stays. Playing, the band and its Exit trailer
       hold still at the top of the screen while the page scrolls under them, in portrait; behind the
       hero, blurred, the band scrolls along. */
    .trailer-playing .hero-content, .trailer-playing .movie-hero-content { opacity: 1; pointer-events: auto; }
    .trailer-playing .hero-head, .trailer-playing .hero-poster, .trailer-playing .movie-hero-poster { opacity: 0; pointer-events: none; }
    .trailer-playing:not(.trailer-fullscreen) .backdrop-video { position: fixed; z-index: 40; background: #000; }
    .trailer-controls { position: fixed; top: 12px; right: 12px; z-index: 41; }
    .friend-action + .member-actions { flex-basis: 100%; justify-content: flex-end; padding-left: 0; border-left: 0; }
    .in-common-row { grid-template-columns: minmax(0, 1fr); }
    .in-common-bar { display: none; }

    .hero-content, .movie-hero-content { padding: 28px 16px 32px; }
    .hero-title, .movie-title { font-size: 28px; }
    .page-title { font-size: 28px; }

    .person-header { flex-direction: column; align-items: flex-start; gap: 16px; }

    .section-header { flex-wrap: wrap; gap: 6px 12px; }

    .ranked-row { gap: 12px; padding: 10px 4px; }
    .ranked-row .rank-number { width: 22px; font-size: 15px; }
    .ranked-title { font-size: 14.5px; }
    .ranked-end .votes { display: none; }

    #catalogue-totals .stat-chips, #insight-totals .stat-chips { display: grid; grid-template-columns: 1fr 1fr; }
    .signin-providers { grid-template-columns: 1fr; }
    .friends-grid { grid-template-columns: minmax(0, 1fr); }
    /* Three posters a row: more to tap through per screen. */
    .catch-up.movie-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .catch-up .movie-card-title { font-size: 12px; }
    .catch-up .movie-card-year { font-size: 11px; }
    .catch-up .poster .seen-tag { left: 4px; bottom: 4px; padding: 1px 6px; font-size: 10.5px; }
    .catch-up-toolbar { top: 106px; }
    /* Phones: one column, and the standouts scroll sideways again. */
    .insights-grid { grid-template-columns: minmax(0, 1fr); }
    .service-shares { grid-template-columns: minmax(0, 1fr); }
    .service-share-row { grid-template-columns: minmax(0, 130px) 1fr 72px; }
    .insights-ratings, .insights-side, .insights-genres { grid-column: auto; }
    .insights-side { flex-direction: column; }
    .highlight-grid { grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; }
}

/* ── The spectrum ──────────────────────────────────────────────────── */

/* The neon colors take turns, so the pages look sprayed rather than printed: each in its own
   --tone, by the place of the section, the chip or the card. The tags and the stars keep their
   own colors, which mean something. */
:is(.section:nth-of-type(6n + 1), .genre-chip:nth-child(6n + 1), .stat-card:nth-child(6n + 1), .stat-chip:nth-child(6n + 1), .movie-card:nth-child(6n + 1)) { --tone: var(--accent-rgb); }
:is(.section:nth-of-type(6n + 2), .genre-chip:nth-child(6n + 2), .stat-card:nth-child(6n + 2), .stat-chip:nth-child(6n + 2), .movie-card:nth-child(6n + 2)) { --tone: var(--green-rgb); }
:is(.section:nth-of-type(6n + 3), .genre-chip:nth-child(6n + 3), .stat-card:nth-child(6n + 3), .stat-chip:nth-child(6n + 3), .movie-card:nth-child(6n + 3)) { --tone: var(--cyan-rgb); }
:is(.section:nth-of-type(6n + 4), .genre-chip:nth-child(6n + 4), .stat-card:nth-child(6n + 4), .stat-chip:nth-child(6n + 4), .movie-card:nth-child(6n + 4)) { --tone: var(--orange-rgb); }
:is(.section:nth-of-type(6n + 5), .genre-chip:nth-child(6n + 5), .stat-card:nth-child(6n + 5), .stat-chip:nth-child(6n + 5), .movie-card:nth-child(6n + 5)) { --tone: var(--violet-rgb); }
:is(.section:nth-of-type(6n + 6), .genre-chip:nth-child(6n + 6), .stat-card:nth-child(6n + 6), .stat-chip:nth-child(6n + 6), .movie-card:nth-child(6n + 6)) { --tone: var(--yellow-rgb); }

.section .section-title::before { background: linear-gradient(180deg, rgb(var(--tone, var(--accent-rgb))), var(--violet)); box-shadow: 0 0 10px rgba(var(--tone, var(--accent-rgb)), 0.7); }

.genre-chip { border-color: rgba(var(--tone, var(--accent-rgb)), 0.22); }
.genre-chip:hover, .genre-chip.active { border-color: rgba(var(--tone, var(--accent-rgb)), 0.8); background: rgba(var(--tone, var(--accent-rgb)), 0.1); }

.stat-card::before { height: 2px; background: linear-gradient(90deg, transparent, rgb(var(--tone, var(--accent-rgb))), transparent); }

.stat-chip .value { color: rgb(var(--tone, var(--accent-rgb))); text-shadow: 0 0 14px rgba(var(--tone, var(--accent-rgb)), 0.45); }

/* A bar is pink, softened, so a chart reads as data rather than as a light. */
.bar-fill { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.42)); }

.movie-card:hover .poster { box-shadow: 0 0 0 2px rgb(var(--tone, var(--accent-rgb))), 0 12px 30px rgba(var(--tone, var(--accent-rgb)), 0.3); }

.nav-links a:hover { color: var(--green); }

/* The page titles white, like the section titles, with a hot bar, pink into orange, to their left. */
.page-title {
    display: flex;
    align-items: center;
    text-shadow: none;
}

.page-title::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 0.8em;
    margin-right: 14px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--accent), var(--orange));
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7);
}

/* The trailer in neon green into cyan beside the pink buttons. */
.list-buttons .trailer-button.button-primary { --from: var(--green-rgb); --to: var(--cyan-rgb); }

/* The top three ranks each in a color of their own. */
#top-movies-list .ranked-row:nth-child(1) .rank-number { color: var(--accent); }
#top-movies-list .ranked-row:nth-child(2) .rank-number { color: var(--green); }
#top-movies-list .ranked-row:nth-child(3) .rank-number { color: var(--cyan); }

/* ── Glass ─────────────────────────────────────────────────────────── */

/* Panels are frosted glass over the sprayed glows: they blur what is behind them, tinted from their
   own tone into violet, with a light edge on top. The error notice keeps its red. */
:is(.stat-card, .stat-chip, .empty-state, .notice:not(.notice-error), .import-panel, .share-menu, .search-suggestions) {
    background:
        linear-gradient(135deg, rgba(var(--tone, var(--accent-rgb)), 0.14), rgba(var(--violet-rgb), 0.05)),
        rgba(22, 20, 29, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
}

/* The statistics and insights pages are for reading numbers: their panels are barely tinted, the
   lines on top fainter, and the totals keep their colors without the glow. */
.data-page :is(.stat-card, .stat-chip) {
    background:
        linear-gradient(135deg, rgba(var(--tone, var(--accent-rgb)), 0.03), rgba(var(--violet-rgb), 0.015)),
        rgba(22, 20, 29, 0.6);
}

.data-page .stat-card::before { opacity: 0.3; }

/* The totals in their color, half of it, mixed into the text color. */
.data-page .stat-chip .value { color: color-mix(in srgb, rgb(var(--tone, var(--accent-rgb))) 55%, var(--text)); text-shadow: none; }

/* The search suggestions hang from the navbar over whatever the page shows: near-solid, so a list
   reads over anything, with the same tint (scoped to the search box, to outweigh the panel rule above). */
.search-box .search-suggestions {
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--violet-rgb), 0.04)),
        rgba(22, 20, 29, 0.92);
}

/* A fine grain over everything, as on a printed poster. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url%28%23n%29'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: overlay;
}

/* ── Poster glows ──────────────────────────────────────────────────── */

/* Behind each poster, a blurred copy of it (--poster, set by the script once it loads) lights the
   page in the poster's own colors, so every poster brings its own neon rather than fight the theme. */
.movie-card, .hero-poster, .movie-hero-poster { position: relative; isolation: isolate; }

.movie-card::before, .hero-poster::before, .movie-hero-poster::before {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--poster) center / cover no-repeat;
    border-radius: var(--radius);
    /* Dimmed, so a mostly white poster glows a soft gray rather than a bright haze; colors keep their hue. */
    filter: blur(26px) saturate(1.8) brightness(0.6);
    opacity: 0;
    transform: translateY(14px) scale(1.04);
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.movie-card::before { top: 4%; left: 6%; width: 88%; aspect-ratio: 2 / 3; }

.hero-poster::before, .movie-hero-poster::before { inset: 4% 6%; filter: blur(34px) saturate(1.7) brightness(0.6); }

.poster-glow::before { opacity: 0.7; }

.movie-card:hover::before { opacity: 0.95; }

/* The poster's edge in glass: a fine light line, brighter along the top. */
.poster::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

/* Under the mouse (see setupPosterTilt): the poster tilts toward the cursor, a light follows the
   cursor over it, and the glow behind moves the other way. Not on touch screens, nor for visitors
   who ask for less motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .poster-glow .poster {
        transform: perspective(800px) rotateX(calc(var(--tilt-y, 0) * -7deg)) rotateY(calc(var(--tilt-x, 0) * 7deg));
        transition: transform 0.3s ease-out, box-shadow 0.25s ease;
    }

    .poster-glow::before {
        translate: calc(var(--tilt-x, 0) * -18px) calc(var(--tilt-y, 0) * -18px);
        transition: translate 0.3s ease-out, opacity 0.6s ease;
    }

    .poster-glow .poster::after {
        background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 0%), rgba(255, 255, 255, var(--shine, 0)), transparent 55%);
        transition: background 0.2s ease;
    }
}

/* ── Year in movies ────────────────────────────────────────────────── */

/* The year across the top: the year's posters drift behind it, tilted and dimmed, under a fade
   into the page; the year itself in the poster face, as large as the screen allows. */
.wrapped-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }

.wrapped-posters { position: absolute; inset: -40px -10%; transform: rotate(-6deg); opacity: 0.32; pointer-events: none; }

.wrapped-poster-strip { display: flex; gap: 14px; width: max-content; padding-top: 30px; animation: poster-drift 90s linear infinite; }

.wrapped-poster-strip .poster { width: 150px; flex-shrink: 0; }

@keyframes poster-drift {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .wrapped-poster-strip { animation: none; }
}

.wrapped-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(var(--background-rgb), 0.92) 0%, rgba(var(--background-rgb), 0.55) 60%, rgba(var(--background-rgb), 0.3)),
        linear-gradient(180deg, transparent 40%, rgba(var(--background-rgb), 0.96));
}

.wrapped-hero-content { position: relative; z-index: 1; padding-top: 34px; padding-bottom: 38px; }

.wrapped-eyebrow {
    margin: 6px 0 0;
    color: var(--green);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.wrapped-year {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(96px, 18vw, 188px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 2px;
    background: linear-gradient(100deg, var(--accent) 10%, var(--orange) 55%, var(--yellow));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 28px rgba(var(--accent-rgb), 0.35));
}

.wrapped-lede { margin: 8px 0 22px; max-width: 620px; font-size: 19px; color: var(--text); }

.wrapped-lede strong { color: var(--accent-strong); }

.wrapped-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

.wrapped-actions .view-tabs { margin: 0; }

.wrapped-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.wrapped-from { margin: 0; color: var(--text-muted); font-size: 14.5px; }

.wrapped-from a { color: var(--accent-strong); }

/* The year's totals: four big numbers, each in its own neon. */
.wrapped-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.wrapped-number {
    position: relative;
    padding: 20px 22px 18px;
    border: 1px solid rgba(var(--tone), 0.35);
    border-radius: var(--radius);
    background: linear-gradient(150deg, rgba(var(--tone), 0.14), rgba(var(--tone), 0.02) 70%) var(--surface);
    animation: fade-up 0.35s ease backwards;
}

.wrapped-number:nth-child(1) { --tone: var(--accent-rgb); }
.wrapped-number:nth-child(2) { --tone: var(--cyan-rgb); animation-delay: 0.06s; }
.wrapped-number:nth-child(3) { --tone: var(--green-rgb); animation-delay: 0.12s; }
.wrapped-number:nth-child(4) { --tone: var(--yellow-rgb); animation-delay: 0.18s; }

.wrapped-number .value {
    font-family: var(--font-display);
    font-size: 54px;
    line-height: 1.05;
    color: rgb(var(--tone));
    text-shadow: 0 0 22px rgba(var(--tone), 0.45);
    font-variant-numeric: tabular-nums;
}

.wrapped-number .label { color: var(--text-muted); font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; }

/* The months across two columns with the facts beside them; then the genres, the people and the
   places abreast. */
.wrapped-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }

/* The months and the facts beside them are as tall as each other; the cards under them as tall as their content. */
.wrapped-months { grid-column: span 2; align-self: stretch; display: flex; flex-direction: column; }

.month-chart { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; min-height: 200px; align-items: end; }

.month-column { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }

.month-bar {
    width: 100%;
    max-width: 38px;
    min-height: 4px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--accent-strong), rgba(var(--violet-rgb), 0.55));
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
    transform-origin: bottom;
    animation: month-grow 0.7s ease-out backwards;
}

.month-bar.empty { background: var(--surface-raised); box-shadow: none; }

@keyframes month-grow {
    from { transform: scaleY(0); }
}

.month-count { color: var(--text); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 18px; }

.month-name { color: var(--text-muted); font-size: 12px; }

.wrapped-facts { align-self: stretch; display: flex; flex-direction: column; gap: 22px; }

.wrapped-fact { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.fact-label { color: var(--text-muted); font-size: 12.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; }

.fact-value { font-family: var(--font-display); font-size: 42px; line-height: 1.1; color: rgb(var(--tone, var(--accent-rgb))); text-shadow: 0 0 18px rgba(var(--tone, var(--accent-rgb)), 0.4); }

.fact-detail { color: var(--text-muted); font-size: 14px; }

.wrapped-subheading { margin-top: 18px; }

/* The countries and the languages as tags: the flag, the name, and how many movies. */
.place-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.place-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 13.5px;
}

.place-flag { font-size: 17px; line-height: 1; }

.place-count { color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* The year beside the friends': a row each, the visitor's own lit up. */
.year-ranks { max-width: 760px; }

.year-rank {
    display: grid;
    grid-template-columns: 28px minmax(0, 200px) 1fr 48px;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.year-rank:last-child { border-bottom: none; }

.year-rank .rank-number { color: var(--text-muted); font-weight: 700; font-variant-numeric: tabular-nums; }

.year-rank .bar-value { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.year-rank.you .friend-name { color: var(--green); font-weight: 600; }

.year-rank.you .bar-fill { background: linear-gradient(90deg, rgba(var(--green-rgb), 0.3), rgba(var(--green-rgb), 0.6)); }

/* The way from About You to the year. */
.wrapped-link { --from: var(--accent-rgb); --to: var(--yellow-rgb); }

@media (max-width: 960px) {
    .wrapped-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wrapped-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wrapped-months { grid-column: 1 / -1; }
    .wrapped-facts { flex-direction: row; grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .wrapped-hero-content { padding-top: 22px; padding-bottom: 26px; }
    .wrapped-lede { font-size: 16.5px; }
    .wrapped-posters .poster { width: 110px; }
    .wrapped-numbers { gap: 10px; }
    .wrapped-number { padding: 14px 14px 12px; }
    .wrapped-number .value { font-size: 38px; }
    .wrapped-number .label { font-size: 11.5px; }
    .wrapped-grid { grid-template-columns: minmax(0, 1fr); }
    .wrapped-facts { flex-direction: column; }
    .month-chart { gap: 4px; min-height: 160px; }
    .month-name { font-size: 10.5px; }
    .month-count { font-size: 10px; }
    .year-rank { grid-template-columns: 22px minmax(0, 1fr) 70px 36px; gap: 10px; }
    .wrapped-actions .view-tabs { max-width: 100%; overflow-x: auto; }
}

/* ── Play ──────────────────────────────────────────────────────────── */

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 22px; }

/* A game is a big card: its art, its name in the poster face, a line on how it goes, and the way in. */
.game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 24px 22px;
    border: 1px solid rgba(var(--tone), 0.35);
    border-radius: 18px;
    background: radial-gradient(420px 220px at 90% 0%, rgba(var(--tone), 0.22), transparent 70%), var(--surface);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.game-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(var(--tone), 0.22); }

.game-title { font-family: var(--font-display); font-size: 34px; letter-spacing: 1px; text-transform: uppercase; line-height: 1.1; }

.game-text { color: var(--text-muted); font-size: 15px; max-width: 460px; }

.game-button { margin-top: 8px; }

/* A card's art drawn in line, in the card's tone, with its glow. */
.game-art-line .art-svg { height: 52px; width: auto; fill: none; stroke: rgb(var(--tone)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: rgb(var(--tone)); filter: drop-shadow(0 0 10px rgba(var(--tone), 0.5)); }
/* Total Recall: the cast as a row of heads, named one after another, each filling with the card's colour as it is,
   on a beat of its own (--i); the last never is, the one bid too many. The bid sits above them. */
.game-art-recall .art-svg { height: 52px; width: auto; fill: none; stroke: rgba(var(--tone), 0.55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(var(--tone), 0.4)); }
.recall-head { animation: recall-name 6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.45s); }
.recall-head-last { animation: none; stroke-dasharray: 3 3; }
.recall-bid rect { stroke: rgb(var(--tone)); fill: var(--surface); }
.recall-bid text { fill: rgb(var(--tone)); stroke: none; font-size: 8.5px; font-weight: 700; letter-spacing: 0.3px; font-family: inherit; }
@keyframes recall-name { 0%, 12% { fill: none; stroke: rgba(var(--tone), 0.55); } 22%, 75% { fill: rgb(var(--tone)); stroke: rgb(var(--tone)); } 88%, 100% { fill: none; stroke: rgba(var(--tone), 0.55); } }
@media (prefers-reduced-motion: reduce) { .recall-head { animation: none; fill: rgb(var(--tone)); stroke: rgb(var(--tone)); } .recall-head-last { fill: none; } }
/* Every card's art stands the same height, so every title starts at the same line. */
.game-art { display: flex; align-items: center; height: 56px; margin-bottom: 0; }

.game-dot { width: 22px; height: 22px; border-radius: 50%; background: rgb(var(--tone)); box-shadow: 0 0 16px rgba(var(--tone), 0.8); }

.game-line { width: 46px; height: 3px; background: linear-gradient(90deg, rgb(var(--tone)), rgba(var(--violet-rgb), 0.9)); }

/* ── The links of a chain ──────────────────────────────────────────── */

.chain-movie::before {
    content: "";
    width: 34px;
    height: 3px;
    margin: 0 8px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--cyan-rgb), 0.9), rgba(var(--violet-rgb), 0.9));
    box-shadow: 0 0 10px rgba(var(--cyan-rgb), 0.5);
}

.chain-movie a { display: flex; flex-direction: column; align-items: center; width: 104px; text-align: center; }

.chain-movie .poster { width: 78px; margin-bottom: 6px; }

.chain-movie-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; }

.chain-movie-year { color: var(--text-muted); font-size: 12px; }

@media (max-width: 640px) {
    .game-title { font-size: 28px; }
}

/* A picker suggests one kind only, so the suggestions go without their kind's tag. */
.picker .suggestion-type { display: none; }

/* ── Lists ─────────────────────────────────────────────────────────── */

.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 22px; }

/* A list's card: its latest posters fanned out like a hand of cards, its name and its count. */
.list-card { position: relative; display: flex; flex-direction: column; gap: 4px; animation: fade-up 0.2s ease backwards; }
/* What waits for the visitor's say on a list of theirs, on its card. */
.list-card-badge { position: absolute; top: 6px; right: 6px; z-index: 4; padding: 3px 9px; border-radius: 999px; background: var(--friend); color: var(--on-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.3px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }

.list-posters {
    position: relative;
    height: 190px;
    margin-bottom: 8px;
    border-radius: var(--radius);
    background: radial-gradient(260px 160px at 50% 100%, rgba(var(--tone, var(--accent-rgb)), 0.18), transparent 70%), var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}

.list-poster {
    position: absolute;
    bottom: -14px;
    left: 50%;
    width: 96px;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-raised);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    transform-origin: 50% 120%;
    transition: transform 0.25s ease;
}

.list-poster img { width: 100%; height: 100%; object-fit: cover; }

.list-poster img.failed { visibility: hidden; }

/* The latest in front, the others fanned behind it. */
.list-poster:nth-child(1) { z-index: 4; transform: translateX(-50%) rotate(0deg); }
.list-poster:nth-child(2) { z-index: 3; transform: translateX(-50%) rotate(-9deg) translateX(-34px); }
.list-poster:nth-child(3) { z-index: 2; transform: translateX(-50%) rotate(9deg) translateX(34px); }
.list-poster:nth-child(4) { z-index: 1; transform: translateX(-50%) rotate(-17deg) translateX(-64px); }

.list-card:hover .list-poster:nth-child(2) { transform: translateX(-50%) rotate(-13deg) translateX(-44px); }
.list-card:hover .list-poster:nth-child(3) { transform: translateX(-50%) rotate(13deg) translateX(44px); }
.list-card:hover .list-poster:nth-child(4) { transform: translateX(-50%) rotate(-22deg) translateX(-78px); }

.list-card:nth-child(6n + 1) { --tone: var(--accent-rgb); }
.list-card:nth-child(6n + 2) { --tone: var(--cyan-rgb); }
.list-card:nth-child(6n + 3) { --tone: var(--green-rgb); }
.list-card:nth-child(6n + 4) { --tone: var(--orange-rgb); }
.list-card:nth-child(6n + 5) { --tone: var(--violet-rgb); }
.list-card:nth-child(6n + 6) { --tone: var(--yellow-rgb); }

.list-card-name { font-weight: 600; font-size: 15.5px; line-height: 1.3; }

.list-card:hover .list-card-name { color: rgb(var(--tone, var(--accent-rgb))); }

.list-card-meta { color: var(--text-muted); font-size: 13px; }

/* A list's page: whose it is, what it is about, the box to add a movie, and its movies with an × each. */
.list-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.list-byline .nav-account-icon { width: 24px; height: 24px; font-size: 11px; }

.list-description { margin: 10px 0 0; max-width: 680px; color: var(--text); font-size: 15px; }

.list-add { max-width: 520px; }
.list-propose-note { margin: 10px 0 0; }
.list-visibility { display: inline-flex; align-items: center; gap: 8px; }
.list-visibility label { display: inline-flex; align-items: center; gap: 6px; }
.list-visibility .country-select { padding: 4px 28px 4px 10px; font-size: 13.5px; }
/* The owner's desk: each proposal a poster with how many ask for it and the two ways to decide. */
.proposal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.proposal { display: flex; gap: 14px; align-items: flex-start; }
.proposal .movie-card { width: 96px; flex: none; }
.proposal-body { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.proposal-votes { color: var(--text-muted); font-size: 13.5px; }
.proposal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.proposal-rejected .movie-card { opacity: 0.6; }

.list-item { position: relative; }

.list-item:hover .dismiss-button, .list-item .dismiss-button:focus-visible { opacity: 1; }

/* The forms that make and edit a list: a label over each field. */
.list-form { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }

.list-form h2 { margin-bottom: 0; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text-muted); }

.field input, .field textarea, .field select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-size: 15px;
}

.field textarea { resize: vertical; }

.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.7); }

/* ── Movie nights ──────────────────────────────────────────────────── */

.night-form { max-width: 820px; display: flex; flex-direction: column; gap: 14px; }

.night-form-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 14px; }

.night-form .choice-heading { margin-top: 6px; margin-bottom: 0; }

.night-form .choice-grid { margin-bottom: 0; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.field input[type="date"] { color-scheme: dark; }

.night-place { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }

.night-place-who { color: var(--text-muted); font-size: 11.5px; }

/* Home or the cinema: two big tiles, and at the cinema the services step aside. */
.night-where-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.night-where-tile { padding: 14px 16px; }

.night-where-icon { font-size: 28px; line-height: 1; }

.night-where-tile .night-place > span:first-child { font-size: 15px; font-weight: 600; }

.night-form:has(input[name="where"][value="cinema"]:checked) .night-services { display: none; }

.night-services { display: flex; flex-direction: column; gap: 10px; }

.choice-tile.night-cinema:has(input:checked) { border-color: rgba(var(--yellow-rgb), 0.75); background: rgba(var(--yellow-rgb), 0.1); }

/* A night's page: the day above the name, and where it is watched as chips. */
.night-eyebrow { margin: 4px 0 2px; color: var(--yellow); font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }

.night-where { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }

.night-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 13.5px;
}

.night-chip img { width: 22px; height: 22px; border-radius: 6px; }

.night-host { color: var(--text-muted); font-size: 13.5px; }

.night-chip + .night-host { margin-left: 6px; }

.night-note { display: block; color: var(--text-muted); font-size: 13.5px; }

/* The movie of the night: its poster large in a glow of the spectrum, the title in the poster face. */
.night-winner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 26px;
    border: 1px solid rgba(var(--yellow-rgb), 0.4);
    border-radius: 18px;
    background: radial-gradient(520px 260px at 0% 50%, rgba(var(--yellow-rgb), 0.16), transparent 70%),
                radial-gradient(520px 260px at 100% 0%, rgba(var(--accent-rgb), 0.14), transparent 70%), var(--surface);
    overflow: hidden;
    animation: fade-up 0.35s ease backwards;
}

.night-winner-poster { width: 170px; flex-shrink: 0; }

.night-winner-poster .poster { box-shadow: 0 0 0 2px rgba(var(--yellow-rgb), 0.7), 0 16px 40px rgba(var(--yellow-rgb), 0.25); }

.night-winner-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 48px; font-weight: 400; line-height: 1.05; letter-spacing: 0.5px; }

.night-winner-detail { margin: 0 0 18px; color: var(--text-muted); font-size: 15px; }

/* The ballot: the candidates' posters, each with why it was picked, its votes as a bar with the voters,
   and the vote button; the visitor's own lit up, and once decided the others dimmed. */
.night-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }

.night-candidate { display: flex; flex-direction: column; gap: 8px; }

.night-candidate.my-vote .poster { box-shadow: 0 0 0 2px var(--green), 0 12px 30px rgba(var(--green-rgb), 0.3); }

.night-candidate.lost { opacity: 0.45; }

.night-reason { color: var(--text-muted); font-size: 12.5px; line-height: 1.4; margin-top: -4px; }

.night-votes { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }

.night-votes .bar-track { height: 8px; }

.night-voters { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }

.nav-account-icon.night-voter { width: 22px; height: 22px; font-size: 10px; }

.night-vote { align-self: flex-start; }

.night-actions { margin-top: 24px; }

/* A club's nights on its page: a card each, the movie's poster once picked, else a ballot box. */
.night-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.night-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.night-card:hover { border-color: rgba(var(--yellow-rgb), 0.6); transform: translateY(-2px); }

.night-card-poster {
    width: 52px;
    aspect-ratio: 2 / 3;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-raised);
}

.night-card-poster > span { font-size: 22px; }

.night-card-poster img { width: 100%; height: 100%; object-fit: cover; }

.night-card-text { display: flex; flex-direction: column; min-width: 0; }

.night-card-day { color: var(--yellow); font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }

.night-card-title { font-weight: 600; }

/* The way to plan the first night, as a card that asks to be tapped. */
.night-invite {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 640px;
    padding: 18px 22px;
    border: 1px dashed rgba(var(--yellow-rgb), 0.5);
    border-radius: var(--radius);
    background: rgba(var(--yellow-rgb), 0.05);
    transition: background 0.15s ease;
}

.night-invite:hover { background: rgba(var(--yellow-rgb), 0.1); }

.night-invite-icon { font-size: 34px; }

@media (max-width: 1024px) {
    .night-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .night-form-row { grid-template-columns: minmax(0, 1fr); }
    .night-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .night-winner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 18px; }
    .night-winner-poster { width: 140px; }
    .night-winner-title { font-size: 36px; }
}

/* ── Daily quiz ────────────────────────────────────────────────────── */

/* The quiz in the site's own look: the neon spectrum, line icons drawn in the text's colour, and
   glass chips; a hit lights up in cyan, the colour of what the visitor has seen, a miss in pink. */
.game-quiz { --tone: var(--yellow-rgb); }

/* The quiz's card shows six guesses as pips, lighting up one by one. */
.game-art-quiz { gap: 8px; }

.game-art-quiz span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(var(--tone), 0.5);
    animation: quiz-pip-light 3.6s ease-in-out infinite;
}

.game-art-quiz span:nth-child(2) { animation-delay: 0.3s; }
.game-art-quiz span:nth-child(3) { animation-delay: 0.6s; }
.game-art-quiz span:nth-child(4) { animation-delay: 0.9s; }
.game-art-quiz span:nth-child(5) { animation-delay: 1.2s; }
.game-art-quiz span:nth-child(6) { animation-delay: 1.5s; }

@keyframes quiz-pip-light {
    0%, 30%, 100% { background: transparent; box-shadow: none; }
    40%, 70% { background: rgb(var(--tone)); box-shadow: 0 0 12px rgba(var(--tone), 0.8); }
}

/* The clues' icons, drawn as masks in their clue's tone (.quiz-clue-icon). */
.clue-released::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.clue-made::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E"); }
.clue-director::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='2'/%3E%3Cpath d='M3 9l2.5-5 15 3.5L21 9M8.5 4.7L7 8.5M14 6l-1.5 3.5'/%3E%3C/svg%3E"); }
.clue-cast::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.clue-lead::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E"); }
.clue-unknown::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6M12 17.5h.01'/%3E%3C/svg%3E"); }

.quiz-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

.quiz-title-row .page-title { margin-bottom: 6px; }

.quiz-number { margin-left: 0.25em; color: var(--accent-strong); }

.quiz-streak {
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid rgba(var(--orange-rgb), 0.55);
    background: rgba(var(--orange-rgb), 0.1);
    color: var(--orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.quiz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }

.quiz-layout:not(:has(.quiz-boards)) { grid-template-columns: minmax(0, 760px); }

.quiz-stage { padding: 24px; }

/* The guesses as pips: cyan the hit, pink a miss, violet a skip, an empty ring what is left. */
.quiz-pips { display: flex; gap: 8px; margin-bottom: 20px; }

.quiz-pip { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); }
.quiz-pip.hit { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(var(--cyan-rgb), 0.7); }
.quiz-pip.miss { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5); }
.quiz-pip.skip { background: rgba(var(--violet-rgb), 0.55); border-color: rgba(var(--violet-rgb), 0.8); }

.quiz-clues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* A clue is a row of glass with its icon in its own neon, by its place, as the spectrum takes turns. */
.quiz-clue {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid rgba(var(--tone), 0.3);
    background: linear-gradient(120deg, rgba(var(--tone), 0.08), transparent 60%) rgba(255, 255, 255, 0.02);
}

.quiz-clue:nth-child(1) { --tone: var(--accent-rgb); }
.quiz-clue:nth-child(2) { --tone: var(--cyan-rgb); }
.quiz-clue:nth-child(3) { --tone: var(--green-rgb); }
.quiz-clue:nth-child(4) { --tone: var(--orange-rgb); }
.quiz-clue:nth-child(5) { --tone: var(--violet-rgb); }
.quiz-clue:nth-child(6) { --tone: var(--yellow-rgb); }

.quiz-clue.newest { animation: quiz-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; border-color: rgba(var(--tone), 0.75); box-shadow: 0 0 22px rgba(var(--tone), 0.15); }

@keyframes quiz-pop {
    from { transform: scale(0.9); opacity: 0; }
}

.quiz-clue.hidden { background: none; border: 1px dashed var(--border); }

.quiz-clue-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--tone), 0.12);
    color: rgb(var(--tone));
}

.quiz-clue-icon::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.quiz-clue.hidden .quiz-clue-icon { background: var(--surface-raised); color: var(--text-muted); }

.quiz-clue-body { display: flex; flex-direction: column; min-width: 0; }

.quiz-clue-label { color: rgb(var(--tone)); font-size: 12px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; }

.quiz-clue.hidden .quiz-clue-label { color: var(--text-muted); }

.quiz-clue-text { font-size: 17px; font-weight: 600; }

.quiz-guess { display: flex; gap: 10px; margin-top: 20px; }

.quiz-guess form:first-child { flex: 1; min-width: 0; }

.quiz-picker input { padding-top: 13px; padding-bottom: 13px; font-size: 16px; }

.quiz-skip { padding: 12px 22px; }

/* The guesses so far, as glass chips: a miss edged in pink, the hit in cyan, a skip faint. */
.quiz-guesses { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.quiz-guesses li {
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    font-size: 13.5px;
}

.quiz-guesses li.miss { border-color: rgba(var(--accent-rgb), 0.55); text-decoration: line-through; text-decoration-color: rgba(var(--accent-rgb), 0.7); }
.quiz-guesses li.hit { border-color: rgba(var(--cyan-rgb), 0.7); color: var(--cyan); background: rgba(var(--cyan-rgb), 0.08); }
.quiz-guesses li.skip { color: var(--text-muted); border-style: dashed; }

/* The game over: the movie's poster and title, and for a hit a burst of confetti in the spectrum. */
.quiz-result {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 22px;
    padding: 18px;
    border-radius: var(--radius);
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    background: radial-gradient(420px 220px at 0% 50%, rgba(var(--accent-rgb), 0.12), transparent 70%);
    overflow: hidden;
    animation: quiz-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.quiz-result.won { border-color: rgba(var(--cyan-rgb), 0.55); background: radial-gradient(420px 220px at 0% 50%, rgba(var(--cyan-rgb), 0.14), transparent 70%); }

.quiz-answer { width: 120px; flex-shrink: 0; }

.quiz-verdict { margin: 0; color: var(--accent-strong); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }

.quiz-result.won .quiz-verdict { color: var(--cyan); }

.quiz-result .quiz-answer-title { margin: 4px 0 16px; font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1.05; }

.quiz-tomorrow { color: var(--text-muted); font-size: 13.5px; }

.quiz-confetti { position: absolute; inset: 0; pointer-events: none; }

.quiz-confetti span {
    position: absolute;
    top: -14px;
    width: 7px;
    height: 12px;
    border-radius: 2px;
    background: rgb(var(--tone));
    box-shadow: 0 0 8px rgba(var(--tone), 0.7);
    animation: quiz-fall 2.4s ease-in forwards;
}

@keyframes quiz-fall {
    to { transform: translateY(240px) rotate(600deg); opacity: 0; }
}

.quiz-confetti span:nth-child(1) { left: 4%; animation-delay: 0s; --tone: var(--accent-rgb); }
.quiz-confetti span:nth-child(2) { left: 10%; animation-delay: 0.3s; --tone: var(--cyan-rgb); }
.quiz-confetti span:nth-child(3) { left: 16%; animation-delay: 0.1s; --tone: var(--green-rgb); }
.quiz-confetti span:nth-child(4) { left: 22%; animation-delay: 0.5s; --tone: var(--orange-rgb); }
.quiz-confetti span:nth-child(5) { left: 28%; animation-delay: 0.2s; --tone: var(--violet-rgb); }
.quiz-confetti span:nth-child(6) { left: 34%; animation-delay: 0.6s; --tone: var(--yellow-rgb); }
.quiz-confetti span:nth-child(7) { left: 40%; animation-delay: 0.15s; --tone: var(--accent-rgb); }
.quiz-confetti span:nth-child(8) { left: 46%; animation-delay: 0.45s; --tone: var(--cyan-rgb); }
.quiz-confetti span:nth-child(9) { left: 52%; animation-delay: 0.05s; --tone: var(--green-rgb); }
.quiz-confetti span:nth-child(10) { left: 58%; animation-delay: 0.35s; --tone: var(--orange-rgb); }
.quiz-confetti span:nth-child(11) { left: 64%; animation-delay: 0.25s; --tone: var(--violet-rgb); }
.quiz-confetti span:nth-child(12) { left: 70%; animation-delay: 0.55s; --tone: var(--yellow-rgb); }
.quiz-confetti span:nth-child(13) { left: 76%; animation-delay: 0.1s; --tone: var(--accent-rgb); }
.quiz-confetti span:nth-child(14) { left: 82%; animation-delay: 0.4s; --tone: var(--cyan-rgb); }
.quiz-confetti span:nth-child(15) { left: 88%; animation-delay: 0.2s; --tone: var(--green-rgb); }
.quiz-confetti span:nth-child(16) { left: 94%; animation-delay: 0.5s; --tone: var(--orange-rgb); }
.quiz-confetti span:nth-child(17) { left: 13%; animation-delay: 0.7s; --tone: var(--violet-rgb); }
.quiz-confetti span:nth-child(18) { left: 61%; animation-delay: 0.75s; --tone: var(--yellow-rgb); }

@media (prefers-reduced-motion: reduce) {
    .quiz-confetti { display: none; }
    .game-art-quiz span, .quiz-clue.newest, .quiz-result { animation: none; }
}

/* The clubs' boards beside the game. */
.quiz-boards { display: flex; flex-direction: column; gap: 16px; }

.quiz-board h2 { margin-bottom: 10px; }

.quiz-board-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }

.quiz-board-row:last-child { border-bottom: none; }

.quiz-board-row .nav-account-icon { width: 26px; height: 26px; font-size: 11px; }

.quiz-board-row.you .quiz-board-name { color: var(--cyan); font-weight: 600; }

.quiz-rank { width: 18px; color: var(--text-muted); font-weight: 700; }

.quiz-board-score { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Today's quiz on a club's page: a chip per member who played. */
.quiz-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.quiz-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 14px; border: 1px solid var(--border); }
.quiz-chip.hit { border-color: rgba(var(--cyan-rgb), 0.55); background: rgba(var(--cyan-rgb), 0.07); }
.quiz-chip.hit strong { color: var(--cyan); }
.quiz-chip.miss strong { color: var(--accent-strong); }

@media (max-width: 860px) {
    .quiz-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .quiz-stage { padding: 16px 14px; }
    .quiz-guess { flex-direction: column; }
    .quiz-skip { align-self: flex-start; }
    .quiz-result { flex-direction: column; align-items: flex-start; }
    .quiz-result .quiz-answer-title { font-size: 32px; }
    .quiz-clue-text { font-size: 15.5px; }
}

/* ── Play: the wall, the games, Higher or Lower, Movie Chain ───────── */

/* The Play page's header: a wall of posters, three rows drifting each its own way behind the title. */
.play-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }

.play-wall { position: absolute; inset: -30px -5%; display: flex; flex-direction: column; gap: 12px; transform: rotate(-4deg); opacity: 0.3; pointer-events: none; }

.play-wall-row { display: flex; gap: 12px; width: max-content; animation: poster-drift 120s linear infinite; }

.play-wall-row.row-2 { animation-direction: reverse; animation-duration: 140s; margin-left: -120px; }

.play-wall-row.row-3 { animation-duration: 100s; }

.play-wall-row .poster { width: 104px; flex-shrink: 0; }

.play-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(var(--background-rgb), 0.94), rgba(var(--background-rgb), 0.6) 55%, rgba(var(--background-rgb), 0.35)),
        linear-gradient(180deg, transparent 50%, rgba(var(--background-rgb), 0.95));
}

/* Every hero but the home page's and the movie page's stands the same height, its words set in the middle. */
.play-hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 250px; padding-top: 30px; padding-bottom: 30px; box-sizing: border-box; }
.play-hero-content.page-header-row { flex-direction: row; justify-content: space-between; align-items: center; }
.play-hero-content .page-subtitle { margin-top: 2px; }
/* The tabs of a hero, such as For You's, sit under the words with air between, no wider than their words. */
.play-hero-content .view-tabs { align-self: flex-start; margin: 18px 0 0; }
.play-hero-content .page-title-row { align-self: stretch; }

.play-hero-content .page-subtitle { max-width: 560px; }

@media (prefers-reduced-motion: reduce) {
    .play-wall-row { animation: none; }
}

/* Four games, two abreast. */
@media (min-width: 761px) {
    .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The visitor's games: a row each, the ones waiting on them lit up. */
.game-list { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }

.game-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.game-entry:hover { border-color: rgba(var(--accent-rgb), 0.5); transform: translateX(3px); }

.game-entry.your-move { border-color: rgba(var(--cyan-rgb), 0.55); background: linear-gradient(90deg, rgba(var(--cyan-rgb), 0.08), transparent 60%) var(--surface); }

.game-entry-icon { font-size: 24px; }

.game-entry-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }

.game-entry-title { font-weight: 600; }

.game-entry-with { color: var(--text-muted); font-size: 13px; }

/* A long standing, such as two long titles to join, wraps on its own side and leaves the title its room. */
.game-entry-end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 1 auto; min-width: 0; max-width: 55%; }
.game-entry-since { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.game-entry-status { margin-left: auto; color: var(--text-muted); font-size: 13.5px; text-align: right; overflow-wrap: anywhere; }

.game-entry.your-move .game-entry-status { color: var(--cyan); font-weight: 600; }

/* How a game is started: on one's own, against a friend picked, or a round for a club picked. */
.game-higher-lower { --tone: var(--accent-rgb); }
.game-chain { --tone: var(--green-rgb); }

.game-start { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; width: 100%; }

.game-with { display: flex; gap: 8px; width: 100%; }

.game-with select {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.game-modes { color: var(--text-muted); font-size: 13px; }
/* The title with the level the game opens at beside it. */
.game-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.game-level { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(var(--tone), 0.5); color: rgb(var(--tone)); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

.game-modes a { color: var(--accent-strong); }

/* The cards' art: two posters, one rated and one to call; three posters chained. */
.game-art-cards { gap: 10px; }

.game-art-card {
    width: 34px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 2px solid rgb(var(--tone));
    background: rgba(var(--tone), 0.15);
    font-family: var(--font-display);
    font-size: 13px;
    box-shadow: 0 0 14px rgba(var(--tone), 0.4);
}

.game-art-card.back { border-color: var(--cyan); background: rgba(var(--cyan-rgb), 0.12); box-shadow: 0 0 14px rgba(var(--cyan-rgb), 0.4); animation: game-card-flip 3s ease-in-out infinite; }

@keyframes game-card-flip {
    0%, 60%, 100% { transform: rotateY(0); }
    75% { transform: rotateY(180deg); }
}

.game-art-poster { width: 26px; height: 38px; border-radius: 4px; border: 2px solid rgb(var(--tone)); background: rgba(var(--tone), 0.15); box-shadow: 0 0 12px rgba(var(--tone), 0.45); }

.game-art-chain .game-line { width: 30px; }

/* Higher or Lower: the two posters side by side, the streak large beside the title. */
.hl-streak {
    min-width: 54px;
    padding: 2px 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--cyan-rgb), 0.6);
    background: rgba(var(--cyan-rgb), 0.08);
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 30px;
    text-align: center;
    text-shadow: 0 0 14px rgba(var(--cyan-rgb), 0.5);
}

.hl-stage { display: grid; grid-template-columns: minmax(0, 240px) auto minmax(0, 240px); gap: 28px; align-items: start; justify-content: center; }

.hl-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; animation: fade-up 0.3s ease backwards; }

.hl-next { animation-delay: 0.08s; }

.hl-card .poster { width: 100%; }

.hl-rating {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 38px;
    line-height: 1;
    color: var(--gold);
    text-shadow: 0 0 18px rgba(245, 197, 24, 0.4);
}

.hl-rating .star { font-size: 26px; }

.hl-unknown { color: var(--cyan); text-shadow: 0 0 18px rgba(var(--cyan-rgb), 0.5); }

.hl-title { font-weight: 600; font-size: 15.5px; line-height: 1.3; }

.hl-year { color: var(--text-muted); font-size: 13px; }

.hl-versus { align-self: center; margin-top: -60px; font-family: var(--font-display); font-size: 34px; color: var(--accent-strong); text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.5); }

.hl-buttons { display: flex; gap: 10px; margin-top: 10px; }

.hl-button { padding: 11px 20px; font-size: 15px; }

.hl-result { max-width: 640px; margin: 0 auto 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }

.hl-result .hl-result-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 44px; font-weight: 400; color: var(--cyan); text-shadow: 0 0 18px rgba(var(--cyan-rgb), 0.4); }

.hl-missed { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 4px 0 14px; font-size: 14.5px; }

.hl-missed-movie { display: inline-flex; align-items: center; gap: 8px; }

.hl-missed-vs { color: var(--text-muted); font-size: 13px; }

.hl-board { max-width: 520px; }

.hl-playing { color: var(--text-muted); font-size: 12.5px; }

.hl-board-note { margin: 12px 0 0; }

/* Movie Chain: how it stands, the move, the cast to find the next one in, and the chain itself. */
.chain-status { max-width: 820px; display: flex; flex-direction: column; gap: 8px; }

.chain-status.your-turn { border-color: rgba(var(--cyan-rgb), 0.5); }

.chain-status .quiz-verdict { color: var(--cyan); }

.chain-status .chain-status-title { margin: 0; font-size: 22px; }

.chain-status .stat-note { margin: 0; }

.chain-move { display: flex; gap: 10px; margin-top: 6px; }

.chain-move form:first-child { flex: 1; min-width: 0; }

.chain-cast { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.chain-cast-member { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; }

.chain-cast-member .avatar { width: 30px; height: 30px; font-size: 12px; }

.chain-cast-member:hover { border-color: rgba(var(--green-rgb), 0.6); }

.chain-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px 0; }

.chain-link { position: relative; display: flex; flex-direction: column; align-items: center; width: 196px; padding: 0 12px; animation: fade-up 0.3s ease backwards; animation-delay: calc(var(--step, 0) * 0.05s); }

/* The line from the movie before, across the gap between the posters, with the actor it came through on it. */
.chain-link:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 76px;
    left: -46px;
    width: 92px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--green-rgb), 0.9), rgba(var(--cyan-rgb), 0.9));
    box-shadow: 0 0 10px rgba(var(--green-rgb), 0.5);
}

.chain-via {
    position: absolute;
    top: 60px;
    left: -46px;
    width: 92px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.25;
}

.chain-via > span { color: var(--text-muted); margin-bottom: 2px; }

.chain-via a {
    padding: 3px 7px;
    border: 1px solid rgba(var(--green-rgb), 0.5);
    border-radius: 8px;
    background: var(--background);
    color: var(--green);
    font-weight: 600;
}

.chain-poster { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }

.chain-poster .poster { width: 104px; margin-bottom: 6px; }

.chain-link.latest .poster { box-shadow: 0 0 0 2px var(--cyan), 0 12px 30px rgba(var(--cyan-rgb), 0.3); }

/* The top billed of a movie in Six Degrees, under its title: a start to think from. */
.chain-cast { margin-top: 3px; color: var(--text-muted); font-size: 12px; line-height: 1.35; text-align: center; }

.chain-by { max-width: 100%; margin-top: 4px; overflow: hidden; color: var(--text-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }

.chain-points { margin-left: 4px; color: var(--green); font-weight: 700; }

.chain-escape { margin-left: 4px; color: var(--violet); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }

.chain-board { max-width: 520px; }

@media (max-width: 640px) {
    .play-hero-content { padding-top: 36px; padding-bottom: 40px; }
    .play-wall-row .poster { width: 78px; }
    .game-entry-status { max-width: 40%; font-size: 12.5px; }
    .hl-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
    .hl-versus { display: none; }
    .hl-buttons { flex-direction: column; width: 100%; }
    .hl-button { justify-content: center; }
    .hl-rating { font-size: 30px; }
    .chain-move { flex-direction: column; }
    .chain-link { width: 50%; }
    .chain-via { position: static; width: auto; flex-direction: row; gap: 4px; margin-bottom: 6px; }
    .chain-link:not(:first-child)::before { display: none; }
}

/* ── In cinemas ────────────────────────────────────────────────────── */

/* A poster of a movie in the cinemas now: popcorn in its bottom right corner, on glass; the streaming logos, which
   share the corner, move over to its left. The top left corner is the badges'. */
.poster:has(.cinema-tag) .poster-services { right: 40px; }
.cinema-tag {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 3;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(var(--yellow-rgb), 0.6);
    background: rgba(13, 12, 22, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 15px;
    box-shadow: 0 0 12px rgba(var(--yellow-rgb), 0.35);
}

.cinema-chip { border-color: rgba(var(--yellow-rgb), 0.6); color: var(--yellow); }

/* Yesterday's quiz on its card: the poster, now it can be shown, and how many got it. */
.quiz-yesterday { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); width: 100%; }

.quiz-yesterday-poster { width: 46px; flex-shrink: 0; }

.quiz-yesterday-text { display: flex; flex-direction: column; min-width: 0; }

.quiz-yesterday-label { color: rgb(var(--tone)); font-size: 11.5px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; }

.quiz-yesterday-title { font-weight: 600; }

.quiz-yesterday-score { color: var(--text-muted); font-size: 13px; }

/* A club's ways to start a game, under its games. */
.club-game-starts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Movie Chain's hints: the actors shown so far, and the way to the next. */
.chain-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }

.chain-hint-button { padding-left: 0; color: var(--yellow); }

.chain-board-hints { color: var(--text-muted); font-size: 12.5px; }

/* ── Movie Draft ───────────────────────────────────────────────────── */

.game-draft { --tone: var(--orange-rgb); }

.game-art-draft { gap: 6px; }

.game-art-draft .game-art-poster:nth-child(2) { transform: translateY(-6px); }

/* The line-ups side by side: the one drafting lit up, the empty places as dashed slots. */
.draft-lineups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

.draft-lineup h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.draft-lineup.drafting { border-color: rgba(var(--cyan-rgb), 0.55); }

.draft-total { color: var(--gold); font-family: var(--font-display); font-size: 22px; font-weight: 400; }

.draft-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.draft-pick { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.draft-pick-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.draft-pick-note, .draft-pick-year { color: var(--text-muted); font-size: 11.5px; }

.draft-slot { aspect-ratio: 2 / 3; border: 1.5px dashed var(--border); border-radius: 8px; }

/* The board: posters to tap on the visitor's turn. */
.draft-board-movie { display: contents; }

.draft-board-button {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.draft-board-button:not(:disabled):hover { transform: translateY(-3px); }

.draft-board-button:not(:disabled):hover .poster { box-shadow: 0 0 0 2px var(--cyan), 0 12px 30px rgba(var(--cyan-rgb), 0.3); }

.draft-board-button:disabled { cursor: default; opacity: 0.8; }

/* ── Swipe ─────────────────────────────────────────────────────────── */

.swipe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }

.swipe-side { display: flex; flex-direction: column; gap: 18px; }

/* The deck: the posters stacked, the top one to drag, the next ones peeking out under it. */
.swipe-deck { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.swipe-stack { position: relative; width: min(320px, 82vw); aspect-ratio: 2 / 3.55; }

.swipe-card {
    position: absolute;
    inset: 0;
    z-index: calc(100 - var(--i));
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(calc(min(var(--i), 3) * 10px)) scale(calc(1 - min(var(--i), 3) * 0.04));
    transform-origin: 50% 100%;
    opacity: calc(1 - max(var(--i) - 3, 0));
    transition: transform 0.3s ease, opacity 0.3s ease;
    touch-action: none;
    user-select: none;
    cursor: grab;
}

.swipe-card.dragging { transition: none; cursor: grabbing; }

.swipe-card .poster { width: 100%; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }

.swipe-card .poster img { pointer-events: none; }

/* Only the top poster says what it is; the ones under it show their posters alone. */
.swipe-card-info { display: flex; flex-direction: column; align-items: center; text-align: center; opacity: calc(1 - min(var(--i), 1)); }

.swipe-card-title { font-weight: 700; font-size: 17px; }

.swipe-card-meta { color: var(--text-muted); font-size: 13.5px; }

/* The stamps: shown as a drag leans one way, in that way's colour. */
.swipe-stamp {
    position: absolute;
    top: 22px;
    z-index: 4;
    padding: 4px 14px;
    border: 3px solid currentColor;
    border-radius: 10px;
    background: rgba(var(--background-rgb), 0.55);
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.stamp-want { left: 18px; color: var(--cyan); transform: rotate(-12deg); }
.stamp-pass { right: 18px; color: var(--accent); transform: rotate(12deg); }
.stamp-seen { left: 50%; color: var(--green); transform: translateX(-50%); }

.swipe-card[data-leaning="want"] .stamp-want,
.swipe-card[data-leaning="pass"] .stamp-pass,
.swipe-card[data-leaning="seen"] .stamp-seen { opacity: 1; }

/* A swipe: the poster flies off the way it went. */
.swipe-card.gone { pointer-events: none; transition: transform 0.4s ease, opacity 0.4s ease; opacity: 0; }
.swipe-card.gone-want { transform: translateX(140%) rotate(24deg); }
.swipe-card.gone-pass { transform: translateX(-140%) rotate(-24deg); }
.swipe-card.gone-seen { transform: translateY(-130%); }

/* How many posters are left in the stack, above it. */
.swipe-left { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
/* A player's wants, the quickest yes first, each poster with its time; the first wears a crown of light. */
.player-swipes-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .player-swipes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.player-swipes .quiz-board-row { margin-bottom: 6px; }
.player-wants { display: flex; flex-wrap: wrap; gap: 10px; }
.player-want { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; }
.player-want .poster { width: 64px; }
.player-want:first-child .poster { box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(var(--accent-rgb), 0.5); }
.player-want-time { font-size: 11.5px; color: var(--text-muted); }
.swipe-speed { color: var(--accent-strong); }
.swipe-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 100%; }
@media (max-width: 640px) { .swipe-buttons { gap: 8px; } .swipe-buttons .button { padding: 10px 14px; font-size: 15px; } }

.swipe-pass { --from: var(--accent-rgb); --to: var(--violet-rgb); }
.swipe-seen { --from: var(--green-rgb); --to: var(--cyan-rgb); }

.swipe-done { text-align: center; }

.swipe-counts { display: flex; gap: 18px; font-size: 14px; color: var(--text-muted); }

.swipe-counts strong { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--text); margin-right: 4px; }

.swipe-lean { margin: 12px 0 0; }

.swipe-together .game-start { margin-top: 0; }

.round-night { margin-top: 18px; }

/* The winner of a round, large, and the runners-up in rows, each with its time as a bar against the slowest. */
.round-winner { display: flex; align-items: center; gap: 24px; max-width: 640px; padding: 16px 20px 16px 16px; border: 1px solid rgba(var(--accent-rgb), 0.5); border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.18); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.round-winner:hover { border-color: rgba(var(--accent-rgb), 0.8); box-shadow: 0 0 36px rgba(var(--accent-rgb), 0.3); }
.round-winner-poster { width: 120px; flex-shrink: 0; }
.round-winner-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.round-winner-title { font-family: var(--font-display); font-size: 26px; line-height: 1.15; }
.round-winner-year { color: var(--text-muted); font-size: 14px; }
.round-winner-time { margin-top: 6px; color: var(--accent-strong); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.round-winner-by { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; color: var(--text-muted); font-size: 13.5px; }
.round-winner-by .nav-account-icon { width: 24px; height: 24px; font-size: 11px; }
.round-winner-list { margin-top: 14px; color: var(--text-muted); font-size: 13.5px; }
.round-winner-list a { color: var(--accent-strong); }
/* A movie that came by a swipe, on a list or on one's own watchlist: a small tag on its card. */
/* The badges on a watchlist poster: the deck's two cards, fuchsia and cyan at an angle, for a movie swiped right;
   a green card for one recommended, which says by whom on a tap or a hover. */
.poster-badge { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; margin: 0; padding: 0; border: none; background: transparent; color: inherit; font: inherit; cursor: default; }
.badge-card { display: block; width: 14px; height: 20px; border-radius: 3px; border: 2px solid var(--cyan); background: rgba(12, 10, 18, 0.55); box-shadow: 0 0 8px rgba(var(--cyan-rgb), 0.55); }
.badge-swiped .badge-card:nth-child(1) { transform: rotate(-14deg); border-color: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55); }
.badge-swiped .badge-card:nth-child(2) { margin-left: -6px; transform: rotate(10deg); }
.badge-recommended { cursor: pointer; gap: 6px; }
.badge-recommended .badge-card { border-color: var(--green); box-shadow: 0 0 8px rgba(var(--green-rgb), 0.55); }
.badge-label { display: none; padding: 3px 9px; border-radius: 999px; background: rgba(12, 10, 18, 0.88); color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
.badge-recommended.open .badge-label, .badge-recommended:hover .badge-label, .badge-recommended:focus-visible .badge-label { display: inline-block; }
.list-item, .watchlist-item { position: relative; }
.runners-up { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.runner-up { display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color 0.15s ease; }
.runner-up:hover { border-color: rgba(var(--accent-rgb), 0.6); }
.runner-up-rank { width: 28px; flex-shrink: 0; font-family: var(--font-display); font-size: 22px; color: var(--text-muted); text-align: center; }
.runner-up-poster { width: 40px; flex-shrink: 0; }
.runner-up-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.runner-up-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runner-up-meta { color: var(--text-muted); font-size: 13px; }
.runner-up-bar { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.runner-up-bar .bar-track { flex: 1; height: 8px; border-radius: 4px; }
.runner-up-bar .bar-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0.9)); }
.runner-up-time { flex-shrink: 0; min-width: 44px; text-align: right; color: var(--accent-strong); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .round-winner { gap: 16px; }
    .round-winner-poster { width: 90px; }
    .round-winner-title { font-size: 21px; }
}

.game-swipe { --tone: var(--cyan-rgb); }

.game-art-swipe { position: relative; width: 70px; }

.game-art-swipe .game-art-poster { position: absolute; top: 6px; }
.game-art-swipe .game-art-poster:nth-child(1) { left: 0; transform: rotate(-14deg); border-color: var(--accent); }
.game-art-swipe .game-art-poster:nth-child(2) { left: 22px; transform: rotate(10deg); animation: swipe-art 3s ease-in-out infinite; }

@keyframes swipe-art {
    0%, 55%, 100% { transform: rotate(10deg) translateX(0); opacity: 1; }
    75% { transform: rotate(24deg) translateX(30px); opacity: 0; }
}

@media (max-width: 860px) {
    .swipe-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ── Connect ───────────────────────────────────────────────────────── */

.game-connect { --tone: var(--violet-rgb); }

.game-art-connect .game-line { width: 24px; }

/* The two ends, the start and the target, with par between them. */
.connect-ends { display: flex; align-items: center; justify-content: center; gap: 34px; }

.connect-end { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 170px; text-align: center; }

.connect-end .poster { width: 150px; box-shadow: 0 0 0 2px rgba(var(--violet-rgb), 0.6), 0 14px 34px rgba(var(--violet-rgb), 0.25); }

.connect-end-label { margin-top: 6px; color: var(--violet); font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

.connect-end-title { font-weight: 600; }

.connect-par { display: flex; flex-direction: column; align-items: center; }

.connect-par-number { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--violet); text-shadow: 0 0 22px rgba(var(--violet-rgb), 0.5); }

.connect-par-label { color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }

.connect-tally { margin: 6px 0 0; }

@media (max-width: 640px) {
    .connect-ends { gap: 12px; }
    .connect-end { width: 120px; }
    .connect-end .poster { width: 110px; }
    .connect-par-number { font-size: 44px; }
}

/* A card with a search box, and its section, lie above what follows them on the page: the box's
   suggestions open over the posters below rather than under them. */
.section:has(.picker) { position: relative; z-index: 10; }

.stat-card:has(.picker) { z-index: 10; }

/* Two such cards one under the other, as the top ten's: the one whose box is in use lies over the one below it,
   so its suggestions are not covered by the card that follows. */
.stat-card:has(.picker:focus-within), .stat-card:has(.search-suggestions:not([hidden])) { z-index: 11; }

/* The last row of a picker's suggestions, where the box says so: the way to the search page, for a movie
   the few suggestions do not show. Not a suggestion, so the arrow keys pass it by. */
.suggestion-more { display: block; padding: 10px 14px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 13px; }
.suggestion-more:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }

/* In a card, the suggestions are solid rather than glass: the card's own lines would read through it. */
.picker .search-suggestions { background: var(--surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── Odd One Out and Movie Connections ─────────────────────────────── */

.game-odd { --tone: var(--orange-rgb); }
.game-connections { --tone: var(--green-rgb); }

.game-art-odd { gap: 6px; }
.game-art-odd .odd { border-color: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.7); transform: translateY(-5px) rotate(6deg); }

.game-art-grid { display: grid; grid-template-columns: repeat(4, 16px); gap: 4px; align-content: center; }
.game-art-grid span { width: 16px; height: 22px; border-radius: 3px; }

/* The levels' colours, the easiest first: cyan, green, orange, violet. */
.level-1 { --level: var(--cyan-rgb); }
.level-2 { --level: var(--green-rgb); }
.level-3 { --level: var(--orange-rgb); }
.level-4 { --level: var(--violet-rgb); }
.game-art-grid span { background: rgba(var(--level), 0.8); box-shadow: 0 0 8px rgba(var(--level), 0.5); }

.odd-stage, .grid-stage { display: flex; flex-direction: column; gap: 16px; }

.odd-progress { display: flex; align-items: center; gap: 6px; }
.odd-progress .quiz-pip.answered { background: var(--cyan); border-color: var(--cyan); }
.odd-progress .quiz-pip.current { border-color: var(--cyan); box-shadow: 0 0 10px rgba(var(--cyan-rgb), 0.6); }
.odd-score { margin-left: auto; color: var(--text-muted); font-size: 13.5px; }

.odd-reveal { padding: 12px 16px; border-radius: var(--radius); border: 1px solid rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.07); animation: quiz-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.odd-reveal.right { border-color: rgba(var(--cyan-rgb), 0.6); background: rgba(var(--cyan-rgb), 0.07); }
.odd-reveal.right .quiz-verdict { color: var(--cyan); }
.odd-reveal-text { margin: 4px 0 0; }

/* The four posters to pick from. */
.odd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.odd-pick { display: contents; }
.odd-button { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: center; cursor: pointer; transition: transform 0.15s ease; }
.odd-button:hover { transform: translateY(-4px); }
.odd-button:hover .poster { box-shadow: 0 0 0 2px var(--accent), 0 14px 30px rgba(var(--accent-rgb), 0.3); }
.odd-title { font-weight: 600; font-size: 14px; line-height: 1.3; }

/* Done: the score large, and every puzzle with the odd one lit. */
.odd-final { display: flex; align-items: center; gap: 22px; }
.odd-final-score { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--cyan); text-shadow: 0 0 22px rgba(var(--cyan-rgb), 0.45); }
.odd-final .quiz-verdict { margin-bottom: 10px; }

.odd-results { display: flex; flex-direction: column; gap: 12px; }
.odd-result { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: var(--radius-small); border-left: 3px solid var(--accent); background: rgba(255, 255, 255, 0.03); }
.odd-result.right { border-left-color: var(--cyan); }
.odd-result-posters { display: flex; gap: 6px; flex-shrink: 0; }
.odd-result-poster { width: 34px; opacity: 0.55; }
.odd-result-poster.is-odd { opacity: 1; }
.odd-result-poster.is-odd .poster { box-shadow: 0 0 0 2px var(--accent); }
.odd-result-text { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.odd-result-text strong { color: var(--text); }

/* Connections: the groups found as bands, the posters still to group as tiles. */
.grid-group { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px; border-radius: var(--radius); background: rgba(var(--level), 0.18); border: 1px solid rgba(var(--level), 0.6); text-align: center; animation: quiz-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.grid-group-label { font-weight: 700; color: rgb(var(--level)); text-transform: uppercase; letter-spacing: 0.8px; font-size: 13px; }
.grid-group-movies { font-size: 14px; }

/* Four by four on a phone; on a desktop two rows of eight over the page's width, so the sixteen and the buttons fit on one screen. */
.grid-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quiz-layout:has(.grid-tiles) { grid-template-columns: minmax(0, 1fr); }
/* The columns as many as fill the rows: eight of sixteen, six of twelve, as the template sets them. */
@media (min-width: 1000px) { .grid-tiles { grid-template-columns: repeat(var(--columns, 8), minmax(0, 1fr)); max-width: calc(var(--columns, 8) * 150px); margin: 0 auto; } }
.grid-tile { display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1.5px solid var(--border); border-radius: var(--radius-small); background: rgba(255, 255, 255, 0.03); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease, background 0.12s ease; }
.grid-tile:hover { border-color: rgba(255, 255, 255, 0.3); }
.grid-tile.selected { border-color: var(--yellow); background: rgba(var(--yellow-rgb), 0.12); transform: translateY(-2px); }
.grid-tile .poster { width: 100%; }
.grid-tile-title { font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.grid-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.grid-mistakes { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--text-muted); font-size: 13.5px; }
.grid-mistakes .quiz-pip { width: 12px; height: 12px; }
.grid-mistakes .quiz-pip.left { background: var(--accent); border-color: var(--accent); }

@media (max-width: 640px) {
    .odd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-tiles { gap: 6px; }
    .grid-tile { padding: 4px; }
    .grid-tile-title { font-size: 11px; }
    .odd-result { flex-direction: column; align-items: flex-start; }
}

/* ── Open and finished games ───────────────────────────────────────── */

.game-row { display: flex; align-items: stretch; gap: 8px; }
.game-row .game-entry { flex: 1; min-width: 0; }
.game-close { display: flex; }
.game-close-button { width: 40px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; }
.game-close-button:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); }
.game-list-heading { margin: 26px 0 10px; font-size: 13px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); }
.game-list.finished .game-entry { opacity: 0.75; }
.game-list.finished .game-entry:hover { opacity: 1; }
.game-full { margin-bottom: 14px; }
.pager { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }

/* ── Kevin Bacon ───────────────────────────────────────────────────── */

/* A link through him: a small warm tag under the link, its title saying why. */
.chain-bacon { font-size: 11.5px; font-weight: 600; color: var(--orange); letter-spacing: 0.3px; cursor: help; }

/* His own page: his Bacon number, and what that is. */
.bacon-number { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; max-width: 560px; font-size: 13.5px; color: var(--text-muted); }
.bacon-number strong { color: var(--orange); font-weight: 600; }

.not-found { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.not-found p { margin: 0; max-width: 520px; }

/* ── Role Call ────────────────────────────────────────────────── */

.game-cast { --tone: var(--yellow-rgb); }
.game-art-cast { gap: 10px; }
.game-art-bid { font-family: var(--font-display); font-size: 30px; color: rgb(var(--tone)); text-shadow: 0 0 14px rgba(var(--tone), 0.6); }

.cast-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: start; }
.cast-movie { display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.cast-movie .poster { width: 100%; margin-bottom: 6px; }
.cast-movie-title { font-weight: 700; font-size: 16px; line-height: 1.3; }
.cast-movie-year, .cast-movie-credits { color: var(--text-muted); font-size: 13px; }
.cast-stage { display: flex; flex-direction: column; gap: 12px; }

.cast-bid, .cast-name { display: flex; flex-wrap: wrap; gap: 10px; }
.cast-bid-input { width: 110px; font-size: 22px; font-weight: 700; text-align: center; }
.cast-name-input { flex: 1 1 260px; min-width: 0; font-size: 16px; }
.cast-bid-input, .cast-name-input { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); color: var(--text); font-family: inherit; }
.cast-bid-input:focus, .cast-name-input:focus { outline: none; border-color: rgba(var(--yellow-rgb), 0.7); box-shadow: 0 0 0 3px rgba(var(--yellow-rgb), 0.15); }

.cast-said { margin: 0; min-height: 1.4em; font-weight: 600; color: var(--yellow); }
.cast-said:empty { display: none; }

.cast-bids { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cast-bids li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cast-bid-hidden { color: var(--text-muted); }
.cast-bid-count { color: var(--yellow); font-weight: 700; }

/* The names given: the ones in the cast lit, the others struck out. */
.cast-answers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cast-answer { padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; animation: quiz-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.cast-answer.right { color: var(--cyan); border: 1px solid rgba(var(--cyan-rgb), 0.55); background: rgba(var(--cyan-rgb), 0.08); }
.cast-answer.wrong { color: var(--text-muted); border: 1px solid var(--border); text-decoration: line-through; text-decoration-color: var(--accent); }

/* The whole cast, at the end: the named lit. */
.cast-reveal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; }
.cast-reveal li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-muted); }
.cast-reveal li.named { color: var(--cyan); font-weight: 600; }
.cast-reveal li.named a { color: var(--cyan); }
.cast-reveal a { color: var(--text); }
.cast-reveal-role { font-size: 12.5px; color: var(--text-muted); font-weight: 400; }

@media (max-width: 640px) {
    .cast-layout { grid-template-columns: 1fr; }
    .cast-movie { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
    .cast-movie .poster { width: 90px; }
}

/* An odd card out at the end of the games spans the row, rather than standing alone in half of it. */
.game-grid > .game-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ── The menu: five places, two of them with a menu of their pages ──── */

.nav-group { position: relative; display: flex; }
.nav-group > a::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.6; }
.nav-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px; padding: 6px;
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a { padding: 9px 14px; border-radius: 9px; font-size: 14px; white-space: nowrap; }
.nav-menu a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.nav-menu a.active { color: var(--accent-strong); }

/* A section's pages above a page's title: the section's name, then its pages, the page itself lit. */
.section-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 10px; font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; }
.section-nav-name { color: var(--text-muted); opacity: 0.7; }
.section-nav-name::after { content: "·"; margin-left: 16px; }
.section-nav a { color: var(--text-muted); transition: color 0.15s ease; }
.section-nav a:hover { color: var(--text); }
.section-nav a.active { color: var(--accent-strong); }

@media (max-width: 1024px) {
    /* The menus need a hover: the scrolling strip shows the five, and a page's section names its pages. */
    .nav-menu { display: none; }
    .nav-group > a::after { display: none; }
}

/* ── Levels ─────────────────────────────────────────────────────────── */

/* The avatar in a ring that fills from this level to the next (--progress, 0 to 1). */
.nav-account-icon[style*="--progress"] {
    position: relative;
    box-shadow: 0 0 0 2px var(--background);
}
.nav-account-icon[style*="--progress"]::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%; z-index: -1;
    background: conic-gradient(var(--accent) calc(var(--progress) * 360deg), rgba(255, 255, 255, 0.12) 0);
}

/* The ring on the Play and levels pages, the share to the next level in the middle. */
.level-ring { --size: 56px; position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--size); height: var(--size); border-radius: 50%; flex-shrink: 0; font-family: var(--font-display); font-size: calc(var(--size) * 0.3); color: var(--text);
    background: conic-gradient(var(--accent) calc(var(--progress) * 360deg), rgba(255, 255, 255, 0.1) 0); }
.level-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.level-ring > span { position: relative; }
.level-ring-large { --size: 128px; }
.level-ring-large::before { inset: 9px; background: var(--background); }

.level-strip { padding-top: 22px; padding-bottom: 0; }
.level-card { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease; }
.level-card:hover { border-color: rgba(var(--accent-rgb), 0.5); transform: translateY(-2px); }
.level-text { display: flex; flex-direction: column; min-width: 0; }
.level-eyebrow { font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.level-name { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.1; }
.level-next { color: var(--text-muted); font-size: 13.5px; }
.level-links { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; }
.level-link { color: var(--accent-strong); font-size: 14px; font-weight: 500; white-space: nowrap; }
.level-link:hover { text-decoration: underline; }
@media (max-width: 640px) { .level-card { flex-wrap: wrap; } .level-links { flex-direction: row; gap: 14px; margin-left: 0; } }

/* A game the visitor's level does not reach: what it takes, in place of the ways to start it. */
.game-lock { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 14px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, 0.25); color: var(--text-muted); font-size: 13.5px; }
.game-lock::before { content: ""; width: 10px; height: 13px; border: 1.5px solid currentColor; border-radius: 3px; box-shadow: inset 0 -4px 0 currentColor; }
.game-card:has(.game-lock) .game-title { opacity: 0.8; }

/* The levels page: the visitor's level over their own posters. */
.levels-hero-content { padding-bottom: 32px; }
.levels-head { display: flex; align-items: center; gap: 28px; margin-top: 14px; }
.levels-title { font-size: 64px; }
.levels-lede { margin: 6px 0 0; max-width: 560px; font-size: 17px; color: var(--text-muted); }
.levels-lede strong { color: var(--text); font-size: 20px; }

.levels-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }

/* The ladder: a line down the left, a mark per level, the visitor's lit and the ones ahead dimmed. */
.level-ladder { list-style: none; margin: 0; padding: 0; position: relative; }
.level-ladder::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 11px; width: 2px; background: linear-gradient(180deg, var(--accent), rgba(255, 255, 255, 0.1)); }
.level-rung { position: relative; display: grid; grid-template-columns: 24px 64px minmax(0, 1fr) auto; gap: 0 16px; align-items: start; padding: 14px 0 22px; }
.level-rung-mark { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); background: var(--background); margin-top: 2px; }
/* Full for a level earned, the current one with a halo; an open ring for one the movies reach but the rites hold. */
.level-rung.reached .level-rung-mark, .level-rung.current .level-rung-mark { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6); }
.level-rung.current .level-rung-mark { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.25), 0 0 18px rgba(var(--accent-rgb), 0.6); }
.level-rung.held .level-rung-mark { border-color: var(--accent); background: var(--background); }
.level-rung.held .level-rung-threshold { color: var(--accent-strong); }
.level-rung-threshold { font-family: var(--font-display); font-size: 20px; color: var(--text-muted); margin-top: 2px; }
.level-rung.current .level-rung-threshold { color: var(--accent-strong); }
.level-rung-body { display: flex; flex-direction: column; gap: 4px; }
.level-rung-name { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.1; }
.level-rung.ahead .level-rung-name { color: var(--text-muted); }
.level-rung-blurb { color: var(--text-muted); font-size: 14.5px; max-width: 520px; }
.level-rung-unlocks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.level-unlock { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(var(--cyan-rgb), 0.5); color: var(--cyan); font-size: 12.5px; font-weight: 600; }
.level-rung.ahead .level-unlock { border-color: var(--border); color: var(--text-muted); }
.level-rung-you { padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }

.levels-aside { display: flex; flex-direction: column; gap: 18px; }
.levels-rules { margin: 12px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }
.levels-rules li + li { margin-top: 6px; }
.levels-rules strong { color: var(--text); }
.levels-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* What a check-in brought, for a moment, bottom centre. */
.level-toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), 0.5); background: var(--surface-raised); color: var(--text); font-size: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; }
.level-toast.shown { opacity: 1; transform: translate(-50%, 0); }
.level-toast strong { color: var(--accent-strong); }

@media (max-width: 760px) {
    .levels-layout { grid-template-columns: 1fr; }
    .levels-title { font-size: 44px; }
    .level-ring-large { --size: 96px; }
    .level-rung { grid-template-columns: 24px 48px minmax(0, 1fr); }
    .level-rung-you { grid-column: 3; justify-self: start; margin-top: 6px; }
    .level-link { display: none; }
}

/* Where a match's movies came from, under its title. */
.pool-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }
.pool-kind { display: inline-flex; align-items: center; gap: 8px; }
.pool-kind::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(var(--cyan-rgb), 0.7); }
.pool-count { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); }

/* A night chosen by swiping: the way into the round, above the deck. */
.night-swipe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 18px; padding: 14px 18px; border-radius: var(--radius); border: 1px solid rgba(var(--cyan-rgb), 0.4); background: rgba(var(--cyan-rgb), 0.06); }
.night-swipe .stat-note { margin: 0; flex: 1 1 320px; }

/* ── Badges ─────────────────────────────────────────────────────────── */

.badge-shelf { margin-top: 26px; }
.badge-shelf-title { margin: 0 0 12px; font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.badge { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); opacity: 0.72; transition: opacity 0.15s ease, border-color 0.15s ease; }
.badge:hover { opacity: 1; }
.badge.earned { opacity: 1; border-color: rgba(var(--yellow-rgb), 0.45); background: linear-gradient(135deg, rgba(var(--yellow-rgb), 0.1), transparent 60%) var(--surface); }

/* The medal: a ring with the badge's drawing, lit in the badge's own tone once earned, grey until then. */
.badge { --tone: var(--accent-rgb); }
.badge.tone-pink { --tone: var(--accent-rgb); }
.badge.tone-cyan { --tone: var(--cyan-rgb); }
.badge.tone-violet { --tone: var(--violet-rgb); }
.badge.tone-orange { --tone: var(--orange-rgb); }
.badge.tone-green { --tone: var(--green-rgb); }
.badge.tone-yellow { --tone: var(--yellow-rgb); }
.badge.earned { border-color: rgba(var(--tone), 0.45); background: linear-gradient(135deg, rgba(var(--tone), 0.12), transparent 60%) var(--surface); }
.badge-medal { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.45); }
.badge-icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.badge-icon [fill="currentColor"] { stroke: none; }
.badge.earned .badge-medal { border-color: rgb(var(--tone)); color: rgb(var(--tone)); background: radial-gradient(circle at 35% 30%, rgba(var(--tone), 0.35), rgba(var(--tone), 0.06) 70%); box-shadow: 0 0 20px rgba(var(--tone), 0.4); }
.badge.earned .badge-icon { filter: drop-shadow(0 0 5px rgba(var(--tone), 0.8)); }
.badge-earned { color: rgb(var(--tone)); }
.badge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.badge-title { font-weight: 700; }
.badge-blurb { font-size: 13px; color: var(--text-muted); }
.badge-progress { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.badge-progress .bar-track { flex: 1; }
.badge-earned { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }

/* ── Tonight: three doors under the hero ───────────────────────────── */

.tonight { padding-top: 26px; padding-bottom: 6px; }
.tonight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tonight-door {
    --tone: var(--accent-rgb);
    position: relative; display: flex; align-items: center; gap: 20px; min-height: 112px; padding: 16px 18px;
    border: 1px solid rgba(var(--tone), 0.35); border-radius: 18px; color: var(--text); overflow: hidden;
    background: radial-gradient(360px 160px at 100% 0%, rgba(var(--tone), 0.22), transparent 70%), var(--surface);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tonight-door:hover { transform: translateY(-3px); border-color: rgba(var(--tone), 0.7); box-shadow: 0 16px 40px rgba(var(--tone), 0.22); }
.door-cinema { --tone: var(--orange-rgb); }
.door-club { --tone: var(--violet-rgb); }
.tonight-poster { width: 56px; flex-shrink: 0; }
.tonight-poster .poster { width: 56px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
.tonight-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tonight-eyebrow { font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: rgb(var(--tone)); font-weight: 700; }
.tonight-title { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tonight-note { font-size: 13.5px; color: var(--text-muted); }

/* The doors' marks: a ticket, and a row of seats. */
.tonight-art { display: flex; align-items: center; justify-content: center; width: 60px; height: 76px; flex-shrink: 0; }
.tonight-ticket { position: relative; width: 48px; height: 30px; border-radius: 6px; border: 2px solid rgb(var(--tone)); box-shadow: 0 0 16px rgba(var(--tone), 0.5); transform: rotate(-12deg); }
.tonight-ticket::before, .tonight-ticket::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid rgb(var(--tone)); transform: translateY(-50%); }
.tonight-ticket::before { left: -7px; clip-path: inset(0 0 0 50%); }
.tonight-ticket::after { right: -7px; clip-path: inset(0 50% 0 0); }
.tonight-seats { display: flex; gap: 5px; align-items: flex-end; }
.tonight-seats span { width: 14px; height: 18px; border-radius: 5px 5px 2px 2px; background: rgb(var(--tone)); box-shadow: 0 0 12px rgba(var(--tone), 0.6); }
.tonight-seats span:nth-child(2) { height: 22px; }

@media (max-width: 900px) {
    .tonight-grid { grid-template-columns: 1fr; }
    .tonight-door { min-height: 0; }
}

/* ── Veiled posters, and the boxes that suggest ────────────────────── */

/* A poster whose credits are the question: blurred under frosted glass, until the game is over. */
.poster-veil { position: relative; }
.poster-veil.veiled .poster { overflow: hidden; }
/* Just enough blur that the names in the credits cannot be read, while the poster still looks like itself. */
.poster-veil.veiled .poster img { filter: blur(1.8px); transform: scale(1.02); }
.poster-veil.deep .poster img { filter: blur(5px); transform: scale(1.06); }
.poster-veil-label { position: absolute; left: 50%; bottom: 10px; z-index: 3; transform: translateX(-50%); padding: 5px 11px; border-radius: 999px; background: rgba(12, 10, 18, 0.82); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.veiled-link { pointer-events: none; cursor: default; }
.veiled-link .poster { box-shadow: none; }

/* The cast box suggests names as the pickers do. */
.cast-picker { flex: 1 1 260px; min-width: 0; position: relative; }
.cast-picker .cast-name-input { width: 100%; }
.cast-picker .search-suggestions { background: var(--surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cast-name:has(.cast-picker) .cast-name-input { flex: none; }

/* The games' lists, close: two abreast on a wide screen, each row slim. */
.game-list { gap: 6px; }
.game-entry { gap: 10px; padding: 8px 12px; }
.game-entry-icon { font-size: 18px; }
.game-entry-title { font-size: 14.5px; }
.game-entry-with { font-size: 12.5px; }
.game-entry-status { font-size: 12.5px; }
.game-close-button { width: 34px; font-size: 17px; }
.game-list-heading { margin: 18px 0 8px; }
@media (min-width: 900px) {
    .game-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 6px 10px; }
}

/* ── The section heroes: a wall behind the title, and the games' pieces behind Play ── */

/* A section page's title sits a little tighter than Play's over its wall, with the room the page header had. */
.section-hero .play-hero-content { padding-bottom: 22px; }
.section-hero .play-wall { opacity: 0.22; }
.section-hero + .section { padding-top: 26px; }

/* Play's wall: the games' pieces in neon, each a tone of the palette. */
.game-hero .play-wall { opacity: 0.55; }
.game-wall .play-wall-row { align-items: center; gap: 40px; }
.game-wall .play-wall-row.row-2 { margin-left: -60px; transform: scale(1.2); transform-origin: left center; }
.piece { --tone: var(--accent-rgb); position: relative; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(var(--tone), 0.55)); }
.piece.tone-1 { --tone: var(--cyan-rgb); }
.piece.tone-2 { --tone: var(--violet-rgb); }
.piece.tone-3 { --tone: var(--orange-rgb); }
.piece.tone-4 { --tone: var(--yellow-rgb); }
.piece span { display: block; border: 2px solid rgba(var(--tone), 0.9); box-shadow: 0 0 12px rgba(var(--tone), 0.35), inset 0 0 10px rgba(var(--tone), 0.15); }
/* A poster, a pip row, a ticket, two cards, a chain of links, a ring. */
.piece-0 span { width: 30px; height: 44px; border-radius: 5px; }
.piece-0 span + span { display: none; }
.piece-1 span { width: 14px; height: 14px; border-radius: 50%; }
.piece-1 span:nth-child(2) { background: rgb(var(--tone)); }
.piece-2 span { width: 56px; height: 32px; border-radius: 7px; border-style: dashed; }
.piece-2 span + span { display: none; }
.piece-3 span { width: 26px; height: 38px; border-radius: 5px; }
.piece-3 span:nth-child(1) { transform: rotate(-12deg) translateX(8px); }
.piece-3 span:nth-child(2) { transform: rotate(10deg) translateX(-8px); }
.piece-3 span:nth-child(3) { display: none; }
.piece-4 span { width: 28px; height: 40px; border-radius: 5px; }
.piece-4 span + span { margin-left: 14px; position: relative; }
.piece-4 span + span::before { content: ""; position: absolute; left: -18px; top: 50%; width: 16px; height: 2px; background: rgb(var(--tone)); }
.piece-5 span { width: 40px; height: 40px; border-radius: 50%; border-width: 3px; }
.piece-5 span + span { display: none; }

/* ── The honours: the star, the globe, the statuette ─────────────── */

/* The star in the pavement, in its own colours: coral-pink terrazzo flecked with charcoal, a brass star with
   the bronze emblem, the name set in brass under it. Unlit until the level is reached, lit with a glow once it is. */
/* From Star on, the mark on the line is the level's honour, the biggest marks on the ladder, set over the line,
   in full gold whether reached or not; reached, it glows. */
.level-rung.honoured .level-rung-mark { display: flex; width: 44px; height: 48px; margin: -8px 0 0 -10px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.level-rung.honoured .level-rung-mark svg { width: 100%; height: 100%; }
.level-rung.honoured.reached .level-rung-mark, .level-rung.honoured.current .level-rung-mark { filter: drop-shadow(0 0 8px rgba(233, 200, 122, 0.8)); }
.walk-star { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; padding: 16px 22px 12px; border-radius: 6px; color: #3a2a12; opacity: 0.7; transition: opacity 0.3s ease, transform 0.2s ease;
    background:
        radial-gradient(circle at 12% 20%, rgba(40, 36, 40, 0.75) 0 1.4px, transparent 2px),
        radial-gradient(circle at 78% 30%, rgba(40, 36, 40, 0.7) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.6px),
        radial-gradient(circle at 88% 78%, rgba(40, 36, 40, 0.7) 0 1.4px, transparent 2px),
        radial-gradient(circle at 25% 88%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.6px),
        radial-gradient(circle at 60% 15%, rgba(40, 36, 40, 0.6) 0 1px, transparent 1.6px),
        radial-gradient(circle at 70% 55%, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.6px),
        linear-gradient(135deg, #f1a8ba, #e68fa4 55%, #ec9eb1);
    box-shadow: inset 0 0 0 3px rgba(60, 40, 48, 0.55), inset 0 0 0 5px rgba(255, 215, 225, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45); }
.walk-star.set { opacity: 1; box-shadow: inset 0 0 0 3px rgba(60, 40, 48, 0.55), inset 0 0 0 5px rgba(255, 215, 225, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 34px rgba(var(--accent-rgb), 0.35); }
.walk-star-shape { position: relative; width: 72px; height: 72px; background: linear-gradient(160deg, #e9c87a, #b8873a 55%, #d9b25e); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); display: flex; align-items: center; justify-content: center; }
.walk-star-emblem { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(90, 60, 20, 0.7); margin-top: 8px; box-shadow: inset 0 0 0 3px rgba(233, 200, 122, 0.9); }
.walk-star-name { margin-top: 4px; font-family: var(--font-display); font-size: 20px; letter-spacing: 2px; text-transform: uppercase; color: #8a5a1c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); max-width: 240px; text-align: center; }
.walk-star-walk { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #8a5a1c; }
.walk-place { margin-top: 8px; }

/* The Golden Globe, the Oscar and the goat on their shelf: the statuette in gold, the name on the plinth once the
   level is reached. Dim until reached, lit once it is. */
.honour-trophy { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; padding: 16px 26px 12px; border-radius: 6px; opacity: 0.7; transition: opacity 0.3s ease;
    background: linear-gradient(180deg, #2b2231, #15111a 70%, #0f0c12); box-shadow: inset 0 0 0 1px rgba(233, 200, 122, 0.25), 0 10px 30px rgba(0, 0, 0, 0.45); }
.honour-trophy.set { opacity: 1; box-shadow: inset 0 0 0 1px rgba(233, 200, 122, 0.55), 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 34px rgba(233, 200, 122, 0.25); }
.honour-trophy-shape { width: 84px; height: 100px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
.honour-trophy-plate { padding: 3px 14px; border-radius: 2px; background: linear-gradient(160deg, #f3d27a, #c9962f 60%, #e2b95a); color: #3a2a12; font-family: var(--font-display); font-size: 16px; letter-spacing: 2px; text-transform: uppercase; max-width: 240px; text-align: center; }
.honour-trophy-caption { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #c9a65a; text-align: center; }

/* The honour worn on the avatar from Star on, wherever it shows. */
.nav-account-icon { position: relative; }
.nav-account-icon.honoured { overflow: visible; }
.nav-account-icon.honoured img { border-radius: 50%; }
.honour-mark { position: absolute; right: -7px; bottom: -7px; width: 17px; height: 19px; filter: drop-shadow(0 0 4px rgba(243, 210, 122, 0.9)); }
.avatar-large .honour-mark, .nav-account-icon.avatar-large .honour-mark { width: 26px; height: 29px; right: -8px; bottom: -8px; }
.seat .nav-account-icon { width: 24px; height: 24px; font-size: 12px; border: 0; }
.seat .honour-mark { width: 12px; height: 13px; right: -4px; bottom: -4px; }
.goat-note strong { color: #e6bd5c; }

/* Total Recall: what to recall, a movie's cast or a person's movies, chosen beside the start buttons. */

/* ── The Mask ───────────────────────────────────────────────────────── */

.game-mask { --tone: var(--green-rgb); }
/* The Mask's art is as tall as the others, and his gag falls over the title: the jaw and the tongue in front of it. */
.game-art-mask { position: relative; z-index: 2; align-items: flex-start; overflow: visible; }
.mask-face { overflow: visible; filter: drop-shadow(0 0 12px rgba(var(--green-rgb), 0.5)); }
.mask-face.mask-art { width: 64px; height: 112px; margin-top: -10px; }
/* The gag, every six seconds: the eyes shoot out on their stalks, the jaw drops, the throat opens, the tongue rolls
   out down to the floor, and all of it snaps back. */
.mask-eye { transform-box: fill-box; transform-origin: 50% 100%; animation: mask-eyes 6s ease-in-out infinite; }
.mask-stalk { opacity: 0; animation: mask-stalk 6s ease-in-out infinite; }
.mask-jaw { transform-box: fill-box; transform-origin: 50% 0; animation: mask-jaw 6s ease-in-out infinite; }
.mask-throat { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: mask-throat 6s ease-in-out infinite; }
.mask-tongue { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: mask-tongue 6s ease-in-out infinite; }
@keyframes mask-eyes { 0%, 10% { transform: none; } 14% { transform: translateY(-22px) scale(1.8); } 17% { transform: translateY(-17px) scale(1.6); } 36% { transform: translateY(-19px) scale(1.65); } 42%, 100% { transform: none; } }
@keyframes mask-stalk { 0%, 11% { opacity: 0; } 14%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes mask-jaw { 0%, 12% { transform: none; } 17% { transform: translateY(38px); } 20% { transform: translateY(34px); } 36% { transform: translateY(35px); } 42%, 100% { transform: none; } }
@keyframes mask-throat { 0%, 12% { transform: scaleY(0); } 17% { transform: scaleY(0.95); } 20%, 36% { transform: scaleY(0.88); } 42%, 100% { transform: scaleY(0); } }
@keyframes mask-tongue { 0%, 16% { transform: scaleY(0); } 24% { transform: scaleY(1.06); } 27% { transform: scaleY(0.98); } 29%, 36% { transform: scaleY(1); } 42%, 100% { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .mask-eye, .mask-stalk, .mask-jaw, .mask-throat, .mask-tongue { animation: none; } .mask-stalk { opacity: 0; } }
/* The case: the mask large, the four posters as the clues, the names under them. */
.mask-case { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mask-face.mask-face-large { width: 120px; height: 210px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5)); }
.mask-clues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 640px; }
.mask-clue-title { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; line-height: 1.3; text-align: center; }
.mask-ask { margin: 0; color: var(--text-muted); }
/* On a phone the four clues go two by two, so each veiled poster stays large enough to make out. */
@media (max-width: 640px) { .mask-clues { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mask-face.mask-face-large { width: 84px; height: 147px; } }

/* ── Face/Off, The Usual Suspects, Memento, Amadeus ───────────────── */

.game-face-off { --tone: var(--accent-rgb); }
.game-suspects { --tone: var(--cyan-rgb); }
.game-memento { --tone: var(--violet-rgb); }
.game-amadeus { --tone: var(--yellow-rgb); }

/* The cards' art: two posters face to face; five heads in a line-up, one lit; posters out of order; the bars of a score. */
.game-art-duel { gap: 10px; }
.game-art-duel .game-art-poster + .game-art-poster { transform: rotate(8deg); }
.game-art-versus { font-family: var(--font-display); font-size: 22px; color: rgb(var(--tone)); text-transform: uppercase; }
/* Five silhouettes in a line-up, head and shoulders, the one in the middle lit. */
.game-art-lineup { gap: 7px; align-items: flex-end; }
.game-art-lineup span { position: relative; width: 22px; height: 30px; opacity: 0.55; }
.game-art-lineup span::before { content: ""; position: absolute; top: 0; left: 6px; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--tone)); box-shadow: 0 0 8px rgba(var(--tone), 0.5); }
.game-art-lineup span::after { content: ""; position: absolute; bottom: 0; left: 0; width: 22px; height: 14px; border-radius: 11px 11px 3px 3px; background: rgb(var(--tone)); box-shadow: 0 0 10px rgba(var(--tone), 0.45); }
.game-art-lineup span:nth-child(2), .game-art-lineup span:nth-child(4) { height: 36px; }
.game-art-lineup span:nth-child(2)::before, .game-art-lineup span:nth-child(4)::before { width: 12px; height: 12px; left: 5px; }
.game-art-lineup span:nth-child(3) { opacity: 1; }
.game-art-memento { gap: 6px; }
.game-art-memento .game-art-poster:nth-child(1) { transform: translateY(6px) rotate(-6deg); }
.game-art-memento .game-art-poster:nth-child(3) { transform: translateY(-6px) rotate(5deg); }
.game-art-memento .game-art-poster:nth-child(4) { transform: translateY(4px); }
.game-art-score { gap: 5px; align-items: flex-end; }
.game-art-score span { width: 7px; border-radius: 4px; background: rgb(var(--tone)); box-shadow: 0 0 10px rgba(var(--tone), 0.5); }
.game-art-score span:nth-child(1) { height: 16px; }
.game-art-score span:nth-child(2) { height: 32px; }
.game-art-score span:nth-child(3) { height: 22px; }
.game-art-score span:nth-child(4) { height: 40px; }
.game-art-score span:nth-child(5) { height: 26px; }
.game-art-score span:nth-child(6) { height: 12px; }

/* Face/Off: the two posters, a "vs" between them. */
.duel-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: center; max-width: 520px; }
.duel-versus { font-family: var(--font-display); font-size: 34px; color: var(--accent-strong); text-transform: uppercase; }
.odd-year { color: var(--text-muted); font-size: 12.5px; }

/* The Usual Suspects and Amadeus: the case, the poster and the question beside it. */
.lineup-case { display: flex; gap: 18px; align-items: center; }
/* A veiled poster is shown large: a blur on a small one hides the whole picture, not just the faces. */
.lineup-case .poster-veil { width: 136px; flex-shrink: 0; }
.lineup-case .poster-veil-label, .mask-clues .poster-veil-label { font-size: 10px; padding: 3px 8px; bottom: 8px; }
.lineup-eyebrow { margin: 0; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.lineup-part { margin: 2px 0; font-family: var(--font-display); font-size: 36px; line-height: 1.05; }
.lineup-movie { margin: 0; color: var(--text-muted); }
/* The line-up: five faces against the height lines of the wall, numbered. */
.lineup-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 18px 10px 14px; border-radius: var(--radius);
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 26px), linear-gradient(180deg, #1c1824, #120f17); }
.lineup-height { font-size: 11px; color: var(--text-muted); letter-spacing: 1px; }
.lineup-face { width: 86px; height: 86px; font-size: 32px; }
.lineup-button:hover .lineup-face { box-shadow: 0 0 0 2px var(--accent), 0 14px 30px rgba(var(--accent-rgb), 0.3); }

/* Memento: the movies placed so far, numbered, and the ones still to place. */
.memento-placed { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.memento-slot { position: relative; width: 64px; }
.memento-rank { position: absolute; top: -8px; left: -8px; z-index: 3; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.memento-next { margin-left: 8px; color: var(--text-muted); }
.memento-ask { margin: 0; color: var(--text-muted); }
.memento-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Amadeus: the four names to choose from. */
.score-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.score-choice { width: 100%; justify-content: center; padding: 14px; font-size: 16px; }

@media (max-width: 640px) {
    .lineup-row { gap: 6px; padding: 12px 6px 10px; }
    .lineup-face { width: 52px; height: 52px; font-size: 20px; }
    .lineup-row .odd-title { font-size: 11px; }
    .lineup-part { font-size: 28px; }
    .memento-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .score-choices { grid-template-columns: 1fr; }
}

/* ── What waits on the visitor: fuchsia counts ─────────────────────── */

:root { --fuchsia: #f02bd0; --fuchsia-rgb: 240, 43, 208; }
.nav-badge { background: var(--fuchsia); color: #fff; box-shadow: 0 0 10px rgba(var(--fuchsia-rgb), 0.6); }
.attention-badge { display: inline-block; vertical-align: middle; margin-left: 12px; padding: 3px 11px; border-radius: 999px; background: var(--fuchsia); color: #fff; font-family: var(--font); font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: none; box-shadow: 0 0 14px rgba(var(--fuchsia-rgb), 0.55); }
.section-header .attention-badge { margin-left: 0; align-self: center; }

/* The level as a fourth door on the home page. */
.door-level { --tone: var(--yellow-rgb); }
.tonight-ring { --size: 56px; flex-shrink: 0; }
.tonight-ring::before { background: var(--surface); }
@media (min-width: 1100px) { .tonight-grid:has(.door-level) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1099px) { .tonight-grid:has(.door-level) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── The community: an auditorium behind the title, and the overview ── */

/* Rows of seats seen from the screen, the community in some of them, dimmer and smaller towards the back. */
.community-hero .play-wall { opacity: 1; }
/* The keyboard behind the title: the rows set in like a real one's, each key a cap with its letter; a key pressed
   lights up and sinks for a moment; what was typed shows on the line above. Dimmed on the manage tab. */
.keyboard-wall { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; padding: 0 0 12px; pointer-events: none; opacity: 0.5; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 85%, transparent); }
.keyboard-screen { display: flex; align-items: center; gap: 2px; min-height: 30px; font-family: var(--font-display); font-size: 26px; letter-spacing: 1px; text-transform: uppercase; color: rgba(var(--violet-rgb), 0.95); text-shadow: 0 0 14px rgba(var(--violet-rgb), 0.6); white-space: nowrap; }
.keyboard-caret { width: 10px; height: 24px; background: rgba(var(--violet-rgb), 0.8); animation: keyboard-caret 1s steps(2) infinite; }
@keyframes keyboard-caret { to { opacity: 0; } }
.keyboard { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.key-row { display: flex; gap: 8px; }
.key-row:nth-child(2) { padding-left: 24px; }
.key-row:nth-child(3) { padding-left: 72px; }
.key { display: flex; align-items: center; justify-content: center; width: 42px; height: 36px; border-radius: 8px; border: 1.5px solid rgba(var(--violet-rgb), 0.5); border-bottom-width: 4px; background: rgba(var(--violet-rgb), 0.08); color: rgba(var(--violet-rgb), 0.8); font-size: 13px; font-weight: 700; transition: transform 0.08s ease, background 0.08s ease, box-shadow 0.08s ease; }
.key-space { width: 300px; }
.key.pressed { transform: translateY(3px); border-bottom-width: 1.5px; background: rgba(var(--violet-rgb), 0.6); color: #fff; box-shadow: 0 0 18px rgba(var(--violet-rgb), 0.8); }
@media (max-width: 640px) { .key { width: 26px; height: 24px; font-size: 11px; } .key-row { gap: 5px; } .key-row:nth-child(2) { padding-left: 14px; } .key-row:nth-child(3) { padding-left: 42px; } .key-space { width: 160px; } .keyboard-screen { font-size: 18px; } }
.community-hero .play-hero-content { padding-bottom: 28px; }
.community-hero.manage .keyboard-wall { opacity: 0.25; }

/* To pick up: nights and games in one list. */
.pick-up-grid { display: grid; gap: 6px 10px; }
@media (min-width: 900px) { .pick-up-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick-up { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease; }
.pick-up:hover { border-color: rgba(var(--accent-rgb), 0.5); transform: translateX(3px); }
.pick-up.your-move { border-color: rgba(var(--cyan-rgb), 0.55); background: linear-gradient(90deg, rgba(var(--cyan-rgb), 0.08), transparent 60%) var(--surface); }
.pick-up-icon { --tone: var(--violet-rgb); display: flex; align-items: center; justify-content: center; width: 34px; flex-shrink: 0; }
.pick-up-icon .tonight-seats span { width: 7px; height: 10px; }
.pick-up-text { display: flex; flex-direction: column; min-width: 0; }
.pick-up-title { font-weight: 600; font-size: 14.5px; }
.pick-up-with { color: var(--text-muted); font-size: 12.5px; }
.pick-up-status { margin-left: auto; color: var(--text-muted); font-size: 12.5px; text-align: right; }
.pick-up.your-move .pick-up-status { color: var(--cyan); font-weight: 600; }

/* The people: a tile each, the avatar large, what is in common under the name. */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.person-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-align: center; transition: border-color 0.15s ease, transform 0.15s ease; }
.person-tile:hover { border-color: rgba(var(--accent-rgb), 0.5); transform: translateY(-3px); }
.person-tile .avatar-large { width: 64px; height: 64px; font-size: 24px; }
.person-tile-name { font-weight: 600; }
.person-tile-note { font-size: 12.5px; color: var(--text-muted); }
.person-tile.member .person-tile-name::after { content: " · club"; color: var(--text-muted); font-weight: 400; font-size: 12px; }

/* A friend's page. */
.friend-head { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.friend-head .avatar-large { width: 80px; height: 80px; font-size: 30px; flex-shrink: 0; }
.friend-start { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.friend-start form { display: inline-flex; align-items: center; gap: 8px; }  /* Total Recall's challenge with what to recall beside it */
.friend-start select { font-size: 14px; }

/* The rites of a level, under what it unlocks: a chip each, lit once done. */
.level-rites { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.level-rung-label { align-self: center; margin-right: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.level-rite { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, 0.25); color: var(--text-muted); font-size: 12.5px; }
.level-rite.done { border: 1px solid rgba(var(--yellow-rgb), 0.55); color: var(--yellow); }
/* The star's pay link: a rite chip that is a button, underlined so it reads as one, until it is paid. */
.rite-pay { cursor: pointer; background: none; font: inherit; font-size: 12.5px; color: var(--text-muted); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.rite-pay:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.45); text-decoration-style: solid; }
.sponsor-dialog { max-width: 440px; padding: 26px 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-raised); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.sponsor-dialog::backdrop { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sponsor-title { margin: 4px 0 10px; font-family: var(--font-display); font-size: 32px; line-height: 1.05; }
.sponsor-text { margin: 0 0 18px; color: var(--text-muted); }
.rite-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.levels-held { color: var(--yellow); }
.levels-invited { margin: 0 0 10px; color: var(--yellow); font-size: 13.5px; }
.invited-note { margin: 10px 0 0; }
.levels-motto { margin: 10px 0 4px; font-family: var(--font-display); font-size: 20px; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.2; color: var(--accent-strong); }

/* Reel Call: the person the house picked, their photo where the poster would be. */
.game-reel { --tone: var(--cyan-rgb); }
.cast-person { align-items: center; text-align: center; }
.cast-avatar { width: 120px; height: 120px; font-size: 44px; margin-bottom: 8px; }
.veiled-link .cast-avatar { box-shadow: none; }

/* ── The account page: where the visitor stands, in brief ──────────── */

.account-standing { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin-bottom: 22px; }
.account-standing-text { display: flex; flex-direction: column; min-width: 0; }
.account-figures { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.account-figures div { display: flex; flex-direction: column; }
.account-figures dt { font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.account-figures dd { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.account-standing .level-links { align-items: flex-start; margin-left: 0; }
@media (min-width: 900px) { .account-standing .level-links { margin-left: auto; align-items: flex-end; } }

/* ── The top ten ─────────────────────────────────────────────────────── */

.top-ten-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.top-ten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.top-ten-row { display: flex; align-items: center; gap: 16px; padding: 8px 14px 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.top-ten-row.dragging { position: relative; z-index: 5; border-color: rgba(var(--accent-rgb), 0.7); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(var(--accent-rgb), 0.3); }
.top-ten-rank { width: 34px; flex-shrink: 0; font-family: var(--font-display); font-size: 26px; color: var(--accent-strong); text-align: center; }
.top-ten-row:first-child .top-ten-rank { color: var(--gold); text-shadow: 0 0 14px rgba(255, 210, 90, 0.6); }
.top-ten-poster { width: 46px; flex-shrink: 0; }
.top-ten-slot { width: 46px; aspect-ratio: 2 / 3; flex-shrink: 0; border-radius: 6px; border: 1px dashed rgba(255, 255, 255, 0.18); }
.top-ten-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.top-ten-title { font-weight: 600; font-size: 15px; }
.top-ten-year, .top-ten-open { color: var(--text-muted); font-size: 13px; }
.top-ten-empty { opacity: 0.6; }
.top-ten-remove .link-button { font-size: 20px; line-height: 1; color: var(--text-muted); }
.top-ten-handle { cursor: grab; padding: 6px 4px; color: var(--text-muted); font-size: 16px; letter-spacing: -2px; touch-action: none; user-select: none; }
.top-ten-handle:active { cursor: grabbing; }
.top-ten-mark { display: inline-block; min-width: 20px; margin-right: 2px; color: var(--accent-strong); font-family: var(--font-display); }
@media (max-width: 900px) { .top-ten-layout { grid-template-columns: 1fr; } }

/* Who in the community watched a movie, at the foot of its page: a row each, the place in their top ten at the end. */
.watchers { max-width: 640px; }
/* Would they recommend it? The question beside one who watched it, then their answer. */
.watcher-ask { gap: 8px; font-size: 13px; }
.watcher-ask form { display: flex; }
.watcher-answer { color: var(--text-muted); white-space: nowrap; }
.watcher-answer.yes { color: var(--green); font-weight: 600; }
.watcher-answer.no { color: var(--text-muted); }
/* The Community page's requests to recommend: the poster, the question, yes or no. */
.recommend-row { gap: 12px; }
.recommend-row .recommend-poster .poster { width: 44px; flex-shrink: 0; }
.recommend-row .friend-name { min-width: 0; }
.recommend-row .friend-name > span:last-child { min-width: 0; }
.watchlist-add { max-width: 640px; margin-bottom: 18px; }
.recommend-form { gap: 10px; }
.club-vote { gap: 6px; }
.club-vote form { display: flex; }
/* Whom to recommend it to: a glass select like the account page's, with its own chevron, so it is the same on every
   phone; 16px, since below that iOS zooms the page in on focus and leaves it so. */
.recommend-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 320px;
    padding: 9px 38px 9px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b8b2c4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.recommend-select:hover { border-color: rgba(255, 255, 255, 0.25); }
.recommend-select:focus { outline: none; border-color: var(--accent); }
.recommend-select option, .recommend-select optgroup { background: var(--surface-raised); color: var(--text); }
.watcher-row .friend-name { min-width: 0; }
.watcher-row .friend-name > span:last-child { min-width: 0; }
.watcher-row .friend-name a { color: var(--text); font-weight: 600; }
.watcher-row .friend-name a:hover { color: var(--accent-strong); }
.watcher-club { margin-left: 6px; color: var(--text-muted); font-size: 13px; font-weight: 400 !important; }
.watcher-club::before { content: "· "; }
.watcher-unnamed { color: var(--text-muted); background: var(--surface); }
.watcher-rank.first { color: var(--gold); text-shadow: 0 0 14px rgba(255, 210, 90, 0.6); }
/* The honourable mentions: posters in a grid, no rank, each with its ways up and out. */
.top-ten-side { display: flex; flex-direction: column; gap: 16px; }
.mentions { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; }
.mention { display: flex; flex-direction: column; gap: 6px; }
.mention-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.mention-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.mention-actions .link-button { color: var(--text-muted); font-size: 12.5px; }
.mention-actions .link-button:hover { color: var(--accent-strong); }

/* ── A daily's result, shared by its link ──────────────────────────── */

.shared-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 560px; }
.shared-who { display: flex; align-items: center; gap: 18px; }
.shared-who .quiz-verdict { margin: 0 0 4px; }
.shared-marks { display: flex; flex-wrap: wrap; gap: 8px; }
.shared-mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(var(--accent-rgb), 0.6); }
.shared-mark.right { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 10px rgba(var(--cyan-rgb), 0.6); }
.shared-note { margin: 0; }

/* ── Selects ─────────────────────────────────────────────────────────── */

/* Every select draws its own chevron, set in from the right edge with room around it, the same everywhere. */
select, .game-with select, .field select, .country-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b8b2c4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px 14px;
}

/* The administrator's page: cards of figures, a label and a figure a row; a job's runs the same, a failed one marked. */
.admin-grid .stat-card h2 { margin-bottom: 6px; }
.admin-card-note { margin: 0 0 14px; }
.admin-card { margin-bottom: 22px; }
.metric-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.metric-row:last-child { border-bottom: none; }
.metric-label { display: flex; flex-direction: column; min-width: 0; }
.metric-note { color: var(--text-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.metric-value { flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.job-run.failed .metric-note { color: var(--accent); }
.job-run.running .metric-value { color: var(--green); }
.admin-users { max-width: 760px; }
.admin-user-end { gap: 12px; font-size: 13px; }
.admin-user-end form { display: flex; }

/* ── The ladder across the Play page ────────────────────────────────── */

/* Every level in a row, a line through their marks, the visitor's own lit with how far they are; the honours from Star
   on in place of a dot. The whole strip is the link to the levels page; on a phone it scrolls sideways. */
.ladder-strip { display: block; padding: 16px 20px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); transition: border-color 0.15s ease; }
.ladder-strip:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.ladder { display: flex; list-style: none; margin: 0; padding: 6px 0 0; overflow-x: auto; scrollbar-width: none; }
.ladder::-webkit-scrollbar { display: none; }
.ladder-rung { position: relative; flex: 1 0 86px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 4px; text-align: center; }
.ladder-rung::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.12); }
.ladder-rung:first-child::before { display: none; }
.ladder-rung.reached::before, .ladder-rung.current::before { background: var(--accent); }
.ladder-rung.held::before { background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.3)); }
.ladder-mark { position: relative; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); background: var(--surface); }
.ladder-rung.reached .ladder-mark, .ladder-rung.current .ladder-mark { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6); }
.ladder-rung.current .ladder-mark { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.25), 0 0 16px rgba(var(--accent-rgb), 0.6); }
.ladder-rung.held .ladder-mark { border-color: var(--accent); }
.ladder-rung.honoured .ladder-mark { width: 34px; height: 34px; margin-top: -6px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ladder-rung.honoured .ladder-mark svg { width: 100%; height: 100%; }
.ladder-rung.honoured.ahead .ladder-mark svg { filter: grayscale(1); opacity: 0.45; }
.ladder-rung.honoured.reached .ladder-mark, .ladder-rung.honoured.current .ladder-mark { filter: drop-shadow(0 0 8px rgba(233, 200, 122, 0.8)); }
.ladder-name { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.1; white-space: nowrap; }
.ladder-rung.ahead .ladder-name { color: var(--text-muted); }
.ladder-threshold { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ladder-rung.current .ladder-threshold { color: var(--accent-strong); }
.ladder-you { margin-top: 2px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }
.ladder-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 14px; }

/* ── A badge announced ──────────────────────────────────────────────── */

/* The card over the page for a badge just earned: its medal large in its colour, its name and its words, one card a
   badge, the next on the button. */
.badge-dialog { text-align: center; }
.badge-dialog .wrapped-eyebrow { margin-bottom: 14px; }
.badge-step { --tone: var(--accent-rgb); display: flex; flex-direction: column; align-items: center; }
.badge-step.tone-pink { --tone: var(--accent-rgb); }
.badge-step.tone-cyan { --tone: var(--cyan-rgb); }
.badge-step.tone-violet { --tone: var(--violet-rgb); }
.badge-step.tone-orange { --tone: var(--orange-rgb); }
.badge-step.tone-green { --tone: var(--green-rgb); }
.badge-step.tone-yellow { --tone: var(--yellow-rgb); }
.badge-step[hidden] { display: none; }
.badge-medal-large { width: 96px; height: 96px; margin-bottom: 16px; border-color: rgba(var(--tone), 0.8); background: radial-gradient(circle at 35% 30%, rgba(var(--tone), 0.35), rgba(var(--tone), 0.08) 70%); color: rgb(var(--tone)); box-shadow: 0 0 30px rgba(var(--tone), 0.45); animation: badge-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
.badge-medal-large .badge-icon { width: 48px; height: 48px; }
.badge-dialog .sponsor-title { margin: 0 0 6px; }
.badge-dialog .sponsor-text { margin: 0 0 10px; }
.badge-dialog .badge-shelf-title { margin: 0 0 18px; }
.badge-dialog .invite-buttons { justify-content: center; }
@keyframes badge-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .badge-medal-large { animation: none; } }