@charset "utf-8";

/* Themes: dark by default, light follows the system unless the viewer picks one in Settings
   (data-theme on <html>). The light board is the blue-gray of the original plastic game. */

:root {
	color-scheme:dark;

	--bg:#0d0f12;
	--panel:#15181d;
	--panel-hover:#1b1f26;
	--line:#262b33;
	--line-strong:#3a414c;
	--text:#e7eaee;
	--muted:#8a929e;
	--faint:#5a626e;
	--footer:#4a515c;
	--accent:#4cc9ff;
	--accent-soft:rgba(76, 201, 255, 0.07);
	--accent-line:rgba(76, 201, 255, 0.3);
	--go:#3ddc84;
	--go-soft:rgba(61, 220, 132, 0.12);
	--go-line:rgba(61, 220, 132, 0.45);
	--stop:#ff6b6b;
	--stop-line:rgba(255, 107, 107, 0.4);
	--stop-soft:rgba(255, 107, 107, 0.12);
	--pop:#1b1f26;
	--pop-line:#333a45;
	--shadow:0 12px 32px rgba(0, 0, 0, 0.55);

	/* The board: its surface, the code row, row dividers, empty peg holes */
	--board:#0a0c0f;
	--board-code:#11141a;
	--board-line:#171a20;
	--board-present:rgba(255, 255, 255, 0.035);
	--socket:#1a1e25;
	--socket-shade:inset 0 3px 6px rgba(0, 0, 0, 0.7);
	--peg-shadow:0 2px 6px rgba(0, 0, 0, 0.45);

	/* Feedback pegs: kept far apart in brightness from each other and from an empty hole */
	--fb-white:#f6f8fa;
	--fb-white-edge:0 0 8px rgba(255, 255, 255, 0.4);
	--fb-gray:#5f6774;
	--fb-gray-edge:inset 0 1px 0 rgba(255, 255, 255, 0.25);
	--fb-empty:#14171c;
	--fb-empty-edge:inset 0 2px 3px rgba(0, 0, 0, 0.8);

	--red:#ff5a5f;
	--orange:#ff9f43;
	--yellow:#ffd93d;
	--green:#3ddc84;
	--blue:#4c8dff;
	--purple:#a78bfa;
}

@media (prefers-color-scheme:light) {
	:root:not([data-theme="dark"]) {
		color-scheme:light;

		--bg:#e4e9f0;
		--panel:#f6f8fb;
		--panel-hover:#eaeff5;
		--line:#d2dae4;
		--line-strong:#b3c0cf;
		--text:#1b2330;
		--muted:#556274;
		--faint:#8592a3;
		--footer:#95a1b0;
		--accent:#1683c9;
		--accent-soft:rgba(22, 131, 201, 0.08);
		--accent-line:rgba(22, 131, 201, 0.35);
		--go:#16975a;
		--go-soft:rgba(22, 151, 90, 0.1);
		--go-line:rgba(22, 151, 90, 0.45);
		--stop:#d64545;
		--stop-line:rgba(214, 69, 69, 0.4);
		--stop-soft:rgba(214, 69, 69, 0.1);
		--pop:#ffffff;
		--pop-line:#cdd6e1;
		--shadow:0 12px 32px rgba(30, 45, 70, 0.18);

		--board:#aab9cc;
		--board-code:#97a8be;
		--board-line:#9cadc2;
		--board-present:rgba(255, 255, 255, 0.22);
		--socket:#7f91a8;
		--socket-shade:inset 0 3px 5px rgba(20, 35, 60, 0.45);
		--peg-shadow:0 2px 4px rgba(20, 35, 60, 0.35);

		--fb-white:#ffffff;
		--fb-white-edge:0 0 0 1px rgba(30, 45, 70, 0.3), 0 1px 2px rgba(20, 35, 60, 0.35);
		--fb-gray:#3b4452;
		--fb-gray-edge:0 1px 2px rgba(20, 35, 60, 0.35);
		--fb-empty:#8a9bb1;
		--fb-empty-edge:inset 0 2px 3px rgba(20, 35, 60, 0.4);

		--blue:#2f6fe4;
	}
}

