/* ---------- Mahjong ---------- */
.sp-mj { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: center; }
.sp-mj-defsw { position: absolute; width: 0; height: 0; overflow: hidden; }
.sp-mj-table { width: 100%; min-width: 0; overflow: hidden; display: flex; justify-content: center; padding: 10px; border-radius: 22px;
	background: radial-gradient(120% 90% at 50% 15%, #14b8a6 0%, #0f766e 38%, #134e4a 75%, #042f2e 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -10px 30px rgba(0, 0, 0, .25), 0 22px 46px -26px #134e4a; }
.sp-mj-board { --d: 6px; --w: 50px; position: relative; z-index: 0; isolation: isolate; outline: none; touch-action: manipulation; }
.sp-mj-board:focus-visible { outline: 3px dashed rgba(253, 224, 71, .7); outline-offset: 6px; border-radius: 6px; }

/* Stein: helle Vorderseite, Kante in drei Stufen (Elfenbein → Violett), Schatten je Ebene */
.sp-mj-t { position: absolute; border-radius: 12% / 9%; cursor: pointer; -webkit-tap-highlight-color: transparent;
	background: linear-gradient(150deg, #fffef9 0%, #f8f1df 62%, #ece0c2 100%);
	box-shadow: inset 0 0 0 1px rgba(146, 110, 52, .28), inset 1px 1px 0 1.5px rgba(255, 255, 255, .9),
		calc(var(--d) * .4) calc(var(--d) * .4) 0 #e6d6ad, calc(var(--d) * .75) calc(var(--d) * .75) 0 #a78bfa, var(--d) var(--d) 0 #6d28d9,
		calc(var(--d) * 1.2) calc(var(--d) * 1.5) calc(var(--d) * 1.8) rgba(4, 30, 28, .55);
	transition: transform .12s ease, background .15s; }
.sp-mj-t::before, .sp-mj-t::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.sp-mj-t::after { background: rgba(30, 27, 60, .26); opacity: 0; transition: opacity .2s; }
.sp-mj-t.is-blocked { cursor: default; }
.sp-mj-t.is-blocked::after { opacity: 1; }
.sp-mj-f { position: absolute; left: 7%; top: 6%; width: 86%; height: 88%; pointer-events: none; }
@media (hover: hover) { .sp-mj-t:not(.is-blocked):hover { transform: translate(-1px, -2px); } }
.sp-mj-t.is-sel { background: linear-gradient(150deg, #fffbeb, #fde68a 70%, #fcd34d); transform: translate(-1px, -3px); }
.sp-mj-t.is-sel::before { inset: -2px; border: 3px solid #f59e0b; box-shadow: 0 0 14px 2px rgba(251, 191, 36, .8); }
.sp-mj-t.is-hint { background: linear-gradient(150deg, #f0fdf4, #bbf7d0); }
.sp-mj-t.is-hint::before { inset: -2px; border: 3px solid #22c55e; animation: spMjPulse .7s ease-in-out infinite alternate; }
.sp-mj-board:focus-visible .sp-mj-t.is-cur:not(.is-sel)::before { inset: -2px; border: 2px dashed #0ea5e9; }
.sp-mj-t.is-out { animation: spMjOut .38s ease-in forwards; pointer-events: none; }
.sp-mj-t.is-gone { display: none; }
.sp-mj-t.is-shake { animation: spMjShake .35s ease; }
.sp-mj-board.is-mix .sp-mj-t { animation: spMjMix .5s ease; }
.sp-mj-board.is-deal .sp-mj-t { animation: spMjIn .45s cubic-bezier(.2, 1.3, .4, 1) backwards; animation-delay: calc(var(--k) * 5ms); }
@keyframes spMjOut { 35% { transform: translateY(-12%) scale(1.1); opacity: 1; } 100% { transform: translateY(-45%) scale(.5); opacity: 0; } }
@keyframes spMjShake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes spMjMix { 50% { transform: scale(.82) rotate(8deg); } }
@keyframes spMjIn { from { transform: translateY(-30px) scale(.7); opacity: 0; } }
@keyframes spMjPulse { from { box-shadow: 0 0 4px 1px rgba(34, 197, 94, .5); } to { box-shadow: 0 0 16px 5px rgba(34, 197, 94, .9); } }

/* Knöpfe unter dem Tisch */
.sp-mj-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sp-mj-tools .sp-btn { min-width: 112px; }
.sp-mj-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--sp-c, #7c3aed); color: #fff; font-size: .75rem; }
.sp-mj-n:empty { display: none; }

/* Vollbild: Tisch füllt die Bühne */
.sp-shell:fullscreen .sp-mj { height: 100%; grid-template-rows: 1fr auto; }
.sp-shell:fullscreen .sp-mj-table { align-items: center; }
.sp-shell:-webkit-full-screen .sp-mj { height: 100%; grid-template-rows: 1fr auto; }
.sp-shell:-webkit-full-screen .sp-mj-table { align-items: center; }

@media (max-width: 640px) {
	.sp-mj-table { padding: 8px 4px; border-radius: 16px; }
	.sp-mj-tools { gap: 6px; width: 100%; flex-wrap: nowrap; }
	.sp-mj-tools .sp-btn { min-width: 0; flex: 1 1 0; padding: 0 6px; gap: 5px; font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-mj-t, .sp-mj-t.is-out, .sp-mj-t.is-shake, .sp-mj-board.is-mix .sp-mj-t, .sp-mj-board.is-deal .sp-mj-t, .sp-mj-t.is-hint::before { animation: none; transition: none; }
	.sp-mj-t.is-out { display: none; }
}