/**
 * Paws of Fury Trivia.
 *
 * Mobile first and literally so: this is played on a phone, in a Discord call,
 * with fifteen seconds on the clock. Which means the answers are thumb-sized
 * and in the lower half of the screen, and — the rule everything else bends
 * to — nothing moves or resizes once the timer starts. A layout that reflows
 * while somebody is reaching for an answer costs them the question.
 *
 * Inherits /assets/theme.css for the palette so it belongs to the rest of the
 * site, then warms it slightly: this one is a quiz machine in a pub, not a
 * dashboard.
 */

:root {
    --bg-quiz: #14161c;
    --card: #1e222b;
    --card-2: #262b36;
    --line: #38404f;
    --ink: #f4f2ee;
    --dim: #a4adbd;
    --gold: #e0a244;
    --gold-bright: #ffc76a;
    --right: #5fb87a;
    --wrong: #d9584f;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg-quiz);
    color: var(--ink);
    font-family: var(--font-sans, system-ui, sans-serif);
    -webkit-text-size-adjust: 100%;
}

body {
    background-image:
        radial-gradient(120% 55% at 50% -8%, rgba(224, 162, 68, 0.13), transparent 70%);
    min-height: 100dvh;
}

#app { min-height: 100dvh; }

.screen {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.25rem 1rem calc(6.5rem + env(safe-area-inset-bottom));
}

h1 { font-size: 1.85rem; line-height: 1.12; margin: 0 0 0.6rem; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 0.4rem; color: var(--gold); }
p { line-height: 1.55; margin: 0 0 0.85rem; }

.lede { color: var(--dim); }
.quiet { color: var(--dim); font-size: 0.88rem; }

/* ------------------------------------------------------------- buttons */

.btn {
    appearance: none;
    border: 1px solid var(--gold);
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    color: #191308;
    font: inherit; font-weight: 700;
    padding: 0.9rem 1.1rem;
    border-radius: 11px;
    min-height: 50px;              /* a thumb, standing up, in a hurry */
    cursor: pointer;
    touch-action: manipulation;
}
.btn.ghost { background: var(--card-2); color: var(--ink); border-color: var(--line); }
.btn.wide { width: 100%; }
.btn:active { transform: translateY(1px); }

.link {
    appearance: none; border: 0; background: none; color: var(--gold);
    font: inherit; text-decoration: underline; cursor: pointer; padding: 0.45rem;
}
.back {
    appearance: none; border: 0; background: none; color: var(--dim);
    font: inherit; padding: 0.4rem 0; margin-bottom: 0.4rem; cursor: pointer;
}
.back::before { content: '← '; }

.dock {
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(20, 22, 28, 0), var(--bg-quiz) 34%);
    z-index: 20;
}
.dock > * { max-width: 32rem; margin: 0 auto; width: 100%; display: block; }
.dock-two { display: flex; gap: 0.5rem; }
.dock-two > * { flex: 1; }

/* ---------------------------------------------------------------- home */

.brand { text-align: center; padding: 2rem 0 1.5rem; }
.brand-kicker {
    display: block; letter-spacing: 0.3em; text-transform: uppercase;
    font-size: 0.68rem; color: var(--gold); margin-bottom: 0.4rem;
}
.brand h1 { font-size: 2.6rem; }
.brand-lede { color: var(--dim); max-width: 27rem; margin: 0.75rem auto 0; }

