/* ============================================================
   Slot game overlay — scenes, frames, figures, bet modal
   ============================================================ */
.symsvg { width: 100%; height: 100%; display: block; }
.charsvg { width: 100%; height: 100%; display: block; }

.slot {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  overflow: hidden; color: #fff;
  --accent: #6a4bff;
  animation: slotIn .25s ease;
}
@keyframes slotIn { from { opacity: 0 } to { opacity: 1 } }

/* ---------- Scenes (themed backgrounds) ---------- */
.scene { position: absolute; inset: 0; z-index: 0; }
.scene__far, .scene__near { position: absolute; inset: 0; }
.scene__near { animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-1.5%) } to { transform: translateX(1.5%) } }

.slot--olympus .scene__far { background: linear-gradient(180deg,#f7c9d8 0%,#f3b6c8 40%,#e89ab0 100%); }
.slot--olympus .scene__near { background:
   radial-gradient(60% 40% at 50% 0%, rgba(255,240,200,.9), transparent 70%),
   radial-gradient(40% 30% at 15% 80%, rgba(255,255,255,.5), transparent),
   radial-gradient(40% 30% at 85% 80%, rgba(255,255,255,.5), transparent); }

.slot--sweet .scene__far { background: linear-gradient(180deg,#67c7f5 0%,#9bd9f7 45%,#ffc1e0 78%,#ff9ed0 100%); }
.slot--sweet .scene__near { background:
   radial-gradient(30% 18% at 22% 22%, #fff8, transparent),
   radial-gradient(26% 16% at 75% 18%, #fff7, transparent),
   radial-gradient(60% 30% at 50% 100%, #ff8ac8aa, transparent 70%); }

.slot--classic .scene__far { background: radial-gradient(circle at 50% 30%, #4a1c6a, #1a0a2a 70%); }
.slot--thunder .scene__far { background: radial-gradient(circle at 50% 45%, #1a4ea0, #050a26 72%); }
.slot--thunder .scene__near { background:
   linear-gradient(70deg, transparent 46%, #6cf3ff55 49%, transparent 52%),
   linear-gradient(-65deg, transparent 60%, #6cf3ff44 63%, transparent 66%); }

.slot--egypt .scene__far { background: linear-gradient(180deg,#caa14a,#7a4a16 60%,#3a2208 100%); }
.slot--egypt .scene__near { background: radial-gradient(50% 40% at 50% 20%, #ffcf7a88, transparent 70%); }

.slot--bandit .scene__far { background: linear-gradient(180deg,#e9dcc4,#cdbb98 55%,#9a8a6a 100%); }
.slot--bandit .scene__near { background: radial-gradient(60% 50% at 50% 30%, #fff6e055, transparent 70%); filter: saturate(.6); }

.slot--doghouse .scene__far { background: linear-gradient(180deg,#7ec8f5 0%,#bfe6ff 55%,#7ec850 56%,#4ea83a 100%); }
.slot--doghouse .scene__near { background: radial-gradient(30% 16% at 24% 22%, #fff9, transparent), radial-gradient(26% 14% at 76% 18%, #fff8, transparent); }

.slot--sky .scene__far { background: radial-gradient(circle at 50% 40%, #1a2a6a, #05081e 75%); }
.slot--sky .scene__near { background:
   radial-gradient(2px 2px at 20% 30%, #fff, transparent),
   radial-gradient(2px 2px at 70% 20%, #fff, transparent),
   radial-gradient(2px 2px at 40% 70%, #fff, transparent),
   radial-gradient(2px 2px at 85% 60%, #fff, transparent),
   radial-gradient(2px 2px at 55% 45%, #fff, transparent); }

.slot--farm .scene__far { background: linear-gradient(180deg,#f0d49a,#d8a85a 60%,#a8742e 100%); }
.slot--lucky .scene__far { background: radial-gradient(circle at 50% 40%, #1ea05a, #0a3a1f 75%); }
.slot--gems .scene__far { background: radial-gradient(circle at 50% 30%, #1a2356, #05081e 75%); }

/* ---------- Top bar ---------- */
.slot__bar {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  background: linear-gradient(#0008, transparent);
}
.slot__close {
  width: 36px; height: 36px; border-radius: 9px; border: none; cursor: pointer;
  background: rgba(0,0,0,.4); color: #fff; font-size: 15px;
}
.slot__close:hover { background: rgba(0,0,0,.65); }
.slot__title { font-weight: 800; font-size: 16px; text-shadow: 0 2px 6px #000a; }
.slot__chip {
  margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
  background: rgba(0,0,0,.35); padding: 6px 12px; border-radius: 10px;
}
.slot__chip span { font-size: 10px; color: #cdd6ff; }

/* ---------- Stage ---------- */
.slot__stage {
  position: relative; z-index: 5; flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 8px 24px; min-height: 0;
}

/* Reel frame */
.machine { max-width: 760px; width: 100%; }
.frame {
  position: relative; border-radius: 18px; padding: 14px;
  box-shadow: 0 18px 50px #000a, inset 0 0 0 2px rgba(255,255,255,.18);
}
.frame--gold   { background: linear-gradient(150deg,#ffe27a,#c8861c 45%,#8a5510 55%,#ffd86a); }
.frame--candy  { background: linear-gradient(150deg,#ff9ed8,#c64f9e 50%,#ffb3e0); }
.frame--wood   { background: linear-gradient(150deg,#caa14a,#6e4a16 55%,#caa14a); }
.frame--stone  { background: linear-gradient(150deg,#8a9a8e,#3a4a44 55%,#8a9a8e); }
.frame--neon   { background: #1a0a2a; box-shadow: 0 18px 50px #000a, inset 0 0 0 2px #f0a92b88, 0 0 0 1px #f0a92b; }
.frame--green  { background: linear-gradient(150deg,#3ec06a,#1a6a3a 55%,#3ec06a); }
.frame--dark   { background: linear-gradient(150deg,#2a3566,#141a40 55%,#2a3566); }

.reels {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 6px;
  background: rgba(6,9,26,.62);
  border-radius: 12px; padding: 8px;
}
.reel { display: grid; grid-template-rows: repeat(var(--rows), 1fr); gap: 6px; }
.cell {
  aspect-ratio: 1/1;
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  display: grid; place-items: center;
}
.sym {
  width: 86%; height: 86%;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45));
  transition: transform .12s;
}
.sym.is-blur { filter: blur(1px) drop-shadow(0 3px 4px #0006); opacity: .9; }
.sym.is-win {
  animation: winPulse .55s ease-in-out infinite;
  filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 4px #fff);
}
.cell:has(.sym.is-win) { background: rgba(255,255,255,.18); box-shadow: 0 0 0 2px var(--accent) inset; }
@keyframes winPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.14) } }

/* Hero character + logo */
.slot .hero {
  width: 230px; flex: 0 0 auto; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.slot .hero__logo {
  font-family: "Arial Black", Impact, sans-serif; font-weight: 900; font-size: 20px; text-align: center;
  line-height: 1; color: #ffd65a; text-shadow: 0 2px 0 #7a3a00, 0 0 14px #000;
  letter-spacing: .5px; text-transform: uppercase;
}
.slot .hero__char { width: 200px; height: 240px; animation: charFloat 3.4s ease-in-out infinite; }
@keyframes charFloat { 0%,100% { transform: translateY(0) rotate(-1deg) } 50% { transform: translateY(-14px) rotate(1deg) } }
.slot .hero__vol { font-size: 11px; color: #ffe; background: rgba(0,0,0,.4); padding: 4px 10px; border-radius: 20px; }
.slot .hero__vol b { color: #ffce5a; letter-spacing: 1px; }

/* ---------- Win banner ---------- */
.banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%) scale(.6);
  z-index: 30; text-align: center; pointer-events: none; opacity: 0;
}
.banner.is-show { opacity: 1; animation: pop .45s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes pop { to { transform: translate(-50%,-50%) scale(1) } }
.banner__title { font-family: "Arial Black", Impact; font-size: 56px; font-weight: 900;
  color: #ffe06a; text-shadow: 0 3px 0 #b45a00, 0 0 24px #ffb000; }
.banner__amount { font-family: "Arial Black", Impact; font-size: 44px; color: #fff; text-shadow: 0 2px 0 #7a3a00, 0 0 18px #000; }
.banner--big .banner__title { color: #ffd24a; }
.banner--epic .banner__title { color: #ff9a2a; font-size: 64px; }

/* ---------- Bottom controls ---------- */
.slot__controls {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 22px; background: linear-gradient(transparent, #000b);
}
.ctl { display: flex; align-items: center; gap: 18px; }
.ctl--right { margin-left: auto; }
.ctl__stat { display: flex; flex-direction: column; line-height: 1.05; }
.ctl__stat span { font-size: 10px; color: #f0a92b; font-weight: 700; letter-spacing: .5px; }
.ctl__stat strong { font-size: 16px; }
.ctl__msg { flex: 1; text-align: center; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 6px #000; }

.spin {
  width: 70px; height: 70px; border-radius: 50%; cursor: pointer; border: none;
  background: radial-gradient(circle at 50% 35%, #fff, #d0d4dc);
  box-shadow: 0 6px 18px #0008, inset 0 0 0 4px #0003;
  display: grid; place-items: center; position: relative;
}
.frame--gold ~ .slot__controls .spin, .slot__controls .spin { }
.spin__ring { width: 40px; height: 40px; display: block; position: relative; }
.spin__ring::before {
  content: "⟳"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 38px; color: #1a2340; line-height: 1;
}
.spin:hover { filter: brightness(1.05); }
.spin.is-spinning .spin__ring { animation: spinRot .6s linear infinite; }
@keyframes spinRot { to { transform: rotate(360deg) } }

.qbet {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  font-size: 20px; font-weight: 800;
}
.qbet:hover { background: rgba(255,255,255,.22); }
.betbtn {
  padding: 0 16px; height: 40px; border-radius: 10px; cursor: pointer; border: none;
  background: linear-gradient(#ffd65a,#f0a92b); color: #2a1a00; font-weight: 900; letter-spacing: 1px;
}
.betbtn:hover { filter: brightness(1.05); }

/* ---------- Bet modal ---------- */
.betmodal {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(4,6,18,.72); backdrop-filter: blur(3px);
  display: grid; place-items: center; animation: slotIn .15s ease;
}
.betmodal__panel {
  position: relative; width: 320px; max-width: 90vw;
  background: linear-gradient(#10142e,#0a0d22);
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  padding: 22px 22px 26px; box-shadow: 0 20px 60px #000c;
}
.betmodal__close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 9px;
  background: #1a1f3e; color: #fff; border: none; cursor: pointer; font-size: 15px;
}
.betmodal__head { text-align: center; color: #f0a92b; font-weight: 900; letter-spacing: 1px; margin-bottom: 14px; }
.betmodal__head b { color: #fff; }
.betrow { margin: 14px 0; }
.betrow__label { text-align: center; font-size: 12px; color: #cdd6ff; letter-spacing: 1px; margin-bottom: 8px; }
.betrow__ctl { display: flex; align-items: center; gap: 12px; justify-content: center; }
.betrow__val {
  flex: 1; max-width: 150px; text-align: center; font-weight: 800; font-size: 18px;
  background: #1a1f3e; border-radius: 10px; padding: 12px 8px; border: 1px solid rgba(255,255,255,.08);
}
.rnd {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer; border: none;
  font-size: 24px; font-weight: 800; color: #fff;
}
.rnd--minus { background: #2a2f4e; }
.rnd--plus { background: linear-gradient(#1ea05a,#157a44); }
.rnd:hover { filter: brightness(1.1); }
.betmax {
  width: 100%; margin-top: 18px; padding: 14px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(#22c06a,#159a4e); color: #fff; font-weight: 900; letter-spacing: 1px; font-size: 16px;
}
.betmax:hover { filter: brightness(1.05); }

/* ---------- Home card poster thumbnail ---------- */
.card__art { overflow: hidden; position: relative; }
.poster { position: absolute; inset: 0; overflow: hidden; }
.poster__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster--fit { position: absolute; inset: 0; background: #10131f; --poster-zoom: 1; }
.poster__bg { position: absolute; inset: 0; background-image: var(--poster-img); background-size: cover; background-position: center;
  filter: blur(14px) brightness(.42) saturate(1.12); transform: scale(1.2); }
.poster__img--contain {
  object-fit: contain;
  padding: 0;
  transform: scale(var(--poster-zoom));
  transform-origin: center;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.4));
}
.poster__props { position: absolute; inset: 0; pointer-events: none; }
.poster__prop { position: absolute; }
.poster__prop svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.poster__char {
  position: absolute; left: 50%; bottom: -3%; width: 84%; height: 86%;
  transform: translateX(-50%);
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
  animation: posterBob 4s ease-in-out infinite;
}
.poster__char svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.card:hover .poster__char { animation-duration: 2s; }
@keyframes posterBob { 0%,100% { transform: translateX(-50%) translateY(0) } 50% { transform: translateX(-50%) translateY(-5px) } }

.poster__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, transparent 60%, rgba(0,0,0,.28)),
              linear-gradient(transparent 62%, rgba(0,0,0,.34));
}

/* chunky stacked logo wordmark */
.poster__logo {
  position: absolute; top: 5%; left: 0; right: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  line-height: .88; padding: 0 6%; pointer-events: none; text-align: center;
}
.logo__line {
  font-family: "Arial Black", Impact, sans-serif; font-weight: 900;
  font-size: clamp(17px, 3.6vw, 32px); text-transform: uppercase; letter-spacing: .4px;
  background: linear-gradient(180deg, var(--p1), var(--p2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2.4px var(--lstroke); paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0,0,0,.30);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.logo__line--small { font-size: .55em; -webkit-text-stroke-width: 1.4px; margin: 1px 0; }
.logo__line--num { font-size: 1.18em; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .slot .hero { width: 150px; }
  .slot .hero__char { width: 130px; height: 160px; }
  .slot .hero__logo { font-size: 15px; }
  .banner__title { font-size: 40px; }
  .banner__amount { font-size: 30px; }
}
@media (max-width: 620px) {
  .slot__stage { flex-direction: column; gap: 8px; padding: 6px 10px; }
  .slot .hero { width: auto; flex-direction: row; gap: 10px; }
  .slot .hero__char { width: 90px; height: 110px; }
  .ctl--left .ctl__stat span { font-size: 9px; }
  .spin { width: 58px; height: 58px; }
}