@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Nunito:wght@400;600;800&display=swap');

:root{
  --bg1:#FFF7E1;
  --bg2:#D0F7E7;
  --accent:#FF6A88;
  --accent2:#F7C948;
  --accent3:#4FD1C5;
  --text:#1F2937;
  --muted:#5B6171;
  --win:#2ECC71;
  --lose:#FF5A5F;
  --btn:#FF8FAB;
  --btnText:#401010;
  --panel:#FFFFFFD8;
  --shadow:0 10px 24px rgba(0,0,0,0.12);
  --radius:16px;

  /* Rozmiar symbolu i dopasowana wysokość bębna = 3 wiersze */
  --symSize:88px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg1),var(--bg2));
  background-attachment: fixed;
}

.topbar{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:14px clamp(12px,3vw,28px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo{
  width:58px;height:58px;display:grid;place-items:center;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
}
.logo-svg{width:58px;height:58px;border-radius:12px}
.brand-text h1{
  font-family:Montserrat, sans-serif;
  font-weight:800;margin:0;font-size:clamp(20px,4.6vw,36px);letter-spacing:.3px
}
.brand-text .tagline{margin:2px 0 0 0;color:var(--muted);font-size:clamp(12px,2.8vw,14px)}

.statusbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:var(--panel);border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow)
}
.stat{display:flex;align-items:center;gap:8px}
.stat .label{font-weight:700;color:var(--muted)}
.value{
  font-weight:800;padding:6px 10px;border-radius:10px;background:#fff;color:var(--text);min-width:88px;text-align:center
}
.bet-control{display:flex;align-items:center;gap:8px}
.btn{
  border:none;cursor:pointer;border-radius:14px;padding:12px 16px;
  background:linear-gradient(180deg,var(--btn),#FFC0CB);color:var(--btnText);
  font-weight:800;letter-spacing:.4px;box-shadow:var(--shadow);transition:transform .06s ease,filter .2s ease,opacity .2s ease
}
.btn:hover{filter:brightness(1.02)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.round{width:42px;height:42px;display:grid;place-items:center;padding:0}
.btn.small{padding:8px 12px;border-radius:10px}
.btn.ghost{background:#fff}
.btn.toggle{background:linear-gradient(180deg,#C6F6D5,#8FE6D0)}
.btn.cta{
  font-size:clamp(16px,4.6vw,22px);
  padding:14px 24px;border-radius:18px;
  background:linear-gradient(180deg,#FFD76F,#FF9A76);
  color:#4A2E00;
}

.game{padding:8px clamp(8px,3vw,24px) 24px}
.scene{
  display:grid;gap:16px;grid-template-rows:auto auto auto;
}
.hotel-skyline{
  width:100%;height:180px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)
}
.hotel-skyline svg{width:100%;height:100%;display:block}

.slot{
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,#FFF,#FFF3D6);
  border-radius:22px;box-shadow:var(--shadow);
  padding:18px;
}
.reels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:center;
  min-height:calc(var(--symSize) * 3);
}
.reel{
  overflow:hidden;position:relative;height:calc(var(--symSize) * 3);border-radius:16px;background:linear-gradient(180deg,#FDFCFB,#FEEBD8);
  box-shadow: inset 0 4px 10px rgba(0,0,0,.08), inset 0 -4px 10px rgba(0,0,0,.05);
  border:2px solid #FFE4B5;
}
.reel-inner{
  will-change: transform;transform: translateY(0);
}
.symbol{
  height:var(--symSize);display:grid;place-items:center;
}
.symbol .wrap{
  width:calc(var(--symSize) - 8px);height:calc(var(--symSize) - 8px);border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg, #fff, #FFF7E6);
  border:2px solid rgba(0,0,0,.04);box-shadow:0 6px 14px rgba(0,0,0,.07);
}
.symbol svg{width:64px;height:64px;display:block}

.payline{
  position:absolute;left:14px;right:14px;top:50%;height:2px;transform:translateY(-50%);
  background: repeating-linear-gradient(90deg,#FF9A76 0 12px, transparent 12px 18px);
  opacity:.7
}
.glass{
  position:absolute;inset:0;border-radius:22px;pointer-events:none;
  box-shadow: inset 0 18px 40px rgba(255,255,255,.4), inset 0 -10px 30px rgba(255,200,150,.25);
}

.controls{display:flex;justify-content:center}
.footer{
  padding:18px clamp(12px,3vw,28px);color:var(--muted);text-align:center
}
.footer .disclaimer{margin:0 0 8px 0;font-weight:700}
.footer .legal-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.footer .legal-links a{color:#0F766E;text-decoration:none;font-weight:700}
.footer .legal-links a:hover{text-decoration:underline}

.win-banner{
  position:absolute;left:50%;top:14px;transform:translateX(-50%) scale(.9);
  padding:10px 16px;border-radius:16px;background:#ffffffcc;color:#1F2937;
  font-weight:900;letter-spacing:.5px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease
}
.win-banner.show{opacity:1;transform:translateX(-50%) scale(1.02)}
.win-banner.big{background:#D1FAE5;color:#064E3B;border:2px solid #34D399}

.confetti{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:22px
}
.confetti .p{
  position:absolute;width:8px;height:14px;border-radius:2px;opacity:0;animation:pop .9s ease forwards
}
@keyframes pop{
  0%{transform:translateY(0) rotate(0);opacity:0}
  20%{opacity:1}
  100%{transform:translateY(180px) rotate(240deg);opacity:0}
}
.symbol.win .wrap{animation:glow .9s ease-in-out 2}
@keyframes glow{
  0%,100%{box-shadow:0 6px 14px rgba(0,0,0,.08),0 0 0 0 rgba(46,204,113,0)}
  50%{box-shadow:0 6px 14px rgba(0,0,0,.08),0 0 24px 6px rgba(46,204,113,.6)}
}

.cookie-banner{
  position:fixed;left:10px;right:10px;bottom:10px;z-index:50;
  background:#fff;border:2px solid #FFE4B5;border-radius:14px;box-shadow:var(--shadow);
  padding:12px
}
.cookie-content{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie-actions{display:flex;gap:8px}

@media (min-width:768px){
  :root{ --symSize:98px; }
  .symbol svg{width:70px;height:70px}
}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .symbol.win .wrap{animation:none}
  .confetti .p{animation:none}
}