/* ==========================================================
   1. TRYB DOMYSLNY - czern + zimny, jasnoniebieski poblask
   ========================================================== */
:root{
  --bg:#000000;
  --txt:#eaf1ff;
  --muted:#6d7a90;
  --glow:#a6ccff;
  --glow-soft:rgba(166,204,255,.30);
  --line:rgba(166,204,255,.13);
  --radius:18px;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{background:#000}

body{
  min-height:100vh;
  color:var(--txt);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:74px 20px 44px;
  gap:24px;
  overflow-x:hidden;
}

/* ---------- naglowek ---------- */
header{text-align:center}
h1{
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:.01em;
  color:#fff;
  text-shadow:0 0 22px var(--glow-soft);
}
header p{
  color:var(--muted);
  font-size:.88rem;
  margin-top:7px;
}

/* ---------- pasek postepu ---------- */
.progress{
  width:min(680px,100%);
  display:flex;
  align-items:center;
  gap:14px;
  font-size:.8rem;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.bar{
  flex:1;
  height:3px;
  border-radius:99px;
  background:rgba(166,204,255,.10);
  overflow:hidden;
}
.bar span{
  display:block;
  height:100%;
  width:0;
  border-radius:99px;
  background:var(--glow);
  box-shadow:0 0 12px var(--glow);
  transition:width .3s ease;
}

/* ---------- karta (bez obracania) ---------- */
.scene{
  width:min(680px,100%);
  height:min(400px,60vh);
  cursor:pointer;
  position:relative;
}
.card{
  position:relative;
  width:100%;
  height:100%;
}
.face{
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(160deg,#131824,#0c1017 60%,#0a0d13);
  box-shadow:0 0 100px -30px rgba(166,204,255,.45),
             0 20px 60px rgba(0,0,0,.8),
             inset 0 1px 0 rgba(166,204,255,.07);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:46px 40px;
  overflow:auto;
  opacity:0;
  visibility:hidden;
}
.face.front{opacity:1;visibility:visible}
.card.flipped .face.front{opacity:0;visibility:hidden}
.card.flipped .face.back{opacity:1;visibility:visible}

.label{
  position:absolute;
  top:18px;
  left:22px;
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(166,204,255,.55);
}
.face .text{
  font-size:1.6rem;
  font-weight:600;
  line-height:1.45;
  color:#fff;
  text-shadow:0 0 30px rgba(166,204,255,.22);
}
.face.back .text{
  font-size:1.14rem;
  font-weight:450;
  line-height:1.65;
  color:#dfe9fb;
  text-shadow:none;
}
.face .text small{
  display:block;
  margin-top:14px;
  font-size:.9rem;
  font-weight:400;
  color:#78859c;
  line-height:1.6;
}
.hint{
  position:absolute;
  bottom:16px;
  font-size:.7rem;
  color:#3c465a;
}

/* ---------- przyciski ---------- */
.controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
button{
  font:inherit;
  font-size:.85rem;
  color:#c9d8f0;
  background:#000;
  border:1px solid var(--line);
  border-radius:11px;
  padding:11px 20px;
  cursor:pointer;
  transition:color .18s,border-color .18s,box-shadow .18s,transform .1s;
}
button:hover{
  color:#fff;
  border-color:rgba(166,204,255,.38);
  box-shadow:0 0 24px -6px var(--glow-soft);
}
button:active{transform:translateY(1px)}
button.primary{
  color:#fff;
  border-color:rgba(166,204,255,.42);
  box-shadow:0 0 30px -10px var(--glow);
}

/* ---------- przelacznik trybu (prawy gorny rog) ---------- */
#modeBtn{
  position:fixed;
  top:16px;
  right:18px;
  z-index:60;
  font-size:.8rem;
  padding:9px 15px;
}

/* warstwy efektow - puste dopoki nie wlaczysz kasyna */
#fx{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
#flash{position:fixed;inset:0;pointer-events:none;z-index:55;opacity:0;background:#fff}

@media(max-width:560px){
  .face{padding:34px 24px}
  .face .text{font-size:1.28rem}
  .face.back .text{font-size:1rem}
}

/* ==========================================================
   2. TRYB KASYNO - wszystko miga, wiruje i swieci
   ========================================================== */

@keyframes bgSpin{to{transform:rotate(360deg)}}
@keyframes hueShift{to{filter:hue-rotate(360deg)}}
@keyframes discoPulse{0%,100%{opacity:.14}50%{opacity:.40}}
@keyframes wobble{
  0%,100%{transform:translateY(0) rotate(-1.2deg) scale(1)}
  25%{transform:translateY(-10px) rotate(1.4deg) scale(1.02)}
  50%{transform:translateY(0) rotate(-1.4deg) scale(.99)}
  75%{transform:translateY(-6px) rotate(1deg) scale(1.02)}
}
@keyframes neonBorder{
  0%{box-shadow:0 0 0 3px #ff0055,0 0 40px #ff0055,0 0 90px #ff0055}
  25%{box-shadow:0 0 0 3px #ffcc00,0 0 40px #ffcc00,0 0 90px #ffcc00}
  50%{box-shadow:0 0 0 3px #00ffa3,0 0 40px #00ffa3,0 0 90px #00ffa3}
  75%{box-shadow:0 0 0 3px #00b3ff,0 0 40px #00b3ff,0 0 90px #00b3ff}
  100%{box-shadow:0 0 0 3px #ff00e1,0 0 40px #ff00e1,0 0 90px #ff00e1}
}
@keyframes rainbowText{to{background-position:400% 50%}}
@keyframes jiggle{
  0%,100%{transform:rotate(-3deg) scale(1)}
  50%{transform:rotate(3deg) scale(1.08)}
}
@keyframes blinkFast{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes zoomPump{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shakeHard{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-9px,6px) rotate(-1.5deg)}
  40%{transform:translate(8px,-7px) rotate(1.5deg)}
  60%{transform:translate(-7px,-5px) rotate(-1deg)}
  80%{transform:translate(7px,5px) rotate(1deg)}
}
@keyframes flashOut{from{opacity:.85}to{opacity:0}}
@keyframes rainFall{
  from{transform:translateY(-14vh) rotate(0) scale(var(--sc,1));opacity:1}
  to{transform:translateY(114vh) rotate(var(--spin,720deg)) scale(var(--sc,1));opacity:.9}
}
@keyframes burstOut{
  from{transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:1}
  to{transform:translate(var(--dx),var(--dy)) scale(1.9) rotate(var(--rot));opacity:0}
}
@keyframes slotReel{
  0%{transform:translateY(0);filter:blur(0)}
  35%{transform:translateY(-130%);filter:blur(10px)}
  36%{transform:translateY(130%);filter:blur(10px)}
  100%{transform:translateY(0);filter:blur(0)}
}
@keyframes bulbRing{
  0%,100%{border-color:#ffd400;box-shadow:0 0 30px #ffd400}
  33%{border-color:#ff0066;box-shadow:0 0 30px #ff0066}
  66%{border-color:#00e5ff;box-shadow:0 0 30px #00e5ff}
}
@keyframes floatUpDown{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

body.casino{
  padding:104px 20px 104px;
  gap:42px;
  background:#120018;
  animation:hueShift 9s linear infinite;
}
body.casino::before{
  content:"";
  position:fixed;
  width:260vmax;height:260vmax;
  top:50%;left:50%;
  margin:-130vmax 0 0 -130vmax;
  background:conic-gradient(#ff0055,#ff8a00,#ffee00,#00ff95,#00b3ff,#c400ff,#ff0055);
  animation:bgSpin 7s linear infinite;
  opacity:.30;
  z-index:-2;
}
body.casino::after{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(circle at 20% 25%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 78% 18%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 62% 78%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 12% 82%,#fff 0 2px,transparent 3px),
    radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(0,0,0,.72) 100%);
  animation:discoPulse 1.1s ease-in-out infinite;
  z-index:-1;
  pointer-events:none;
}
body.casino.shake{animation:shakeHard .45s ease-in-out,hueShift 9s linear infinite}

body.casino h1{
  font-size:2.2rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:linear-gradient(90deg,#ff0055,#ffcc00,#00ff95,#00b3ff,#ff00e1,#ff0055);
  background-size:400% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rainbowText 1.6s linear infinite,zoomPump .7s ease-in-out infinite;
  text-shadow:none;
  -webkit-text-stroke:2px #000;
  paint-order:stroke fill;
  filter:drop-shadow(0 0 10px #000);
}
body.casino header p{
  color:#ffe600;
  font-weight:800;
  text-transform:uppercase;
  animation:blinkFast .45s steps(1) infinite;
}

body.casino .progress{color:#ffe600;font-weight:800}
body.casino .bar{
  background:rgba(0,0,0,.5);
  height:10px;
  border:2px solid #ffd400;
  animation:blinkFast .6s steps(1) infinite;
}
body.casino .bar span{
  background:linear-gradient(90deg,#ff0055,#ffcc00,#00ff95,#00b3ff,#ff00e1);
  background-size:300% 100%;
  animation:rainbowText 1s linear infinite;
  box-shadow:0 0 20px #fff;
}

/* karta: obracanie 3D wraca TYLKO w kasynie */
body.casino .scene{perspective:1400px;animation:wobble 2.2s ease-in-out infinite}
body.casino .scene::before{
  content:"";
  position:absolute;
  inset:-16px;
  border:6px dashed #ffd400;
  border-radius:28px;
  animation:bulbRing .5s steps(1) infinite,zoomPump 1.8s ease-in-out infinite;
  pointer-events:none;
}
body.casino .card{
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.2,1.5,.35,1);
}
body.casino .card.flipped{transform:rotateY(180deg)}
body.casino .card.reel{animation:slotReel .55s cubic-bezier(.4,0,.2,1)}
body.casino .face{
  opacity:1 !important;
  visibility:visible !important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:linear-gradient(145deg,#1a0030,#3d0055,#000);
  border:4px solid #fff;
  animation:neonBorder .7s linear infinite;
}
body.casino .face.back{transform:rotateY(180deg)}
body.casino .face .text{
  background:linear-gradient(90deg,#fff700,#ff0055,#00ffea,#ffffff,#fff700);
  background-size:400% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rainbowText 1.2s linear infinite;
  font-weight:900;
  font-size:2rem;
  text-shadow:none;
  -webkit-text-stroke:2px #000;
  paint-order:stroke fill;
  filter:drop-shadow(0 0 8px #000) drop-shadow(0 0 3px #000);
}
body.casino .face.back .text{font-size:1.4rem}
body.casino .face .text small{
  -webkit-text-fill-color:#ffe600;
  color:#ffe600;
  font-size:1.05rem;
  font-weight:800;
  -webkit-text-stroke:1.5px #000;
  paint-order:stroke fill;
  animation:blinkFast 1s steps(1) infinite;
}
body.casino .label{
  color:#fff;
  background:#ff0055;
  padding:3px 9px;
  border-radius:6px;
  animation:jiggle .35s ease-in-out infinite;
}
body.casino .hint{color:#fff;animation:blinkFast .5s steps(1) infinite}

body.casino button{
  background:linear-gradient(135deg,#ff0055,#ffcc00);
  color:#000;
  font-weight:900;
  text-transform:uppercase;
  border:3px solid #fff;
  animation:jiggle .5s ease-in-out infinite;
  box-shadow:0 0 26px #ff0055;
}
body.casino button:hover{animation:zoomPump .25s ease-in-out infinite;box-shadow:0 0 44px #fff}
body.casino button.primary{background:linear-gradient(135deg,#00ff95,#00b3ff)}
body.casino #modeBtn{
  top:46px;
  background:linear-gradient(135deg,#ffd400,#ff8a00);
  animation:zoomPump .5s ease-in-out infinite;
}

/* deszcz emotek + wystrzaly */
.rain{
  position:absolute;
  top:0;
  font-size:26px;
  animation:rainFall linear forwards;
  will-change:transform;
}
.burst{
  position:absolute;
  top:50%;left:50%;
  font-size:30px;
  animation:burstOut .9s ease-out forwards;
  will-change:transform;
}
#flash.hit{animation:flashOut .35s ease-out}

/* paski JACKPOT u gory i na dole */
.marquee{
  position:fixed;
  left:0;right:0;
  height:34px;
  background:repeating-linear-gradient(90deg,#ff0055 0 30px,#ffd400 30px 60px);
  overflow:hidden;
  z-index:45;
  display:flex;
  align-items:center;
  border-top:3px solid #fff;
  border-bottom:3px solid #fff;
  pointer-events:none;
}
.marquee.top{top:0}
.marquee.bottom{bottom:0}
.marquee div{
  display:flex;
  white-space:nowrap;
  font-weight:900;
  font-size:.9rem;
  color:#000;
  letter-spacing:.2em;
  animation:marqueeScroll 9s linear infinite;
}
.marquee.bottom div{animation-direction:reverse}