:root {
	--bg: #f4f1ea;
	--wood: #b8894a;
	--wood-dark: #8a6234;
	--ink: #2b2622;
	--muted: #6f665d;
	--line: #d8d0c2;
	--panel: #fffdf8;

	--GREEN: #2f9e44;
	--RED: #d64545;
	--BLUE: #2b6cb0;
	--YELLOW: #d9a520;
	--GREY: #9a9a9a;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1c1a17;
		--wood: #6d4f2a;
		--wood-dark: #4a3419;
		--ink: #ece6dc;
		--muted: #a49a8c;
		--line: #3a352d;
		--panel: #26231e;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 1.25rem;
	background: var(--bg);
	color: var(--ink);
	font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
h1 { font-size: 1.4rem; margin: 0; letter-spacing: .02em; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
     margin: 1.1rem 0 .4rem; }

.you { color: var(--muted); font-variant-numeric: tabular-nums; }

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 1.1rem;
	max-width: 640px;
}

.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: .75rem; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--muted); }
input, select {
	font: inherit; padding: .4rem .5rem; border: 1px solid var(--line);
	border-radius: 6px; background: var(--bg); color: var(--ink); min-width: 9rem;
}

button {
	font: inherit; padding: .45rem .8rem; border-radius: 6px; cursor: pointer;
	border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
button:hover:not(:disabled) { border-color: var(--muted); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--wood); border-color: var(--wood-dark); color: #fff; }
button.ghost { color: var(--muted); }

.hint { color: var(--muted); font-size: .82rem; margin: .5rem 0 0; }
code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; user-select: all; }

