/* Bingle UI — one stylesheet for the lobby and the game page.
   Design tokens first; light and dark themes follow the OS setting. */

:root {
	color-scheme: light dark;

	--bg: #f4f2ee;
	--surface: #ffffff;
	--surface-2: #f0ede6;
	--border: #d9d4c8;
	--text: #26241f;
	--muted: #6d675a;
	--accent: #2f6f5e;
	--accent-ink: #ffffff;
	--accent-soft: #d8ebe4;
	--danger: #b3402f;
	--warn: #b7791f;
	--focus: #2563eb;

	--board-light: #ecd9b0;
	--board-dark: #c39a63;
	--board-line: #5b4630;
	--board-frame: #8a6a43;
	--board-label: #f6ecd6;
	--last-move: rgba(255, 214, 10, 0.55);
	--target: rgba(47, 111, 94, 0.9);
	--target-soft: rgba(47, 111, 94, 0.22);
	--selected: rgba(37, 99, 235, 0.55);

	--piece-white-fill: #f7f4ec;
	--piece-white-stroke: #3a352b;
	--piece-black-fill: #34312c;
	--piece-black-stroke: #0b0a09;
	--piece-red-fill: #d1543f;
	--piece-red-stroke: #5c1c12;
	--piece-blue-fill: #4a7fd6;
	--piece-blue-stroke: #16335f;
	--piece-green-fill: #4f9a5b;
	--piece-green-stroke: #1b4524;
	--piece-yellow-fill: #e6c14a;
	--piece-yellow-stroke: #6a5410;
	--piece-orange-fill: #e8923a;
	--piece-purple-fill: #9b6bd6;
	--piece-brown-fill: #a8723f;
	--piece-orange-stroke: #6b3a0a;
	--piece-purple-stroke: #34185e;
	--piece-brown-stroke: #3c2410;

	--radius: 10px;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #17171a;
		--surface: #212125;
		--surface-2: #2a2a2f;
		--border: #3a3a41;
		--text: #ece9e2;
		--muted: #a09b8e;
		--accent: #5fb89f;
		--accent-ink: #0d1f1a;
		--accent-soft: #1f3a32;
		--danger: #e0705f;
		--warn: #e0a84b;
		--focus: #7aa7ff;
		--board-light: #b79b6b;
		--board-dark: #7e6340;
		--board-line: #1d1710;
		--board-frame: #4b3b26;
		--board-label: #d9c9a5;
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
	}
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
	background: var(--bg);
	color: var(--text);
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--accent); }
code, kbd, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
kbd {
	background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 2px;
	border-radius: 4px; padding: 0 0.3em; font-size: 0.85em;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- page chrome ------------------------------------------------------ */

.topbar {
	display: flex; align-items: center; gap: 1rem;
	padding: 0.6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar .brand {
	font-weight: 800; letter-spacing: 0.02em; font-size: 1.15rem; color: var(--text); text-decoration: none;
	display: inline-flex; align-items: center; gap: 0.5rem;
}
.topbar .brand .logo {
	width: 1.4rem; height: 1.4rem; border-radius: 6px; background: var(--accent);
	display: inline-block; position: relative;
}
.topbar .brand .logo::after {
	content: ""; position: absolute; inset: 0.3rem; border-radius: 50%; background: var(--accent-ink); opacity: 0.9;
}
.topbar .spacer { flex: 1; }
.topbar .tagline { color: var(--muted); font-size: 0.9rem; }

:root { --board-max: min(100%, max(760px, calc(100vh - 250px))); }
.page { max-width: 1200px; margin: 0 auto; padding: 1rem; }
/* The game page grows with the screen; area maps use all of it. */
@media (min-width: 1300px) { .page.page-game { max-width: min(100%, 1900px); } }
@media (min-width: 1300px) { body.wide-game .page.page-game { max-width: min(100%, 2600px); padding-inline: 1.25rem; } }
.page.narrow { max-width: 760px; }

.card {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: var(--shadow); padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.card > h2:first-child { margin-top: 0; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.hidden { display: none !important; }
.row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: 0.6rem; }

/* ---- forms & buttons -------------------------------------------------- */

form { display: flex; flex-direction: column; gap: 0.6rem; }
label { font-weight: 600; font-size: 0.9rem; }
.field { display: flex; flex-direction: column; gap: 0.25rem; }

input[type="text"], input[type="email"], select {
	font: inherit; color: inherit; background: var(--surface);
	border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.65rem; min-width: 0;
}
input[type="text"]:focus, input[type="email"]:focus, select:focus { border-color: var(--focus); }

button, .button {
	font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
	border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
	padding: 0.45rem 0.9rem; border-radius: 8px; display: inline-flex; align-items: center; gap: 0.4rem;
	transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
button:hover:not(:disabled), .button:hover { border-color: var(--muted); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary {
	background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
button.danger { color: var(--danger); }
button.ghost { background: transparent; }
button.icon { padding: 0.35rem 0.6rem; min-width: 2.2rem; justify-content: center; }

.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.segmented label {
	font-weight: 600; padding: 0.4rem 0.8rem; cursor: pointer; background: var(--surface-2);
	border-right: 1px solid var(--border);
}
.segmented label:last-child { border-right: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented input:checked + span { color: var(--accent-ink); }
.segmented label:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }

.badge {
	display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.05rem 0.55rem;
	border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--surface-2);
	border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.badge.turn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.badge.waiting { color: var(--warn); border-color: var(--warn); }
.badge.done { color: var(--text); }
.badge.bot { color: var(--muted); }
.badge.auto-play { color: var(--accent); border-color: var(--accent); margin-left: 0.4rem; }
.badge.auto-play.small { font-size: 0.7rem; padding: 0 0.35rem; }

/* ---- lobby ------------------------------------------------------------ */

/* A fun fact where the page's title used to be: a new one on every load. */
.fun-fact { margin: 1.2rem 0 1rem; color: var(--muted); font-style: italic; font-size: 1.05rem; max-width: 52rem; line-height: 1.45; }

.lobby-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 860px) { .lobby-grid { grid-template-columns: 3fr 2fr; } }

.game-blurb { color: var(--muted); min-height: 3em; }

.my-games { list-style: none; margin: 0; padding: 0; }
.my-games li {
	display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0;
	border-top: 1px solid var(--border);
}
.my-games li:first-child { border-top: 0; }
.my-games .title { font-weight: 700; }
.my-games .meta { color: var(--muted); font-size: 0.85rem; }
.my-games .grow { flex: 1; min-width: 0; }

.error-text { color: var(--danger); font-weight: 600; min-height: 1.4em; }

/* ---- game page -------------------------------------------------------- */

.game-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 980px) { .game-layout { grid-template-columns: minmax(0, 1fr) 340px; } }

.board-column { min-width: 0; }

.status-bar {
	display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
	padding: 0.65rem 0.9rem; border-radius: var(--radius); margin-bottom: 0.75rem;
	background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.status-bar .message { font-weight: 700; flex: 1; min-width: 12rem; }
.status-bar.your-turn { border-color: var(--accent); background: var(--accent-soft); }
.status-bar.over { border-color: var(--text); }
.status-bar.history { border-color: var(--warn); }

.board-wrap {
	display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}

#board { width: 100%; max-width: var(--board-max); }
#board svg { width: 100%; height: auto; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; }

.seat-strip {
	display: flex; flex-direction: column; gap: 0.35rem; width: 100%; max-width: var(--board-max);
	padding: 0.45rem 0.7rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
}
.seat-strip.to-move { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.seat-head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.seat-strip .swatch {
	width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 2px solid var(--piece-white-stroke);
	flex: none;
}
.seat-strip .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.seat-strip .grow { flex: 1; }
.seat-strip .score { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.seat-strip .score strong { color: var(--text); }

.hand { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.pool {
	display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.35rem 0.15rem 0.5rem;
	border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
}
.pool.empty { opacity: 0.5; }
.pool-count { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.2ch; text-align: right; }
.pool-name { color: var(--muted); font-size: 0.85rem; }
.hand-piece {
	display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.4rem;
	border-radius: 8px; border: 1px solid transparent; background: transparent;
	font-weight: 600; font-size: 0.85rem; color: var(--text);
}
.hand-piece svg { width: 1.4rem; height: 1.4rem; flex: none; }
button.hand-piece { cursor: pointer; }
button.hand-piece.choosable { border-color: var(--target); box-shadow: 0 0 0 2px var(--target-soft); background: var(--surface); }
button.hand-piece.chosen { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.hand-piece:disabled:not(.chosen) { opacity: 0.55; cursor: default; }

.pool.tiles { padding: 0.15rem; background: transparent; border: 0; }
.hand-piece.tile { position: relative; padding: 0.2rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.hand-piece.tile svg { width: calc(5.6rem * var(--tile-scale, 1)); height: calc(5.6rem * var(--tile-scale, 1)); }
.tile-count {
	position: absolute; right: -0.4rem; bottom: -0.4rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem; box-sizing: border-box;
	border-radius: 999px; background: var(--text); color: var(--bg, #fff); font-size: 0.72rem; font-weight: 800; line-height: 1.15rem; text-align: center;
	font-variant-numeric: tabular-nums;
}
.pool.tiles.empty { opacity: 0.4; }
.piece-tip { display: flex; gap: 0.7rem; align-items: flex-start; max-width: 24rem; line-height: 1.35; }
.piece-tip > svg { width: 3.5rem; height: 3.5rem; flex: none; }
.piece-tip p { margin: 0.3rem 0 0; }
.piece-tip .muted { color: var(--muted); }

.check { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 500; font-size: 0.9rem; }
.check input { margin-top: 0.25rem; }

.move-bar {
	display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; width: 100%;
	max-width: var(--board-max); min-height: 2.75rem;
}
.move-bar .pending { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }
.move-bar .hint { color: var(--muted); }
.move-actions { margin-left: auto; display: inline-flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.count-picker { display: inline-flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.count-picker button { min-width: 2.2rem; justify-content: center; }

.side-panel { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.side-panel .card { margin-bottom: 0; }

.players-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.players-list li { display: flex; align-items: center; gap: 0.5rem; }
.players-list .swatch { width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 2px solid var(--piece-white-stroke); flex: none; }
.players-list .name { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.move-list {
	list-style: none; margin: 0; padding: 0; max-height: 17rem; overflow: auto;
	font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem;
}
.move-list li { display: grid; grid-template-columns: 2.4rem 1fr 1fr; gap: 0.25rem; padding: 0.1rem 0; }
.move-list .num { color: var(--muted); text-align: right; padding-right: 0.3rem; }
.move-list button.mv {
	font: inherit; font-weight: 600; background: transparent; border: 1px solid transparent;
	padding: 0.05rem 0.4rem; border-radius: 6px; text-align: left; justify-content: flex-start;
}
.move-list button.mv:hover { border-color: var(--border); }
.move-list button.mv.current { background: var(--accent); color: var(--accent-ink); }
.move-list .empty { color: var(--muted); font-style: italic; }
.move-list li.empty-row { display: block; }

.history-controls { display: flex; gap: 0.3rem; margin-top: 0.5rem; }
.history-controls button { flex: 1; justify-content: center; }

.share-row { display: flex; gap: 0.4rem; }
.share-row input { flex: 1; font-size: 0.85rem; }

dialog {
	border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
	color: var(--text); max-width: min(42rem, 92vw); padding: 1.2rem 1.4rem; box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog h2 { margin-top: 0; }
dialog label { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.7rem 0; font-weight: 600; }
dialog label select, dialog label input { width: 100%; font-weight: 400; }
dialog .error:empty { display: none; }
dialog .error { color: var(--danger, #b3261e); margin: 0.4rem 0; }
dialog .row { display: flex; gap: 0.5rem; margin-top: 1rem; }
dialog textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; }
dialog ul { padding-left: 1.2rem; }
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.4rem; list-style: none; padding: 0; }
.legend li { display: flex; align-items: center; gap: 0.5rem; }
.legend svg { width: 2rem; height: 2rem; }

.toast {
	position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
	background: var(--text); color: var(--bg); padding: 0.6rem 1rem; border-radius: 10px;
	font-weight: 600; box-shadow: var(--shadow); z-index: 50; max-width: 90vw;
}
.toast.error { background: var(--danger); color: #fff; }

/* ---- board svg (classes set by render.js) ----------------------------- */

.cell-bg.light { fill: var(--board-light); }
.cell-bg.dark { fill: var(--board-dark); }
.cell-bg.mid { fill: color-mix(in srgb, var(--board-light) 50%, var(--board-dark)); }
.cell-bg.edge-red { fill: color-mix(in srgb, var(--piece-red-fill) 55%, var(--board-light)); }
.cell-bg.edge-blue { fill: color-mix(in srgb, var(--piece-blue-fill) 55%, var(--board-light)); }
.cell-bg.edge-green { fill: color-mix(in srgb, var(--piece-green-fill) 55%, var(--board-light)); }
.cell-bg.edge-yellow { fill: color-mix(in srgb, var(--piece-yellow-fill) 55%, var(--board-light)); }
.cell-bg.edge-orange { fill: color-mix(in srgb, var(--piece-orange-fill) 55%, var(--board-light)); }
.cell-bg.edge-purple { fill: color-mix(in srgb, var(--piece-purple-fill) 55%, var(--board-light)); }
.cell-bg.edge-brown { fill: color-mix(in srgb, var(--piece-brown-fill) 55%, var(--board-light)); }
.cell-bg.edge-black { fill: color-mix(in srgb, var(--piece-black-fill) 55%, var(--board-light)); }
.cell-bg.edge-white { fill: color-mix(in srgb, var(--piece-white-fill) 80%, var(--board-light)); }
.board-frame { fill: var(--board-frame); }
.coord { fill: var(--board-label); font: 600 13px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.grid-line { stroke: var(--board-line); stroke-width: 1.5; }
.last-move { fill: var(--last-move); pointer-events: none; }
.hint-ring { fill: none; stroke: var(--focus); stroke-width: 4; stroke-dasharray: 8 5; pointer-events: none; }
.selected-ring { fill: var(--selected); pointer-events: none; }
.target-dot { fill: var(--target); pointer-events: none; }
.target-ring { fill: var(--target-soft); stroke: var(--target); stroke-width: 3; pointer-events: none; }
.cell.clickable { cursor: pointer; }
.cell.clickable:hover .target-ring { fill: var(--target); fill-opacity: 0.45; }
.cell.clickable:hover .cell-bg { filter: brightness(1.12) saturate(1.1); }
.cell:focus { outline: none; }
.cell:focus-visible .cell-hit { stroke: var(--focus); stroke-width: 4; stroke-linejoin: round; }
.path-badge { fill: var(--accent); }
.path-badge-text { fill: var(--accent-ink); font: 800 14px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.height-badge { fill: rgba(0, 0, 0, 0.72); }
.height-badge-text { fill: #fff; font: 800 13px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.piece-body { stroke-width: 3; stroke-linejoin: round; }
.piece-detail { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.piece.color-white .piece-body, .ghost-piece.color-white .piece-body { fill: var(--piece-white-fill); stroke: var(--piece-white-stroke); }
.piece.color-white .piece-detail, .ghost-piece.color-white .piece-detail { stroke: var(--piece-white-stroke); }
.piece.color-black .piece-body, .ghost-piece.color-black .piece-body { fill: var(--piece-black-fill); stroke: var(--piece-black-stroke); }
.piece.color-black .piece-detail, .ghost-piece.color-black .piece-detail { stroke: #cfc9bb; }
.piece.color-red .piece-body, .ghost-piece.color-red .piece-body { fill: var(--piece-red-fill); stroke: var(--piece-red-stroke); }
.piece.color-red .piece-detail, .ghost-piece.color-red .piece-detail { stroke: var(--piece-red-stroke); }
.piece.color-blue .piece-body, .ghost-piece.color-blue .piece-body { fill: var(--piece-blue-fill); stroke: var(--piece-blue-stroke); }
.piece.color-blue .piece-detail, .ghost-piece.color-blue .piece-detail { stroke: var(--piece-blue-stroke); }
.piece.color-green .piece-body, .ghost-piece.color-green .piece-body { fill: var(--piece-green-fill); stroke: var(--piece-green-stroke); }
.piece.color-green .piece-detail, .ghost-piece.color-green .piece-detail { stroke: var(--piece-green-stroke); }
.piece.color-yellow .piece-body, .ghost-piece.color-yellow .piece-body { fill: var(--piece-yellow-fill); stroke: var(--piece-yellow-stroke); }
.piece.color-yellow .piece-detail, .ghost-piece.color-yellow .piece-detail { stroke: var(--piece-yellow-stroke); }
.piece.color-orange .piece-body, .ghost-piece.color-orange .piece-body { fill: var(--piece-orange-fill); stroke: var(--piece-orange-stroke); }
.piece.color-purple .piece-body, .ghost-piece.color-purple .piece-body { fill: var(--piece-purple-fill); stroke: var(--piece-purple-stroke); }
.piece.color-brown .piece-body, .ghost-piece.color-brown .piece-body { fill: var(--piece-brown-fill); stroke: var(--piece-brown-stroke); }
.piece.color-orange .piece-detail, .ghost-piece.color-orange .piece-detail { stroke: var(--piece-orange-stroke); }
.piece.color-purple .piece-detail, .ghost-piece.color-purple .piece-detail { stroke: var(--piece-purple-stroke); }
.piece.color-brown .piece-detail, .ghost-piece.color-brown .piece-detail { stroke: var(--piece-brown-stroke); }
.piece.ghost { opacity: 0.55; }
.swatch.color-white { background: var(--piece-white-fill); border-color: var(--piece-white-stroke); }
.swatch.color-black { background: var(--piece-black-fill); border-color: var(--piece-black-stroke); }
.swatch.color-red { background: var(--piece-red-fill); border-color: var(--piece-red-stroke); }
.swatch.color-blue { background: var(--piece-blue-fill); border-color: var(--piece-blue-stroke); }
.swatch.color-green { background: var(--piece-green-fill); border-color: var(--piece-green-stroke); }
.swatch.color-yellow { background: var(--piece-yellow-fill); border-color: var(--piece-yellow-stroke); }
.swatch.color-orange { background: var(--piece-orange-fill); border-color: var(--piece-orange-stroke); }
.swatch.color-purple { background: var(--piece-purple-fill); border-color: var(--piece-purple-stroke); }
.swatch.color-brown { background: var(--piece-brown-fill); border-color: var(--piece-brown-stroke); }

.stack-popover {
	position: absolute; z-index: 20; background: var(--surface); border: 1px solid var(--border);
	border-radius: 8px; padding: 0.4rem 0.6rem; box-shadow: var(--shadow); font-size: 0.85rem; pointer-events: none;
}

/* A raw-state dump for debugging, tucked away. */
details.debug summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
details.debug pre {
	background: var(--surface-2); padding: 0.6rem; border-radius: 8px; overflow: auto; max-height: 20rem; font-size: 0.8rem;
}

/* ---- lobby opponent picker --------------------------------------------- */

.opponent-choice {
	display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 500; padding: 0.45rem 0.6rem;
	border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--surface);
}
.opponent-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opponent-choice input { margin-top: 0.3rem; }

/* ---- clocks -------------------------------------------------------------- */

.clock {
	font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.9rem;
	padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
}
.clock.low { color: var(--danger); border-color: var(--danger); }

/* ---- carried pieces & inspector --------------------------------------- */

.carry { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.1rem 0.4rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.carry .carry-piece { display: inline-flex; }
.carry .carry-piece.dropped { opacity: 0.25; }
.carry svg { width: 1.4rem; height: 1.4rem; }
.inspector { min-height: 1.4em; width: 100%; max-width: var(--board-max); }

/* ---- board themes ------------------------------------------------------ */

:root[data-board="slate"] {
	--board-light: #d6dde5; --board-dark: #8b9bad; --board-line: #2d3945; --board-frame: #4f6073; --board-label: #eef2f6;
}
:root[data-board="green"] {
	--board-light: #cfe3c0; --board-dark: #7fa66b; --board-line: #2c4a22; --board-frame: #46663a; --board-label: #eef6e6;
}
:root[data-board="paper"] {
	--board-light: #f6f1e6; --board-dark: #e0d6c0; --board-line: #6b6250; --board-frame: #b9ad92; --board-label: #4b4535;
}
@media (prefers-color-scheme: dark) {
	:root[data-board="slate"] { --board-light: #8191a3; --board-dark: #566678; --board-line: #11171d; --board-frame: #2c3844; --board-label: #cfd8e1; }
	:root[data-board="green"] { --board-light: #7da468; --board-dark: #4d7240; --board-line: #0f1c0b; --board-frame: #2a3f22; --board-label: #cfe3c0; }
	:root[data-board="paper"] { --board-light: #cfc6b0; --board-dark: #a99f87; --board-line: #25221a; --board-frame: #5b5441; --board-label: #f1ead8; }
}

.game-preview { max-width: 260px; margin: 0.4rem 0; }
.game-preview svg { width: 100%; height: auto; display: block; }

#game-rules-button { align-self: flex-start; padding-left: 0; }

.notice {
	display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: space-between;
	padding: 0.55rem 0.9rem; border-radius: var(--radius); margin-bottom: 0.75rem;
	background: var(--surface-2); border: 1px solid var(--border); font-weight: 600;
}
.notice.attention { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }

/* ---- game gallery -------------------------------------------------------- */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
.game-card {
	display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem; border-radius: var(--radius);
	background: var(--surface); border: 2px solid var(--border); cursor: pointer; min-width: 0;
	transition: border-color 0.12s, transform 0.08s;
}
.game-card:hover { border-color: var(--muted); transform: translateY(-1px); }
.game-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.game-card-preview { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.game-card-preview svg { width: 100%; height: auto; max-height: 100%; }
.game-card-title { font-weight: 800; }
.game-card-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.variants { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: auto; }
.chip {
	font-size: 0.78rem; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--border);
	background: var(--surface-2); font-weight: 700;
}
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.quick-dot { fill: var(--target); opacity: 0.55; pointer-events: none; }
.cell.quick:hover .quick-dot { opacity: 1; r: 9; }

.hoshi { fill: var(--board-line); pointer-events: none; }
.action-buttons { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; max-width: 100%; }

@media (max-width: 520px) {
	.game-card { padding: 0.45rem; }
	.game-card-desc { display: none; }
	.game-card-title { font-size: 0.95rem; }
}

/* ---- puzzles ------------------------------------------------------------ */

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.puzzle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
.puzzle-card {
	display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem;
	border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.puzzle-preview { width: 100%; }
.puzzle-preview svg { width: 100%; height: auto; display: block; }
.puzzle-title { font-weight: 600; }

/* A translucent preview of the piece a click would place. */
.ghost-piece { opacity: 0; pointer-events: none; transition: opacity 0.08s; }
.cell:hover .ghost-piece, .cell:focus-visible .ghost-piece { opacity: 0.5; }

#import-text { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; margin: 0.4rem 0; }
#import-card .row { display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap; }
label.inline { display: inline-flex; flex-direction: column; gap: 0.2rem; font-weight: 600; }

/* Secondary lobby cards fold away so the main actions stay close. */
details.disclosure > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: "▸"; color: var(--muted); }
details.disclosure[open] > summary::before { content: "▾"; }
details.disclosure > summary h2 { display: inline; margin: 0; }
details.disclosure[open] > summary { margin-bottom: 0.6rem; }

/* --- ruleset games (Courtfall): terrain tints, unit glyphs, stones ------- */
.cell-bg.tint { transition: fill 0.15s; }
.tint-glyph { font-size: 17px; fill: var(--ink, #333); opacity: 0.7; pointer-events: none; }
.fence { stroke: #4a3418; stroke-width: 7; stroke-linecap: round; }
.bug-glyph { pointer-events: none; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.piece-glyph { pointer-events: none; font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", "DejaVu Sans", sans-serif; }
.piece.color-white .piece-glyph, .ghost-piece.color-white .piece-glyph { fill: #2b2926; }
.piece.color-black .piece-glyph, .ghost-piece.color-black .piece-glyph { fill: #f3eee1; }
.badge-stone { stroke-width: 2; pointer-events: none; }
.badge-stone.stone-fatigued { fill: #fbfaf5; stroke: #3a3732; }
.badge-stone.stone-exhausted { fill: #1c1a18; stroke: #e8e3d6; }
.badge-active { fill: none; stroke: #e0a526; stroke-width: 4; stroke-dasharray: 7 5; pointer-events: none; }
.badge-target { fill: none; stroke: #d1453b; stroke-width: 3; pointer-events: none; }

.exchange { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line, #ccc); border-radius: 10px; background: var(--surface, #fff); }
.exchange h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.exchange .side { display: grid; grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr); gap: 0.2rem 0.6rem; align-items: center; margin: 0.25rem 0; }
.exchange .who { font-weight: 600; }
.exchange .pool { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; }
.exchange .pool-part { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
@media (max-width: 560px) {
	.exchange .side { grid-template-columns: minmax(0, 1fr); }
}
.exchange .pool-label { font-size: 0.8rem; opacity: 0.75; }
.die { display: inline-flex; width: 1.7rem; height: 1.7rem; align-items: center; justify-content: center; border-radius: 6px; border: 2px solid var(--line, #888); font-weight: 700; background: var(--surface, #fff); font-variant-numeric: tabular-nums; }
.die.ok { border-color: #3f9a4d; background: color-mix(in srgb, #3f9a4d 22%, var(--surface, #fff)); }
.die.fail { border-color: #b84a40; color: #8a3a32; background: color-mix(in srgb, #b84a40 12%, var(--surface, #fff)); }
button.die { cursor: pointer; padding: 0; font: inherit; font-weight: 700; }
button.die.rerollable { outline: 2px dashed #e0a526; outline-offset: 2px; }
.die.unknown { opacity: 0.5; }
.events { margin: 0; font-size: 0.85rem; }
.events li { margin: 0.15rem 0; }
.legend-swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; border: 1px solid var(--line, #888); vertical-align: -0.1rem; margin-right: 0.3rem; }
.counter-pip { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 0.2rem; }
.counter-pip i { width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1px solid var(--line, #888); }
.counter-pip i.on.momentum { background: #4f86c6; border-color: #34649c; }
.counter-pip i.on.vp { background: #c4584a; border-color: #8f3a30; }
.court-tag { font-size: 0.78rem; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--line, #888); }

.move-list.flat li { grid-template-columns: 2.4rem 0.9rem 1fr; align-items: center; }
.move-list.flat .seat-dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--piece-white-stroke); }
.move-list.flat .seat-dot.color-white { background: var(--piece-white-fill); }
.move-list.flat .seat-dot.color-black { background: var(--piece-black-fill); border-color: var(--piece-black-stroke); }
.exchange { width: 100%; max-width: var(--board-max); box-sizing: border-box; }
.terrain-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.terrain-legend li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.5rem; align-items: start; }
.terrain-legend .legend-swatch { margin: 0.2rem 0 0; width: 1rem; height: 1rem; }

/* --- rules window: tabs, search, rich text ------------------------------- */
dialog.rules-window {
	padding: 0; width: min(64rem, 96vw); max-width: none; height: min(48rem, 90vh);
	overflow: hidden;
}
dialog.rules-window[open] { display: flex; flex-direction: column; }
.rules-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); flex: none; }
.rules-head h2 { margin: 0; font-size: 1.15rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rules-search { width: min(15rem, 38%); }
.rules-close { font-size: 1.4rem; line-height: 1; padding: 0.05rem 0.6rem; }
.rules-tabs {
	display: flex; gap: 0.15rem; padding: 0.4rem 0.8rem 0; border-bottom: 1px solid var(--border);
	overflow-x: auto; background: var(--surface-2); flex: none; scrollbar-width: thin;
}
.rules-tab {
	border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent;
	padding: 0.45rem 0.7rem; white-space: nowrap; color: var(--muted); font-weight: 600; cursor: pointer; box-shadow: none;
}
.rules-tab:hover { color: var(--text); }
.rules-tab.active { background: var(--surface); border-color: var(--border); color: var(--text); margin-bottom: -1px; }
.rules-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.rules-body { flex: 1; overflow: auto; padding: 1rem 1.5rem 1.8rem; scroll-behavior: smooth; }
.rules-body [hidden], .rules-panel[hidden] { display: none !important; }
.rules-panel.has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem; gap: 0 1.6rem; align-items: start; }
.rules-panel.has-toc > .md { grid-column: 1; grid-row: 1; }
.rules-toc {
	grid-column: 2; grid-row: 1; position: sticky; top: 0; padding: 0.6rem 0.8rem;
	border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 0.88rem;
	max-height: 100%; overflow: auto;
}
.rules-toc ul { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.rules-toc li.lvl-3 { padding-left: 0.9rem; }
.rules-toc a { color: var(--text); text-decoration: none; display: block; padding: 0.1rem 0; }
.rules-toc a:hover { color: var(--accent); text-decoration: underline; }
.rules-results h3 { margin-top: 0; }
.rules-hit { display: block; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; margin: 0.4rem 0; text-decoration: none; color: var(--text); }
.rules-hit:hover, .rules-hit:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.rules-hit-where { display: block; font-weight: 700; font-size: 0.9rem; }
.rules-hit-text { display: block; color: var(--muted); font-size: 0.88rem; }
.rules-hit mark { background: var(--last-move); color: inherit; border-radius: 2px; }
@media (max-width: 820px) {
	.rules-panel.has-toc { display: flex; flex-direction: column; }
	.rules-toc { order: -1; position: static; margin: 0 0 1rem; max-height: none; }
}
@media (max-width: 640px) {
	dialog.rules-window { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
	.rules-search { width: 9rem; }
}

.md { line-height: 1.55; max-width: 52rem; }
.md > :first-child { margin-top: 0; }
.md h1 { font-size: 1.55rem; margin: 0.2rem 0 0.8rem; }
.md h2 { font-size: 1.25rem; margin: 1.6rem 0 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); }
.md h3 { font-size: 1.05rem; margin: 1.2rem 0 0.4rem; }
.md h4 { font-size: 0.95rem; margin: 1rem 0 0.3rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.md p { margin: 0.55rem 0; }
.md ul, .md ol { padding-left: 1.4rem; margin: 0.5rem 0; }
.md li { margin: 0.2rem 0; }
.md li.task { list-style: none; margin-left: -1.2rem; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 1.4rem 0; }
.md a { color: var(--accent); }
.md a:hover { text-decoration: none; }
.md code.md-inline-code, .md .md-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.88em; }
.md code.md-inline-code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3em; }
.md pre.md-code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.9rem; overflow-x: auto; }
.md blockquote.md-quote { margin: 0.8rem 0; padding: 0.1rem 1rem; border-left: 4px solid var(--border); color: var(--muted); }
.md .md-table-wrap { overflow-x: auto; margin: 0.8rem 0; }
.md table.md-table { border-collapse: collapse; min-width: 50%; font-size: 0.93rem; }
.md .md-table th, .md .md-table td { border: 1px solid var(--border); padding: 0.4rem 0.65rem; vertical-align: top; text-align: left; }
.md .md-table th { background: var(--surface-2); font-weight: 700; }
.md .md-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.md figure.md-figure { margin: 1rem 0; text-align: center; }
.md figure.md-figure figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; }
.md img.md-img { max-width: 100%; height: auto; border-radius: 6px; vertical-align: middle; }
.md table img.md-img { width: 56px; }
.md .md-icon { width: 1.5em; height: 1.5em; vertical-align: -0.4em; }
.md .md-seat { display: inline-flex; align-items: center; gap: 0.35rem; }
.md .md-seat .swatch { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 2px solid var(--border); display: inline-block; }
.md-callout { margin: 0.9rem 0; padding: 0.55rem 0.9rem; border-left: 4px solid var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.md-callout > :last-child { margin-bottom: 0.2rem; }
.md-callout-title { margin: 0 0 0.2rem; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; }
.md-callout.tip { border-color: #3f9a4d; background: color-mix(in srgb, #3f9a4d 10%, var(--surface)); }
.md-callout.important, .md-callout.example { border-color: #7a5bc0; background: color-mix(in srgb, #7a5bc0 10%, var(--surface)); }
.md-callout.warning, .md-callout.caution { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.md-callout.danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.md details.md-details { margin: 0.8rem 0; border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0.8rem; }
.md details.md-details > summary { cursor: pointer; font-weight: 600; padding: 0.25rem 0; }
.md .md-columns { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 0 1.4rem; }
@media (max-width: 640px) { .md .md-columns { grid-template-columns: 1fr; } }
kbd { font: 600 0.8em ui-monospace, Menlo, Consolas, monospace; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 0.35em; background: var(--surface-2); }

/* --- area maps and multi-seat tables (Cthulhu Wars) ----------------------- */
.board-wrap.wide #board, .board-wrap.wide .move-bar, .board-wrap.wide .round-bar, .board-wrap.wide .exchange,
.board-wrap.wide .inspector { width: 100%; max-width: min(100%, calc((100vh - 235px) * var(--aspect, 2))); }
.board-wrap.wide .move-bar, .board-wrap.wide .exchange, .board-wrap.wide .inspector { min-height: 0; }
.area-map { display: block; }
.area-bg { fill: #e5dcc0; stroke-linejoin: round; transition: filter 0.12s; }
.cell.area.clickable { cursor: pointer; }
.area-label {
	font: 600 12px system-ui, sans-serif; fill: #1d2a33; paint-order: stroke; stroke: rgba(255, 255, 255, 0.78);
	stroke-width: 3px; stroke-linejoin: round; pointer-events: none;
}
@media (prefers-color-scheme: dark) { .area-label { fill: #eef3f6; stroke: rgba(0, 0, 0, 0.65); } }
.area-glyph { fill: none; stroke: var(--board-line); stroke-width: 2.4; opacity: 0.5; stroke-linecap: round; stroke-linejoin: round; }
.mark-gate { fill: rgba(255, 255, 255, 0.85); stroke: #555; stroke-width: 3.5; }
.legend-swatch.gate { border-radius: 50%; background: #fff; border: 3px solid #555; }
.mark-gate.abandoned { stroke: #8d8776; stroke-dasharray: 3 3; }
.mark-desecrated { font-size: 15px; fill: #8a6a00; font-weight: 700; }
.area-target { fill: var(--target-soft); stroke: var(--target); stroke-width: 3.5; stroke-dasharray: 8 5; pointer-events: none; }
.area-selected { fill: rgba(37, 99, 235, 0.16); stroke: var(--focus); stroke-width: 3.5; pointer-events: none; }
.area-last { fill: rgba(255, 214, 10, 0.16); stroke: #e0a526; stroke-width: 3; pointer-events: none; }
.area-hint { fill: none; stroke: #e0a526; stroke-width: 4; stroke-dasharray: 6 4; pointer-events: none; }
.area-battle { fill: rgba(209, 69, 59, 0.1); stroke: #d1453b; stroke-width: 4; pointer-events: none; }
.token .piece-body { stroke-width: 2.2; }
.token .piece-detail { stroke-width: 2; }
.token-code { fill: #fff; font: 700 10px system-ui, sans-serif; pointer-events: none; }
.token.color-yellow .token-code, .token.color-white .token-code, .token.color-orange .token-code { fill: #2b2926; }
.token.color-yellow .token-code, .token.color-white .token-code, .token.color-purple .token-code { fill: #2b2926; }
.token.color-yellow .token-code, .token.color-white .token-code, .token.color-brown .token-code { fill: #2b2926; }
.token-count-bg { fill: #fff; stroke: #2b2926; stroke-width: 1.3; }
.token-count { fill: #111; font-weight: 800; font-family: system-ui, sans-serif; pointer-events: none; }
.token.token-target { cursor: pointer; filter: drop-shadow(0 0 3px #ffd60a) drop-shadow(0 0 1px #ffd60a); }
.token.token-target:hover { filter: drop-shadow(0 0 5px #ffd60a); }

.seat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; width: 100%; }
.seat-grid .seat-strip { max-width: none; }
@media (max-width: 760px) { .seat-grid { grid-template-columns: 1fr; } }
.seat-head { flex-wrap: wrap; }
.round-bar {
	display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.45rem 0.8rem; border-radius: 8px;
	background: var(--surface); border: 1px solid var(--border); font-size: 0.9rem; width: 100%;
}
.round-item.alarm { color: var(--danger); font-weight: 700; }
.faction-cards { display: flex; flex-direction: column; gap: 0.15rem; }
.faction-card > summary { cursor: pointer; font-weight: 600; font-size: 0.86rem; padding: 0.1rem 0; }
.card-rows { list-style: none; margin: 0.15rem 0 0.4rem; padding: 0; font-size: 0.82rem; }
.card-rows li { display: flex; gap: 0.4rem; padding: 0.12rem 0; line-height: 1.3; }
.card-rows .row-mark { width: 1rem; flex: none; text-align: center; color: var(--muted); }
.card-rows li.done .row-mark { color: #3f9a4d; font-weight: 800; }
.card-rows li.done { color: var(--muted); }
.card-rows li.todo { color: var(--text); }
.piece-buttons { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.piece-choice { display: inline-flex; align-items: center; gap: 0.3rem; }
.piece-choice svg { width: 1.3rem; height: 1.3rem; flex: none; }
.die.mid { border-color: #c98f1e; background: color-mix(in srgb, #e0a526 22%, var(--surface, #fff)); }
.battle .who { font-weight: 700; }
.board-wrap > * { min-width: 0; }
@media (max-width: 640px) {
	.board-wrap.wide #board { margin-inline: -0.25rem; }
	.move-bar .action-buttons button, .move-bar .piece-choice { padding: 0.35rem 0.6rem; font-size: 0.9rem; }
}

.area-glyph-badge circle { fill: #2b2a26; stroke: #fff; stroke-width: 1.5; }
.area-glyph-badge .area-glyph { stroke: #ffe9a8; opacity: 1; stroke-width: 2.4; }
.area-glyph-badge:hover circle { fill: #7a1f1f; }
.token { filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.45)); }
.token .piece-body { stroke-width: 1.8; }
.map-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.map-zoom button { width: 2rem; height: 2rem; padding: 0; justify-content: center; font-size: 1.1rem; line-height: 1; opacity: 0.9; }
#board:has(.area-map) { position: relative; }
.area-map { touch-action: none; cursor: grab; }
.area-map.panning { cursor: grabbing; }
.field[hidden] { display: none; }
.slot-row { display: grid; grid-template-columns: 1.1rem 8.5rem 1fr; gap: 0.5rem; align-items: center; }
.slot-row .swatch { width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 2px solid var(--border); display: inline-block; }
.slot-row .swatch.color-green { background: var(--piece-green-fill); }
.slot-row .swatch.color-blue { background: var(--piece-blue-fill); }
.slot-row .swatch.color-red { background: var(--piece-red-fill); }
.slot-row .swatch.color-yellow { background: var(--piece-yellow-fill); }
.slot-row .swatch.color-orange { background: var(--piece-orange-fill); }
.slot-row .swatch.color-purple { background: var(--piece-purple-fill); }
.slot-row .swatch.color-brown { background: var(--piece-brown-fill); }
.slot-row .swatch.color-white { background: var(--piece-white-fill); }
/* A seat whose cult is chosen: the name column is a list of the cults. */
.slot-row.with-faction { grid-template-columns: 1.1rem minmax(11rem, 13rem) 1fr; }
.slot-row .faction-select { font-weight: 600; min-width: 0; }
.option-flag { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.1rem; }
.book-swap .swap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.2rem; }
.book-swap .swap-row[hidden] { display: none; }
@media (max-width: 520px) {
	.slot-row.with-faction { grid-template-columns: 1.1rem 1fr; }
	.slot-row.with-faction .slot-select { grid-column: 2; }
}

/* ---- the map's look: gradients, coasts, waves ------------------------- */
.gs-pacific-0 { stop-color: #8cbfe4; } .gs-pacific-1 { stop-color: #5f95c8; }
.gs-atlantic-0 { stop-color: #98c9ec; } .gs-atlantic-1 { stop-color: #6aa5d3; }
.gs-indian-0 { stop-color: #82c4dc; } .gs-indian-1 { stop-color: #509fc4; }
.gs-arctic-0 { stop-color: #f2f9fd; } .gs-arctic-1 { stop-color: #c4deef; }
.gs-c-na-0 { stop-color: #d7e6a5; } .gs-c-na-1 { stop-color: #a9c276; }
.gs-c-sa-0 { stop-color: #c1e38f; } .gs-c-sa-1 { stop-color: #86b55f; }
.gs-c-eu-0 { stop-color: #efe2b3; } .gs-c-eu-1 { stop-color: #c9b982; }
.gs-c-me-0 { stop-color: #f5d69e; } .gs-c-me-1 { stop-color: #d8aa6b; }
.gs-c-af-0 { stop-color: #f6dc93; } .gs-c-af-1 { stop-color: #dcaf5d; }
.gs-c-as-0 { stop-color: #e3d9a8; } .gs-c-as-1 { stop-color: #bcaf79; }
.gs-c-au-0 { stop-color: #f3c896; } .gs-c-au-1 { stop-color: #d49d61; }
.gs-c-ice-0 { stop-color: #ffffff; } .gs-c-ice-1 { stop-color: #d1dfec; }
.gs-desecrated-0 { stop-color: #eadc7e; } .gs-desecrated-1 { stop-color: #b49c2c; }
@media (prefers-color-scheme: dark) {
	.gs-pacific-0 { stop-color: #3b6a96; } .gs-pacific-1 { stop-color: #1f4468; }
	.gs-atlantic-0 { stop-color: #447aa6; } .gs-atlantic-1 { stop-color: #25507a; }
	.gs-indian-0 { stop-color: #377f9a; } .gs-indian-1 { stop-color: #1c5878; }
	.gs-arctic-0 { stop-color: #8aa9bd; } .gs-arctic-1 { stop-color: #5d7f96; }
	.gs-c-na-0 { stop-color: #7f8f55; } .gs-c-na-1 { stop-color: #5a6a37; }
	.gs-c-sa-0 { stop-color: #6f9a46; } .gs-c-sa-1 { stop-color: #4a7330; }
	.gs-c-eu-0 { stop-color: #9d9065; } .gs-c-eu-1 { stop-color: #766a45; }
	.gs-c-me-0 { stop-color: #a98550; } .gs-c-me-1 { stop-color: #7f5f33; }
	.gs-c-af-0 { stop-color: #ad9142; } .gs-c-af-1 { stop-color: #876c27; }
	.gs-c-as-0 { stop-color: #958c62; } .gs-c-as-1 { stop-color: #6f6840; }
	.gs-c-au-0 { stop-color: #b27c47; } .gs-c-au-1 { stop-color: #85582b; }
	.gs-c-ice-0 { stop-color: #cfdbe6; } .gs-c-ice-1 { stop-color: #98aabd; }
	.gs-desecrated-0 { stop-color: #a89a45; } .gs-desecrated-1 { stop-color: #766410; }
}
.cell.area.tag-pacific .area-bg { fill: url(#g-pacific); }
.cell.area.tag-atlantic .area-bg { fill: url(#g-atlantic); }
.cell.area.tag-indian .area-bg { fill: url(#g-indian); }
.cell.area.tag-arctic.ocean .area-bg { fill: url(#g-arctic); }
.cell.area.tag-c-na .area-bg { fill: url(#g-c-na); }
.cell.area.tag-c-sa .area-bg { fill: url(#g-c-sa); }
.cell.area.tag-c-eu .area-bg { fill: url(#g-c-eu); }
.cell.area.tag-c-me .area-bg { fill: url(#g-c-me); }
.cell.area.tag-c-af .area-bg { fill: url(#g-c-af); }
.cell.area.tag-c-as .area-bg { fill: url(#g-c-as); }
.cell.area.tag-c-au .area-bg { fill: url(#g-c-au); }
.cell.area.tag-c-ice .area-bg { fill: url(#g-c-ice); }
.cell.area .area-bg.tint-desecrated { fill: url(#g-desecrated); }
.cell.land .area-bg { stroke: #5a4a2b; stroke-width: 1.6; filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.32)); }
.cell.ocean .area-bg { stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.5; stroke-dasharray: 8 6; }
@media (prefers-color-scheme: dark) {
	.cell.land .area-bg { stroke: #14110a; }
	.cell.ocean .area-bg { stroke: rgba(190, 220, 255, 0.35); }
}
.cell.area.clickable:hover .area-bg { filter: brightness(1.1) drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.32)); }
.shore polygon { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 10; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { .shore polygon { stroke: rgba(150, 200, 255, 0.28); } }
.area-label { font: 700 12.5px system-ui, sans-serif; fill: #1f2a1a; stroke: rgba(255, 255, 255, 0.85); stroke-width: 3.2px; }
.area-label.ocean-label { font: italic 600 13px Georgia, "Times New Roman", serif; letter-spacing: 0.1em; fill: #123a5e; stroke: rgba(255, 255, 255, 0.55); }
@media (prefers-color-scheme: dark) {
	.area-label { fill: #f2f5ee; stroke: rgba(0, 0, 0, 0.75); }
	.area-label.ocean-label { fill: #cfe6fb; stroke: rgba(0, 0, 0, 0.6); }
}
.area-target { animation: marching 1.1s linear infinite; }
@keyframes marching { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) { .area-target { animation: none; } }
.gate-chip .gate-ring { fill: #14111d; stroke-width: 3.2; stroke: #8d8776; }
.gate-chip.color-green .gate-ring { stroke: var(--piece-green-fill); }
.gate-chip.color-blue .gate-ring { stroke: var(--piece-blue-fill); }
.gate-chip.color-red .gate-ring { stroke: var(--piece-red-fill); }
.gate-chip.color-yellow .gate-ring { stroke: var(--piece-yellow-fill); }
.gate-chip.color-orange .gate-ring { stroke: var(--piece-orange-fill); }
.gate-chip.color-purple .gate-ring { stroke: var(--piece-purple-fill); }
.gate-chip.color-brown .gate-ring { stroke: var(--piece-brown-fill); }
.gate-chip.color-white .gate-ring { stroke: var(--piece-white-fill); }
.gate-chip.abandoned .gate-ring { stroke: #8d8776; stroke-dasharray: 4 3; }
.gate-chip .gate-core { fill: none; stroke: #ffffff; stroke-opacity: 0.45; stroke-width: 1.6; }
.gate-chip .gate-star { fill: #ffffff; opacity: 0.95; }
/* The unit on a Gate can be picked up; a Gate that is a destination is aimed at. */
.gate-chip.gate-pickable, .gate-chip.gate-target { cursor: pointer; }
.gate-chip.gate-pickable { filter: drop-shadow(0 0 3px #ffd60a) drop-shadow(0 0 1px #ffd60a); }
.gate-chip.gate-pickable:hover { filter: drop-shadow(0 0 5px #ffd60a); }
.gate-chip.gate-target .gate-core { stroke: var(--target); stroke-opacity: 1; stroke-width: 2.4; stroke-dasharray: 4 3; }
.gate-chip.gate-target:hover .gate-ring { stroke-width: 4.6; }
.gate-chip.abandoned .gate-star { opacity: 0.4; }
.gate-chip { filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.5)); }
.iceage-chip rect { fill: #1d4a66; stroke: #bfe4f7; stroke-width: 2; }
.iceage-chip text { fill: #e9f6ff; }
.iceage-chip { filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.5)); }
/* A faction glyph (sigil) is the cult's own ring-shaped drawing on a pale disc — not a round Gate chip. */
.area-sigil-badge { pointer-events: auto; }
.sigil-disc { fill: #26241f; fill-opacity: 0.82; stroke: #f6f1e3; stroke-width: 1.2; }
.area-sigil { paint-order: stroke; }
/* The unit standing on a Gate is drawn over its portal. */
.gate-holder .piece-body { stroke-width: 1.4; }
.desecration-chip rect { fill: #4a3d05; stroke: #e9d56a; stroke-width: 2; }
.desecration-chip text { fill: #f3e38a; }
.desecration-chip { filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, 0.5)); }
.tgs-green-0 { stop-color: color-mix(in srgb, var(--piece-green-fill) 55%, #fff); } .tgs-green-1 { stop-color: var(--piece-green-fill); } .tgs-green-2 { stop-color: color-mix(in srgb, var(--piece-green-fill) 72%, #000); }
.tgs-blue-0 { stop-color: color-mix(in srgb, var(--piece-blue-fill) 55%, #fff); } .tgs-blue-1 { stop-color: var(--piece-blue-fill); } .tgs-blue-2 { stop-color: color-mix(in srgb, var(--piece-blue-fill) 72%, #000); }
.tgs-red-0 { stop-color: color-mix(in srgb, var(--piece-red-fill) 55%, #fff); } .tgs-red-1 { stop-color: var(--piece-red-fill); } .tgs-red-2 { stop-color: color-mix(in srgb, var(--piece-red-fill) 72%, #000); }
.tgs-yellow-0 { stop-color: color-mix(in srgb, var(--piece-yellow-fill) 55%, #fff); } .tgs-yellow-1 { stop-color: var(--piece-yellow-fill); } .tgs-yellow-2 { stop-color: color-mix(in srgb, var(--piece-yellow-fill) 72%, #000); }
.tgs-orange-0 { stop-color: color-mix(in srgb, var(--piece-orange-fill) 55%, #fff); } .tgs-orange-1 { stop-color: var(--piece-orange-fill); } .tgs-orange-2 { stop-color: color-mix(in srgb, var(--piece-orange-fill) 72%, #000); }
.tgs-purple-0 { stop-color: color-mix(in srgb, var(--piece-purple-fill) 55%, #fff); } .tgs-purple-1 { stop-color: var(--piece-purple-fill); } .tgs-purple-2 { stop-color: color-mix(in srgb, var(--piece-purple-fill) 72%, #000); }
.tgs-brown-0 { stop-color: color-mix(in srgb, var(--piece-brown-fill) 55%, #fff); } .tgs-brown-1 { stop-color: var(--piece-brown-fill); } .tgs-brown-2 { stop-color: color-mix(in srgb, var(--piece-brown-fill) 72%, #000); }
.tgs-black-0 { stop-color: color-mix(in srgb, var(--piece-black-fill) 60%, #fff); } .tgs-black-1 { stop-color: var(--piece-black-fill); } .tgs-black-2 { stop-color: color-mix(in srgb, var(--piece-black-fill) 70%, #000); }
.tgs-white-0 { stop-color: #ffffff; } .tgs-white-1 { stop-color: var(--piece-white-fill); } .tgs-white-2 { stop-color: color-mix(in srgb, var(--piece-white-fill) 80%, #000); }
.token.color-green .piece-body { fill: url(#tg-green); }
.token.color-blue .piece-body { fill: url(#tg-blue); }
.token.color-red .piece-body { fill: url(#tg-red); }
.token.color-yellow .piece-body { fill: url(#tg-yellow); }
.token.color-orange .piece-body { fill: url(#tg-orange); }
.token.color-purple .piece-body { fill: url(#tg-purple); }
.token.color-brown .piece-body { fill: url(#tg-brown); }
.token.color-black .piece-body { fill: url(#tg-black); }
.token.color-white .piece-body { fill: url(#tg-white); }

.map-labels { pointer-events: none; user-select: none; }
.map-tokens .token { cursor: default; }
.map-tokens .token.token-target { cursor: pointer; }

/* ---- big screens: bigger boards, panes that fill the window -------------- */
@media (min-width: 1400px) {
	.game-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 1.25rem; }
	.game-layout.areas { grid-template-columns: minmax(0, 1fr) 430px; }
}
@media (min-width: 2200px) {
	.game-layout.areas { grid-template-columns: minmax(0, 1fr) 500px; }
}
.cult-stack { display: flex; flex-direction: column; gap: 0.5rem; }
.cult-stack .seat-strip { max-width: none; width: 100%; }
.side-panel .seat-strip .seat-head { row-gap: 0.1rem; }

/* Wide screens: the move list and the log sit right under the map. */
.below-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; margin-top: 1rem; width: 100%; align-items: start; }
.below-map .card { margin: 0; }

/* ---- round bar: the phases in order, who plays when ----------------------- */
.round-bar { align-items: center; row-gap: 0.4rem; }
.round-no { font-size: 1rem; }
.phase-steps { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0.15rem 1.35rem; }
.phase-step {
	position: relative; padding: 0.1rem 0.65rem; border-radius: 999px; border: 1px solid var(--border);
	background: var(--surface-2); color: var(--muted); font-size: 0.82rem; white-space: nowrap;
}
.phase-step + .phase-step::before {
	content: "→"; position: absolute; left: -1.15rem; top: 50%; transform: translateY(-52%); color: var(--muted); font-size: 0.85rem;
}
.phase-step.done { color: var(--text); background: transparent; }
.phase-step.current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: 0 0 0 2px var(--accent-soft); }
.phase-mark { margin-right: 0.25rem; color: #3f9a4d; font-weight: 800; }
.turn-order { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; }
.order-dir { font-weight: 600; white-space: nowrap; }
.order-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.35rem; }
.order-seat { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.order-seat.first { font-weight: 700; }
.order-sep { color: var(--muted); }
.order-seat .swatch, .log-actor .swatch {
	width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--border); display: inline-block; flex: none;
}
.order-seat .swatch.color-green, .log-actor .swatch.color-green { background: var(--piece-green-fill); }
.order-seat .swatch.color-blue, .log-actor .swatch.color-blue { background: var(--piece-blue-fill); }
.order-seat .swatch.color-red, .log-actor .swatch.color-red { background: var(--piece-red-fill); }
.order-seat .swatch.color-yellow, .log-actor .swatch.color-yellow { background: var(--piece-yellow-fill); }
.order-seat .swatch.color-orange, .log-actor .swatch.color-orange { background: var(--piece-orange-fill); }
.order-seat .swatch.color-purple, .log-actor .swatch.color-purple { background: var(--piece-purple-fill); }
.order-seat .swatch.color-brown, .log-actor .swatch.color-brown { background: var(--piece-brown-fill); }
.order-seat .swatch.color-white, .log-actor .swatch.color-white { background: var(--piece-white-fill); }
.seat-order-note { margin: 0.1rem 0.2rem 0; }

/* The direction of play, chosen between two spelled-out orders. */
.direction-choice, .action-buttons:has(.direction-button) { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.direction-button {
	display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left; padding: 0.4rem 0.7rem;
	border: 2px solid var(--accent); background: var(--surface); height: auto; line-height: 1.3;
}
.direction-button:hover { background: var(--accent-soft); }
.direction-button .dir-head { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.direction-button .dir-glyph { font-size: 1.2rem; line-height: 1; }

/* Elder Signs of a cult: private values for their owner, counts for the rest. */
.sign-row, .sign-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0.15rem 0 0.25rem; }
.sign-group { display: inline-flex; gap: 0.25rem; }
.sign-chip {
	display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.3rem;
	border-radius: 5px; font-weight: 800; font-size: 0.85rem; border: 2px solid var(--border); font-variant-numeric: tabular-nums;
}
.sign-chip.facedown { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, var(--border) 4px, var(--border) 8px); color: var(--muted); }
.sign-chip.facedown.own { background: var(--surface); color: var(--text); border-color: var(--accent); border-style: dashed; }
.sign-chip.shown { background: #e7d9a6; color: #3b2f05; border-color: #8a6f1d; }
@media (prefers-color-scheme: dark) { .sign-chip.shown { background: #6b5a1c; color: #fbefc0; border-color: #c9a227; } }

/* Units: marked when a spellbook of their cult enhances them; clickable. */
.piece-eye { fill: #1b1a17; stroke: none; opacity: 0.9; pointer-events: none; }
.token .unit-icon .piece-body { stroke-linejoin: round; }
.token-star { fill: #ffd24a; stroke: #2a1f00; stroke-width: 1.1; stroke-linejoin: round; pointer-events: none; }
.token-inspect-ring { fill: rgba(74, 163, 255, 0.22); stroke: #1e7bff; stroke-width: 3; stroke-dasharray: 5 3; pointer-events: none; }
.map-tokens .token { cursor: pointer; }
.token:focus-visible { outline: none; }
.token:focus-visible .piece-body { stroke: var(--focus); stroke-width: 3.4; }
.unit-info { margin: 0.5rem 0 0; padding: 0.6rem 0.8rem; width: 100%; max-width: 46rem; }
.board-wrap.wide .unit-info { max-width: min(100%, calc((100vh - 235px) * var(--aspect, 2))); }
.unit-info-head { display: flex; align-items: center; gap: 0.6rem; }
.unit-info-head svg { flex: none; }
.unit-info-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.unit-info .icon { padding: 0.1rem 0.5rem; font-size: 1.2rem; line-height: 1; }
.unit-stats { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; margin: 0.5rem 0 0.3rem; }
.unit-stats > div { display: flex; flex-direction: column; }
.unit-stats dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.unit-stats dd { margin: 0; font-weight: 700; }
.unit-text { margin: 0.2rem 0 0.4rem; }
.unit-books-title { margin: 0.4rem 0 0; }
.unit-books li { align-items: flex-start; }

/* The log: cult names in their colours, the verb in bold. */
.events { font-size: 0.86rem; max-height: 22rem; overflow: auto; }
.log-actor { display: flex; align-items: center; gap: 0.4rem; margin: 0.45rem 0 0.1rem; padding-top: 0.3rem; border-top: 1px solid var(--border); }
.log-actor:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.log-turn { margin: 0 0 0.2rem; padding-left: 1.3rem; list-style: none; }
.log-turn li { margin: 0.12rem 0; }
.log-turn li.auto-play { border-left: 2px solid var(--accent); padding-left: 0.4rem; margin-left: -0.45rem; }
.log-turn li.log-banner {
	margin: 0.35rem 0; padding-left: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.log-verb { font-weight: 800; }
.log-fac { font-weight: 700; }
.log-fac.color-green { color: #1f7a33; }
.log-fac.color-blue { color: #1f5fb0; }
.log-fac.color-red { color: #b3342b; }
.log-fac.color-yellow { color: #8a6a00; }
.log-fac.color-orange { color: #b35a0a; }
.log-fac.color-purple { color: #6d3fb3; }
.log-fac.color-brown { color: #7d5128; }
.log-fac.color-white { color: #5a6f80; }
@media (prefers-color-scheme: dark) {
	.log-fac.color-green { color: #6fd185; }
	.log-fac.color-blue { color: #7db2ff; }
	.log-fac.color-red { color: #ff8a78; }
	.log-fac.color-yellow { color: #f0cf5a; }
	.log-fac.color-orange { color: #ffb066; }
	.log-fac.color-purple { color: #c9a8ff; }
	.log-fac.color-brown { color: #e0b88f; }
	.log-fac.color-white { color: #cfe0ee; }
}

/* ---- the Ritual of Annihilation track ---------------------------------------- */
.ritual { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.ritual-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.ritual-track { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.22rem; list-style: none; margin: 0; padding: 0; }
.ritual-step, .ritual-end {
	width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; flex: none;
	border-radius: 50%; border: 2px solid var(--border); background: var(--surface); color: var(--text);
	font-weight: 800; font-size: 0.8rem; font-variant-numeric: tabular-nums; line-height: 1;
}
.ritual-step.past { background: transparent; color: var(--muted); border-style: dashed; text-decoration: line-through; opacity: 0.62; }
.ritual-step.next {
	background: #f3d36b; border-color: #8a6a00; color: #2a1f00; transform: translateY(-1px);
	box-shadow: 0 0 0 3px rgba(243, 211, 107, 0.5);
}
.ritual-end { border-radius: 6px; color: var(--muted); background: var(--surface-2); font-size: 0.95rem; }
.ritual-end.reached { background: var(--danger); border-color: var(--danger); color: #fff; }
.ritual.instant .ritual-step { opacity: 0.55; }
.ritual-note.alarm { color: var(--danger); font-weight: 700; }

/* ---- the faction beside a player's name ---------------------------------------------- */
.seat-strip .seat-faction { white-space: nowrap; }

/* ---- the bar at the top: Rules and Options ------------------------------------------ */
.topbar-actions { display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar-button { font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 8px; }
.topbar-button[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.topbar .tagline { white-space: nowrap; }
@media (max-width: 560px) {
	.topbar { flex-wrap: wrap; gap: 0.4rem 0.6rem; padding: 0.5rem 0.75rem; }
	.topbar .spacer { display: none; }
	.topbar-actions { order: 3; margin-left: auto; }
	.options-window { top: 2.8rem; right: 0.4rem; left: 0.4rem; width: auto; }
}
td svg.legend-marker, .md svg.legend-marker { width: 28px; height: 28px; vertical-align: middle; }

/* ---- the game options window ----------------------------------------------------------- */
.options-window {
	position: fixed; top: 3.3rem; right: 0.8rem; z-index: 60;
	width: min(26rem, calc(100vw - 1.6rem)); max-height: calc(100vh - 4.4rem);
	display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.options-window[hidden] { display: none; }
.options-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); flex: none; }
.options-head h2 { margin: 0; font-size: 1.05rem; flex: 1; }
.options-close { font-size: 1.3rem; line-height: 1; padding: 0.05rem 0.55rem; }
.options-body { overflow: auto; padding: 0.2rem 0.8rem 0.8rem; }
.options-section { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.options-section:last-child { border-bottom: 0; }
.options-section[hidden] { display: none; }
.options-section h3 { margin: 0 0 0.4rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.options-section-body { display: flex; flex-direction: column; gap: 0.45rem; }
.options-section-body .row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.options-section-body:empty { display: none; }

/* The reactions: when to be asked, a list of players and what the choice means. */
#options-reactions .dock-name { color: var(--text); }
#options-reactions .dock-intro { margin: 0; }
#options-reactions.never-asked { border-left: 3px solid var(--warn); padding-left: 0.55rem; }
#options-reactions .dock-state, #options-autoplay .dock-state { color: var(--muted); margin: 0; }
#options-reactions.never-asked .dock-state { color: var(--text); }
.ask-row { display: flex; align-items: center; gap: 0.5rem; }
.help-button {
	flex: none; width: 1.4rem; height: 1.4rem; padding: 0; border-radius: 50%; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 0.85rem; cursor: pointer;
	background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.help-button:hover { background: var(--accent-soft); border-color: var(--accent); }
.help-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
dialog.help-dialog { max-width: min(36rem, 92vw); }
dialog.help-dialog p, dialog.help-dialog li { line-height: 1.45; }
dialog.help-dialog li { margin: 0.35rem 0; }
.autoplay-timeout { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; }
.autoplay-field { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.85rem; }
.autoplay-field input[type="number"] { width: 3rem; padding: 0.2rem 0.25rem; }
#options-autoplay.on { border-left: 3px solid var(--accent); padding-left: 0.55rem; }
#options-reactions .reactions > summary { cursor: pointer; font-weight: 600; padding: 0.15rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); list-style: none; }
#options-reactions .reactions > summary::-webkit-details-marker { display: none; }
#options-reactions .reactions > summary::after { content: " ▾"; opacity: 0.7; }
#options-reactions .reactions[open] > summary::after { content: " ▴"; }
#options-reactions .reactions > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#options-reactions .auto-pass-list { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 0.5rem 0.2rem 0.1rem; }
.auto-pass-shortcuts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-left: 0.5rem; }
.auto-pass-option { display: inline-flex; align-items: center; gap: 0.4rem; }
.auto-pass-option .swatch { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid var(--border); display: inline-block; flex: none; }
.auto-pass-option .swatch.color-green { background: var(--piece-green-fill); }
.auto-pass-option .swatch.color-blue { background: var(--piece-blue-fill); }
.auto-pass-option .swatch.color-red { background: var(--piece-red-fill); }
.auto-pass-option .swatch.color-yellow { background: var(--piece-yellow-fill); }
.auto-pass-option .swatch.color-orange { background: var(--piece-orange-fill); }
.auto-pass-option .swatch.color-purple { background: var(--piece-purple-fill); }
.auto-pass-option .swatch.color-brown { background: var(--piece-brown-fill); }
.auto-pass-option .swatch.color-white { background: var(--piece-white-fill); }

/* ---- pictograms, hover cards, the summon buttons, the history tabs ------------------ */
.stat-icon { vertical-align: -0.22em; flex: none; }
.stat-fill { fill: currentColor; }
.stat-line { fill: none; stroke: currentColor; stroke-width: 2; }
.stat-cut { fill: var(--surface); }
.stat-power { color: #c89200; }
.stat-doom { color: #b0443a; }
.stat-signs { color: #9a7b1a; }
.stat-gates { color: #2f8a6a; }
.stat-books { color: #5668a8; }
.stat-desecrations { color: #b8941f; }
.seat-strip .score.stat { display: inline-flex; align-items: center; gap: 0.25rem; }
.seat-stats { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0.6rem; margin-left: auto; }
.card-rows li.info-row { display: block; }
.round-item.bag { display: inline-flex; align-items: center; gap: 0.3rem; }

.hover-card {
	position: fixed; z-index: 120; max-width: min(23rem, calc(100vw - 16px)); pointer-events: none;
	padding: 0.6rem 0.75rem; background: var(--surface); color: var(--text);
	border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); font-size: 0.88rem;
}
.unit-tip-head { display: flex; align-items: center; gap: 0.6rem; }
.unit-tip-title { display: flex; flex-direction: column; line-height: 1.25; }
.hover-card .unit-stats { margin: 0.45rem 0 0.25rem; }
.hover-card .card-rows { margin: 0.2rem 0 0; }
.unit-books-title { margin: 0.4rem 0 0; }

.summon-button { display: inline-flex; align-items: center; gap: 0.4rem; }
.summon-button svg { flex: none; }
.summon-cost {
	display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.02rem 0.4rem; border-radius: 999px;
	background: var(--surface-2); border: 1px solid var(--border); font-weight: 800; font-variant-numeric: tabular-nums;
}
.undo-action { margin-left: 0.3rem; }

.pool-icons { display: flex; flex-wrap: wrap; gap: 0.1rem; padding: 0.15rem 0 0.3rem; }
.pool-unit { display: inline-flex; padding: 0.1rem; border-radius: 6px; cursor: help; }
.pool-unit:hover, .pool-unit:focus-visible { background: var(--accent-soft); outline: none; }
/* A unit that is not in the pool — on the map, captured, asleep — is greyed out. */
.pool-unit.away { opacity: 0.32; filter: grayscale(1); }
.pool-unit.away:hover, .pool-unit.away:focus-visible { opacity: 0.6; }
.unit-where { margin: 0.3rem 0 0; }
/* The spellbook pictogram: in colour when earned (or a requirement met), greyed out when not. */
.spell-mark { flex: none; vertical-align: -0.2em; }
.spell-mark.on { color: #4a62b8; }
.spell-mark.off { color: var(--muted); opacity: 0.5; }
.card-rows .row-mark { display: inline-flex; align-items: center; margin-right: 0.25rem; }
.action-buttons button.has-spell { display: inline-flex; align-items: center; gap: 0.35rem; }
.action-source { display: flex; align-items: center; gap: 0.3rem; margin: 0.4rem 0 0; }
/* A section with nothing to open: a heading without the disclosure marker. */
.faction-static { font-weight: 600; font-size: 0.86rem; padding: 0.1rem 0 0.1rem 1rem; }
.pool-wrap { display: flex; flex-direction: column; gap: 0.2rem; }
.captured-zone { padding: 0.1rem 0 0.2rem; border-top: 1px dashed var(--border); }
.zone-title { margin: 0.15rem 0 0; }
.pool-unit.captured { cursor: help; }
.unit-abilities { margin: 0.35rem 0 0; }
.unit-ability { margin: 0.2rem 0; }
.awaken-steps { margin: 0.15rem 0 0.2rem; padding-left: 1.2rem; }
.awaken-steps li { margin: 0.1rem 0; }
.unit-enter { margin: 0.35rem 0 0; }
.action-cost { margin: 0.3rem 0 0; }

.card-tabs { display: flex; gap: 0.2rem; margin: -0.2rem 0 0.5rem; border-bottom: 1px solid var(--border); }
.card-tab { border: 1px solid transparent; border-bottom: 0; background: transparent; padding: 0.3rem 0.8rem; border-radius: 8px 8px 0 0; font-weight: 600; color: var(--muted); }
.card-tab.active { background: var(--surface-2); border-color: var(--border); color: var(--text); margin-bottom: -1px; }
.card-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* ---- chat -------------------------------------------------------------------------- */
.chat .chat-log {
	list-style: none; margin: 0; padding: 0; max-height: 15rem; min-height: 4rem; overflow-y: auto;
	display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; overflow-wrap: anywhere;
}
.chat-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45rem; }
.chat-who { font-weight: 800; }
.chat-who.color-green { color: #1f7a33; }
.chat-who.color-blue { color: #1f5fb0; }
.chat-who.color-red { color: #b3342b; }
.chat-who.color-yellow { color: #8a6a00; }
.chat-who.color-orange { color: #b35a0a; }
.chat-who.color-purple { color: #6d3fb3; }
.chat-who.color-brown { color: #7d5128; }
.chat-who.color-white { color: #5a6f80; }
.chat-line.spectator .chat-who { color: var(--muted); font-weight: 600; font-style: italic; }
.chat-text { flex: 1 1 8rem; }
.chat-time { margin-left: auto; font-variant-numeric: tabular-nums; }
.chat-entry { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.chat-entry .chat-input { flex: 1 1 9rem; min-width: 0; }
.chat-entry .chat-name { flex: 1 1 100%; }
.chat-notice:empty { display: none; }
.emoji-button { padding: 0.25rem 0.5rem; font-size: 1.1rem; line-height: 1; }
.emoji-panel {
	margin-top: 0.5rem; padding: 0.4rem 0.5rem; max-height: 13rem; overflow-y: auto;
	border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.emoji-panel[hidden] { display: none; }
.emoji-group-title { margin: 0.3rem 0 0.15rem; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; }
.emoji-grid { display: flex; flex-wrap: wrap; gap: 0.1rem; }
.emoji-cell { padding: 0.15rem 0.3rem; font-size: 1.25rem; line-height: 1.2; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.emoji-cell:hover, .emoji-cell:focus-visible { background: var(--accent-soft); border-color: var(--accent); }
.chat-unread[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
	.chat-who.color-green { color: #6fd185; }
	.chat-who.color-blue { color: #7db2ff; }
	.chat-who.color-red { color: #ff8a78; }
	.chat-who.color-yellow { color: #f0cf5a; }
	.chat-who.color-orange { color: #ffb066; }
	.chat-who.color-purple { color: #c9a8ff; }
	.chat-who.color-brown { color: #e0b88f; }
	.chat-who.color-white { color: #cfe0ee; }
}

/* ---- the lobby ----------------------------------------------------------------------- */
.lobby { padding: 1rem 1.1rem; }
.lobby-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lobby-head h2 { margin: 0; flex: 1 1 12rem; }
.lobby-invite { margin: 0.9rem 0 0.4rem; }
.lobby-invite .share-row { margin-top: 0.3rem; }
.lobby-seats { list-style: none; margin: 0.8rem 0 0.4rem; padding: 0; display: grid; gap: 0.45rem; }
.lobby-seat {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; padding: 0.5rem 0.7rem;
	border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.lobby-seat.taken { background: var(--surface); }
.lobby-seat.mine { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lobby-seat .swatch { width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 2px solid var(--border); flex: none; }
.lobby-faction { font-weight: 700; min-width: 8rem; }
.lobby-cult-select { font-weight: 700; min-width: 8rem; max-width: 11rem; }
.lobby-who { flex: 1 1 10rem; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-width: 0; }
.lobby-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.lobby-bot-select { max-width: 9rem; }
.lobby-join { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; align-items: center; }
.lobby-join input { flex: 1 1 10rem; }
.lobby-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.9rem; }
.lobby-foot .grow { flex: 1; }
.lobby-settings { margin: 0.7rem 0 0; }
.badge.host { color: var(--accent); border-color: var(--accent); }
.game-layout.lobby-layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
	.game-layout.lobby-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* ---- practice batches ------------------------------------------------------- */

.practice-steps { display: flex; gap: 0.4rem; list-style: none; padding: 0; margin: 0.8rem 0; flex-wrap: wrap; }
.practice-steps li button { border-radius: 999px; padding: 0.2rem 0.8rem; font-size: 0.85rem; }
.practice-steps li.on button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.practice-steps li.done button { border-color: var(--accent); }
.practice-seats { display: grid; gap: 0.5rem; }
.practice-seat { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.practice-swatch { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1px solid var(--border); flex: none; }
.practice-run { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.8rem; }
.practice-summary { border: 1px dashed var(--border); border-radius: 8px; padding: 0.6rem 0.8rem; display: grid; gap: 0.25rem; }
.practice-step { margin-bottom: 0.8rem; }
#practice-wizard { margin-top: 0.8rem; }
.practice-recent { list-style: none; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0.25rem; }
.practice-recent li { display: flex; justify-content: space-between; gap: 1rem; }
input[type="number"] {
	font: inherit; color: inherit; background: var(--surface);
	border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.55rem; min-width: 0; width: 7rem;
}
.practice-run input[type="number"] { width: 100%; }
.batch-status { font-size: 0.78rem; font-weight: 700; padding: 0 0.5rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.batch-status.running, .batch-status.queued { border-color: var(--warn); color: var(--warn); }
.batch-status.done { border-color: var(--accent); color: var(--accent); }
.batch-status.failed, .batch-status.cancelled, .batch-status.interrupted { border-color: var(--danger); color: var(--danger); }

/* ---- batch reports -------------------------------------------------------------- */

svg.chart { width: 100%; height: auto; max-width: 760px; display: block; }
svg.chart .grid { stroke: var(--border); stroke-width: 1; }
svg.chart .marker { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
svg.chart .whisker line { stroke: var(--text); stroke-width: 1.5; }
svg.chart .line { fill: none; stroke-width: 2.2; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.report-grid > .card { margin-bottom: 0; }
.batch-stat-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1rem; }
.batch-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.9rem; min-width: 7.5rem; }
.batch-stat b { display: block; font-size: 1.35rem; }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0.4rem 0; font-size: 0.85rem; }
.legend i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; margin-right: 0.3rem; vertical-align: -1px; border: 1px solid var(--border); }
.progress { height: 0.6rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); transition: width 0.3s; }
table.data { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
table.data th, table.data td { padding: 0.3rem 0.5rem; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th { font-size: 0.78rem; color: var(--muted); font-weight: 700; }
table.data th.sortable { cursor: pointer; }
table.data tr.faint td { color: var(--muted); }
.table-scroll { overflow-x: auto; }
.delta.up { color: var(--accent); font-weight: 700; }
.delta.down { color: var(--danger); font-weight: 700; }
.bar-cell { display: inline-block; height: 0.55rem; border-radius: 3px; background: var(--accent); vertical-align: middle; min-width: 1px; }
td.heat { text-align: center !important; min-width: 3.2rem; }
.batch-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0.5rem 0; }
.batch-tabs button { border-radius: 999px; padding: 0.2rem 0.8rem; }
.batch-tabs button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.batch-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.batch-list li { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.batch-events { max-height: 22rem; overflow: auto; font-family: ui-monospace, monospace; font-size: 0.8rem; columns: 3 14rem; }
.dots i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.15rem; border: 1px solid var(--border); vertical-align: -1px; }

tr.weak td { color: var(--danger, #c0392b); font-weight: 600; }

/* A new round in the log: a rule across the pane with the round named in it. */
.log-round { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.5rem; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.log-round::before, .log-round::after { content: ""; flex: 1; border-top: 2px solid var(--border); }

/* Where "since your last move" starts in the full history. */
.log-since { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.5rem; color: var(--accent); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.log-since::before, .log-since::after { content: ""; flex: 1; border-top: 2px solid var(--accent); }

/* Present / away: the colour box beside a player's name becomes a round eye
   while that player says they are watching the game. Their own box is the switch. */
.seat-strip .swatch.present { border-radius: 50%; box-shadow: 0 0 0 2px var(--accent-soft), 0 0 7px var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.seat-strip .swatch .eye { display: inline-flex; line-height: 0; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)); }
/* The switch is a button but must take exactly the room of the plain box. */
.seat-strip button.swatch.presence-toggle { display: inline-block; box-sizing: content-box; width: 1.1rem; height: 1.1rem; padding: 0; margin: 0; min-width: 0; border-width: 2px; border-radius: 4px; gap: 0; font: inherit; line-height: 0; cursor: pointer; }
.seat-strip button.swatch.presence-toggle.present { display: inline-flex; border-radius: 50%; }
button.swatch.presence-toggle:hover { filter: brightness(1.12); transform: scale(1.08); }
button.swatch.presence-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- the phone layout --------------------------------------------------------------------
   One full-screen view at a time under a slim top bar, swiped between, with a bar of
   large buttons at the bottom (see js/mobile.js and renderMobile in js/game.js). */
body.m-mode { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body.m-mode .topbar { flex: none; padding: 0.3rem 0.6rem; padding-top: calc(0.3rem + env(safe-area-inset-top)); padding-left: calc(0.6rem + env(safe-area-inset-left)); padding-right: calc(0.6rem + env(safe-area-inset-right)); gap: 0.4rem; min-height: 0; }
body.m-mode .topbar .brand { font-size: 0; gap: 0; }
body.m-mode .topbar .brand .logo { margin: 0; }
body.m-mode .topbar .tagline { font-size: 0.78rem; }
body.m-mode .topbar-button { min-height: 2.5rem; padding: 0.3rem 0.8rem; }
body.m-mode main.page { flex: 1; min-height: 0; padding: 0; margin: 0; max-width: none; width: 100%; }
body.m-mode #game-root { height: 100%; }
body.m-mode button, body.m-mode select, body.m-mode summary { touch-action: manipulation; }

.m-shell { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.m-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m-track::-webkit-scrollbar { display: none; }
.m-page { flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; overscroll-behavior-y: contain; box-sizing: border-box; padding: 0 max(0.6rem, env(safe-area-inset-left)); }
.m-stack { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.6rem 0 1rem; min-width: 0; }
.m-stack > h2 { margin: 0.2rem 0 0; font-size: 1.15rem; }
.m-stack .card, .m-stack .seat-strip { margin: 0; max-width: none; }

/* The map page: status on top, the map filling what is left, the controls under it. */
.m-page-map { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.m-map-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.m-map-page > .status-bar { flex: none; margin: 0; border-radius: 0; padding: 0.4rem 0.6rem; font-size: 0.92rem; }
.m-board-box { position: relative; flex: 1; min-height: 8rem; display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
body.m-mode .m-board-box #board { width: 100%; height: 100%; max-width: none; }
body.m-mode .m-board-box #board svg { width: 100%; height: 100%; touch-action: none; }
.m-edge { position: absolute; top: 0; bottom: 0; width: 22px; touch-action: pan-x; z-index: 3; }
.m-edge.left { left: 0; }
.m-edge.right { right: 0; }
.m-dock { flex: none; max-height: 38%; overflow-y: auto; padding: 0.4rem 0.6rem; border-top: 1px solid var(--border); background: var(--surface); }
.m-dock .move-bar { margin: 0; }
body.m-mode .map-zoom { right: 30px; top: 8px; }
body.m-mode .map-zoom button { width: 2.75rem; height: 2.75rem; font-size: 1.3rem; }

/* Large touch targets for everything that is tapped to play. */
body.m-mode .move-bar button, body.m-mode .move-bar .piece-choice, body.m-mode .action-buttons button { min-height: 2.75rem; padding: 0.5rem 0.85rem; font-size: 1rem; }
body.m-mode .history-controls button { min-height: 2.75rem; }
body.m-mode input, body.m-mode select, body.m-mode textarea { font-size: 16px; }
body.m-mode .card-tab { min-height: 2.75rem; }
body.m-mode .round-bar { flex-wrap: wrap; }

/* A single seat card gets the whole page. */
.m-page .seat-strip { width: 100%; box-sizing: border-box; }
.m-page .events { max-height: none; }

/* The bar of views, within thumb's reach. */
.m-chips { flex: none; display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.35rem 0.6rem; border-top: 1px solid var(--border); background: var(--surface); scrollbar-width: none; }
.m-chips[hidden] { display: none; }
.m-chip { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; border-radius: 999px; padding: 0.2rem 0.8rem; font-size: 0.9rem; }
.m-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.m-chip .swatch { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--piece-white-stroke); }
.m-nav { flex: none; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--border); background: var(--surface); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.m-nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; min-height: 3.4rem; padding: 0.25rem 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-weight: 600; }
.m-nav-item.on { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.m-nav-icon { font-size: 1.35rem; line-height: 1; }
.m-nav-label { font-size: 0.68rem; }
.m-nav-badge { position: absolute; top: 0.25rem; left: 50%; margin-left: 0.55rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem; box-sizing: border-box; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.7rem; line-height: 1.1rem; text-align: center; }
.m-nav-badge[hidden] { display: none; }
.m-nav-dot { position: absolute; top: 0.45rem; left: 50%; margin-left: 0.6rem; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--accent); }
.pulse { animation: m-pulse 1.4s ease-in-out infinite; }
@keyframes m-pulse { 50% { transform: scale(1.35); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* The options and rules windows become full-height sheets. */
body.m-mode .options-window { top: 0; left: 0; right: 0; bottom: 0; width: auto; max-height: none; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 380px) { .m-nav-label { font-size: 0.62rem; } }

/* The chat and the log use the whole page; the status line on the map stays short. */
.m-page-chat .m-stack, .m-page-log .m-stack { height: 100%; box-sizing: border-box; }
.m-page-chat .m-stack > .card, .m-page-log .m-stack > .card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.m-page-chat .chat .chat-log { flex: 1; max-height: none; min-height: 0; }
.m-page-log .history-pane { flex: 1; min-height: 0; overflow-y: auto; }
.m-page-log .events { max-height: none; }
.m-map-page > .status-bar .message { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Move cards (Onitama) */
.cards-panel { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 10px 0; align-items: flex-start; }
.card-group-title { margin-bottom: 4px; }
.card-group.to-move .card-group-title { font-weight: 700; color: var(--text); }
.card-row { display: flex; gap: 8px; }
.move-card { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font: inherit; color: inherit; }
button.move-card { cursor: pointer; }
.move-card.playable { border-color: #3f9a55; box-shadow: 0 0 0 1px #3f9a55; }
.move-card.chosen { background: color-mix(in srgb, #3f9a55 25%, var(--surface-2)); border-color: #2f7d44; box-shadow: 0 0 0 2px #2f7d44; }
.card-name { font-size: 0.8rem; font-weight: 600; }
.card-grid { display: grid; grid-template-columns: repeat(5, 11px); grid-template-rows: repeat(5, 11px); gap: 1px; background: var(--border); padding: 1px; border-radius: 3px; }
.card-grid i { background: var(--surface); display: block; }
.card-grid i.reach { background: #3f9a55; }
.card-grid i.centre { background: var(--text); }
.square-badge { pointer-events: none; font-weight: 700; }

/* Hive: tiles on a table, no board. */
.free-board { background: transparent; }
.free-board .cell-bg.free-slot { fill: color-mix(in srgb, var(--surface-2) 70%, transparent); stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.free-board .piece { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.free-board .target-ring { stroke-width: 3; }
.height-badge { fill: #2b2926; stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.height-badge-text { fill: #fff; font: 700 12px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.piece .piece-body.bug-queen { stroke: #e0a800; stroke-width: 3.5; }
.piece .piece-body.bug-beetle { stroke: #7b4fb0; stroke-width: 3.5; }
.piece .piece-body.bug-spider { stroke: #8a5a2b; stroke-width: 3.5; }
.piece .piece-body.bug-grasshopper { stroke: #3e9a4a; stroke-width: 3.5; }
.piece .piece-body.bug-ant { stroke: #2f6fd0; stroke-width: 3.5; }
.piece .piece-body.bug-mosquito { stroke: #8d8d8d; stroke-width: 3.5; }
.piece .piece-body.bug-ladybug { stroke: #d0372d; stroke-width: 3.5; }
.piece .piece-body.bug-pillbug { stroke: #2aa198; stroke-width: 3.5; }
.ring-hole { fill: var(--board-light); stroke: var(--board-line); stroke-width: 1.5; pointer-events: none; }

/* ---- Card games: the card table, cards, and the board of choices ------------ */
.card-table { --cw: 62px; --ch: 88px; display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.ct-others { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-seat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; min-width: 150px; }
.ct-seat.me { border-color: var(--accent); }
.ct-seat.to-move { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent); }
.ct-seat-name { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ct-badge { font: 700 11px system-ui, sans-serif; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; }
.ct-badge.bonus { background: #f3dc8a; }
.ct-badge.team { background: var(--accent-soft); }
.ct-zones { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.ct-center { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: center; align-items: flex-start; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border-radius: 12px; padding: 10px; min-height: calc(var(--ch) + 40px); }
.ct-zone-label { margin-bottom: 2px; }
.zone { display: flex; align-items: flex-start; min-height: calc(var(--ch) * 0.6); }
.pc-slot { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.pc-caption { font: 600 11px system-ui, sans-serif; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.layout-fan .pc-slot + .pc-slot { margin-left: calc(var(--cw) * -0.58); }
.layout-fan .pc-btn:hover, .layout-fan .pc-slot:hover { z-index: 3; }
.layout-fan .pc-btn.playable:hover .pcard { transform: translateY(-10px); }
.layout-row { gap: 8px; flex-wrap: wrap; }
.layout-splay .pc-slot + .pc-slot { margin-left: calc(var(--cw) * -0.78); }
.layout-grid { gap: 6px; flex-wrap: wrap; }
.zone.counted .pc-slot + .pc-slot { margin-left: calc(var(--cw) * -0.85); }
.pcard { position: relative; display: inline-block; width: var(--cw); height: var(--ch); border-radius: 7px; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .12s; flex: none; }
.pcard.face { background: #fffdf6; border: 1.5px solid color-mix(in srgb, var(--suit, #555) 60%, #fff); color: var(--suit, #333); font-family: Georgia, serif; }
.pcard.back { background: repeating-linear-gradient(45deg, var(--back, #5b4a8a), var(--back, #5b4a8a) 6px, color-mix(in srgb, var(--back, #5b4a8a) 80%, #fff) 6px, color-mix(in srgb, var(--back, #5b4a8a) 80%, #fff) 12px); border: 2px solid #fff; display: inline-flex; align-items: center; justify-content: center; }
.pc-back-text { color: #fff; font: 800 11px system-ui, sans-serif; letter-spacing: .08em; transform: rotate(-35deg); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pc-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 700; }
.pc-corner.top { top: 4px; left: 5px; }
.pc-corner.bottom { bottom: 4px; right: 5px; transform: rotate(180deg); }
.pc-rank { font-size: 15px; }
.pc-pip { font-size: 12px; }
.pc-mid { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 30px; opacity: .85; gap: 2px; padding: 22px 8px; }
.pc-text { position: absolute; left: 4px; right: 4px; bottom: 20px; font: 600 8px system-ui, sans-serif; text-align: center; }
.pc-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 7px; }
.pc-btn.playable .pcard { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 8px var(--accent), 0 1px 3px rgba(0,0,0,.35); }
.pc-btn:focus-visible { outline: 2px solid var(--focus); }
.pile { position: relative; display: inline-block; }
.pile:not(.empty) { box-shadow: 2px 2px 0 -1px #fff, 3px 3px 0 0 rgba(0,0,0,.3), 5px 5px 0 -1px #fff, 6px 6px 0 0 rgba(0,0,0,.25); border-radius: 7px; }
.pile.empty { display: inline-block; width: var(--cw); height: var(--ch); border: 2px dashed var(--border); border-radius: 7px; }
.pile-count { position: absolute; right: -6px; bottom: -8px; background: #2b2926; color: #fff; font: 700 11px system-ui, sans-serif; border-radius: 999px; padding: 1px 6px; }
.zone-empty { align-self: center; padding: 0 6px; }
@keyframes pc-flip { from { transform: rotateY(90deg) scale(.9); } to { transform: rotateY(0) scale(1); } }
@keyframes pc-deal { from { transform: translateY(-26px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.pcard.flip-in { animation: pc-flip .35s ease-out; }
.pcard.deal-in { animation: pc-deal .3s ease-out both; animation-delay: calc(var(--i, 0) * 25ms); }
@media (prefers-reduced-motion: reduce) { .pcard.flip-in, .pcard.deal-in { animation: none; } }
.ct-grid-wrap { margin: 8px 0; }
.choice-grid { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px; }
.cg-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cg-title { width: 96px; font-weight: 700; font-size: 13px; }
.cg-boxes { display: flex; gap: 6px; flex-wrap: wrap; }
.cg-box { position: relative; display: inline-flex; align-items: center; gap: 5px; min-width: 64px; justify-content: center; padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface-2); font: 600 13px system-ui, sans-serif; color: var(--text); }
.cg-box.clickable { cursor: pointer; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cg-box.clickable:hover { background: var(--accent-soft); }
.cg-box.crossed { opacity: .5; background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 5px, var(--border) 5px, var(--border) 6px); text-decoration: line-through; }
.cg-box.chosen { background: #f3dc8a; border-color: #b7791f; box-shadow: 0 0 0 2px #f3dc8a; }
.cg-box.covered { opacity: .35; background: #999; color: #fff; }
.cg-cross { position: absolute; top: -6px; right: 4px; color: var(--danger); font-size: 16px; text-decoration: none; }
.cg-by { position: absolute; bottom: -4px; left: 4px; width: 9px; height: 9px; }
.cg-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.3); }
@media (max-width: 700px) { .card-table { --cw: 50px; --ch: 72px; } .pc-rank { font-size: 12px; } .pc-mid { font-size: 22px; padding: 18px 6px; } .cg-title { width: 100%; } }
.ct-seat.me .layout-fan .pc-slot + .pc-slot { margin-left: calc(var(--cw) * -0.38); }

/* ---- the home page: top-bar icons, tabs, the setup of a game ---------------------------- */
.topbar-icon {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 10px; color: var(--text);
	background: transparent; border: 1px solid var(--border); text-decoration: none; cursor: pointer;
}
.topbar-icon:hover { border-color: var(--muted); }
.topbar-icon[aria-current="page"], .topbar-icon[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.icon-badge {
	position: absolute; top: -0.4rem; right: -0.4rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.28rem;
	border-radius: 999px; background: #e8590c; color: #fff; font-size: 0.72rem; font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--surface); box-sizing: content-box;
}
.icon-badge[hidden] { display: none; }

dialog.bar-dialog { width: min(40rem, 94vw); max-height: 88vh; overflow-y: auto; }
dialog.bar-dialog .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
dialog.bar-dialog .dialog-head h2 { margin: 0; }
dialog.bar-dialog .field { margin: 0.6rem 0; }
dialog.bar-dialog .field label { margin: 0; }
dialog.bar-dialog .field input { width: 100%; }

.tabs { display: flex; gap: 0.2rem; margin: -0.2rem 0 0.9rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
	border: 1px solid transparent; border-bottom: 0; background: transparent; padding: 0.5rem 1.1rem;
	border-radius: 8px 8px 0 0; font-weight: 700; color: var(--muted); white-space: nowrap;
}
.tab[aria-selected="true"] { background: var(--accent-soft); color: var(--text); border-color: var(--border); }
.tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.tab-badge { margin-left: 0.3rem; background: #e8590c; color: #fff; border-color: #e8590c; }
.tab-badge[hidden] { display: none; }
[role="tabpanel"][hidden] { display: none; }

.setup-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.setup-head h2 { margin: 0; flex: 1; min-width: 8rem; }
.setup-layout { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 860px) { .setup-layout { grid-template-columns: minmax(14rem, 2fr) 3fr; align-items: start; } }
.setup-preview { max-width: 22rem; }
.setup-preview svg { width: 100%; height: auto; display: block; }
.setup-side .variants { margin-top: 0.5rem; }
.setup-side .game-blurb { min-height: 0; margin: 0.6rem 0 0; }
.import-only { display: none; }
form[data-mode="import"] .import-only { display: flex; }
form[data-mode="import"] .new-only { display: none; }
#import-text { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; }
.puzzle-name { max-width: 18rem; margin: 0.4rem 0; }

.chat-panel .chat-log {
	list-style: none; margin: 0.6rem 0 0; padding: 0; height: min(24rem, 55vh); overflow-y: auto;
	display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.95rem; overflow-wrap: anywhere;
	border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.6rem; background: var(--surface-2);
}
.chat-panel .chat-entry .chat-name { flex: 0 1 11rem; }
.bots-only { display: none; }
form[data-opponent="bots"] .bots-only { display: flex; }
form[data-opponent="bots"] .human-only { display: none; }
.opponent-choice[hidden] { display: none; }
.page.narrow > h1 { margin: 1rem 0 0.8rem; }

/* ---- voice chat ------------------------------------------------------------------------ */
.voice h3 { display: flex; align-items: center; gap: 0.5rem; }
.voice .badge.turn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.voice-peers { list-style: none; margin: 0.4rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.voice-peer { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.voice-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--border); flex: none; transition: box-shadow 0.1s, background 0.2s; }
.voice-peer[data-state="connected"] .voice-dot { background: var(--accent); }
.voice-peer[data-state="connecting"] .voice-dot { background: var(--warn); }
.voice-peer[data-state="failed"] .voice-dot { background: var(--danger); }
.voice-peer.speaking .voice-dot { box-shadow: 0 0 0 3px var(--target-soft), 0 0 8px 2px var(--target); }
.voice-peer.speaking .voice-name { font-weight: 800; }
.voice-name { font-weight: 600; }
.voice-state { margin-right: auto; }
.voice-volume { width: 5.5rem; accent-color: var(--accent); }
.voice-buttons { margin: 0.4rem 0; }
.voice-ptt { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.3rem 0; }
.voice-ptt button { padding: 0.05rem 0.5rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.voice-devices { display: grid; gap: 0.4rem; margin-top: 0.4rem; }
.voice-device { display: flex; flex-direction: column; gap: 0.15rem; font-weight: 600; }
.voice-device select { width: 100%; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .voice-dot { transition: none; } }