.interactive-chessboard {
	--icb-light: #fff;
	--icb-dark: #b58863;
	--icb-frame: #3b2b20;
	max-width: none;
	color: var(--hsj-ink, #1a1a2e);
	font-family: var(--hsj-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	line-height: 1.5;
}

.interactive-chessboard [data-board-theme="purple"] { --icb-dark: #9676b5; --icb-frame: #4a335f; }
.interactive-chessboard [data-board-theme="blue"] { --icb-dark: #6d9dbb; --icb-frame: #27485d; }
.interactive-chessboard [data-board-theme="green"] { --icb-dark: #769656; --icb-frame: #354823; }
.interactive-chessboard [data-board-theme="brown"] { --icb-dark: #b58863; --icb-frame: #3b2b20; }
.interactive-chessboard [data-board-theme="black"] { --icb-dark: #333; --icb-frame: #111; --icb-coordinate-on-dark: #fff; }

.interactive-chessboard__widget {
	width: min(100%, 42rem);
	min-width: 0;
	max-width: 100%;
}

.interactive-chessboard__board-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border: 0.35rem solid var(--icb-frame, #3b2b20);
	box-shadow: 0 0.25rem 0.9rem rgb(0 0 0 / 18%);
	box-sizing: border-box;
	overflow: hidden;
}

.interactive-chessboard__board,
.interactive-chessboard__editor-preview {
	position: relative;
	display: block;
	border: 0.35rem solid var(--icb-frame, #3b2b20);
	box-shadow: 0 0.25rem 0.9rem rgb(0 0 0 / 18%);
	aspect-ratio: 1;
	width: 100%;
	max-width: 42rem;
	overflow: hidden;
	background-color: var(--icb-light, #fff);
	background-image: conic-gradient(var(--icb-dark, #b58863) 25%, var(--icb-light, #fff) 0 50%, var(--icb-dark, #b58863) 0 75%, var(--icb-light, #fff) 0);
	background-size: 25% 25%;
	box-sizing: border-box;
}

.interactive-chessboard__board-frame .interactive-chessboard__board {
	max-width: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.interactive-chessboard__piece-position,
.interactive-chessboard__editor-piece-position {
	appearance: none;
	border: 0;
	position: absolute;
	display: grid;
	place-items: center;
	width: 12.5%;
	height: 12.5%;
	padding: 0;
	margin: 0;
	background: transparent;
	z-index: 2;
	cursor: pointer;
}

.interactive-chessboard__piece-position[data-draggable="true"] {
	cursor: grab;
	touch-action: none;
}

.interactive-chessboard__piece-position.is-dragging {
	cursor: grabbing;
	z-index: 6;
	pointer-events: none;
}

.interactive-chessboard__editor-piece-position {
	cursor: default;
}

.interactive-chessboard .interactive-chessboard__board .interactive-chessboard__piece-position,
.interactive-chessboard .interactive-chessboard__board .interactive-chessboard__piece-position:hover,
.interactive-chessboard .interactive-chessboard__board .interactive-chessboard__piece-position:focus,
.interactive-chessboard .interactive-chessboard__board .interactive-chessboard__piece-position:active {
	border: 0;
	outline: none;
	box-shadow: none;
	background: transparent;
}

.interactive-chessboard__board:focus-visible {
	outline: none;
}

.interactive-chessboard__marker {
	position: absolute;
	width: 12.5%;
	height: 12.5%;
	pointer-events: none;
	box-sizing: border-box;
	z-index: 1;
}

.interactive-chessboard__marker.is-selected {
	background: rgb(20 85 30 / 50%);
}

.interactive-chessboard__marker.is-last-move {
	background: rgb(155 199 0 / 41%);
}

.interactive-chessboard__marker.is-in-check {
	z-index: 1;
}

.interactive-chessboard__marker.is-in-check::before {
	content: "";
	position: absolute;
	inset: -12%;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(210 20 25 / 78%) 0%, rgb(210 20 25 / 42%) 43%, transparent 72%);
	filter: blur(0.22rem);
	pointer-events: none;
	z-index: 0;
}

.interactive-chessboard__marker.is-legal-target {
	display: grid;
	place-items: center;
	z-index: 3;
}

.interactive-chessboard__marker.is-legal-target::after {
	content: "";
	width: 25%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgb(20 85 30 / 55%);
	position: absolute;
	pointer-events: none;
	z-index: 2;
}

.interactive-chessboard__marker.is-legal-target.is-capture-target::after {
	width: 82%;
	border: 0.18rem solid rgb(20 85 30 / 75%);
	background: transparent;
}

.interactive-chessboard .interactive-chessboard__piece {
	position: relative;
	z-index: 1;
	display: block;
	width: 94%;
	height: 94%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

.interactive-chessboard__resize-handle {
	position: absolute;
	right: 0.12rem;
	bottom: 0.12rem;
	width: 1.05rem;
	height: 1.05rem;
	border-right: 0.18rem solid rgb(255 255 255 / 88%);
	border-bottom: 0.18rem solid rgb(255 255 255 / 88%);
	box-sizing: border-box;
	cursor: nwse-resize;
	z-index: 5;
	touch-action: none;
}

.interactive-chessboard__resize-handle::before,
.interactive-chessboard__resize-handle::after {
	content: "";
	position: absolute;
	right: 0.08rem;
	bottom: 0.08rem;
	border-right: 0.1rem solid rgb(50 35 25 / 78%);
	border-bottom: 0.1rem solid rgb(50 35 25 / 78%);
}

.interactive-chessboard__resize-handle::before {
	width: 0.55rem;
	height: 0.55rem;
}

.interactive-chessboard__resize-handle::after {
	width: 0.23rem;
	height: 0.23rem;
}

.interactive-chessboard__coordinate-square {
	position: absolute;
	display: flex;
	width: 12.5%;
	height: 12.5%;
	box-sizing: border-box;
	font-family: system-ui, sans-serif;
	font-size: clamp(0.55rem, 1.5vw, 0.8rem);
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
	text-shadow: none;
	z-index: 4;
}

.interactive-chessboard__coordinate-square.is-file {
	align-items: flex-end;
	justify-content: flex-end;
	padding: 0 0.16rem 0.1rem 0;
}

.interactive-chessboard__coordinate-square.is-rank {
	align-items: flex-start;
	justify-content: flex-start;
	padding: 0.1rem 0 0 0.16rem;
}

.interactive-chessboard__coordinate-square.is-light {
	color: var(--icb-frame, #3b2b20);
}

.interactive-chessboard__coordinate-square.is-dark {
	color: var(--icb-coordinate-on-dark, #111);
}

.interactive-chessboard .interactive-chessboard__status {
	margin: 0.75rem 0 0;
	min-height: 1.5em;
	font-weight: 600;
}

.interactive-chessboard__game-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin-top: 0.75rem;
}

.interactive-chessboard .interactive-chessboard__clock {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.interactive-chessboard .interactive-chessboard__clock.is-running {
	color: var(--hsj-info, #00508a);
}

.interactive-chessboard .interactive-chessboard__clock.is-expired {
	color: var(--hsj-danger, #b00020);
}

.interactive-chessboard .interactive-chessboard__reset {
	padding: 0.42rem 0.7rem;
	border: 1px solid var(--hsj-card-border, #dde3ed);
	border-radius: var(--hsj-control-radius, 7px);
	background: #fff;
	color: var(--hsj-ink, #1a1a2e);
	font: inherit;
	cursor: pointer;
}

.interactive-chessboard .interactive-chessboard__reset:hover,
.interactive-chessboard .interactive-chessboard__reset:focus-visible {
	background: var(--hsj-info-bg, #e8f4ff);
	outline: 0.12rem solid var(--hsj-info, #00508a);
	outline-offset: 0.08rem;
}

.interactive-chessboard .interactive-chessboard__notice {
	margin: 0.35rem 0 0;
	color: var(--hsj-danger, #b00020);
}

.interactive-chessboard__history {
	margin-top: 0.55rem;
}

.interactive-chessboard .interactive-chessboard__history-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0;
	margin: 0.35rem 0 0;
	list-style: none;
}

.interactive-chessboard .interactive-chessboard__history-list > li {
	margin: 0;
	padding: 0;
}

.interactive-chessboard__history-move {
	padding: 0.3rem 0.5rem;
	border: 0;
	border-radius: var(--hsj-control-radius, 7px);
	background: transparent;
	color: var(--hsj-ink, #1a1a2e);
	font: inherit;
	cursor: pointer;
}

.interactive-chessboard__history-current,
.interactive-chessboard__history-continue {
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--hsj-card-border, #dde3ed);
	border-radius: var(--hsj-control-radius, 7px);
	background: #fff;
	color: var(--hsj-ink, #1a1a2e);
	font: inherit;
	cursor: pointer;
}

.interactive-chessboard__history-move:hover,
.interactive-chessboard__history-move:focus-visible,
.interactive-chessboard__history-move.is-active,
.interactive-chessboard__history-current:hover,
.interactive-chessboard__history-current:focus-visible,
.interactive-chessboard__history-continue:hover,
.interactive-chessboard__history-continue:focus-visible {
	background: var(--hsj-info-bg, #e8f4ff);
	outline: 0.12rem solid var(--hsj-info, #00508a);
	outline-offset: 0.08rem;
}

.interactive-chessboard__history-current {
	margin-top: 0.45rem;
}

.interactive-chessboard__history-continue {
	margin-top: 0.45rem;
	margin-left: 0.4rem;
}

.interactive-chessboard__promotion-picker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 1rem;
	border: 1px solid var(--hsj-card-border, #dde3ed);
	border-radius: var(--hsj-radius, 12px);
	background: #fff;
	box-shadow: var(--hsj-card-shadow, 0 2px 10px rgba(26, 26, 46, .07));
}

.interactive-chessboard__promotion-picker[hidden] {
	display: none;
}

.interactive-chessboard__promotion-label {
	flex-basis: 100%;
	font-weight: 700;
}

.interactive-chessboard__promotion-choice {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0.15rem;
	line-height: 0;
	border: 1px solid var(--hsj-card-border, #dde3ed);
	border-radius: var(--hsj-control-radius, 7px);
	background: var(--hsj-surface-soft, #f5f6fa);
	cursor: pointer;
}

.interactive-chessboard__promotion-choice:hover,
.interactive-chessboard__promotion-choice:focus-visible {
	outline: 0.18rem solid var(--hsj-info, #00508a);
	outline-offset: 0.1rem;
}

.interactive-chessboard__promotion-cancel {
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--hsj-card-border, #dde3ed);
	border-radius: var(--hsj-control-radius, 7px);
	background: #fff;
	color: var(--hsj-ink, #1a1a2e);
	font: inherit;
	cursor: pointer;
}

.interactive-chessboard--editor {
	max-width: 42rem;
}

.interactive-chessboard__editor-controls {
	padding: 1rem;
	margin-bottom: 1rem;
	background: var(--hsj-surface-soft, #f5f6fa);
	border-radius: var(--hsj-radius, 12px);
}

.interactive-chessboard__editor-controls .components-base-control {
	margin-bottom: 1rem;
}

.interactive-chessboard__editor-error {
	padding: 1rem;
	color: var(--hsj-danger, #b00020);
	border-left: 0.25rem solid currentcolor;
}

.interactive-chessboard__marker.is-keyboard {
	background: rgb(0 80 138 / 28%);
}

.interactive-chessboard__marker.is-premove {
	background: rgb(245 166 35 / 45%);
	box-shadow: inset 0 0 0 0.16rem #8a4b00;
}

.interactive-chessboard__marker.is-keyboard::after {
	content: "";
	position: absolute;
	right: 5%;
	bottom: 5%;
	width: 16%;
	height: 16%;
	border-radius: 50%;
	background: #00508a;
	box-shadow: 0 0 0 2px #fff;
}

@media (forced-colors: active) {
	.interactive-chessboard__marker.is-keyboard::after { background: Highlight; forced-color-adjust: none; }
	.interactive-chessboard__marker.is-premove { outline: 0.2rem dashed Highlight; outline-offset: -0.3rem; forced-color-adjust: none; }
}