/* Spass-Ebene: Candy-Derby (Rangliste), Popups. Eigene Schicht ueber der App. */

/* ---------- Candy-Derby (Candy-Crush-Look) ---------- */
.race{
  position:relative;
  margin-top:8px;border:4px solid #3a1568;border-radius:28px;overflow:hidden;
  box-shadow:0 10px 0 #2c0f52,0 18px 34px rgba(40,10,80,.5);
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.20),transparent 32%),
    radial-gradient(circle at 88% 82%,rgba(255,110,214,.40),transparent 40%),
    radial-gradient(circle at 10% 58%,rgba(126,224,255,.26),transparent 26%),
    radial-gradient(circle at 72% 22%,rgba(255,222,90,.20),transparent 24%),
    radial-gradient(circle at 94% 45%,rgba(93,224,180,.22),transparent 26%),
    radial-gradient(circle at 40% 92%,rgba(255,150,230,.24),transparent 30%),
    radial-gradient(rgba(255,255,255,.14) 2px,transparent 3px) 0 0/34px 34px,
    radial-gradient(rgba(126,224,255,.18) 2px,transparent 3px) 17px 17px/34px 34px,
    linear-gradient(#8a4fe0,#5a25a8);
}
.race > .race-head,.race > .rt-field{position:relative;z-index:1}

