/* Quacks, the games room: tokens and the shared frame (pages, cards, buttons, sheets, the action bar, the menu, the log).
   The default look is The Quacks of Quedlinburg's apothecary at night; a theme class on <html> (theme-cribbage, theme-guillotine,
   in wwwroot/games/*.css) swaps the tokens for another game. Each game's own pieces are in wwwroot/games/<game>.css.
   Fonts: Grenze for display (titles, big numbers), Alegreya Sans for reading; both from Google Fonts with system fallbacks. */

:root {
    --bg: #170f2a;
    --panel: #251a40;
    --panel-2: #2f2250;
    --panel-3: #3a2b60;
    --line: #4a3a6e;
    --text: #f3ecff;
    --muted: #b5a6d2;
    --accent: #d9a441;
    --accent-2: #f3c95f;
    --accent-dark: #a87a24;
    --accent-text: #2a1c0a;
    --parch: #efe1c3;
    --parch-2: #d8c398;
    --parch-ink: #3b2a16;
    --danger: #ff5a3c;
    --ok: #6fd07b;
    --ruby: #ff5c7a;
    --drop: #63b2ff;
    --potion: #7fe49a;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .5);
    --chip-white: #f6f1e6;
    --chip-orange: #ef8a2c;
    --chip-green: #3fae5c;
    --chip-blue: #3f80d8;
    --chip-red: #d6402f;
    --chip-yellow: #f2c53e;
    --chip-purple: #8c4bb6;
    --chip-black: #222229;
    --chip-locoweed: #2f9e8f;
    --chip-ink: #1d1428;
    --display: "Grenze", "Iowan Old Style", Georgia, serif;
    --body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
    --cauldron: #2f6fd6;
    --brew: #1e3566;
    --brew-dark: #090f24;
    --seat-text: #8fb8ff;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.15; font-family: var(--display); font-weight: 700; }
h1:focus { outline: none; }
h3 { font-size: 1.05rem; color: var(--muted); margin-top: .75rem; font-family: var(--body); font-weight: 700; }
p { margin: 0 0 .75rem; }
a { color: var(--accent-2); }
small, .small { font-size: .82rem; }
button { font: inherit; }
b { font-weight: 700; }

.page { padding: 1rem; max-width: 1200px; margin: 0 auto; }
.page.narrow { max-width: 480px; }
.page.with-fabs { padding-bottom: 9.5rem; }

.title { font-size: 2.6rem; text-align: center; color: var(--accent-2); margin-top: 1rem; font-weight: 800; letter-spacing: -.01em; }
.subtitle { text-align: center; color: var(--muted); margin-bottom: 1.5rem; }
/* The start page: the tagline in italics, and the family's two ducks at the foot (the one emoji the pages wear). */
.home .subtitle { font-style: italic; }
.ducks { text-align: center; font-size: 1.9rem; margin: 1.75rem 0 0; letter-spacing: .1em; }

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}
.card h2 { font-size: 1.35rem; color: var(--accent-2); }
details.card > summary { cursor: pointer; font-weight: 700; color: var(--accent-2); list-style: none; font-family: var(--display); font-size: 1.2rem; }
details.card > summary::before { content: "▸ "; }
details.card[open] > summary::before { content: "▾ "; }
details.card[open] > summary { margin-bottom: .5rem; }

.field { display: block; margin-bottom: .75rem; }
.field > span { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .25rem; }
input[type=text], input[type=password], input:not([type]), select {
    width: 100%;
    padding: .65rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
}
.code-input {
    text-transform: uppercase; letter-spacing: .9em; font-size: 1.8rem; text-align: center; font-family: var(--display); font-weight: 700;
    padding-left: 1.2em; color: var(--accent-2);
    background: repeating-linear-gradient(90deg, transparent 0 .25em, var(--panel-2) .25em 1.55em, transparent 1.55em 1.8em) var(--bg);
    background-size: 7.2em 100%; background-position: center; background-repeat: no-repeat;
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .7rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: white; }
.btn.wide { width: 100%; margin-bottom: .5rem; }
.btn.big { font-size: 1.15rem; padding: .9rem 1rem; }
.btn.big small { display: block; font-size: .75rem; font-weight: 400; opacity: .8; }
.btn.small { font-size: .85rem; padding: .35rem .6rem; }
.btn.icon { padding: .4rem .55rem; }
.btn.icon .ico { width: 1.3em; height: 1.3em; }
.btn:focus-visible, .toggle:focus-visible, .jar:focus-visible, .fab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.link { background: none; border: 0; color: var(--accent-2); text-decoration: underline; cursor: pointer; padding: 0; font-size: inherit; }

