/**
 * 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: #b5691c;
	--qw-accent-ink: #1a1a1a;

	/* A separate, cooler accent for the setup screen's interactive controls
	   (difficulty / time control / colour chips, the Play button) — kept
	   independent of --qw-accent so the board/theme skin is untouched but
	   the controls read as a calm, professional UI rather than the board's
	   warm gold. Deliberately NOT redefined per board theme below, so it
	   stays constant regardless of which board skin is active. */
	--qw-control-accent: #3b6ff2;
	--qw-control-accent-strong: #2f5cd6;
	--qw-control-accent-ink: #ffffff;

	--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: #b5691c;
	--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: #b3925f;
	--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: #6a9ec8;
	--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: #8fa0b5;
	--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: #c2932e;
	--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 .qw3dchess__player-name {
	background-image: linear-gradient(180deg, rgba(255, 244, 214, .7), rgba(255, 244, 214, .38));
	border-color: var(--qw-accent);
	color: var(--qw-text);
}

/* Small wooden plates, as on the reference board. */
.qw3dchess--theme-wood .qw3dchess__more-menu button,
.qw3dchess--theme-wood .qw3dchess__floatbtn,
.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__more-menu button:hover:not(:disabled),
.qw3dchess--theme-wood .qw3dchess__floatbtn:hover:not(:disabled),
.qw3dchess--theme-wood .qw3dchess__export button:hover:not(:disabled) {
	filter: brightness(1.08);
}

.qw3dchess--theme-wood .qw3dchess__more-menu button:active:not(:disabled),
.qw3dchess--theme-wood .qw3dchess__floatbtn: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-image: linear-gradient(180deg, #46443f, #2e2c2a);
	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: #b58a38;
	--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 .qw3dchess__player-name {
	background-image: linear-gradient(180deg, rgba(255, 244, 214, .65), rgba(255, 244, 214, .32));
	border-color: var(--qw-accent);
	color: var(--qw-text);
}

.qw3dchess--theme-wood2 .qw3dchess__more-menu button,
.qw3dchess--theme-wood2 .qw3dchess__floatbtn,
.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__more-menu button:hover:not(:disabled),
.qw3dchess--theme-wood2 .qw3dchess__floatbtn:hover:not(:disabled),
.qw3dchess--theme-wood2 .qw3dchess__export button:hover:not(:disabled) {
	filter: brightness(1.08);
}

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

.qw3dchess--theme-wood2 .qw3dchess__clock {
	color: #b9ae9a;
	background-image: linear-gradient(180deg, #363430, #201e1c);
	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-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	font-weight: 600;
	text-decoration: none;
	background: var(--qw-control-accent);
	border-color: var(--qw-control-accent);
	color: var(--qw-control-accent-ink);
	transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}

.qw3dchess .qw3dchess__button:hover:not(:disabled) {
	background: var(--qw-control-accent-strong);
	border-color: var(--qw-control-accent-strong);
}

/* The setup screen's own "Start game" / sign-in button: a full-width,
   unmistakably primary call to action rather than an inline link-button. */
.qw3dchess__setup-body > p:last-child {
	margin: 20px 0 0;
}

.qw3dchess__setup-body > p:last-child > .qw3dchess__button {
	width: 100%;
	padding: 15px 22px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	border-radius: 12px;
	box-shadow: 0 10px 22px -8px rgba(59, 111, 242, .5);
}

.qw3dchess__setup-body > p:last-child > .qw3dchess__button:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -8px rgba(59, 111, 242, .6);
}

.qw3dchess__setup-body > p:last-child > .qw3dchess__button:active:not(:disabled) {
	transform: translateY(0);
}

.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                                                      */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Menu — side nav layout                                              */
/* ------------------------------------------------------------------ */

.qw3dchess__menu {
	display: grid;
	grid-template-columns: 200px 1fr;
	/* Match the actual board height (same formula/vars as .qw3dchess__board-wrap)
	   so the menu screen isn't noticeably shorter than the game screen behind it. */
	--qw-auto-board-height: max(320px, min(calc(100cqw - 8px), 82vh));
	min-height: var(--qw-board-height, var(--qw-admin-height-sm, var(--qw-auto-board-height)));
}

/* ── Sidebar ── */
.qw3dchess__sidenav {
	display: flex;
	flex-direction: column;
	padding: 20px 12px;
	background: var(--qw-surface-raised);
	border-right: 1px solid var(--qw-line);
}

.qw3dchess__sidenav-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 10px 18px;
	border-bottom: 1px solid var(--qw-line);
	margin-bottom: 12px;
}

.qw3dchess__sidenav-logo {
	font-size: 22px;
	line-height: 1;
}

.qw3dchess__sidenav-name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--qw-text);
}

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

.qw3dchess__sidenav-divider {
	height: 1px;
	background: var(--qw-line);
	margin: 10px 8px;
}

/* ── Nav items ──
   Rounded translucent rows with a colour-coded icon badge per mode —
   the label is always legible (not greyed-out until hover), so a
   first-time visitor can read every option at a glance. */
.qw3dchess__navitem {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 11px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.06);
	cursor: pointer;
	text-align: left;
	transition: background 0.12s, border-color 0.12s, transform 0.12s;
	margin-bottom: 6px;
}

.qw3dchess__navitem:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.12);
}

.qw3dchess__navitem:active {
	transform: scale(0.98);
}

.qw3dchess__navitem.is-active {
	background: var(--qw-accent-muted, rgba(181, 105, 28, 0.16));
	border-color: var(--qw-accent, #b5691c);
}

.qw3dchess__navitem-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.08);
}

/* One accent colour per mode, chess.com-style, so the row is
   recognisable by its colour before the label is even read. */
.qw3dchess__navitem[data-qw-mode="online"] .qw3dchess__navitem-icon      { background: rgba(76, 175, 125, .18); }
.qw3dchess__navitem[data-qw-mode="computer"] .qw3dchess__navitem-icon   { background: rgba(139, 124, 246, .18); }
.qw3dchess__navitem[data-qw-mode="offline"] .qw3dchess__navitem-icon    { background: rgba(90, 170, 224, .18); }
.qw3dchess__navitem[data-qw-mode="puzzle"] .qw3dchess__navitem-icon     { background: rgba(224, 116, 16, .18); }
.qw3dchess__navitem[data-qw-mode="learn"] .qw3dchess__navitem-icon      { background: rgba(80, 200, 200, .18); }
.qw3dchess__navitem[data-qw-mode="tournament"] .qw3dchess__navitem-icon { background: rgba(224, 184, 60, .2); }
.qw3dchess__navitem[data-qw-mode="profile"] .qw3dchess__navitem-icon    { background: rgba(224, 110, 160, .18); }

.qw3dchess__navitem-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--qw-text);
}

.qw3dchess__navitem.is-active .qw3dchess__navitem-label {
	color: var(--qw-accent, #b5691c);
}

/* ── Content pane ── */
.qw3dchess__menu-content {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.qw3dchess__menu-welcome {
	text-align: center;
}

.qw3dchess__menu-welcome-icon {
	display: block;
	font-size: 48px;
	line-height: 1;
	margin-bottom: 16px;
	opacity: 0.25;
}

.qw3dchess__menu-headline {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	color: var(--qw-text);
	letter-spacing: -0.01em;
}

.qw3dchess__menu-sub {
	margin: 0;
	font-size: 13px;
	color: var(--qw-text-muted);
}

/* ── Setup screen ──
   A centred, card-based form rather than a flat list of controls — each
   field group gets its own raised panel, labels are small-caps section
   headers, and choice buttons read as a proper segmented control. This
   mirrors the treatment already used on the settings grid, just carried
   over to the very first screen a player sees. */
.qw3dchess__setup {
	max-width: 560px;
	margin: 0 auto;
	padding: 28px 28px 32px;
	animation: qw3d-setup-in .18s ease both;
}

@keyframes qw3d-setup-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.qw3dchess__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	padding: 8px 14px 8px 11px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: 999px;
	background: transparent;
	color: var(--qw-text-muted);
}

.qw3dchess__back::before {
	content: "\2190";
	font-size: 13px;
	line-height: 1;
}

.qw3dchess__back:hover:not(:disabled) {
	background: var(--qw-surface-raised);
	color: var(--qw-text);
	border-color: var(--qw-line);
}

.qw3dchess__setup-title {
	position: relative;
	margin: 2px 0 22px;
	padding-left: 15px;
	font-size: clamp(20px, 5cqw, 26px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--qw-text);
	line-height: 1.2;
}

.qw3dchess__setup-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 4px;
	border-radius: 3px;
	background: var(--qw-accent);
}

.qw3dchess__field-group {
	margin-bottom: 16px;
	padding: 4px 16px;
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-line);
	border-radius: 14px;
}

.qw3dchess__field-group .qw3dchess__field {
	margin: 0;
	padding: 14px 0;
	background: none;
	border: none;
	border-radius: 0;
}

.qw3dchess__field-group .qw3dchess__field + .qw3dchess__field {
	border-top: 1px solid var(--qw-line);
}

.qw3dchess__field {
	margin-bottom: 14px;
	padding: 16px 16px 17px;
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-line);
	border-radius: 14px;
}

/* The "Play as" row: a light, secondary control that sits just above the
   Play button rather than competing with Difficulty / Time control for
   attention — mirrors how chess.com treats colour choice. */
.qw3dchess__field--inline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	padding: 2px 2px;
	background: none;
	border: none;
	border-radius: 0;
}