.modes { display: grid; gap: 0.7rem; margin: 1.5rem 0 1rem; }
.mode {
    appearance: none; width: 100%; text-align: left; cursor: pointer;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 14px; padding: 1.05rem; color: inherit; font: inherit;
    display: grid; gap: 0.3rem;
}
.mode b { font-size: 1.15rem; color: var(--gold-bright); }
.mode span { color: var(--dim); font-size: 0.88rem; line-height: 1.45; }
.mode.is-daily { border-color: var(--gold); background: linear-gradient(160deg, #2a2214, var(--card)); }

.picker {
    appearance: none; width: 100%; cursor: pointer; font: inherit; color: inherit;
    background: var(--card-2); border: 1px solid var(--line);
    border-radius: 12px; padding: 0.85rem 1rem; min-height: 50px;
    display: flex; justify-content: space-between; align-items: center;
}
.picker-label { color: var(--dim); }
.picker-value { color: var(--gold); font-weight: 600; }

.tally { display: flex; gap: 0.5rem; margin: 1rem 0 0; padding: 0; }
.tally div {
    flex: 1; background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 0.7rem 0.5rem; text-align: center;
}
.tally dt { color: var(--dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }
.tally dd { margin: 0.2rem 0 0; font-size: 1.25rem; font-weight: 700; color: var(--gold-bright); }

.home-links { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin-top: 1.75rem; }

/* ---------------------------------------------------------- categories */

.cat {
    background: var(--card); border: 1px solid var(--line);
    border-left: 4px solid var(--accent, var(--gold));
    border-radius: 14px; padding: 0.9rem 1rem; margin-bottom: 0.85rem;
}
.cat header { display: flex; gap: 0.7rem; align-items: flex-start; }
.cat header h2 { margin: 0; font-size: 1.05rem; color: var(--ink); }
.cat header p { margin: 0.15rem 0 0; color: var(--dim); font-size: 0.82rem; line-height: 1.4; }
.cat-icon { font-size: 1.5rem; line-height: 1; }
.cat-all {
    appearance: none; background: var(--card-2); border: 1px solid var(--line);
    color: var(--dim); font: inherit; font-size: 0.78rem; border-radius: 999px;
    padding: 0.35rem 0.7rem; cursor: pointer; margin-left: auto; flex: 0 0 auto;
}

.subs { display: grid; gap: 0.4rem; margin-top: 0.8rem; }
.sub {
    appearance: none; text-align: left; width: 100%; cursor: pointer;
    background: var(--card-2); border: 1px solid var(--line);
    border-radius: 10px; padding: 0.6rem 0.75rem; color: inherit; font: inherit;
    min-height: 48px; display: grid; gap: 0.1rem;
}
.sub b { font-size: 0.92rem; }
.sub span { color: var(--dim); font-size: 0.78rem; line-height: 1.35; }
.sub.is-on { border-color: var(--accent, var(--gold)); background: #2b3040; }
.sub.is-on b::before { content: '✓ '; color: var(--accent, var(--gold)); }

/* --------------------------------------------------------------- play */

.playbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.5rem;
}
.score { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 0.9rem; }

.qhead {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 0.5rem;
}
.qnum { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.qcat { color: var(--dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }

/*
 * The clock. A bar that drains rather than a number that counts, because a
 * number is a thing you watch and a bar is a thing you notice — and the point
 * of the limit is to stop people opening another tab, not to make them panic.
 */
.clock {
    height: 6px; border-radius: 3px; background: #262b36;
    overflow: hidden; position: relative; margin-bottom: 1rem;
}
.clock::before {
    content: ''; position: absolute; inset: 0; width: var(--left, 100%);
    background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.clock.is-low::before { background: linear-gradient(90deg, var(--wrong), #e8834a); }
.clock.is-out::before { width: 0; }

.qtext {
    font-size: 1.3rem; line-height: 1.35; margin: 0 0 1.25rem;
    color: var(--ink); letter-spacing: -0.01em;
}

.answers { display: grid; gap: 0.55rem; }
.answers.is-tf { grid-template-columns: 1fr 1fr; }

.answer {
    appearance: none; width: 100%; text-align: left; cursor: pointer;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 0.85rem 0.9rem; color: inherit; font: inherit;
    min-height: 56px; display: flex; align-items: center; gap: 0.7rem;
    /* No transition on colour: the answer must land the instant it is tapped. */
}
.answer-key {
    flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 6px;
    background: var(--card-2); color: var(--dim);
    display: grid; place-items: center; font-size: 0.8rem; font-weight: 700;
}
.answers.is-tf .answer { justify-content: center; text-align: center; font-weight: 700; font-size: 1.05rem; }
.answers.is-tf .answer-key { display: none; }
.answer-text { flex: 1; }
.answer:disabled { cursor: default; opacity: 0.55; }
.answer.is-right {
    border-color: var(--right); background: #1d2c22; opacity: 1;
}
.answer.is-right .answer-key { background: var(--right); color: #0d1710; }
.answer.is-wrong { border-color: var(--wrong); background: #2c1c1b; opacity: 1; }
.answer.is-wrong .answer-key { background: var(--wrong); color: #1a0c0b; }

.after { margin-top: 1.25rem; }
.verdict {
    border-radius: 12px; padding: 0.85rem 0.95rem; margin-bottom: 0.75rem;
    display: grid; gap: 0.3rem;
    background: var(--card); border: 1px solid var(--line);
    border-left: 4px solid var(--line);
}
.verdict.is-right { border-left-color: var(--right); }
.verdict.is-right b:first-child { color: var(--right); }
.verdict.is-wrong { border-left-color: var(--wrong); }
.verdict.is-wrong b:first-child { color: var(--wrong); }
.verdict span { color: var(--dim); font-size: 0.9rem; }
.verdict-src { color: var(--gold); font-size: 0.85rem; text-decoration: none; }

.daily-tag {
    color: var(--gold); text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 0.7rem; margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------ results */

.is-results { text-align: center; padding-top: 3rem; }
.big-score { font-size: 1.35rem; color: var(--gold-bright); }

/* ------------------------------------------------------------ loading */

.is-loading { display: grid; place-content: center; min-height: 70dvh; text-align: center; gap: 1rem; }
.spinner {
    width: 2.4rem; height: 2.4rem; margin: 0 auto;
    border: 3px solid var(--line); border-top-color: var(--gold);
    border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* ---------------------------------------------------------------- doc */

.credits { padding-left: 1.1rem; color: var(--dim); font-size: 0.9rem; }
.credits li { margin-bottom: 0.6rem; line-height: 1.5; }
.credits a { color: var(--gold); }

/* --------------------------------------------------------------- misc */

.toast {
    position: fixed; left: 50%; bottom: calc(6rem + env(safe-area-inset-bottom));
    transform: translate(-50%, 1rem);
    background: var(--card-2); border: 1px solid var(--gold);
    color: var(--ink); padding: 0.7rem 1rem; border-radius: 10px;
    max-width: min(30rem, calc(100vw - 2rem)); font-size: 0.9rem;
    opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s;
    z-index: 80; text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.sheet-wrap {
    position: fixed; inset: 0; z-index: 60; background: rgba(6, 7, 10, 0.72);
    display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 16px 16px 0 0; width: 100%; max-width: 34rem;
    padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    max-height: 86dvh; overflow-y: auto; position: relative;
}
.sheet-close {
    position: absolute; top: 0.5rem; right: 0.6rem; appearance: none;
    background: none; border: 0; color: var(--dim); font-size: 1.6rem;
    line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem;
}

/* ====================================================================== */
/* Categories: a grid, not a column                                       */
/* ====================================================================== */
/*
 * Every other screen in this game is a phone screen and is capped at 34rem
 * on purpose. This one is a browse, there are a hundred things to browse,
 * and a hundred cards in a single 34rem column is a scroll nobody finishes.
 * So it is the one screen allowed to use the width it is given.
 */

.screen.is-categories { max-width: 76rem; }

.catgrid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    align-items: start;
}
.is-categories .cat { margin-bottom: 0; }

/* Inside a card, the subcategories tile too once there is room for it. */
@media (min-width: 34rem) {
    .subs { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
}

/* ----- the search box ------------------------------------------------- */

.catsearch { position: relative; margin: 0.25rem 0 0.75rem; }
.catsearch input {
    width: 100%; appearance: none; font: inherit; font-size: 1rem;
    background: var(--card-2); border: 1px solid var(--line);
    border-radius: 12px; padding: 0.75rem 2.4rem 0.75rem 0.85rem;
    color: var(--ink); min-height: 48px;
}
.catsearch input::placeholder { color: var(--dim); }
.catsearch input:focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.catsearch-clear {
    position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
    appearance: none; background: none; border: 0; color: var(--dim);
    font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem;
}

.catbar {
    display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
    margin-bottom: 0.9rem;
}
.chip {
    appearance: none; background: var(--card-2); border: 1px solid var(--line);
    color: var(--ink); font: inherit; font-size: 0.82rem; border-radius: 999px;
    padding: 0.45rem 0.85rem; cursor: pointer; min-height: 36px;
}
.chip:disabled { opacity: 0.45; cursor: default; }
.catbar-count { color: var(--dim); font-size: 0.82rem; margin-left: auto; }

/* The offer to make a category out of a search. Deliberately looks like a
 * subcategory, because that is exactly what it becomes. */
.findbox { margin: 0 0 1rem; }
.sub.is-find { border-color: #8ab4f8; background: #212a3a; }
.cat.is-searches { border-left-color: #8ab4f8; }

/* ====================================================================== */
/* Rooms                                                                  */
/* ====================================================================== */

.mode.is-room {
    border-color: #4f6fa8;
    background: linear-gradient(160deg, #1b2433, var(--card));
}
.mode.is-room b { color: #9dc0f5; }

.picker.is-empty .picker-value { color: var(--dim); font-weight: 500; }

.join-row { display: flex; gap: 0.5rem; margin: 1.25rem 0 0; }
.join-row input {
    flex: 1; appearance: none; font: inherit; font-size: 1.35rem;
    letter-spacing: 0.24em; text-align: center; text-transform: uppercase;
    background: var(--card-2); border: 1px solid var(--line);
    border-radius: 12px; padding: 0.7rem 0.5rem; color: var(--ink);
    min-height: 52px;
}
.join-row input:focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.join-row .btn { flex: 0 0 auto; }

/* ----- the QR code ---------------------------------------------------- */
/*
 * On a white plate, always. A QR code inverted onto a dark background is one
 * a fair number of phone cameras will not read at all, and the whole point of
 * it is that it works first time when somebody is holding a phone up in a pub.
 */

.qrwrap { text-align: center; margin: 0.5rem 0 1.5rem; }
.qr {
    width: min(62vw, 15rem); height: auto; display: block; margin: 0 auto;
    background: #fff; border-radius: 12px; padding: 0.5rem;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.qrhint {
    color: var(--dim); font-size: 0.85rem; line-height: 1.5;
    max-width: 24rem; margin: 0.85rem auto 0;
}
.roomcode {
    color: var(--gold-bright); letter-spacing: 0.16em;
    font-size: 1.05rem; white-space: nowrap;
}

/* ----- who is in the room --------------------------------------------- */

.lobby-head { font-size: 0.95rem; margin: 0 0 0.5rem; }
.lobby-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; }
.lobby-list li {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; padding: 0.5rem 0.7rem; min-height: 48px;
}
.who { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-list em {
    margin-left: auto; font-style: normal; color: var(--gold);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.lobby-list i { color: var(--dim); font-style: normal; font-size: 0.82rem; }

/* ----- the running score ---------------------------------------------- */

.roomscores { margin-top: 1.25rem; }
.roomboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.roomboard li {
    display: flex; align-items: center; gap: 0.55rem;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 9px; padding: 0.4rem 0.65rem; font-size: 0.9rem;
}
.roomboard li.is-me { border-color: var(--gold); }
.roomboard .board-note {
    margin-left: auto; color: var(--dim); font-variant-numeric: tabular-nums;
}
.roomboard.is-final li { padding: 0.6rem 0.7rem; font-size: 1rem; }
.board-rank {
    color: var(--gold); font-weight: 700; min-width: 1.4rem;
    font-variant-numeric: tabular-nums;
}

/* An answer that has been tapped but not yet graded by the server. Without
 * this there is no feedback at all for the moment the request is in flight,
 * and people tap again. */
.answer.is-picked { border-color: var(--gold); background: #2b3040; }

/* Who said what, on the answer itself: a chip per person on the option they
   tapped. The button is a flex row, so the chips sit after the text and wrap
   onto their own line when the table is bigger than the space. */
.answer .answer-who {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem;
    margin-left: auto; max-width: 60%;
}
.answer:disabled .answer-who { opacity: 1; }
.who-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.12rem 0.5rem 0.12rem 0.12rem; border-radius: 999px;
    background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line);
    font-size: 0.78rem; max-width: 100%;
}
.who-chip.is-me { border-color: var(--gold); }
.who-chip .who-name { max-width: 9rem; }
.who-chip i { font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.who-chip i.is-right { color: #7fd17f; }
.who-chip i.is-wrong { color: #f08080; }
.saidwhat-none {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
    margin: 0 0 0.75rem; color: var(--dim); font-size: 0.85rem;
}
.saidwhat-none > span { margin-right: 0.15rem; }
.saidwhat-none > span:not(:first-child) { margin-left: 0.6rem; }

/* ----- the drinking game ---------------------------------------------- */

.drinks {
    border: 1px solid #7a5a1e; background: #221a0c; border-radius: 12px;
    padding: 0.7rem 0.9rem; margin: 0 0 0.75rem; display: grid; gap: 0.4rem;
}
.drinks-head { font-size: 0.8rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; }
.drinks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.drinks li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.drinks li.is-me { outline: 1px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.drinks .order { font-weight: 700; white-space: nowrap; }
.drinks .order.is-finish { color: #f08080; }
.drinks .why { color: var(--dim); font-size: 0.85rem; }
.drinks .none { color: var(--dim); font-size: 0.9rem; }
.bomb {
    margin: 0 0 0.6rem; padding: 0.5rem 0.75rem; border-radius: 10px;
    background: #2c1c1b; border: 1px solid var(--wrong); color: #f5b5b5;
    font-weight: 700; text-align: center;
}
.sips { color: var(--gold); font-size: 0.85rem; white-space: nowrap; }
.rules { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0; }
.rules .chip { font-size: 0.8rem; }
.rules-blurb { color: var(--dim); font-size: 0.82rem; margin: 0.35rem 0 0; }

/* ----- the categories screen, second pass --------------------------- */

/* The search and the jump bar stay put while the piles scroll under them. */
.catsticky {
    position: sticky; top: 0; z-index: 5;
    background: var(--bg, #15181f); padding: 0.25rem 0 0.35rem;
    box-shadow: 0 8px 12px -10px rgba(0, 0, 0, 0.8);
}
.catsticky .catsearch { margin-bottom: 0.4rem; }
.catjump { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.1rem 0 0.2rem; scrollbar-width: none; }
.catjump::-webkit-scrollbar { display: none; }
.jump {
    flex: 0 0 auto; appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.7rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--card-2);
    color: var(--ink); font: inherit; font-size: 0.82rem; white-space: nowrap;
}
.jump.is-on { border-color: var(--accent, var(--gold)); }
.jump b { background: var(--accent, var(--gold)); color: #15181f; border-radius: 999px; padding: 0 0.45rem; font-size: 0.72rem; }
.cat { scroll-margin-top: 7.5rem; }
.cat-side { margin-left: auto; display: grid; justify-items: end; gap: 0.3rem; flex: 0 0 auto; }
.cat-count { color: var(--dim); font-size: 0.74rem; white-space: nowrap; }
.subwrap { display: grid; gap: 0.25rem; align-content: start; }
.sub-meta { display: block; font-style: normal; color: var(--accent, var(--gold)); font-size: 0.74rem; margin-top: 0.2rem; }
.sub-who {
    appearance: none; background: none; border: 0; cursor: pointer;
    color: var(--dim); font: inherit; font-size: 0.78rem; text-align: left;
    padding: 0 0.3rem; justify-self: start;
}
.sub-who:hover, .sub-who[aria-expanded="true"] { color: var(--gold); }
.roster {
    background: var(--card); border: 1px solid var(--line); border-radius: 8px;
    padding: 0.5rem 0.7rem; font-size: 0.8rem; color: var(--dim); line-height: 1.5;
    display: grid; gap: 0.35rem;
}
.roster p { margin: 0; }
.roster b { color: var(--ink); margin-right: 0.3rem; }

/* ====================================================================== */
/* The categories screen, rebuilt: a list of categories down the side, one
   category's piles in front of you, and a pile that is about bands opens
   into its bands. On a phone the side list is a strip across the top. */

.screen.is-cats2 { max-width: 76rem; padding-bottom: 6rem; }
.cats-top { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.cats-top h1 { margin: 0; }
.cats-top .back { margin: 0; }
.cats-picked { color: var(--gold); font-size: 0.85rem; margin-left: auto; }

.cats-search { position: relative; margin: 0.75rem 0 0.5rem; }
.cats-search input {
    width: 100%; appearance: none; font: inherit; font-size: 1rem;
    background: var(--card-2); border: 1px solid var(--line); border-radius: 12px;
    padding: 0.75rem 2.4rem 0.75rem 0.9rem; color: var(--ink); min-height: 48px;
}
.cats-search input::placeholder { color: var(--dim); }
/* One clear button, ours; the browser's own would make two. */
.cats-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.bandhit {
    background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent, var(--gold));
    border-radius: 12px; padding: 0.7rem 0.85rem; margin: 0 0 0.6rem; display: grid; gap: 0.45rem;
}
.bandhit p { margin: 0; color: var(--dim); font-size: 0.88rem; }
.bandhit p b { color: var(--ink); }

/* The writing on a picture, covered. The wrap hugs the image so the boxes'
   percentages are of the picture and nothing else. */
.qpic-wrap { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto 1rem; line-height: 0; }
.qpic-wrap .qpic { display: block; margin: 0; }
.qpic-box { position: absolute; background: #000; border-radius: 3px; pointer-events: none; }
.cats-search input:focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.cats-clear {
    position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
    appearance: none; border: 0; background: none; color: var(--dim);
    font-size: 1.4rem; line-height: 1; padding: 0.4rem 0.6rem; cursor: pointer;
}

.cats-options { display: grid; gap: 0.35rem; margin: 0 0 0.9rem; }
.opt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.opt-label {
    color: var(--dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
    min-width: 4.2rem;
}

.cats-layout { display: grid; gap: 0.9rem; align-items: start; }
.cats-nav { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; }
.cats-nav::-webkit-scrollbar { display: none; }
.cats-tab {
    flex: 0 0 auto; appearance: none; cursor: pointer; text-align: left;
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; border-radius: 10px;
    background: var(--card); border: 1px solid var(--line); border-left: 3px solid transparent;
    color: var(--ink); font: inherit; font-size: 0.88rem; white-space: nowrap;
}
.cats-tab-icon { font-size: 1.1rem; line-height: 1; }
.cats-tab b { margin-left: auto; color: var(--dim); font-weight: 600; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.cats-tab.is-on { border-left-color: var(--accent, var(--gold)); }
.cats-tab.is-on b { color: var(--accent, var(--gold)); }
.cats-tab.is-current { background: var(--card-2); border-color: var(--accent, var(--gold)); }

.cats-pane { min-width: 0; }
.pane-head {
    display: flex; gap: 0.75rem; align-items: flex-start;
    padding: 0.2rem 0 0.8rem; border-bottom: 1px solid var(--line); margin-bottom: 0.6rem;
}
.pane-icon { font-size: 1.7rem; line-height: 1; }
.pane-head h2 { margin: 0; font-size: 1.2rem; color: var(--ink); }
.pane-head p { margin: 0.2rem 0 0; color: var(--dim); font-size: 0.86rem; line-height: 1.45; }
.pane-actions { margin-left: auto; display: grid; justify-items: end; gap: 0.3rem; flex: 0 0 auto; }
.pane-actions span { color: var(--dim); font-size: 0.74rem; white-space: nowrap; }

.piles { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.5rem; }
.pile-group {
    margin: 0.4rem 0 0.45rem; font-size: 0.74rem; color: var(--dim);
    text-transform: uppercase; letter-spacing: 0.12em; display: flex; align-items: baseline; gap: 0.5rem;
}
.pile-group small { font-size: 0.72rem; letter-spacing: 0; text-transform: none; color: var(--accent, var(--gold)); }
.pile {
    display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 0.7rem 0.8rem;
}
.pile.is-on { border-color: var(--accent, var(--gold)); background: #232837; }
.pile-tick {
    appearance: none; cursor: pointer; width: 1.7rem; height: 1.7rem; margin-top: 0.1rem;
    border-radius: 7px; border: 1px solid var(--line); background: var(--card-2);
    color: transparent; display: grid; place-items: center; font-size: 0.95rem; font-weight: 700;
}
.pile.is-on .pile-tick { background: var(--accent, var(--gold)); border-color: var(--accent, var(--gold)); color: #15181f; }
.pile-body { min-width: 0; display: grid; gap: 0.15rem; }
.pile-name {
    appearance: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
    color: var(--ink); font: inherit; font-weight: 700; font-size: 0.98rem;
}
.pile-name small { color: var(--dim); font-weight: 400; font-size: 0.78rem; margin-left: 0.3rem; }
.pile-blurb { margin: 0; color: var(--dim); font-size: 0.82rem; line-height: 1.4; }
.pile-meta { margin: 0.15rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--accent, var(--gold)); }
.pile-who {
    appearance: none; background: none; border: 1px solid var(--line); border-radius: 999px;
    padding: 0.15rem 0.6rem; cursor: pointer; color: var(--ink); font: inherit; font-size: 0.76rem;
}
.pile-who[aria-expanded="true"], .pile-who:hover { border-color: var(--accent, var(--gold)); color: var(--accent, var(--gold)); }
.who { margin-top: 0.5rem; display: grid; gap: 0.45rem; }
.who-lede { margin: 0; color: var(--dim); font-size: 0.8rem; }
.who-tools { display: flex; gap: 0.35rem; }
.who-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.who-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; }
.who-chip i { font-style: normal; color: var(--dim); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.who-chip.is-on { border-color: var(--accent, var(--gold)); color: var(--accent, var(--gold)); }
.who-chip.is-on i { color: inherit; }
.who-chip.is-still { cursor: default; }
.find {
    appearance: none; width: 100%; text-align: left; cursor: pointer; margin: 0 0 0.6rem;
    background: var(--card-2); border: 1px solid var(--line); border-radius: 12px;
    padding: 0.7rem 0.85rem; color: inherit; font: inherit; display: grid; gap: 0.15rem;
}
.find.is-on { border-color: #8ab4f8; }
.find span { color: var(--dim); font-size: 0.8rem; }

@media (min-width: 761px) {
    .cats-layout { grid-template-columns: 15rem minmax(0, 1fr); }
    .cats-nav { flex-direction: column; overflow: visible; position: sticky; top: 0.75rem; }
    .cats-tab { white-space: normal; }
    .cats-tab-name { flex: 1; }
    .piles { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
    .pile.is-open { grid-column: 1 / -1; }
}

/* ----- the board ------------------------------------------------------ */

.board { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.35rem; }
.board li {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; padding: 0.55rem 0.7rem;
}
.board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-note { margin-left: auto; color: var(--dim); font-size: 0.85rem; }

.daily-guest { margin-top: 0.85rem; text-align: center; }

/* The Daily, readable but not answerable, for somebody signed out. Shown as a
 * list rather than as buttons on purpose: buttons that cannot be pressed are
 * worse than no buttons. */
.daily-peek { list-style: none; margin: 1rem 0 1.25rem; padding: 0; display: grid; gap: 0.4rem; }
.daily-peek li {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; padding: 0.6rem 0.75rem; color: var(--dim);
}

/* Progress towards the weekly Trial of Fury ticket. Quiet while it is a
 * target, gold once it is earned -- the moment worth noticing. */
.trialweek {
    border: 1px solid var(--line); border-left: 3px solid var(--dim);
    border-radius: 10px; padding: 0.6rem 0.75rem; margin: 1rem 0 0;
    line-height: 1.5;
}
.trialweek b { color: var(--ink); }
.trialweek.is-done { border-left-color: var(--gold); }
.trialweek.is-done b { color: var(--gold-bright); }

/* The Hub, top left.
 *
 * hub.css fixes .topline-left to the corner from 761px up, which is what the
 * rest of the site does. Below that it stays in normal flow above the game, so
 * it needs the page's own gutter -- and the first screen needs a little less
 * padding above it, because the Hub is now sitting where that space was. */
.triviahub { padding: 0.85rem 1rem 0; }

@media (min-width: 761px) {
    .triviahub { padding: 0; }
}

/* ----- the lobby's dials ------------------------------------------------ */

.lobby-settings { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: end; margin: 0 0 1rem; }
.lobby-settings label { display: grid; gap: 0.25rem; font-size: 0.8rem; color: var(--dim); }
.lobby-settings select {
    background: var(--card); color: inherit; border: 1px solid var(--line);
    border-radius: 8px; padding: 0.4rem 0.6rem; font: inherit;
}
.lobby-settings .quiet { flex-basis: 100%; margin: 0; }

.chip.is-on { border-color: var(--gold); color: var(--gold); }
.catbar.decades { margin-top: 0.4rem; }

/* ----- who said what --------------------------------------------------- */

.saidwhat-head { font-size: 0.85rem; color: var(--dim); margin: 1rem 0 0.4rem; text-transform: uppercase; letter-spacing: 0.08em; }
.saidwhat { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.saidwhat li {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 9px; padding: 0.35rem 0.6rem; font-size: 0.88rem;
}
.saidwhat li.is-me { border-color: var(--gold); }
.saidwhat .said { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.saidwhat .board-note { font-variant-numeric: tabular-nums; white-space: nowrap; }
.saidwhat li.is-right .board-note { color: #7fd17f; }
.saidwhat li.is-wrong .board-note { color: #f08080; }
.saidwhat li.is-none { opacity: 0.7; }

/* ----- how it went ----------------------------------------------------- */

.story-head { font-size: 0.95rem; margin: 1.25rem 0 0.5rem; }
.story { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.7rem; margin-bottom: 0.4rem; }
.story summary { display: flex; gap: 0.6rem; align-items: baseline; cursor: pointer; list-style: none; }
.story summary::-webkit-details-marker { display: none; }
.story-num { color: var(--gold); font-weight: 700; min-width: 1.4rem; font-variant-numeric: tabular-nums; }
.story-q { font-size: 0.9rem; }
.story-a { margin: 0.5rem 0 0.4rem; font-weight: 600; }
.story-a i { color: var(--dim); font-weight: 400; font-style: normal; }

/* ----- the picture round ---------------------------------------------- */

.qpic {
    display: block; max-width: 100%; max-height: 280px; width: auto;
    margin: 0 auto 1rem; border-radius: 12px; object-fit: contain;
    background: var(--card); border: 1px solid var(--line);
}

/* ----- presets -------------------------------------------------------- */

.chip.is-preset { display: inline-flex; padding: 0; overflow: hidden; }
.chip.is-preset button {
    background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
    padding: 0.35rem 0.6rem;
}
.chip.is-preset button + button { border-left: 1px solid var(--line); padding: 0.35rem 0.5rem; color: var(--dim); }
.chip.is-preset button + button:hover { color: #f08080; }

/* ----- Spotify on the home screen -------------------------------------- */

.spotify {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin: 0.9rem 0 0; padding: 0.6rem 0.8rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    font-size: 0.88rem;
}
.spotify-mark { color: #1db954; font-size: 1.1rem; line-height: 1; }
.spotify-text { flex: 1; min-width: 0; color: var(--dim); }
.spotify-text b { color: var(--ink); }

/* ------------------------------------------------------------ phones */

/* iOS zooms into any text box whose text is under 16px, and does not zoom
   back out: the page ends up wider than the screen and the Join button off
   the side of it, which is why people had to pinch out to press it. Every box
   in the games is 16px or more. */
input[type="text"], input[type="search"], input[type="number"], input:not([type]), textarea, select {
    font-size: max(16px, 1em);
}

/* Party's room-code box, which had no style of its own. */
.field { display: grid; gap: 0.35rem; margin: 1rem 0 0; color: var(--dim); font-size: 0.9rem; }
.field input {
    appearance: none; font: inherit; font-size: 1.35rem; color: var(--ink);
    letter-spacing: 0.24em; text-align: center; text-transform: uppercase;
    background: var(--card-2); border: 1px solid var(--line);
    border-radius: 12px; padding: 0.7rem 0.5rem; min-height: 52px;
}
.field input:focus { outline: 2px solid var(--gold); outline-offset: -2px; }

/* A picture that would not load, from anywhere: said, not a blank box. */
.pic-missing {
    display: grid; place-items: center; min-height: 6rem; padding: 1rem;
    color: var(--dim); font-size: 0.9rem; text-align: center;
    background: var(--card-2); border: 1px dashed var(--line); border-radius: 12px;
}

/* The invite link, under the QR code, for the people who aren't in the room. */
.qrwrap .invite-btn { max-width: 18rem; margin: 0.9rem auto 0; display: block; }