/**
 * QW 3D Chess - front-end styles.
 *
 * Every selector is namespaced under .qw3dchess so nothing leaks into the
 * host theme, and every colour comes from a variable so themes are a single
 * class swap rather than scattered hex values.
 *
 * @package QW3DChess
 * @license GPL-2.0-or-later
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

.qw3dchess {
	/* Classic (Sketchfab Verfassen): exact colours from the source glTF
	   materials (chess.glb) — "light"/"dark" board, "white"/"black" pieces,
	   "gold" accent. Defaults match theme-classic. */
	--qw-square-light: #cccccc;
	--qw-square-dark: #020202;
	--qw-piece-light: #c4c4c4;
	--qw-piece-light-edge: #e07410;
	--qw-piece-dark: #020202;
	--qw-piece-dark-edge: #e07410;

	--qw-surface: #1e1e1e;
	--qw-surface-raised: #2c2c2c;
	--qw-surface-sunken: #141414;
	--qw-line: #3a3a3a;
	--qw-text: #f0f0f0;
	--qw-text-muted: #9a9a9a;
	--qw-accent: #e07410;
	--qw-accent-ink: #1a1a1a;

	--qw-hint: rgba(127, 214, 166, 0.55);
	--qw-capture: rgba(242, 130, 92, 0.85);
	--qw-selected: rgba(255, 215, 130, 0.45);
	--qw-lastmove: rgba(255, 215, 130, 0.26);
	--qw-check: rgba(228, 87, 76, 0.6);
	--qw-danger: #e4574c;

	--qw-radius: 10px;
	--qw-radius-sm: 6px;
	--qw-gap: 14px;
	/* --qw-board-height is deliberately NOT set here. When it is unset the board
	   sizes itself from --qw-auto-board-height (set on .qw3dchess__game further
	   down, per container width). Set --qw-board-height yourself, or use the
	   height attribute / Elementor control, to force a fixed height. */
	--qw-panel-width: 300px;
	--qw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	position: relative;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	/* Lets the layout react to the width the board actually gets (a narrow theme
	   column, a wide breakout, fullscreen) rather than to the browser window. */
	container-type: inline-size;
	container-name: qw3dchess;
	-webkit-text-size-adjust: 100%;
	color: var(--qw-text);
	font-family: var(--qw-font);
	font-size: 15px;
	line-height: 1.45;
	background: var(--qw-surface);
	border: 1px solid var(--qw-line);
	border-radius: var(--qw-radius);
}

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

/*
 * The screens, dialogs and panels below set display: grid or flex, which
 * outranks the browser's own [hidden] { display: none } rule. Without this
 * the "hidden" screens stay on the page and the board never appears to
 * switch. The controller toggles the hidden attribute, so this rule is what
 * makes that work.
 */
.qw3dchess [hidden] {
	display: none !important;
}

/* Set by the script when the board is wider than its theme column. The width
   and offset themselves are written inline, because they depend on where the
   theme puts the column. */
.qw3dchess--wide {
	max-width: none;
}

/* Classic matches the Sketchfab Chess model (Verfassen, CC-BY-4.0) exactly —
   colours pulled straight from the source glTF materials (chess.glb):
   "light"/"dark" (board), "white"/"black" (pieces), "gold" (accent). */
.qw3dchess--theme-classic {
	--qw-square-light: #cccccc;
	--qw-square-dark: #020202;
	--qw-piece-light: #c4c4c4;
	--qw-piece-light-edge: #e07410;
	--qw-piece-dark: #020202;
	--qw-piece-dark-edge: #e07410;
	--qw-surface: #1e1e1e;
	--qw-surface-raised: #2c2c2c;
	--qw-surface-sunken: #141414;
	--qw-line: #3a3a3a;
	--qw-text: #f0f0f0;
	--qw-text-muted: #9a9a9a;
	--qw-accent: #e07410;
	--qw-accent-ink: #1a1a1a;
}


/* Table Board: warm wood table + sculpted pieces (nikki.patel59896 CC-BY-4.0). */
.qw3dchess--theme-tableboard {
	--qw-square-light: #e8dcc8;
	--qw-square-dark: #3d2e1f;
	--qw-piece-light: #f5f0e6;
	--qw-piece-light-edge: #c4a574;
	--qw-piece-dark: #1a1210;
	--qw-piece-dark-edge: #c4a574;
	--qw-surface: #1e1a16;
	--qw-surface-raised: #2a241e;
	--qw-surface-sunken: #14110e;
	--qw-line: #3a322a;
	--qw-text: #f0e8dc;
	--qw-text-muted: #a09080;
	--qw-accent: #c4a574;
	--qw-accent-ink: #1a1210;
}
.qw3dchess--theme-modern {
	--qw-square-light: #f4f6f8;
	--qw-square-dark: #39536b;
	--qw-piece-light: #ffffff;
	--qw-piece-light-edge: #90a3b3;
	--qw-piece-dark: #121c24;
	--qw-piece-dark-edge: #c7d2db;
	--qw-surface: #0c141b;
	--qw-surface-raised: #16202a;
	--qw-surface-sunken: #090f14;
	--qw-line: #24313d;
	--qw-text: #e8eef4;
	--qw-text-muted: #93a4b4;
	--qw-accent: #7fb2d9;
	--qw-accent-ink: #0b1119;
}