.qw3dchess__field-label--inline {
	flex: 0 0 auto;
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--qw-text-muted);
}

.qw3dchess__field--inline .qw3dchess__choices {
	flex: 1 1 auto;
	/* Always exactly 3 equal columns (White / Black / Random) instead of
	   auto-fit dropping to 2 or 1 as the container narrows — that's what
	   was pushing "RANDOM" onto its own undersized column and forcing it
	   to break mid-word. */
	grid-template-columns: repeat(3, 1fr);
}

.qw3dchess__field--inline .qw3dchess__choices button {
	min-height: 38px;
	padding: 7px 6px;
	/* Shrinks with the container instead of wrapping/breaking: by the
	   time the row gets tight, the text scales down and still reads on
	   one line, rather than "RANDOM" splitting into "RANDO" + "M". */
	font-size: clamp(9.5px, 3.6cqw, 12.5px);
	background: transparent;
	border-color: var(--qw-line);
}

.qw3dchess__field-label {
	display: block;
	margin-bottom: 11px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--qw-text-muted);
}

.qw3dchess__choices {
	display: grid;
	/* Grid instead of flex: every button in a row gets the same width, so
	   a row of 2 and a row of 5 don't produce mismatched button sizes —
	   the whole block reads as one consistent, professional control
	   instead of a ragged wrap. Reflows itself down to a single narrow
	   column on small screens, so it's mobile-friendly without a separate
	   breakpoint rewrite. */
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 8px;
}

.qw3dchess__choices--wrap {
	grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}

.qw3dchess__choices button {
	min-width: 0;
	min-height: 44px;
	padding: 10px 12px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	white-space: normal;
	overflow-wrap: normal;
	word-break: keep-all;
	border-radius: 8px;
	background: var(--qw-surface-sunken);
	color: var(--qw-text);
	border: 1px solid var(--qw-line);
	transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

.qw3dchess__choices button:hover:not(:disabled):not(.is-active) {
	border-color: var(--qw-control-accent);
	transform: translateY(-1px);
}

.qw3dchess__choices button.is-active,
.qw3dchess__choices button[aria-pressed="true"]:not([data-qw-action="sound"]) {
	font-weight: 700;
	color: var(--qw-control-accent-ink);
	background: var(--qw-control-accent);
	border-color: var(--qw-control-accent);
	box-shadow: 0 4px 12px -4px rgba(59, 111, 242, .45);
}

/* Small colour swatch in front of the "Play as" choices, chess.com-style. */
.qw3dchess__choices[data-qw-choice="color"] button::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	vertical-align: -1px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
}

.qw3dchess__choices[data-qw-choice="color"] button[data-value="white"]::before {
	background: #f4f4f4;
}

.qw3dchess__choices[data-qw-choice="color"] button[data-value="black"]::before {
	background: #1a1a1a;
}

.qw3dchess__choices[data-qw-choice="color"] button[data-value="random"]::before {
	background: linear-gradient(135deg, #f4f4f4 50%, #1a1a1a 50%);
}

.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 - 8px), 82vh));
	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 - 180px),
				calc(100cqw - 16px),
				1200px
			)
		);
		grid-template-columns: minmax(0, 1fr);
	}

	.qw3dchess__stage {
		padding: 12px;
	}

	.qw3dchess__menu {
		--qw-auto-board-height: max(
			320px,
			min(
				calc(100vh - 180px),
				calc(100cqw - 16px),
				1200px
			)
		);
		min-height: var(--qw-board-height, var(--qw-admin-height, var(--qw-auto-board-height)));
	}
}

@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 {
	/* A bar that lives in normal page flow above/below the board, not an
	   overlay on top of it. The board's own corner is not reliably empty:
	   in 3D the perspective camera happens to leave room there, but the
	   flat 2D board fills edge-to-edge, so a floating badge landed right
	   on the back-rank pieces. Living outside the board entirely, in
	   either render mode, means it can never cover a square. */
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-line);
	border-radius: var(--qw-radius-sm);
	max-width: none;
}

.qw3dchess__players--top {
	margin-bottom: 8px;
}

.qw3dchess__players--bottom {
	margin-top: 8px;
}

.qw3dchess__player {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	/* flex-start (not space-between): with the studio-toggle group now a
	   fourth item here, space-between would spread all four evenly across
	   the full width, prying the studio toggles and the controls apart
	   from each other. Packing everything left and pushing only the clock
	   to the far edge (.qw3dchess__player-row--time's margin-left: auto,
	   below) keeps the whole control cluster together instead. */
	justify-content: flex-start;
	gap: 6px 10px;
	width: 100%;
	padding: 2px 2px;
}

.qw3dchess__player-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* The name and the flag/status box sit side by side as two matching plates
   (per the reference HUD), so this row stretches both to the same height
   instead of centering them at their own natural sizes. */
.qw3dchess__player-row--info {
	align-items: stretch;
}

/* Always pinned to the far right of .qw3dchess__player, whatever else sits
   before it (name, studio toggles, action buttons) and however many of
   those wrap — see the justify-content: flex-start comment above. */
.qw3dchess__player-row--time {
	margin-left: auto;
}

.qw3dchess__increment {
	flex: 0 0 auto;
	padding: 3px 9px;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--qw-text-muted);
	border-radius: 999px;
	border: 1px solid var(--qw-line);
	background-image: linear-gradient(180deg, var(--qw-surface-raised), var(--qw-surface-sunken));
}

/* Per-move limit chip: highlights on the side to move, warns in the last 5s. */
.qw3dchess__increment.is-running {
	color: var(--qw-text);
	border-color: currentColor;
}

.qw3dchess__increment.is-low {
	color: #ff8a65;
}

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

.qw3dchess__player-name {
	/* Now a two-line plate: the name (+flag) on top, the difficulty badge
	   as a tiny second line underneath — one box instead of two. min-height
	   reserves room for that second line even when it's hidden (human
	   opponents have no difficulty), so the White and Computer plates
	   always come out the same height instead of the badge-less one
	   collapsing shorter. */
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-height: 38px;
	box-sizing: border-box;
	min-width: 0;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 4px;
	border: 1px solid var(--qw-line);
	background-image: linear-gradient(180deg, var(--qw-surface-raised), var(--qw-surface-sunken));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .18);
}

/* The name text + flag stay on one row inside the plate; this is what
   used to be sized/truncated on .qw3dchess__player-name itself. */
.qw3dchess__player-name-row {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	max-width: min(34vw, 46cqw);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Same reasoning as the clock: shrinks with the board's own width so a
	   long name can't outgrow the corner container on a narrow phone board. */
	font-size: clamp(12px, 4cqw, 15px);
}

/* Whoever's turn it is gets picked out on their name pill, in the theme's
   own accent colour, rather than a border drawn around the whole row. */
.qw3dchess__player.is-turn .qw3dchess__player-name {
	color: var(--qw-accent-ink);
	border-color: var(--qw-accent);
	background-image: linear-gradient(180deg, var(--qw-accent), var(--qw-accent));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, .22);
}

/* The flag (a globe emoji today; a real <img>/<svg> country flag once
   profiles can pick one — see qw3dchess-app.js) lives INSIDE the name
   element, not beside it, so icon + username are always the same single
   plate — no seam, no second box, nothing to keep visually in sync. */
.qw3dchess__player-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	font-size: 11px;
	line-height: 1;
	border-radius: 3px;
	overflow: hidden;
}

.qw3dchess__player-flag[hidden] {
	display: none;
}

/* The difficulty tag now lives INSIDE the name plate as a tiny second
   line under "Computer" — no border/background of its own any more,
   just small accent-coloured text, so it reads as a label, not a badge. */