:root[data-theme="light"] {
	color-scheme:light;

	--bg:#e4e9f0;
	--panel:#f6f8fb;
	--panel-hover:#eaeff5;
	--line:#d2dae4;
	--line-strong:#b3c0cf;
	--text:#1b2330;
	--muted:#556274;
	--faint:#8592a3;
	--footer:#95a1b0;
	--accent:#1683c9;
	--accent-soft:rgba(22, 131, 201, 0.08);
	--accent-line:rgba(22, 131, 201, 0.35);
	--go:#16975a;
	--go-soft:rgba(22, 151, 90, 0.1);
	--go-line:rgba(22, 151, 90, 0.45);
	--stop:#d64545;
	--stop-line:rgba(214, 69, 69, 0.4);
	--stop-soft:rgba(214, 69, 69, 0.1);
	--pop:#ffffff;
	--pop-line:#cdd6e1;
	--shadow:0 12px 32px rgba(30, 45, 70, 0.18);

	--board:#aab9cc;
	--board-code:#97a8be;
	--board-line:#9cadc2;
	--board-present:rgba(255, 255, 255, 0.22);
	--socket:#7f91a8;
	--socket-shade:inset 0 3px 5px rgba(20, 35, 60, 0.45);
	--peg-shadow:0 2px 4px rgba(20, 35, 60, 0.35);

	--fb-white:#ffffff;
	--fb-white-edge:0 0 0 1px rgba(30, 45, 70, 0.3), 0 1px 2px rgba(20, 35, 60, 0.35);
	--fb-gray:#3b4452;
	--fb-gray-edge:0 1px 2px rgba(20, 35, 60, 0.35);
	--fb-empty:#8a9bb1;
	--fb-empty-edge:inset 0 2px 3px rgba(20, 35, 60, 0.4);

	--blue:#2f6fe4;
}

*, *::before, *::after	{	box-sizing:border-box; }

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

body {
	background:var(--bg);
	color:var(--text);
	font-family:'Space Grotesk', system-ui, sans-serif;
	font-size:16px;
	line-height:1.5;
	min-height:100vh;
	padding:0 16px;
	-webkit-font-smoothing:antialiased;
}

.hide {
	display:none !important;
}

button, input {
	font:inherit;
	color:inherit;
}


/* Layout: the header spans the play area, so the title and status line up with its edges */

.layout {
	display:grid;
	grid-template-columns:minmax(0, 300px) minmax(0, 440px);
	justify-content:center;
	align-items:start;
	gap:14px;
}

.masthead {
	grid-column:1 / -1;
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:6px 14px;
	flex-wrap:wrap;
	padding:28px 0 2px;
}

.masthead h1 {
	margin:0;
	font-size:22px;
	font-weight:700;
	letter-spacing:0.02em;
}

.title {
	display:flex;
	align-items:center;
	gap:8px;
}

/* The admin lock: shut and quiet for everyone else, open and lit once unlocked */
.lock {
	display:grid;
	place-items:center;
	width:30px;
	height:30px;
	padding:0;
	background:none;
	border:0;
	border-radius:8px;
	color:var(--faint);
	cursor:pointer;
	transition:color 0.15s, background 0.15s;
}

.lock:hover {
	color:var(--muted);
	background:var(--panel-hover);
}