.qw3dchess--theme-dark {
	--qw-square-light: #7c7c84;
	--qw-square-dark: #222226;
	--qw-piece-light: #e4e6ea;
	--qw-piece-light-edge: #83899a;
	--qw-piece-dark: #0a0a0c;
	--qw-piece-dark-edge: #9aa3b3;
	--qw-surface: #0a0a0c;
	--qw-surface-raised: #151519;
	--qw-surface-sunken: #060607;
	--qw-line: #24242a;
	--qw-text: #e2e2e6;
	--qw-text-muted: #8f8f99;
	--qw-accent: #a9b4c4;
	--qw-accent-ink: #0c0c0f;
}

/* Wood: pale oak and ebony, walnut plates, gold trim. The grain textures are
   painted by qw3dchess-wood.js and published as --qw-wood-* variables; every
   rule below also works without them, falling back to flat colours. */
.qw3dchess--theme-wood {
	--qw-square-light: #e0cba4;
	--qw-square-dark: #2f2e2c;
	--qw-piece-light: #b5aa96;
	--qw-piece-light-edge: #59524a;
	--qw-piece-dark: #48474b;
	--qw-piece-dark-edge: #c59942;
	--qw-surface: #cdb98f;
	--qw-surface-raised: #ddcba4;
	--qw-surface-sunken: #b9a37a;
	--qw-line: #8f7850;
	--qw-text: #2b1f12;
	--qw-text-muted: #5e4a2c;
	--qw-accent: #dfa22e;
	--qw-accent-ink: #2b1f12;
	--qw-hint: rgba(58, 130, 84, 0.6);
	--qw-capture: rgba(200, 70, 40, 0.85);
	--qw-selected: rgba(224, 160, 48, 0.55);
	--qw-lastmove: rgba(224, 160, 48, 0.36);
	background-color: var(--qw-surface);
	background-image: linear-gradient(rgba(226, 208, 168, .78), rgba(226, 208, 168, .78)), var(--qw-wood-frame, none);
	background-size: cover;
}

.qw3dchess--theme-wood .qw3dchess__panel {
	background: rgba(150, 120, 78, .22);
}

.qw3dchess--theme-wood .qw3dchess__player.is-turn {
	background: rgba(255, 244, 214, .5);
}

/* Small wooden plates, as on the reference board. */
.qw3dchess--theme-wood .qw3dchess__controls button,
.qw3dchess--theme-wood .qw3dchess__export button {
	color: var(--qw-text);
	background-color: #c4a878;
	background-image: linear-gradient(rgba(240, 222, 182, .55), rgba(150, 112, 66, .18)), var(--qw-wood-frame, none);
	background-size: cover;
	border: 1px solid #8a6d40;
	box-shadow: 0 2px 0 rgba(86, 60, 30, .45), inset 0 1px 0 rgba(255, 244, 220, .5);
}

.qw3dchess--theme-wood .qw3dchess__controls button:hover:not(:disabled),
.qw3dchess--theme-wood .qw3dchess__export button:hover:not(:disabled) {
	filter: brightness(1.08);
}

.qw3dchess--theme-wood .qw3dchess__controls button:active:not(:disabled) {
	transform: translateY(1px);
	box-shadow: 0 1px 0 rgba(86, 60, 30, .45);
}

/* Clocks are dark plates so they stand out from the light wood. */
.qw3dchess--theme-wood .qw3dchess__clock {
	color: #b9ae9a;
	background: #3a3836;
	border-color: #24221f;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35);
}

.qw3dchess--theme-wood .qw3dchess__clock.is-running {
	color: #f6ecd6;
	border-color: var(--qw-accent);
}

.qw3dchess--theme-wood .qw3dchess__player-name {
	text-shadow: 0 1px 0 rgba(255, 244, 220, .5);
}

/* The 2D board gets the same grain as the 3D one. */
.qw3dchess--theme-wood .qw3dchess-board2d__square--light {
	background-color: var(--qw-square-light);
	background-image: var(--qw-wood-light, none);
	background-size: cover;
}

.qw3dchess--theme-wood .qw3dchess-board2d__square--dark {
	background-color: var(--qw-square-dark);
	background-image: var(--qw-wood-dark, none);
	background-size: cover;
}