.qw3dchess__player-badge {
	display: inline-block;
	max-width: 100%;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .03em;
	line-height: 1;
	color: var(--qw-accent);
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.qw3dchess__player-badge[hidden] {
	display: none;
}

/* On the plate whose turn it is, the whole name plate (including this
   badge) sits on an accent-coloured background — see
   ".qw3dchess__player.is-turn .qw3dchess__player-name" above. The badge's
   own text colour is that SAME accent colour, so without this override it
   disappears (accent text on an accent background) whenever it's that
   player's — most visibly the computer's — turn. Switch to the theme's
   ink colour, same as the name text does, so it stays readable. */
.qw3dchess__player.is-turn .qw3dchess__player-badge {
	color: var(--qw-accent-ink);
	opacity: .75;
}

.qw3dchess__captured {
	flex: 0 1 auto;
	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 {
	box-sizing: border-box;
	flex: 0 0 auto;
	padding: 5px 14px;
	/* Scales down with the board's own width (container units, not the
	   viewport) rather than a fixed size, so on a narrow phone board the
	   pill's own content shrinks to fit instead of overflowing past the
	   corner container's max-width and spilling outside its box. */
	font-size: clamp(15px, 5.2cqw, 25px);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
	white-space: nowrap;
	color: var(--qw-text-muted);
	border-radius: 4px;
	border: 1px solid var(--qw-line);
	background-image: linear-gradient(180deg, var(--qw-surface-raised), var(--qw-surface-sunken));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .18);
}

.qw3dchess__clock.is-running {
	color: var(--qw-text);
	border-color: var(--qw-accent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 2px color-mix(in srgb, var(--qw-accent) 25%, transparent);
}

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

.qw3dchess__clock.is-critical {
	color: #fff;
	background-image: linear-gradient(180deg, var(--qw-danger), var(--qw-danger));
	border-color: var(--qw-danger);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 3px rgba(0, 0, 0, .25);
}

/* ------------------------------------------------------------------ */
/* Undo / Flip / Sound / Studio light / Full(screen) / "more" menu      */
/* (Draw, Resign, Settings) / Exit — laid out inline, each with its     */
/* label visible, in the bottom player strip                            */
/* (.qw3dchess__player-row--actions) next to the name and clock, rather */
/* than pinned as floating icon-only buttons over the board's own       */
/* corners. Living in normal page flow there, they can never land on a  */
/* piece or a square, in either render mode. */
/* ------------------------------------------------------------------ */

.qw3dchess__player-row--actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	position: relative;
}

/* Studio light 1 & 2 toggles and the action-button row now share
   .qw3dchess__player-controls (see below), which is what actually gets
   centred — this rule just lays the toggles out inside it. */
.qw3dchess__studio-toggles {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Wraps the studio-light toggles and the action-button row as one
   cluster. flex: 1 1 auto lets it claim all the space between the name
   plate and the clock (whose own margin-left: auto — see
   .qw3dchess__player-row--time — would otherwise just leave that space
   empty), and justify-content centres both groups within it, so on a
   wide screen every button (studio lights + Undo/Flip/Sound/Full/More/
   Exit) reads as one centred cluster instead of being packed flush
   against the name plate. On a narrow screen (see the ≤559px container
   query below) this is overridden so the two groups instead stack as
   their own full-width centred rows. */
.qw3dchess__player-controls {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 10px;
}

.qw3dchess__floatbtn {
	position: static;
	flex: 0 0 auto;
	color: var(--qw-text);
	border-radius: 10px;
	border: 1px solid var(--qw-line);
	background-image: linear-gradient(180deg, var(--qw-surface-raised), var(--qw-surface-sunken));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .18);
}

.qw3dchess__floatbtn:hover:not(:disabled) {
	filter: brightness(1.12);
}

.qw3dchess__floatbtn:active:not(:disabled) {
	transform: translateY(1px);
}

.qw3dchess__morewrap {
	position: relative;
	flex: 0 0 auto;
}

.qw3dchess__more-menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 170px;
	padding: 6px;
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-line);
	border-radius: 12px;
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .6);
}

/* Inside the popover, controls read as a vertical list (icon + label side
   by side) rather than the small square icon-over-label toolbar buttons
   they used to be. */
.qw3dchess__more-menu button.qw3dchess__ctrl {
	flex-direction: row;
	justify-content: flex-start;
	gap: 9px;
	width: 100%;
	min-width: 0;
	min-height: 40px;
	padding: 8px 10px;
	border-radius: 8px;
}

.qw3dchess__more-menu .qw3dchess__ctrl-label {
	font-size: 12px;
	text-transform: none;
	letter-spacing: normal;
}

.qw3dchess__ctrl-sep {
	height: 1px;
	width: auto;
	align-self: stretch;
	min-height: 0;
	background: var(--qw-line);
	margin: 4px 2px;
}

/* ------------------------------------------------------------------ */
/* Controls: icon-over-label layout, used both by the standalone       */
/* buttons in .qw3dchess__player-row--actions (paired with the         */
/* .qw3dchess__floatbtn plate above for background/border) and by the  */
/* items inside the .qw3dchess__more-menu popover (which override the  */
/* layout to a horizontal row further down).                           */
/* ------------------------------------------------------------------ */

button.qw3dchess__ctrl {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 52px;
	min-height: 44px;
	padding: 6px 8px 5px;
	line-height: 1;
}

.qw3dchess__ctrl-icon {
	font-size: 16px;
}

.qw3dchess__ctrl-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--qw-text-muted);
	transition: color .15s ease;
}

.qw3dchess__ctrl:hover:not(:disabled) .qw3dchess__ctrl-label {
	color: var(--qw-text);
}

.qw3dchess__ctrl.is-off .qw3dchess__ctrl-icon {
	opacity: .5;
}

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

/* Resign / exit read as the two "leave the game" actions — a faint warm
   tint on hover signals that without shouting at rest. */
.qw3dchess__ctrl--danger:hover:not(:disabled) {
	border-color: var(--qw-danger);
}

.qw3dchess__ctrl--danger:hover:not(:disabled) .qw3dchess__ctrl-label {
	color: var(--qw-danger);
}

/* Groups the primary game actions (flip/draw/resign) away from the
   utility actions (sound/settings/fullscreen) inside the "more" popover,
   the way a professional toolbar separates related controls. Full rule
   definition (horizontal, for the vertical popover list) is above. */

/* ------------------------------------------------------------------ */
/* 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: 8px;
	bottom: 8px;
	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                                                             */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Dialog — shared backdrop + panel                                    */
/* ------------------------------------------------------------------ */

@keyframes qw-dialog-in {
	from { opacity: 0; transform: scale(.93) translateY(8px); }
	to   { opacity: 1; transform: scale(1)  translateY(0);    }
}

.qw3dchess__dialog {
	/* Fixed to the viewport rather than absolute to the widget box. The
	   widget can be shorter than its own dialog content (a narrow sidebar
	   column, a short embed) — with `absolute` the backdrop was clipped to
	   the widget's own height/overflow:hidden box, so the dialog's top and
	   bottom ends up cut off instead of simply being centred on screen.
	   `fixed` always covers the full, real viewport no matter where the
	   widget sits on the page or how tall it is. */
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .62);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* Above the pseudo-fullscreen board (z-index 99999) and any theme
	   chrome (sticky headers, admin bar) so it is never hidden behind
	   something else on the host page. */
	z-index: 999999;
	cursor: pointer;
}

.qw3dchess__dialog[hidden] {
	display: none;
}

.qw3dchess__dialog-inner {
	width: min(100%, 400px);
	max-height: min(90dvh, 640px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 28px 28px 22px;
	text-align: center;
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-line);
	border-radius: 18px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .55), 0 4px 16px rgba(0, 0, 0, .3);
	cursor: default;
	animation: qw-dialog-in .22s cubic-bezier(.22,.68,0,1.2) both;
	/* Keep every control's own theme-accent focus ring visible on top of
	   the raised card instead of it clipping at the card edge. */
	margin: auto;
}

/* Buttons/inputs inside dialogs sometimes fell back to the browser's
   default blue focus ring instead of the theme accent used everywhere
   else in the widget (the "starting" menu screen included). Force the
   same accent-coloured ring here so the settings panel always reads as
   part of the same UI as the rest of the board. */
.qw3dchess__dialog-inner button:focus,
.qw3dchess__dialog-inner button:focus-visible,
.qw3dchess__dialog-inner input:focus,
.qw3dchess__dialog-inner input:focus-visible {
	outline: 2px solid var(--qw-accent);
	outline-offset: 2px;
}

.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: center;
	gap: 10px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--qw-line);
}

.qw3dchess__dialog-actions button {
	min-width: 96px;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 9px;
	transition: opacity .15s, transform .12s;
}

