.sp-root{--sp-flaeche:oklch(19% .018 45);--sp-flaeche-2:oklch(24% .022 45);--sp-feld:oklch(28% .02 45);--sp-rand:oklch(64% .21 40/.35);--sp-text:oklch(97% .01 60);--sp-leise:oklch(75% .02 60);--sp-orange:oklch(70% .2 45);--sp-orange-hell:oklch(82% .15 65);--sp-glow:0 0 24px oklch(70% .2 45/.45);--sp-kalt:oklch(78% .03 250);--sp-rot:oklch(62% .21 25);--sp-gruen:oklch(66% .16 150);--sp-blau:oklch(60% .17 262);--sp-gelb:oklch(83% .16 85);--sp-schwarz:oklch(22% .01 60);color:var(--sp-text)}.sp-fenster{background:radial-gradient(120% 60% at 50% 0%, oklch(64% .21 40/.18), transparent 60%), linear-gradient(180deg, var(--sp-flaeche-2), var(--sp-flaeche));border:1px solid var(--sp-rand);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 80px -20px oklch(0% 0 0/.6),inset 0 1px oklch(100% 0 0/.06)}.sp-panel{background:oklch(100% 0 0/.035);border:1px solid oklch(100% 0 0/.08);box-shadow:inset 0 1px oklch(100% 0 0/.035)}.sp-auswahl{background:oklch(100% 0 0/.025);border:1px solid oklch(100% 0 0/.08);transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}.sp-auswahl:hover{border-color:var(--sp-rand);background:oklch(100% 0 0/.05);transform:translateY(-2px)}.sp-auswahl[aria-pressed=true]{border-color:var(--sp-orange);box-shadow:0 0 0 1px oklch(70% .2 45/.25), var(--sp-glow);background:oklch(70% .2 45/.09)}.sp-status{color:var(--sp-leise);background:oklch(100% 0 0/.055);border:1px solid oklch(100% 0 0/.09);border-radius:999px;align-items:center;gap:6px;padding:5px 9px;display:inline-flex}.sp-status>i{background:currentColor;border-radius:999px;width:7px;height:7px;box-shadow:0 0 10px}.sp-fokus:focus-visible,.sp-root button:focus-visible{outline:2px solid var(--sp-orange-hell);outline-offset:3px}.sp-glanz{isolation:isolate;position:relative;overflow:hidden}.sp-glanz:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(120deg,oklch(100% 0 0/.05),#0000 35%,oklch(70% .2 45/.09));position:absolute;inset:-1px}.sp-feld{background:var(--sp-feld);border-radius:14px;box-shadow:inset 0 2px 10px oklch(0% 0 0/.35)}.sp-knopf{color:var(--sp-text);background:oklch(100% 0 0/.06);border:1px solid oklch(100% 0 0/.1);transition:background .15s,transform .1s}.sp-knopf:hover{background:oklch(100% 0 0/.12);border-color:oklch(100% 0 0/.18)}.sp-knopf:active{transform:scale(.96)}.sp-primaer{background:linear-gradient(180deg, var(--sp-orange-hell), var(--sp-orange));color:oklch(20% .03 40);box-shadow:var(--sp-glow);font-weight:700}.sp-leise{color:var(--sp-leise)}.sp-orange{color:var(--sp-orange-hell)}.sp-avatar{background:oklch(100% 0 0/.08);border:1px solid oklch(100% 0 0/.15);border-radius:999px;place-items:center;width:30px;height:30px;font-size:12px;font-weight:700;display:grid}.sp-avatar-ich{background:linear-gradient(135deg, var(--sp-orange-hell), var(--sp-orange));color:oklch(20% .03 40);border:0}.sp-leiste{background:oklch(100% 0 0/.1);border-radius:999px;height:6px;overflow:hidden}.sp-leiste>i{background:linear-gradient(90deg, var(--sp-orange), var(--sp-orange-hell));height:100%;box-shadow:var(--sp-glow);transition:width .4s cubic-bezier(.2,.8,.2,1);display:block}.sp-dran{animation:1.6s ease-in-out infinite sp-puls}.sp-tisch{perspective:900px}.sp-tisch>canvas{transform-origin:50% 100%;transform:rotateX(14deg);box-shadow:0 30px 40px -20px oklch(0% 0 0/.7),0 0 0 1px oklch(100% 0 0/.06)}.sp-abzeichen-aus{filter:grayscale();opacity:.35}.sp-stein-a{background:radial-gradient(circle at 35% 30%, var(--sp-orange-hell), var(--sp-orange) 55%, oklch(50% .18 38));box-shadow:0 0 12px oklch(70% .2 45/.5)}.sp-stein-b{background:radial-gradient(circle at 35% 30%,oklch(98% 0 0),oklch(82% .01 250) 60%,oklch(60% .02 250))}.sp-fall{animation:.42s cubic-bezier(.3,0,.6,1.3) both sp-fall}.sp-sieg{animation:.9s ease-in-out infinite alternate sp-glimm}.sp-strich{stroke-dasharray:100;stroke-dashoffset:100px;animation:.35s ease-out forwards sp-zeichnen}.sp-geist{opacity:0;transition:opacity .15s;position:absolute}.group:hover .sp-geist,.group:focus-visible .sp-geist{opacity:.28}.sp-radar{background:radial-gradient(circle,oklch(30% .06 200/.6),oklch(16% .03 220));position:relative;overflow:hidden}.sp-radar:after{content:"";pointer-events:none;background:conic-gradient(oklch(80% .15 180/.25),#0000 18%);animation:4s linear infinite sp-dreh;position:absolute;inset:-50%}.sp-radar-3d{transform-origin:50% 100%;transform:perspective(900px)rotateX(18deg);box-shadow:0 30px 40px -20px oklch(0% 0 0/.7)}.sp-ring{animation:.7s ease-out both sp-ring}.sp-ziel{pointer-events:none;border:1px solid var(--sp-orange-hell);border-radius:4px;animation:.9s ease-in-out infinite sp-ziel-puls;position:absolute;inset:2px;box-shadow:0 0 10px oklch(70% .2 45/.7),inset 0 0 8px oklch(70% .2 45/.35)}.sp-ziel:before,.sp-ziel:after{content:"";background:oklch(82% .15 65/.85);position:absolute}.sp-ziel:before{width:1px;top:-3px;bottom:-3px;left:50%;transform:translate(-50%)}.sp-ziel:after{height:1px;top:50%;left:-3px;right:-3px;transform:translateY(-50%)}@keyframes sp-ziel-puls{50%{opacity:.55}}.sp-boom{animation:.5s ease-out both sp-boom}.sp-karte{transition:transform .18s cubic-bezier(.2,.8,.2,1);box-shadow:0 6px 14px oklch(0% 0 0/.4),inset 0 0 0 3px oklch(100% 0 0/.9)}.sp-karte-rueck{background:repeating-linear-gradient(45deg, var(--sp-orange), var(--sp-orange) 4px, oklch(50% .18 38) 4px, oklch(50% .18 38) 8px);box-shadow:inset 0 0 0 2px oklch(100% 0 0/.85),0 3px 8px oklch(0% 0 0/.4)}.sp-flug{animation:.35s cubic-bezier(.2,.8,.2,1) both sp-flug}.sp-neu{animation:.18s ease-out both sp-pop-in}.sp-merge{animation:.22s ease-out both sp-merge}.sp-pop{animation:.25s cubic-bezier(.2,.8,.2,1.4) both sp-pop-in}.sp-blitz{animation:.35s ease-out both sp-blitz}.sp-wackeln{animation:.3s ease-in-out sp-wackeln}.sp-rein{animation:.4s cubic-bezier(.2,.8,.2,1) both sp-rein}.sp-zahl{animation:.9s cubic-bezier(.2,.8,.2,1) both sp-zahl}.sp-blase{animation:2.2s cubic-bezier(.2,.8,.2,1) forwards sp-blase}.sp-ablauf{animation:30s linear forwards sp-ablauf}@keyframes sp-fall{0%{transform:translateY(-420%)}80%{transform:translateY(6%)}to{transform:translateY(0)}}@keyframes sp-glimm{0%{box-shadow:0 0 6px oklch(100% 0 0/.4)}to{box-shadow:0 0 22px 4px oklch(85% .15 70/.9)}}@keyframes sp-zeichnen{to{stroke-dashoffset:0}}@keyframes sp-dreh{to{transform:rotate(360deg)}}@keyframes sp-ring{0%{box-shadow:0 0 oklch(80% .1 210/.8)}to{box-shadow:0 0 0 14px oklch(80% .1 210/0)}}@keyframes sp-boom{0%{filter:brightness(2);transform:scale(.3)}60%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes sp-flug{0%{opacity:0;transform:translateY(120px)rotate(-18deg)scale(.8)}to{opacity:1;transform:none}}@keyframes sp-pop-in{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes sp-merge{50%{transform:scale(1.18)}}@keyframes sp-blitz{0%{filter:brightness(2.5)}to{filter:none}}@keyframes sp-wackeln{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(2px,1px)}}@keyframes sp-rein{0%{opacity:0;transform:translate(110%)scale(.95)}to{opacity:1;transform:none}}@keyframes sp-zahl{0%{opacity:0;transform:scale(2.4)}30%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes sp-puls{50%{opacity:.55}}@keyframes sp-blase{0%{opacity:0;transform:translateY(20px)scale(.5)}15%{opacity:1;transform:translateY(0)scale(1.1)}80%{opacity:1}to{opacity:0;transform:translateY(-90px)scale(1)}}@keyframes sp-ablauf{0%{width:100%}to{width:0%}}@media (prefers-reduced-motion:reduce){.sp-root *,.sp-root :after{transition:none!important;animation:none!important}}@media (width<=639px){.sp-fenster{border-radius:18px}.sp-auswahl:hover{transform:none}}.sp-liga{color:oklch(18% .02 45);box-shadow:inset 0 1px oklch(100% 0 0/.4),0 8px 22px oklch(0% 0 0/.35)}.sp-liga-bronze{background:linear-gradient(135deg,oklch(72% .1 55),oklch(52% .09 45))}.sp-liga-silber{background:linear-gradient(135deg,oklch(92% .01 250),oklch(68% .02 250))}.sp-liga-gold{background:linear-gradient(135deg,oklch(90% .14 90),oklch(70% .15 75))}.sp-liga-platin{background:linear-gradient(135deg,oklch(93% .04 200),oklch(70% .07 210))}.sp-liga-diamant{color:oklch(98% 0 0);background:linear-gradient(135deg,oklch(90% .08 300),oklch(65% .18 280))}.sp-tisch3d{perspective:900px}.sp-tisch{transform-origin:50% 70%;border-radius:28px;transform:rotateX(28deg);box-shadow:0 30px 40px -20px oklch(0% 0 0/.7),inset 0 0 0 6px oklch(30% .05 40),inset 0 0 40px oklch(0% 0 0/.45)}.sp-tisch>*{transform:translateZ(18px)}.sp-hand3d{perspective:700px}.sp-handkarte{transform-style:preserve-3d;transition:transform .22s cubic-bezier(.2,.8,.2,1)}.sp-handkarte:hover{z-index:5;filter:drop-shadow(0 14px 12px oklch(0% 0 0/.5));translate:0 -14px}.sp-karte-spielbar{box-shadow:0 6px 14px oklch(0% 0 0/.4), inset 0 0 0 3px oklch(100% 0 0/.9), 0 0 0 2px var(--sp-orange), 0 0 18px oklch(70% .2 45/.45)}.sp-karte-gesperrt{filter:grayscale(.45)brightness(.48);opacity:.72}.sp-ziehen-hinweis{animation:1.25s ease-in-out infinite sp-ziehen}.sp-farbwahl{border:1px solid var(--sp-rand);box-shadow:0 18px 50px oklch(0% 0 0/.55), var(--sp-glow);background:oklch(16% .02 45/.96)}.sp-farbknopf{position:relative;box-shadow:0 5px 14px oklch(0% 0 0/.4)}.sp-farbknopf span{color:var(--sp-leise);font-size:10px;position:absolute;top:calc(100% + 7px);left:50%;translate:-50%}@keyframes sp-ziehen{50%{transform:translateY(-4px);box-shadow:inset 0 0 0 2px oklch(100% 0 0/.85),0 8px 22px oklch(70% .2 45/.6)}}@media (prefers-reduced-motion:reduce){.sp-tisch{transform:none}.sp-handkarte{transition:none}}.sp-buzzer{transition:transform 60ms,box-shadow 60ms,background-color 75ms;box-shadow:inset 0 2px oklch(100% 0 0/.18),inset 0 -10px 24px oklch(0% 0 0/.45),0 10px oklch(14% .02 45),0 22px 30px -8px oklch(0% 0 0/.6)}.sp-buzzer:active{transform:translateY(8px);box-shadow:inset 0 2px oklch(100% 0 0/.12),inset 0 -6px 18px oklch(0% 0 0/.5),0 2px oklch(14% .02 45),0 8px 14px -6px oklch(0% 0 0/.6)}.sp-ampel{background:oklch(13% .015 45);border-radius:999px;gap:8px;padding:9px 12px;display:inline-flex;box-shadow:inset 0 2px 6px oklch(0% 0 0/.6)}.sp-ampel i{background:oklch(100% 0 0/.12);border-radius:999px;width:12px;height:12px}.sp-ampel i:first-child{background:var(--sp-rot);box-shadow:0 0 14px var(--sp-rot);animation:1.2s ease-in-out infinite sp-ampel}.sp-reaktion-aktiv{background:var(--sp-orange);animation:1.2s ease-in-out infinite sp-puls;box-shadow:0 0 10px oklch(70% .2 45/.7)}.sp-jetzt{letter-spacing:0;text-shadow:0 3px oklch(100% 0 0/.25),0 0 28px oklch(100% 0 0/.45)}.sp-reaktion-sieg{color:oklch(92% .08 150);background:oklch(66% .16 150/.18);border:1px solid oklch(66% .16 150/.45)}.sp-reaktion-verlust{color:oklch(88% .08 25);background:oklch(62% .21 25/.16);border:1px solid oklch(62% .21 25/.4)}@keyframes sp-ampel{50%{opacity:.45}}.sp-arcade{perspective:1000px}.sp-arcade>canvas{transform-origin:50% 100%;transform:rotateX(14deg);box-shadow:0 30px 40px -18px oklch(0% 0 0/.75),0 0 0 6px oklch(22% .03 45),0 0 30px oklch(70% .2 45/.18)}@media (prefers-reduced-motion:reduce){.sp-arcade>canvas{transform:none}.sp-buzzer{transition:none}}.sp-primaer{transition:transform .12s,box-shadow .2s,filter .2s;position:relative;overflow:hidden}.sp-primaer:after{content:"";pointer-events:none;background:linear-gradient(110deg,#0000 30%,oklch(100% 0 0/.45) 50%,#0000 70%);position:absolute;inset:0;transform:translate(-120%)}.sp-primaer:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 0 34px oklch(70% .2 45/.6)}.sp-primaer:hover:not(:disabled):after{transition:transform .7s;transform:translate(120%)}.sp-primaer:active:not(:disabled){transform:translateY(1px)scale(.98)}.sp-panel{transition:border-color .25s,box-shadow .25s}.sp-panel:hover{border-color:oklch(100% 0 0/.13);box-shadow:inset 0 1px oklch(100% 0 0/.05),0 18px 40px -24px oklch(0% 0 0/.7)}@keyframes sp-turnier-puls{0%,to{box-shadow:0 0 oklch(70% .2 45/.45)}50%{box-shadow:0 0 0 6px oklch(70% .2 45/0)}}.sp-turnier-live{animation:1.8s ease-in-out infinite sp-turnier-puls}@media (prefers-reduced-motion:reduce){.sp-primaer:after,.sp-turnier-live{transition:none;animation:none}}.sp-fenster,.sp-seite{isolation:isolate;position:relative}.sp-fenster:after,.sp-seite:after{content:"";z-index:-1;border-radius:inherit;pointer-events:none;opacity:.55;background-color:#0000;background-image:radial-gradient(40% 30% at 15% 10%,oklch(70% .2 45/.22),#0000 70%),radial-gradient(35% 28% at 85% 20%,oklch(60% .17 262/.16),#0000 70%),radial-gradient(45% 35% at 50% 100%,oklch(66% .16 150/.1),#0000 70%);background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:180% 180%;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;animation:18s ease-in-out infinite alternate sp-polar;position:absolute;inset:0}.sp-fenster:before{content:"";z-index:-1;border-radius:inherit;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}@keyframes sp-polar{0%{background-position:0 0}to{background-position:100% 100%}}.sp-root canvas{border-radius:14px;box-shadow:0 0 0 1px oklch(100% 0 0/.08),0 20px 50px -20px oklch(0% 0 0/.7),0 0 40px -10px oklch(70% .2 45/.25)}.sp-primaer{position:relative;overflow:hidden}.sp-primaer:after{content:"";pointer-events:none;background:linear-gradient(110deg,#0000 30%,oklch(100% 0 0/.45) 50%,#0000 70%);transition:transform .6s;position:absolute;inset:0;transform:translate(-120%)}.sp-primaer:hover:after{transform:translate(120%)}@media (prefers-reduced-motion:reduce),(width<=640px){.sp-fenster:after,.sp-seite:after{animation:none}}.sp-auswahl,.sp-panel{animation:.45s cubic-bezier(.2,.8,.2,1) both sp-auf}.sp-auswahl:nth-child(2){animation-delay:40ms}.sp-auswahl:nth-child(3){animation-delay:80ms}.sp-auswahl:nth-child(4){animation-delay:.12s}.sp-auswahl:nth-child(5){animation-delay:.16s}.sp-auswahl:nth-child(n+6){animation-delay:.2s}@keyframes sp-auf{0%{opacity:0;transform:translateY(8px)scale(.985)}to{opacity:1;transform:none}}.sp-avatar{background:linear-gradient(145deg,oklch(70% .2 45/.35),oklch(100% 0 0/.06));box-shadow:0 0 0 2px oklch(19% .018 45),0 0 0 3px oklch(70% .2 45/.35)}@media (prefers-reduced-motion:reduce),(width<=640px){.sp-auswahl,.sp-panel{animation:none}}.sp-stein-a{box-shadow:inset 0 -3px 6px oklch(0% 0 0/.35),0 4px 10px -2px oklch(70% .2 45/.6);background:radial-gradient(circle at 32% 28%, oklch(90% .12 70), var(--sp-orange) 55%, oklch(50% .18 40))!important}.sp-stein-b{box-shadow:inset 0 -3px 6px oklch(0% 0 0/.35),0 4px 10px -2px oklch(0% 0 0/.5);background:radial-gradient(circle at 32% 28%,oklch(95% .01 250),oklch(72% .04 250) 55%,oklch(45% .04 250))!important}.sp-dran{box-shadow:0 0 0 1px var(--sp-orange), 0 0 22px -4px oklch(70% .2 45/.7)}.sp-sieg{outline-offset:2px;outline:2px solid oklch(95% .08 85)}.sp-matchball{animation:.9s ease-in-out infinite sp-matchball}@keyframes sp-matchball{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.06)}}@media (prefers-reduced-motion:reduce){.sp-matchball{animation:none}}.sp-root{--sp-flaeche:oklch(99.5% .004 70);--sp-flaeche-2:oklch(97.5% .014 65);--sp-feld:oklch(95.5% .022 60);--sp-rand:oklch(68% .19 45/.28);--sp-text:oklch(24% .02 45);--sp-leise:oklch(50% .02 50);--sp-orange:oklch(68% .2 45);--sp-orange-hell:oklch(62% .2 42);--sp-glow:0 8px 22px -8px oklch(68% .2 45/.55);--sp-kalt:oklch(45% .04 250);--sp-schwarz:oklch(30% .01 60)}.sp-seite{background:radial-gradient(90% 50% at 50% 0,oklch(93% .06 60/.7),#0000 70%),linear-gradient(oklch(99% .008 70),oklch(97% .012 60));border:1px solid oklch(68% .19 45/.16)}.sp-fenster{background:radial-gradient(120% 50% at 50% 0%, oklch(90% .08 60/.6), transparent 65%), linear-gradient(180deg, var(--sp-flaeche), var(--sp-flaeche-2));box-shadow:0 30px 70px -28px oklch(45% .12 45/.45),inset 0 1px oklch(100% 0 0)}.sp-fenster:after,.sp-seite:after{opacity:.35}.sp-fenster:before{display:none}.sp-panel,.sp-auswahl{background:oklch(100% 0 0);border:1px solid oklch(55% .05 50/.14);box-shadow:0 1px 2px oklch(40% .05 45/.06),0 10px 26px -18px oklch(45% .1 45/.35)}.sp-panel:hover,.sp-auswahl:hover{border-color:var(--sp-rand);background:oklch(100% 0 0);box-shadow:0 18px 36px -20px oklch(55% .15 45/.45)}.sp-auswahl[aria-pressed=true]{background:oklch(98.5% .02 60)}.sp-status{background:oklch(97% .015 60);border-color:oklch(68% .19 45/.18)}.sp-trenner{border-color:oklch(50% .03 50/.12)}.sp-glanz:before{background:linear-gradient(120deg,oklch(100% 0 0/.6),#0000 40%,oklch(80% .12 60/.12))}.sp-knopf{color:var(--sp-text);background:oklch(100% 0 0);border:1px solid oklch(50% .04 50/.18)}.sp-knopf:hover{border-color:var(--sp-rand);background:oklch(97% .02 60)}.sp-primaer{color:oklch(100% 0 0);background:linear-gradient(oklch(74% .18 55),oklch(66% .2 42))}.sp-avatar{color:var(--sp-text);background:linear-gradient(145deg,oklch(90% .08 60),oklch(100% 0 0));box-shadow:0 0 0 2px oklch(100% 0 0),0 0 0 3px oklch(68% .19 45/.45)}.sp-avatar-ich{color:oklch(100% 0 0)}.sp-feld{background:linear-gradient(160deg, oklch(97% .018 65), var(--sp-feld) 55%, oklch(93% .03 55));box-shadow:inset 0 2px 8px oklch(45% .08 45/.14),inset 0 0 0 1px oklch(68% .19 45/.14),0 16px 34px -20px oklch(55% .15 45/.4)}.sp-loch{background:oklch(88% .03 55);box-shadow:inset 0 3px 6px oklch(40% .08 45/.3)}.sp-root canvas{box-shadow:0 0 0 1px oklch(68% .19 45/.2),0 20px 44px -22px oklch(40% .1 45/.5)}.sp-farbwahl{background:oklch(100% 0 0/.97)}