/* ------------------------------------------------------------------ */
/* Wood 2.0: light oak + near-black board, pure Staunton pieces       */
/* ------------------------------------------------------------------ */
.qw3dchess--theme-wood2 {
	--qw-square-light: #e8d0a8;
	--qw-square-dark: #1c1a18;
	--qw-piece-light: #dcc39b;
	--qw-piece-light-edge: #8a7048;
	--qw-piece-dark: #5f341e;
	--qw-piece-dark-edge: #3a1e10;
	--qw-surface: #c8b898;
	--qw-surface-raised: #d8c8a8;
	--qw-surface-sunken: #b0a080;
	--qw-line: #8a7050;
	--qw-text: #2a1e12;
	--qw-text-muted: #5c4830;
	--qw-accent: #c89b41;
	--qw-accent-ink: #2a1e12;
	--qw-hint: rgba(58, 130, 84, 0.6);
	--qw-capture: rgba(200, 70, 40, 0.85);
	--qw-selected: rgba(224, 160, 48, 0.55);
	--qw-lastmove: rgba(224, 160, 48, 0.36);
	background-color: var(--qw-surface);
	background-image: linear-gradient(rgba(230, 215, 180, .75), rgba(230, 215, 180, .75)), var(--qw-wood-frame, none);
	background-size: cover;
}

.qw3dchess--theme-wood2 .qw3dchess__panel {
	background: rgba(40, 36, 32, .55);
}

.qw3dchess--theme-wood2 .qw3dchess__player.is-turn {
	background: rgba(255, 244, 214, .45);
}

.qw3dchess--theme-wood2 .qw3dchess__controls button,
.qw3dchess--theme-wood2 .qw3dchess__export button {
	color: var(--qw-text);
	background-color: #c4a878;
	background-image: linear-gradient(rgba(240, 222, 182, .55), rgba(150, 112, 66, .18)), var(--qw-wood-frame, none);
	background-size: cover;
	border: 1px solid #8a6d40;
	box-shadow: 0 2px 0 rgba(86, 60, 30, .45), inset 0 1px 0 rgba(255, 244, 220, .5);
}

.qw3dchess--theme-wood2 .qw3dchess__controls button:hover:not(:disabled),
.qw3dchess--theme-wood2 .qw3dchess__export button:hover:not(:disabled) {
	filter: brightness(1.08);
}

.qw3dchess--theme-wood2 .qw3dchess__controls button:active:not(:disabled) {
	transform: translateY(1px);
	box-shadow: 0 1px 0 rgba(86, 60, 30, .45);
}

.qw3dchess--theme-wood2 .qw3dchess__clock {
	color: #b9ae9a;
	background: #2a2826;
	border-color: #1a1816;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4);
}

.qw3dchess--theme-wood2 .qw3dchess__clock.is-running {
	color: #f6ecd6;
	border-color: var(--qw-accent);
}

.qw3dchess--theme-wood2 .qw3dchess__player-name {
	text-shadow: 0 1px 0 rgba(255, 244, 220, .4);
}

.qw3dchess--theme-wood2 .qw3dchess-board2d__square--light {
	background-color: var(--qw-square-light);
	background-image: var(--qw-wood-light, none);
	background-size: cover;
}

.qw3dchess--theme-wood2 .qw3dchess-board2d__square--dark {
	background-color: var(--qw-square-dark);
	background-image: var(--qw-wood-dark, none);
	background-size: cover;
}

/* ------------------------------------------------------------------ */
/* Shared controls                                                     */
/* ------------------------------------------------------------------ */

.qw3dchess button {
	font: inherit;
	color: var(--qw-text);
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-line);
	border-radius: var(--qw-radius-sm);
	padding: 8px 12px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.qw3dchess button:hover:not(:disabled) {
	border-color: var(--qw-accent);
}

.qw3dchess button:disabled {
	opacity: .42;
	cursor: not-allowed;
}

.qw3dchess button:focus-visible,
.qw3dchess [tabindex]:focus-visible,
.qw3dchess a:focus-visible,
.qw3dchess input:focus-visible {
	outline: 2px solid var(--qw-accent);
	outline-offset: 2px;
}

.qw3dchess button.is-active,
.qw3dchess button[aria-pressed="true"]:not([data-qw-action="sound"]) {
	background: var(--qw-accent);
	border-color: var(--qw-accent);
	color: var(--qw-accent-ink);
}

.qw3dchess .qw3dchess__button {
	display: inline-block;
	padding: 11px 22px;
	font-weight: 600;
	text-decoration: none;
	background: var(--qw-accent);
	border-color: var(--qw-accent);
	color: var(--qw-accent-ink);
}

.qw3dchess__noscript {
	margin: 0;
	padding: 24px;
	text-align: center;
}

.qw3dchess__panel-heading {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--qw-text-muted);
}

/* ------------------------------------------------------------------ */
/* Menu and setup                                                      */
/* ------------------------------------------------------------------ */

.qw3dchess__menu,
.qw3dchess__setup {
	padding: 28px;
}

.qw3dchess__menu-title,
.qw3dchess__setup-title {
	margin: 0 0 20px;
	font-size: 21px;
	font-weight: 600;
}

.qw3dchess__menu-grid {
	display: grid;
	gap: var(--qw-gap);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.qw3dchess__mode {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	text-align: left;
	background: var(--qw-surface-raised);
}

.qw3dchess__mode-name {
	font-size: 17px;
	font-weight: 600;
}

.qw3dchess__mode-note {
	font-size: 13px;
	color: var(--qw-text-muted);
}

.qw3dchess__back {
	margin-bottom: 14px;
	padding: 5px 12px;
	font-size: 13px;
}

.qw3dchess__field {
	margin-bottom: 18px;
}

.qw3dchess__field-label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	color: var(--qw-text-muted);
}

