/*
 * Project: BlunderPunch
 * Author: Chad Howarth
 * Created: 2025-07-01
 * Description: Chess UI for Lichess Data and Drills (gchessboard variant)
 */

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

/* Highlight overlays are slotted into the gchessboard's per-square named slots.
 * Square internals live in shadow DOM and can't be reached with global
 * selectors, so highlights ride in as light-DOM children assigned to
 * slot="<square>". They must fill the square and ignore pointer events so they
 * never intercept a drag gesture. */
.check-highlight,
.legal-move-highlight,
.last-move-highlight {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.check-highlight {
	box-shadow: inset 0 0 3px 3px #ff3f00;
}

.legal-move-highlight {
	box-shadow: inset 0 0 3px 3px #00ff00;
}

.last-move-highlight {
	box-shadow: inset 0 0 3px 3px #ffff00;
}

html {
	margin: 0;
	padding: 0;
	overflow: auto;
	background: #5C6B73;
}

body {
	margin: 0;
	padding: 0;
}

#blunder-box {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 675px;
	width: 100%;
	min-width: 1200px;
	container-type: size;
}

#board-column {
	display: flex;
	flex-direction: column;
	width: 80cqh;
}

#captured-by-black,
#captured-by-white {
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 4cqh;
}

#captured-by-black { order: 1; }
#tabula            { order: 2; }
#captured-by-white { order: 3; }

#board-column.flipped #captured-by-black { order: 3; }
#board-column.flipped #captured-by-white { order: 1; }

#material-by-black,
#material-by-white {
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	font-family: 'Lilita One', system-ui;
	font-size: 2cqh;
	color: #33aaff;
	white-space: nowrap;
}

.capture-section {
	display: flex;
	flex-direction: row;
	min-width: 0;
}

/* Tighten the air between groups (each group's outer pieces carry transparent
 * SVG padding). Empty groups collapse out of flow so the gap reduction chains
 * correctly across them and reaches the last group (queens). */
.capture-section:not(:nth-child(5)) {
	margin-right: -1cqh;
}

.capture-section:empty {
	display: none;
}

/* Queens (always the last group) have a wide glyph with little leading padding,
 * so the shared -1cqh pull jams them against the previous group; give that one
 * group its left gap back. */
.capture-section:nth-child(5) {
	margin-left: 0.5cqh;
}

/*
 * Pieces render at full 4cqh. The piece SVGs sit in a square viewBox with heavy
 * transparent padding (a pawn glyph fills only ~48% of its box width), so the
 * box overlap must be large to visually overlap the glyphs. -2.5cqh ≈ 62.5% box
 * overlap, matching the look dialed in via test-capture.html.
 */
.captured-piece {
	height: 4cqh;
	width: 4cqh;
	display: block;
	flex-shrink: 0;
}

.capture-section .captured-piece:not(:last-child) {
	margin-right: -2.5cqh;
}

/* gchessboard web component. Square colors/markers are driven through CSS
 * custom properties (Shadow DOM is not reachable with normal selectors). Native
 * move-target markers and move outlines are disabled so the only overlays are
 * our own slotted .legal-move-highlight / .check-highlight rings. Hover/active
 * square colors are pinned to the base colors to keep the board visually static
 * like the chessboard.js version. */
#tabula {
	width: 80cqh;
	height: 80cqh;

	--square-color-light: rgba(255, 255, 255, 0.7);
	--square-color-dark: rgba(170, 170, 170, 0.7);
	--square-color-light-hover: rgba(255, 255, 255, 0.7);
	--square-color-dark-hover: rgba(170, 170, 170, 0.7);
	--square-color-light-active: rgba(255, 255, 255, 0.7);
	--square-color-dark-active: rgba(170, 170, 170, 0.7);

	--outline-color-light-active: transparent;
	--outline-color-dark-active: transparent;
	--outline-color-focus: transparent;

	/* Hide the native move-target markers by painting them the same color as the
	 * square. transparent does NOT work: the occupied-target marker fills the
	 * square's corners (and the empty-target marker its center) with this color,
	 * so transparent leaves alpha-0 holes that read as corner/center marks over
	 * the page background. Matching the square color makes the gradient uniform. */
	--move-target-marker-color-light-square: rgba(255, 255, 255, 0.7);
	--move-target-marker-color-dark-square: rgba(170, 170, 170, 0.7);

	--coords-font-family: 'Bangers', system-ui;
	--coords-font-size: clamp(12px, 1.5cqh, 24px);
}

/* Override the bundled piece set with the BlunderPunch SVGs. Part names are
 * lowercase (piece-wp ... piece-bk); these normal (non-!important) declarations
 * win over the component's internal rules because outer-tree styles beat
 * inner-tree styles in the cascade. */
#tabula::part(piece-wp) { background-image: url('/pieces/wP.svg'); }
#tabula::part(piece-wn) { background-image: url('/pieces/wN.svg'); }
#tabula::part(piece-wb) { background-image: url('/pieces/wB.svg'); }
#tabula::part(piece-wr) { background-image: url('/pieces/wR.svg'); }
#tabula::part(piece-wq) { background-image: url('/pieces/wQ.svg'); }
#tabula::part(piece-wk) { background-image: url('/pieces/wK.svg'); }
#tabula::part(piece-bp) { background-image: url('/pieces/bP.svg'); }
#tabula::part(piece-bn) { background-image: url('/pieces/bN.svg'); }
#tabula::part(piece-bb) { background-image: url('/pieces/bB.svg'); }
#tabula::part(piece-br) { background-image: url('/pieces/bR.svg'); }
#tabula::part(piece-bq) { background-image: url('/pieces/bQ.svg'); }
#tabula::part(piece-bk) { background-image: url('/pieces/bK.svg'); }

