/* Generated by bin/build-css.php from public/assets/css/games/. Do not edit. */

/* ===== arcade.css ===== */
/* --------------------------------------------------------------- Arcade
 *
 * Tank Duel, Light Trails and Ring Out. Everything the three of them draw is on
 * a canvas, so this file is only the furniture around it: the screen, the head-up
 * strip, the thumb pads, and the two-run comparison the duel ends on.
 *
 * Every class starts with arc- because this stylesheet is joined into the one
 * games.css that loads on every page, and a game has no business restyling
 * anything the shell owns.
 *
 * The pads are drawn for a thumb first and are the only controls that exist on a
 * phone; the keyboard is the shortcut, not the other way round.
 */

.arc { margin: 0 0 1rem; }

.arc-head { margin: 0 0 .9rem; }
.arc-title { margin: 0 0 .2rem; font-size: 1.15rem; letter-spacing: -.01em; }
.arc-blurb { margin: 0 0 .35rem; color: var(--ink-dim); }
.arc-mode { margin: 0; color: var(--ink-dim); font-size: .875rem; }

/* ------------------------------------------------------------ the screen */

.arc-screen {
    position: relative;
    border: 1px solid var(--panel-line);
    border-radius: .7rem;
    overflow: hidden;
    background: #150c19;
}
.arc-canvas {
    display: block;
    width: 100%;
    height: auto;
    /* The simulation is drawn at a fixed size and scaled here, so a phone and a
       desktop see the same arena rather than different amounts of it. */
    aspect-ratio: 7 / 5;
    touch-action: none;
}

.arc-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.25rem;
    text-align: center;
    background: rgba(21, 12, 25, .82);
}
.arc-overlay[hidden] { display: none; }
.arc-over-title { margin: 0; font-size: 1.3rem; font-weight: 700; }
.arc-over-note { margin: 0; max-width: 30rem; color: var(--ink-dim); font-size: .9rem; }
.arc-go { margin-top: .4rem; }

/* ------------------------------------------------------------ the strip */