.qw3dchess__choices {
	display: flex;
	gap: 7px;
}

.qw3dchess__choices--wrap {
	flex-wrap: wrap;
}

.qw3dchess__choices button {
	flex: 0 1 auto;
	padding: 7px 13px;
	font-size: 13px;
}

.qw3dchess__checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 14px;
	cursor: pointer;
}

.qw3dchess__notice {
	padding: 14px 16px;
	background: var(--qw-surface-raised);
	border-left: 3px solid var(--qw-accent);
	border-radius: var(--qw-radius-sm);
}

.qw3dchess__empty {
	color: var(--qw-text-muted);
	font-size: 14px;
}

.qw3dchess__lobby-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qw3dchess__lobby-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--qw-line);
}

.qw3dchess__lobby-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qw3dchess__lobby-tc {
	font-variant-numeric: tabular-nums;
	color: var(--qw-text-muted);
	font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Game layout                                                         */
/* ------------------------------------------------------------------ */

.qw3dchess__game {
	/* Mobile first: the board on top, the move list underneath. */
	--qw-auto-board-height: max(320px, min(calc(100cqw - 16px), 80vh));
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
}

.qw3dchess__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 8px;
}

.qw3dchess__board-wrap {
	position: relative;
	/* Must not be flex: 1. Inside a column whose height is not fixed, a flex
	   basis of 0 made the board collapse to its min-height (about 260px) and
	   ignore the height below, which is why the board looked so small. */
	flex: 0 0 auto;
	width: 100%;
	min-height: 260px;
	/* Order of precedence: per-board height (shortcode / block / Elementor),
	   then the backend "Board height on phones" setting, then automatic. */
	height: var(--qw-board-height, var(--qw-admin-height-sm, var(--qw-auto-board-height)));
}

/* Roomy containers use the backend "Board height on desktop" setting. */
@container qw3dchess (min-width: 760px) {
	.qw3dchess__board-wrap {
		height: var(--qw-board-height, var(--qw-admin-height, var(--qw-auto-board-height)));
	}
}

.qw3dchess__board {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: var(--qw-radius-sm);
	overflow: hidden;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	user-select: none;
	-webkit-user-select: none;
}

.qw3dchess__board:focus-visible {
	outline: 2px solid var(--qw-accent);
	outline-offset: 2px;
}

/* Roomy containers: the board spans the full width (the side panel has been
   removed, so nothing is subtracted for it). */
@container qw3dchess (min-width: 760px) {
	.qw3dchess__game {
		--qw-auto-board-height: max(
			320px,
			min(
				calc(100vh - 190px),
				calc((100cqw - 24px) * .92),
				960px
			)
		);
		grid-template-columns: minmax(0, 1fr);
	}

	.qw3dchess__stage {
		padding: 12px;
	}
}

@container qw3dchess (min-width: 1100px) {
	.qw3dchess {
		--qw-panel-width: 340px;
	}

	.qw3dchess__clock {
		font-size: 28px;
	}

	.qw3dchess__history-move {
		font-size: 14px;
	}
}

/* ------------------------------------------------------------------ */
/* Players and clocks — the clock is the loudest element on the board  */
/* ------------------------------------------------------------------ */

.qw3dchess__players {
	flex: 0 0 auto;
}

.qw3dchess__player {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--qw-radius-sm);
	border: 1px solid transparent;
}

.qw3dchess__player.is-turn {
	border-color: var(--qw-accent);
	background: var(--qw-surface-raised);
}

.qw3dchess__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.qw3dchess__player-name {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 40%;
}

.qw3dchess__captured {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	line-height: 1;
	color: var(--qw-text-muted);
	overflow: hidden;
	white-space: nowrap;
}

.qw3dchess__captured-piece {
	margin-right: -3px;
}

.qw3dchess__clock {
	flex: 0 0 auto;
	padding: 5px 12px;
	font-size: 25px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
	color: var(--qw-text-muted);
	background: var(--qw-surface-sunken);
	border: 1px solid var(--qw-line);
	border-radius: var(--qw-radius-sm);
}

.qw3dchess__clock.is-running {
	color: var(--qw-text);
	border-color: var(--qw-accent);
}

.qw3dchess__clock.is-low {
	color: #e8b64c;
}

.qw3dchess__clock.is-critical {
	color: #fff;
	background: var(--qw-danger);
	border-color: var(--qw-danger);
}

/* ------------------------------------------------------------------ */
/* Controls                                                            */
/* ------------------------------------------------------------------ */

.qw3dchess__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.qw3dchess__controls button {
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	font-size: 17px;
	line-height: 1;
}

.qw3dchess__controls button.is-off {
	color: var(--qw-text-muted);
	text-decoration: line-through;
}

