.gameArea{
  padding:100px 0 60px;
  min-height:80vh;
  background:
    radial-gradient(ellipse at 50% 30%,rgba(18,71,29,.25) 0%,transparent 60%),
    var(--jungle-deep);
}

.gm_topBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  gap:12px;
  flex-wrap:wrap;
}

.gm_pointsWrap,
.gm_betWrap{
  background:var(--surface-1);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-m);
  padding:12px 20px;
  text-align:center;
  min-width:130px;
}
.gm_pointsLabel,
.gm_betLabel{
  display:block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--txt-dim);
  margin-bottom:4px;
  font-weight:700;
}
.gm_pointsVal{
  font-family:var(--ff-h);
  font-size:1.6rem;
  font-weight:900;
  color:var(--gold);
  line-height:1;
}

.gm_titleWrap{text-align:center;flex:1}
.gm_title{
  font-family:var(--ff-h);
  font-size:1.6rem;
  font-weight:800;
  color:var(--txt-w);
  margin:0;
  letter-spacing:2px;
}

.gm_betControls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.gm_betVal{
  font-family:var(--ff-h);
  font-size:1.4rem;
  font-weight:900;
  color:var(--txt-w);
  min-width:40px;
  text-align:center;
  line-height:1;
}
.gm_betBtn{
  width:32px;height:32px;
  border-radius:50%;
  border:2px solid var(--border-glow);
  background:transparent;
  color:var(--emerald);
  font-size:1.1rem;
  font-weight:900;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s var(--ease);
  line-height:1;
  padding:0;
}
.gm_betBtn:hover{
  background:var(--emerald);
  color:var(--jungle-deep);
  border-color:var(--emerald);
}

/* result banner */
.gm_resultBanner{
  text-align:center;
  padding:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:all .35s var(--ease);
  border-radius:var(--r-m);
  margin-bottom:0;
}
.gm_resultBanner--show{
  max-height:80px;
  padding:14px 20px;
  opacity:1;
  margin-bottom:16px;
}
.gm_resultBanner--win{
  background:linear-gradient(135deg,rgba(46,204,113,.12),rgba(212,160,23,.1));
  border:1px solid rgba(46,204,113,.3);
}
.gm_resultBanner--lose{
  background:rgba(192,57,43,.08);
  border:1px solid rgba(192,57,43,.2);
}
.gm_resultTxt{
  display:block;
  font-family:var(--ff-h);
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:2px;
}
.gm_resultBanner--win .gm_resultTxt{color:var(--emerald)}
.gm_resultBanner--lose .gm_resultTxt{color:var(--aztec-red)}
.gm_resultAmt{
  font-size:.88rem;
  font-weight:700;
}
.gm_resultBanner--win .gm_resultAmt{color:var(--gold)}
.gm_resultBanner--lose .gm_resultAmt{color:var(--txt-dim)}

/* slot machine */
.gm_machine{
  max-width:680px;
  margin:0 auto;
}
.gm_reelFrame{
  background:linear-gradient(180deg,rgba(8,31,15,.9) 0%,rgba(12,46,20,.7) 50%,rgba(8,31,15,.9) 100%);
  border:2px solid var(--border-glow);
  border-radius:var(--r-l);
  padding:20px;
  position:relative;
  box-shadow:
    0 0 40px rgba(46,204,113,.06),
    inset 0 0 60px rgba(0,0,0,.3);
}

.gm_payline{
  position:absolute;
  left:12px;right:12px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,160,23,.15),transparent);
  pointer-events:none;
  z-index:2;
}
.gm_payline--top{top:33.3%}
.gm_payline--mid{top:50%}
.gm_payline--bot{top:66.6%}

.gm_grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:8px;
}

.gm_cell{
  background:rgba(4,18,10,.6);
  border:1px solid rgba(46,204,113,.06);
  border-radius:var(--r-m);
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  transition:all .15s var(--ease);
}
.gm_cell img{
  width:100%;height:100%;
  object-fit:contain;
}

.gm_cell--spin{
  animation:cellSpin .4s ease-in-out;
}
.gm_cell--spin img{
  filter:blur(6px);
  opacity:.3;
}

@keyframes cellSpin{
  0%{transform:translateY(0)}
  25%{transform:translateY(-8px)}
  75%{transform:translateY(8px)}
  100%{transform:translateY(0)}
}

/* spin btn */
.gm_controls{
  text-align:center;
  margin-top:22px;
}
.gm_spinBtn{
  background:linear-gradient(135deg,var(--jungle-600),var(--emerald));
  color:#fff;
  border:none;
  border-radius:50%;
  width:80px;height:80px;
  font-family:var(--ff-h);
  font-size:.85rem;
  font-weight:900;
  letter-spacing:2px;
  cursor:pointer;
  box-shadow:0 4px 25px rgba(46,204,113,.35);
  transition:all .25s var(--ease);
  position:relative;
  overflow:hidden;
}
.gm_spinBtn::before{
  content:'';
  position:absolute;inset:3px;
  border:2px solid rgba(255,255,255,.2);
  border-radius:50%;
}
.gm_spinBtn:hover{
  box-shadow:0 6px 35px rgba(46,204,113,.5);
  transform:scale(1.06);
}
.gm_spinBtn:active{
  transform:scale(.95);
}
.gm_spinBtn--disabled{
  opacity:.5;
  pointer-events:none;
}

/* info bar */
.gm_infoBar{
  max-width:680px;
  margin:28px auto 0;
  text-align:center;
}
.gm_responsible{
  font-size:.78rem;
  color:var(--txt-dim);
  line-height:1.6;
  margin-bottom:12px;
  padding:12px 16px;
  background:rgba(192,57,43,.06);
  border:1px solid rgba(192,57,43,.12);
  border-radius:var(--r-m);
}
.gm_responsible i{color:var(--aztec-red);margin-right:5px}
.gm_responsible a{color:var(--gold);text-decoration:underline}

.gm_rulesLink{
  display:inline-flex;
  align-items:center;gap:6px;
  font-size:.85rem;
  color:var(--gold);
  font-weight:700;
  transition:color .2s var(--ease);
}
.gm_rulesLink:hover{color:var(--gold-lt)}

/* responsive */
@media(max-width:767px){
  .gameArea{padding:85px 0 40px}
  .gm_topBar{justify-content:center}
  .gm_titleWrap{order:-1;width:100%;margin-bottom:8px}
  .gm_title{font-size:1.3rem}
  .gm_reelFrame{padding:12px}
  .gm_grid{gap:5px}
  .gm_cell{padding:8px;border-radius:var(--r-s)}
  .gm_spinBtn{width:66px;height:66px;font-size:.75rem}
  .gm_pointsVal{font-size:1.3rem}
  .gm_betVal{font-size:1.1rem}
}

@media(max-width:400px){
  .gm_cell{padding:5px}
  .gm_reelFrame{padding:8px}
}