/* ---------- Glücksrad: fröhliches Casino-Geldrad (eigene Gestaltung) ---------- */
.sp-gr-wrap { width: 100%; container-type: inline-size; }
.sp-gr { display: grid; gap: 16px; align-items: start; padding: 14px; border-radius: 26px;
	background: radial-gradient(120% 80% at 30% 0%, #4c1d95, #2e1065 45%, #1e1b4b); border: 3px solid #7c3aed;
	box-shadow: 0 30px 60px -28px #2e1065, inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -6px 0 rgba(0, 0, 0, .3); }
.sp-gr-wrap.is-big .sp-gr { animation: spGrGlow .35s ease-in-out 6 alternate; }
@keyframes spGrGlow { to { box-shadow: 0 0 0 4px #fde047, 0 0 50px 6px rgba(253, 224, 71, .6); } }
@container (min-width: 760px) {
	.sp-gr { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); padding: 20px; gap: 22px; align-items: center; }
}

/* Rad */
.sp-gr-left { display: grid; gap: 10px; justify-items: center; min-width: 0; }
.sp-gr-wheelbox { width: min(100%, 470px); aspect-ratio: 1; touch-action: none; cursor: grab; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.sp-gr-wrap.is-spinning .sp-gr-wheelbox { cursor: default; }
.sp-gr-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sp-gr-lbl { font: 900 21px/1 var(--sp-font); letter-spacing: -.02em; }
.sp-gr-lbl.is-word { font-size: 13px; letter-spacing: .06em; }
.sp-gr-pin { fill: #fef3c7; stroke: #92400e; stroke-width: 1.4; }
.sp-gr-hubtxt { font: 900 13px/1 var(--sp-font); letter-spacing: .12em; fill: #4c1d95; }
.sp-gr-seg { transition: filter .2s; }
.sp-gr-seg.is-hit { stroke: #fff; stroke-width: 4; animation: spGrHit .5s ease-in-out infinite alternate; }
@keyframes spGrHit { to { filter: brightness(1.45); } }
.sp-gr-bulb { fill: #fde68a; filter: drop-shadow(0 0 4px #fbbf24); animation: spGrBulb 1.1s steps(1) infinite; }
.sp-gr-bulb.is-b { animation-delay: .55s; }
.sp-gr-wrap.is-spinning .sp-gr-bulb { animation-duration: .3s; }
.sp-gr-wrap.is-spinning .sp-gr-bulb.is-b { animation-delay: .15s; }
.sp-gr-wrap.is-big .sp-gr-bulb { animation-duration: .16s; fill: #fff; }
@keyframes spGrBulb { 50% { fill: #b45309; filter: none; } }

.sp-gr-msg { margin: 0; min-height: 2.8em; max-width: 470px; text-align: center; color: #ede9fe; font-size: clamp(.9rem, 2.2vw, 1.02rem); line-height: 1.4; }
.sp-gr-msg b { color: #fde047; }
.sp-gr-histbox { display: grid; gap: 6px; justify-items: center; width: min(100%, 470px); }
.sp-gr-sub { font: 800 .66rem/1.2 var(--sp-font); letter-spacing: .14em; text-transform: uppercase; color: #c4b5fd; text-align: center; }
.sp-gr-hist { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; min-height: 28px; }
.sp-gr-h { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 5px; border-radius: 99px; font: 900 .78rem/1 var(--sp-font);
	color: var(--fi); background: var(--fc); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .3); }
.sp-gr-h.is-new { outline: 3px solid #fde047; outline-offset: 1px; }
.sp-gr-none { color: #a78bfa; font-size: .85rem; }

/* Einsatzfelder */
.sp-gr-right { display: grid; gap: 12px; min-width: 0; }
.sp-gr-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.sp-gr-field { grid-column: span 3; position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 104px; padding: 10px 4px 8px; border: 0; border-radius: 16px;
	cursor: pointer; color: var(--fi); font-family: var(--sp-font); -webkit-tap-highlight-color: transparent;
	background: linear-gradient(170deg, color-mix(in srgb, var(--fc) 70%, #fff), var(--fc) 45%, var(--fd));
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .22), 0 8px 16px -8px rgba(0, 0, 0, .6); transition: transform .12s, box-shadow .15s; }
.sp-gr-f20, .sp-gr-fjoker, .sp-gr-fkrone { grid-column: span 4; }
.sp-gr-field:hover:not([disabled]) { transform: translateY(-2px); }
.sp-gr-field:active:not([disabled]) { transform: translateY(1px); }
.sp-gr-field[disabled] { cursor: default; }
.sp-gr-field:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }
.sp-gr-fl { font: 900 1.5rem/1 var(--sp-font); text-shadow: 0 1px 0 rgba(255, 255, 255, .25); white-space: nowrap; }
.sp-gr-fjoker .sp-gr-fl, .sp-gr-fkrone .sp-gr-fl { font-size: 1rem; padding-top: 4px; }
.sp-gr-fp { font: 900 .82rem/1.2 var(--sp-font); }
.sp-gr-fn { font: 700 .66rem/1.2 var(--sp-font); opacity: .85; }
.sp-gr-stack { position: relative; width: 30px; height: 22px; margin-top: 3px; }
.sp-gr-stack i { position: absolute; left: 0; bottom: calc(var(--k) * 4px); width: 30px; height: 12px; border-radius: 50%;
	background: radial-gradient(ellipse at center, var(--c) 0 45%, rgba(255, 255, 255, .9) 46% 56%, var(--c) 57%); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.sp-gr-amt { min-height: 1.1em; padding: 1px 7px; border-radius: 99px; font: 900 .78rem/1.1 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #fff; background: rgba(15, 23, 42, .72); }
.sp-gr-amt:empty { background: none; }
.sp-gr-field.has-bet { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .22), 0 0 0 3px #fff, 0 8px 16px -8px rgba(0, 0, 0, .6); }
.sp-gr-field.is-win { animation: spGrWin .5s ease-in-out infinite alternate; }
@keyframes spGrWin { to { box-shadow: 0 0 0 4px #fde047, 0 0 26px 6px rgba(253, 224, 71, .7); transform: translateY(-3px); } }
.sp-gr-field.is-lose { filter: saturate(.45) brightness(.8); }

/* Chips */
.sp-gr-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.sp-gr-chip { --c: #64748b; position: relative; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
	font: 900 .84rem/1 var(--sp-font); text-shadow: 0 1px 1px rgba(0, 0, 0, .55); -webkit-tap-highlight-color: transparent;
	background: radial-gradient(circle, var(--c) 0 46%, rgba(255, 255, 255, .92) 47% 52%, transparent 53%), repeating-conic-gradient(#fff 0 12deg, var(--c) 12deg 45deg);
	box-shadow: 0 0 0 2px var(--c), 0 4px 0 rgba(0, 0, 0, .45), 0 8px 12px -6px rgba(0, 0, 0, .6); transition: transform .12s, box-shadow .12s; }
.sp-gr-chip span { position: relative; }
.sp-gr-chip[style*="#cbd5e1"] { color: #1e293b; text-shadow: none; }
.sp-gr-chip[aria-pressed="true"] { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--c), 0 0 0 5px #fde047, 0 0 16px 4px rgba(253, 224, 71, .55), 0 9px 0 rgba(0, 0, 0, .35); }
.sp-gr-chip:focus-visible { outline: 3px solid #fde047; outline-offset: 3px; }

/* Knöpfe */
.sp-gr-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp-gr-act { min-height: 42px; padding: 0 8px; background: rgba(255, 255, 255, .94); }
.sp-gr-spin { display: grid; place-items: center; width: 100%; min-height: 62px; border: 0; border-radius: 999px; cursor: pointer; color: #451a03;
	font: 900 1.35rem/1 var(--sp-font); letter-spacing: .08em; text-transform: uppercase;
	background: radial-gradient(circle at 50% 25%, #fef08a, #facc15 50%, #ca8a04); box-shadow: 0 6px 0 #92400e, 0 14px 24px -8px rgba(0, 0, 0, .6); transition: transform .08s, box-shadow .08s; }
.sp-gr-spin small { font-size: .7rem; letter-spacing: .02em; font-weight: 750; text-transform: none; margin-top: -8px; }
.sp-gr-spin:active:not([disabled]) { transform: translateY(5px); box-shadow: 0 1px 0 #92400e, 0 6px 12px -6px rgba(0, 0, 0, .6); }
.sp-gr-spin[disabled] { filter: grayscale(.7); opacity: .65; cursor: not-allowed; }
.sp-gr-spin:focus-visible { outline: 3px solid #fde047; outline-offset: 3px; }
.sp-gr-limits { margin: 0; text-align: center; font-size: .78rem; color: #c4b5fd; }

@media (max-width: 560px) {
	.sp-gr { padding: 10px 8px; border-radius: 20px; gap: 12px; }
	.sp-gr-fields { gap: 6px; }
	.sp-gr-field { min-height: 92px; padding: 8px 2px 6px; border-radius: 13px; }
	.sp-gr-fl { font-size: 1.25rem; }
	.sp-gr-fjoker .sp-gr-fl, .sp-gr-fkrone .sp-gr-fl { font-size: .86rem; }
	.sp-gr-fn { font-size: .6rem; }
	.sp-gr-chip { width: 42px; height: 42px; font-size: .78rem; }
	.sp-gr-act { font-size: .8rem; padding: 0 4px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-gr-bulb, .sp-gr-seg.is-hit, .sp-gr-field.is-win, .sp-gr-wrap.is-big .sp-gr { animation: none; }
}