/* Bonbon-Himmel im Kopf: Wolken, schwebende Suessigkeiten, Funkeln */
.race-head .sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.race-head .ttl,.race-head .winbtn{position:relative;z-index:2}
.sky .cloud{position:absolute;background:rgba(255,255,255,.6);border-radius:50%;filter:blur(1px)}
.sky .cloud.a{width:64px;height:24px;top:16px;left:6%;box-shadow:20px 6px 0 -4px rgba(255,255,255,.55),38px 2px 0 -8px rgba(255,255,255,.5)}
.sky .cloud.b{width:52px;height:20px;top:44px;right:8%;box-shadow:-16px 5px 0 -4px rgba(255,255,255,.5)}
.sky .cloud.c{width:40px;height:16px;top:8px;left:52%;box-shadow:14px 4px 0 -4px rgba(255,255,255,.45)}
.sky .floaty{position:absolute;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));animation:bob 3s ease-in-out infinite}
.sky .f1{top:8px;left:15%;font-size:20px}
.sky .f2{top:50px;left:28%;font-size:15px;opacity:.85;animation-delay:.6s}
.sky .f3{top:14px;right:15%;font-size:21px;animation-delay:1.1s}
.sky .f4{top:52px;right:26%;font-size:15px;opacity:.85;animation-delay:1.6s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-6px) rotate(7deg)}}
.sky .tw{position:absolute;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.8);animation:twinkle 1.6s ease-in-out infinite}
.sky .t1{top:24px;left:42%;font-size:12px}
.sky .t2{top:58px;left:62%;font-size:9px;animation-delay:.5s}
.sky .t3{top:12px;right:36%;font-size:10px;animation-delay:1s}
.sky .t4{top:62px;left:12%;font-size:8px;animation-delay:1.4s}
/* Bonbon-Himmel + Titelbanner */
.race-head{
  position:relative;padding:30px 16px 18px;text-align:center;color:#fff;
  background:linear-gradient(#ffa9e0 0,#e46fc6 60%,#c94fae 100%);
  border-bottom:4px solid #a13a8e;
}
.race-head::before{  /* glaenzende Bonbon-Punkte oben */
  content:"";position:absolute;top:0;left:0;right:0;height:14px;
  background:
    radial-gradient(circle at 11px 4px,#fff59d 5px,transparent 6px) 0 0/22px 14px repeat-x,
    radial-gradient(circle at 0 4px,#7ee0ff 5px,transparent 6px) 0 0/22px 14px repeat-x;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.15));opacity:.95
}
.race-head::after{  /* Glanz */
  content:"";position:absolute;left:0;right:0;top:14px;height:34%;
  background:linear-gradient(rgba(255,255,255,.45),transparent);pointer-events:none
}
.race-head .ttl{position:relative;z-index:1;display:inline-block;font-size:30px;font-weight:900;letter-spacing:-.02em;
  color:#ffe45e;margin-top:6px;-webkit-text-stroke:2px #8a2b1e;
  text-shadow:0 3px 0 #8a2b1e,0 5px 6px rgba(0,0,0,.3),0 0 22px rgba(255,220,90,.6);
  animation:ttlpop 2.4s ease-in-out infinite}
@keyframes ttlpop{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.05) rotate(1deg)}}
.race-head .ttl::before,.race-head .ttl::after{content:"✨";position:absolute;font-size:18px;
  -webkit-text-stroke:0;text-shadow:none;animation:twinkle 1.5s ease-in-out infinite}
.race-head .ttl::before{left:-14px;top:-10px}
.race-head .ttl::after{right:-14px;bottom:-8px;animation-delay:.75s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.25)}}
.race-head .sub{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.95;margin-top:2px}
.race-head .winbtn{
  position:relative;z-index:1;display:inline-block;margin-top:12px;color:#fff;border:3px solid #fff;
  background:linear-gradient(#ff8a3d,#f2611f);
  border-radius:16px;font-family:inherit;font-size:14px;font-weight:900;padding:9px 18px;cursor:pointer;
  box-shadow:0 5px 0 #b8420f,0 8px 12px rgba(0,0,0,.25);text-shadow:0 1px 0 rgba(0,0,0,.25)
}
.race-head .winbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #b8420f}

.rt-field{padding:14px 12px 16px}

/* Eine Bahn */
.lane{position:relative;margin-bottom:14px}
.lane .laneName{display:flex;align-items:center;gap:8px;font-weight:900;font-size:15px;color:#fff;
  margin:0 2px 6px;text-shadow:0 2px 0 rgba(60,20,110,.55)}
.lane .laneName .num{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(#c07bff,#8a3ff0);color:#fff;font-size:13px;font-weight:900;
  border:2px solid #fff;box-shadow:0 3px 0 rgba(40,10,80,.6)}
.lane.p1 .laneName .num{background:linear-gradient(#ffe45e,#f5b528);color:#7a3a10}
.lane.p2 .laneName .num{background:linear-gradient(#eaf0f6,#b9c6d6);color:#39506a}
.lane.p3 .laneName .num{background:linear-gradient(#ffb877,#e07a2e);color:#5a2a0c}
.lane .prize{margin-left:auto;font-weight:900;font-variant-numeric:tabular-nums;color:#7a3a80;
  background:linear-gradient(#ffffff,#ffe9f6);border:2px solid #fff;border-radius:999px;padding:3px 12px;
  box-shadow:0 4px 0 rgba(40,10,80,.35)}
.lane .prize.pos{color:#1a8f4c}.lane .prize.neg{color:#e0356b}

/* Bonbon-Bahn (Pfefferminz-Streifen) + Ziel-Stern */
.track{
  position:relative;height:48px;border-radius:16px;
  background:repeating-linear-gradient(45deg,#ff93d3 0 18px,#ffd6ef 18px 36px);
  border:3px solid #fff;overflow:hidden;
  box-shadow:0 5px 0 rgba(40,10,80,.45),inset 0 4px 8px rgba(255,255,255,.55),inset 0 -6px 10px rgba(200,60,150,.35)
}
.track::before{  /* Glanzstreifen oben */
  content:"";position:absolute;left:6px;right:6px;top:4px;height:36%;border-radius:12px;
  background:linear-gradient(rgba(255,255,255,.7),transparent);pointer-events:none;z-index:1}
.track::after{  /* wandernder Licht-Sweep (Glossy) */
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-14deg);animation:sweep 2.6s ease-in-out infinite}
@keyframes sweep{0%{left:-60%}55%,100%{left:130%}}
.lane:nth-child(2) .track::after{animation-delay:.5s}
.lane:nth-child(3) .track::after{animation-delay:1s}
.lane:nth-child(4) .track::after{animation-delay:1.5s}
.lane:nth-child(5) .track::after{animation-delay:2s}
.track .finish{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;z-index:2;
  background:radial-gradient(circle at 35% 30%,#fff 0 14%,#8ee6ff 15% 55%,#3bb6e6 100%);
  border:2px solid #fff;border-radius:50%;animation:starpulse 1.2s ease-in-out infinite}
@keyframes starpulse{
  0%,100%{box-shadow:0 0 0 2px #2b8fc4,0 0 6px 2px rgba(142,230,255,.55);transform:translateY(-50%) scale(1)}
  50%{box-shadow:0 0 0 2px #2b8fc4,0 0 18px 6px rgba(142,230,255,.95);transform:translateY(-50%) scale(1.14)}}
.track .finish::after{content:"⭐";position:absolute;inset:0;display:grid;place-items:center;font-size:16px}
.horse{
  position:absolute;top:50%;transform:translate(-50%,-50%);font-size:32px;line-height:1;z-index:3;
  transition:left 1.2s cubic-bezier(.34,1.15,.5,1);will-change:left;
  animation:hbounce .8s ease-in-out infinite;
  filter:drop-shadow(0 4px 2px rgba(60,20,110,.5)) drop-shadow(0 0 8px rgba(255,150,230,.6))
}
@keyframes hbounce{
  0%{transform:translate(-50%,-50%) translateY(0) rotate(0)}
  50%{transform:translate(-50%,-50%) translateY(-7px) rotate(180deg)}
  100%{transform:translate(-50%,-50%) translateY(0) rotate(360deg)}}
.dust{position:absolute;top:38%;transform:translate(-50%,-50%);font-size:16px;z-index:1;opacity:.9;
  transition:left 1.2s cubic-bezier(.34,1.15,.5,1);animation:dustpuff .6s ease-in-out infinite}
@keyframes dustpuff{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.7) rotate(0)}
  50%{opacity:.95;transform:translate(-50%,-50%) scale(1.15) rotate(25deg)}}
.lane.p1 .horse{font-size:36px}

/* Weniger Bewegung, wenn vom System gewuenscht */
@media (prefers-reduced-motion: reduce){
  .race-head .ttl,.race-head .ttl::before,.race-head .ttl::after,
  .track::after,.track .finish,.horse,.dust,
  .sky .floaty,.sky .tw{animation:none}
}

/* ---------- Zuruf-Picker ---------- */
.pokebtn{background:#111;color:#fff;border:0;border-radius:9px;font-family:inherit;
  font-size:12px;font-weight:700;padding:7px 12px;cursor:pointer}
.pokerow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pokerow form{margin:0}
.pokerow button{font-size:22px;line-height:1;background:#fff;border:2px solid #111;border-radius:10px;
  padding:6px 9px;cursor:pointer;transition:transform .08s}
.pokerow button:active{transform:scale(.85)}

/* ---------- Gewinner-Popup (YOU WIN) ---------- */
.winwrap{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;
  background:rgba(10,10,20,.72);padding:20px}
.winwrap.show{display:flex;animation:fadein .3s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.wincard{
  position:relative;width:min(92vw,360px);text-align:center;color:#fff;padding:38px 24px 26px;border-radius:24px;
  background:radial-gradient(120% 90% at 50% 0,#d98bff 0,#a24be6 45%,#6a1fb0 100%);
  border:4px solid #fff;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;
  animation:pop .5s cubic-bezier(.2,1.3,.5,1)
}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.wincard::before{content:"";position:absolute;inset:-40% -10%;z-index:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.16) 0 12deg,transparent 12deg 24deg);
  animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wincard > *{position:relative;z-index:1}
.wincard .crown{font-size:52px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
.wincard .youwin{font-size:44px;font-weight:900;letter-spacing:-.02em;margin:6px 0 2px;
  color:#FFE45E;-webkit-text-stroke:2px #5a1a86;text-shadow:0 3px 0 #5a1a86}
.wincard .winname{font-size:26px;font-weight:900;margin:6px 0 2px;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.wincard .winlabel{font-size:13px;text-transform:uppercase;letter-spacing:.14em;opacity:.9}
.wincard .prizebig{display:inline-block;margin-top:14px;background:linear-gradient(#ffe45e,#f5b528);color:#7a3a10;
  font-size:30px;font-weight:900;padding:8px 20px;border-radius:999px;border:3px solid #fff;
  font-variant-numeric:tabular-nums}
.wincard .prizesub{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.85;margin-top:8px}
.wincard .winclose{margin-top:20px;background:#fff;color:#111;border:0;border-radius:12px;
  font-family:inherit;font-weight:800;font-size:15px;padding:13px 22px;cursor:pointer;width:100%}

/* ---------- Zuruf-Empfang-Popup ---------- */
.pokewrap{position:fixed;inset:0;z-index:9997;display:none;align-items:center;justify-content:center;
  background:rgba(10,10,20,.6);padding:24px}
.pokewrap.show{display:flex}
.pokecard{width:min(88vw,320px);text-align:center;background:#fff;border:4px solid #111;border-radius:22px;
  padding:26px 22px;box-shadow:0 18px 50px rgba(0,0,0,.4);animation:pop .4s cubic-bezier(.2,1.3,.5,1)}
.pokecard .bigemoji{font-size:88px;line-height:1;animation:hbob .6s ease-in-out infinite}
.pokecard .fromtxt{margin-top:12px;font-size:17px;font-weight:700}
.pokecard .fromtxt b{color:#E8342F}
.pokecard .pokeclose{margin-top:18px;background:#111;color:#fff;border:0;border-radius:12px;
  font-family:inherit;font-weight:800;font-size:15px;padding:12px 22px;cursor:pointer;width:100%}