:root {
        color-scheme: dark;
        --bg: #121212;
        --bg-soft: #1a1a1a;
        --ink: #E0E0E0;
        --muted: #B0B0B0;
        --placeholder: #8a8a8a;
        /* Borders of inputs and buttons: 3:1 against the page, so the control is visible (WCAG 1.4.11). */
        --control-border: #6e6e6e;
        --accent: #888888;
        --accent-strong: #777777;
        --card: #1e1e1e;
        --border: #444444;
        --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
        --header-bg: rgba(18, 18, 18, 0.85);
        --on-accent: #121212;
        --brand-blue: #00a4fc;
        --primary: #00a4fc;
        --primary-strong: #35b8ff;
        --on-primary: #04121c;
        --vote-up-flash: #4ade80;
        --vote-down-flash: #f87171;
        --badge-paywall: #4ade80;
        --badge-nsfw: #f87171;
        --badge-new: #7dd3fc;
        --played-ok: #4ade80;
        /* Played cards: a slightly darker card, title in --muted (about 8:1 on it). */
        --played-bg: #171717;
        --warn: #fbbf24;
        --title-ink: #f2f2f2;
        --reset-bar: #7dd3fc;
        --reset-bar-soon: #f87171;
        --heat-0: #2a2a2a;
        --heat-1: #0e4a6e;
        --heat-2: #0b78ad;
        --heat-3: #00a4fc;
        --heat-4: #7dd3fc;
        --sp-1: 0.25rem;
        --sp-2: 0.5rem;
        --sp-3: 0.75rem;
        --sp-4: 1rem;
        --sp-5: 1.5rem;
        --sp-6: 2rem;
        --row-hover: #262626;
        --stream-bg: #000000;
        --stream-row: #0d0d0d;
        --stream-ink: #ffffff;
        --stream-sep: #6b6b6b;
        --stream-accent: #38bdf8;
        --stream-reset: #fde047;
        --stream-bar: #111111;
        /* Stream mode: played rows' text (about 6:1 on --stream-row). */
        --stream-done: #8f8f8f;
      }
      html[data-theme="light"] {
        color-scheme: light;
        --bg: #f5f5f7;
        --bg-soft: #ececf0;
        --ink: #1c1c1e;
        --muted: #5c5c63;
        --placeholder: #66666d;
        --control-border: #7b7b83;
        --accent: #4b5563;
        --accent-strong: #374151;
        --card: #ffffff;
        --border: #c9c9d1;
        --shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
        --header-bg: rgba(245, 245, 247, 0.85);
        --on-accent: #ffffff;
        --brand-blue: #006db3;
        --primary: #006db3;
        --primary-strong: #005a94;
        --on-primary: #ffffff;
        --vote-up-flash: #15803d;
        --vote-down-flash: #b91c1c;
        --badge-paywall: #166534;
        --badge-nsfw: #b91c1c;
        --badge-new: #0369a1;
        --played-ok: #166534;
        --played-bg: #ececf0;
        --warn: #92400e;
        --title-ink: #111114;
        --reset-bar: #0ea5e9;
        --reset-bar-soon: #dc2626;
        --heat-0: #e4e4ea;
        --heat-1: #b6dcf2;
        --heat-2: #6ab6e3;
        --heat-3: #1f8fcf;
        --heat-4: #005a94;
        --row-hover: #f0f0f4;
        --stream-bg: #ffffff;
        --stream-row: #ffffff;
        --stream-ink: #000000;
        --stream-sep: #3a3a40;
        --stream-accent: #005a94;
        --stream-reset: #8a1c00;
        --stream-bar: #eeeef2;
        --stream-done: #6b6b6b;
      }
      * { box-sizing: border-box; }
      /* Elements toggled with the hidden attribute stay hidden even when a rule gives them a display value. */
      [hidden] { display: none !important; }
      body {
        margin: 0;
        color: var(--ink);
        font-family: "Manrope", "IBM Plex Sans", "Segoe UI", "Helvetica Neue", sans-serif;
        background: var(--bg);
      }
      header.site-header {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        padding: 0.8rem 1.5rem;
        border-bottom: 1px solid var(--border);
        background: var(--header-bg);
        backdrop-filter: blur(10px);
        position: sticky;
        top: 0;
        z-index: 20;
      }
      /* Mirrors the logo: "0x9" with the x in the logo's blue. */
      .brand { font-weight: 800; font-size: 1.45rem; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; margin-right: 0.5rem; }
      .brand-x { color: var(--brand-blue); }
      .skip-link { position: absolute; left: 0.75rem; top: -4rem; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem; background: var(--primary); color: var(--on-primary); border-radius: 8px; font-weight: 700; text-decoration: none; }
      .skip-link:focus { top: 0.75rem; }
      main:focus { outline: none; }
      .site-nav a[aria-current="page"], .nav-menu-panel a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45rem; text-decoration-color: var(--brand-blue); }
      .site-nav { display: flex; align-items: center; gap: 1rem; min-width: 0; }
      .nav-extra { display: contents; }
      .site-nav a, .nav-menu-panel a { color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
      .site-nav a:hover, .nav-menu-panel a:hover { color: var(--accent); }
      .header-tools { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; white-space: nowrap; color: var(--muted); font-size: 0.9rem; }
      .theme-toggle { padding: 0.25rem 0.5rem; cursor: pointer; }
      .logout-form { display: inline; margin: 0; }
      .logout-form button { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; }
      /* Search: an inline field on wide screens; at 1200px and below an icon that opens the field over the whole header. */
      .header-search { position: relative; display: flex; align-items: center; flex: 0 1 260px; min-width: 120px; margin-left: auto; }
      .header-search input { width: 100%; min-width: 0; padding: 0.45rem 2.1rem 0.45rem 0.7rem; border-radius: 999px; border: 1px solid var(--control-border); background: var(--bg-soft); color: var(--ink); font-size: 0.92rem; }
      .header-search input::-webkit-search-cancel-button { display: none; }
      .header-search-go { position: absolute; right: 0.15rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
      .header-search-go:hover { color: var(--ink); }
      .header-search-go svg, .search-toggle svg { width: 1.05rem; height: 1.05rem; }
      .header-search-close, .search-toggle { display: none; }
      .header-search + .header-tools { margin-left: 0; }
      @media (min-width: 1201px) { .site-header > .site-nav { flex: none; } }
      .search-toggle { align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0; border: 1px solid var(--control-border); border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
      .search-toggle svg { width: 1.2rem; height: 1.2rem; }
      @media (max-width: 1200px) {
        .search-toggle { display: inline-flex; }
        .header-search { display: none; position: absolute; inset: 0; z-index: 5; flex: none; margin: 0; padding: 0 0.75rem; gap: 0.5rem; background: var(--bg); border-bottom: 1px solid var(--border); }
        .site-header.searching .header-search { display: flex; }
        .header-search input { flex: 1; width: auto; min-height: 44px; font-size: 1rem; padding-right: 2.6rem; }
        .header-search-go { right: calc(0.75rem + 44px + 0.5rem + 0.2rem); }
        .header-search .search-suggest { left: 0.75rem; right: 0.75rem; width: auto; }
        .header-search-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: 1.1rem; cursor: pointer; }
      }
      .nav-menu { display: none; position: relative; }
      .nav-menu > summary { list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; border: 1px solid var(--control-border); border-radius: 8px; font-size: 1.15rem; color: var(--ink); }
      .nav-menu > summary::-webkit-details-marker { display: none; }
      .menu-dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #dc2626; }
      .nav-menu-panel { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 230px; display: flex; flex-direction: column; padding: 0.4rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); z-index: 30; white-space: normal; }
      .nav-menu-panel > a { padding: 0.75rem; border-radius: 8px; }
      .nav-menu-panel > a.menu-narrow-only { display: none; }
      .nav-menu-theme { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; color: var(--ink); font-weight: 600; }
      .nav-menu-account { border-top: 1px solid var(--border); margin-top: 0.3rem; padding: 0.75rem 0.75rem 0.35rem; color: var(--muted); }
      main { max-width: 1200px; margin: 1rem auto; padding: 0 1rem 2rem; }
      main.narrow { max-width: 820px; }
      .changelog h2 { font-size: 1.1rem; margin: 1.75rem 0 0.5rem; }
      .changelog li { margin: 0.35rem 0; line-height: 1.5; }
      h1, h2 { letter-spacing: 0.01em; }
      .hero {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: var(--shadow);
        padding: 1.25rem;
      }
      .hero { margin-top: 0; }
      .hero h1 { margin-top: 0; }
      .hero p { color: var(--muted); }
      .about { margin-top: 2rem; }
      .about p { color: var(--muted); max-width: 70ch; line-height: 1.6; }
      .about-categories { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
      .about-categories .tag { margin: 0; }
      /* Verified developer: an outlined blue pill after the category pills, so it doesn't read as another category. */
      .fandles { margin-top: 2rem; }
      .fandle-form { display: inline; margin: 0; }
      .fandle-join .actions { margin-top: 0.5rem; }
      .category-pills [hidden] { display: none !important; }
      button.tag.pill-more { cursor: pointer; font-family: inherit; line-height: inherit; font-weight: 700; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--control-border); }
      button.tag.pill-more:hover { color: var(--ink); }
      .tag.dev-pill { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--brand-blue); background: transparent; border-color: var(--brand-blue); font-weight: 700; text-decoration: none; }
      /* A developer without a public profile: same look, but plain text. Taps pass through to the card behind it. */
      .tag.dev-pill.dev-pill-static { pointer-events: none; }
      .dev-pill-static::after { display: none; }
      .tag.dev-pill svg { width: 0.95em; height: 0.95em; flex: none; }
      .tag.dev-pill .dev-pill-name { display: block; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .pill-count { font-weight: 600; opacity: 0.9; font-variant-numeric: tabular-nums; margin-left: 0.15rem; }
      /* Shared by links and <button>s, so both get the same font, height and text position. */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.55rem 0.9rem;
        border: 1px solid transparent;
        border-radius: 9px;
        background: var(--primary);
        color: var(--on-primary);
        font: inherit;
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
        cursor: pointer;
      }
      /* Two equal-width buttons side by side, centred; stacked only on very narrow phones where they can't fit. */
      /* Home: Popular Today and Newly Added side by side, one card per row, on wide screens; stacked (5 each) otherwise. */
      .home-columns ul.games { grid-template-columns: 1fr; }
      /* Time left before today's game resets: a light blue line along the bottom of the card (see RESET_LOCALIZE_SCRIPT). */
      li.reset-bar { position: relative; }
      ul.games.compact li.reset-bar, .rotation-list li.reset-bar { padding-bottom: calc(0.65rem + 5px); }
      li.reset-bar::after { content: ""; position: absolute; left: 10px; bottom: 4px; height: 3px; width: calc((100% - 20px) * var(--reset-left, 0)); border-radius: 2px; background: var(--reset-bar); opacity: 0.85; pointer-events: none; }
      /* Under two hours to the reset and not played yet: the bar turns red. */
      li.reset-bar.reset-soon::after { background: var(--reset-bar-soon); }
      /* Played since the last reset (this browser): a muted card and a dimmer title, both at AA contrast in each theme.
         Not whole-card opacity, which pushed the small text below 4.5:1. Back to full title colour on hover or focus. */
      html:not(.dgl-stream) li.played { background: var(--played-bg); transition: background-color 0.15s ease; }
      html:not(.dgl-stream) li.played .game-title { color: var(--muted); transition: color 0.15s ease; }
      html:not(.dgl-stream) li.played:hover .game-title, html:not(.dgl-stream) li.played:focus-within .game-title { color: var(--title-ink); }
      .twitch-watch { text-align: center; }
      .btn:hover { background: var(--primary-strong); }
      .btn-twitch { gap: 0.5rem; background: #9146FF; border-color: #9146FF; color: #fff; }
      .btn-discord { gap: 0.5rem; background: #5865F2; border-color: #5865F2; color: #fff; }
      .btn-twitch:hover { background: #9146FF; filter: brightness(1.1); }
      .btn-discord:hover { background: #5865F2; filter: brightness(1.1); }
      .linked-accounts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
      .linked-accounts li { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; }
      .linked-account-name { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--ink); flex: 1; }
      .linked-account-status { color: #22c55e; font-weight: 700; }
      .link-account-form { margin: 0; }
      .external-arrow { font-size: 0.9em; opacity: 0.85; }
      /* Twitch's own live red, white text. */
      .btn-twitch { white-space: nowrap; max-width: 100%; }
      .btn-twitch > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
      /* Phones: the Twitch icon says where the button goes, so "on Twitch" is dropped to keep it on one line. */
      @media (max-width: 480px) { .btn-twitch .wide-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
      .live-badge { background: #eb0400; color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.15rem 0.4rem; border-radius: 4px; line-height: 1.2; }
      .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
      @media (min-width: 800px) {
        .home-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; align-items: start; }
      }
      @media (max-width: 799px) {
        .home-columns ul.games li:nth-child(n + 6) { display: none; }
      }
      .actions.home-actions { display: grid; grid-template-columns: 1fr 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
      .home-actions .btn { min-width: 0; white-space: nowrap; }
      ul.games { list-style:none; padding:0; display:grid; gap:0.8rem; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
      ul.games li { display:flex; background: var(--card); border:1px solid var(--border); border-radius:12px; padding:0.8rem; box-shadow: var(--shadow); }
      ul.games.compact { gap: 0.6rem; }
      ul.games.compact li { padding: 0.65rem 0.75rem; border-radius: 10px; }
      /* Card: name and buttons on the first line, tags and stats on the second. */
      .game-row { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; }
      .game-top { display: flex; align-items: flex-start; gap: 0.5rem; }
      .game-name { flex: 1; min-width: 0; padding-top: 0.2rem; overflow-wrap: break-word; }
      .game-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
      .game-sub .category-pills { margin-top: 0; }
      .game-sub .tag { font-size: 0.75rem; padding: 0.1rem 0.4rem; }
      .game-sub .meta { margin: 0; }
      /* Game names, the same on every card and row. */
      /* anywhere (not break-word): a long unbroken word then counts as breakable in the card's min-content width, so it can't widen the card. */
      .game-title { font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--title-ink); text-decoration-color: var(--border); overflow-wrap: anywhere; }
      .game-title:hover { text-decoration-color: currentColor; }
      /* The game name's link stretches over the whole card, so a tap anywhere opens the game; buttons and tags sit above it. */
      .card-click { position: relative; }
      .card-click .card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
      .card-click button, .card-click .btn-details, .card-click .category-pill, .card-click .drag { position: relative; z-index: 1; }
      .card-click:hover { border-color: var(--accent); }
      .list-sort { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
      .rotation-list.sorted-by-reset .drag, .rotation-list.sorted-by-reset .reorder-controls { display: none; }
      .game-row .meta, .rotation-list .item-main .meta { color: var(--muted); font-size: 0.85rem; }
      .status:empty { margin: 0; }
      /* Vote counts: equal-width digits and a minimum width, so the buttons line up from row to row. */
      .compact-actions button, .game-actions button { font-variant-numeric: tabular-nums; }
      .compact-actions button[data-list-vote] { min-width: 3.3rem; }
      /* With a mouse the card is the cue, so the title underline only shows on hover. Touch keeps it. */
      @media (hover: hover) {
        .card-click .game-title { text-decoration-color: transparent; }
        .card-click:hover .game-title, .card-click .game-title:focus-visible { text-decoration-color: currentColor; }
      }
      .meta > :not([hidden]) ~ :not([hidden])::before { content: "·"; margin: 0 0.4em; }
      /* "83% liked" and "Resets in 3h 12m" never break mid-phrase; a part that doesn't fit moves to the next line. */
      .meta > * { white-space: nowrap; }
      /* Games added to or removed from a curated list while it's open. */
      .row-enter { animation: row-enter 0.9s ease-out; }
      @keyframes row-enter {
        from { opacity: 0; transform: translateY(-6px); box-shadow: 0 0 0 2px var(--brand-blue); }
        60% { opacity: 1; transform: none; box-shadow: 0 0 0 2px var(--brand-blue); }
        to { box-shadow: 0 0 0 2px transparent; }
      }
      .row-leave { opacity: 0; transform: scale(0.98); transition: opacity 0.3s ease, transform 0.3s ease; }
      @media (prefers-reduced-motion: reduce) {
        @keyframes row-enter { from { opacity: 0; } to { opacity: 1; } }
        .row-leave { transform: none; }
      }
      .meta:not(:has(> :not([hidden]))) { display: none; }
      /* A vote count or rating that just changed (live update or the viewer's own vote) pulses once. */
      .count-bump { display: inline-block; animation: count-bump 0.7s ease-out; }
      .count-bump.count-up { --bump-color: var(--vote-up-flash); }
      .count-bump.count-down { --bump-color: var(--vote-down-flash); }
      @keyframes count-bump {
        0% { transform: scale(1); color: inherit; }
        25% { transform: scale(1.3); color: var(--bump-color, var(--brand-blue)); }
        100% { transform: scale(1); color: inherit; }
      }
      .game-row .compact-actions { display: flex; gap: 0.3rem; align-items: center; flex-shrink: 0; }
      .btn-details {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.3rem 0.55rem;
        font-size: 0.85rem;
        text-decoration: none;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--bg-soft);
        color: var(--ink);
        font-weight: bold;
      }
      .btn-details:hover { background: var(--border); }
      .card-actions { display:flex; gap:0.35rem; align-items:center; flex-wrap:nowrap; margin-left:auto; }
      .game-row .compact-actions button, .rotation-list .compact-actions button, .card-actions button {
        padding: 0.3rem 0.55rem;
        font-size: 0.85rem;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--bg-soft);
        color: var(--ink);
        font-weight: bold;
        white-space: nowrap;
        cursor: pointer;
      }
      .game-row .compact-actions button:hover, .rotation-list .compact-actions button:hover, .card-actions button:hover {
        background: var(--border);
      }
      .rotation-list .reorder-controls { display:inline-flex; gap:0.25rem; }
      .panel {
        margin: 1rem 0;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card);
        box-shadow: var(--shadow);
      }
      .panel > h2:first-child { margin-top: 0; }
      .panel > h2:last-child { margin-bottom: 0.5rem; }
      .panel > p:last-child { margin-bottom: 0; }
      .panel > form:last-child { margin-bottom: 0; }
      .admin-grid { display:grid; gap:0.8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
      .stack { display:flex; flex-direction:column; gap:0.8rem; }
      .stack-form { display:flex; flex-direction:column; gap:0.6rem; }
      /* A select with a very long option would otherwise stretch the form (and the page) past a phone screen. */
      .stack-form label, .stack-form select, .stack-form input, .stack-form textarea { min-width: 0; max-width: 100%; }
      /* A select sizes to its longest option (time zone names), so it fills the column instead of pushing the form wider than the screen. */
      .stack-form select { width: 100%; }
      .stack-form fieldset { min-width: 0; max-width: 100%; }
      .stack-form [data-reset-group] { min-width: 0; }
      .stack-form [data-reset-group] > label { display: flex; flex-direction: column; gap: 0.25rem; }
      textarea { padding:0.5rem; border-radius:6px; border:1px solid var(--control-border); background:var(--bg-soft); color:var(--ink); }
      fieldset { border:1px solid var(--border); border-radius:8px; padding:0.6rem; }
      .check { display:inline-flex; align-items:center; gap:0.35rem; margin-right:0.7rem; margin-bottom:0.4rem; }
      .status { min-height: 1.2rem; color:var(--accent); font-weight: 600; }
      .status.error { color: #cc6666; }
      .actions { display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:0.8rem; }
      button.active { background: var(--accent); color: var(--on-accent); }
      .tag { display:inline-block; margin-right:0.35rem; margin-bottom:0.35rem; padding:0.2rem 0.45rem; border-radius:999px; border:1px solid var(--border); background:var(--bg-soft); font-size: 0.85rem; color:var(--muted); }
      .profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
      .profile-head h1 { margin: 0; overflow-wrap: anywhere; }
      .profile-avatar { width: 96px; height: 96px; border-radius: 50%; flex: none; object-fit: cover; background: var(--bg-soft); border: 1px solid var(--border); }
      .profile-avatar-initial { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 800; color: var(--muted); }
      .profile-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
      .profile-badge { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem; background: var(--bg-soft); }
      .profile-badge .verified-badge { margin: 0; }
      .profile-rotation { padding-left: 1.4rem; }
      #public-profile-form input[type="text"] { width: 100%; box-sizing: border-box; }
      .profile-preview { margin-bottom: 1rem; }
      @media (max-width: 480px) { .profile-head { flex-direction: column; align-items: flex-start; } }
      .developer-line { margin: 0.25rem 0; color: var(--muted); }
      .developer-line .verified-badge { margin-left: 0; margin-right: 0.2rem; }
      .claim-panel pre { overflow-x: auto; margin: 0.4rem 0; padding: 0.5rem 0.7rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; }
      .claim-panel textarea { width: 100%; }
      .verified-badge { display:inline-flex; vertical-align:middle; margin-left:0.35rem; font-size:0.9em; }
      .paywall-badge { color: var(--badge-paywall); font-weight:700; margin-left:0.3rem; font-size:1em; }
      .nsfw-badge { color: var(--badge-nsfw); font-weight:700; margin-left:0.3rem; font-size:0.75em; font-variant:small-caps; letter-spacing:0.05em; }
      .feed-link { margin: 0 0 0.5rem; font-size: 0.9em; }
      .similar-results { margin-top: 1.5rem; }
      .similar-title { font-size: 1rem; margin: 0 0 0.5rem; color: var(--muted); }
      .did-you-mean { margin: 0.5rem 0 0; font-weight: 600; }
      @media (max-width: 700px) { .feed-link a { display: inline-flex; align-items: center; min-height: 44px; } }
      .duplicate-warning { color: var(--warn); font-weight: 600; }
      .played-pill { display: inline-block; margin-left: 0.3rem; padding: 0 0.45em; border: 1px solid var(--played-ok); border-radius: 999px; color: var(--played-ok); font-size: 0.7em; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; vertical-align: middle; white-space: nowrap; }
      .played-pill[hidden] { display: none; }
      .list-played-btn.is-played { color: var(--played-ok); border-color: var(--played-ok); }
      .played-count, .ov-played { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
      html:not(.dgl-stream) .played-count { display: none; }
      .played-count[hidden], .ov-played[hidden] { display: none !important; }
      .stream-settings textarea { flex: 1; min-width: 0; font: inherit; font-size: 0.8rem; resize: none; }
      .stream-settings .ss-badge-preview { display: block; max-width: 100%; height: auto; margin: 0.4rem 0; border-radius: 8px; }
      .new-badge { display: inline-block; margin-left: 0.3rem; padding: 0 0.4em; border: 1px solid var(--badge-new); border-radius: 999px; color: var(--badge-new); font-size: 0.7em; font-weight: 700; line-height: 1.6; letter-spacing: 0.03em; vertical-align: middle; white-space: nowrap; }
      [data-share] { min-height: 44px; }
      .moderation-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.3em;
        height: 1.3em;
        padding: 0 0.35em;
        margin-left: 0.3rem;
        border-radius: 9999px;
        background: #dc2626;
        color: #fff;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1;
        vertical-align: middle;
      }
      .moderation-badge-submissions { background: #16a34a; }
      button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--control-border); }
      button.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
      .rotation-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:0.7rem; }
      .rotation-list li { display:flex; align-items:center; gap:0.75rem; border:1px solid var(--border); border-radius:10px; padding:0.65rem; background:var(--card); }
      .rotation-list li > .item-main { flex: 1; min-width: 0; }
      /* Long names wrap (as on the game cards) rather than being cut off, so the $ / nsfw badges are never hidden. */
      .rotation-list li > .item-main > a { display: block; overflow-wrap: break-word; }
      .rotation-list li > .item-main > a .paywall-badge, .rotation-list li > .item-main > a .nsfw-badge { white-space: nowrap; }
      .rotation-list .item-main .tag { font-size: 0.75rem; padding: 0.1rem 0.4rem; }
      .category-pills { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.3rem; }
      .category-pills:empty { display:none; margin-top:0; }
      .category-pills .tag { margin:0; }
      .category-pill { text-decoration:none; font-weight:700; }
      .drag { cursor: grab; font-weight: 700; color:var(--muted); touch-action: none; }
      .rotation-list li.dragging { opacity: 0.55; }
      .weekday-controls { display:flex; gap:0.4rem; flex-wrap:wrap; }
      .weekday-controls label { display:inline-flex; align-items:center; gap:0.2rem; font-size:0.85rem; color:var(--muted); }
      .reorder-controls { display:inline-flex; gap:0.35rem; }
      .reorder-controls button { padding: 0.3rem 0.45rem; font-size: 0.78rem; }
      .game-search-wrap { position: relative; width: 100%; max-width: 400px; }
      .game-search-list { position: absolute; top: 100%; left: 0; right: 0; max-height: 240px; overflow-y: auto; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; z-index: 10; display: none; }
      .game-search-list.open { display: block; }
      .game-search-item { padding: 0.5rem 0.65rem; cursor: pointer; color: var(--ink); font-size: 0.9rem; }
      .game-search-item:hover, .game-search-item.active { background: var(--card); }
      .game-search-item small { color: var(--muted); }
      /* Curated list suggestions: a collapsed panel above the list on phones, a column beside it on wide screens. */
      .suggest-panel { margin: 0.75rem 0; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
      .suggest-panel > summary { cursor: pointer; padding: 0.75rem 0.85rem; font-weight: 700; }
      .suggest-count { color: var(--muted); font-weight: 600; }
      .suggest-body { padding: 0 0.85rem 0.85rem; }
      .suggest-help, .suggest-empty { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.65rem; }
      .suggest-empty { margin: 0; }
      .suggest-form { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
      .suggest-form .game-search-wrap { flex: 1; min-width: 0; max-width: none; }
      .suggest-form input { width: 100%; box-sizing: border-box; }
      .suggest-list { list-style: none; padding: 0; margin: 0 0 0.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
      .suggest-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); }
      /* The buttons drop below the title when the panel is too narrow for both. */
      .suggest-main { flex: 1 1 150px; min-width: 0; }
      .suggest-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
      .suggest-main .category-pills { margin-top: 0.25rem; }
      .suggest-main .category-pill { font-size: 0.75rem; }
      .suggest-title { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
      .suggest-title:hover { color: var(--accent); }
      .suggest-item button { padding: 0.2rem 0.5rem; font-size: 0.85rem; white-space: nowrap; position: relative; }
      .suggest-item button::after { content: ""; position: absolute; inset: -8px -2px; }
      /* Curated list pages: the list is the hero on desktop, with one sidebar (Fan-dles and Suggestions as tabs) that can
         collapse to a rail. Phones keep the List / Fan-dles / Suggestions tabs. */
      .tab-count { min-width: 1.5rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--ink); font-size: 0.78rem; font-weight: 700; line-height: 1.35; text-align: center; font-variant-numeric: tabular-nums; }
      [aria-selected="true"] > .tab-count { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
      .tab-count:empty { display: none; }
      .list-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
      .list-bar-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: 1.2rem; }
      .list-bar .list-sort { margin: 0; }
      .list-main .rotation-list { margin: 0; }
      .rotation-list li.card-click { transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
      .rotation-list li.card-click:hover { background: var(--row-hover); border-color: var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
      .list-sidebar { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: var(--sp-3); margin-top: var(--sp-4); }
      .side-head { display: none; }
      .list-sidebar .fandles { margin-top: 0; }
      .list-sidebar .fandles-head p { margin: 0 0 var(--sp-3); font-size: 0.88rem; }
      .list-sidebar .fandles-head h2 { margin: 0 0 var(--sp-1); font-size: 1.15rem; }
      .list-sidebar .fandles-body ul.games { margin-top: 0; }
      .list-sidebar .suggest-panel { margin: 0; border: 0; background: none; }
      .list-sidebar .suggest-panel > summary { padding: 0 0 var(--sp-2); font-size: 1.15rem; }
      .list-sidebar .suggest-body { padding: 0; }
      .suggest-list { gap: var(--sp-1); }
      .suggest-item { padding: 0.4rem 0.55rem; gap: var(--sp-2); flex-wrap: nowrap; }
      .suggest-item:has(.suggest-accept) { flex-wrap: wrap; }
      .suggest-main { flex: 1 1 8rem; }
      .suggest-sub { margin-top: 0.1rem; color: var(--muted); font-size: 0.82rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .suggest-more { display: block; width: 100%; min-height: 44px; margin-top: var(--sp-2); background: none; border: 1px dashed var(--border); color: var(--ink); font-weight: 700; }
      .suggest-more:hover { background: var(--bg-soft); }
      .suggest-empty { margin: 0; }
      .list-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: var(--sp-5) 0 var(--sp-3); }
      .list-head h1 { margin: 0; flex: 0 1 auto; min-width: 0; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.15; overflow-wrap: anywhere; }
      .list-head .twitch-watch { margin: 0; flex: 1 1 100%; }
      .list-head-actions { display: flex; align-items: center; gap: var(--sp-2); position: relative; }
      .list-head-actions > button, .list-head-actions > .btn, .head-more > button { min-height: 44px; white-space: nowrap; }
      .head-more { position: relative; }
      .head-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 15rem; display: flex; flex-direction: column; gap: 2px; padding: 0.35rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); }
      .head-more-menu > * { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 44px; padding: 0.5rem 0.75rem; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
      .head-more-menu > *:hover, .head-more-menu > *:focus-visible { background: var(--bg-soft); color: var(--ink); }
      .list-desc-wrap { margin: 0 0 var(--sp-4); max-width: 75ch; }
      .list-desc { margin: 0; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
      .list-desc.expanded { display: block; }
      .list-desc-more { position: relative; padding: 0; margin-top: var(--sp-1); background: none; border: 0; color: var(--primary); font-weight: 700; cursor: pointer; text-decoration: underline; }
      .list-desc-more::after { content: ""; position: absolute; inset: -12px -10px; }
      .list-meta-line { margin: 0 0 var(--sp-3); color: var(--muted); font-size: 0.9rem; }
      .stream-bar, .stream-exit { display: none; }
      @media (min-width: 900px) {
        .list-head .twitch-watch { flex: 0 0 auto; }
        .list-head-actions { margin-left: auto; flex-wrap: nowrap; }
        main.list-page { max-width: 1180px; }
        .list-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--sp-5); align-items: start; }
        .list-sidebar { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; margin-top: 0; }
        .side-head { display: flex; align-items: center; gap: var(--sp-2); margin: calc(var(--sp-1) * -1) 0 var(--sp-3); border-bottom: 1px solid var(--border); }
        .side-tabs { display: flex; flex: 1; min-width: 0; gap: var(--sp-1); }
        .side-tabs [role="tab"] { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.4rem 0.3rem; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--muted); font-weight: 700; font-size: 0.95rem; white-space: nowrap; cursor: pointer; }
        .side-tabs [role="tab"]:hover { color: var(--ink); }
        .side-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand-blue); }
        .side-ico { display: none; flex: none; }
        html.dgl-sb-collapsed .side-ico { display: block; }
        .side-toggle { flex: none; min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--muted); border-radius: 8px; cursor: pointer; }
        .side-toggle:hover { color: var(--ink); background: var(--bg-soft); }
        .side-toggle svg { transition: transform 0.15s ease; }
        .list-layout[data-side="fandles"] .suggest-panel, .list-layout[data-side="suggest"] .fandles { display: none; }
        /* The tab names the section on desktop. */
        .list-sidebar .suggest-panel > summary, .list-sidebar .fandles-head h2 { display: none; }
        .list-main .rotation-list li { padding: 0.8rem 0.95rem; }
        .list-main .game-title { font-size: 1.2rem; }
        .rotation-list .item-main .meta { font-size: 0.9rem; }
        /* Collapsed: a slim rail with the tab icons and their counts. */
        html.dgl-sb-collapsed .list-layout { grid-template-columns: minmax(0, 1fr) 64px; }
        html.dgl-sb-collapsed .list-sidebar { padding: var(--sp-2) 0; overflow: visible; }
        html.dgl-sb-collapsed .list-sidebar .fandles, html.dgl-sb-collapsed .list-sidebar .suggest-panel { display: none !important; }
        html.dgl-sb-collapsed .side-head { flex-direction: column; align-items: stretch; gap: var(--sp-1); margin: 0; border-bottom: 0; }
        html.dgl-sb-collapsed .side-toggle { order: -1; align-self: center; }
        html.dgl-sb-collapsed .side-toggle svg { transform: rotate(180deg); }
        html.dgl-sb-collapsed .side-tabs { flex-direction: column; gap: var(--sp-1); }
        html.dgl-sb-collapsed .side-tabs [role="tab"] { flex-direction: column; gap: 0.2rem; min-height: 56px; border-bottom: 0; border-left: 3px solid transparent; padding: 0.3rem 0; }
        html.dgl-sb-collapsed .side-tabs [role="tab"][aria-selected="true"] { border-left-color: var(--brand-blue); }
        html.dgl-sb-collapsed .side-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
      }
      @media (min-width: 1100px) {
        main.list-page { max-width: 1300px; }
        .list-layout { grid-template-columns: minmax(0, 1fr) 340px; }
      }
      @media (min-width: 1400px) {
        main.list-page { max-width: 1480px; }
        .list-layout { grid-template-columns: minmax(0, 1fr) 360px; }
      }
      @media (min-width: 1800px) {
        main.list-page { max-width: 1680px; }
        .list-main .rotation-list li { padding: 0.95rem 1.1rem; }
        .list-main .game-title { font-size: 1.3rem; }
      }
      /* Phones: tabs for the list, Fan-dles and suggestions (the script sets data-tab; without it everything shows). */
      .list-tabs { display: flex; gap: 0.25rem; margin: 1rem 0 0.5rem; border-bottom: 1px solid var(--border); }
      .list-tabs [role="tab"] { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.4rem 0.2rem; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--muted); font-weight: 700; font-size: 0.92rem; white-space: nowrap; cursor: pointer; }
      .list-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand-blue); }
      /* Narrow phones: the count sits under the name so three tabs never run out of room. */
      @media (max-width: 419px) {
        .list-tabs [role="tab"] { flex-direction: column; gap: 0.15rem; min-height: 52px; padding: 0.35rem 0.1rem; }
      }
      @media (max-width: 359px) { .list-tabs [role="tab"] { font-size: 0.8rem; } }
      @media (min-width: 900px) { .list-tabs { display: none; } }
      @media (max-width: 899px) {
        .list-sidebar { display: contents; }
        .list-layout[data-tab="list"] .fandles, .list-layout[data-tab="list"] .suggest-panel,
        .list-layout[data-tab="fandles"] .list-main, .list-layout[data-tab="fandles"] .suggest-panel,
        .list-layout[data-tab="suggest"] .list-main, .list-layout[data-tab="suggest"] .fandles { display: none; }
        .list-layout[data-tab] .suggest-panel { margin-top: 0; }
        .list-layout[data-tab] .suggest-panel > summary { display: none; }
        .list-layout[data-tab] .fandles { margin-top: 0; }
        .list-bar .list-bar-title { display: none; }
        .list-bar { justify-content: flex-start; }
      }
      /* Stream mode (?view=stream, or the header toggle): large type for a scaled-down capture. No site chrome, no
         sidebar, numbered rows, prominent reset countdowns, and a footer bar with where to suggest and the top suggestions. */
      html.dgl-stream body { background: var(--stream-bg); color: var(--stream-ink); padding-bottom: 5.5rem; }
      html.dgl-stream header.site-header, html.dgl-stream body > footer, html.dgl-stream .skip-link, html.dgl-stream .list-head-actions,
      html.dgl-stream .twitch-watch, html.dgl-stream .list-desc-wrap, html.dgl-stream .list-meta-line, html.dgl-stream .creator-note,
      html.dgl-stream .list-tabs, html.dgl-stream .list-sidebar, html.dgl-stream .list-bar, html.dgl-stream .fandle-notice,
      html.dgl-stream .rotation-list .card-actions, html.dgl-stream .rotation-list .category-pills, html.dgl-stream .rotation-list .meta [data-liked],
      html.dgl-stream #list-reorder-status, html.dgl-stream #toast-stack { display: none !important; }
      html.dgl-stream main, html.dgl-stream main.narrow, html.dgl-stream main.list-page { max-width: none; margin: 0; padding: 1rem clamp(1.25rem, 3vw, 3.5rem) 2rem; }
      html.dgl-stream .list-layout { display: block; }
      html.dgl-stream .list-head { margin: 0 0 0.9rem; }
      html.dgl-stream .list-head h1 { font-size: clamp(2rem, min(3vw, 5vh), 3rem); color: var(--stream-ink); }
      html.dgl-stream .list-head .verified-badge svg { width: 0.8em; height: 0.8em; }
      html.dgl-stream .rotation-list { counter-reset: stream-row; gap: 0.33em; font-size: calc(clamp(1.5rem, min(2.1vw, 3.1vh), 2.4rem) * var(--stream-scale, 1)); }
      @media (min-width: 1100px) {
        html.dgl-stream .rotation-list:has(> li:nth-child(7)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.33em 0.7em; }
      }
      /* JS layout (fit): column-major grid, rows container capped above the bar and scrolled by script, never the page. */
      html.dgl-stream.dgl-grid .rotation-list#list-items { display: grid; grid-auto-flow: column; grid-template-columns: repeat(var(--stream-cols, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--stream-rows, 1), auto); align-content: start; gap: 0.33em 0.7em; overflow-y: auto; scrollbar-width: none; }
      html.dgl-stream.dgl-grid .rotation-list#list-items::-webkit-scrollbar { display: none; }
      html.dgl-stream.dgl-lock, html.dgl-stream.dgl-lock body { overflow: hidden; }
      html.dgl-stream.dgl-lock body { padding-bottom: 0; }
      html.dgl-stream.dgl-lock main { padding-bottom: 0; }
      html.dgl-stream .rotation-list li { counter-increment: stream-row; gap: 0.5em; padding: 0.3em 0.7em; border: max(1.5px, 0.09em) solid var(--stream-sep); border-radius: 0.42em; background: var(--stream-row); box-shadow: none; }
      html.dgl-stream .rotation-list li::before { content: counter(stream-row); flex: none; min-width: 2.2ch; font-size: 0.9em; font-weight: 800; line-height: 1; color: var(--stream-accent); font-variant-numeric: tabular-nums; text-align: center; }
      html.dgl-stream .rotation-list li.card-click:hover { background: var(--stream-row); border-color: var(--stream-sep); box-shadow: none; }
      html.dgl-stream .played-count { display: inline-block; align-self: center; padding: 0.15em 0.7em; border: max(1.5px, 0.09em) solid var(--played-ok); border-radius: 999px; color: var(--played-ok); font-size: clamp(1.1rem, min(1.8vw, 3vh), 1.8rem); }
      html.dgl-stream .rotation-list li.stream-played .title-text, html.dgl-stream .rotation-list li.stream-played .item-main .meta { color: var(--stream-done); }
      html.dgl-stream .rotation-list li.stream-played { border-color: var(--played-ok); }
      html.dgl-stream .rotation-list li.stream-played .played-pill { margin: 0 0 0 0.35em; padding: 0; border: 0; font-size: 1.3em; line-height: 1; color: var(--played-ok); }
      html.dgl-stream .rotation-list li.stream-played .pp-text { display: none; }
      html.dgl-stream .rotation-list li.can-mark { cursor: pointer; }
      html.dgl-stream .rotation-list li.reset-bar::after { height: 6px; left: 0.7em; bottom: 0.25em; width: calc((100% - 1.4em) * var(--reset-left, 0)); }
      html.dgl-stream .rotation-list li.reset-bar { padding-bottom: 0.55em; }
      html.dgl-stream .rotation-list .game-title { font-size: 1em; line-height: 1.2; color: var(--stream-ink); text-decoration: none; }
      html.dgl-stream .rotation-list .item-main .meta { margin-top: 0.1em; font-size: 0.75em; font-weight: 800; color: var(--stream-reset); }
      html.dgl-stream .rotation-list .meta > :not([hidden]) ~ :not([hidden])::before { content: none; }
      @keyframes stream-new { 0%, 70% { box-shadow: 0 0 0 4px var(--stream-accent), 0 0 30px 8px var(--stream-accent); border-color: var(--stream-accent); } 100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; } }
      html.dgl-stream .rotation-list li.row-new { animation: stream-new 3s ease-out; }
      @media (prefers-reduced-motion: reduce) {
        html.dgl-stream .rotation-list li.row-new { animation: none; border-color: var(--stream-accent); }
      }
      html.dgl-stream .stream-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; flex-wrap: wrap; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0.7rem clamp(1.25rem, 3vw, 3.5rem); background: var(--stream-bar); border-top: 4px solid var(--stream-accent); color: var(--stream-ink); }
      html.dgl-stream .stream-cta { margin: 0; color: var(--stream-ink); font-size: clamp(1.2rem, 1.8vw, 1.9rem); }
      html.dgl-stream .stream-cta strong { color: var(--stream-accent); }
      html.dgl-stream .stream-top { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; list-style: none; margin: 0; padding: 0; font-size: clamp(1.1rem, 1.5vw, 1.6rem); font-weight: 700; }
      html.dgl-stream .stream-top:empty { display: none; }
      html.dgl-stream .stream-top li { display: flex; gap: 0.6rem; align-items: baseline; }
      html.dgl-stream .stream-top .st-votes { color: var(--stream-accent); font-variant-numeric: tabular-nums; }
      html.dgl-stream .stream-exit { display: inline-flex; position: fixed; top: 0.75rem; right: 0.75rem; z-index: 50; min-height: 44px; opacity: 0; transition: opacity 0.15s ease; }
      html.dgl-stream .stream-exit:hover, html.dgl-stream .stream-exit:focus-visible { opacity: 1; }
      html.dgl-stream .stream-settings-btn { right: 11.5rem; white-space: nowrap; }
      html.dgl-stream .stream-settings-btn[aria-expanded="true"] { opacity: 1; }
      .stream-settings, .overlay-panel { display: none; }
      html.dgl-stream .stream-settings:not([hidden]) { display: block; position: fixed; top: 3.6rem; right: 0.75rem; z-index: 55; width: min(26rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 5rem); overflow: auto; padding: 1rem 1.1rem; border: 3px solid var(--stream-sep); border-radius: 14px; background: var(--stream-bar); color: var(--stream-ink); font-size: 1rem; line-height: 1.4; }
      .stream-settings h2 { margin: 0 0 0.4rem; font-size: 1.2rem; }
      .stream-settings h3 { margin: 1rem 0 0.4rem; font-size: 1.05rem; }
      .stream-settings h3 span { font-weight: 400; opacity: 0.8; font-size: 0.9rem; }
      .stream-settings .ss-note { margin: 0 0 0.7rem; font-size: 0.85rem; opacity: 0.85; }
      .stream-settings label { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.4rem 0; }
      .stream-settings label.ss-check { justify-content: flex-start; }
      .stream-settings select, .stream-settings input[type="number"] { width: 9.5rem; min-height: 2.2rem; }
      .stream-settings .ss-url { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
      .stream-settings .ss-url input { flex: 1; min-width: 0; min-height: 2.4rem; font-size: 0.85rem; }
      .stream-settings .ss-copy { min-height: 2.4rem; }
      /* Overlay (?view=overlay): transparent page, one dark panel (same in both themes) readable on any background. */
      html.dgl-overlay, html.dgl-overlay body { background: transparent !important; overflow: hidden; color-scheme: normal; }
      html.dgl-overlay header.site-header, html.dgl-overlay body > footer, html.dgl-overlay .skip-link, html.dgl-overlay #toast-stack,
      html.dgl-overlay main > *:not(.overlay-panel) { display: none !important; }
      html.dgl-overlay main, html.dgl-overlay main.narrow, html.dgl-overlay main.list-page { background: transparent; max-width: none; margin: 0; padding: 0; }
      html.dgl-overlay .overlay-panel { display: block; position: fixed; z-index: 60; width: max-content; max-width: min(36rem, calc(100vw - 2rem)); padding: 0.8rem 1.1rem; border: 2px solid rgba(255, 255, 255, 0.22); border-radius: 14px; background: rgba(10, 10, 14, 0.82); color: #fff; font-size: clamp(1.1rem, 1.7vw, 1.7rem); font-weight: 700; line-height: 1.3; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6); }
      html.dgl-overlay.dgl-pos-bl .overlay-panel { left: 1rem; bottom: 1rem; }
      html.dgl-overlay.dgl-pos-br .overlay-panel { right: 1rem; bottom: 1rem; }
      html.dgl-overlay.dgl-pos-tl .overlay-panel { left: 1rem; top: 1rem; }
      html.dgl-overlay.dgl-pos-tr .overlay-panel { right: 1rem; top: 1rem; }
      .overlay-panel p, .overlay-panel li { margin: 0; color: #fff; }
      .overlay-panel .ov-title { font-size: 0.8em; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
      .overlay-panel .ov-cta strong { color: #38bdf8; }
      .overlay-panel .ov-top { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.85em; }
      .overlay-panel .ov-top:empty { display: none; }
      .overlay-panel .ov-top li { display: flex; justify-content: space-between; gap: 1.2rem; align-items: baseline; }
      .overlay-panel .st-votes { color: #38bdf8; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
      .overlay-panel .ov-new { margin-top: 0.5rem; padding: 0.3rem 0.6rem; border-radius: 8px; font-size: 0.85em; color: #fde047; box-shadow: 0 0 0 2px #38bdf8, 0 0 18px 2px #38bdf8; }
      .game-search-selected { margin-top: 0.4rem; font-size: 0.9rem; color: var(--muted); }
      .game-search-selected button { background: none; border: none; color: var(--accent); cursor: pointer; text-decoration: underline; font-size: inherit; padding: 0; }
      #toast-stack {
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        z-index: 99;
      }
      .toast {
        min-width: 220px;
        max-width: 320px;
        border-radius: 10px;
        padding: 0.7rem 0.8rem;
        border: 1px solid var(--border);
        background: var(--card);
        box-shadow: var(--shadow);
        color: var(--ink);
        font-weight: 600;
      }
      .toast { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
      .toast-action { background: none; border: 0; padding: 0.35rem 0.5rem; margin: -0.35rem -0.4rem -0.35rem 0; min-height: 44px; color: var(--brand-blue); font: inherit; font-weight: 800; cursor: pointer; }
      li[data-hide-id] { transition: opacity 0.25s ease, transform 0.25s ease; }
      li[data-hide-id].hiding { opacity: 0; transform: scale(0.97); pointer-events: none; }
      .daily-progress { margin: 0 0 1rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 0.75rem; align-items: center; }
      .daily-progress-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; font-weight: 700; color: var(--ink); }
      .daily-streak { color: var(--brand-blue); font-weight: 800; }
      .daily-progress-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
      .daily-progress-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand-blue); transition: width 0.3s ease; }
      .daily-progress .btn { min-height: 44px; }
      .daily-done { color: var(--muted); font-weight: 600; }
      .daily-strip { margin: 0 0 1.25rem; }
      .daily-strip-link { position: relative; color: var(--brand-blue); font-weight: 700; margin-left: auto; }
      .daily-strip-link::after { content: ""; position: absolute; inset: -0.8rem -0.4rem; }
      .daily-strip .daily-progress-head { align-items: center; }
      /* Home page game of the day, below the rotation strip. */
      .game-of-the-day { margin: 0 0 1.25rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
      .gotd-kicker { margin: 0; color: var(--brand-blue); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
      .game-of-the-day h2.gotd-title { margin: 0.25rem 0 0.35rem; font-size: 1.35rem; overflow-wrap: anywhere; }
      .gotd-title a { color: var(--title-ink); text-decoration: none; }
      .gotd-title a:hover { text-decoration: underline; }
      .gotd-desc { margin: 0 0 0.5rem; color: var(--muted); }
      .game-of-the-day .category-pills { margin: 0 0 0.25rem; }
      .gotd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; margin-top: 0.6rem; }
      .gotd-meta { color: var(--muted); font-size: 0.95rem; }
      .game-of-the-day .btn-play { font-size: 1rem; padding: 0.6rem 1rem; }
      @media (max-width: 480px) { .gotd-foot .btn-play { width: 100%; } }
      .heatmap { margin: 0 0 1rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
      .heatmap h2 { margin: 0 0 0.5rem; font-size: 1rem; }
      .heatmap-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 3px; width: 100%; max-width: 300px; }
      .heat-cell { aspect-ratio: 1; border-radius: 3px; background: var(--heat-0); }
      .heat-cell[data-level="1"] { background: var(--heat-1); }
      .heat-cell[data-level="2"] { background: var(--heat-2); }
      .heat-cell[data-level="3"] { background: var(--heat-3); }
      .heat-cell[data-level="4"] { background: var(--heat-4); }
      .heat-cell.heat-future { visibility: hidden; }
      .heatmap-legend { display: flex; align-items: center; gap: 3px; margin-top: 0.5rem; color: var(--muted); font-size: 0.8rem; }
      .heatmap-legend .heat-cell { width: 12px; height: 12px; aspect-ratio: auto; }
      .heatmap-legend span:first-child { margin-right: 0.3rem; }
      .heatmap-legend span:last-child { margin-left: 0.3rem; }
      .reminder-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0 0 1rem; }
      .reminder-opt label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; }
      .reminder-opt input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
      .reminder-opt select { min-height: 44px; padding: 0 0.5rem; border: 1px solid var(--control-border); border-radius: 8px; background: var(--bg-soft); color: var(--ink); font: inherit; }
      .search-suggest { display: none; position: absolute; top: calc(100% + 4px); right: 0; width: max(100%, 300px); z-index: 20; max-height: 70vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 0.25rem; }
      .search-suggest.open { display: block; }
      .search-suggest a { display: flex; align-items: center; min-height: 44px; padding: 0.35rem 0.65rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .search-suggest a:hover, .search-suggest a.active { background: var(--bg-soft); }
      .search-suggest a.active { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
      @media (max-width: 480px) { .daily-progress { grid-template-columns: 1fr; } .daily-progress .btn { width: 100%; } }
      /* Keyboard shortcuts dialog (layout()) and the footer button that opens it. */
      .shortcuts-dialog { width: min(26rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
      .shortcuts-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
      .shortcuts-dialog h2 { margin: 0 0 0.6rem; font-size: 1.2rem; }
      .shortcut-list { margin: 0; }
      .shortcut-list > div { display: grid; grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr); gap: 0.4rem 0.8rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
      .shortcut-list dt, .shortcut-list dd { margin: 0; }
      .shortcut-note { color: var(--muted); font-size: 0.9rem; margin: 0.75rem 0 0; }
      .shortcuts-dialog kbd { display: inline-block; min-width: 1.6rem; padding: 0.1rem 0.4rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; background: var(--bg-soft); color: var(--ink); font: 700 0.9rem/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; text-align: center; }
      .shortcuts-dialog .actions { margin-top: 0.9rem; display: flex; justify-content: flex-end; }
      .footer-button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
      .hide-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
      .hide-btn svg { width: 1.05rem; height: 1.05rem; }
      .hide-btn .i-show { display: none; }
      .game-row .compact-actions > .hide-btn { min-width: 2.15rem; padding-left: 0.5rem; padding-right: 0.5rem; }
      .hidden-games-list { list-style: none; padding: 0; margin: 0 0 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }
      .hidden-games-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
      .hidden-games-list button { min-height: 44px; padding: 0.4rem 0.8rem; }
      .hidden-toggle { text-align: center; margin: 1.5rem 0 0; }
      .hidden-toggle button { background: none; border: 0; padding: 0.6rem 0.8rem; min-height: 44px; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }
      .toast.success { border-color: #666666; }
      .toast.error { border-color: #cc6666; }
      form { display:flex; gap: 0.6rem; flex-wrap:wrap; margin-bottom: 1rem; }
      input, select, button {
        padding: 0.5rem;
        border-radius: 7px;
        border: 1px solid var(--control-border);
        background: var(--bg-soft);
        color: var(--ink);
      }
      input::placeholder, textarea::placeholder { color: var(--placeholder); }
      button {
        background: var(--bg-soft);
        color: var(--ink);
        border: 1px solid var(--control-border);
        cursor: pointer;
      }
      a { color: var(--accent); }
      p { color: var(--muted); }
      /* Keyboard focus: a clear ring everywhere. Tappable cards ring the whole card, since their link is stretched over it. */
      :focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
      .card-click .card-link:focus-visible { outline: none; }
      .card-click:has(.card-link:focus-visible) { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 12px; }
      .intro { color: var(--ink); font-size: 1.05rem; line-height: 1.5; margin: 0.25rem 0 1rem; }
      @media (min-width: 701px) { .intro { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: center; } }
      .page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
      .page-head h1 { margin: 0; }
      .page-head .actions { margin: 0; }
      /* Fixed column counts: an auto-fill grid inside a fieldset in a column flex form makes the fieldset twice as tall as its content. */
      .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.5rem; }
      @media (min-width: 520px) { .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
      .check input[type="checkbox"], .check input[type="radio"] { flex: none; }
      .check-grid .check { margin-right: 0; min-width: 0; overflow-wrap: anywhere; }
      /* A label wrapping a field: the name above the field, not squeezed beside it. */
      .stack-form > label:has(> input:not([type="checkbox"]):not([type="radio"]), > textarea, > select) { display: flex; flex-direction: column; gap: 0.25rem; }
      .reset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem 0.75rem; }
      .reset-grid label { display: flex; flex-direction: column; gap: 0.25rem; }
      .reset-grid label[hidden] { display: none; }
      form.filter-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; max-width: 40rem; }
      .admin-fold > summary { cursor: pointer; font-weight: 700; padding: 0.4rem 0; }
      .admin-fold[open] > summary { margin-bottom: 0.75rem; }
      .btn-play { font-size: 1.1rem; padding: 0.8rem 1.4rem; }
      /* Game page: votes and favorite in one row under the Play button, score and reset time beneath. */
      .game-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.25rem 0 0.5rem; }
      .game-actions button { min-height: 44px; min-width: 4.2rem; font-size: 1rem; }
      .game-meta { color: var(--muted); font-size: 0.95rem; margin: 0.25rem 0; }
      /* The long "Resets daily at 4:00 PM · next in 15h 54m" must be able to wrap, or it pushes the page wider than a phone. */
      .game-meta > * { white-space: normal; }
      .game-actions-note { color: var(--muted); font-size: 0.9rem; margin: 0.25rem 0 0; }
      /* Game page: Play and the "Mark as played" toggle share a row (the toggle drops below Play on phones). */
      .play-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; }
      .played-toggle { min-height: 44px; font-size: 1rem; background: var(--bg-soft); color: var(--ink); border-color: var(--border); }
      .played-toggle.is-played { color: var(--brand-blue); border-color: var(--brand-blue); }
      #game-action-status:empty { margin: 0; }
      .report-panel > summary { cursor: pointer; font-weight: 700; }
      .report-panel[open] > summary { margin-bottom: 0.75rem; }
      .game-facts { margin-top: 1.5rem; }
      .game-facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1rem; margin: 0.75rem 0 0; }
      .game-facts dt { color: var(--muted); }
      .game-facts dd { margin: 0; }
      @media (max-width: 480px) { .game-facts dl { grid-template-columns: 1fr; gap: 0.15rem; } .game-facts dd { margin-bottom: 0.5rem; } }
      .related-games ul { columns: 2; padding-left: 1.2rem; }
      .related-games li { margin-bottom: 0.4rem; }
      .empty-state { text-align: center; padding: 1.5rem 1rem; border: 1px dashed var(--border); border-radius: 12px; }
      .rotation-list li.empty-state { display: block; }
      .empty-state p { margin-top: 0; }
      form.game-filters { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
      .search-row { display: flex; gap: 0.5rem; }
      .search-row input { flex: 1; min-width: 0; max-width: 420px; }
      /* Phones: the field gets its own row, and Search and Surprise me share the next. */
      @media (max-width: 480px) { .search-row { flex-wrap: wrap; } .search-row input { flex-basis: 100%; max-width: none; } .search-row button { flex: 1 1 0; } }
      .filters > summary { display: none; }
      .filters-body { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
      @media (max-width: 700px) {
        header.site-header { padding: 0.6rem 0.75rem; gap: 0.7rem; }
        .brand { font-size: 1.1rem; margin-right: 0; }
        .site-nav { gap: 0.7rem; }
        .site-nav a { font-size: 0.95rem; }
        .nav-extra, .account-desktop, .header-tools > .theme-toggle, .label-long { display: none; }
        .nav-menu { display: block; }
        /* Small buttons in cards and rows get an invisible margin that makes the tap target about 46px tall. */
        .compact-actions button, .compact-actions .btn-details, .card-actions button, .card-actions .btn-details { position: relative; min-height: 30px; }
        .compact-actions button::after, .compact-actions .btn-details::after, .card-actions button::after, .card-actions .btn-details::after { content: ""; position: absolute; inset: -9px -2px; }
        .compact-actions .hide-btn { padding-left: 0.6rem; padding-right: 0.6rem; }
        .compact-actions .hide-btn::after { inset: -9px -5px; }
        .compact-actions, .card-actions { gap: 0.3rem; }
        /* Game cards: when the name and the buttons don't both fit on the first line (long titles on 320-400px phones),
           the buttons drop to their own line instead of squeezing the name into a sliver or pushing the card wider than the screen. */
        .game-top { flex-wrap: wrap; row-gap: 0.4rem; }
        .game-name { flex: 1 1 auto; }
        .game-row .compact-actions { flex-wrap: wrap; max-width: 100%; }
        /* List and rotation rows on phones: the name, then "% liked · Resets in" across the full width, then the
           category pills with the buttons beside them (the buttons drop below the pills only if both don't fit). */
        .rotation-list li:not(.empty-state) { flex-wrap: wrap; row-gap: 0.4rem; column-gap: 0.5rem; }
        .rotation-list li > .item-main { display: contents; }
        .rotation-list li > .item-main > a { order: 1; flex: 1 1 calc(100% - 2.5rem); min-width: 0; }
        .rotation-list li > .item-main > .meta { order: 2; flex: 1 1 100%; }
        /* The pills take whatever width the buttons leave and wrap inside it, so a long set of pills never pushes the buttons onto their own line. */
        .rotation-list li > .item-main > .category-pills { order: 3; flex: 1 1 7rem; min-width: 0; }
        .rotation-list li > .item-main .category-pill { white-space: nowrap; }
        .rotation-list li > .card-actions { order: 4; align-self: flex-start; }
        /* Rows with a drag handle: line the details up under the name rather than under the handle. */
        .rotation-list li:has(> .drag) > .item-main > .meta, .rotation-list li:has(> .drag) > .item-main > .category-pills { padding-left: calc(var(--drag-width, 1rem) + 0.5rem); }
        .actions button, .actions .btn { min-height: 44px; }
        .home-actions .btn { font-size: 0.85rem; padding: 0.55rem 0.3rem; }
        .btn-play { display: block; text-align: center; }
        .play-row .btn-play, .play-row .played-toggle { flex: 1 1 100%; }
        .related-games ul { columns: 1; }
        .filters > summary { display: list-item; cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
        .filters-body select { flex: 1 1 45%; }
      }
      /* Narrow phones: Submit moves from the header row into the menu so the row never overlaps. */
      @media (max-width: 369px) {
        .actions.home-actions { grid-template-columns: 1fr; max-width: 260px; }
      }
      @media (max-width: 400px) {
        .site-nav a[href="/submit"] { display: none; }
        .nav-menu-panel > a.menu-narrow-only { display: block; }
      }
      #game-results[aria-busy="true"] { opacity: 0.55; transition: opacity 0.15s; }
      .game-count { text-align: center; color: var(--muted); font-size: 1.05rem; font-weight: 400; letter-spacing: normal; line-height: 1.5; margin: 0.25rem 0 0.9rem; }
      .list-index li { margin-bottom: 0.7rem; }
      .list-index .muted { color: var(--muted); }
      .game-count strong { color: var(--brand-blue); font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 0.2rem; }
      /* Big screens: larger cards and text, with the name and the buttons on one row and the details beneath. */
      @media (min-width: 1200px) {
        ul.games { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 1rem; }
        ul.games.compact li { padding: 0.95rem 1.05rem; border-radius: 14px; }
        ul.games.compact li.reset-bar { padding-bottom: calc(0.95rem + 6px); }
        .game-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; grid-template-areas: "name actions" "sub sub"; column-gap: 0.9rem; row-gap: 0.45rem; align-items: start; }
        .game-top { display: contents; }
        .game-name { grid-area: name; padding-top: 0; }
        .game-sub { grid-area: sub; }
        .game-row .compact-actions { grid-area: actions; display: flex; flex-wrap: nowrap; gap: 0.35rem; }
        .game-row .compact-actions > * { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; height: 2.15rem; min-width: 3.4rem; font-size: 0.95rem; padding: 0 0.6rem; }
        ul.games .game-title { font-size: 1.3rem; }
        .game-sub .tag { font-size: 0.85rem; padding: 0.15rem 0.5rem; }
        .game-row .meta { font-size: 0.9rem; }
      }
      /* Phone tap targets, last so it wins over the rules above: everything tappable reaches 44px. */
      @media (max-width: 700px) {
        /* Header, menu and footer links: the same look, but the tappable box reaches 44px. */
        .brand, .site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
        .nav-menu > summary { min-height: 44px; }
        .nav-menu-panel > a, .nav-menu-panel button { min-height: 44px; display: flex; align-items: center; }
        footer a { position: relative; }
        footer a::after { content: ""; position: absolute; inset: -1.15rem -0.5rem; }
        footer .footer-button { position: relative; }
        footer .footer-button::after { content: ""; position: absolute; inset: -1.15rem -0.5rem; }
        /* Fields: 44px tall, and 16px text so iOS doesn't zoom the page on focus. */
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: 44px; font-size: 16px; }
        textarea { min-height: 5.5rem; }
        .stack-form button[type="submit"], .search-row button, form.game-filters button, form.filter-form button, .actions button { min-height: 44px; }
        /* Checkboxes and radios: a bigger box, and the whole label row is the tap target. */
        input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
        .check { min-height: 44px; }
        /* Category pills: slightly taller, plus an invisible margin like the buttons in cards. */
        .category-pill, .game-sub .tag.category-pill, button.tag.pill-more { position: relative; padding-top: 0.25rem; padding-bottom: 0.25rem; }
        .category-pill::after, .pill-more::after { content: ""; position: absolute; inset: -11px -2px; }
        /* "Similar daily games" links on game pages. */
        .related-games li { margin-bottom: 0; }
        .related-games li a { display: inline-block; padding: 0.85rem 0; }
        .game-facts summary, .report-panel > summary { min-height: 44px; display: flex; align-items: center; }
        /* Also: the Filters toggle, pagination, big buttons, and the pills in list and rotation rows. */
        .filters > summary { min-height: 44px; display: flex; align-items: center; }
        .pagination a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; }
        .btn { min-height: 44px; }
        .rotation-list .item-main .category-pill, .suggest-main .category-pill { padding-top: 0.25rem; padding-bottom: 0.25rem; }
      }
      /* Reduced motion: animations and transitions end at once. Their end events still fire, and the timers in the
         scripts don't depend on them, so hidden cards and removed rows still go. */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }