/* Block-Puzzle */
.sp-bp { --bw: 480px; --gap: calc(var(--bw) * .008); --pad: calc(var(--bw) * .014); position: relative; display: flex; flex-direction: column; gap: 10px;
	padding: 12px; border-radius: 26px; color: #ede9fe; outline: none;
	background: radial-gradient(120% 60% at 50% 0%, rgba(167, 139, 250, .28), transparent 60%), linear-gradient(165deg, #2e1065, #1e1b4b 55%, #172554);
	box-shadow: 0 24px 50px -24px rgba(46, 16, 101, .75), inset 0 1px 0 rgba(255, 255, 255, .12); }
.sp-bp:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }

/* Kopfzeile: Serie + Hinweis */
.sp-bp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; width: var(--bw); font-size: .88rem; }
.sp-bp-streak { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: #c4b5fd; font-weight: 800; letter-spacing: .01em; transition: background .2s; }
.sp-bp-streak.is-hot { background: linear-gradient(135deg, #f59e0b, #db2777); color: #fff; box-shadow: 0 6px 16px -8px #db2777; }
.sp-bp-dots { display: inline-flex; gap: 4px; }
.sp-bp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.sp-bp-dots i.on { background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); }
.sp-bp-hint { color: #a5b4fc; font-weight: 600; text-align: right; }

/* Feld */
.sp-bp-bw { position: relative; width: var(--bw); height: var(--bw); }
.sp-bp-board, .sp-bp-fx { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); gap: var(--gap); padding: var(--pad); }
.sp-bp-board { border-radius: calc(var(--bw) * .035); background: rgba(15, 10, 50, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 6px 24px rgba(0, 0, 0, .35); }
.sp-bp-fx { pointer-events: none; z-index: 3; }
.sp-bp-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.sp-bp-cell { position: relative; border-radius: 22%; background: rgba(255, 255, 255, .055); }
.sp-bp-cell.is-alt { background: rgba(196, 181, 253, .14); }

/* Blöcke: Verlauf + Glanz */
.sp-bp-k1 { --k: #8b5cf6; --k2: #c4b5fd; --k3: #5b21b6; }
.sp-bp-k2 { --k: #ec4899; --k2: #f9a8d4; --k3: #9d174d; }
.sp-bp-k3 { --k: #f97316; --k2: #fdba74; --k3: #c2410c; }
.sp-bp-k4 { --k: #14b8a6; --k2: #5eead4; --k3: #0f766e; }
.sp-bp-k5 { --k: #0ea5e9; --k2: #7dd3fc; --k3: #0369a1; }
.sp-bp-k6 { --k: #65a30d; --k2: #bef264; --k3: #3f6212; }
.sp-bp-k7 { --k: #f59e0b; --k2: #fde68a; --k3: #b45309; }
.sp-bp-k8 { --k: #ef4444; --k2: #fca5a5; --k3: #991b1b; }
.sp-bp-cell.is-on, .sp-bp-cell.is-ghost, .sp-bp-blk {
	background: linear-gradient(150deg, var(--k2) 0%, var(--k) 48%, var(--k3) 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .2), 0 3px 8px -3px rgba(0, 0, 0, .6); }
.sp-bp-cell.is-on::after, .sp-bp-blk::after { content: ""; position: absolute; left: 13%; top: 9%; width: 52%; height: 30%; border-radius: 50% 50% 45% 45%;
	background: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); pointer-events: none; }
.sp-bp-cell.is-on { animation: spBpIn .18s ease-out; }
.sp-bp-cell.is-ghost { opacity: .45; box-shadow: none; }
.sp-bp-cell.is-ghost.is-bad { opacity: 1; background: repeating-linear-gradient(45deg, rgba(248, 113, 113, .55) 0 5px, rgba(248, 113, 113, .2) 5px 10px); }
.sp-bp-cell.is-hit { filter: brightness(1.25) saturate(1.2); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 14px rgba(255, 255, 255, .55); }
.sp-bp-cell.is-ghost.is-hit { opacity: .85; }
.sp-bp-blk { position: absolute; display: block; border-radius: 22%; }
.sp-bp-fx .sp-bp-blk { position: relative; animation: spBpPop .55s ease-in both; }

/* Teile zur Auswahl */
.sp-bp-tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: var(--bw); height: calc(var(--bw) * .34); }
.sp-bp-slot { position: relative; display: grid; place-items: center; border-radius: 18px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
	cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; transition: background .15s, box-shadow .15s; }
.sp-bp-slot:hover:not(.is-empty) { background: rgba(255, 255, 255, .11); }
.sp-bp-slot:active { cursor: grabbing; }
.sp-bp-slot.is-empty { cursor: default; background: rgba(255, 255, 255, .025); }
.sp-bp-slot.is-sel { background: rgba(196, 181, 253, .2); box-shadow: inset 0 0 0 2px #c4b5fd; }
.sp-bp-piece { position: relative; transition: opacity .15s, filter .2s; }
.sp-bp-slot.is-new .sp-bp-piece { animation: spBpDeal .35s cubic-bezier(.2, 1.5, .4, 1) both; }
.sp-bp-slot:nth-child(2).is-new .sp-bp-piece { animation-delay: .06s; }
.sp-bp-slot:nth-child(3).is-new .sp-bp-piece { animation-delay: .12s; }
.sp-bp-slot.is-lift .sp-bp-piece { opacity: .18; }
.sp-bp-slot.is-dead .sp-bp-piece { filter: grayscale(1) brightness(.7); opacity: .45; }
.sp-bp-slot.is-turn::after { content: "↻"; position: absolute; right: 8px; top: 6px; font-weight: 900; font-size: 1rem; color: #fde68a; }
.sp-bp.is-over .sp-bp-slot { cursor: default; }

/* gezogenes Teil */
.sp-bp-ghost { position: absolute; left: 0; top: 0; z-index: 12; pointer-events: none; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)); opacity: .92; }
.sp-bp-ghost.is-snap { opacity: 1; }

/* Punkte-Einblendung */
.sp-bp-pop { position: absolute; left: 50%; top: 44%; z-index: 6; pointer-events: none; text-align: center; white-space: nowrap; transform: translate(-50%, -50%);
	font-weight: 900; font-size: calc(var(--bw) * .1); line-height: 1; color: #fff; letter-spacing: -.02em;
	text-shadow: 0 3px 0 #7c3aed, 0 10px 24px rgba(0, 0, 0, .55); animation: spBpRise 1.2s ease-out both; }
.sp-bp-pop small { display: block; margin-top: 6px; font-size: .38em; letter-spacing: .02em; color: #fde68a; text-shadow: 0 2px 0 #b45309, 0 6px 14px rgba(0, 0, 0, .5); }
.sp-stat.sp-bp-rec { background: linear-gradient(135deg, #f59e0b, #db2777); }

@keyframes spBpIn { from { transform: scale(.7); } }
@keyframes spBpPop { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(1.18); filter: brightness(1.9); opacity: 1; } 100% { transform: scale(.15) rotate(30deg); filter: brightness(2.2); opacity: 0; } }
@keyframes spBpDeal { from { transform: translateY(18px) scale(.6); opacity: 0; } }
@keyframes spBpRise { 0% { transform: translate(-50%, -30%) scale(.6); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -110%) scale(1); opacity: 0; } }

@media (max-width: 640px) {
	.sp-bp { padding: 8px; gap: 8px; border-radius: 20px; }
	.sp-bp-tray { gap: 6px; }
	.sp-bp-head { font-size: .78rem; }
	.sp-bp-streak { padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-bp-cell.is-on, .sp-bp-slot.is-new .sp-bp-piece { animation: none; }
	.sp-bp-fx .sp-bp-blk { animation-duration: .01s; }
}