.qw3dchess__dialog-actions button:hover {
	opacity: .85;
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ */
/* Result dialog — win / lose / draw                                   */
/* ------------------------------------------------------------------ */

/* Coloured top bar based on outcome class set by JS */
.qw3dchess__result-inner {
	border-top: 4px solid var(--qw-line);
}

.qw3dchess__result-inner.is-win {
	border-top-color: #4caf7d;
}

.qw3dchess__result-inner.is-lose {
	border-top-color: #e4574c;
}

.qw3dchess__result-inner.is-draw {
	border-top-color: #e0a020;
}

.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-icon {
	display: block;
	font-size: 52px;
	line-height: 1;
	margin: 0 0 14px;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

.qw3dchess__result-headline {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--qw-text);
}

.qw3dchess__result-inner.is-win  .qw3dchess__result-headline { color: #4caf7d; }
.qw3dchess__result-inner.is-lose .qw3dchess__result-headline { color: #e4574c; }
.qw3dchess__result-inner.is-draw .qw3dchess__result-headline { color: #e0a020; }

.qw3dchess__result-detail {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--qw-text-muted);
	letter-spacing: .01em;
}

.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: 2px;
	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 {
	/* The piece pictures are bigger than their square (and sit low in it), so a
	   ring that is smaller than the square cut through them. This one fills the
	   whole square, is nudged down to the piece's centre, and is drawn on top of
	   the piece (it is only an outline) so the piece is fully circled. */
	width: 104%;
	height: 104%;
	margin-top: 4%;
	box-sizing: border-box;
	border-radius: 50%;
	border: 4px solid var(--qw-capture);
	background: radial-gradient(circle, transparent 58%, var(--qw-capture) 160%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .35);
	z-index: 12;
}

.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 clarity: both armies must stay readable on every board colour. White
   pieces are brightened and outlined in dark; black pieces are lightened a
   little and outlined in cream. Only touches the 2D picture pieces. */
.qw3dchess .qw3dchess__piece--img.qw3dchess__piece--white .qw3dchess__piece-img {
	filter: brightness(1.5) saturate(.7) contrast(1.05) drop-shadow(1.5px 0 0 #140d05) drop-shadow(-1.5px 0 0 #140d05) drop-shadow(0 1.5px 0 #140d05) drop-shadow(0 -1.5px 0 #140d05) drop-shadow(0 3px 4px rgba(0, 0, 0, .4)) !important;
}
.qw3dchess .qw3dchess__piece--img.qw3dchess__piece--black .qw3dchess__piece-img {
	filter: brightness(1.3) contrast(1.05) drop-shadow(1.5px 0 0 #fff3d6) drop-shadow(-1.5px 0 0 #fff3d6) drop-shadow(0 1.5px 0 #fff3d6) drop-shadow(0 -1.5px 0 #fff3d6) drop-shadow(0 3px 4px rgba(0, 0, 0, .35)) !important;
}

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

/* The Studio light toggle only means anything on the 3D board's
   Three.js lights — hide it in 2D mode rather than showing a
   control with nothing to switch. */
/* v1.6.15: the Lights button and Light 1/2/3 now stay visible in 2D too. */

.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);
}

/* ------------------------------------------------------------------ */
/* 2D board colours: clear squares for every theme                     */
/* ------------------------------------------------------------------ */
/* Each theme gets a light and a dark square that are both mid-tone, so white
   AND black pieces read clearly on either. Only the flat board is affected
   (every rule needs .qw3dchess--render-2d); the 3D board keeps its materials. */
.qw3dchess--render-2d.qw3dchess--theme-classic   { --qw-square-light: #efe4c4; --qw-square-dark: #c49a52; }
.qw3dchess--render-2d.qw3dchess--theme-tableboard { --qw-square-light: #dcc9a4; --qw-square-dark: #8d6b4a; }
.qw3dchess--render-2d.qw3dchess--theme-modern    { --qw-square-light: #ededed; --qw-square-dark: #3a3a3a; }
.qw3dchess--render-2d.qw3dchess--theme-dark      { --qw-square-light: #a7a8b2; --qw-square-dark: #5a5b66; }
.qw3dchess--render-2d.qw3dchess--theme-wood3     { --qw-square-light: #e1d2b0; --qw-square-dark: #8a7355; }
.qw3dchess--render-2d.qw3dchess--theme-wood,
.qw3dchess--render-2d.qw3dchess--theme-wood2     { --qw-square-light: #d9bf95; --qw-square-dark: #7f6140; }

/* Wood keeps its grain; a tint on top lifts the near-black squares to walnut. */
.qw3dchess--render-2d.qw3dchess--theme-wood .qw3dchess-board2d__square--light,
.qw3dchess--render-2d.qw3dchess--theme-wood2 .qw3dchess-board2d__square--light {
	background-image: linear-gradient(rgba(205, 170, 120, .35), rgba(205, 170, 120, .35)), var(--qw-wood-light, none);
}
.qw3dchess--render-2d.qw3dchess--theme-wood .qw3dchess-board2d__square--dark,
.qw3dchess--render-2d.qw3dchess--theme-wood2 .qw3dchess-board2d__square--dark {
	background-image: linear-gradient(rgba(176, 128, 76, .62), rgba(176, 128, 76, .62)), var(--qw-wood-dark, none);
}

/* Coordinates: printed in the corners, each in the colour of the other kind
   of square, so they stay readable on every theme (same idea as classic). */
.qw3dchess--render-2d .qw3dchess-board2d__coords-files,
.qw3dchess--render-2d .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-board2d__coords-files { left: 2px; right: 2px; bottom: 2px; }
.qw3dchess--render-2d .qw3dchess-board2d__coords-ranks { top: 2px; bottom: 2px; left: 2px; }
.qw3dchess--render-2d .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-board2d__coords-ranks span { flex: 1 1 0; padding: 1px 0 0 4px; }
.qw3dchess--render-2d .qw3dchess-board2d__coords-files span:nth-child(odd),
.qw3dchess--render-2d .qw3dchess-board2d__coords-ranks span:nth-child(even) { color: var(--qw-square-light); }
.qw3dchess--render-2d .qw3dchess-board2d__coords-files span:nth-child(even),
.qw3dchess--render-2d .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);
}

/* ── Fullscreen orientation picker ──
   The Full control's popover offering Portrait / Landscape. Only ever
   opened on touch devices (see isTouchDevice in the JS); desktop keeps the
   old one-tap-to-fullscreen behaviour. */
.qw3dchess__fs {
	position: relative;
	display: inline-flex;
}

.qw3dchess__fs-menu {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 140px;
	padding: 6px;
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-line);
	border-radius: 12px;
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .6);
}

.qw3dchess__fs-option {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 12px;
	min-height: 40px;
	font-size: 13px;
	font-weight: 600;
	color: var(--qw-text);
	background: transparent;
	border: 0;
	border-radius: 8px;
	text-align: left;
}

.qw3dchess__fs-option:hover,
.qw3dchess__fs-option:focus-visible {
	background: var(--qw-surface-sunken);
}

.qw3dchess__fs-option-icon {
	display: inline-block;
	width: 14px;
	height: 20px;
	border: 2px solid currentColor;
	border-radius: 3px;
	flex: 0 0 auto;
}

.qw3dchess__fs-option-icon--landscape {
	transform: rotate(90deg);
}

/* ── Game-style control buttons (chunky arcade, gold) ──
   Applies to the Studio 1/2/3 toggles and the Undo/Flip/Sound/Full/More/
   Exit row on every theme EXCEPT the wood themes, whose wooden plate
   buttons (rules near the top of this file) are left exactly as they
   were. A thick dark bottom edge gives the raised look; pressing sinks
   the button onto it. Toggles that are ON fill solid gold; OFF ones sit
   dark and dim. Colours are variables so the whole set is one edit. */
.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__studio-toggles,
.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__player-row--actions {
	--qw-btn-face: #333333;
	--qw-btn-edge: #0d0d0d;
	--qw-btn-text: #f3ead0;
	--qw-btn-off-face: #262626;
	--qw-btn-off-text: #807760;
	--qw-btn-on-face: #e6c36a;
	--qw-btn-on-edge: #8a6d1f;
	--qw-btn-on-text: #2a1f05;
}

.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__studio-toggles button.qw3dchess__floatbtn,
.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__player-row--actions button.qw3dchess__floatbtn {
	box-sizing: border-box;
	color: var(--qw-btn-text);
	background-color: var(--qw-btn-face);
	background-image: none;
	border: 0;
	border-bottom: 4px solid var(--qw-btn-edge);
	border-radius: 12px;
	box-shadow: none;
	transition: transform .08s ease, border-bottom-width .08s ease, filter .15s ease;
}

.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__studio-toggles button.qw3dchess__floatbtn:active:not(:disabled),
.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__player-row--actions button.qw3dchess__floatbtn:active:not(:disabled) {
	transform: translateY(3px);
	border-bottom-width: 1px;
}

.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__studio-toggles .qw3dchess__ctrl-label,
.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__player-row--actions .qw3dchess__ctrl-label {
	color: inherit;
	text-decoration: none;
}

.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__studio-toggles button.qw3dchess__floatbtn[aria-pressed="true"] {
	color: var(--qw-btn-on-text);
	background-color: var(--qw-btn-on-face);
	border-bottom-color: var(--qw-btn-on-edge);
}

.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__studio-toggles button.qw3dchess__floatbtn.is-off,
.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__studio-toggles button.qw3dchess__floatbtn[aria-pressed="false"] {
	color: var(--qw-btn-off-text);
	background-color: var(--qw-btn-off-face);
	border-bottom-color: var(--qw-btn-edge);
}

.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__studio-toggles .qw3dchess__ctrl.is-off .qw3dchess__ctrl-icon {
	opacity: 1;
}

/* ── Gold username plates (same palette as the game-style buttons) ──
   The player whose turn it is gets the solid gold plate (like an ON
   toggle); the other plate stays dark with gold-cream text. Wood themes
   are excluded and keep their own plates. */
.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__player-name {
	color: #f3ead0;
	background-color: #333333;
	background-image: none;
	border: 0;
	border-bottom: 4px solid #0d0d0d;
	border-radius: 10px;
	box-shadow: none;
}

.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__player.is-turn .qw3dchess__player-name {
	color: #2a1f05;
	background-color: #e6c36a;
	background-image: none;
	border-bottom-color: #8a6d1f;
	box-shadow: none;
}

.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__player-badge {
	color: #e6c36a;
}

.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__player.is-turn .qw3dchess__player-badge {
	color: #2a1f05;
	opacity: .8;
}

/* ── Forced landscape ──
   Chosen explicitly from the picker above. While the device is still
   physically portrait (rotation off, or simply not turned), rotate the
   whole fullscreen container so the board still renders landscape. If the
   OS itself later rotates to landscape, this media query stops matching
   and the rotation drops away on its own — no double-rotation. */
@media (orientation: portrait) {
	.qw3dchess--force-landscape.qw3dchess--fullscreen,
	.qw3dchess--force-landscape.qw3dchess--pseudo-fullscreen {
		position: fixed;
		top: 0;
		left: 100%;
		width: 100vh !important;
		width: 100dvh !important;
		height: 100vw !important;
		height: 100dvw !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		transform-origin: 0 0;
		transform: rotate(90deg);
		overflow: hidden;
	}

	.qw3dchess--force-landscape.qw3dchess--fullscreen .qw3dchess__game,
	.qw3dchess--force-landscape.qw3dchess--pseudo-fullscreen .qw3dchess__game {
		height: 100% !important;
	}
}

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

/* Phones and other narrow boards. */
@container qw3dchess (max-width: 559px) {
	/* On phones the whole menu IS the button list — chess.com-style — so
	   the split sidebar/content-pane layout goes away and the welcome
	   pane (which only made sense next to a sidebar) is hidden. */
	.qw3dchess__menu {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		min-height: 0;
	}

	.qw3dchess__sidenav {
		padding: 16px 14px;
		border-right: none;
		border-bottom: none;
	}

	.qw3dchess__sidenav-brand {
		display: none;
	}

	.qw3dchess__sidenav-divider {
		margin: 8px 4px;
	}

	.qw3dchess__navitem {
		padding: 13px 14px;
	}

	.qw3dchess__navitem-label {
		font-size: 14px;
	}

	.qw3dchess__menu-content {
		display: none;
	}

	.qw3dchess__setup {
		max-width: none;
		padding: 16px 14px 20px;
	}

	.qw3dchess__setup-title {
		font-size: 20px;
		margin-bottom: 16px;
	}

	.qw3dchess__field {
		padding: 14px 14px 15px;
		border-radius: 12px;
	}

	.qw3dchess__choices {
		grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
	}

	.qw3dchess__choices--wrap {
		grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	}

	.qw3dchess__choices button {
		min-height: 44px;
		min-width: 0;
		padding: 8px 6px;
		font-size: 12px;
		white-space: normal;
		line-height: 1.25;
	}

	.qw3dchess__back {
		min-height: 40px;
	}

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

	.qw3dchess__player-name {
		max-width: min(32vw, 46cqw);
		flex: 0 1 auto;
		min-width: 0;
	}

	.qw3dchess__captured {
		font-size: 13px;
	}

	/* Layout C: name, studio icons, clock and move-timer chip all on one
	   line. The clock and the chip are matching 32px-tall boxes (same
	   height, radius and fill) so they read as a pair; the chip drops its
	   desktop pill shape here to match. */
	.qw3dchess__player-row--time {
		flex-wrap: nowrap;
		gap: 5px;
	}

	.qw3dchess__clock,
	.qw3dchess__increment {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 32px;
		padding: 0 8px;
		border-radius: 6px;
		border: 1px solid var(--qw-line);
		background-image: linear-gradient(180deg, var(--qw-surface-raised), var(--qw-surface-sunken));
		line-height: 1;
		white-space: nowrap;
	}

	.qw3dchess__clock {
		font-size: 17px;
	}

	.qw3dchess__increment {
		font-size: 13px;
	}

	.qw3dchess__increment[hidden] {
		display: none;
	}

	/* The Studio 1/2/3 toggles now stay on the name/clock line (username,
	   studio toggles, clock, all inline like desktop) and only the Undo/
	   Flip/Sound/Full/More/Exit row drops to its own full-width line
	   below. .qw3dchess__player-controls is just a layout wrapper (see
	   the comment on it in board.php / above in this file) with no
	   behaviour of its own, so display: contents removes its box and
	   hands its two children (studio-toggles, the actions row) directly
	   to the outer .qw3dchess__player flex container — letting each be
	   positioned independently by order/flex-basis below, instead of
	   moving as one fused block. */
	.qw3dchess__player-controls {
		display: contents;
	}

	/* Default order (0): flows with the name and clock on the first line.
	   flex: 1 1 auto makes it claim the leftover space between the name
	   plate and the clock — the same trick .qw3dchess__player-controls
	   uses on desktop (see its rule above) — and justify-content: center
	   then centres the three buttons within that space, instead of them
	   sitting packed flush against the name with a gap before the clock. */
	.qw3dchess__studio-toggles {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 5px;
	}

	/* order: 3 puts this after the name/studio-toggles/clock (all order 0)
	   regardless of its earlier position in the source, and flex-basis:
	   100% forces it onto its own full-width centred row underneath. */
	.qw3dchess__player-row--actions {
		order: 3;
		flex-basis: 100%;
		justify-content: center;
		flex-wrap: wrap;
		gap: 5px;
	}

	/* Labelled buttons (Undo / Flip / Sound / Full / More / Exit) need to
	   be noticeably narrower here than their 52px desktop width to fit
	   comfortably on a typical phone, while staying a comfortably
	   tappable 44px tall; they wrap onto a second line if needed. */
	.qw3dchess__player-row--actions button.qw3dchess__ctrl {
		min-width: 42px;
		min-height: 44px;
		padding: 5px 4px 4px;
		gap: 2px;
	}

	/* Studio toggles are icon-only here (30x32) so name, three toggles,
	   clock and chip fit on one line; the label stays as the button's
	   title/aria-label for accessibility. */
	.qw3dchess__studio-toggles button.qw3dchess__ctrl {
		min-width: 30px;
		width: 30px;
		min-height: 32px;
		height: 32px;
		padding: 0;
	}

	.qw3dchess__studio-toggles .qw3dchess__ctrl-label {
		display: none;
	}

	.qw3dchess__studio-toggles .qw3dchess__ctrl-icon {
		font-size: 16px;
	}

	.qw3dchess__ctrl-icon {
		font-size: 14px;
	}

	.qw3dchess__ctrl-label {
		font-size: 8px;
	}

	.qw3dchess__ctrl-sep {
		margin: 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 - 198px));
		grid-template-columns: minmax(0, 1fr);
	}

	.qw3dchess__clock {
		padding: 2px 8px;
	}

	.qw3dchess__stage {
		padding: 6px 8px;
	}

	.qw3dchess__player {
		padding: 2px 2px;
	}

	.qw3dchess__player-row--actions button.qw3dchess__ctrl {
		min-width: 42px;
		min-height: 40px;
		padding: 4px 4px 3px;
		gap: 2px;
	}

	.qw3dchess__player-row--actions .qw3dchess__ctrl-icon {
		font-size: 14px;
	}

	.qw3dchess__player-row--actions .qw3dchess__ctrl-label {
		font-size: 8px;
	}

	/* Studio light 1 & 2 are a separate flex item from the action buttons
	   inside .qw3dchess__player-controls, so they need their own matching
	   shrink here. */
	.qw3dchess__studio-toggles button.qw3dchess__ctrl {
		min-width: 42px;
		min-height: 40px;
		padding: 4px 4px 3px;
		gap: 2px;
	}

	.qw3dchess__studio-toggles .qw3dchess__ctrl-icon {
		font-size: 14px;
	}

	.qw3dchess__studio-toggles .qw3dchess__ctrl-label {
		font-size: 8px;
	}

	.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 - 340px), 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;
	}
}

/* ── Learn chess course ──
   Everything follows the active board theme: squares use --qw-square-*,
   pieces are the theme's own 2D pictures, accents use --qw-accent, and the
   buttons copy the plugin's game-style gold buttons (or the wooden plates
   on the wood themes). */
.qwl {
	--qwl-face: #333333;
	--qwl-edge: #0d0d0d;
	--qwl-ink: #f3ead0;
	--qwl-pri: #e6c36a;
	--qwl-pri-edge: #8a6d1f;
	--qwl-pri-ink: #2a1f05;
	color: var(--qw-text);
	line-height: 1.55;
}
[class*="qw3dchess--theme-wood"] .qwl {
	--qwl-face: #c4a878;
	--qwl-edge: #8a6d40;
	--qwl-ink: var(--qw-text);
	--qwl-pri: var(--qw-accent);
	--qwl-pri-edge: #7a5c1f;
	--qwl-pri-ink: var(--qw-accent-ink);
}

/* Buttons */
.qw3dchess button.qwl-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	padding: 10px 16px;
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--qwl-ink);
	background-color: var(--qwl-face);
	background-image: none;
	border: 0;
	border-bottom: 4px solid var(--qwl-edge);
	border-radius: 12px;
	box-shadow: none;
	cursor: pointer;
	transition: transform .08s ease, border-bottom-width .08s ease, filter .15s ease;
}
[class*="qw3dchess--theme-wood"] button.qwl-btn {
	background-image: linear-gradient(rgba(240, 222, 182, .55), rgba(150, 112, 66, .18)), var(--qw-wood-frame, none);
	background-size: cover;
	box-shadow: inset 0 1px 0 rgba(255, 244, 220, .5);
}
.qw3dchess button.qwl-btn:hover:not(:disabled) { filter: brightness(1.1); }
.qw3dchess button.qwl-btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
.qw3dchess button.qwl-btn:disabled { opacity: .4; cursor: default; }
.qw3dchess button.qwl-btn--pri { color: var(--qwl-pri-ink); background-color: var(--qwl-pri); border-bottom-color: var(--qwl-pri-edge); }
.qw3dchess button.qwl-btn--sm { padding: 8px 12px; font-size: 12px; }
.qw3dchess button.qwl-btn--lg { padding: 14px 20px; font-size: 15px; width: 100%; margin: 4px 0 18px; }