/* ------------------------------------------------------------------ */
/* Side panel                                                          */
/* ------------------------------------------------------------------ */

/* The side panel (status, move list, replay, PGN/FEN export) is hidden so the
   board can use the full width. Delete `display: none` to bring it back, and
   restore the two-column grid rules in the layout sections. */
.qw3dchess__panel {
	display: none;
	flex-direction: column;
	gap: 12px;
	padding: 12px 14px 14px;
	background: var(--qw-surface-sunken);
	border-top: 1px solid var(--qw-line);
	min-width: 0;
}

.qw3dchess__status {
	font-size: 14px;
	font-weight: 600;
	min-height: 21px;
}

.qw3dchess__history-wrap {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.qw3dchess__history {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	max-height: 130px;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	font-variant-numeric: tabular-nums;
}

.qw3dchess__history-row {
	display: grid;
	grid-template-columns: 34px 1fr 1fr;
	gap: 3px;
	align-items: center;
}

.qw3dchess__history-no {
	color: var(--qw-text-muted);
	font-size: 12px;
}

.qw3dchess__history-move {
	padding: 3px 6px;
	font-size: 13px;
	text-align: left;
	background: transparent;
	border-color: transparent;
}

.qw3dchess__history-move.is-current {
	background: var(--qw-accent);
	color: var(--qw-accent-ink);
}

.qw3dchess__replay,
.qw3dchess__export {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.qw3dchess__replay button {
	flex: 1;
	min-width: 40px;
	min-height: 38px;
	padding: 0;
}

.qw3dchess__export button {
	flex: 1 1 auto;
	font-size: 12px;
	padding: 7px 9px;
}

/* ------------------------------------------------------------------ */
/* Evaluation bar                                                      */
/* ------------------------------------------------------------------ */

.qw3dchess__eval {
	position: absolute;
	left: 4px;
	top: 60px;
	bottom: 60px;
	width: 12px;
	background: var(--qw-piece-dark);
	border: 1px solid var(--qw-line);
	border-radius: 6px;
	overflow: hidden;
	z-index: 3;
}

.qw3dchess__eval-fill {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50%;
	background: var(--qw-piece-light);
	transition: height .35s ease;
}

.qw3dchess__eval-value {
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	color: var(--qw-text-muted);
}

/* ------------------------------------------------------------------ */
/* Thinking indicator, invite link, toast                              */
/* ------------------------------------------------------------------ */

.qw3dchess__thinking {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px;
	font-size: 13px;
	background: rgba(0, 0, 0, .72);
	border-radius: 999px;
	z-index: 4;
}

.qw3dchess__thinking-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--qw-accent);
	animation: qw3dchess-pulse 1s ease-in-out infinite;
}

@keyframes qw3dchess-pulse {
	0%, 100% { opacity: .3; }
	50% { opacity: 1; }
}

.qw3dchess__invite {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(92%, 380px);
	padding: 20px;
	text-align: center;
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-line);
	border-radius: var(--qw-radius);
	z-index: 5;
}

.qw3dchess__invite p {
	margin: 0 0 12px;
}

.qw3dchess__invite-row {
	display: flex;
	gap: 6px;
}

.qw3dchess__invite input {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	font: inherit;
	font-size: 13px;
	color: var(--qw-text);
	background: var(--qw-surface-sunken);
	border: 1px solid var(--qw-line);
	border-radius: var(--qw-radius-sm);
}

.qw3dchess__toast {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translate(-50%, 12px);
	max-width: 90%;
	padding: 10px 18px;
	font-size: 14px;
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-accent);
	border-radius: 999px;
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
	z-index: 30;
}

.qw3dchess__toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------ */
/* Dialogs                                                             */
/* ------------------------------------------------------------------ */

.qw3dchess__dialog {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 40;
	cursor: pointer; /* shows backdrop is clickable to close */
}

.qw3dchess__dialog[hidden] {
	display: none;
}

.qw3dchess__dialog-inner {
	width: min(100%, 400px);
	max-height: min(90vh, 640px);
	overflow-y: auto;
	padding: 24px 26px 20px;
	text-align: center;
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-line);
	border-radius: 14px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
	cursor: default; /* panel itself is not a close target */
}

.qw3dchess__dialog-inner--wide {
	width: min(100%, 440px);
	text-align: left;
}

.qw3dchess__dialog-inner h3 {
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--qw-line);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--qw-text);
}

.qw3dchess__dialog-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--qw-line);
}

.qw3dchess__dialog-actions button {
	min-width: 88px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
}

.qw3dchess__promo-row {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.qw3dchess__promo-row button {
	width: 60px;
	height: 60px;
	font-size: 34px;
	line-height: 1;
	padding: 0;
}

/* Review needs the replay controls that lived in the side panel. */
.qw3dchess [data-qw-action="review-game"] {
	display: none;
}

.qw3dchess__result-headline {
	margin: 0 0 6px;
	font-size: 23px;
	font-weight: 600;
}

.qw3dchess__result-detail {
	margin: 0;
	color: var(--qw-text-muted);
}

.qw3dchess__settings-grid {
	display: grid;
	gap: 18px;
}

.qw3dchess__settings-grid .qw3dchess__field-label {
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--qw-text-muted);
}