.notice { padding: .5rem .75rem; border-radius: 6px; max-width: 640px; margin: 0 0 1rem; }
.notice.info { background: #e6f0fa; color: #17415e; }
.notice.warn { background: #fdf0d5; color: #6b4c00; }
.notice.error { background: #fbe3e3; color: #7a1f1f; }

.roster { list-style: none; padding: 0; margin: 0 0 1rem; }
.roster li { padding: .3rem 0; font-weight: 600; }
.roster li.offline { opacity: .5; font-weight: 400; }

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

.table { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.board-wrap { flex: 1 1 460px; max-width: 720px; }
.side { flex: 0 1 300px; min-width: 260px; }

#board { width: 100%; height: auto; display: block; }

.board-edge { fill: var(--wood); stroke: var(--wood-dark); stroke-width: 3; }

.pip { fill: none; stroke: rgba(0, 0, 0, .45); stroke-width: 2; }
.pip-owned { stroke-width: 3.5; }
.start-ring { fill: none; stroke-width: 2.5; stroke-dasharray: 4 4; opacity: .9; }

.marble-body { stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; }
/* Safe on its own start pip: nobody may land on it or jump it. Deliberately a dashed dark
   ring rather than a white glow -- white glow means "you have picked this up", and having the
   two look alike made an opponent's marble read as though it were yours to move. */
.marble-shield { fill: none; stroke: rgba(0, 0, 0, .65); stroke-width: 2.5; stroke-dasharray: 3 3; }

.target {
	fill: rgba(255, 255, 255, .28);
	stroke: #fff; stroke-width: 3; cursor: pointer;
	animation: pulse 1.4s ease-in-out infinite;
}
.target:hover { fill: rgba(255, 255, 255, .55); }
@keyframes pulse { 50% { opacity: .5; } }

/* Colour applies to whichever property the element actually uses. */
.pip-owned.c-GREEN, .start-ring.c-GREEN { stroke: var(--GREEN); }
.pip-owned.c-RED,   .start-ring.c-RED   { stroke: var(--RED); }
.pip-owned.c-BLUE,  .start-ring.c-BLUE  { stroke: var(--BLUE); }
.pip-owned.c-YELLOW,.start-ring.c-YELLOW{ stroke: var(--YELLOW); }

.marble-body.c-GREEN { fill: var(--GREEN); }
.marble-body.c-RED { fill: var(--RED); }
.marble-body.c-BLUE { fill: var(--BLUE); }
.marble-body.c-YELLOW { fill: var(--YELLOW); }
.marble-body.c-GREY { fill: var(--GREY); }

.roster li.c-GREEN, .count.c-GREEN { color: var(--GREEN); }
.roster li.c-RED, .count.c-RED { color: var(--RED); }
.roster li.c-BLUE, .count.c-BLUE { color: var(--BLUE); }
.roster li.c-YELLOW, .count.c-YELLOW { color: var(--YELLOW); }

/* ---------------------------------------------------------------- side */

.turn { font-weight: 700; margin: 0 0 .2rem; }
.turn.active { color: var(--GREEN); }
.meta { color: var(--muted); font-size: .82rem; margin: .1rem 0; font-variant-numeric: tabular-nums; }
.counts { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0; font-size: .82rem; font-weight: 600; }

.hand { display: flex; flex-wrap: wrap; gap: .4rem; }
.card {
	min-width: 3rem; font-weight: 700; font-variant-numeric: tabular-nums;
	background: var(--panel); border: 1px solid var(--line);
}
.card.dead { opacity: .35; }
.card.picked { border-color: var(--wood); background: var(--wood); color: #fff; }

.moves { display: flex; flex-direction: column; gap: .3rem; max-height: 15rem; overflow-y: auto; }
.move { text-align: left; font-size: .82rem; }

.log { list-style: none; padding: 0; margin: 0 0 1rem; max-height: 11rem; overflow-y: auto;
       font-size: .82rem; color: var(--muted); }
.log li { padding: .2rem 0; border-bottom: 1px solid var(--line); }

/* A new deal is a natural pause -- worth interrupting for rather than sliding past. */
.round-banner {
	display: flex; flex-direction: column; gap: .35rem; align-items: flex-start;
	background: var(--wood); color: #fff;
	border-radius: 8px; padding: .7rem .85rem; margin-bottom: .8rem;
	animation: settle .35s ease-out;
}
.round-banner strong { font-size: 1.05rem; letter-spacing: .01em; }
.round-banner span { font-size: .82rem; opacity: .9; }
.round-banner .ghost { color: #fff; border-color: rgba(255, 255, 255, .5); background: transparent; }

@keyframes settle { from { opacity: 0; transform: translateY(-6px); } }

/* A marble you can pick up, and the one you have. */
.marble.pickable { cursor: pointer; }
.marble.pickable .marble-body { stroke: rgba(255, 255, 255, .8); stroke-width: 2.5; }
.marble.pickable:hover .marble-body { stroke: #fff; stroke-width: 3.5; }
.marble.picked .marble-body { stroke: #fff; stroke-width: 4; }
.marble.picked { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .9)); }

#movesHint { margin: 0 0 .4rem; font-size: .78rem; }

/* The undo button sits with the turn, not buried under the log -- it is only ever wanted in
   the moment right after moving, so it belongs where the eye already is. */
.turn-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.turn-row .turn { margin: 0; }
#undoBtn:not(:disabled) { border-color: var(--wood); color: var(--ink); }

/* Only ever filled in once a game is over. */
.seed { user-select: all; color: var(--wood-dark); font-weight: 600; }

/* Candidates for "which card did you mean?" after clicking a destination several could reach. */
.card.choose { border-color: var(--GREEN); box-shadow: 0 0 0 2px var(--GREEN) inset; }
.card.dead { opacity: .4; cursor: help; }

/* Loop positions, drawn only when cutthroat.board.pip-numbers is on (or ?pips=1). */
.pip-number {
	font: 9px ui-monospace, monospace;
	fill: rgba(0, 0, 0, .55);
	text-anchor: middle;
	pointer-events: none;
	user-select: none;
}

/*
 * A swap marks the opponent's marble rather than an empty pip, so it is drawn as a ring
 * around what is already there instead of a disc filling a gap.
 */
.target-swap {
  fill: none;
  stroke: #ffd76a;
  stroke-width: 3;
  stroke-dasharray: 5 4;
}
.target-swap:hover {
  fill: none;
  stroke: #fff0b8;
  stroke-width: 4;
}

/* Ending a seven early costs pips, and starting over costs nothing -- neither should look
   like the ordinary move it sits next to. */
.move-stop   { border-color: #c98b2e; color: #f0c479; }
.move-cancel { border-color: #6b6b6b; color: #b9b9b9; }