.arc-hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin: .6rem 0 .8rem;
    padding: .5rem .7rem;
    border: 1px solid var(--panel-line);
    border-radius: .6rem;
    background: var(--panel);
    font-size: .9rem;
}
.arc-hud-cell { display: inline-flex; align-items: baseline; gap: .35rem; }
.arc-hud-key { color: var(--ink-dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.arc-hud-cell b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.arc-hud-wide { flex: 1 1 8rem; color: var(--ink-dim); }
.arc-pause { margin: 0; padding: .35rem .8rem; font-size: .85rem; }

/* ------------------------------------------------------------- the pads */

.arc-pads { display: flex; gap: .8rem; justify-content: space-between; margin: 0 0 .9rem; }
.arc-pad {
    display: grid;
    gap: .4rem;
    flex: 1 1 0;
    max-width: 15rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: ". pu ." "pl . pr" ". pd pf";
}
.arc-pad-n2 {
    max-width: 22rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "pl pr";
}
.arc-btn {
    margin: 0;
    padding: 0;
    min-height: 3.1rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: .55rem;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.arc-btn:active { background: rgba(255, 255, 255, .16); }
.arc-btn-up { grid-area: pu; }
.arc-btn-down { grid-area: pd; }
.arc-btn-left { grid-area: pl; }
.arc-btn-right { grid-area: pr; }
.arc-btn-fire { grid-area: pf; background: rgba(249, 160, 63, .22); border-color: rgba(249, 160, 63, .45); }

.arc-post { margin: 0 0 .8rem; }
.arc-send { margin: 0; }
.arc-noscript { margin: .2rem 0 0; color: var(--ink-dim); font-size: .82rem; }
.arc-stage.is-live .arc-noscript { display: none; }

.arc-keys { margin: 0 0 .9rem; font-size: .85rem; color: var(--ink-dim); }
.arc-keys dt { font-weight: 600; color: var(--ink); }
.arc-keys dd { margin: 0 0 .35rem; }
.arc-fair { margin: 0 0 1rem; color: var(--ink-dim); font-size: .82rem; }
.arc-wait { color: var(--ink-dim); }
.arc-give { margin: 1rem 0 0; }

/* ------------------------------------------------------- the two runs */

.arc-done { margin: 0 0 1rem; }
.arc-done h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.arc-score { margin: 0; font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.arc-detail { margin: 0 0 .6rem; color: var(--ink-dim); }

.arc-verdict { margin: 0 0 .5rem; font-size: 1.25rem; letter-spacing: -.01em; }

.arc-runs {
    display: grid;
    gap: .7rem;
    grid-template-columns: 1fr;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.arc-run {
    padding: .7rem .8rem;
    border: 1px solid var(--panel-line);
    border-left-width: 4px;
    border-radius: .6rem;
    background: var(--panel);
}
.arc-run-you { border-color: rgba(255, 255, 255, .28); }
.arc-run-who { margin: 0 0 .1rem; font-weight: 600; }
.arc-run-score { margin: 0; font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.arc-run-life { margin: 0 0 .4rem; color: var(--ink-dim); font-size: .85rem; }
.arc-run-gap { margin: .4rem 0 0; color: var(--ink-dim); font-size: .82rem; }
.arc-run-none { margin: 0; color: var(--ink-dim); }
.arc-runs-tight .arc-run-score { font-size: 1.3rem; }

.arc-stats { display: grid; grid-template-columns: auto auto; gap: .1rem .6rem; margin: 0; font-size: .85rem; }
.arc-stats dt { color: var(--ink-dim); }
.arc-stats dd { margin: 0; font-variant-numeric: tabular-nums; }

.arc-seat-1 { border-left-color: #f9a03f; }
.arc-seat-2 { border-left-color: #7dd3fc; }

@media (min-width: 40rem) {
    .arc-runs { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------- the map */

.arc-mapwrap { margin: 0 0 1rem; }
.arc-map {
    display: grid;
    gap: 1px;
    max-width: 26rem;
    aspect-ratio: 1 / 1;
    padding: 3px;
    border: 1px solid var(--panel-line);
    border-radius: .5rem;
    background: #150c19;
}
.arc-w15 { grid-template-columns: repeat(15, 1fr); }
.arc-w21 { grid-template-columns: repeat(21, 1fr); aspect-ratio: 21 / 15; }
.arc-c { position: relative; border-radius: 1px; }
.arc-c0 { background: rgba(255, 255, 255, .05); }
.arc-c1 { background: #3b3348; }
.arc-c2 { background: #6b4a2f; }
.arc-c3 { background: rgba(234, 179, 8, .22); }
.arc-mark {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid #f9a03f;
}
.arc-mark.arc-seat-2 { border-color: #7dd3fc; }
.arc-mapnote { margin: .4rem 0 0; font-size: .8rem; color: var(--ink-dim); }
.arc-key { margin-right: .8rem; padding-left: .9rem; border-left: 4px solid #f9a03f; }
.arc-key.arc-seat-2 { border-left-color: #7dd3fc; }

/* Decoration only. The game itself still runs; it just stops flashing. */
@media (prefers-reduced-motion: reduce) {
    .arc-btn:active { background: var(--panel); }
    .arc-screen { transition: none; }
}

/* A shared-device match scores as a pair, so the headline replaces the number. */
.arc-run-said { font-size: 1.05rem; font-weight: 600; }

/* ===== boards.css ===== */
/* ------------------------------------------------------- Grid game boards
 *
 * Gomoku, Dots and Boxes, Mancala and Reversi. The shared board rules live in
 * app.css; this file holds only what those four need on top, and nothing here
 * is used by any other page.
 *
 * Every rule is a class, because the security policy blocks inline style
 * attributes and a nonce cannot cover them. Sizes are set so that the whole
 * board fits the width of a phone with tap targets that survive a thumb.
 */

/* Scores above a board, shared by three of the four games. */
.scoreline { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem; }
.scorechip {
    display: inline-flex; align-items: baseline; gap: .4rem;
    padding: .3rem .65rem; border-radius: 999px; font-size: .85rem;
    border: 1px solid var(--panel-line, var(--line)); background: var(--panel, transparent);
}
.scorechip b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.scorechip.p1 { border-color: #3b82f6; }
.scorechip.p2 { border-color: #f59e0b; }

/* The square that was just played, on any of the grids. */
.cell.last { outline: 2px solid #f472b6; outline-offset: -2px; }

/* ---------------------------------------------------------------- Gomoku */

/* 225 squares do not shrink politely below about 20rem, so the board keeps its
   minimum and the page scrolls sideways on the narrowest phones. */
.board-scroll { overflow-x: auto; margin: 0 0 1.25rem; padding-bottom: .3rem; }
.board.gomoku {
    --cols: 15;
    gap: 2px; margin: 0;
    min-width: 19rem; max-width: min(100%, 32rem);
}
.board.gomoku .cell { border-radius: .18rem; }
.board.gomoku .cell span { width: 76%; }

/* ------------------------------------------------------- Dots and Boxes */

/* Dot tracks are fixed and narrow; the box tracks take everything left over, so
   the lines between them stay the widest thing a thumb has to hit. */
.dab { display: grid; gap: 0; margin: 0 0 1.25rem; max-width: min(100%, 26rem); }
.dab.n3 {
    grid-template-columns: repeat(3, 1.1rem minmax(1.8rem, 1fr)) 1.1rem;
    grid-template-rows: repeat(3, 1.1rem minmax(1.8rem, 1fr)) 1.1rem;
}
.dab.n4 {
    grid-template-columns: repeat(4, 1.1rem minmax(1.8rem, 1fr)) 1.1rem;
    grid-template-rows: repeat(4, 1.1rem minmax(1.8rem, 1fr)) 1.1rem;
}
.dab.n5 {
    grid-template-columns: repeat(5, 1.1rem minmax(1.8rem, 1fr)) 1.1rem;
    grid-template-rows: repeat(5, 1.1rem minmax(1.8rem, 1fr)) 1.1rem;
}
.dab .dot { place-self: center; width: .4rem; height: .4rem; border-radius: 50%;
            background: currentColor; opacity: .45; }
.edgeform { margin: 0; display: contents; }
.dab .edge {
    width: 100%; height: 100%; margin: 0; padding: 0;
    display: grid; place-items: center;
    background: transparent; border: 0; border-radius: .2rem; cursor: default;
}
.dab button.edge { cursor: pointer; }
.dab .edge span { display: block; border-radius: 999px; background: currentColor; opacity: .16; }
.dab .edge.h span { width: 82%; height: 3px; }
.dab .edge.v span { width: 3px; height: 82%; }
.dab button.edge:not(:disabled):hover span { opacity: .55; }
.dab .edge.p1 span { background: #3b82f6; opacity: 1; }
.dab .edge.p2 span { background: #f59e0b; opacity: 1; }
.dab .edge.last span { box-shadow: 0 0 0 2px rgba(244, 114, 182, .55); }
.dab .box {
    display: grid; place-items: center; margin: 2px; border-radius: .25rem;
    font-size: .8rem; font-weight: 700;
}
.dab .box.p1 { background: color-mix(in srgb, #3b82f6 26%, transparent); color: #3b82f6; }
.dab .box.p2 { background: color-mix(in srgb, #f59e0b 26%, transparent); color: #f59e0b; }

/* --------------------------------------------------------------- Mancala */

.mancala {
    display: grid; gap: .35rem; margin: 0 0 1.25rem;
    max-width: min(100%, 30rem);
    grid-template-columns: 2.4rem repeat(6, 1fr) 2.4rem;
    grid-template-rows: auto auto;
}
.mancala .store {
    grid-row: 1 / 3; display: grid; place-items: center; align-content: center;
    min-height: 5.5rem; border-radius: 1.2rem;
    border: 1px solid var(--panel-line, var(--line));
    background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.mancala .store.left { grid-column: 1; }
.mancala .store.right { grid-column: 8; }
.mancala .store b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.mancala .store em { font-style: normal; font-size: .65rem; opacity: .6; }
.pitform { margin: 0; display: contents; }
.mancala .pit {
    aspect-ratio: 1; width: 100%; margin: 0; padding: 0;
    display: grid; place-items: center;
    font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
    color: inherit; background: color-mix(in srgb, var(--fg) 6%, transparent);
    border: 1px solid var(--panel-line, var(--line)); border-radius: 50%; cursor: default;
}
.mancala button.pit { cursor: pointer; }
.mancala button.pit:hover { border-color: #f59e0b; }
.mancala .pit.bare { opacity: .45; }
.mancala .pit.p1 { border-color: color-mix(in srgb, #3b82f6 60%, transparent); }
.mancala .pit.p2 { border-color: color-mix(in srgb, #f59e0b 60%, transparent); }
.mancala .r1 { grid-row: 1; }
.mancala .r2 { grid-row: 2; }
.mancala .c2 { grid-column: 2; }
.mancala .c3 { grid-column: 3; }
.mancala .c4 { grid-column: 4; }
.mancala .c5 { grid-column: 5; }
.mancala .c6 { grid-column: 6; }
.mancala .c7 { grid-column: 7; }

/* --------------------------------------------------------------- Reversi */

.board.reversi { --cols: 8; gap: 2px; max-width: min(100%, 26rem); }
.board.reversi .cell {
    background: color-mix(in srgb, #16a34a 32%, transparent);
    border-color: rgba(0, 0, 0, .28); border-radius: .25rem;
}
/* Discs are black and white here, not the site's two player colours — the board
   is the one place where the pieces have names of their own. */
.board.reversi .cell.p1 span { background: #12161c; }
.board.reversi .cell.p2 span { background: #f5f7fa; }
.board.reversi .cell.hint span {
    width: 30%; background: rgba(255, 255, 255, .55);
}
.board.reversi button.cell:not(:disabled):hover { border-color: #f472b6; }

@media (prefers-reduced-motion: reduce) {
    .dab button.edge, .mancala button.pit { transition: none; }
}

/* ===== chess.css ===== */
/* ------------------------------------------------------------------ Chess and draughts
 *
 * Both games are played with two taps: a link picks a piece up, a form button puts it
 * down. That means the board is a grid of three different elements — an anchor, a
 * button and a plain div — that all have to look identical, so everything here is
 * written against .sq rather than against the tag.
 *
 * The colours never rely on a glyph's own fill. Chess pieces are drawn with the solid
 * Unicode set in both colours and separated by fill plus an outline in the opposite
 * shade, which survives a dark background, a light one, and a phone screen at an angle.
 */

.chessboard,
.draughts {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: min(100%, 30rem);
    aspect-ratio: 1;
    margin: 0 0 1rem;
    border-radius: .6rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    touch-action: manipulation;
}

/* A form is only there to carry the token; it must not become a grid cell. */
.sqform { display: contents; margin: 0; }

.sq {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .05);
    color: inherit;
    text-decoration: none;
    cursor: default;
    font: inherit;
}
.sq.light { background: rgba(255, 255, 255, .17); }
.sq.dark  { background: rgba(255, 255, 255, .05); }

a.sq, button.sq { cursor: pointer; }
button.sq:hover, a.sq:hover { filter: none; }

/* The square a piece came from and the one it landed on. */
.sq.was::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(245, 197, 66, .22);
    pointer-events: none;
}
.sq.picked { outline: 2px solid #ec4899; outline-offset: -2px; z-index: 1; }
.sq.checked::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(214, 69, 69, .75), transparent 70%);
    pointer-events: none;
}

/* Where the selected piece may go: a dot on an empty square, a ring on an occupied one. */
.sq .mark {
    position: absolute;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    pointer-events: none;
}
.sq.takes .mark {
    width: 88%;
    background: none;
    border: 3px solid rgba(255, 255, 255, .6);
}
button.sq.target:hover .mark { background: #ec4899; border-color: #ec4899; }
button.sq.takes:hover .mark { background: none; }

.sq .coord {
    position: absolute;
    font-size: .55rem;
    font-style: normal;
    line-height: 1;
    color: rgba(255, 255, 255, .5);
    pointer-events: none;
}
.sq .coord.file { right: .15rem; bottom: .1rem; }
.sq .coord.rank { left: .15rem; top: .1rem; }

/* ---------------------------------------------------------------- chess pieces */

.piece {
    font-size: clamp(1.35rem, 6.6vw, 2.15rem);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.piece.light-piece {
    color: #f8f3ec;
    -webkit-text-stroke: 1px #241a2b;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
}
.piece.dark-piece {
    color: #1a1420;
    -webkit-text-stroke: 1px #e9dfe8;
    text-shadow: 0 0 2px rgba(0, 0, 0, .45);
}

/* ---------------------------------------------------------------- draughts pieces */

.man {
    display: grid;
    place-items: center;
    width: 74%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.man.red   { background: radial-gradient(circle at 35% 30%, #f36b6b, #b91c1c 70%); border: 1px solid rgba(0, 0, 0, .45); }
.man.white { background: radial-gradient(circle at 35% 30%, #ffffff, #d9d2c6 70%); border: 1px solid rgba(0, 0, 0, .4); }
.man.king::after {
    content: "★";
    font-size: .7rem;
    line-height: 1;
}
.man.red.king::after   { color: #ffe2e2; }
.man.white.king::after { color: #6b4f1d; }

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

.game.chess .turn,
.game.draughtsgame .turn { margin: 0 0 .5rem; }

.sides { margin: 0 0 .75rem; }
.sides span {
    display: inline-block;
    padding: .05rem .4rem;
    margin-right: .25rem;
    border-radius: .3rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.side-white { background: #f8f3ec; color: #241a2b; }
.side-black { background: #1a1420; color: #e9dfe8; border: 1px solid rgba(255, 255, 255, .35); }
.side-red   { background: #b91c1c; color: #ffe6e6; }
.side-cream { background: #efe8dc; color: #2b2320; }

.promotion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0 0 1rem;
    font-size: .85rem;
}
.promotion .choice {
    padding: .3rem .6rem;
    border-radius: .4rem;
    border: 1px solid rgba(255, 255, 255, .18);
    text-decoration: none;
    color: inherit;
}
.promotion .choice.on { background: #ec4899; border-color: #ec4899; color: #fff; }

.movelog { margin: 0 0 1rem; }
.movelog h3 {
    margin: 0 0 .4rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .7;
}
.plies {
    list-style: none;
    margin: 0;
    padding: .5rem .6rem;
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .5rem;
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
}
.plies li {
    display: grid;
    grid-template-columns: 2.2rem 1fr 1fr;
    gap: .3rem;
}
.plies.wide li { grid-template-columns: 2.2rem 1fr; }
.plies b { font-weight: 500; opacity: .6; }

/*
 * Resigning takes two taps rather than a confirm() dialog. The security policy blocks
 * inline script, so a dialog hung off the form would silently never appear and a
 * mis-tap would throw away a game somebody had been playing for a week.
 */
.game.chess .resign,
.game.draughtsgame .resign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: .85rem;
}
.game.chess .resign button,
.game.draughtsgame .resign button {
    margin: 0;
    padding: .35rem .8rem;
    font-size: .82rem;
    font-weight: 500;
    background: transparent;
    color: #d98a8a;
    border: 1px solid rgba(217, 138, 138, .5);
    border-radius: .45rem;
}
.game.chess .resign a.linky,
.game.draughtsgame .resign a.linky {
    color: inherit;
    opacity: .75;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.game.chess .resign a.danger,
.game.draughtsgame .resign a.danger { color: #d98a8a; }

@media (min-width: 48rem) {
    .chessboard,
    .draughts { width: min(100%, 26rem); }
}

/* ===== dice.css ===== */
/* ------------------------------------------------------------------------
 * The games where chance is part of the design: Higher or Lower, Snakes and
 * Ladders, Race Home, Dominoes and Backgammon.
 *
 * Everything here is phone first. The boards are grids that stay legible at
 * 360 pixels wide and grow from there, and nothing depends on hovering, so a
 * touch screen loses nothing. Colours are borrowed from the room shell where
 * it has them and fall back to the plain page tokens where it does not.
 * ---------------------------------------------------------------------- */

.game {
    --piece-1: #3b82f6;
    --piece-2: #f59e0b;
    --piece-3: #34d399;
    --piece-4: #ec4899;
    --tile: var(--panel, rgba(0, 0, 0, .05));
    --tile-line: var(--panel-line, var(--line, #d8dce2));
    --tile-ink: var(--ink, var(--fg, #14161a));
    --tile-dim: var(--ink-dim, var(--muted, #5c6470));
}

/* ---------------------------------------------------------------- shared bits */


.game .who { margin: 0; padding: 0; }
.game .rolled { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; font-size: .9rem; }

.die {
    display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem;
    border-radius: .5rem; font-weight: 800; font-variant-numeric: tabular-nums;
    background: var(--tile-ink); color: var(--bg, #fff);
}
.die.small { min-width: 1.4rem; height: 1.4rem; font-size: .78rem; border-radius: .4rem; }

.rollbtn { margin-top: 1rem; width: 100%; max-width: 18rem; }

.movelist { display: grid; gap: .4rem; margin-top: .75rem; }
@media (min-width: 34rem) { .movelist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.movelist form { margin: 0; }
.movebtn {
    display: flex; align-items: center; gap: .5rem; width: 100%; margin: 0;
    padding: .6rem .75rem; font-size: .9rem; font-weight: 600; text-align: left;
    border-radius: .6rem; background: var(--tile); color: var(--tile-ink);
    border: 1px solid var(--tile-line);
}
.movebtn:hover { border-color: color-mix(in srgb, var(--piece-1) 60%, transparent); filter: none; }

.linky {
    margin: 1.25rem 0 0; padding: .35rem 0; font-size: .85rem;
    background: none; border: 0; text-decoration: underline; cursor: pointer;
}

.lobbyseats { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.lobbyseats li {
    padding: .5rem .7rem; border-radius: .6rem; font-size: .9rem;
    background: var(--tile); border: 1px solid var(--tile-line);
}

/* A player's colour, as a dot or as a numbered counter.

   Scoped to the board: .pip is also the small dot on a game card in the catalogue,
   and an unscoped size here made every one of those dots twice the size it should
   be, on a page these games have nothing to do with. */
.game .piece, .game .pip {
    display: inline-grid; place-items: center;
    width: .95rem; height: .95rem; border-radius: 50%;
    font-size: .58rem; font-weight: 800; color: #10141c; line-height: 1;
}
.game .piece.s1, .game .pip.p1 { background: var(--piece-1); }
.game .piece.s2, .game .pip.p2 { background: var(--piece-2); }
.game .piece.s3, .game .pip.p3 { background: var(--piece-3); }
.game .piece.s4, .game .pip.p4 { background: var(--piece-4); }

.racers { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.racers li {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    padding: .55rem .7rem; border-radius: .7rem; font-size: .88rem;
    background: var(--tile); border: 1px solid var(--tile-line);
}
.racers li.me { border-color: color-mix(in srgb, var(--piece-1) 60%, transparent); }
.racers .pts { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--tile-dim); }

/* ---------------------------------------------------------------- Higher or Lower */

.cardstage { display: grid; justify-items: center; gap: .5rem; margin: 1.25rem 0; }
.playcard {
    display: grid; place-content: center; justify-items: center; gap: .1rem;
    width: 6rem; height: 8.5rem; border-radius: .9rem;
    background: #f7f7fa; color: #14161a;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.playcard.red { color: #c0263a; }
.cardrank { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.cardsuit { font-size: 1.5rem; line-height: 1; }

.callrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0; }
.callrow form { margin: 0; }
.callbtn { width: 100%; margin: 0; padding: .9rem; font-size: 1rem; }

.lastround { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--tile-line); }
.lastcards { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; }
.minicard {
    display: inline-grid; place-items: center; min-width: 2.2rem; padding: .3rem .45rem;
    border-radius: .4rem; font-weight: 700; font-size: .9rem;
    background: #f7f7fa; color: #14161a;
}
.minicard.red { color: #c0263a; }
.lastcards .arrow { color: var(--tile-dim); }

/* ---------------------------------------------------------------- Snakes and Ladders */

.ladderboard {
    display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 2px; margin: 1rem 0; border-radius: .6rem; overflow: hidden;
}
.lsq {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    aspect-ratio: 1; padding: 1px; gap: 1px; min-width: 0;
    background: var(--tile); font-size: .55rem; line-height: 1;
}
.lsq-no { color: var(--tile-dim); font-variant-numeric: tabular-nums; }
.lsq-jump { font-size: .5rem; font-weight: 700; }
.lsq-up { background: color-mix(in srgb, var(--piece-3) 22%, var(--tile)); }
.lsq-up .lsq-jump { color: var(--piece-3); }
.lsq-down { background: color-mix(in srgb, #ef4444 20%, var(--tile)); }
.lsq-down .lsq-jump { color: #ef4444; }
.lsq-home { background: color-mix(in srgb, var(--piece-2) 30%, var(--tile)); }
.lsq-pieces { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; }
.lsq-pieces .piece { width: .5rem; height: .5rem; }

@media (min-width: 30rem) {
    .lsq { font-size: .68rem; }
    .lsq-jump { font-size: .6rem; }
    .lsq-pieces .piece { width: .62rem; height: .62rem; }
}

/* ---------------------------------------------------------------- Race Home */

.racetrack {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr));
    gap: 2px; margin: 1rem 0;
}
.rsq {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    aspect-ratio: 1; min-width: 0; gap: 1px; border-radius: .25rem;
    background: var(--tile); font-size: .55rem; line-height: 1;
}
.rsq-no { color: var(--tile-dim); font-variant-numeric: tabular-nums; }
.rsq-safe { background: color-mix(in srgb, var(--piece-3) 22%, var(--tile)); }
.rsq-pieces { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; }
.rsq-pieces .piece { width: .72rem; height: .72rem; font-size: .48rem; }

.homerun { display: flex; gap: 2px; }
.hsq {
    display: grid; place-items: center; width: 1rem; height: 1rem;
    border-radius: .2rem; font-size: .55rem; font-weight: 700; color: #10141c;
    background: var(--tile-line);
}
.hsq.s1 { background: var(--piece-1); }
.hsq.s2 { background: var(--piece-2); }
.hsq.s3 { background: var(--piece-3); }
.hsq.s4 { background: var(--piece-4); }
.hsq-end { border-radius: 50%; }

/* ---------------------------------------------------------------- Dominoes */

.dominoline {
    display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
    margin: 1rem 0; padding: .7rem; min-height: 3.5rem;
    border-radius: .8rem; background: var(--tile); border: 1px solid var(--tile-line);
}
.bone {
    display: inline-flex; overflow: hidden; border-radius: .3rem;
    background: #f4f4f7; color: #14161a; border: 1px solid rgba(0, 0, 0, .2);
    font-variant-numeric: tabular-nums;
}
.bonehalf {
    display: grid; place-items: center; width: 1.35rem; height: 1.35rem;
    font-size: .8rem; font-weight: 700;
}
.bonehalf + .bonehalf { border-left: 1px solid rgba(0, 0, 0, .35); }
.bone-double { outline: 2px solid var(--piece-2); outline-offset: -2px; }

.handrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.handtile {
    display: grid; justify-items: center; gap: .25rem;
    padding: .4rem; border-radius: .6rem;
    background: var(--tile); border: 1px solid var(--tile-line);
}
.handtile .bonehalf { width: 1.7rem; height: 1.7rem; font-size: 1rem; }
.handplays { display: flex; gap: .25rem; }
.handplays form { margin: 0; }
.playbtn {
    margin: 0; padding: .2rem .4rem; font-size: .68rem; font-weight: 700;
    border-radius: .35rem; background: var(--tile-ink); color: var(--bg, #fff);
}

/* ---------------------------------------------------------------- Backgammon */

.bgboard {
    display: grid; gap: 3px; margin: 1rem 0; padding: 3px;
    border-radius: .6rem; background: var(--tile-line);
}
.bgrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; }
.bgpoint {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    min-width: 0; min-height: 3.1rem; padding: .15rem 0;
    background: var(--tile); font-size: .55rem; line-height: 1;
}
.bgdark { background: color-mix(in srgb, var(--tile-ink) 8%, var(--tile)); }
.bgno { color: var(--tile-dim); font-variant-numeric: tabular-nums; }
.bgmen {
    display: grid; place-items: center; width: 1.35rem; height: 1.35rem;
    border-radius: 50%; font-size: .7rem; font-weight: 800; color: #10141c;
}
.bgmen.p1 { background: var(--piece-1); }
.bgmen.p2 { background: var(--piece-2); }

.bgtally { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.bgtally li {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .7rem; border-radius: .7rem; font-size: .88rem;
    background: var(--tile); border: 1px solid var(--tile-line);
}
.bgtally li.me { border-color: color-mix(in srgb, var(--piece-1) 60%, transparent); }
.bgtally .pts { margin-left: auto; color: var(--tile-dim); font-variant-numeric: tabular-nums; }

@media (min-width: 30rem) {
    .bgpoint { font-size: .66rem; min-height: 4rem; }
    .bgmen { width: 1.6rem; height: 1.6rem; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .movebtn, .playbtn, .callbtn, .rollbtn { transition: none; }
}

/* ===== hidden.css ===== */
/*
 * The six games where different players hold different information.
 *
 * Nothing here is decoration for its own sake: every rule exists because a
 * template needs a class rather than an inline style attribute, which the
 * Content-Security-Policy blocks.
 */

/* Labels that exist for screen readers and for nobody else. */
.sr-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ---------------------------------------------------------------- odd one out */

.secretcard {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    border-radius: .9rem;
    border: 1px solid rgba(168, 85, 247, .45);
    background: rgba(168, 85, 247, .12);
}
.secretcard.odd {
    border-color: rgba(244, 114, 182, .5);
    background: rgba(244, 114, 182, .12);
}
.secret-lead { margin: 0 0 .25rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.secretcard p:last-child { margin-bottom: 0; }

.locationlist {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.locationlist li {
    padding: .35rem .6rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .05);
    font-size: .86rem;
}

.cluelist { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.cluelist li {
    display: grid;
    gap: .15rem;
    padding: .55rem .75rem;
    border-radius: .7rem;
    background: rgba(255, 255, 255, .05);
}
.cluelist .who { font-weight: 650; font-size: .8rem; color: var(--ink-dim, #9aa1ad); }
.cluelist .said { font-size: .95rem; }
.cluelist .voted { font-size: .78rem; color: var(--ink-dim, #9aa1ad); }

.clueform input[type="text"], .galleryform, .voteform { max-width: 34rem; }

/* ---------------------------------------------------------------- spectrum */

.scale { display: block; width: 100%; height: auto; margin: 0 0 1rem; }
.scale-bar { fill: rgba(255, 255, 255, .12); }
.scale-mark { fill: #14b8a6; }
.scale-dot { fill: rgba(56, 189, 248, .85); }
.scale-num { fill: #14b8a6; font-size: 26px; font-weight: 700; }
.scale-name { fill: #9aa1ad; font-size: 24px; }
.scale-end { fill: #e6e6f0; font-size: 30px; font-weight: 600; }

.dial { width: 100%; margin: .5rem 0 .25rem; accent-color: #14b8a6; }
.dialends { display: flex; justify-content: space-between; margin: 0 0 1rem; font-size: .82rem; color: var(--ink-dim, #9aa1ad); }

/* ---------------------------------------------------------------- code words */

.cw-tally { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .8rem; font-size: .88rem; }
.cw-pip { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; }
.cw-pip.t1 { background: #0ea5e9; }
.cw-pip.t2 { background: #f97316; }

.cw-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .35rem;
    margin: 0 0 1rem;
}
.cw-board .cellform { margin: 0; display: contents; }
.cw-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 3.2rem;
    padding: .3rem .25rem;
    border-radius: .55rem;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: inherit;
    font: inherit;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .02em;
    word-break: break-word;
}
button.cw-cell { cursor: pointer; width: 100%; margin: 0; }
button.cw-cell:hover { border-color: rgba(255, 255, 255, .4); }
.cw-cell.hint.k1 { box-shadow: inset 0 0 0 2px #0ea5e9; }
.cw-cell.hint.k2 { box-shadow: inset 0 0 0 2px #f97316; }
.cw-cell.hint.k3 { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }
.cw-cell.hint.k4 { box-shadow: inset 0 0 0 2px #ef4444; }
.cw-cell.up { color: #0b0b10; }
.cw-cell.up.c1 { background: #0ea5e9; border-color: #0ea5e9; }
.cw-cell.up.c2 { background: #f97316; border-color: #f97316; }
.cw-cell.up.c3 { background: #cbd5e1; border-color: #cbd5e1; }
.cw-cell.up.c4 { background: #ef4444; border-color: #ef4444; color: #fff; }
.cw-cell.missed { opacity: .35; }

.cw-log { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .86rem; color: var(--ink-dim, #9aa1ad); }
.cw-log strong { color: var(--ink, #e6e6f0); }

@media (max-width: 30rem) {
    .cw-cell { min-height: 2.7rem; font-size: .62rem; }
}

/* ---------------------------------------------------------------- fleet */

.fleet-pair { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) {
    .fleet-pair { grid-template-columns: 1fr 1fr; }
}

.fleet-grid {
    display: grid;
    grid-template-columns: 1.1rem repeat(10, 1fr);
    gap: 2px;
    max-width: 24rem;
}
.fleet-grid .cellform { margin: 0; display: contents; }
.fleet-head {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    color: var(--ink-dim, #9aa1ad);
}
.fleet-cell {
    aspect-ratio: 1;
    width: 100%;
    padding: 0;
    border-radius: .2rem;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(56, 189, 248, .09);
}
button.fleet-cell { cursor: pointer; margin: 0; }
button.fleet-cell:hover { background: rgba(56, 189, 248, .3); }
.fleet-cell span { display: block; width: 100%; height: 100%; border-radius: .15rem; }
.fleet-cell.ship { background: rgba(148, 163, 184, .55); }
.fleet-cell.miss span { background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 22%, transparent 24%); }
.fleet-cell.hit { background: #ef4444; }
.fleet-cell.ship.hit { background: #b91c1c; }

.shiplist { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.shiplist li {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    padding: .5rem .7rem;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .05);
}
.shiplist select { margin: 0; padding: .3rem .4rem; font-size: .85rem; }
.shipname { font-weight: 650; min-width: 7rem; }
.shiplen { font-size: .78rem; color: var(--ink-dim, #9aa1ad); min-width: 5rem; }
.placeform { margin: 0 0 .75rem; }

/* ---------------------------------------------------------------- drawing */

.sketchpad { margin: 0 0 1rem; }
.sketch-canvas {
    display: block;
    width: 100%;
    max-width: 26rem;
    aspect-ratio: 1;
    border-radius: .8rem;
    border: 1px solid rgba(255, 255, 255, .18);
    background: #16161d;
    cursor: crosshair;

    /* Without this a finger drags the page instead of drawing on it. */
    touch-action: none;
}
.sketch-tools { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: .6rem 0; }
.sketch-pens, .sketch-nibs { display: flex; gap: .3rem; border: 0; margin: 0; padding: 0; }
.swatch, .nib {
    position: relative;
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
}
.swatch input, .nib input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.swatch:has(input:checked), .nib:has(input:checked) { border-color: #fff; }
.sw-0 { background: #e6e6f0; }
.sw-1 { background: #f87171; }
.sw-2 { background: #fb923c; }
.sw-3 { background: #facc15; }
.sw-4 { background: #4ade80; }
.sw-5 { background: #38bdf8; }
.sw-6 { background: #a78bfa; }
.sw-7 { background: #f472b6; }
.nib { background: rgba(255, 255, 255, .1); display: grid; place-items: center; }
.nib::after { content: ""; border-radius: 50%; background: #e6e6f0; }
.nib-0::after { width: .3rem; height: .3rem; }
.nib-1::after { width: .55rem; height: .55rem; }
.nib-2::after { width: .85rem; height: .85rem; }
.sketch-buttons { display: flex; gap: .4rem; }
.sketch-buttons button { margin: 0; padding: .4rem .8rem; font-size: .82rem; }
.sketch-hint { margin: 0; }
.sketchpad:not(.is-empty) .sketch-hint { visibility: hidden; }

.sketch-frame {
    max-width: 22rem;
    margin: 0 0 .6rem;
    border-radius: .8rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
}
.sketch-view { display: block; width: 100%; height: auto; }
.sketch-paper { fill: #16161d; }

.gallery {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    margin: 0 0 1rem;
}
.galleryitem { display: grid; gap: .25rem; align-content: start; }
.galleryitem .sketch-frame { max-width: none; margin: 0; }
.galleryitem .opt { margin: 0; }

.chain { margin: 0 0 2rem; }
.chainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.chainlist .prompt { margin: 0; }
.chainlist p.muted { margin: 0; }

/* ===== pairs.css ===== */
/* ------------------------------------------------- Just the two of you

   Match Up, Close Enough, In Order and Both of Us. Everything here is
   prefixed pair- and scoped under .pairs, because this file is joined into
   the games.css that loads on every page of the site.                    */

.pairs .pair-card {
    margin: .5rem 0 1.25rem; padding: 1.1rem 1.2rem;
    border: 1px solid var(--line); border-radius: .85rem;
    background: color-mix(in srgb, var(--fg) 4%, transparent);
}

.pair-kicker {
    margin: 0 0 .35rem; color: var(--muted);
    font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
}
.pair-idea { margin: 0 0 1rem; font-size: 1.3rem; line-height: 1.35; font-weight: 600; }
.pair-locked { margin: 0 0 .35rem; font-size: 1rem; }
.pair-ask { margin: 1rem 0 .6rem; font-size: 1.05rem; font-weight: 600; }

/* ------------------------------------------------------------------ yes and no */

.pair-choices { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .75rem; }
.pair-choices form { margin: 0; }
.pair-choices button { margin: 0; min-width: 9rem; padding: .75rem 1.1rem; border-radius: .6rem; }
.pair-yes { background: #16a34a; }
.pair-no  { background: color-mix(in srgb, var(--fg) 40%, transparent); }

/* ------------------------------------------------------------------ the scale */

.pair-scale { display: grid; gap: .45rem; max-width: 30rem; margin: 0 0 .75rem; }
.pair-scale form { margin: 0; display: grid; }
.pair-step {
    display: flex; align-items: baseline; gap: .7rem;
    width: 100%; margin: 0; padding: .7rem .85rem;
    text-align: left; font-size: 1rem; font-weight: 500;
    color: var(--fg);
    background: color-mix(in srgb, var(--fg) 5%, transparent);
    border: 1px solid var(--line); border-radius: .55rem;
    cursor: pointer;
}
.pair-step:hover { border-color: var(--accent); }
.pair-stepnum {
    min-width: 1.4rem; font-variant-numeric: tabular-nums;
    font-weight: 700; color: var(--muted);
}
.pair-steplabel { line-height: 1.35; }

/* ------------------------------------------------------------------ ranking */

.pair-rank { margin: 0 0 .75rem; padding: 0; list-style: none; display: grid; gap: .4rem; max-width: 30rem; }
.pair-rank li {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .7rem;
    border: 1px solid var(--line); border-radius: .55rem;
    background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.pair-ranklabel { flex: 1 1 auto; margin: 0; font-size: .9375rem; line-height: 1.35; }
.pair-place { flex: 0 0 auto; width: 4.2rem; }

.pair-mylist { margin: 0 0 .5rem; padding-left: 1.4rem; display: grid; gap: .2rem; font-size: .9375rem; }

/* ------------------------------------------------------------------ writing */

.pair-writeform { display: grid; gap: .5rem; max-width: 32rem; margin: 0 0 .6rem; }
.pair-writeform label { font-size: .875rem; color: var(--muted); }

.pair-written { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.pair-written li {
    display: grid; grid-template-columns: minmax(4rem, 8rem) 1fr;
    gap: .6rem; align-items: baseline;
    padding: .45rem .6rem;
    border: 1px solid var(--line); border-radius: .5rem;
    font-size: .9375rem;
}
.pair-written li.pair-ismine { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.pair-answer { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ the reveal */

.pair-last {
    margin: 0 0 1.5rem; padding: .8rem .9rem;
    border: 1px solid var(--line); border-radius: .6rem;
    background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.pair-last.pair-hit { border-color: color-mix(in srgb, #34d399 60%, var(--line)); }
.pair-lastidea { margin: 0 0 .45rem; font-size: 1rem; font-weight: 600; }
.pair-lastword { margin: .5rem 0 0; color: var(--muted); font-size: .9375rem; }
.pair-hit .pair-lastword { color: #34d399; }
.pair-who { color: var(--muted); font-size: .875rem; }

.pair-marks { margin: 0; padding: 0; list-style: none; display: grid; gap: .2rem; }
.pair-marks li {
    display: grid; grid-template-columns: minmax(4rem, 8rem) 1fr;
    gap: .6rem; align-items: baseline; font-size: .9375rem;
}
.pair-mark { overflow-wrap: anywhere; }

.pair-columns { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pair-column p.pair-who { margin: 0 0 .3rem; }
.pair-column .pair-mylist { margin: 0; }

.pair-clashes {
    margin: .6rem 0 0; padding-left: 1.1rem;
    display: grid; gap: .25rem; color: var(--muted); font-size: .875rem;
}

/* ------------------------------------------------------------------ the list */

.pair-listhead { margin: 1.5rem 0 .5rem; font-size: 1rem; color: var(--muted); }
.pair-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; max-width: 34rem; }
.pair-list li {
    padding: .55rem .8rem;
    border: 1px solid color-mix(in srgb, #34d399 35%, var(--line)); border-radius: .5rem;
    background: color-mix(in srgb, #34d399 7%, transparent);
    font-size: .9375rem; line-height: 1.4;
}
.pair-final li { font-size: 1rem; }

.pair-rounds { margin: 0; padding-left: 1.3rem; display: grid; gap: .9rem; }
.pair-rounds li { padding-left: .2rem; }

@media (max-width: 30rem) {
    .pair-columns { grid-template-columns: minmax(0, 1fr); }
    .pair-written li, .pair-marks li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* ===== party.css ===== */
/*

/* ---------------------------------------------------------------- the card face */

.party .cardface {
    margin: .5rem 0 1.25rem; padding: 1.1rem 1.2rem;
    border: 1px solid var(--line); border-radius: .85rem;
    background: color-mix(in srgb, var(--fg) 4%, transparent);
    font-size: 1.15rem; line-height: 1.45; font-weight: 600;
}
.party .cardface.secret {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.whisper-label {
    margin: 0; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 75%, var(--fg));
}

/* ---------------------------------------------------------------- choices and seats */

.pickrow { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .5rem; }
.pickrow form { margin: 0; }
.pickrow .pick { margin: 0; min-width: 8rem; }
.pick-truth { background: #0ea5e9; }
.pick-dare  { background: #a855f7; }
.pick-done  { background: #16a34a; }
.pick-pass  { background: color-mix(in srgb, var(--fg) 45%, transparent); }

.kindline { margin: 0 0 .25rem; color: var(--muted); }
.kind { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.kind-truth { color: #0ea5e9; }
.kind-dare  { color: #a855f7; }

.seatpick { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }
.seatpick button { margin: 0; padding: .55rem 1rem; font-size: .9rem; border-radius: .6rem; }

/* ---------------------------------------------------------------- charades */

.hintline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; font-size: .85rem; }
.tier {
    padding: .18rem .55rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.tier-easy     { background: #16a34a; }
.tier-tricky   { background: #d97706; }
.tier-fiendish { background: #be123c; }

/* ---------------------------------------------------------------- dirty minds */

.clues { display: grid; gap: .5rem; margin: .5rem 0 1.25rem; padding-left: 1.4rem; }
.clues li { font-size: 1.05rem; font-weight: 600; }
.emptydeck p { margin: 0 0 .5rem; }
.emptydeck p:last-child { margin-bottom: 0; }
.deckshape {
    margin: .5rem 0 0; padding: .75rem; overflow-x: auto;
    border-radius: .5rem; background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.deckshape code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.5; }
body.shellpage .party .cardface { border-color: var(--panel-line); background: rgba(255, 255, 255, .05); color: var(--ink); }
body.shellpage .subhead { color: var(--ink-dim); }
body.shellpage .deckshape { background: rgba(255, 255, 255, .07); }

/* ===== quiz.css ===== */
/* ------------------------------------------------------------- Quiz and clock games


/* ------------------------------------------------------------------ a question */

.quizcard { margin: 0 0 1rem; }
.quizcat {
    margin: 0 0 .35rem; color: var(--muted);
    font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
}
.quizq { margin: 0 0 1rem; font-size: 1.35rem; line-height: 1.35; }
.quizclock { margin: 0 0 .75rem; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }

.quizopts { display: grid; gap: .5rem; max-width: 34rem; }
.quizopts form { margin: 0; display: grid; }

.quizopt {
    display: block; width: 100%; margin: 0;
    padding: .8rem .9rem; text-align: left; font-size: 1rem; line-height: 1.4;
    color: var(--fg);
    background: color-mix(in srgb, var(--fg) 5%, transparent);
    border: 1px solid var(--line); border-radius: .55rem;
}
button.quizopt { cursor: pointer; }
button.quizopt:hover { border-color: var(--accent); }
.quizopt.taken { cursor: default; color: var(--muted); }
.quizopt.mine { color: var(--fg); border-color: var(--accent); font-weight: 600; }

.waitline { margin: 1rem 0 0; }

/* ------------------------------------------------------------------ the reveal */

.lastcard {
    margin: 0 0 1.5rem; padding: .8rem .9rem;
    border: 1px solid var(--line); border-radius: .6rem;
    background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.lastq { margin: 0 0 .3rem; color: var(--muted); font-size: .9375rem; }
.lastanswer { margin: 0 0 .6rem; font-size: 1rem; }

.lastrows { margin: 0; padding: 0; list-style: none; display: grid; gap: .2rem; }
.lastrows li {
    display: grid; grid-template-columns: minmax(4rem, 8rem) 1fr auto;
    gap: .6rem; align-items: baseline; font-size: .9375rem;
}
.lastrows .who { margin: 0; color: var(--muted); }
.lastrows .said { overflow-wrap: anywhere; }
.lastrows .pts { font-variant-numeric: tabular-nums; }
.lastrows li.right .said, .lastrows li.right .pts { color: #34d399; }
.lastrows li.wrong .said { color: var(--muted); }

/* ------------------------------------------------------------------ word bomb */

.bombhead { text-align: center; margin: 0 0 1rem; }
.bomblabel { margin: 0; color: var(--muted); font-size: .8125rem; }
.fragment {
    margin: .2rem 0 .3rem;
    font-size: clamp(2.5rem, 14vw, 4rem); font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}
.bomblast { margin: 0 0 1rem; color: var(--muted); font-size: .9375rem; }
.bomblast strong { color: var(--fg); }
.bombreject { margin: 0 0 .6rem; font-size: .9375rem; color: #fb7185; }

.bombform { display: grid; gap: .5rem; max-width: 22rem; margin: 0 0 .5rem; }
.bombform input {
    font-size: 1.25rem; letter-spacing: .04em;
    padding: .6rem .7rem;
}

/* ------------------------------------------------------------------ buzz */

.buzzhead { text-align: center; margin: 0 0 1rem; }
.buzznum {
    margin: .2rem 0 .3rem;
    font-size: clamp(3rem, 18vw, 5rem); font-weight: 700;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.buzzbtns {
    display: grid; gap: .5rem; max-width: 26rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.buzzbtns form { margin: 0; display: grid; }
.buzzbtns .quizopt { text-align: center; }

/* ------------------------------------------------------------------ the table */

.seatrows { margin: 1.25rem 0 .5rem; padding: 0; list-style: none; display: grid; gap: .25rem; max-width: 26rem; }
.seatrow {
    display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
    padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .45rem;
    font-size: .9375rem;
}
.seatrow .who { margin: 0; }
.seatrow .state { color: var(--muted); font-size: .8125rem; }
.seatrow.onclock { border-color: var(--accent); }
.seatrow.knocked { opacity: .5; }
.seatrow.knocked .who { text-decoration: line-through; }

.playlist { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .2rem; color: var(--muted); font-size: .9375rem; }

/* ------------------------------------------------------------------ setup forms */

.pickset { border: 1px solid var(--line); border-radius: .55rem; padding: .7rem .9rem; margin: 1rem 0 .3rem; }
.pickset legend { padding: 0 .35rem; font-size: .875rem; color: var(--muted); }
.pickset .opt { margin: 0; }

@media (max-width: 30rem) {
    .lastrows li { grid-template-columns: 1fr auto; }
    .lastrows .who { grid-column: 1 / -1; }
}

/* ===== social.css ===== */
/* ------------------------------------------------------- Social games

.phaseline { margin: 0 0 1.5rem; color: var(--ink-dim, var(--muted)); }
.phaseline strong { color: var(--ink, var(--fg)); font-weight: 600; }

/* ---------------------------------------------------------------- input screens */

.soc-card {
    padding: 1rem 1.1rem; margin: 0 0 .75rem;
    border: 1px solid var(--panel-line, var(--line)); border-radius: .85rem;
    background: var(--panel, transparent);
}
.soc-card > :first-child { margin-top: 0; }
.soc-card > :last-child { margin-bottom: 0; }
.soc-card-name { font-weight: 650; margin: 0 0 .6rem; }

.soc-stack { display: grid; gap: .75rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.soc-stack.numbered { list-style: decimal; padding-left: 1.25rem; }

.deal {
    margin: 0 0 1.5rem; padding: 1.25rem 1.25rem 1.35rem;
    border-radius: 1rem;
    border: 1px solid var(--panel-line, var(--line));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 18%, transparent),
            transparent 70%),
        var(--panel, transparent);
}
.deal .eyebrow {
    display: block; margin: 0 0 .35rem;
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-dim, var(--muted));
}
.deal .question { margin: 0; }
.deal .hint { margin: .6rem 0 0; font-size: .875rem; color: var(--ink-dim, var(--muted)); }

.letter {
    display: grid; place-items: center;
    width: 4.5rem; height: 4.5rem; margin: 0 auto .35rem;
    border-radius: 1rem; border: 1px solid var(--panel-line, var(--line));
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    font-size: 2.6rem; font-weight: 800; line-height: 1;
    letter-spacing: 0; text-transform: uppercase;
}

.blankline { border-bottom: 2px dotted currentColor; padding: 0 .8rem; opacity: .65; }
.filled {
    padding: 0 .3rem; border-radius: .3rem;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    box-shadow: inset 0 -2px 0 var(--accent);
}
.warn code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
    padding: .05rem .3rem; border-radius: .25rem;
    background: color-mix(in srgb, var(--fg) 8%, transparent);
}

.hand { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .hand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hand .opt { margin: 0; border-color: var(--panel-line, var(--line)); }

.cats { display: grid; gap: .85rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.cat-row label { margin: 0 0 .25rem; font-size: .9rem; }

/* Answers a player has already given, echoed back while they wait. */
.mine { margin: 1.25rem 0 0; }
.mine h3 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
           color: var(--ink-dim, var(--muted)); margin: 0 0 .5rem; }

.waitlist { margin: .35rem 0 0; font-size: .875rem; color: var(--ink-dim, var(--muted)); }

/* ---------------------------------------------------------------- the reveal */

/* Scoped: the shell uses a bare .reveal for its scroll animation, and an
   unscoped margin here reset every block on every page. */
.game.reveal { margin: 0; }
.reveal-lede {
    margin: 0 0 1.25rem; font-size: 1.35rem; letter-spacing: -0.015em; line-height: 1.35;
}
.reveal-lede .accented { color: var(--accent); }

.reveal-set {
    margin: 0 0 .85rem; padding: 1rem 1.1rem;
    border: 1px solid var(--panel-line, var(--line)); border-radius: .9rem;
    background: var(--panel, transparent);
}
.reveal-head {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
    justify-content: space-between; margin: 0 0 .7rem;
}
.reveal-name { font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.reveal-gain {
    font-size: .78rem; font-variant-numeric: tabular-nums;
    padding: .15rem .5rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 24%, transparent);
}
.reveal-gain.zero { background: var(--panel, color-mix(in srgb, var(--fg) 6%, transparent));
                    color: var(--ink-dim, var(--muted)); }

.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.line {
    display: grid; grid-template-columns: 1.5rem 1fr; gap: .1rem .55rem;
    align-items: start;
    padding: .5rem .6rem; border-radius: .55rem;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.line .mark { font-weight: 700; text-align: center; opacity: .5; }
.line .text { margin: 0; }
.line .voters {
    grid-column: 2; margin: .25rem 0 0;
    font-size: .8rem; color: var(--ink-dim, var(--muted));
}
.line.is-lie {
    border-color: color-mix(in srgb, #f97316 60%, transparent);
    background: color-mix(in srgb, #f97316 14%, transparent);
}
.line.is-lie .mark { opacity: 1; color: #f97316; }
.line.is-truth { border-color: var(--panel-line, var(--line)); }
.line.is-right {
    border-color: color-mix(in srgb, #22c55e 60%, transparent);
    background: color-mix(in srgb, #22c55e 14%, transparent);
}
.line.is-right .mark { opacity: 1; color: #22c55e; }
.line.is-mine { box-shadow: inset 3px 0 0 var(--accent); }
.line.wins { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

.attrib { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.attrib li {
    font-size: .78rem; padding: .15rem .5rem; border-radius: 999px;
    border: 1px solid var(--panel-line, var(--line));
    color: var(--ink-dim, var(--muted));
}
.attrib li.hit { border-color: color-mix(in srgb, #22c55e 60%, transparent); color: inherit; }

.recap { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.recap li { font-size: .9rem; color: var(--ink-dim, var(--muted)); }

.revealbar { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.revealbar form { margin: 0; }
.revealbar button { margin: 0; }


.replay { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.replay > li {
    padding: .85rem 1rem; border-radius: .8rem;
    border: 1px solid var(--panel-line, var(--line));
}
.replay .roundtag {
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-dim, var(--muted)); margin: 0 0 .3rem;
}