.qw3dchess__settings-grid .qw3dchess__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.qw3dchess__settings-grid .qw3dchess__choices button {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 8px;
	border: 1px solid var(--qw-line);
	background: transparent;
	color: var(--qw-text);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.qw3dchess__settings-grid .qw3dchess__choices button:hover {
	border-color: var(--qw-accent);
	color: var(--qw-text);
}

.qw3dchess__settings-grid .qw3dchess__choices button.is-active {
	background: var(--qw-accent);
	border-color: var(--qw-accent);
	color: #fff;
}

.qw3dchess__settings-toggles {
	display: grid;
	gap: 0;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--qw-line);
}

.qw3dchess__settings-toggles .qw3dchess__checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 4px;
	font-size: 13px;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
	cursor: pointer;
}

.qw3dchess__settings-toggles .qw3dchess__checkbox:last-child {
	border-bottom: 0;
}

.qw3dchess__settings-toggles .qw3dchess__checkbox input {
	width: 16px;
	height: 16px;
	accent-color: var(--qw-accent);
}

/* ------------------------------------------------------------------ */
/* 2D board                                                            */
/* ------------------------------------------------------------------ */

.qw3dchess-board2d {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: var(--qw-surface-sunken);
}

/*
 * Square board that fits whichever dimension is smaller. height:100% with
 * aspect-ratio and width:auto needs no container query units, so it works in
 * every browser rather than collapsing to zero width where cqh is
 * unsupported.
 */
.qw3dchess-board2d__frame {
	position: relative;
	height: 100%;
	width: auto;
	aspect-ratio: 1 / 1;
	max-height: 100%;
	max-width: 100%;
}

.qw3dchess-board2d__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(8, 1fr);
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	border: 2px solid var(--qw-line);
	border-radius: 4px;
	/* Not hidden: tall pieces overlap the rank behind them. The four corner
	   squares are rounded instead (below). */
	overflow: visible;
}

.qw3dchess-board2d__grid > :nth-child(1) { border-top-left-radius: 2px; }
.qw3dchess-board2d__grid > :nth-child(8) { border-top-right-radius: 2px; }
.qw3dchess-board2d__grid > :nth-child(57) { border-bottom-left-radius: 2px; }
.qw3dchess-board2d__grid > :nth-child(64) { border-bottom-right-radius: 2px; }

.qw3dchess-board2d__grid--flipped {
	transform: rotate(180deg);
}

.qw3dchess-board2d__grid--flipped .qw3dchess__piece,
.qw3dchess-board2d__grid--flipped .qw3dchess-board2d__marker {
	transform: rotate(180deg);
}

.qw3dchess-board2d__square {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qw3dchess-board2d__square--light {
	background: var(--qw-square-light);
}

.qw3dchess-board2d__square--dark {
	background: var(--qw-square-dark);
}

.qw3dchess-board2d__square.is-last-move::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--qw-lastmove);
	pointer-events: none;
}

.qw3dchess-board2d__square.is-selected::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--qw-selected);
	pointer-events: none;
}

.qw3dchess-board2d__square.is-check::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle, var(--qw-check) 25%, transparent 72%);
	pointer-events: none;
}

.qw3dchess-board2d__square.is-focus {
	box-shadow: inset 0 0 0 3px var(--qw-accent);
}

.qw3dchess-board2d__square.is-hover {
	box-shadow: inset 0 0 0 3px var(--qw-accent);
}

.qw3dchess-board2d__square.is-legal .qw3dchess-board2d__marker {
	width: 30%;
	height: 30%;
	border-radius: 50%;
	background: var(--qw-hint);
}

.qw3dchess-board2d__square.is-legal-capture .qw3dchess-board2d__marker {
	width: 88%;
	height: 88%;
	border-radius: 50%;
	border: 4px solid var(--qw-capture);
}

.qw3dchess-board2d__marker {
	position: absolute;
	pointer-events: none;
	z-index: 1;
}

.qw3dchess__piece {
	position: relative;
	/* --qw-z is set per piece by the 2D board: pieces nearer the viewer sit in front. */
	z-index: var(--qw-z, 2);
	width: 88%;
	height: 88%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	will-change: transform;
}

.qw3dchess__piece.is-dragging {
	z-index: 20;
	cursor: grabbing;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}

.qw3dchess__piece-svg {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*
 * Picture pieces (rendered from the 3D models) — 2D only.
 * Thick pieces. King / Queen / Bishop are shorter so they stay fully
 * inside the board box. 3D styles completely untouched.
 */
.qw3dchess__piece--img {
	width: 100%;
	height: 100%;
	display: block;
}

.qw3dchess .qw3dchess__piece--img .qw3dchess__piece-img {
	/* Themes and page builders often style every img on the page (max-width,
	   height:auto, margins, borders, shadows). The size and position below are
	   what place the piece on its square, so they must not be overridden. */
	position: absolute !important;
	left: calc((100% - 100% * var(--qw-piece-scale, 1.50)) / 2) !important;
	right: auto !important;
	top: auto !important;
	bottom: 0 !important;
	width: calc(100% * var(--qw-piece-scale, 1.50)) !important;
	height: calc(100% * var(--qw-piece-scale, 1.50) * 0.88) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	float: none !important;
	box-shadow: none !important;
	background: none !important;
	object-fit: fill !important;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .42));
	transform-origin: bottom center;
}

