/* Cascadia: evergreen and river blue. A pale fir-green page, the five habitats as flat colours with a light texture
   (mountain grey, forest green, prairie gold, wetland teal, river blue), the animals in their token colours (bear brown,
   elk tan, salmon pink, hawk sky blue, fox orange), the cone a brown fir cone, gold for anything lit. The theme block
   swaps the shared tokens while the game is on screen (html.theme-cascadia); the rest is this game's own pieces, scoped
   under .cs-* so nothing leaks into the other games' pages. */
html.theme-cascadia {
    color-scheme: light;
    --bg: #e3ece2;
    --panel: #f7faf4;
    --panel-2: #ebf2e8;
    --panel-3: #dbe7d7;
    --line: #a9bfa9;
    --text: #1d2a22;
    --muted: #5d7064;
    --accent: #2f6b4f;
    --accent-2: #24573f;
    --accent-dark: #1b4330;
    --accent-text: #ffffff;
    --parch: #f7faf4;
    --parch-2: #dbe7d7;
    --parch-ink: #1d2a22;
    --danger: #b8402c;
    --ok: #3f8a4a;
    --shadow: 0 10px 30px rgba(20, 50, 35, .18);
    --cs-mountain: #a7aeb6;
    --cs-mountain-ink: #5b646e;
    --cs-forest: #3f7d4a;
    --cs-forest-ink: #1d4527;
    --cs-prairie: #e7cb62;
    --cs-prairie-ink: #a2802a;
    --cs-wetland: #84c2ab;
    --cs-wetland-ink: #3a7563;
    --cs-river: #3f7fc0;
    --cs-river-ink: #9fc8ee;
    --cs-bear: #6e4529;
    --cs-elk: #bf8f4c;
    --cs-salmon: #e2667f;
    --cs-hawk: #59afe3;
    --cs-fox: #e8762b;
    --cs-cone: #8a5a2b;
    --cs-gold: #e8b93f;
    --cs-cloth: #22362c;
}
html.theme-cascadia body {
    background:
        radial-gradient(circle at 12% 0, rgba(255, 255, 255, .6) 0, transparent 42%),
        radial-gradient(circle at 88% 100%, rgba(63, 127, 192, .16) 0, transparent 46%),
        var(--bg);
    background-attachment: fixed;
}
html.theme-cascadia .topbar .round { color: var(--accent-2); }
html.theme-cascadia .pill.brewing { background: var(--cs-gold); color: #3a2a05; border-color: #b8892a; }
html.theme-cascadia .pill.done { color: #fff; }
html.theme-cascadia .sheet-backdrop { background: rgba(15, 40, 28, .5); }
html.theme-cascadia .sheet-backdrop.dim { background: rgba(10, 28, 20, .86); }
html.theme-cascadia .sheet-backdrop.see-through { background: transparent; }
html.theme-cascadia .error { color: var(--danger); }
html.theme-cascadia .fab-status, html.theme-cascadia .toast, html.theme-cascadia .show-strip { border-width: 2px; }

.cs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- the phone: one column exactly the height of the viewport, nothing scrolls (the map keeps the drag) */
.cs-page.game-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; padding: .6rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
.cs-page.game-page > .topbar, .cs-page.game-page > .cs-chips, .cs-page.game-page > .cs-tray, .cs-page.game-page > .cs-actions { flex: none; }
.cs-page.game-page.done { height: auto; min-height: 100dvh; overflow: visible; }
.cs-cards-btn { display: inline-flex; align-items: center; gap: .3rem; }

/* ---- the chips: one row of equal cells, a tap looks at that landscape */
.cs-chips { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .3rem; padding: 0 0 .4rem; }
.cs-chip {
    position: relative; display: flex; align-items: center; flex-wrap: wrap; column-gap: .35rem; row-gap: .05rem; min-width: 0;
    padding: .2rem .5rem .2rem .35rem; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); border-left: 6px solid var(--cauldron);
    font: inherit; font-size: .85rem; line-height: 1.1; color: var(--text); text-align: left; cursor: pointer;
}
.cs-chip:disabled { cursor: default; opacity: 1; }
.cs-chip .seat { color: var(--cauldron); width: 1em; height: 1em; flex: none; }
.cs-chip .name { font-weight: 800; display: inline-flex; align-items: center; gap: .2rem; min-width: 0; flex: 1 1 auto; }
.cs-chip .name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chip .score { font-size: 1.05rem; font-variant-numeric: tabular-nums; display: inline-block; flex: none; }
.cs-chip .cones { display: inline-flex; align-items: center; gap: .1rem; font-size: .78rem; font-weight: 700; color: var(--cs-cone); flex: none; }
.cs-chip .cones .cone { width: .9em; height: .9em; color: var(--cs-cone); }
.cs-chip .eye { flex-basis: 100%; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cauldron); font-weight: 800; }
.cs-chip.turn { border-color: var(--cauldron); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cauldron) 35%, transparent); }
.cs-chip.me { background: var(--panel-2); }
.cs-chip.looking { background: color-mix(in srgb, var(--cauldron) 14%, var(--panel)); }
.cs-chip.winner .score { color: var(--accent-2); }
.cs-plus { position: absolute; right: .4rem; top: -.1rem; font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--cauldron); paint-order: stroke; -webkit-text-stroke: 3px var(--panel); pointer-events: none; animation: cs-plus-rise 1.8s ease-out both; }
@keyframes cs-plus-rise { from { transform: translateY(8px); opacity: 0; } 20% { opacity: 1; transform: translateY(-4px); } 70% { opacity: 1; } to { transform: translateY(-22px); opacity: 0; } }

