/* ==========================================================================
   Crown Reels — game styles
   ========================================================================== */

.game-page{ padding: 40px 0 100px; }

.game-wrap{
  max-width: 620px; margin: 0 auto;
  background: radial-gradient(circle at top, #201040 0%, #0c0620 70%);
  border: 1px solid rgba(47,227,255,.3);
  border-radius: 26px;
  padding: 30px 26px 34px;
  box-shadow: 0 0 60px rgba(47,227,255,.18), inset 0 0 40px rgba(0,0,0,.4);
  position: relative;
}

.game-title{
  text-align:center; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 4px;
  color: var(--accent-cyan); text-shadow: 0 0 14px rgba(47,227,255,.7); margin-bottom: 24px;
}
.game-title i{ color: var(--accent-gold); margin: 0 8px; }

.stats-row{ display:flex; gap: 14px; margin-bottom: 22px; }
.stat-box{
  flex:1; background: rgba(0,0,0,.35); border:1px solid rgba(47,227,255,.2); border-radius:14px;
  padding: 14px 10px; text-align:center;
}
.stat-box .label{ font-size:.68rem; letter-spacing:2px; color: var(--text-dim); text-transform:uppercase; }
.stat-box .value{ font-family: var(--font-display); font-size:1.3rem; color: var(--accent-cyan); margin-top:4px; }
.stat-box.win .value{ color: var(--accent-gold); }

.reels-frame{
  background: rgba(0,0,0,.45); border: 1px solid rgba(47,227,255,.25); border-radius: 18px;
  padding: 18px; margin-bottom: 22px;
}
.reels-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 10px; position:relative;
}

/* Each column is a small viewport (3 cells tall) with a mask (overflow hidden).
   The inner .reel-strip is a long vertical ribbon of symbols that gets translated
   upward to simulate a real slot-machine spin, then eases to a stop. */
.reel-col{
  position:relative; overflow:hidden; border-radius: 12px;
  background: rgba(15,8,32,.9); border: 1px solid rgba(244,201,93,.18);
  aspect-ratio: 1 / 3;
}
.reel-col.win-col{ border-color: var(--accent-gold); }

.reel-strip{
  display:flex; flex-direction:column; width:100%;
  will-change: transform;
  transform: translateY(0);
  filter: blur(0px);
  transition: filter .25s ease;
}
.reel-col.spinning .reel-strip{ filter: blur(3.5px); }

.reel-symbol{
  width:100%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.9rem; position:relative;
}
.reel-symbol.win-symbol{
  animation: win-pulse-symbol 1s ease-in-out infinite;
}

/* Soft top/bottom fade so the ribbon looks like it's flowing through a window */
.reels-shine{
  position:absolute; inset:0; pointer-events:none; border-radius: 12px;
  background: linear-gradient(180deg, rgba(15,8,32,.95) 0%, rgba(15,8,32,0) 14%, rgba(15,8,32,0) 86%, rgba(15,8,32,.95) 100%);
}

@keyframes win-pulse-symbol{
  0%,100%{ text-shadow: 0 0 6px rgba(244,201,93,.5); transform: scale(1); }
  50%{ text-shadow: 0 0 18px rgba(244,201,93,1); transform: scale(1.12); }
}

.result-banner{
  text-align:center; padding: 12px 16px; border-radius: 12px; margin-bottom: 22px;
  border: 1px solid rgba(255,107,157,.4); background: rgba(255,107,157,.08); color: var(--accent-pink);
  font-size: .92rem; min-height: 20px;
}
.result-banner.is-win{
  border-color: rgba(244,201,93,.5); background: rgba(244,201,93,.1); color: var(--accent-gold);
}

.controls-row{ display:flex; align-items:center; gap: 18px; flex-wrap:wrap; justify-content:center; }
.bet-control{
  display:flex; align-items:center; gap: 10px; background: rgba(0,0,0,.35);
  border:1px solid rgba(47,227,255,.2); border-radius: 50px; padding: 8px 14px;
}
.bet-control span.label{ font-size:.72rem; letter-spacing:2px; color: var(--text-dim); text-transform:uppercase; }
.bet-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--accent-cyan); background: transparent;
  color: var(--accent-cyan); font-size: 1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
}
.bet-btn:hover{ background: rgba(47,227,255,.15); }
.bet-value{ font-family: var(--font-display); color:#fff; min-width: 46px; text-align:center; }

.spin-btn{
  width: 92px; height: 92px; border-radius: 50%; border: none; cursor:pointer;
  background: radial-gradient(circle at 35% 30%, #6df3ff, #0f92b8 70%);
  color: #04141c; font-family: var(--font-display); font-weight:700; font-size:.85rem;
  box-shadow: 0 0 30px rgba(47,227,255,.6), inset 0 0 12px rgba(255,255,255,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.spin-btn i{ font-size: 1.3rem; }
.spin-btn:hover{ transform: scale(1.05); box-shadow: 0 0 44px rgba(47,227,255,.85), inset 0 0 12px rgba(255,255,255,.5); }
.spin-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.spin-btn.is-spinning i{ animation: spin-icon .6s linear infinite; }
@keyframes spin-icon{ from{ transform: rotate(0);} to{ transform: rotate(360deg);} }

.side-actions{ display:flex; gap:10px; }
.side-btn{
  padding: 10px 16px; border-radius: 50px; border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04);
  color: var(--text-dim); font-family: var(--font-display); font-size:.72rem; letter-spacing:1px; cursor:pointer;
  transition: border-color .2s ease, color .2s ease;
}
.side-btn:hover{ border-color: var(--accent-gold); color: var(--accent-gold); }
.side-btn.active{ border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(244,201,93,.08); }

.game-note{
  max-width: 620px; margin: 26px auto 0; text-align:center; color: var(--text-dim); font-size: .78rem;
  border-top: 1px solid rgba(255,255,255,.07); padding-top: 18px;
}
.game-note strong{ color: var(--accent-gold); }

.paytable{
  max-width: 620px; margin: 40px auto 0; background: rgba(21,10,43,.55); border:1px solid rgba(47,227,255,.14);
  border-radius: 18px; padding: 26px 28px;
}
.paytable h3{ color:#fff; margin-top:0; font-size:1.05rem; text-align:center; margin-bottom:18px; }
.paytable-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; }
.paytable-item{ display:flex; align-items:center; gap:10px; background: rgba(0,0,0,.3); border-radius:10px; padding: 10px 12px; }
.paytable-item .sym{ font-size:1.3rem; }
.paytable-item .desc{ font-size:.78rem; color: var(--text-dim); }
.paytable-item .desc strong{ color: var(--accent-gold); display:block; font-size:.85rem; }

@media (max-width: 520px){
  .reel-symbol{ font-size: 1.4rem; }
  .spin-btn{ width: 78px; height: 78px; font-size:.72rem; }
}