/* Home */
.qwl-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.qwl-hero-ico { flex: 0 0 auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 30px; border-radius: 16px; background: var(--qw-accent); color: var(--qw-accent-ink); }
.qwl-intro { margin: 0; font-size: 14px; color: var(--qw-text-muted); }
.qwl-bar { height: 10px; border-radius: 999px; background: var(--qw-surface-sunken); border: 1px solid var(--qw-line); overflow: hidden; }
.qwl-bar-fill { display: block; height: 100%; background: var(--qw-accent); border-radius: 999px; transition: width .3s ease; }
.qwl-stats { margin: 6px 0 12px; font-size: 12px; color: var(--qw-text-muted); }

.qwl-course { margin-bottom: 14px; padding: 14px; border-radius: 16px; background: var(--qw-surface-raised); border: 1px solid var(--qw-line); }
.qwl-course-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.qwl-course-ico { flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 22px; border-radius: 12px; background: var(--qw-accent); color: var(--qw-accent-ink); }
.qwl-course-text { flex: 1 1 auto; min-width: 0; }
.qwl-course-title { margin: 0; font-size: 16px; font-weight: 800; }
.qwl-course-blurb { margin: 2px 0 0; font-size: 12px; color: var(--qw-text-muted); }
.qwl-course-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.qwl-pill { padding: 2px 9px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; background: var(--qw-surface-sunken); color: var(--qw-text-muted); border: 1px solid var(--qw-line); }
.qwl-course-count { font-size: 12px; font-weight: 800; color: var(--qw-accent); }

