/* deko im hintergrund: rad, sterne, slot streifen */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-base{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -8%,rgba(255,255,255,.05) 0%,transparent 52%),radial-gradient(90% 70% at 50% 120%,rgba(255,46,58,.04) 0%,transparent 55%),linear-gradient(180deg,#0c0c0f 0%,var(--ink) 42%,#070708 100%)}
#stars{position:absolute;inset:0;display:block}
.bg-grid{position:absolute;inset:-2px;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(120% 90% at 50% 30%,#000 40%,transparent 85%)}
.bg-wheel-wrap{position:absolute;top:50%;left:50%;width:128vmax;height:128vmax;margin:-64vmax 0 0 -64vmax;opacity:.10;filter:blur(.5px);will-change:transform}
.bg-wheel-wrap svg{width:100%;height:100%;display:block}
.bg-slot{position:absolute;top:0;bottom:0;width:130px;overflow:hidden;opacity:.05;mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.bg-slot.left{left:-10px}
.bg-slot.right{right:-10px}
.bg-slot .reel-strip{position:absolute;top:0;left:0;right:0;will-change:transform}
.bg-slot .sym{height:120px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:64px;color:var(--silver)}
.suit{position:absolute;font-family:Georgia,serif;color:var(--silver);opacity:.03;will-change:transform;user-select:none}
.bg-noise{position:absolute;inset:0;opacity:.045;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bg-vignette{position:absolute;inset:0;box-shadow:inset 0 0 240px 60px rgba(0,0,0,.92),inset 0 0 80px 10px rgba(0,0,0,.6);background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.85) 100%)}

/* roter punkt statt normalem mauszeiger, nur am pc */
.cursor-dot{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:var(--white);box-shadow:0 0 10px rgba(255,255,255,.6);transition:width .22s var(--ease),height .22s var(--ease),background .22s,box-shadow .22s}
.cursor-dot.hot{width:15px;height:15px;background:var(--red);box-shadow:0 0 16px rgba(255,46,58,.85)}
@media(hover:none),(pointer:coarse){
  .cursor-dot{display:none}
}