#promotion-picker {
	position: absolute;
	left: 50%;
	top: 1cqh;
	border: .25cqh solid #000;
	transform: translateX(-50%);
	z-index: 10;
	background: url('/textures/paper.jpg') no-repeat center/cover;
	padding: 1.25cqh;
	justify-content: center;
	align-items: center;
}

#promotion-picker-content {
	display: flex;
	gap: 1.25cqh;
	align-items: center;
	background: #fff;
}

.promotion-btn {
	width: 5.5cqh;
	aspect-ratio: 1;
	flex-shrink: 0;
	border: .25cqh solid #000;
	background: #e8e8e8;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	outline: none;
}

.promotion-btn:focus,
.promotion-btn:hover {
	border: .25cqh solid #33aaff;
	background-color: #e0f4ff;
}

#close-picker {
	width: 2.4cqh;
	aspect-ratio: 1;
	flex-shrink: 0;
	border: .25cqh solid #000;
	background-color: #fff;
	background-image: url('/pieces/close-x.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	position: absolute;
	right: -1.2cqh;
	top: 50%;
	transform: translateY(-50%);
}

#left-panel {
	height: 80cqh;
	width: calc(48vw - 40cqh);
	margin: 0 1cqh;
	background: #222;
	color: #eee;
	font-family: monospace;
	font-size: 1.5cqh;
	border-radius: .8cqh;
	padding: .8cqh;
	overflow: auto;
	}

#right-panel {
	height: 80cqh;
	width: calc(48vw - 40cqh);
	margin: 0 1cqh;
	background: #222;
	color: #eee;
	font-family: monospace;
	font-size: 1.5cqh;
	border-radius: .8cqh;
	padding: .8cqh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Right-panel scoresheet (running game move list). The FEN block stays fixed at
 * the top; the move list takes the remaining height and scrolls on its own,
 * auto-following the latest move. Moves are notation-conventional monospace;
 * the comic accent lives in the Bangers headings. */
.panel-heading {
	font-family: 'Bangers', system-ui;
	font-size: 2.2cqh;
	letter-spacing: 0.05em;
	color: #eee;
	margin-bottom: 0.4cqh;
}

#current-fen {
	font-size: 1.1cqh;
	word-break: break-all;
	background: #333;
	border-radius: 0.5cqh;
	padding: 0.5cqh;
	margin-bottom: 1.2cqh;
}

#scoresheet {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.sheet-grid {
	display: grid;
	grid-template-columns: auto 1fr 1fr;
	align-items: baseline;
	column-gap: 0.6cqh;
	row-gap: 0.3cqh;
	font-family: monospace;
	font-size: 1.6cqh;
}

.move-num {
	color: #888;
	text-align: right;
}

/* Phase 1: inert (cursor:default, no hover). Phase 2 flips these to clickable. */
.move {
	appearance: none;
	background: none;
	border: none;
	color: #eee;
	font: inherit;
	text-align: left;
	padding: 0.1cqh 0.4cqh;
	border-radius: 0.3cqh;
	white-space: nowrap;
	cursor: default;
}

/* A move that gave check (SAN ends with + or #). Persistent across the whole
 * history, colored to match the board's orange-red check ring (#ff3f00). */
.move.check {
	color: #ff3f00;
	background: rgba(255, 63, 0, 0.12);
	font-weight: bold;
}

/* Current move = the last move played, so it matches the board's yellow
 * last-move highlight (#ffff00). Declared after .check so a checking last move
 * reads as the current move (yellow + bold) while it's current, then settles
 * into its persistent check color once a later move is played. */
.move.current {
	color: #ffff00;
	background: rgba(255, 255, 0, 0.12);
	font-weight: bold;
}

.toggle-wrap {
	display: flex;
	align-items: center;
	margin-bottom: 1.5cqh;
	justify-content: flex-start;
}

.toggle-label {
	display: flex;
	align-items: center;
	cursor: pointer;
	gap: 1cqh;
	font-size: 1.5cqh;
}

.toggle-switch {
	width: 6cqh;
	height: 3cqh;
	background: #ccc;
	border-radius: 1.5cqh;
	position: relative;
	margin: 0 1cqh 0 1cqh;
	transition: background 0.2s;
	box-sizing: border-box;
	display: inline-block;
}

.toggle-switch:before {
	content: "";
	position: absolute;
	left: 0.4cqh;
	top: 0.4cqh;
	width: 2.25cqh;
	height: 2.25cqh;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 0.1cqh 0.3cqh rgba(0,0,0,0.14);
}

.toggle-label input[type="checkbox"] {
	display: none;
}

.toggle-label input[type="checkbox"]:checked + .toggle-switch {
	background: #444;
}
.toggle-label input[type="checkbox"]:checked + .toggle-switch:before {
	transform: translateX(3cqh);
}

.toggle-text {
	color: #eee;
	font-weight: 500;
	font-size: 1.5cqh;
	transition: color 0.15s, font-weight 0.15s, text-shadow 0.15s;
}

.toggle-text.active {
	color: #33aaff;
	font-weight: 700;
	text-shadow: 0 0 0.6cqh #33aaff88, 0 0 0.1cqh #fff;
}

.toggle-text.inactive {
	color: #888;
	font-weight: 400;
	text-shadow: none;
}