.qwl-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qw3dchess button.qwl-lesson { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 12px; font: inherit; font-size: 14px; text-align: left; color: var(--qw-text); background: var(--qw-surface); border: 1px solid var(--qw-line); border-radius: 12px; box-shadow: none; cursor: pointer; transition: border-color .15s ease, transform .08s ease; }
.qw3dchess button.qwl-lesson:hover { border-color: var(--qw-accent); }
.qw3dchess button.qwl-lesson:active { transform: scale(.99); }
.qwl-lesson-num { flex: 0 0 auto; width: 26px; height: 26px; line-height: 26px; text-align: center; font-size: 12px; font-weight: 800; border-radius: 50%; background: var(--qw-surface-sunken); color: var(--qw-text-muted); }
.qwl-lesson.is-done .qwl-lesson-num { background: var(--qw-accent); color: var(--qw-accent-ink); }
.qwl-lesson-emoji { flex: 0 0 auto; font-size: 18px; }
.qwl-lesson-title { flex: 1 1 auto; font-weight: 700; }
.qw3dchess button.qwl-link { appearance: none; margin-top: 4px; padding: 4px 0; font: inherit; font-size: 12px; color: var(--qw-text-muted); background: none; border: 0; text-decoration: underline; cursor: pointer; box-shadow: none; }