.lock svg {
	width:18px;
	height:18px;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.lock .shackle_open, .lock.unlocked .shackle_shut {
	display:none;
}

.lock.unlocked .shackle_open {
	display:inline;
}

.lock.unlocked {
	color:var(--accent);
}

.lock.nudge {
	animation:nudge 0.5s 2;
}

@keyframes nudge {
	0%, 100% { transform:none; }
	25% { transform:rotate(-12deg); }
	75% { transform:rotate(12deg); }
}

.pin_box {
	width:220px;
}

.pin {
	flex:1;
	min-width:0;
	height:30px;
	padding:0 10px;
	background:var(--bg);
	border:1px solid var(--line);
	border-radius:8px;
	font-size:15px;
	letter-spacing:0.2em;
	outline:none;
}

.pin:focus {
	border-color:var(--accent-line);
}

.board_header {
	margin:0;
	color:var(--muted);
	font-size:14px;
}

.board_header b {
	color:var(--text);
	font-weight:500;
}

.side {
	display:flex;
	flex-direction:column;
	gap:14px;
	min-width:0;
}

.panel {
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:18px;
	padding:20px 22px;
	min-width:0;
}

.panel_head {
	display:flex;
	align-items:center;
	min-height:28px;
}

.panel_title {
	color:var(--accent);
	font-weight:700;
	font-size:15px;
	letter-spacing:0.04em;
	text-transform:uppercase;
}

.hint {
	margin:14px 0 0;
	color:var(--faint);
	font-size:13px;
}


/* Buttons */

.maker_sit, .breaker_sit, .board_id, .quit, .submit_code, .submit_guess, .save_name {
	height:30px;
	padding:0 12px;
	background:var(--panel-hover);
	border:1px solid var(--line);
	border-radius:8px;
	font-size:13px;
	font-weight:500;
	cursor:pointer;
	transition:background 0.15s, border-color 0.15s, color 0.15s;
}

.maker_sit:hover, .breaker_sit:hover, .board_id:hover, .save_name:hover {
	border-color:var(--line-strong);
}

.maker_sit, .breaker_sit {
	color:var(--muted);
	border-style:dashed;
}

.submit_code, .submit_guess {
	width:100%;
	background:var(--go-soft);
	border-color:var(--go-line);
	color:var(--go);
}

.submit_code:hover, .submit_guess:hover {
	border-color:var(--go);
}

.quit {
	height:26px;
	padding:0 10px;
	background:transparent;
	border-color:var(--stop-line);
	color:var(--stop);
	font-size:12px;
}

.quit:hover {
	background:var(--stop-soft);
}


/* Boards list */

.boards_head, .details {
	display:grid;
	grid-template-columns:44px minmax(0, 1fr) minmax(0, 1fr);
	align-items:center;
	gap:8px;
}

.boards_head {
	margin-top:12px;
	padding:0 8px 6px;
	color:var(--faint);
	font-size:11px;
	font-weight:700;
	letter-spacing:0.06em;
	text-transform:uppercase;
}

.details {
	padding:6px 8px;
	border:1px solid transparent;
	border-radius:10px;
	font-size:14px;
}

.details + .details {
	margin-top:2px;
}

.details > div {
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.admin .boards_head, .admin .details {
	grid-template-columns:44px minmax(0, 1fr) minmax(0, 1fr) 26px;
}

.clear_board {
	width:26px;
	height:26px;
	padding:0;
	background:none;
	border:1px solid transparent;
	border-radius:7px;
	color:var(--faint);
	font-size:18px;
	line-height:1;
	cursor:pointer;
}

.clear_board:hover {
	color:var(--stop);
	border-color:var(--stop-line);
	background:var(--stop-soft);
}

.details.viewing {
	background:var(--accent-soft);
	border-color:var(--accent-line);
}

.board_id {
	width:34px;
	padding:0;
	font-variant-numeric:tabular-nums;
}

.details.viewing .board_id {
	border-color:var(--accent);
	color:var(--accent);
}

.legend {
	display:flex;
	flex-direction:column;
	gap:6px;
	margin-top:18px;
	padding-top:16px;
	border-top:1px solid var(--line);
	color:var(--muted);
	font-size:13px;
}

.legend span {
	display:flex;
	align-items:center;
	gap:10px;
}

.legend .feedback_well {
	display:flex;
	padding:4px;
	border-radius:50%;
	background:var(--board);
}

.legend .feedback {
	width:12px;
	height:12px;
	flex:none;
}


/* Settings */

.setting {
	margin-top:14px;
}

.setting_label {
	display:block;
	margin-bottom:6px;
	color:var(--muted);
	font-size:13px;
}

.segmented {
	display:flex;
	padding:3px;
	background:var(--bg);
	border:1px solid var(--line);
	border-radius:9px;
}

.segmented button {
	flex:1;
	height:28px;
	padding:0 10px;
	background:none;
	border:0;
	border-radius:7px;
	color:var(--muted);
	font-size:13px;
	font-weight:500;
	cursor:pointer;
}

.segmented button.active {
	background:var(--panel);
	color:var(--text);
	box-shadow:0 0 0 1px var(--line);
}

.name_row {
	display:flex;
	gap:8px;
}

.my_name {
	flex:1;
	min-width:0;
	height:30px;
	padding:0 10px;
	background:var(--bg);
	border:1px solid var(--line);
	border-radius:8px;
	font-size:14px;
	outline:none;
}

.my_name:focus {
	border-color:var(--accent-line);
}

.my_name:disabled, .save_name:disabled {
	opacity:0.55;
	cursor:not-allowed;
}

.setting .hint {
	margin-top:6px;
}


/* The board */

.board_container {
	padding:14px;
}

.seat {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	min-height:44px;
	padding:6px 10px 6px 14px;
	border-radius:10px;
	color:var(--muted);
	font-size:14px;
}

.seat::before {
	content:attr(data-label);
	color:var(--faint);
	font-size:11px;
	font-weight:700;
	letter-spacing:0.06em;
	text-transform:uppercase;
}

.seat:empty::after {
	content:'Empty seat';
	color:var(--faint);
}

.seat .seat_name {
	margin-left:auto;
	color:var(--text);
	font-weight:500;
}

.seat.occupying {
	background:var(--go-soft);
	box-shadow:inset 0 0 0 1px var(--go-line);
}

.board {
	margin:6px 0;
	border-radius:12px;
	overflow:hidden;
	background:var(--board);
	border:1px solid var(--line);
}

.row {
	display:grid;
	grid-template-columns:28px minmax(0, 1fr) 76px;
	align-items:center;
	gap:10px;
	height:54px;
	padding:0 12px 0 8px;
}

.row + .row {
	border-top:1px solid var(--board-line);
}

.code.row {
	height:66px;
	background:var(--board-code);
	grid-template-columns:28px minmax(0, 1fr) 96px;
}

.code.row::before {
	content:'';
}

.guess_num {
	color:var(--faint);
	font-size:12px;
	text-align:right;
	font-variant-numeric:tabular-nums;
}

.guess.present {
	background:var(--board-present);
}

.guess.present .guess_num {
	color:var(--text);
}

.peg_box {
	display:flex;
	align-items:center;
	gap:12px;
}

.code_message {
	color:var(--muted);
	font-size:14px;
}

.code_note {
	display:block;
	color:var(--muted);
	font-size:12px;
	text-align:center;
	line-height:1.3;
}

.feedback_box {
	display:grid;
	grid-template-columns:repeat(2, 14px);
	gap:6px;
	justify-content:center;
}

.feedback_box:has(button), .feedback_box:has(.code_note) {
	display:block;
}


/* Pegs */

.peg {
	position:relative;
	width:34px;
	height:34px;
	flex:none;
	border-radius:50%;
	background:var(--socket);
	box-shadow:var(--socket-shade);
}

.code .peg {
	width:38px;
	height:38px;
}

.peg:not(.black) {
	background:radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 42%), var(--peg);
	box-shadow:inset 0 -3px 5px rgba(0, 0, 0, 0.3), var(--peg-shadow);
}

.live .peg {
	cursor:pointer;
	transition:transform 0.1s;
}

.live .peg:hover {
	transform:scale(1.08);
}

.live .peg.black {
	box-shadow:var(--socket-shade), 0 0 0 1px var(--line-strong);
}

.live .peg.picking {
	box-shadow:0 0 0 2px var(--accent);
}

.red		{	--peg:var(--red); }
.orange		{	--peg:var(--orange); }
.yellow		{	--peg:var(--yellow); }
.green		{	--peg:var(--green); }
.blue		{	--peg:var(--blue); }
.purple		{	--peg:var(--purple); }

.feedback {
	display:block;
	width:14px;
	height:14px;
	border-radius:50%;
	background:var(--fb-empty);
	box-shadow:var(--fb-empty-edge);
}

.feedback.white {
	background:var(--fb-white);
	box-shadow:var(--fb-white-edge);
}

.feedback.gray {
	background:var(--fb-gray);
	box-shadow:var(--fb-gray-edge);
}


/* Popovers: the color picker and the name picker */

.popover {
	position:absolute;
	z-index:20;
	padding:8px;
	background:var(--pop);
	border:1px solid var(--pop-line);
	border-radius:12px;
	box-shadow:var(--shadow);
}

.color_picker {
	display:flex;
	gap:6px;
}

.pick {
	width:30px;
	height:30px;
	padding:0;
	border:0;
	border-radius:50%;
	background:var(--peg);
	cursor:pointer;
	transition:transform 0.1s;
}

.pick:hover {
	transform:scale(1.12);
}

.pick.black {
	background:transparent;
	box-shadow:inset 0 0 0 1px var(--line-strong);
	position:relative;
}

.pick.black::after {
	content:'';
	position:absolute;
	left:7px;
	right:7px;
	top:50%;
	height:1px;
	background:var(--muted);
	transform:rotate(-45deg);
}

.popover_label {
	display:block;
	padding:2px 4px 8px;
	color:var(--muted);
	font-size:12px;
}


/* Messages */

.notice {
	position:fixed;
	left:50%;
	bottom:24px;
	z-index:30;
	transform:translateX(-50%);
	padding:10px 16px;
	background:var(--pop);
	border:1px solid var(--pop-line);
	border-radius:10px;
	box-shadow:var(--shadow);
	font-size:14px;
}

.notice.win {
	border-color:var(--go-line);
	color:var(--go);
}

footer {
	padding:40px 0 28px;
	color:var(--footer);
	font-size:12px;
	text-align:center;
}


@media (max-width:780px) {
	.layout { grid-template-columns:minmax(0, 440px); }
	.side { order:2; }
}

@media (max-width:480px) {
	.masthead { padding-top:18px; }
	.masthead h1 { font-size:19px; }
	.panel { padding:16px; border-radius:14px; }
	.board_container { padding:10px; }
	.row { gap:6px; padding:0 8px 0 4px; grid-template-columns:22px minmax(0, 1fr) 64px; }
	.code.row { grid-template-columns:22px minmax(0, 1fr) 84px; }
	.peg_box { gap:8px; }
	.peg { width:30px; height:30px; }
	.code .peg { width:32px; height:32px; }
}