.divider { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; margin: 1rem 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.error { color: #ffb3a3; font-weight: 700; }
.hint { color: var(--muted); font-size: .85rem; text-align: center; }
.muted { color: var(--muted); }
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.section-title { margin-top: 1.25rem; color: var(--accent-2); font-size: 1.1rem; font-family: var(--display); }

.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: .5rem; }

/* Icons from the sprite */
.ico { width: 1.2em; height: 1.2em; vertical-align: -.25em; display: inline-block; flex: none; }
.ico.star { color: var(--accent-2); }
.ico.ruby { color: var(--ruby); }
.ico.drop { color: var(--drop); }
.ico.coin { color: var(--accent-2); }
.ico.flask { color: var(--potion); }
.ico.flask-empty, .ico.off { color: var(--muted); }
.ico.bag { color: #c69a6a; }
.ico.rat { color: #d9d0e6; }
.ico.boom { color: var(--danger); }
.ico.hand { color: var(--text); }
.ico.spoon { color: #ddd; }
.ico.seat { color: var(--cauldron); }
.ico.ruby-ink { color: #b4262a; } .ico.drop-ink { color: #2a6fbf; } .ico.pumpkin-ink { color: #c45f12; --bg: #efe1c3; }

/* Seat colours: a small cauldron next to a name */
.seat-dot { display: inline-flex; align-items: center; gap: .3rem; }
.seat-dot .ico { width: 1em; height: 1em; }
.seat-name { color: var(--seat-text); font-weight: 700; }

/* Lobby */
.seat-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.seat-list li { display: flex; justify-content: space-between; align-items: center; padding: .5rem .25rem; border-bottom: 1px solid var(--line); }
.seat-you { display: inline-flex; align-items: center; gap: .5rem; }
.seat-you .rename-btn { padding: .3rem .45rem; }
/* Changing your name: the field with Save and Cancel, in the lobby under the seats and in the menu's settings */
.rename-row { display: flex; gap: .5rem; align-items: center; margin: .25rem 0 .75rem; flex: 1; min-width: 0; }
.rename-row input { flex: 1; min-width: 0; width: auto; }
.rename-row .btn { flex: none; margin: 0; }
.setting.static { cursor: default; }
.setting.static .rename-row { margin: 0; }
.setting.static .rename-btn { flex: none; margin: 0; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); margin-right: .4rem; }
.dot.on { background: var(--ok); }
.room-code { font-family: var(--display); font-size: 2.8rem; letter-spacing: .3em; color: var(--accent-2); text-align: center; margin: .25rem 0 .5rem; font-weight: 800; }
.books { display: grid; grid-template-columns: 1fr auto; gap: .5rem .75rem; align-items: center; }
.books select { width: auto; }
.book-text { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); margin: -.25rem 0 .5rem; }

/* Game layout */
.game { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) {
    .game { grid-template-columns: 2fr 1fr; align-items: start; }
}

.topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.topbar .round { font-size: 1.5rem; font-weight: 800; font-family: var(--display); color: var(--accent-2); }
.topbar .round .of { font-weight: 500; color: var(--muted); font-size: 1rem; font-family: var(--body); }
.toggle { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: .85rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.toggle[aria-pressed="true"] { color: var(--text); border-color: var(--accent); }
.toggle .ico { width: 1.25em; height: 1.25em; }

/* Floating action bar while brewing */
.fab-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem;
    padding: .75rem 1.1rem calc(.9rem + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    max-width: 1200px; margin: 0 auto;
}
.fab-bar > * { pointer-events: auto; }
.fab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .35);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
    color: var(--text);
    background: var(--panel-2);
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.fab .ico { width: 1.8rem; height: 1.8rem; }
.fab span:not(.ico) { font-size: .8rem; }
.fab.draw { width: 6.2rem; height: 6.2rem; background: radial-gradient(circle at 40% 30%, var(--accent-2), var(--accent) 70%); color: var(--accent-text); border-color: var(--accent-dark); }
.fab.draw .ico { width: 2.6rem; height: 2.6rem; }
.fab.draw span:not(.ico) { font-size: .95rem; }
.fab.stop { width: 4.8rem; height: 4.8rem; }
.fab.flask { border-radius: 999px; flex-direction: row; gap: .4rem; padding: .5rem .8rem; height: auto; width: auto; background: var(--panel); margin-bottom: .5rem; font-weight: 600; }
.fab.flask .ico { width: 1.3rem; height: 1.3rem; }
.fab:disabled { opacity: .45; cursor: default; box-shadow: none; }
.fab:active:not(:disabled) { transform: scale(.96); }
.fab.draw.jiggle { animation: jiggle .35s ease-in-out; }
@keyframes jiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg) scale(.96); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-4deg); } }
.fab-status { flex: 1; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .8rem 1rem; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; gap: .4rem; }
/* The way back to the shop while peeking at the table from it */
.flow-bar { justify-content: center; }
.flow-bar .btn { border-radius: 999px; padding: .85rem 1.5rem; box-shadow: var(--shadow); font-weight: 700; }

