/* ---------- Dame ---------- */
.sp-dm { --dm: min(92vw, 560px); display: grid; justify-items: center; gap: 8px; width: 100%; }
.sp-dm-status { margin: 0; min-height: 1.6em; text-align: center; font-size: 1.02rem; color: var(--sp-ink-2); }
.sp-dm-status b { color: var(--sp-ink); }
.sp-dm-must { display: inline-block; padding: 2px 10px; margin-right: 4px; border-radius: 999px; font-weight: 800; color: #fff;
	background: linear-gradient(135deg, #f97316, #e11d48); box-shadow: 0 6px 14px -8px #e11d48; animation: spDmBlink 1.1s ease-in-out infinite alternate; }
.sp-dm-err { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; color: #9f1239; background: #ffe4e6; animation: spShake .4s ease; }
@keyframes spDmBlink { to { filter: brightness(1.15); transform: scale(1.04); } }

/* Spieler-Leisten */
.sp-dm-pl { width: var(--dm); display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px 6px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--sp-line);
	transition: border-color .2s, box-shadow .2s; }
.sp-dm-pl.is-turn { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .16), 0 10px 22px -16px #2563eb; }
.sp-dm-pl-txt { display: grid; line-height: 1.15; min-width: 0; }
.sp-dm-pl-name { font-size: .98rem; color: var(--sp-ink); }
.sp-dm-pl.is-turn .sp-dm-pl-name::after { content: "am Zug"; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: .68rem; font-weight: 800; vertical-align: 2px; color: #fff; background: #2563eb; }
.sp-dm-pl-n { font-size: .8rem; color: var(--sp-muted); white-space: nowrap; }
.sp-dm-tray { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-left: auto; padding-left: 4px; max-width: 52%; row-gap: 2px; }
.sp-dm-tray .sp-dm-mini { margin-left: -4px; }
.sp-dm-mini { display: inline-block; flex: none; width: 15px; height: 15px; border-radius: 50%; }
.sp-dm-mini.sp-dm-w { background: radial-gradient(circle at 35% 30%, #fff, #f3e6c4 45%, #c9a96e); box-shadow: 0 1px 0 #8a6d3b, inset 0 0 0 1px rgba(138, 109, 59, .35); }
.sp-dm-mini.sp-dm-b { background: radial-gradient(circle at 35% 30%, #9ca3af, #374151 45%, #0b0f17); box-shadow: 0 1px 0 #000, inset 0 0 0 1px rgba(255, 255, 255, .12); }
.sp-dm-mini.sp-dm-big { width: 26px; height: 26px; }
.sp-dm-undo { flex: none; min-height: 36px; padding: 0 12px; margin-left: 6px; font-size: .86rem; }
.sp-dm-undo span:first-child { font-size: 1.15rem; line-height: 1; }
.sp-dm-s1 .sp-stat-i { color: #fde7b0; }
.sp-dm-s2 .sp-stat-i { color: #94a3b8; }

/* Holzrahmen und Brett */
.sp-dm-frame { position: relative; width: var(--dm); padding: calc(var(--dm) * .035); border-radius: calc(var(--dm) * .04); outline: none; cursor: pointer; touch-action: none;
	background: repeating-linear-gradient(97deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 9px), repeating-linear-gradient(91deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 13px),
		linear-gradient(135deg, #8a5426, #5a3213 45%, #7b4720 75%, #4a2a10);
	box-shadow: 0 26px 50px -24px #451a03, inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .3); }
.sp-dm-frame:focus-visible { box-shadow: 0 0 0 4px #60a5fa, 0 26px 50px -24px #451a03; }
.sp-dm-inner { position: relative; aspect-ratio: 1; width: 100%; }
.sp-dm-board { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: calc(var(--dm) * .012); overflow: hidden;
	box-shadow: 0 0 0 2px rgba(40, 18, 4, .6), 0 0 0 4px rgba(255, 220, 160, .18); }
.sp-dm-cell { position: relative; }
.sp-dm-cell.is-l { background: repeating-linear-gradient(72deg, rgba(150, 95, 35, .09) 0 1px, transparent 1px 7px), linear-gradient(135deg, #fbe7bf, #eccb8f); }
.sp-dm-cell.is-d { background: repeating-linear-gradient(68deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 6px), linear-gradient(135deg, #a66a35, #7a4420); }
.sp-dm-cell::before, .sp-dm-cell::after { content: none; position: absolute; pointer-events: none; }
.sp-dm-cell.is-last::before { content: ""; inset: 0; background: rgba(250, 204, 21, .3); box-shadow: inset 0 0 0 2px rgba(253, 224, 71, .55); }
.sp-dm-cell.is-lastcap::before { content: ""; inset: 0; background: rgba(239, 68, 68, .22); }
.sp-dm-cell.is-sel::before { content: ""; inset: 0; background: rgba(253, 224, 71, .5); box-shadow: inset 0 0 0 3px #facc15; }
.sp-dm-cell.is-target::after { content: ""; inset: 35%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #bfdbfe, #2563eb 70%);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .6), 0 0 14px 2px rgba(59, 130, 246, .85); animation: spDmDot .9s ease-in-out infinite alternate; }
.sp-dm-cell.is-hop::after { content: ""; inset: 14%; border-radius: 50%; border: calc(var(--dm) * .008) solid #fb923c; background: rgba(251, 146, 60, .28);
	box-shadow: 0 0 16px 2px rgba(249, 115, 22, .85); animation: spDmDot .8s ease-in-out infinite alternate; }
.sp-dm-cell.is-end::after { content: ""; inset: 30%; border-radius: 50%; border: 2px dashed rgba(255, 237, 213, .95); }
.sp-dm-cell.is-cur { box-shadow: inset 0 0 0 3px #60a5fa, inset 0 0 0 5px rgba(255, 255, 255, .6); }
@keyframes spDmDot { to { transform: scale(.82); opacity: .8; } }

/* Steine */
.sp-dm-layer { position: absolute; inset: 0; pointer-events: none; }
.sp-dm-pc { --dx: 0px; --dy: 0px; position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; z-index: 1;
	transform: translate(calc(var(--c) * 100% + var(--dx)), calc(var(--r) * 100% + var(--dy))); transition: transform .24s cubic-bezier(.3, .7, .35, 1); }
.sp-dm-pc.is-moving { z-index: 4; }
.sp-dm-pc.is-drag { z-index: 6; transition: none; }
.sp-dm-disc { position: absolute; inset: 9%; display: grid; place-items: center; border-radius: 50%; transition: transform .22s, opacity .28s, filter .2s; }
.sp-dm-disc::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; }
.sp-dm-disc::after { content: ""; position: absolute; left: 17%; top: 9%; width: 48%; height: 30%; border-radius: 50%; transform: rotate(-24deg);
	background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); pointer-events: none; }
.sp-dm-w .sp-dm-disc { background: radial-gradient(circle at 34% 28%, #fff 0 7%, #fdf5df 24%, #ecd9af 62%, #c6a465 100%);
	box-shadow: 0 calc(var(--dm) * .007) 0 #9c7b45, 0 calc(var(--dm) * .014) calc(var(--dm) * .02) rgba(45, 20, 4, .5); }
.sp-dm-w .sp-dm-disc::before { border: calc(var(--dm) * .004) solid rgba(156, 123, 69, .45); box-shadow: inset 0 1px 2px rgba(120, 90, 40, .35), 0 1px 0 rgba(255, 255, 255, .7); }
.sp-dm-b .sp-dm-disc { background: radial-gradient(circle at 34% 28%, #9ca3af 0 5%, #4b5563 22%, #1f2937 60%, #05070c 100%);
	box-shadow: 0 calc(var(--dm) * .007) 0 #000, 0 calc(var(--dm) * .014) calc(var(--dm) * .02) rgba(0, 0, 0, .55); }
.sp-dm-b .sp-dm-disc::before { border: calc(var(--dm) * .004) solid rgba(148, 163, 184, .35); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .12); }
.sp-dm-b .sp-dm-disc::after { opacity: .45; }
.sp-dm-crown { position: relative; z-index: 1; width: 62%; height: auto; margin-top: -4%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.sp-dm-pc.is-promo .sp-dm-crown { animation: spDmCrown .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes spDmCrown { from { transform: translateY(-60%) scale(0) rotate(-40deg); opacity: 0; } }
.sp-dm-pc.is-sel .sp-dm-disc { transform: scale(1.08); box-shadow: 0 0 0 calc(var(--dm) * .009) #facc15, 0 calc(var(--dm) * .022) calc(var(--dm) * .03) rgba(0, 0, 0, .5); }
.sp-dm-pc.is-drag .sp-dm-disc { transform: scale(1.16); box-shadow: 0 0 0 calc(var(--dm) * .009) #facc15, 0 calc(var(--dm) * .04) calc(var(--dm) * .05) rgba(0, 0, 0, .5); }
.sp-dm-pc.is-must .sp-dm-disc { animation: spDmMust .75s ease-in-out infinite alternate; }
@keyframes spDmMust {
	from { box-shadow: 0 0 0 calc(var(--dm) * .006) #fb923c, 0 0 calc(var(--dm) * .02) 2px rgba(249, 115, 22, .7); }
	to { box-shadow: 0 0 0 calc(var(--dm) * .012) #fdba74, 0 0 calc(var(--dm) * .045) 6px rgba(249, 115, 22, .95); }
}
.sp-dm-pc.is-taken .sp-dm-disc { opacity: .5; filter: grayscale(.7); }
.sp-dm-pc.is-taken::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; font: 900 calc(var(--dm) * .06) / 1 var(--sp-font); color: #ef4444;
	text-shadow: 0 1px 0 #fff, 0 0 6px rgba(255, 255, 255, .8); }
.sp-dm-pc.is-gone .sp-dm-disc { transform: scale(.15) rotate(50deg); opacity: 0; }
.sp-dm-pc.is-gone::after { opacity: 0; transition: opacity .2s; }

@media (max-width: 640px) {
	.sp-dm { gap: 6px; }
	.sp-dm-status { font-size: .94rem; }
	.sp-dm-pl { min-height: 42px; gap: 8px; padding: 4px 6px 4px 8px; }
	.sp-dm-mini.sp-dm-big { width: 22px; height: 22px; }
	.sp-dm-mini { width: 13px; height: 13px; }
	.sp-dm-undo { padding: 0 10px; }
	.sp-dm-undo-t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-dm-pc, .sp-dm-disc { transition: none; }
	.sp-dm-must, .sp-dm-pc.is-must .sp-dm-disc, .sp-dm-cell.is-target::after, .sp-dm-cell.is-hop::after { animation: none; }
}