/* =========================================================
   Jekpoti — slot machines
   Themed backgrounds, the cabinet with its reels and paylines,
   the mascot, the bottom console and the jackpot bar.
   ========================================================= */
/* themed scenes behind the machine */
body[data-theme="fruit"] {
  background:
    radial-gradient(ellipse 90% 40% at 50% 108%, rgba(255,120,0,.85), rgba(255,50,0,.3) 45%, transparent 70%),
    radial-gradient(ellipse at 50% 25%, #34a845 0%, #0f5420 50%, #04260c 100%);
}
body[data-theme="cat"] {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 72% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 35% 40%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 46%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 8%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 22% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 80%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 6% 52%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #120830 0%, #2d1065 55%, #6a1f84 100%);
}
body[data-theme="dad"] {
  background:
    radial-gradient(ellipse 30% 12% at 18% 22%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(ellipse 25% 10% at 80% 14%, rgba(255,255,255,.85), transparent 70%),
    linear-gradient(180deg, #2f9cf0 0%, #9ad8ff 58%, #7ccf5b 58.3%, #3c9a35 100%);
}
body[data-theme="moon"] {
  background:
    radial-gradient(circle at 84% 20%, #fff6cf 0 34px, #f2d27a 36px 46px, rgba(255,214,120,.25) 48px, transparent 130px),
    radial-gradient(1.5px 1.5px at 10% 15%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 60%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 50% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 65% 75%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 55%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 20% 85%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #02010d 0%, #140838 60%, #2c0f52 100%);
}
body[data-theme="tp"] {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.9) 0 3px, transparent 3px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 3px, transparent 3px 64px),
    linear-gradient(180deg, #74cbe6, #c3ecf8);
}
body[data-theme="fruit"] {
  --reelA: #0f5320;
  --reelB: #05290d;
}
body[data-theme="cat"] {
  --reelA: #2c1460;
  --reelB: #120731;
}
body[data-theme="dad"] {
  --reelA: #173a6b;
  --reelB: #091a36;
}
body[data-theme="moon"] {
  --reelA: #122a4d;
  --reelB: #050c1e;
}
body[data-theme="tp"] {
  --reelA: #4a1f5c;
  --reelB: #1f0a2a;
}

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.scene span {
  position: absolute;
  font-size: clamp(70px,13vw,190px);
  line-height: 1;
  opacity: .45;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.4));
}
.scene .p0 {
  left: -2%;
  bottom: -3%;
  transform: rotate(-10deg);
}
.scene .p1 {
  right: -2%;
  bottom: -3%;
  transform: rotate(10deg);
}
.scene .p2 {
  left: 3%;
  top: 14%;
  font-size: clamp(40px,7vw,100px);
  opacity: .35;
}
.scene .p3 {
  right: 4%;
  top: 16%;
  font-size: clamp(40px,7vw,100px);
  opacity: .35;
}

#mTag {
  margin: 6px 0 0;
  display: inline-block;
  background: rgba(8,4,20,.7);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  color: #f1e9ff;
}

.stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.mascot {
  justify-self: end;
  position: relative;
  width: 180px;
  text-align: center;
}
.mascot .m-e {
  display: inline-block;
  font-size: 120px;
  line-height: 1;
  animation: idle 3s ease-in-out infinite;
}
.mascot .m-e img {
  width: 170px;
  height: 170px;
  display: block;
}
.mascot small {
  display: inline-block;
  margin-top: 4px;
  background: rgba(8,4,20,.75);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
}
.bubble {
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%) scale(.6);
  opacity: 0;
  background: #fff;
  color: #1a0f33;
  font-weight: 900;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 14px;
  width: max-content;
  max-width: 180px;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top-color: #fff;
}
.bubble.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.mascot.happy .m-e {
  animation: hop .45s ease 3;
}
.mascot.sad .m-e {
  animation: sulk .45s ease 2;
}
@keyframes idle {
  50% {
    transform: translateY(-6px) rotate(-2deg);
  }
}
@keyframes hop {
  50% {
    transform: translateY(-28px) scale(1.08);
  }
}
@keyframes sulk {
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg);
  }
}
.side {
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lines-badge {
  background: linear-gradient(180deg,#3ad15a,#0e6a24);
  border: 3px solid #d4af37;
  border-radius: 12px;
  padding: 6px 12px;
  text-align: center;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
  min-width: 72px;
}
.lines-badge b {
  display: block;
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.lines-badge small {
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-weight: 900;
  font-size: 12px;
}
.rtp-badge {
  background: linear-gradient(180deg,#e0344f,#7a0b1f);
}
.rtp-badge b {
  font-size: 20px;
}
@media (max-width: 1060px) {
  .stage {
    grid-template-columns: 1fr;
  }
  .mascot,
  .side {
    display: none;
  }
}

.cabinet {
  position: relative;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.lights {
  display: flex;
  justify-content: space-between;
  padding: 0 14px 8px;
}
.lights i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd75e;
  opacity: .3;
  animation: blink 1s infinite;
}
.lights i:nth-child(odd) {
  animation-delay: .5s;
}
.spinning .lights i {
  animation-duration: .22s;
}
@keyframes blink {
  50% {
    opacity: 1;
    box-shadow: 0 0 12px #ffd75e;
  }
}
.screen {
  position: relative;
  border-radius: 16px;
  padding: 10px;
  border: 4px solid transparent;
  background: linear-gradient(180deg,#140b22,#05020a) padding-box,
    linear-gradient(180deg,#fff4b8,#d4a017 28%,#7a4e00 55%,#ffd75e 80%,#a06a00) border-box;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 34px rgba(255,190,60,.25);
}
.reels {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.reel {
  --cell: var(--cellsize);
  width: calc(var(--cell) * 1.04);
  height: calc(var(--cell) * 3);
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  border: 2px solid #c9a227;
  background: linear-gradient(180deg,var(--reelB,#120731),var(--reelA,#2c1460) 50%,var(--reelB,#120731));
  box-shadow: inset 0 0 22px rgba(0,0,0,.75);
}
.reel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 14%,transparent 86%,rgba(0,0,0,.55) 100%);
}
.strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}
.strip.moving {
  filter: blur(1.8px) brightness(1.1);
}
.cell {
  height: var(--cell);
  padding: 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: opacity .3s;
}
.cell .art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.cell .e {
  font-size: calc(var(--cell) * .62);
  line-height: 1;
}
.reels.has-win .cell {
  opacity: .32;
}
.reels.has-win .cell.win {
  opacity: 1;
  animation: pop .5s ease infinite alternate;
  position: relative;
  z-index: 2;
}
.reels.has-win .cell.win .art {
  filter: brightness(1.18) drop-shadow(0 0 10px #ffd84d);
}
@keyframes pop {
  to {
    transform: scale(1.1);
  }
}
.reel.tease {
  border-color: #fff3a0;
  box-shadow: inset 0 0 22px rgba(0,0,0,.75), 0 0 0 2px #ffd75e, 0 0 28px #ffd75e;
}

/* paylines drawn over the reels */
.paylines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}
.paylines polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: draw .7s ease forwards;
}
.paylines .under {
  stroke: #000;
  stroke-width: 9;
  opacity: .55;
}
.paylines .over {
  stroke-width: 5;
  filter: drop-shadow(0 0 6px currentColor);
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* bottom console, like a real cabinet */
.console {
  margin: 12px auto 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  grid-template-areas: "bal bet spin win";
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg,rgba(24,14,46,.95),rgba(4,2,10,.96));
  border: 1px solid rgba(255,215,94,.4);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.readout {
  text-align: center;
  min-width: 100px;
}
.readout small {
  display: block;
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-weight: 900;
  font-size: 11px;
  color: #ffd75e;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.readout b {
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-weight: 400;
  font-size: clamp(16px,2.6vw,22px);
  white-space: nowrap;
}
.ro-bal {
  grid-area: bal;
}
.ro-win {
  grid-area: win;
}
.betbox {
  grid-area: bet;
  min-width: 0;
}
.spinbtn {
  grid-area: spin;
}
.betbox .lbl {
  text-align: center;
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .5px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.betrow {
  display: flex;
  justify-content: center;
}

.spinbtn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: radial-gradient(circle at 50% 30%,#4a4a4a,#0a0a0a 68%);
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px #000, 0 0 0 7px #d4af37, 0 10px 26px rgba(0,0,0,.6);
  transition: transform .1s;
}
.spinbtn svg {
  width: 58%;
  height: 58%;
}
.spinbtn:hover {
  transform: scale(1.04);
}
.spinbtn:active {
  transform: scale(.95);
}
.spinbtn:disabled {
  cursor: wait;
}
.spinbtn:disabled svg {
  animation: rot .55s linear infinite;
}
@keyframes rot {
  to {
    transform: rotate(360deg);
  }
}

.jpnote {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  text-align: center;
}

/* reel size: by width on desktop; on phones also by screen height (see below) */
.reels[data-reels="3"] {
  --cellsize: clamp(84px, 25vw, 150px);
}
.reels[data-reels="5"] {
  --cellsize: clamp(54px, 16.5vw, 120px);
}

/* ---------- phones: the whole machine fits on one screen ----------
   reels + message stay in view, the controls are pinned to the bottom,
   so you never scroll down to spin and back up to see the result.
   Phones in portrait and phones in landscape (short screens) get the fixed bottom console. */
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  #mTag,
  .lights {
    display: none;
  }
  .screen {
    padding: 5px;
    border-width: 3px;
    border-radius: 12px;
  }
  .reels {
    gap: 3px;
  }
  .reels[data-reels="3"] {
    --cellsize: clamp(58px, min(26vw, calc((100vw - 60px) / 3.12), calc((100svh - 480px) / 3)), 130px);
  }
  .reels[data-reels="5"] {
    --cellsize: clamp(44px, min(16.8vw, calc((100vw - 64px) / 5.2), calc((100svh - 480px) / 3)), 110px);
  } /* never wider than the screen */
  .console {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    margin: 0;
    max-width: none;
    grid-template-columns: minmax(0,1fr) 100px;
    grid-template-areas: "win spin" "bet spin";
    row-gap: 4px;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    border-width: 1px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.6);
    background: linear-gradient(180deg,#1d1139,#06030e);
  }
  .ro-bal,
  .betbox .lbl,
  .bet .val small {
    display: none;
  }
  .readout {
    min-width: 0;
  }
  .ro-win {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-align: left;
    min-width: 0;
  }
  .ro-win b {
    font-size: 16px;
  }
  .spinbtn {
    width: 96px;
    height: 96px;
    border-width: 4px;
    align-self: start;
    justify-self: center;
    margin-top: -52px;
    box-shadow: 0 0 0 4px #000, 0 0 0 7px #d4af37, 0 0 26px rgba(255,200,60,.55), 0 12px 26px rgba(0,0,0,.7);
  }
  .spinbtn:hover {
    transform: none;
  }
}
/* landscape phones: one-row console so the reels stay visible above it */
@media (max-height: 500px) and (orientation: landscape) {
  .console {
    grid-template-columns: auto minmax(0,1fr) 84px;
    grid-template-areas: "win bet spin";
    align-items: center;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  }
  .ro-win {
    flex-direction: column;
    gap: 0;
    text-align: center;
  }
  .betbox {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .spinbtn {
    width: 72px;
    height: 72px;
    margin-top: 0;
    align-self: center;
  }
  .reels[data-reels="3"] {
    --cellsize: clamp(40px, calc((100svh - 290px) / 3), 110px);
  }
  .reels[data-reels="5"] {
    --cellsize: clamp(40px, calc((100svh - 290px) / 3), 110px);
  }
}

/* ---------- jackpots ---------- */
.jpbar {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin: 0 auto 12px;
  max-width: 900px;
}
.jp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  min-width: 0;
  background: linear-gradient(180deg,#2c2c2c,#050505);
  border: 2px solid #d4af37;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 14px rgba(0,0,0,.5);
}
.jp .suit {
  font-size: clamp(20px,3.6vw,32px);
  line-height: 1;
  filter: drop-shadow(0 0 6px currentColor);
}
.jp .jv {
  min-width: 0;
  flex: 1;
  text-align: right;
}
.jp small {
  display: block;
  font-size: 10px;
  font-weight: 900;
  color: #d4af37;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jp b {
  font-family: 'Bungee','Noto Sans Georgian',sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: clamp(14px,3vw,24px);
  white-space: nowrap;
}
.jp.t2 {
  border-color: #ffd75e;
  animation: glow 2s ease-in-out infinite;
}
.jp.t2 .suit {
  color: #f2f2f2;
}
.jp.t1 .suit,
.jp.t0 .suit {
  color: #ff2d3d;
}
.jp.hit {
  animation: jphit .35s 8 alternate !important;
}
@keyframes glow {
  50% {
    box-shadow: 0 0 22px #ffd75e;
  }
}
@keyframes jphit {
  to {
    background: #8a6400;
    transform: scale(1.05);
  }
}
.msg.jackpot {
  background: linear-gradient(90deg,#6b4a00,#a86b00,#6b4a00);
  border: 2px solid var(--gold);
  color: #fff;
}