.pill { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; background: var(--panel-2); border: 1px solid var(--line); white-space: nowrap; }
.pill.exploded { background: var(--danger); color: white; border-color: var(--danger); }
.pill.done { background: var(--ok); color: #123; border-color: var(--ok); }
.pill.brewing { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pill.stopped { background: var(--panel-3); }
.pill.offline { background: #555; color: #ddd; }

/* Sheets: bottom sheet on phones, centred dialog on wider screens. The between-round flow (.flow: round start, results,
   questions, the explosion choice, the shop) keeps one size whatever the step holds, so the steps read as one thing. */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(10, 5, 20, .66); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop.dim { background: rgba(10, 5, 20, .9); }
.sheet {
    position: relative; overflow: hidden;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow);
}
.sheet.flow { height: 88vh; height: min(calc(100dvh - 2.75rem), 780px); max-height: none; }
.sheet > header { padding: .9rem 1rem .6rem; border-bottom: 1px solid var(--line); flex: none; }
.sheet > header .head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.sheet > header .head-text { flex: 1; min-width: 0; }
.sheet > header .head-aside { display: flex; align-items: center; gap: .5rem; flex: none; }
.sheet > header h2 { font-size: 1.3rem; margin: 0; }
.sheet > header .blurb { margin: .35rem 0 0; font-size: .9rem; }
.sheet > header .subject { margin-top: .5rem; }
.sheet > .body { padding: .75rem 1rem; overflow: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.sheet > .body.centre { display: flex; flex-direction: column; }
.sheet > .body.centre::before, .sheet > .body.centre::after { content: ""; flex: 1 0 0; }
.sheet > footer { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: flex; gap: .5rem; flex: none; }
.sheet > footer > .btn { flex: 1; margin: 0; }
.fx-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.confetti { position: absolute; left: 0; top: 0; width: 7px; height: 10px; border-radius: 2px; will-change: transform; }
@media (min-width: 700px) {
    .sheet-backdrop { align-items: center; padding: 1rem; }
    .sheet { border-radius: 16px; max-height: 90vh; max-height: 90dvh; }
    .sheet.flow { height: min(86vh, 780px); }
}
/* The X on a sheet that is only read (Sheet with OnClose): a round hit target in the header's top right. The icon
   size is pinned so a seat-tinted header (whose aside icons are 2.2rem) does not blow it up. */
.sheet-x { width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; flex: none; margin: -.3rem -.35rem 0 0;
    background: transparent; border-color: transparent; color: var(--muted); }
.sheet-x:hover:not(:disabled), .sheet-x:focus-visible { color: var(--accent-2); border-color: var(--line); background: var(--panel-2); filter: none; }
.sheet > header .head-aside .sheet-x .ico,
.sheet.seat-tint > header .head-aside .sheet-x .ico { width: 1.15rem; height: 1.15rem; color: currentColor; filter: none; }

/* Sheet motion. A sheet the player opened (Sheet with OnClose: .closable) arrives as a modal: the backdrop fades in
   and the sheet slides up from the bottom on a phone (fades and grows on a wide screen); closed by its X, the backdrop
   or Escape it plays the reverse (.closing) before it goes. A step the game put there (the round splash, a results
   step, a question, the shop) is not a modal arriving but the next card of the same flow: no backdrop fade (it would
   flash the page between steps) and only a short rise. No fill mode anywhere, so no transform stays on the sheet
   afterwards (it would trap position: fixed children and the loupe). */
.sheet-backdrop.closable { animation: sheet-fade-in .15s ease-out; }
.sheet-backdrop.closable .sheet { animation: sheet-up .18s cubic-bezier(.2, .8, .2, 1); }
.sheet-backdrop:not(.closable) .sheet { animation: sheet-step .15s ease-out; }
.sheet-backdrop.closing { animation: sheet-fade-out .16s ease-in forwards; pointer-events: none; }
.sheet-backdrop.closing .sheet { animation: sheet-down .16s ease-in forwards; }
@keyframes sheet-fade-in { from { opacity: 0; } }
@keyframes sheet-fade-out { to { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes sheet-step { from { opacity: 0; transform: translateY(8px); } }
@keyframes sheet-pop { from { opacity: 0; transform: scale(.96); } }
@keyframes sheet-unpop { to { opacity: 0; transform: scale(.96); } }
@media (min-width: 700px) {
    .sheet-backdrop.closable .sheet { animation-name: sheet-pop; }
    .sheet-backdrop.closing .sheet { animation-name: sheet-unpop; }
}

.sheet .options { display: flex; flex-direction: column; gap: .5rem; }
.sheet .option { display: flex; align-items: center; gap: .75rem; text-align: left; justify-content: flex-start; }
.sheet .option > .ico { width: 1.7em; height: 1.7em; }
.sheet .option small { display: block; font-size: .78rem; font-weight: 400; opacity: .8; }
.sheet.pending { border-color: var(--accent); }
.sheet.reward { border-color: var(--danger); }

/* Rules sheet */
.rule { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.rule:last-child { border-bottom: 0; }
.rule h3 { font-size: 1.05rem; color: var(--text); margin: 0 0 .3rem; font-family: var(--display); }
.rule p { margin: .4rem 0 0; font-size: .92rem; }
.rule.focus { background: var(--panel-2); border: 1px solid var(--accent); border-radius: 8px; padding: .7rem; margin-bottom: .5rem; }
.rule.card-rule { border-left: 4px solid var(--chip-blue); padding-left: .75rem; }
.rule.card-rule.immediate { border-left-color: var(--chip-purple); }
.rule .prices { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; font-size: .85rem; margin-top: .45rem; }
.rule .prices span { display: inline-flex; align-items: center; gap: .3rem; }
.howto { padding-left: 1.2rem; margin: 0; font-size: .9rem; }
.howto li { margin-bottom: .4rem; }

/* Table screen */
.table-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .table-grid { grid-template-columns: 1fr 1fr; } }
.table-player h2 { margin-bottom: .25rem; display: flex; align-items: center; gap: .4rem; }
.table-player .board { max-width: 340px; }
.ticker { display: flex; flex-direction: column; gap: .2rem; font-size: .95rem; }
.ticker div { padding: .3rem .6rem; background: var(--panel-2); border-radius: 8px; }
.ticker div:first-child { background: var(--panel-3); font-weight: 700; }

/* Log */
.log { max-height: 280px; overflow: auto; font-size: .85rem; color: var(--muted); }
.log div { padding: .15rem 0; border-bottom: 1px dotted var(--line); }
.log div.mine { color: var(--text); }
.log div.marker { color: var(--accent-2); font-weight: 600; }

/* Standings */
.standings { list-style: none; padding: 0; margin: 0; }
.standings li { display: flex; align-items: center; gap: .6rem; padding: .6rem .25rem; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
.standings li .medal { width: 1.8rem; text-align: center; font-family: var(--display); font-weight: 800; color: var(--muted); }
.standings li .who { flex: 1; display: inline-flex; align-items: center; gap: .35rem; }
.standings li.place-1 { color: var(--accent-2); font-weight: 700; font-size: 1.3rem; }
.standings li.place-1 .medal { color: var(--accent-2); }

.waiting { text-align: center; color: var(--muted); padding: .75rem .5rem .25rem; font-style: italic; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #222;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* Host page (/admin) */
.card.highlight { border-color: var(--accent); }
input[readonly] { color: var(--muted); font-size: .9rem; }
.room-list { list-style: none; padding: 0; margin: 0; }
.room-list li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.room-list li:last-child { border-bottom: 0; }
.room-list .code { font-family: var(--display); font-size: 1.5rem; letter-spacing: .2em; color: var(--accent-2); font-weight: 700; }
.room-list .row { margin-top: .25rem; }
.room-list .code small { letter-spacing: normal; font-family: inherit; font-weight: 400; font-size: .85rem; margin-left: .25rem; }
.room-list li.test .code { color: var(--muted); }
.room-list li.named { border-left: 3px solid var(--accent); padding-left: .6rem; }

/* The join screen of a named room: the roster as tap-to-join names above the name field */
.seat-pick.roster .btn { border-left-color: var(--accent); }

/* ---- Records (RecordsPage, the lobby's and standings' lines) */
.records .title { letter-spacing: .25em; }
.lb { width: 100%; border-collapse: collapse; margin: .25rem 0 .5rem; font-size: 1rem; }
.lb th { text-align: right; font-weight: 600; color: var(--muted); font-size: .8rem; padding: .25rem .4rem; border-bottom: 1px solid var(--line); }
.lb td { text-align: right; padding: .5rem .4rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.lb th:first-child, .lb td:first-child { text-align: left; }
.lb tr:last-child td { border-bottom: 0; }
.lb td.who { font-weight: 600; }
.lb td.who .ico { width: 1.1em; height: 1.1em; vertical-align: -.15em; margin-right: .2rem; color: var(--accent-2); }
.lb td.wins { font-weight: 700; color: var(--accent-2); }
.lb tr.lead td { font-size: 1.15rem; color: var(--accent-2); }
.lb-game h2 { display: flex; align-items: center; gap: .5rem; }
.lb-game h2 .ico { width: 1.4rem; height: 1.4rem; }
.lb-game h2 small { font-size: .8rem; font-weight: 400; margin-left: auto; }
.lb-recent { list-style: none; padding: 0; margin: 0; }
.lb-recent li { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.lb-recent li:last-child { border-bottom: 0; }
.lb-recent .game { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.lb-recent .game .ico { width: 1.2em; height: 1.2em; }
.lb-recent .result { margin: .2rem 0 0; line-height: 1.5; }
.lb-recent .result .won { font-weight: 700; color: var(--accent-2); }
.lb-recent .result small { color: var(--muted); font-size: .85em; }
.lb-recent .rules { margin: .1rem 0 0; }
.lb-roster { list-style: none; padding: 0; margin: 0; }
.lb-roster li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.lb-roster li:last-child { border-bottom: 0; }
.lb-roster .who { flex: 1; font-weight: 600; }
.lb-roster input { flex: 1; min-width: 0; }
.records-card .btn { margin-top: .25rem; }
.records-note { display: flex; align-items: flex-start; gap: .4rem; margin: .75rem 0 0; font-size: .9rem; color: var(--muted); }
.records-note .ico { width: 1.2em; height: 1.2em; flex: none; margin-top: .1em; }

/* Toasts (Toasts.razor): pills over everything but the flying pieces (the reveal, Lost Cities' ghosts and Sky Team's
   dice are 70), so an open sheet (60) never hides one. The stack is a column under the top bar (or above the action
   bar with .bottom), so a long line may wrap to two without sitting on the next. --life is how long one stays; it
   fades for its last .4 s. */
.toasts { position: fixed; left: 0; right: 0; top: calc(3.4rem + env(safe-area-inset-top, 0px)); z-index: 65; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 0 1rem; }
.toasts.bottom { top: auto; bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); flex-direction: column-reverse; }
.toast {
    display: flex; align-items: center; gap: .4rem; max-width: 100%;
    background: var(--panel); color: var(--text); border: 1px solid var(--accent); border-radius: 999px; box-shadow: var(--shadow);
    padding: .45rem .95rem; font-size: .92rem; line-height: 1.25; text-align: center;
    animation: toast-in .25s ease-out, toast-out .4s ease-in calc(var(--life, 2800ms) - 400ms) forwards;
}
.toast b { font-weight: 700; }
.toast > .ico { width: 1.15rem; height: 1.15rem; }
.toast.seat-tint { border-color: var(--cauldron); border-left-width: 5px; }
.toasts.bottom .toast { animation-name: toast-in-up, toast-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes toast-in-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; } }
@keyframes toast-fade { from { opacity: 0; } }

/* Your turn (quacks.yourTurn): the control to touch next gets one amber sweep across it for a second. */
.turn-cue { position: relative; overflow: hidden; }
.turn-cue::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 208, 110, .65) 50%, transparent 80%);
    transform: translateX(-110%); animation: turn-sweep 1s ease-out;
}
@keyframes turn-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }

.centre-text { text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .sheet-backdrop, .sheet, .sheet-backdrop.closing, .sheet-backdrop.closing .sheet { animation: none !important; }
    .toast { transition: none; animation: toast-fade .2s ease-out, toast-out .4s ease-in calc(var(--life, 2800ms) - 400ms) forwards !important; }
    .turn-cue::after { animation: none; transform: none; background: rgba(255, 208, 110, .25); }
}

@media (prefers-reduced-motion: reduce) {
    /* Quacks; the landed chip's fade and the newer shows are in quedlinburg.css's own block. */
    .board.brewing .bubble, .board.brewing .brew-glow, .board .pc.land .ripple, .fab.draw.jiggle, .board.shake, .fcard.deal { animation: none !important; }
    .fcard.deal { transform: rotateY(180deg); }
}

/* ---- The game page fits one phone screen: top bar, card + last chip, the pot carousel, the action bar */
.game-page { max-width: 560px; padding-top: .6rem; }
.page.game-page.with-fabs { padding-bottom: 7.6rem; }
.game-page .topbar { margin-bottom: .5rem; flex-wrap: nowrap; }
.game-page .topbar .round { font-size: 1.3rem; white-space: nowrap; }
.menu-btn { padding-left: .55rem; padding-right: .55rem; }
.menu-btn .ico { width: 1.35rem; height: 1.35rem; }
.hud { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .5rem; }
.hud.single { grid-template-columns: 1fr; }
.hud .tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .4rem .6rem; min-height: 3.4rem; display: flex; align-items: center; gap: .5rem; color: var(--text); text-align: left; min-width: 0; }
.hud .tile small { display: block; color: var(--muted); font-size: .7rem; line-height: 1.2; }
.hud .tile b { display: block; font-size: .9rem; line-height: 1.15; }
.hud .tile > span { min-width: 0; }
.loupe { position: fixed; left: 0; top: 0; z-index: 60; width: 168px; height: 168px; border-radius: 50%; overflow: hidden; pointer-events: none;
    border: 3px solid #e8c66a; background: #0e0f14; box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 18px rgba(0,0,0,.6); }
.loupe > svg { display: block; width: 100%; height: 100%; }
/* The HTML lens (Guillotine, Sushi Go): a copy of the page, scaled and moved by quacks.attachLoupe, frozen still. */
.loupe.html { background: var(--bg); }
.loupe.html .loupe-copy { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; min-height: 0; }
.loupe.html .loupe-copy *, .loupe.html .loupe-copy { animation: none !important; transition: none !important; }
/* Menu and bag sheets */
.menu-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.menu-tiles .btn { flex-direction: column; gap: .2rem; padding: .7rem .3rem; font-size: .9rem; margin: 0; text-decoration: none; }
.menu-tiles .btn .ico { width: 1.5rem; height: 1.5rem; }
.settings { display: flex; flex-direction: column; gap: .4rem; }
.setting { display: flex; align-items: center; gap: .7rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .75rem; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.setting > .ico { width: 1.4rem; height: 1.4rem; flex: none; color: var(--muted); }
.setting > span { flex: 1; }
.setting small { display: block; color: var(--muted); font-size: .78rem; }
.setting .switch { flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); position: relative; transition: background .2s; }
.setting .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.setting[aria-checked="true"] .switch { background: var(--accent-dark); border-color: var(--accent); }
.setting[aria-checked="true"] .switch::after { transform: translateX(1.1rem); background: var(--accent-2); }
.setting[aria-checked="true"] > .ico { color: var(--accent-2); }
.menu-log { margin-top: 1rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .75rem; }
.menu-log summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.menu-log summary .ico { width: 1.1rem; height: 1.1rem; }
.menu-log .log { max-height: 40vh; overflow: auto; margin-top: .5rem; }
.menu-sheet .hint { margin-top: 1rem; }
.bag-sheet h3 { margin-top: .9rem; }
.menu-sheet > header, .bag-sheet > header { padding: .75rem 1rem; }

/* Picking your seat in a game that has started (or been resumed): one button per player */
.seat-pick { display: grid; gap: .5rem; margin: .5rem 0; }
.seat-pick .btn { justify-content: flex-start; border-left: 6px solid var(--cauldron); }


/* The shelf: one button per game on the host page, the list of games on the start page */
.new-room { display: flex; flex-direction: column; gap: .5rem; }
.game-btn { justify-content: flex-start; text-align: left; gap: .75rem; padding: .7rem .9rem; }
.game-btn > .ico { width: 2rem; height: 2rem; flex: none; }
.game-btn span { display: flex; flex-direction: column; min-width: 0; }
.game-btn small { font-weight: 400; font-size: .8rem; opacity: .85; white-space: normal; line-height: 1.25; }
.shelf-list { list-style: none; padding: 0; margin: 0 0 .5rem; }
.shelf-list li { display: flex; flex-direction: column; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.shelf-list li:last-child { border-bottom: 0; }

/* A sheet that leaves the page behind it visible and usable (the cribbage show, which must not hide the board):
   no dimming, the backdrop lets taps through, the sheet sits at the bottom and fits its content. */
.sheet-backdrop.see-through { background: transparent; pointer-events: none; align-items: flex-end; }
.sheet-backdrop.see-through .sheet { pointer-events: auto; border-radius: 16px 16px 0 0; }
@media (min-width: 700px) {
    .sheet-backdrop.see-through { align-items: flex-end; padding: 0 1rem 1rem; }
    .sheet-backdrop.see-through .sheet { border-radius: 16px; }
}
/* A sheet in a seat's colour: the border and a band across the header (style="--cauldron:…" from SeatColours). */
.sheet.seat-tint { border: 2px solid var(--cauldron); border-bottom: 0; }
.sheet.seat-tint > header { background: linear-gradient(90deg, color-mix(in srgb, var(--cauldron) 45%, var(--panel)), var(--panel) 85%); border-bottom-color: var(--cauldron); }
.sheet.seat-tint > header .eyebrow { color: var(--text); opacity: .85; }
.sheet.seat-tint > header .head-aside .ico { width: 2.2rem; height: 2.2rem; color: var(--cauldron); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
@media (min-width: 700px) { .sheet.seat-tint { border-bottom: 2px solid var(--cauldron); } }

/* The lobby's game switch */
/* The shelf in the lobby: a grid of equal cells (two across on a phone, more on a tablet, room for more games), so the
   tiles never reflow when a theme brings its own fonts. */
.game-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; margin: .5rem 0; }
.game-pick-btn { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; padding: .5rem .65rem; min-height: 3.3rem; margin: 0; text-align: left; line-height: 1.15; }
.game-pick-btn .ico { width: 1.5rem; height: 1.5rem; flex: none; }
.game-pick-btn span { font-size: .92rem; }
.game-pick-btn.on { border-color: var(--accent); background: var(--accent); color: var(--accent-text); font-weight: 700; }

/* The lobby's code row (the code at the left, the share button at the right), the host who is waited for, and a named
   room's records as a small leaderboard. */
.lobby-code { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.lobby-code .hint { text-align: left; margin: 0; }
.lobby-code .room-code { font-size: 2rem; letter-spacing: .25em; text-align: left; margin: 0; line-height: 1.1; }
.lobby-code .btn { margin: 0; flex: none; }
.lobby-link { margin-top: .5rem; }
.host-away { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .9rem; margin: .25rem 0 .5rem; }
.host-away .ico { width: 1.1rem; height: 1.1rem; color: var(--accent-2); flex: none; }
.lobby .abandoned-note { font-size: .9rem; margin: .25rem 0 .75rem; }
.records-card .row.between { align-items: baseline; }
.records-card .row.between .btn { margin: 0; }
.lb-mini { list-style: none; margin: .25rem 0 .5rem; padding: 0; display: grid; gap: .3rem; }
.lb-mini li { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: 8px; background: var(--panel-2); }
.lb-mini .place { width: 1.4rem; text-align: center; font-family: var(--display); font-weight: 800; color: var(--muted); flex: none; }
.lb-mini li.lead .place { color: var(--accent-2); }
.lb-mini .who { flex: 1; min-width: 0; font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-mini .who .ico { width: 1em; height: 1em; color: var(--accent-2); flex: none; }
.lb-mini .wins { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.lb-mini .wins b { color: var(--text); font-family: var(--display); font-size: 1.1rem; }

/* ---- The beat player (ShowStrip + ShowQueue): the caption of the step playing now, a bar draining over its dwell
   (--dwell), and Skip / Next. Fixed just above the action bar, under every sheet (a held card's own button is the way on
   while it is up); .inline sits in the page's flow (the table). Tinted in the seat's colour when the beat has a seat. */
.show-strip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); z-index: 45;
    width: min(540px, calc(100% - 1.5rem)); background: var(--panel); color: var(--text); border: 1px solid var(--accent); border-radius: 12px;
    box-shadow: var(--shadow); overflow: hidden; animation: show-in .2s ease-out; }
.show-strip.inline { position: relative; left: auto; bottom: auto; transform: none; width: auto; margin: 0 auto .5rem; max-width: 900px; z-index: 1; animation-name: show-in-inline; }
.show-strip.seat-tint { border-color: var(--cauldron); border-left-width: 5px; }
.show-strip-row { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem .45rem .8rem; min-height: 2.6rem; }
.show-strip-row > .ico { width: 1.2rem; height: 1.2rem; flex: none; }
.show-strip-cap { flex: 1; min-width: 0; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.show-strip-count { flex: none; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.show-strip-skip { flex: none; font: inherit; font-size: .85rem; font-weight: 700; color: var(--accent); background: transparent; border: 1px solid var(--line);
    border-radius: 999px; padding: .3rem .8rem; min-height: 2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.show-strip.held .show-strip-skip { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
.show-strip-bar { display: block; height: 3px; background: color-mix(in srgb, var(--line) 60%, transparent); }
.show-strip-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: show-drain var(--dwell, 1400ms) linear forwards; }
.show-strip.seat-tint .show-strip-bar i { background: var(--cauldron); }
.show-strip.inline .show-strip-cap { font-size: 1.15rem; }
@keyframes show-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes show-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes show-in-inline { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
    .show-strip, .show-strip.inline { animation: none; }
    /* the timer still drains (it is information, not decoration), but in four steps */
    .show-strip-bar i { animation-timing-function: steps(4, end); }
}

/* ---- Table chat (ChatBubble, ChatTicker, ChatModePicker): the bubble beside the menu, the thought cloud that trails
   down from it over the board, a line arriving as a seat-tinted pop over the top bar (above every sheet, like the
   toasts), the table's bigger pop bottom left, and the host's three-way switch. Themed by the tokens, so each game's
   cloud is in that game's colours. */
.chat-anchor { position: relative; display: inline-flex; }
.chat-anchor.open { z-index: 64; }
.chat-btn { position: relative; }
.chat-btn.open { border: 2px solid var(--accent-2); color: var(--accent-2); background: var(--panel-3); }
.chat-badge { position: absolute; top: -.45rem; right: -.45rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px;
    background: var(--accent-2); color: var(--accent-text); font-size: .72rem; font-weight: 700; line-height: 1.15rem; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.chat-trail { position: absolute; right: 50%; top: 100%; width: 0; height: 0; pointer-events: none; }
.chat-trail i { position: absolute; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); animation: chat-trail-in .25s ease-out backwards; }
.chat-trail i:nth-child(1) { width: .55rem; height: .55rem; left: -.3rem; top: .35rem; }
.chat-trail i:nth-child(2) { width: .85rem; height: .85rem; left: -1.5rem; top: .95rem; animation-delay: .05s; }
.chat-trail i:nth-child(3) { width: 1.2rem; height: 1.2rem; left: -3rem; top: 1.75rem; animation-delay: .1s; }
.chat-backdrop { position: fixed; inset: 0; z-index: 62; background: rgba(0, 0, 0, .3); }
.chat-cloud { position: fixed; z-index: 63; left: .9rem; right: .9rem; top: calc(6.2rem + env(safe-area-inset-top, 0px)); max-width: 560px; margin: 0 auto;
    max-height: calc(100dvh - 7.5rem); overflow: auto; -webkit-overflow-scrolling: touch;
    background: color-mix(in srgb, var(--panel-2) 97%, transparent); border: 1px solid var(--line); border-radius: 34px; padding: 1rem 1.1rem;
    box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .85rem; animation: chat-cloud-in .22s ease-out; }
@keyframes chat-cloud-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes chat-trail-in { from { opacity: 0; transform: scale(.3); } }
.chat-recent { display: flex; flex-direction: column; gap: .2rem; padding: 0 .4rem; font-size: .88rem; color: var(--muted); }
.chat-recent div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-recent b { color: var(--seat-text); }
.chat-head { display: flex; align-items: center; gap: .6rem; }
.chat-back { border-radius: 999px; padding-left: .5rem; gap: .2rem; color: var(--accent-2); }
.chat-level { font-family: var(--display); font-size: 1.3rem; font-weight: 700; }
.chat-bubbles { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.chat-bubble { display: inline-flex; align-items: center; gap: .35rem; min-height: 3.2rem; padding: .45rem 1.25rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--panel-3); color: var(--text); font-family: var(--display); font-size: 1.3rem; font-weight: 700;
    cursor: pointer; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s, box-shadow .15s; }
.chat-bubble .ico { width: 1rem; height: 1rem; color: var(--accent-2); }
.chat-bubble.own { border-color: var(--accent); color: var(--accent-2); }
.chat-bubble.sent { background: var(--accent); border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.chat-bubble.sent .ico { color: var(--accent-text); width: 1.15rem; height: 1.15rem; }
.chat-bubble:active { transform: scale(.97); }
.chat-bubble.nudge { border-color: var(--accent); }
.chat-bubble.seat { border: 2px solid var(--cauldron); }
.chat-bubble.seat .ico { color: var(--cauldron); width: 1.3rem; height: 1.3rem; }
.chat-bubble.seat.away { opacity: .6; }
.chat-type { display: flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .5rem 1.1rem; border-radius: 999px; border: 1px dashed var(--line);
    background: var(--panel); color: var(--muted); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-type .ico { width: 1.4rem; height: 1.4rem; }
.chat-field { display: flex; gap: .5rem; align-items: center; }
.chat-field input { flex: 1; min-width: 0; min-height: 3rem; padding: .5rem 1rem; border-radius: 999px; border: 2px solid var(--accent-2); background: var(--panel); color: var(--text); font: inherit; outline: none; }
.chat-field .btn { border-radius: 999px; flex: none; }
.chat-cloud .error { margin: 0; }
.chat-pops { position: fixed; left: .6rem; right: .6rem; top: calc(.5rem + env(safe-area-inset-top, 0px)); z-index: 66; display: flex; flex-direction: column; gap: .4rem; pointer-events: none; }
.chat-pop { pointer-events: auto; display: flex; align-items: center; gap: .6rem; width: 100%; max-width: 640px; margin: 0 auto;
    background: var(--panel); color: var(--text); border: 1px solid var(--cauldron); border-left-width: 6px; border-radius: 14px; padding: .5rem .5rem .5rem .75rem; box-shadow: var(--shadow);
    animation: toast-in .25s ease-out, toast-out .4s ease-in calc(var(--life, 6000ms) - 400ms) forwards; }
.chat-pop > .ico { width: 1.4rem; height: 1.4rem; color: var(--cauldron); flex: none; }
.chat-pop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; cursor: pointer; }
.chat-pop-text .who { font-size: .8rem; font-weight: 700; color: var(--seat-text); }
.chat-pop-text .what { font-family: var(--display); font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }
.chat-reply { border-radius: 999px; color: var(--accent-2); font-weight: 700; flex: none; }
.chat-dismiss { border: 0; background: transparent; color: var(--muted); border-radius: 50%; width: 2.2rem; height: 2.2rem; padding: 0; flex: none; }
/* someone nudged this phone: a thicker border that shakes for a moment as it lands */
.chat-pop.nudged { border-width: 2px; border-left-width: 8px; box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--cauldron) 30%, transparent);
    animation: toast-in .25s ease-out, chat-nudge .6s ease-in-out .25s 2, toast-out .4s ease-in calc(var(--life, 6000ms) - 400ms) forwards; }
.chat-pop.nudged > .ico { width: 1.7rem; height: 1.7rem; }
@keyframes chat-nudge { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px) rotate(-1deg); } 40%, 60% { transform: translateX(7px) rotate(1deg); } }
.chat-pops.table { top: auto; bottom: 1.5rem; left: 1.5rem; right: auto; width: min(560px, calc(100% - 3rem)); flex-direction: column-reverse; }
.chat-pops.table .chat-pop { padding: .8rem 1.3rem .8rem 1rem; border-radius: 16px; border-left-width: 8px; animation-name: toast-in-up, toast-out; }
.chat-pops.table .chat-pop > .ico { width: 1.8rem; height: 1.8rem; }
.chat-pops.table .chat-pop-text { cursor: default; }
.chat-pops.table .chat-pop-text .who { font-size: .95rem; }
.chat-pops.table .chat-pop-text .what { font-size: 1.7rem; }
.chat-modes { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--panel-2); }
.chat-modes .btn { border: 0; border-radius: 0; background: transparent; }
.chat-modes .btn + .btn { border-left: 1px solid var(--line); }
.chat-modes .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.lobby { position: relative; }
.lobby-chat { position: absolute; right: 1rem; top: 1.1rem; }
.chat-row { margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) {
    .chat-cloud, .chat-trail i { animation: none; }
    .chat-pop, .chat-pop.nudged { animation: toast-fade .2s ease-out, toast-out .4s ease-in calc(var(--life, 6000ms) - 400ms) forwards; }
}

/* ---- the vote to stop a game (AbandonPrompt, the menu's Stop this game…, the lobby's note) */
.abandon-card {
    position: fixed; left: 50%; top: calc(3.6rem + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 64;
    width: min(26rem, calc(100vw - 2rem)); background: var(--panel); color: var(--text);
    border: 2px solid var(--danger); border-radius: 16px; padding: .75rem .9rem .8rem; box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent);
    animation: abandon-in .3s cubic-bezier(.2, .8, .3, 1.1) both;
}
.abandon-card h3 { margin: 0 0 .2rem; font-size: 1.05rem; display: flex; align-items: center; gap: .4rem; }
.abandon-card h3 .ico { width: 1.25rem; height: 1.25rem; color: var(--danger); flex: none; }
.abandon-card p { margin: 0 0 .5rem; }
.abandon-seats { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.abandon-seats li { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; border: 2px solid var(--cauldron, var(--line)); font-weight: 700; font-size: .9rem; }
.abandon-seats li .ico.seat { width: 1rem; height: 1rem; color: var(--cauldron, currentColor); }
.abandon-seats li small { color: var(--muted); font-weight: 600; font-size: .72rem; }
.abandon-seats li.yes { background: color-mix(in srgb, var(--danger) 14%, var(--panel)); }
.abandon-seats li.yes .ico.seat { color: var(--danger); }
.abandon-seats li.away { opacity: .55; }
.abandon-actions { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.abandon-actions .muted { margin-right: auto; }
@keyframes abandon-in { from { transform: translate(-50%, -1.2rem); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .abandon-card { animation: none; } }
.menu-stop-btn { margin-top: .9rem; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.menu-stop-btn .ico { color: var(--danger); }
.menu-stop { margin-top: .9rem; padding: .7rem .8rem; border: 2px solid var(--danger); border-radius: 14px; }
.menu-stop p { margin: 0 0 .6rem; }
.menu-stop .row { display: flex; gap: .5rem; justify-content: flex-end; }
.abandoned-note { display: flex; align-items: center; justify-content: center; gap: .4rem; color: var(--muted); font-weight: 600; margin: -.2rem 0 .8rem; text-align: center; }
.abandoned-note .ico { width: 1.1rem; height: 1.1rem; color: var(--danger); flex: none; }