.spz-app {
	--spz-ink: var(--wp--style--global--color--text, var(--wp--preset--color--contrast, #172a35));
	--spz-muted: var(--wp--preset--color--secondary, #526875);
	--spz-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent, #b84a31));
	--spz-accent-dark: var(--wp--preset--color--secondary, var(--spz-accent));
	--spz-border: var(--wp--preset--color--contrast, #c9d4d9);
	--spz-light: #f2e3c6;
	--spz-dark: #9a7958;
	--spz-focus: var(--wp--preset--color--primary, var(--wp--preset--color--accent, #155eef));
	--spz-app-background: var(--wp--style--global--color--background, var(--wp--preset--color--base, #fff));
	color: var(--spz-ink);
	font: inherit;
	width: 100%;
	min-width: 0;
	max-width: var(--wp--style--global--wide-size, 1100px);
	margin: 2rem auto;
	padding: clamp(1rem, 3vw, 2rem);
	container-type: inline-size;
	background: var(--spz-app-background);
	border: 1px solid var(--spz-border);
	border-radius: 1rem;
	box-shadow: 0 16px 42px rgba(23, 42, 53, .08);
}
.spz-app *, .spz-app *::before, .spz-app *::after { box-sizing: border-box; }
.spz-app h2 { margin: .2rem 0 .7rem; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.spz-app p { line-height: 1.5; }
.spz-eyebrow { margin: 0 0 .5rem; color: var(--spz-accent-dark); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.spz-start-form { max-width: 600px; margin-top: 1.5rem; }
.spz-app label { display: block; font-weight: 650; }
.spz-app select, .spz-app input[type="number"] { width: 100%; max-width: 30rem; min-height: 2.8rem; margin-top: .3rem; font: inherit; }
.spz-dwz-field, .spz-class-field { margin: 0 0 1rem; }
.spz-help { margin: .35rem 0; color: var(--spz-muted); font-size: .92rem; }
.spz-dwz-error { margin: .35rem 0; color: #8a261a; font-size: .92rem; font-weight: 650; }
.spz-class-match { min-height: 1.5em; margin: .25rem 0; font-weight: 650; }
.spz-button, .spz-text-button { cursor: pointer; }
.spz-button:disabled, .spz-text-button:disabled { opacity: .6; cursor: wait; }
.spz-app :focus-visible { outline: 3px solid var(--spz-focus); outline-offset: 2px; }
.spz-game-header { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 1.2rem; }
.spz-game-header h2 { margin: 0; }
.spz-progress { display: flex; flex: 0 1 15rem; gap: 3px; height: .7rem; overflow: hidden; border-radius: 99px; background: transparent; }
.spz-progress span { display: block; flex: 1 1 0; height: 100%; border: 1px solid #172a35; border-radius: 99px; background: #e4eaec; transition: background-color .2s ease; }
.spz-progress span[data-status="solved"] { background: var(--spz-progress-color-blue, #155eef); }
.spz-progress span[data-status="solved-retry"], .spz-progress span[data-status="incorrect"], .spz-progress span[data-status="skipped"] { background: var(--spz-progress-color-white, #fff); }
.spz-result-progress { flex: none; width: min(100%, 28rem); margin: .8rem 0 1.25rem; }
.spz-play-area { display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(220px, .8fr); gap: clamp(1.2rem, 4vw, 3rem); align-items: start; }
.spz-board-wrap { width: 100%; max-width: 640px; min-width: 0; }
.spz-board-frame { display: grid; grid-template-columns: minmax(0, 1fr) 1.75rem; width: 100%; margin-inline: auto; }
.spz-board-stage { grid-column: 1; grid-row: 1; position: relative; width: 100%; min-width: 0; aspect-ratio: 1; container-type: inline-size; }
.spz-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); width: 100%; height: 100%; border: 3px solid var(--spz-ink); touch-action: manipulation; }
.spz-turn-rail { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; padding-block: .2rem; }
.spz-turn-indicator { grid-column: 1; width: 1.35rem; height: 1.35rem; border: 3px solid #172a35; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .9); }
.spz-turn-rail[data-side="bottom"] .spz-turn-indicator { margin-top: auto; }
.spz-turn-indicator[data-turn="w"] { background: #fff; }
.spz-turn-indicator[data-turn="b"] { background: #172a35; }
.spz-square { position: relative; display: grid; place-items: center; min-width: 0; padding: 0; border: 0; border-radius: 0; color: #17191a; font-size: clamp(1.5rem, 7vw, 4.6rem); line-height: 1; cursor: pointer; }
.spz-square-coordinate { position: absolute; z-index: 2; color: var(--spz-dark); font: 700 clamp(.58rem, 1.8cqw, .85rem)/1 sans-serif; line-height: 1; pointer-events: none; user-select: none; }
.spz-square.light .spz-square-coordinate { color: var(--spz-dark); }
.spz-square.dark .spz-square-coordinate { color: var(--spz-light); }
.spz-square.spz-mated-king-square .spz-square-coordinate { color: #fff; }
.spz-rank-label { top: .2em; left: .25em; }
.spz-file-label { right: .25em; bottom: .2em; }
.spz-piece { display: grid; place-items: center; align-self: center; justify-self: center; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.spz-piece-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; user-select: none; }
.spz-piece-image-k { transform: translateX(9.6%); }
.spz-piece-image-q { transform: translateX(5.9%); }
.spz-piece-image-r { transform: translateX(8.2%); }
.spz-piece-image-b { transform: translateX(7.2%); }
.spz-piece-image-n { transform: translateX(7.4%); }
.spz-piece-image-p { transform: translateX(8.8%); }
.spz-square .spz-piece { transform: translateY(0); }
.spz-square.light { background: var(--spz-light); }
.spz-square.dark { background: var(--spz-dark); }
.spz-square.selected { box-shadow: inset 0 0 0 5px #ffd44d; }
.spz-square.hinted-piece { box-shadow: inset 0 0 0 4px #ffeb00; }
.spz-square.dragging .spz-piece { opacity: .35; }
.spz-square.drag-over { outline: 3px solid var(--spz-focus); outline-offset: -4px; z-index: 1; }
.spz-square.piece-in-motion .spz-piece { visibility: hidden; }
.spz-drag-ghost.spz-piece, .spz-move-ghost.spz-piece { position: fixed; z-index: 100000; top: 0; left: 0; width: 4rem; height: 4rem; transform: translate(-50%, -50%); }
.spz-move-ghost.spz-piece { z-index: 100001; }
.spz-square.last-move { background-image: radial-gradient(rgba(255, 215, 70, .45), rgba(255, 215, 70, .45)); }
.spz-square.spz-mated-king-square { background: #ff0000; }
.spz-square:focus-visible { z-index: 1; outline-offset: -4px; }
.spz-side-panel { padding: .3rem 0; }
.spz-prompt { margin-top: 0; font-size: 1.2rem; font-weight: 700; }
.spz-status { min-height: 3em; margin: .75rem 0 1rem; color: var(--spz-muted); }
.spz-status[data-kind="error"] { color: #8a261a; }
.spz-status[data-kind="success"] { color: #1d653a; }
.spz-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
.spz-solution { margin: 1rem 0; padding: 1rem; border-left: 4px solid var(--spz-accent); background: transparent; }
.spz-solution p { min-height: 1.5em; margin-top: 0; font-weight: 700; }
.spz-solution-controls { display: flex; align-items: center; gap: .5rem; }
.spz-solution-nav { display: grid; width: 2.4rem; min-width: 2.4rem; height: 2.4rem; min-height: 2.4rem; place-items: center; padding: .1rem; color: var(--spz-ink); background: transparent; border: 1px solid currentColor; border-radius: 50%; line-height: 1; }
.spz-solution-triangle { display: block; width: 0; height: 0; }
.spz-solution-triangle-back { border-top: .4rem solid transparent; border-right: .55rem solid currentColor; border-bottom: .4rem solid transparent; }
.spz-solution-triangle-forward { border-top: .4rem solid transparent; border-bottom: .4rem solid transparent; border-left: .55rem solid currentColor; }
.spz-solution-nav:disabled { opacity: .45; cursor: not-allowed; }
.spz-next { margin-top: 1rem; }
.spz-board-help { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--spz-border); }
.spz-board-hint-toggle { display: grid; width: 2rem; min-width: 2rem; height: 2rem; place-items: center; padding: 0; border: 1px solid currentColor; border-radius: 50%; color: var(--spz-ink); background: transparent; font: inherit; font-weight: 700; line-height: 1; cursor: pointer; }
.spz-board-hint { width: 100%; margin: .75rem 0 0; color: var(--spz-muted); font-size: .9rem; white-space: pre-line; }
.spz-promotion-dialog { width: min(28rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; padding: 0; border: 1px solid var(--spz-border); border-radius: .9rem; background: var(--spz-app-background); color: var(--spz-ink); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .3); }
.spz-promotion-dialog::backdrop { background: rgba(10, 21, 28, .68); }
.spz-promotion-panel { padding: clamp(1rem, 4vw, 1.5rem); }
.spz-promotion-panel h2 { margin-top: 0; }
.spz-promotion-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin: 1.2rem 0; }
.spz-promotion-choice { display: flex; min-width: 0; min-height: 7.5rem; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .5rem .25rem; cursor: pointer; touch-action: manipulation; }
.spz-promotion-symbol { width: 3.2rem; height: 3.2rem; }
.spz-promotion-cancel { width: 100%; }
.spz-result { max-width: 700px; margin: 0 auto; }
.spz-result ul { padding-left: 1.3rem; }
.spz-result a { overflow-wrap: anywhere; }
@media (max-width: 720px) {
	.spz-play-area { grid-template-columns: 1fr; }
	.spz-game-header { align-items: flex-start; flex-direction: column; }
	.spz-progress { flex-basis: auto; width: 100%; }
}
@media (max-width: 420px) {
	.spz-promotion-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.spz-promotion-choice { min-height: 6.5rem; }
}
@container (max-width: 680px) {
	.spz-play-area { grid-template-columns: minmax(0, 1fr); }
	.spz-game-header { align-items: flex-start; flex-direction: column; }
	.spz-progress { flex-basis: auto; width: 100%; }
}
@container (max-width: 420px) {
	.spz-promotion-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.spz-promotion-choice { min-height: 6.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.spz-progress span { transition: none; }
}