/* Tall pieces (K, Q, B): strongly reduce height so they never leave the board. */
.qw3dchess .qw3dchess__piece--img.qw3dchess__piece--k .qw3dchess__piece-img,
.qw3dchess .qw3dchess__piece--img.qw3dchess__piece--q .qw3dchess__piece-img,
.qw3dchess .qw3dchess__piece--img.qw3dchess__piece--b .qw3dchess__piece-img {
	height: calc(100% * var(--qw-piece-scale, 1.50) * 0.70) !important;
	width: calc(100% * var(--qw-piece-scale, 1.50)) !important;
	left: calc((100% - 100% * var(--qw-piece-scale, 1.50)) / 2) !important;
}

/* 2D only: keep pieces inside the board box. */
.qw3dchess--render-2d .qw3dchess__board {
	overflow: hidden;
}

.qw3dchess-board2d--locked .qw3dchess__piece {
	cursor: default;
}

.qw3dchess-board2d__coords {
	pointer-events: none;
}

.qw3dchess-board2d__coords {
	position: absolute;
	inset: 0;
}

.qw3dchess-board2d__coords-files,
.qw3dchess-board2d__coords-ranks {
	position: absolute;
	display: flex;
	font-size: 10px;
	font-weight: 600;
	color: #fff;
	opacity: .75;
	mix-blend-mode: difference;
}

.qw3dchess-board2d__coords-files {
	left: 2px;
	right: 2px;
	bottom: 2px;
	justify-content: space-around;
}

.qw3dchess-board2d__coords-ranks {
	top: 2px;
	bottom: 2px;
	left: 4px;
	flex-direction: column;
	justify-content: space-around;
}

/*
 * Classic 2D board: cream and tan squares with the coordinates printed in the
 * corners in the opposite colour, in the style of chess.com. Only the flat
 * board is affected; the 3D board keeps its own materials.
 */
.qw3dchess--render-2d.qw3dchess--theme-classic {
	--qw-square-light: #fbfae9;
	--qw-square-dark: #cea861;
	--qw-hint: rgba(56, 44, 20, .26);
}

.qw3dchess--render-2d.qw3dchess--theme-classic .qw3dchess-board2d__coords-files,
.qw3dchess--render-2d.qw3dchess--theme-classic .qw3dchess-board2d__coords-ranks {
	font-size: 11px;
	font-size: clamp(10px, 1.45cqw, 14px);
	font-weight: 700;
	line-height: 1.2;
	opacity: 1;
	mix-blend-mode: normal;
	justify-content: flex-start;
}

.qw3dchess--render-2d.qw3dchess--theme-classic .qw3dchess-board2d__coords-files {
	left: 2px;
	right: 2px;
	bottom: 2px;
}

.qw3dchess--render-2d.qw3dchess--theme-classic .qw3dchess-board2d__coords-ranks {
	top: 2px;
	bottom: 2px;
	left: 2px;
}

.qw3dchess--render-2d.qw3dchess--theme-classic .qw3dchess-board2d__coords-files span {
	flex: 1 1 0;
	padding: 0 4px 1px 0;
	text-align: right;
	align-self: flex-end;
}

.qw3dchess--render-2d.qw3dchess--theme-classic .qw3dchess-board2d__coords-ranks span {
	flex: 1 1 0;
	padding: 1px 0 0 4px;
}

/* Each label takes the colour of the other kind of square. The bottom-left and
   top-left corners are the same colour whichever way the board faces, so this
   holds when the board is flipped too. */
.qw3dchess--render-2d.qw3dchess--theme-classic .qw3dchess-board2d__coords-files span:nth-child(odd),
.qw3dchess--render-2d.qw3dchess--theme-classic .qw3dchess-board2d__coords-ranks span:nth-child(even) {
	color: var(--qw-square-light);
}

.qw3dchess--render-2d.qw3dchess--theme-classic .qw3dchess-board2d__coords-files span:nth-child(even),
.qw3dchess--render-2d.qw3dchess--theme-classic .qw3dchess-board2d__coords-ranks span:nth-child(odd) {
	color: var(--qw-square-dark);
}

/* ------------------------------------------------------------------ */
/* 3D board                                                            */
/* ------------------------------------------------------------------ */

.qw3dchess-board3d {
	background: var(--qw-surface-sunken);
}

.qw3dchess-board3d__canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
}

/* ------------------------------------------------------------------ */
/* Fullscreen                                                          */
/* ------------------------------------------------------------------ */