/* ---- the board: a window the SVG fills; games/viewport.js pans and zooms its viewBox. The cloth takes a little of the
   colour of whoever's landscape it shows (the wrapper carries that seat's --cauldron, so a tap on Mum's chip turns the
   table blue too), and the window's corners darken a little (the tile-look pass, 23 Oct 2026). */
.cs-board-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--line) 45%, var(--cauldron, var(--line))); background: color-mix(in srgb, var(--cs-cloth) 85%, var(--cauldron, var(--cs-cloth))); touch-action: none; height: min(56vh, 480px); -webkit-tap-highlight-color: transparent; user-select: none; }
.cs-board-wrap::after, .cs-land-board::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(2, 10, 6, .38) 100%); }
.cs-board-wrap.other { border-color: var(--cauldron); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cauldron) 55%, transparent); }
.cs-page.game-page .cs-board-wrap { flex: 1 1 0; min-height: 9rem; height: auto; }
.cs-page.game-page.done .cs-board-wrap { flex: none; height: min(36vh, 320px); touch-action: pan-y; }
.cs-page .cs-board, .cs-board-wrap svg.board { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; }
.cs-fit { position: absolute; top: .4rem; right: .4rem; z-index: 2; background: rgba(247, 250, 244, .92); width: 2.75rem; height: 2.75rem; padding: 0; display: grid; place-items: center; }
.cs-whose { position: absolute; top: .4rem; left: .4rem; z-index: 2; background: rgba(247, 250, 244, .94); border: 2px solid var(--cauldron); color: var(--text); font-weight: 700; max-width: calc(100% - 4rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cs-cloth { fill: color-mix(in srgb, var(--cs-cloth) 85%, var(--cauldron, var(--cs-cloth))); }
/* The hexes' finish: a landscape under one soft shadow, so the rim round each hex can go thinner (two hexes of one
   habitat read as the corridor they score as); a sheen lit from the top left and a bevelled edge on every face
   (CsArt.Trim); a gloss on every token and animal disc, so they look like the box's wooden pieces */
.cs-hexes { filter: url(#cs-lift); }
.cs-rim { fill: none; stroke: rgba(19, 36, 27, .6); stroke-width: 1.4; stroke-linejoin: round; }
.cs-sheen { fill: url(#cs-sheen); pointer-events: none; }
.cs-bevel-hi { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2.2; stroke-linejoin: round; pointer-events: none; }
.cs-bevel-lo { fill: none; stroke: rgba(0, 20, 10, .25); stroke-width: 2.2; stroke-linejoin: round; pointer-events: none; }
.cs-split { stroke: rgba(19, 36, 27, .45); stroke-width: 1.2; }
.cs-key { fill: #fff; stroke: rgba(19, 36, 27, .35); stroke-width: 1; }
.cs-pic circle { stroke: #fff; stroke-width: 1.6; }
.cs-token circle { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.cs-pic circle.cs-gloss, .cs-token circle.cs-gloss { fill: url(#cs-gloss); stroke: none; filter: none; pointer-events: none; }
.cs-hex-in { transform-box: fill-box; transform-origin: center; }
.cs-hex.fresh .cs-hex-in { animation: cs-land .45s cubic-bezier(.2, .8, .3, 1.15) both; }
@keyframes cs-land { from { transform: scale(1.35); opacity: 0; } 70% { opacity: 1; } }
.cs-hex.dim { opacity: .42; }
.cs-hex.read .cs-rim { stroke: #fff; stroke-width: 4; }
.cs-drop { transform-box: fill-box; transform-origin: center; animation: cs-drop .45s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes cs-drop { from { transform: translateY(-60px) scale(1.4); opacity: 0; } }
.cs-hit { fill: transparent; cursor: pointer; }
.cs-lit { fill: var(--c); fill-opacity: .38; stroke: var(--c); stroke-width: 5; pointer-events: none; animation: cs-pulse 1.1s ease-in-out infinite alternate; }
@keyframes cs-pulse { from { fill-opacity: .2; } to { fill-opacity: .5; } }
.cs-spot { fill: rgba(232, 185, 63, .14); stroke: var(--cs-gold); stroke-width: 4; stroke-dasharray: 11 7; cursor: pointer; animation: cs-spot-pulse 1.6s ease-in-out infinite alternate; }
.cs-spot.dim { opacity: .45; animation: none; }
.cs-spot.chosen { stroke-dasharray: none; animation: none; fill: rgba(232, 185, 63, .3); }
@keyframes cs-spot-pulse { from { fill-opacity: .1; } to { fill-opacity: .38; } }
.cs-ghost { cursor: pointer; opacity: .86; }
.cs-ghost-in { transform-box: fill-box; transform-origin: center; transition: transform .22s ease; }
.cs-ghost-ring { fill: none; stroke: var(--cs-gold); stroke-width: 5; pointer-events: none; }
/* The tokens of the animal in hand already down: a steady ring and a soft glow in its colour (never pulsing, unlike
   the gold rings where the token may go), the hex itself never dimmed */
.cs-kin-halo { fill: none; stroke: #fff; stroke-width: 9; stroke-opacity: .32; stroke-linejoin: round; pointer-events: none; }
.cs-kin { fill: none; stroke: color-mix(in srgb, var(--c) 72%, #fff); stroke-width: 4.5; stroke-opacity: .95; stroke-linejoin: round; pointer-events: none; filter: drop-shadow(0 0 5px var(--c)); }
.cs-tspot { cursor: pointer; }
.cs-tspot .ring { fill: rgba(232, 185, 63, .14); stroke: var(--cs-gold); stroke-width: 5; animation: cs-spot-pulse 1.4s ease-in-out infinite alternate; }
.cs-tspot.on .ring { fill: rgba(232, 185, 63, .32); animation: none; }
.cs-gain { font-family: var(--display); font-weight: 800; font-size: 22px; text-anchor: middle; fill: #fff; paint-order: stroke; stroke: #13241b; stroke-width: 5; pointer-events: none; }
.cs-cone-badge { color: var(--cs-cone); filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .9)); pointer-events: none; }
.cs-token.staged { animation: cs-drop .3s ease-out both; transform-box: fill-box; transform-origin: center; }
.cs-points { font-size: 46px; font-weight: 800; font-family: var(--display); text-anchor: middle; fill: #fff; paint-order: stroke; stroke: #13241b; stroke-width: 6; animation: cs-rise 2.2s ease-out forwards; pointer-events: none; }
@keyframes cs-rise { from { transform: translateY(20px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }

/* ---- the info box: one fixed height, under the map, never covered */
.cs-tray { display: flex; flex-direction: column; gap: .3rem; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: .4rem .6rem; margin: .5rem 0 0; height: 8.6rem; overflow: hidden; justify-content: center; }
.cs-tray.mine { border-color: var(--cs-gold); }
.cs-tray.seat-tint { border-color: var(--cauldron); }
.cs-tray:has(> .cs-big-wrap) { flex-direction: row; align-items: center; gap: .7rem; }
.cs-tray-head { display: flex; align-items: center; gap: .5rem; min-height: 1.5rem; }
.cs-tray-head .sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.cs-tray-col { display: flex; flex-direction: column; gap: .25rem; min-height: 0; }
.cs-tray-text, .cs-readout { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.cs-tray .lbl { font-family: var(--display); letter-spacing: .06em; font-size: .78rem; color: var(--accent-2); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-tray .msg { font-weight: 600; line-height: 1.25; }
.cs-tray .msg b { font-size: 1.1rem; }
.cs-tray .sub { color: var(--muted); font-size: .85rem; line-height: 1.2; }
.cs-tray .dim { opacity: .75; font-weight: 500; }
.cs-tray .error { color: var(--danger); font-size: .85rem; }
.cs-big-wrap { position: relative; width: 100px; height: 100px; flex: none; }
.cs-big { width: 96px; height: 96px; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.cs-big-tile { transform-box: fill-box; transform-origin: center; transition: transform .22s ease; }
.cs-big-token { position: absolute; right: -6px; bottom: -4px; width: 40px; height: 40px; }
.cs-big-solo { width: 76px; height: 76px; margin: 12px; }
/* Step 3: the card's rule and its table in the box, the readout of the hex tapped under them (two lines kept, so the
   box never changes height while hexes are tapped); the box may stand a little taller than the market's for a long rule */
.cs-tray.token-step { height: auto; min-height: 8.6rem; }
.cs-token-step { gap: .25rem; }
.cs-tray-head .cs-ico { width: 1.3em; height: 1.3em; vertical-align: -.3em; margin-right: .15em; }
.cs-tray .cs-rule { font-size: .86rem; font-weight: 600; line-height: 1.2; }
.cs-tray .cs-steps { flex-wrap: nowrap; gap: .25rem; overflow: hidden; }
.cs-tray .cs-steps span { min-width: 1.9rem; padding: .05rem .3rem; border-radius: 6px; line-height: 1.1; white-space: nowrap; }
.cs-tray .cs-steps small { font-size: .58rem; }
.cs-tray .cs-steps b { font-size: .78rem; }
.cs-tray .cs-status { font-weight: 600; font-size: .9rem; line-height: 1.2; min-height: 2.4em; }
.cs-tray .cs-status b { font-size: 1.05rem; }
.cs-tray .cs-status.dim { font-weight: 500; }
.cs-tray .show-strip.inline { flex: none; min-width: 0; margin: 0; border: 0; box-shadow: none; background: transparent; animation: none; padding: 0; }
.cs-tray .show-strip.inline .show-strip-cap { font-weight: 600; }
.cs-opt { font: inherit; font-size: .8rem; font-weight: 800; line-height: 1.1; padding: .25rem .7rem; border-radius: 999px; border: 2px solid var(--cs-gold); background: rgba(232, 185, 63, .25); color: var(--text); cursor: pointer; white-space: nowrap; }

/* ---- the market: four places, a tile with its token over its lower right */
.cs-market { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; justify-items: center; }
.cs-cell { position: relative; width: 74px; height: 70px; border-radius: 12px; }
.cs-cell button { position: absolute; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cs-cell button:disabled { cursor: default; }
.cs-cell-tile { left: 0; top: 0; width: 62px; height: 66px; }
.cs-cell-tile .cs-tile-svg { width: 62px; height: 66px; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.cs-cell-token { right: 0; bottom: 0; width: 32px; height: 32px; border-radius: 50%; }
.cs-cell-token .cs-token-svg { width: 32px; height: 32px; display: block; }
.cs-empty-hex { fill: none; stroke: var(--line); stroke-width: 3; stroke-dasharray: 8 6; }
.cs-cell.on { background: rgba(232, 185, 63, .35); box-shadow: 0 0 0 3px var(--cs-gold); }
.cs-cell-tile.on .cs-tile-svg, .cs-cell-token.on .cs-token-svg { filter: drop-shadow(0 0 0 var(--cs-gold)) drop-shadow(0 0 4px var(--cs-gold)) drop-shadow(0 0 3px var(--cs-gold)); }
.cs-cell-tile.on::after, .cs-cell-token.on::after, .cs-cell-token.marked::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--cs-gold); pointer-events: none; }
.cs-cell-tile.on::after { border-radius: 14px; }
.cs-cell-token.marked .cs-token-svg { opacity: .45; }
.cs-cell-token.marked::after { border-color: var(--danger); border-style: dashed; }
.cs-cell.alike .cs-cell-token { box-shadow: 0 0 0 3px rgba(184, 64, 44, .55); }
.cs-cell.fresh { animation: cs-fresh 1s ease-out both; }
@keyframes cs-fresh { from { background: rgba(232, 185, 63, .55); } to { background: transparent; } }
.cs-market.small .cs-cell { width: 58px; height: 54px; }
.cs-market.small .cs-cell-tile, .cs-market.small .cs-cell-tile .cs-tile-svg { width: 48px; height: 51px; }
.cs-market.small .cs-cell-token, .cs-market.small .cs-cell-token .cs-token-svg { width: 25px; height: 25px; }
.cs-market.large .cs-cell { width: 128px; height: 120px; }
.cs-market.large .cs-cell-tile, .cs-market.large .cs-cell-tile .cs-tile-svg { width: 106px; height: 112px; }
.cs-market.large .cs-cell-token, .cs-market.large .cs-cell-token .cs-token-svg { width: 50px; height: 50px; }
.cs-market.view .cs-cell-tile, .cs-market.view .cs-cell-token { pointer-events: none; }

/* ---- the action row: in the flow under the info box, one line, always the same height */
.cs-page .cs-actions { position: static; display: flex; align-items: stretch; gap: .5rem; padding: .5rem 0 0; margin: 0; max-width: none; pointer-events: auto; min-height: 3.9rem; }
.cs-actions .btn { flex: 0 0 auto; margin: 0; }
.cs-actions .btn.icon.cs-back { width: 3rem; padding: 0; display: grid; place-items: center; }
.cs-actions .btn.icon.cs-back .ico { width: 1.4rem; height: 1.4rem; }
.cs-actions .cs-place, .cs-actions .cs-lay, .cs-actions .cs-next, .cs-actions .cs-take, .cs-actions .cs-throw { flex: 1; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cs-actions .cs-rotate small, .cs-actions .cs-cone-btn small { display: block; font-size: .7rem; font-weight: 500; opacity: .8; }
.cs-actions .cs-cone-btn .ico { color: var(--cs-cone); }
.cs-page .cs-actions .fab-status { flex: 1; background: transparent; border: 0; box-shadow: none; color: var(--muted); font-weight: 600; padding: .7rem; }
.cs-cone-opts { display: grid; gap: .5rem; }
.cs-cone-opts .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: .1rem; }
.cs-cone-opts .btn small { font-weight: 500; opacity: .8; }
.cs-cone-opts .ico { color: var(--cs-cone); }

/* ---- the pad and the cards */
.cs-pad { width: 100%; border-collapse: collapse; font-size: .9rem; margin: .3rem 0 .5rem; }
.cs-pad th, .cs-pad td { padding: .28rem .35rem; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.cs-pad th:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.cs-pad thead th { border-bottom: 3px solid var(--cauldron, var(--line)); text-align: right; }
.cs-pad thead th .who { color: var(--text); font-weight: 800; }
.cs-pad td.me { background: var(--panel-2); font-weight: 700; }
.cs-pad td.lead { color: var(--accent-2); font-weight: 800; }
.cs-pad .bonus { color: var(--ok); font-weight: 800; }
.cs-pad tr.sub th, .cs-pad tr.sub td { color: var(--muted); font-style: italic; }
.cs-pad tr.total th, .cs-pad tr.total td { font-size: 1.1rem; font-weight: 800; border-bottom: 0; }
.cs-ico { width: 1.1em; height: 1.1em; vertical-align: -.15em; }
.cs-ico.bear { color: var(--cs-bear); } .cs-ico.elk { color: var(--cs-elk); } .cs-ico.salmon { color: var(--cs-salmon); }
.cs-ico.hawk { color: var(--cs-hawk); } .cs-ico.fox { color: var(--cs-fox); } .cs-ico.cone { color: var(--cs-cone); }
.cs-swatch { display: inline-block; width: .9em; height: .9em; border-radius: 3px; vertical-align: -.1em; border: 1px solid rgba(0, 0, 0, .25); }
.cs-card { border: 2px solid var(--line); border-left: 6px solid var(--cs-card, var(--accent)); border-radius: 12px; padding: .5rem .7rem; margin: 0 0 .55rem; background: var(--panel); }
.cs-card header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cs-card-name { font-weight: 800; display: inline-flex; align-items: center; gap: .3rem; }
.cs-card-name .cs-ico { color: var(--cs-card); }
.cs-letter { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--cs-card, var(--accent)); color: #fff; font-size: .8rem; }
.cs-card-you b { font-size: 1.3rem; }
.cs-card p { margin: .3rem 0; }
.cs-steps { display: flex; flex-wrap: wrap; gap: .3rem; }
.cs-steps span { display: inline-flex; flex-direction: column; align-items: center; min-width: 2.3rem; padding: .15rem .35rem; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); }
.cs-steps small { font-size: .7rem; color: var(--muted); }
.cs-card-animals { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .4rem; font-weight: 700; }
.cs-card-animals .cs-ico.bear { color: var(--cs-bear); }

/* ---- splashes and standings */
.cs-splash-scores { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.cs-splash-scores li { display: flex; justify-content: space-between; align-items: center; padding: .45rem .7rem; border-radius: 10px; background: var(--panel-2); border-left: 6px solid var(--cauldron); font-weight: 700; }
.cs-splash-scores li span { display: inline-flex; align-items: center; gap: .35rem; }
.cs-splash-scores li .seat { color: var(--cauldron); width: 1.1em; height: 1.1em; }
.cs-splash-scores li b { font-size: 1.3rem; }
.cs-solo-verdict { font-weight: 800; font-size: 1.1rem; color: var(--accent-2); }

/* ---- the lobby and the rules */
.cs-lobby-fan { display: flex; gap: .2rem; justify-content: center; margin: .3rem 0 .6rem; }
.cs-lobby-tile { width: 58px; height: 62px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.cs-cards-hint { margin-top: -.2rem; }
.cs-rules-pair { display: flex; align-items: flex-end; justify-content: center; margin: .2rem 0 .4rem; }
.cs-rules-tile { width: 84px; height: 88px; }
.cs-rules-token { width: 40px; height: 40px; margin-left: -18px; }
.cs-rules-cards { padding-left: 1.1rem; }
.cs-rules-cards li { margin: .3rem 0; }

/* ---- the table page */
.cs-table-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; align-items: start; }
.cs-table-side { display: grid; gap: 1rem; }
.cs-table-main { display: grid; gap: 1rem; }
@media (max-width: 900px) { .cs-table-grid { grid-template-columns: 1fr; } }
.cs-table-market-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .4rem; }
.cs-table-market-head .who { color: var(--cauldron); }
.cs-lands { display: grid; grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); gap: .8rem; }
.cs-land { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: .4rem; display: flex; flex-direction: column; gap: .3rem; transition: transform .25s ease, box-shadow .25s ease; }
.cs-land header { display: flex; align-items: center; gap: .35rem; }
.cs-land header .seat { color: var(--cauldron); width: 1.1em; height: 1.1em; }
.cs-land.turn { border-color: var(--cauldron); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cauldron) 40%, transparent); }
.cs-land.focus { border-color: var(--cauldron); box-shadow: 0 0 0 4px var(--cauldron); transform: scale(1.02); z-index: 1; }
.cs-land-board { position: relative; background: color-mix(in srgb, var(--cs-cloth) 85%, var(--cauldron, var(--cs-cloth))); border-radius: 10px; height: min(40vh, 420px); overflow: hidden; }
.cs-lands[style*="--n:1"] .cs-land-board { height: min(64vh, 640px); }
.cs-land-board svg.board { display: block; width: 100%; height: 100%; max-width: none; margin: 0; }
.cs-tablepage .cs-chips { font-size: 1rem; }
.cs-tablepage .cs-chip { cursor: default; }
.cs-table-cards p { margin: .35rem 0; font-size: .92rem; }

@media (prefers-reduced-motion: reduce) {
    .cs-hex.fresh .cs-hex-in, .cs-drop, .cs-spot, .cs-tspot .ring, .cs-lit, .cs-points, .cs-plus, .cs-cell.fresh, .cs-token.staged { animation: none !important; }
    .cs-ghost-in, .cs-big-tile, .cs-land { transition: none; }
}