/* Lesson */
.qwl-crumb { margin: 0 0 6px; font-size: 12px; color: var(--qw-text-muted); }
.qwl-lhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.qwl-lhead-ico { flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 28px; border-radius: 16px; background: var(--qw-accent); color: var(--qw-accent-ink); }
.qwl-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.qwl-idea { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--qw-accent); background: var(--qw-surface-raised); }
.qwl-idea-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--qw-accent); }
.qwl-idea-text { font-size: 15px; font-weight: 700; }
.qwl-h { margin: 20px 0 6px; font-size: 16px; font-weight: 800; }
.qwl-p { margin: 0 0 10px; font-size: 14px; }
.qwl-ul { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.qwl-ul li { margin: 0 0 6px; }

.qwl-note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; padding: 10px 12px; font-size: 14px; border-radius: 12px; background: var(--qw-surface-raised); border-left: 5px solid var(--qw-accent); }
.qwl-note--warn { border-left-color: var(--qw-danger); }
.qwl-note--key { border-left-color: #4caf7d; }
.qwl-note-ico { flex: 0 0 auto; font-size: 18px; line-height: 1.3; }

/* Boards */
.qwl-fig { margin: 12px 0 18px; }
.qwl-cap { margin-top: 6px; font-size: 12px; color: var(--qw-text-muted); }
.qwl-board { position: relative; width: min(100%, 360px); aspect-ratio: 1 / 1; container-type: size; overflow: hidden; border-radius: 10px; border: 3px solid var(--qw-line); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); user-select: none; -webkit-user-select: none; }
.qwl-board.is-tappable { cursor: pointer; }
.qwl-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.qwl-sq { position: relative; }
.qwl-sq.is-light { background-color: var(--qw-square-light); background-image: var(--qw-wood-light, none); background-size: cover; }
.qwl-sq.is-dark { background-color: var(--qw-square-dark); background-image: var(--qw-wood-dark, none); background-size: cover; }
.qwl-sq.is-hi::before, .qwl-sq.is-bad::before { content: ""; position: absolute; inset: 0; background: var(--qw-selected, rgba(255, 215, 130, .5)); }
.qwl-sq.is-bad::before { background: var(--qw-check, rgba(228, 87, 76, .6)); }
.qwl-sq.is-tg::after { content: ""; position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; border-radius: 50%; background: rgba(46, 160, 90, .85); box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); z-index: 3; }
.qwl-sq.is-ring::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 4px solid var(--qw-capture, rgba(242, 130, 92, .9)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); z-index: 3; }
.qwl-coord { position: absolute; font-style: normal; font-size: 9px; font-weight: 800; line-height: 1; z-index: 4; pointer-events: none; }
.qwl-coord--rank { top: 2px; left: 3px; }
.qwl-coord--file { bottom: 2px; right: 3px; }
.qwl-sq.is-light .qwl-coord { color: #4a3c2a; }
.qwl-sq.is-dark .qwl-coord { color: #e6dcc8; }

.qwl-pieces { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.qwl-piece { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; display: flex; align-items: center; justify-content: center; transition: transform .5s cubic-bezier(.3, .7, .3, 1), opacity .25s ease; }
.qwl-piece.is-gone { opacity: 0; transform-origin: center; }
/* Same sizing as the 2D board: the pictures have transparent padding, so they are
   scaled up (--qw-piece-scale) and sit on the bottom of the square. */
.qwl-piece { overflow: visible; }
.qw3dchess .qwl-piece img {
	/* Site themes and page builders often style every img (max-width: 100%,
	   height: auto, margins, borders). Without !important that squeezes the
	   picture and pushes it off-centre, so position and size are forced,
	   exactly as the 2D board does it. */
	position: absolute !important;
	left: calc((100% - 100% * var(--qw-piece-scale, 1.5)) / 2) !important;
	right: auto !important;
	top: auto !important;
	bottom: 2% !important;
	width: calc(100% * var(--qw-piece-scale, 1.5)) !important;
	height: calc(100% * var(--qw-piece-scale, 1.5) * .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;
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4));
}
/* Make both armies stand out on any board colour: white pieces are brightened
   and get a dark outline, black pieces get a light outline and a soft glow, so
   a black piece on a dark square (or a white one on a light square) never
   disappears. */
.qw3dchess .qwl-piece--white img {
	filter: brightness(1.75) saturate(.55) contrast(1.05) drop-shadow(1.5px 0 0 #1a1208) drop-shadow(-1.5px 0 0 #1a1208) drop-shadow(0 1.5px 0 #1a1208) drop-shadow(0 -1.5px 0 #1a1208) drop-shadow(0 3px 3px rgba(0, 0, 0, .45)) !important;
}
.qw3dchess .qwl-piece--black img {
	filter: brightness(1.15) drop-shadow(1.5px 0 0 #fff4da) drop-shadow(-1.5px 0 0 #fff4da) drop-shadow(0 1.5px 0 #fff4da) drop-shadow(0 -1.5px 0 #fff4da) drop-shadow(0 0 4px rgba(255, 244, 218, .55)) !important;
}
.qw3dchess .qwl-piece--k img, .qw3dchess .qwl-piece--q img, .qw3dchess .qwl-piece--b img { height: calc(100% * var(--qw-piece-scale, 1.5) * .7) !important; }
.qwl-piece.is-glyph { font-size: 10cqw; line-height: 1; }
.qwl-piece.is-glyph.is-white { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.qwl-piece.is-glyph.is-black { color: #161616; text-shadow: 0 0 1px rgba(255, 255, 255, .6); }

.qwl-tap, .qwl-say { margin: 6px 0 0; font-size: 12px; color: var(--qw-text-muted); }
.qwl-say { min-height: 1.5em; font-size: 13px; color: var(--qw-text); font-weight: 600; }
.qwl-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.qwl-moves { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; margin-top: 8px; font-size: 13px; }
.qwl-movenum { margin-left: 4px; font-weight: 700; color: var(--qw-text-muted); }
.qw3dchess button.qwl-chip { appearance: none; padding: 2px 7px; font: inherit; font-size: 13px; font-weight: 700; color: var(--qw-text); background: var(--qw-surface-raised); border: 1px solid var(--qw-line); border-radius: 8px; box-shadow: none; cursor: pointer; }
.qw3dchess button.qwl-chip.is-on { color: var(--qw-accent-ink); background: var(--qw-accent); border-color: var(--qw-accent); }

/* Your turn! */
.qwl-quiz { margin: 16px 0 20px; padding: 12px; border-radius: 16px; border: 2px dashed var(--qw-accent); background: var(--qw-surface-raised); }
.qwl-quiz.is-solved { border-style: solid; border-color: #4caf7d; }
.qwl-quiz-badge { display: inline-block; margin-bottom: 6px; padding: 3px 10px; font-size: 12px; font-weight: 800; border-radius: 999px; background: var(--qw-accent); color: var(--qw-accent-ink); }
.qwl-quiz-ask { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.qwl-feedback { min-height: 1.4em; margin: 8px 0 0; font-size: 13px; font-weight: 700; }
.qwl-feedback.is-ok { color: #3fa56d; }
.qwl-feedback.is-bad { color: var(--qw-danger); }
.qwl-quiz.is-shake .qwl-board { animation: qwl-shake .45s ease; }
@keyframes qwl-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.qwl-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.qwl-nav .qwl-btn--pri { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
	.qwl-piece, .qwl-bar-fill { transition: none; }
	.qwl-quiz.is-shake .qwl-board { animation: none; }
}

/* ------------------------------------------------------------------ */
/* Time dials (minutes / bonus / per-move)                             */
/* ------------------------------------------------------------------ */

.qw3dchess__time-sum {
	padding: 12px 14px;
	background: var(--qw-surface-sunken);
	border: 1px solid var(--qw-line);
	border-radius: 10px;
}

.qw3dchess__time-big {
	font-size: clamp(19px, 5.4cqw, 26px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--qw-text);
}

.qw3dchess__time-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--qw-text-muted);
}

.qw3dchess__time-tag {
	flex: 0 0 auto;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--qw-text);
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-line);
	border-radius: 999px;
}

.qw3dchess__time-hint {
	min-height: 18px;
	margin: 8px 2px 10px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--qw-text-muted);
}

.qw3dchess__dials {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.qw3dchess__dial {
	min-width: 0;
	text-align: center;
	transition: opacity .15s ease;
}

.qw3dchess__dial.is-dim { opacity: .38; }

.qw3dchess__dial svg {
	display: block;
	width: 100%;
	max-width: 132px;
	margin: 0 auto;
	border-radius: 50%;
	outline: none;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.qw3dchess__dial svg:active { cursor: grabbing; }
.qw3dchess__dial svg:focus-visible { box-shadow: 0 0 0 3px var(--qw-control-accent); }

.qw3dchess__dial-track,
.qw3dchess__dial-value {
	fill: none;
	stroke-width: 9;
	stroke-linecap: round;
}

.qw3dchess__dial-track { stroke: var(--qw-line); }
.qw3dchess__dial-value { stroke: var(--qw-control-accent); }
.qw3dchess__dial-face { fill: var(--qw-surface-raised); stroke: var(--qw-line); }
.qw3dchess__dial-nub { fill: #fff; stroke: var(--qw-control-accent); stroke-width: 3; }

.qw3dchess__dial-read {
	fill: var(--qw-text);
	font: 700 19px var(--qw-font);
	text-anchor: middle;
	font-variant-numeric: tabular-nums;
}

.qw3dchess__dial-unit {
	fill: var(--qw-text-muted);
	font: 600 9.5px var(--qw-font);
	text-anchor: middle;
}

.qw3dchess__dial-name {
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--qw-text);
}

.qw3dchess__dial-sub {
	font-size: 11px;
	color: var(--qw-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.qw3dchess__dial { transition: none; }
}

/* Board view row (3D / 2D): two equal columns instead of the three used by
   the "Play as" row. Declared after it so it wins at equal specificity. */
.qw3dchess__field--inline .qw3dchess__choices--two {
	grid-template-columns: repeat(2, 1fr);
}

.qw3dchess__choices button:disabled {
	opacity: .4;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* 2D | 3D switch in the bottom button row                             */
/* ------------------------------------------------------------------ */

.qw3dchess__viewswitch {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: stretch;
}

button.qw3dchess__viewbtn {
	min-width: 34px;
	padding: 6px 8px 5px;
	font-family: var(--qw-font);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
	cursor: pointer;
}

.qw3dchess__viewbtn:first-child {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.qw3dchess__viewbtn:last-child {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	margin-left: -1px;
}

.qw3dchess__viewbtn:disabled { opacity: .4; cursor: not-allowed; }

/* Active side: solid gold on the dark game-style themes ... */
.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__player-row--actions .qw3dchess__viewswitch button.qw3dchess__viewbtn[aria-pressed="true"] {
	color: var(--qw-btn-on-text);
	background-color: var(--qw-btn-on-face);
	border-bottom-color: var(--qw-btn-on-edge);
}

/* ... and a pressed-in darker plate on the wood themes. */
.qw3dchess[class*="qw3dchess--theme-wood"] .qw3dchess__viewbtn[aria-pressed="true"] {
	background-color: #8a6d40;
	background-image: none;
	color: #fff7e6;
	box-shadow: inset 0 2px 3px rgba(40, 24, 8, .55);
}

.qw3dchess__viewbtn:focus-visible {
	outline: 2px solid var(--qw-control-accent);
	outline-offset: 1px;
	position: relative;
	z-index: 1;
}

/* Phones: all seven controls (Undo, Flip, Sound, 2D|3D, Full, More, Exit)
   share one line. Every item flexes to an equal share of the row instead of
   keeping a fixed minimum width, and the labels scale down a little with the
   container, so nothing wraps even at 320px. */
@container qw3dchess (max-width: 559px) {
	.qw3dchess__player-row--actions {
		flex-wrap: nowrap;
		gap: 4px;
		width: 100%;
	}

	.qw3dchess__player-row--actions > .qw3dchess__floatbtn,
	.qw3dchess__player-row--actions > .qw3dchess__fs,
	.qw3dchess__player-row--actions > .qw3dchess__morewrap {
		flex: 1 1 0;
		min-width: 0;
	}

	.qw3dchess__player-row--actions > .qw3dchess__viewswitch {
		flex: 1.7 1 0;
		min-width: 0;
	}

	.qw3dchess__player-row--actions > .qw3dchess__fs,
	.qw3dchess__player-row--actions > .qw3dchess__morewrap {
		display: flex;
	}

	.qw3dchess__player-row--actions button.qw3dchess__ctrl {
		flex: 1 1 0;
		min-width: 0;
		padding-left: 2px;
		padding-right: 2px;
		overflow: hidden;
	}

	.qw3dchess__player-row--actions .qw3dchess__ctrl-label {
		font-size: clamp(6.5px, 2.2cqw, 8px);
		letter-spacing: 0;
		max-width: 100%;
		white-space: nowrap;
	}

	.qw3dchess__player-row--actions button.qw3dchess__viewbtn {
		font-size: clamp(10px, 3.1cqw, 12px);
	}
}

/* ------------------------------------------------------------------ */
/* v1.6.7 — "More" popover padding fix on phones                       */
/* The phone rules for the action row use a descendant selector        */
/* (.qw3dchess__player-row--actions button.qw3dchess__ctrl), so they   */
/* also hit the buttons inside the popover and squeezed their padding  */
/* to 2px, shrank labels to 6.5-8px and clipped content. Restore a     */
/* comfortable, tappable list here. Kept last, with higher specificity */
/* than those rules, so it wins at every width.                        */
/* ------------------------------------------------------------------ */
.qw3dchess .qw3dchess__player-row--actions .qw3dchess__more-menu {
	box-sizing: border-box;
	min-width: 180px;
	max-width: calc(100vw - 24px);
	padding: 10px;
	gap: 8px;
	border-radius: 14px;
}

.qw3dchess .qw3dchess__player-row--actions .qw3dchess__more-menu button.qw3dchess__ctrl {
	box-sizing: border-box;
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	min-width: 0;
	min-height: 46px;
	padding: 10px 16px;
	overflow: visible;
	border-radius: 10px;
}

.qw3dchess .qw3dchess__player-row--actions .qw3dchess__more-menu .qw3dchess__ctrl-icon {
	flex: 0 0 22px;
	width: 22px;
	font-size: 18px;
	text-align: center;
}

.qw3dchess .qw3dchess__player-row--actions .qw3dchess__more-menu .qw3dchess__ctrl-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	white-space: nowrap;
	max-width: none;
}

.qw3dchess .qw3dchess__player-row--actions .qw3dchess__more-menu .qw3dchess__ctrl-sep {
	flex: 0 0 auto;
	margin: 0 4px;
}

/* ------------------------------------------------------------------ */
/* v1.6.9 — Draw / Resign now sit in .qw3dchess__studio-toggles, on    */
/* the line between the player name and the clock.                     */
/* ------------------------------------------------------------------ */

/* Phones: five icon-only buttons (Studio 1/2/3 + Draw + Resign) must fit
   between the name plate and the clock, so they scale with the game
   width (26px at 320px up to the normal 30px) and the gap tightens. */
@container qw3dchess (max-width: 559px) {
	.qw3dchess__studio-toggles {
		gap: 4px;
	}

	.qw3dchess__studio-toggles button.qw3dchess__ctrl {
		flex: 0 1 auto;
		width: clamp(26px, 8cqw, 30px);
		min-width: 26px;
	}

	/* The toggle-dimming rule is for aria-pressed lights only; Draw and
	   Resign are normal action buttons, so keep their text bright. */
	.qw3dchess__studio-toggles button.qw3dchess__ctrl--draw,
	.qw3dchess__studio-toggles button.qw3dchess__ctrl--danger {
		padding: 0;
	}
}

/* Disabled (game over / not seated online) */
.qw3dchess__studio-toggles button.qw3dchess__ctrl:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* v1.6.10 — text labels back on the mobile Studio 1/2/3 + Draw +      */
/* Resign row (they were icon-only on phones).                         */
/* ------------------------------------------------------------------ */
@container qw3dchess (max-width: 559px) {
	.qw3dchess__studio-toggles button.qw3dchess__ctrl {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		max-width: 46px;
		height: auto;
		min-height: 38px;
		gap: 2px;
		padding: 3px 1px 2px;
		overflow: visible;
	}

	.qw3dchess__studio-toggles button.qw3dchess__ctrl .qw3dchess__ctrl-icon {
		font-size: 14px;
		line-height: 1;
	}

	.qw3dchess__studio-toggles button.qw3dchess__ctrl .qw3dchess__ctrl-label {
		display: block;
		max-width: 100%;
		font-size: clamp(6px, 1.9cqw, 8px);
		letter-spacing: 0;
		line-height: 1;
		white-space: nowrap;
		text-transform: uppercase;
	}
}

/* ------------------------------------------------------------------ */
/* v1.6.13 — phones: keep name, Light 1-3, Draw, Resign, clock and the */
/* per-move chip on ONE line (the clock/chip were wrapping to a second */
/* line). The button group now has a zero flex-basis, so it no longer  */
/* forces a wrap and simply takes whatever width is left; everything   */
/* around it is made a little more compact.                            */
/* ------------------------------------------------------------------ */
@container qw3dchess (max-width: 559px) {
	.qw3dchess__studio-toggles {
		flex: 1 1 0;
		min-width: 0;
		gap: 3px;
	}

	.qw3dchess__player-name {
		max-width: 24cqw;
	}

	.qw3dchess__player-row--time {
		gap: 4px;
		flex: 0 0 auto;
	}

	.qw3dchess__clock,
	.qw3dchess__increment {
		padding: 0 6px;
	}

	.qw3dchess__clock {
		font-size: 15px;
	}

	.qw3dchess__increment {
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------ */
/* v1.6.14 — toast restyle, single "Lights" button with a popup, and   */
/* properly sized Lights / Draw / Resign buttons.                      */
/* ------------------------------------------------------------------ */

/* Toast: compact rectangular notice, 4px radius, centred over the board
   (pointer-events: none, so it never blocks a move). */
.qw3dchess__toast {
	top: 50%;
	bottom: auto;
	left: 50%;
	width: max-content;
	max-width: min(86%, 320px);
	box-sizing: border-box;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .01em;
	text-align: center;
	color: #f3ead0;
	background: rgba(24, 24, 24, .94);
	border: 0;
	border-left: 3px solid var(--qw-accent);
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	transform: translate(-50%, calc(-50% + 8px));
}

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

/* Lights: one button, three lights in its popup. */
.qw3dchess__lightswrap {
	position: relative;
	display: flex;
	flex: 0 0 auto;
}

.qw3dchess__lights-menu {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 150px;
	padding: 8px;
	background: var(--qw-surface-raised);
	border: 1px solid var(--qw-line);
	border-radius: 8px;
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .6);
}

.qw3dchess__lights-menu[hidden] {
	display: none;
}

.qw3dchess .qw3dchess__studio-toggles .qw3dchess__lights-menu button.qw3dchess__ctrl {
	box-sizing: border-box;
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 44px;
	padding: 8px 12px;
	overflow: visible;
	border-radius: 10px;
}

.qw3dchess .qw3dchess__studio-toggles .qw3dchess__lights-menu .qw3dchess__ctrl-icon {
	flex: 0 0 22px;
	width: 22px;
	font-size: 17px;
	text-align: center;
}

.qw3dchess .qw3dchess__studio-toggles .qw3dchess__lights-menu .qw3dchess__ctrl-label {
	display: block;
	font-size: 14px;
	letter-spacing: .01em;
	text-transform: none;
	white-space: nowrap;
}

/* "Lights" button glows gold when any light is on. */
.qw3dchess:not([class*="qw3dchess--theme-wood"]) .qw3dchess__studio-toggles button.qw3dchess__lights-btn.is-lit {
	color: var(--qw-btn-on-text);
	background-color: var(--qw-btn-on-face);
	border-bottom-color: var(--qw-btn-on-edge);
}

.qw3dchess--theme-wood .qw3dchess__lights-btn.is-lit {
	box-shadow: 0 0 0 2px var(--qw-accent), 0 2px 0 rgba(86, 60, 30, .45);
}

/* Phones: Lights, Draw and Resign are three roomy buttons between the
   name and the clock. */
@container qw3dchess (max-width: 559px) {
	.qw3dchess__studio-toggles {
		gap: 4px;
	}

	.qw3dchess__studio-toggles > .qw3dchess__lightswrap,
	.qw3dchess__studio-toggles > button.qw3dchess__ctrl {
		flex: 1 1 0;
		min-width: 0;
		max-width: 60px;
	}

	.qw3dchess .qw3dchess__studio-toggles > button.qw3dchess__ctrl,
	.qw3dchess .qw3dchess__studio-toggles .qw3dchess__lightswrap > button.qw3dchess__ctrl {
		box-sizing: border-box;
		height: auto;
		min-height: 44px;
		padding: 5px 2px 4px;
		gap: 3px;
		overflow: visible;
	}

	.qw3dchess .qw3dchess__studio-toggles > button.qw3dchess__ctrl {
		width: auto;
	}

	.qw3dchess .qw3dchess__studio-toggles .qw3dchess__lightswrap > button.qw3dchess__ctrl {
		width: 100%;
	}

	.qw3dchess .qw3dchess__studio-toggles > button.qw3dchess__ctrl .qw3dchess__ctrl-icon,
	.qw3dchess .qw3dchess__studio-toggles .qw3dchess__lightswrap > button.qw3dchess__ctrl .qw3dchess__ctrl-icon {
		font-size: 17px;
	}

	.qw3dchess .qw3dchess__studio-toggles > button.qw3dchess__ctrl .qw3dchess__ctrl-label,
	.qw3dchess .qw3dchess__studio-toggles .qw3dchess__lightswrap > button.qw3dchess__ctrl .qw3dchess__ctrl-label {
		display: block;
		font-size: clamp(7px, 2.3cqw, 9px);
		letter-spacing: 0;
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------ */
/* v1.6.16 — compact, professional setup screen (Play the computer /   */
/* Local / Online). Same controls, ~40% less height: slimmer cards,    */
/* a one-line time summary, smaller dials, one-row difficulty.         */
/* ------------------------------------------------------------------ */
.qw3dchess__setup {
	padding: 14px 16px 18px;
}

.qw3dchess__back {
	min-height: 0;
	margin-bottom: 6px;
	padding: 5px 12px 5px 9px;
	font-size: 12px;
}

.qw3dchess__setup-title {
	margin: 0 0 12px;
	font-size: clamp(18px, 4.6cqw, 22px);
}

.qw3dchess__field-group {
	margin-bottom: 10px;
	padding: 2px 12px;
	border-radius: 10px;
}

.qw3dchess__field-group .qw3dchess__field {
	padding: 10px 0;
}

.qw3dchess__field {
	margin-bottom: 10px;
	padding: 12px;
	border-radius: 10px;
}

.qw3dchess__field-label {
	margin-bottom: 7px;
	font-size: 10.5px;
}

.qw3dchess__choices {
	gap: 6px;
}

.qw3dchess__choices button {
	min-height: 36px;
	padding: 6px 8px;
	font-size: 12px;
	border-radius: 6px;
}

/* Difficulty: all five levels on one row. */
.qw3dchess__choices[data-qw-choice="difficulty"] {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.qw3dchess__choices[data-qw-choice="difficulty"] button {
	padding: 6px 2px;
	font-size: clamp(10.5px, 3cqw, 12px);
}

/* Board view / Play as: slim inline rows (declared after .qw3dchess__field
   so they win at equal specificity). */
.qw3dchess__field--inline {
	gap: 10px;
	margin: 0 0 8px;
	padding: 0 2px;
}

.qw3dchess__field--inline .qw3dchess__choices button {
	min-height: 34px;
	padding: 5px 6px;
}

/* Time summary: one slim line instead of a tall card. */
.qw3dchess__time-sum {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 8px;
}

.qw3dchess__time-big {
	flex: 0 0 auto;
	padding-right: 10px;
	border-right: 1px solid var(--qw-line);
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: 0;
}

.qw3dchess__time-row {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 12px;
}

.qw3dchess__time-row > span:first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qw3dchess__time-tag {
	padding: 2px 8px;
	font-size: 11px;
	border-radius: 4px;
}

.qw3dchess__time-hint {
	min-height: 0;
	margin: 6px 2px;
	font-size: 11.5px;
}

.qw3dchess__time-hint:empty {
	display: none;
}

/* Dials: smaller rings, tighter captions. */
.qw3dchess__dials {
	gap: 4px;
	margin-top: 8px;
}

.qw3dchess__dial svg {
	max-width: 88px;
}

.qw3dchess__dial-name {
	margin-top: 2px;
	font-size: 12px;
}

.qw3dchess__dial-sub {
	font-size: 10.5px;
	line-height: 1.2;
}

/* Start button: still the clear primary action, just less bulky. */
.qw3dchess__setup-body > p:last-child {
	margin-top: 12px;
}

.qw3dchess__setup-body > p:last-child > .qw3dchess__button {
	padding: 12px 20px;
	font-size: 14px;
	border-radius: 8px;
	box-shadow: 0 6px 14px -6px rgba(59, 111, 242, .5);
}

/* ------------------------------------------------------------------ */
/* v1.6.17 — Board view and Play as share one card, with a fixed-width */
/* label column so both button groups start and end on the same lines. */
/* ------------------------------------------------------------------ */
.qw3dchess__field-group--prefs .qw3dchess__field--inline {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 8px 0;
}

.qw3dchess__field-group--prefs .qw3dchess__field-label--inline {
	margin: 0;
	white-space: nowrap;
	letter-spacing: .05em;
}

.qw3dchess__field-group--prefs .qw3dchess__choices {
	width: 100%;
	min-width: 0;
}

.qw3dchess__field-group--prefs .qw3dchess__choices button {
	font-size: clamp(10.5px, 3.2cqw, 12px);
}

@container qw3dchess (max-width: 559px) {
	.qw3dchess__field-group--prefs .qw3dchess__field--inline {
		grid-template-columns: 68px minmax(0, 1fr);
		gap: 8px;
	}

	.qw3dchess__field-group--prefs .qw3dchess__field-label--inline {
		font-size: 10px;
		letter-spacing: .03em;
	}
}