.qw3dchess--fullscreen,
.qw3dchess--pseudo-fullscreen {
	width: 100% !important;
	margin: 0 !important;
	border-radius: 0;
	border: 0;
}

.qw3dchess--pseudo-fullscreen {
	position: fixed;
	inset: 0;
	width: 100vw !important;
	z-index: 99999;
}

.qw3dchess--fullscreen .qw3dchess__game,
.qw3dchess--pseudo-fullscreen .qw3dchess__game {
	height: 100vh;
	height: 100dvh;
	grid-template-rows: minmax(0, 1fr);
}

.qw3dchess--fullscreen .qw3dchess__stage,
.qw3dchess--pseudo-fullscreen .qw3dchess__stage {
	min-height: 0;
	padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* Here the board takes whatever height the players and controls leave. */
.qw3dchess--fullscreen .qw3dchess__board-wrap,
.qw3dchess--pseudo-fullscreen .qw3dchess__board-wrap {
	flex: 1 1 0;
	height: auto;
	min-height: 0;
}

.qw3dchess--fullscreen .qw3dchess__panel,
.qw3dchess--pseudo-fullscreen .qw3dchess__panel {
	max-height: 34dvh;
	overflow-y: auto;
}

@container qw3dchess (min-width: 760px) {
	.qw3dchess--fullscreen .qw3dchess__game,
	.qw3dchess--pseudo-fullscreen .qw3dchess__game {
		grid-template-rows: minmax(0, 1fr);
	}

	.qw3dchess--fullscreen .qw3dchess__panel,
	.qw3dchess--pseudo-fullscreen .qw3dchess__panel {
		max-height: none;
	}
}

.qw3dchess--offline .qw3dchess__status::after {
	content: " •";
	color: var(--qw-danger);
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

/* Phones and other narrow boards. */
@container qw3dchess (max-width: 559px) {
	.qw3dchess__menu,
	.qw3dchess__setup {
		padding: 16px;
	}

	.qw3dchess__menu-title,
	.qw3dchess__setup-title {
		font-size: 19px;
	}

	.qw3dchess__menu-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.qw3dchess__mode {
		padding: 16px;
	}

	.qw3dchess__choices button {
		min-height: 40px;
		padding: 8px 14px;
	}

	.qw3dchess__back {
		min-height: 40px;
	}

	.qw3dchess__player {
		gap: 8px;
		padding: 6px 8px;
	}

	.qw3dchess__player-name {
		max-width: none;
		flex: 0 1 auto;
		min-width: 0;
		font-size: 13px;
	}

	.qw3dchess__captured {
		font-size: 13px;
	}

	.qw3dchess__clock {
		font-size: 21px;
		padding: 4px 10px;
	}

	/* One row of evenly spread buttons under the board. */
	.qw3dchess__controls {
		flex-wrap: nowrap;
		gap: 4px;
	}

	.qw3dchess__controls button {
		flex: 1 1 0;
		min-width: 0;
		padding: 0;
	}

	.qw3dchess__eval {
		display: none;
	}

	.qw3dchess__export button {
		min-height: 40px;
	}

	.qw3dchess__dialog {
		padding: 12px;
	}

	.qw3dchess__dialog-inner {
		padding: 18px;
	}

	.qw3dchess__promo-row button {
		width: 56px;
		height: 56px;
	}
}

/* Between phone and desktop, with the panel still underneath. */
@container qw3dchess (min-width: 560px) and (max-width: 759px) {
	.qw3dchess__history {
		max-height: 170px;
	}
}

/* Landscape phones: too short to stack, so keep the board large and beside
   the panel even though the screen is not very wide. */
@media (max-height: 520px) and (orientation: landscape) {
	.qw3dchess {
		--qw-panel-width: 220px;
	}

	.qw3dchess__game {
		--qw-auto-board-height: max(220px, calc(100vh - 128px));
		grid-template-columns: minmax(0, 1fr);
	}

	.qw3dchess__clock {
		font-size: 18px;
		padding: 2px 8px;
	}

	.qw3dchess__stage {
		padding: 6px 8px;
	}

	.qw3dchess__player {
		padding: 3px 8px;
	}

	.qw3dchess__controls {
		margin-top: 6px;
	}

	.qw3dchess__controls button {
		min-height: 38px;
	}

	.qw3dchess__board-wrap {
		min-height: 200px;
		/* A fixed backend height would overflow a short landscape screen. */
		height: var(--qw-board-height, var(--qw-auto-board-height));
	}
}

/* Browsers without container queries fall back to the window width. */
@supports not (container-type: inline-size) {
	@media (min-width: 861px) {
		.qw3dchess__game {
			--qw-auto-board-height: max(320px, min(calc(100vh - 230px), 780px));
			grid-template-columns: minmax(0, 1fr);
		}
	}
}

/* ------------------------------------------------------------------ */
/* Motion and contrast preferences                                     */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.qw3dchess *,
	.qw3dchess *::before,
	.qw3dchess *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media (prefers-contrast: more) {
	.qw3dchess {
		--qw-line: #6d6d6d;
		--qw-text-muted: #d0d0d0;
	}
}