/* ════════════════════════════════════════════════════════════════════════════
SLOT MACHINE STYLES - ROBIT ornate frame overlay (portrait)
═══════════════════════════════════════════════════════════════════════════ */

/* วัดจาก robit-slot-bg.png 764×1024 — ปรับได้ถ้ายังไม่เป๊ะ */
:root {
  --slot-reels-left: 24.7%;
  --slot-reels-top: 41.1%;
  --slot-reels-width: 53.4%;
  --slot-reels-height: 15.5%;
  --slot-reels-gap-x: 10.5%;
  --slot-reels-gap-y: 0%;
  /* ตำแหน่งรางวัล/เลขชนะ — หลังคาทอง (pediment) */
  --slot-win-amount-left: 50%;
  --slot-win-amount-top: 14%;
  --slot-win-roof-top: 9.5%;
  --slot-win-amount-top-stack: 3.2%;
  --slot-win-amount-lane-step: 6.2%;
  /* ปุ่มสปิน — กึ่งกลางวงกลมบนฐานสปิน */
  --slot-spin-left: 50%;
  --slot-spin-top: 77.6%;
  --slot-spin-size: 150px;
  --spin-medal-x: 50%;
  --spin-medal-y: 48%;
  --spin-medal-size: 15%;
}

/* สแต็กฐานสปิน + ปุ่ม — ติดขอบล่างกลางจอ */
#slotPage .spin-base-stack {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 22%);
  width: min(calc(78vw + 50px) * 2, 940px);
  height: min(calc(46vw + 50px) * 2, 600px);
  z-index: 14;
  pointer-events: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* ฐานสปิน — ด้านหลัง สัมผัสไม่ได้ */
#slotPage .spin-base-3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

#slotPage .spin-base-3d .spin-base-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none !important;
  background: transparent !important;
  vertical-align: bottom;
}

/* ปุ่มสปิน — หน้าสุด กึ่งกลางวงกลมฐาน */
#slotPage .spin-base-stack .diamond-spin-container {
  position: absolute !important;
  left: var(--spin-medal-x) !important;
  top: calc(var(--spin-medal-y) - 20px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 3 !important;
  pointer-events: auto;
  overflow: visible !important;
  width: calc(var(--spin-medal-size) + 5px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  text-align: center;
}

#slotPage .spin-base-stack .spin-btn-wrap,
#slotPage .spin-base-stack .diamond-btn-new,
#slotPage .spin-base-stack .spin-coin-3d {
  width: 100% !important;
  height: 100% !important;
}

#slotPage .spin-base-stack .crystal-spin-btn .spin-crystal-icon {
  width: 78% !important;
  height: 78% !important;
  max-width: none !important;
  object-fit: contain !important;
}

html.player-stage #slotPage .spin-base-stack {
  width: min(144%, 900px);
  height: min(56%, 580px);
  bottom: 0;
}

@media (max-width: 768px) {
  #slotPage .spin-base-stack {
    width: min(calc(88vw + 50px) * 2, 860px);
    height: min(calc(52vw + 50px) * 2, 560px);
    bottom: 0;
  }
  :root {
    --spin-medal-y: 47%;
    --spin-medal-size: 16%;
  }
}

.slot-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  z-index: 0;
}

/* ภายใน stage ที่ล็อกสัดส่วนแล้ว — เติมภาพเต็ม ไม่ครอปผิดสัดส่วนมือถือ */
.slot-stage-bg {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  display: block;
  user-select: none;
  pointer-events: none;
}

.slot-machine {
  background: linear-gradient(135deg, #1a0a0a 0%, #0a0a0a 100%);
  border: 3px solid #d4af37;
  border-radius: 20px;
  padding: 20px;
  margin: 20px auto;
  max-width: 500px;
  width: 95%;
  position: relative;
}

.slot-machine-overlay {
  position: absolute;
  left: var(--slot-reels-left);
  top: var(--slot-reels-top);
  width: var(--slot-reels-width);
  height: var(--slot-reels-height);
  z-index: 2;
  margin: 0;
  padding: 0;
  max-width: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.payline-indicator {
  display: none !important;
}

/* รางวัลชนะ — ยึดหลังคาตู้ (pediment) ไอคอนบน / เลขใต้ */
.slot-win-fx {
  position: absolute;
  left: 50%;
  top: var(--slot-win-roof-top);
  transform: translateX(-50%);
  width: min(70%, 300px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  background: transparent;
  pointer-events: none;
  z-index: 30;
}

.slot-win-fx.show {
  display: flex;
}

.slot-win-prize {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.slot-win-icon {
  font-size: clamp(56px, 14vw, 100px);
  line-height: 1;
  background: none;
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.55));
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: flat;
  backface-visibility: visible;
  -webkit-font-smoothing: antialiased;
}

/* จุดยึดเลขเก่า — เก็บไว้แต่ไม่ใช้ */
.slot-win-amount-anchor {
  position: absolute;
  left: var(--slot-win-amount-left);
  top: var(--slot-win-amount-top);
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  display: none;
  align-items: center;
  justify-content: center;
}

/* ชั้นเลขนับชนะ — เรียงใต้ไอคอนหลังคา */
.slot-win-count-layer {
  position: relative;
  width: 100%;
  z-index: 8;
  pointer-events: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}

.slot-win-amount,
.slot-win-count-chip {
  position: relative;
  z-index: 8;
  display: none;
  flex-shrink: 0;
  margin: 0;
  color: #ffe566;
  font-size: clamp(36px, 8vw, 64px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.95),
    0 3px 0 #000,
    0 0 18px rgba(255, 215, 0, 0.85);
  pointer-events: none;
  transform: none;
  animation: none;
  filter: none;
  white-space: nowrap;
  opacity: 1;
}

.slot-win-count-chip.is-top-stack {
  font-size: clamp(30px, 6.5vw, 52px);
}

.slot-win-amount.is-show,
.slot-win-count-chip.is-show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* เลขชนะเด้งชัด — ไม่จาง จัดเจนจนนับจบ */
.slot-win-amount.is-count-pop,
.slot-win-count-chip.is-count-pop {
  animation: slotWinAmountCountPop 0.32s ease forwards !important;
  transform-origin: center center;
  opacity: 1 !important;
}

@keyframes slotWinAmountCountPop {
  0% {
    opacity: 1;
    transform: scale(0.88);
  }
  55% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

/* emoji: เด้งนอก / หมุน Y ในรูปบิตแมป — มือถือ Safari หมุนซ้าย→ขวาได้โดยไม่หาย */
.slot-win-icon.is-emoji-prize {
  perspective: 900px;
  transform-style: preserve-3d;
}

.slot-win-icon.is-prize-pop {
  animation: slotWinPrizePop 4.5s cubic-bezier(0.25, 0.7, 0.3, 1) forwards;
  filter: drop-shadow(0 0 16px rgba(255, 200, 80, 0.7));
}

.slot-win-icon.is-emoji-prize.is-prize-pop .slot-win-emoji-spin {
  display: block;
  width: clamp(56px, 14vw, 100px);
  height: clamp(56px, 14vw, 100px);
  object-fit: contain;
  transform-origin: center center;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  will-change: transform;
  animation: slotWinEmojiRotateY 4.5s cubic-bezier(0.25, 0.7, 0.3, 1) forwards;
}

/* โมเดล 3D: เด้ง/ซูมอย่างเดียว — ให้ Three.js หมุนรอบตัวเอง */
.slot-win-icon.is-model-3d.is-prize-pop {
  animation: slotWinPrizePop3d 4.5s cubic-bezier(0.25, 0.7, 0.3, 1) forwards;
  filter: drop-shadow(0 0 18px rgba(255, 80, 60, 0.55));
}

/* เหรียน: เงาอ่อนแบบธรรมชาติ ให้ต่อเนียนกับตอนบินเข้ากระเป๋า */
.slot-win-icon.is-soft-sun,
.slot-win-icon.is-soft-sun.is-prize-pop,
.slot-win-icon.is-model-3d.is-soft-sun.is-prize-pop,
.slot-win-icon.is-model-3d.is-soft-sun.is-prize-pop.is-prize-pulse {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

.slot-win-icon.is-prize-pop.is-prize-pulse {
  animation: slotWinPulse 0.85s ease-in-out infinite;
}

.slot-win-icon.is-emoji-prize.is-prize-pop.is-prize-pulse .slot-win-emoji-spin {
  animation: slotWinEmojiPulseY 0.85s ease-in-out infinite;
}

.slot-win-icon.is-model-3d.is-prize-pop.is-prize-pulse {
  animation: slotWinPulse3d 0.85s ease-in-out infinite;
}

.slot-win-icon.is-prize-pop .game-icon-coin,
.slot-win-icon.is-prize-pop .game-icon-grenade,
.slot-win-icon.is-prize-pop .game-icon-shield,
.slot-win-icon.is-prize-pop .game-icon-starship,
.slot-win-icon.is-prize-pop .game-icon-reaper,
.slot-win-icon.is-prize-pop .game-icon-bust,
.slot-win-icon.is-prize-pop .game-icon-crate,
.slot-win-icon.is-prize-pop .game-icon-diamond,
.slot-win-icon.is-prize-pop .game-icon-star {
  width: clamp(56px, 14vw, 100px);
  height: clamp(56px, 14vw, 100px);
  max-width: none;
  max-height: none;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  transform: none;
  backface-visibility: visible;
}

.slot-win-icon .game-icon-model,
#slotWinIcon .game-icon-model,
.slot-win-icon .game-icon-model-canvas,
#slotWinIcon .game-icon-model-canvas {
  width: clamp(110px, 30vw, 180px);
  height: clamp(110px, 30vw, 180px);
  max-width: min(48vw, 200px);
  max-height: min(48vw, 200px);
  display: block;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: transparent;
  --progress-bar-height: 0px;
  pointer-events: none;
  outline: none;
}

.slot-win-icon.is-model-3d {
  width: clamp(110px, 30vw, 180px);
  height: clamp(110px, 30vw, 180px);
}

/* ให้รูปพรีวิวโชว์ชัดตอนโมเดลยังโหลด */
.slot-win-icon .game-icon-model.poster-showed,
#slotWinIcon .game-icon-model {
  min-width: clamp(96px, 26vw, 160px);
  min-height: clamp(96px, 26vw, 160px);
}

.slot-win-prize.is-fly-to-bag {
  animation: none !important;
  will-change: auto;
  opacity: 0 !important;
}

.slot-win-fly-ghost {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

.slot-win-fly-ghost--heavy {
  z-index: 5000;
}

.slot-win-fly-ghost img,
.slot-win-fly-ghost canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.slot-win-prize.is-fly-to-bag .slot-win-icon {
  animation: none !important;
}

.slot-win-prize.is-fly-to-bag .slot-win-amount {
  display: none !important;
}

/* เด้งบนหลังคาตู้ — ไม่ดึงจากกลางจอ */
@keyframes slotWinPrizePop {
  0% {
    opacity: 1;
    transform: translate3d(0, 8%, 0) scale(0.42);
  }
  14% {
    opacity: 1;
    transform: translate3d(0, -2%, 0) scale(1.06);
  }
  85% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* หมุนรอบตัวซ้าย→ขวา 5 รอบ (แกน Y) */
@keyframes slotWinEmojiRotateY {
  0% { transform: rotateY(0deg); }
  12% { transform: rotateY(180deg); }
  85% { transform: rotateY(1620deg); }
  100% { transform: rotateY(1800deg); }
}

@keyframes slotWinEmojiPulseY {
  0%, 100% { transform: rotateY(1800deg) scale(1); }
  50% { transform: rotateY(1800deg) scale(1.12); }
}

/* โมเดล 3D: เด้ง/ซูมอย่างเดียว — ให้ Three.js หมุนรอบตัวเอง */
@keyframes slotWinPrizePop3d {
  0% {
    opacity: 1;
    transform: translate3d(0, 8%, 0) scale(0.42);
  }
  14% {
    opacity: 1;
    transform: translate3d(0, -2%, 0) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes slotWinPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

@keyframes slotWinPulse3d {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.reels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  column-gap: var(--slot-reels-gap-x);
  row-gap: 0;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* แต่ละคอลัมน์ = ช่องเดียวต่อเนื่อง (บน+กลาง+ล่าง ไม่ตัดกัน) */
.reel-col {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  min-width: 0;
  background: transparent;
  border: none;
}

.reel-col .reel-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.reel-col .reel-strip span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100cqh / 3);
  flex-shrink: 0;
  line-height: 1;
  font-size: min(30cqh, 78cqw, 52px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  user-select: none;
}

.reel-col {
  container-type: size;
}

.reel-col.spinning .reel-strip span {
  text-shadow: none;
}

.reel-col.spinning-fast .reel-strip {
  /* เบลอเบา + opacity — ถูกกว่า blur(6px) มาก ลดสะดุดตอนหมุน */
  filter: blur(2px);
  opacity: 0.88;
  will-change: transform;
}

.reel-col.spinning .reel-strip {
  will-change: transform;
  transform: translateZ(0);
}

.reel-col.spinning-fast .reel-strip span {
  opacity: 0.92;
}

.reel-col.spinning {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}

/* คง class เก่าไว้เผื่อไม่พัง — ไม่ใช้แล้วในหน้า ROBIT */
.reel-cell {
  display: none;
}

.reel-labels,
.result-display,
.spin-history,
.diamond-btn,
.progress-ring,
.diamond-label,
.diamond-cost,
.cycle-mult-btn,
.cycle-hint,
.auto-indicator {
  display: none !important;
}

.diamond-spin-container {
  text-align: center;
  margin: 12px auto 0;
  position: relative;
  z-index: 12;
  flex-shrink: 0;
  overflow: visible;
}

#slotPage.slot-page-themed .diamond-spin-container {
  position: absolute;
  left: var(--spin-medal-x);
  top: calc(var(--spin-medal-y) - 20px);
  transform: translate(-50%, -50%);
  margin: 0;
  overflow: visible;
  z-index: 3;
  width: calc(var(--spin-medal-size) + 5px);
  height: auto;
  aspect-ratio: 1 / 1;
}

.spin-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* เผื่อพื้นที่เด้ง — ไม่ให้ canvas ครอปโมเดล */
  width: var(--slot-spin-size, 150px);
  height: var(--slot-spin-size, 150px);
  overflow: visible;
}

/* เลิกใช้วงกดค้าง — ใช้การหมุนเหรียญแทน */
.spin-hold-ring {
  display: none !important;
}

.diamond-btn-new {
  position: relative;
  z-index: 1;
  width: var(--slot-spin-size, 150px);
  height: var(--slot-spin-size, 150px);
  border-radius: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  box-shadow: none;
  margin: 0 auto;
  filter: none;
  overflow: visible;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.spin-coin-3d {
  position: absolute;
  inset: 0;
  width: var(--slot-spin-size, 150px);
  height: var(--slot-spin-size, 150px);
  display: block;
  z-index: 2;
  overflow: visible;
}

.spin-coin-canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.crystal-spin-btn .spin-crystal-icon,
.crystal-spin-btn .spin-coin-fallback {
  display: block;
  width: 100px;
  height: 100px;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  position: relative;
  z-index: 1;
}

.spin-coin-3d.is-ready ~ .spin-coin-fallback,
.spin-coin-3d:not(:empty) ~ .spin-coin-fallback {
  opacity: 0;
  position: absolute;
  inset: 0;
}

.diamond-btn-new:hover,
.diamond-btn-new:active {
  transform: none;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* CSS หมุนเหรียญ — สำรองถ้า 3D ยังไม่พร้อม */
@keyframes spinCoinFlick {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(720deg); }
}
@keyframes spinCoinHoldWind {
  from { transform: rotateY(0deg) scale(1); }
  to   { transform: rotateY(360deg) scale(1); }
}
@keyframes spinCoinAutoFast {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes spinCoinStop {
  0%   { transform: rotateY(0deg) scale(1); }
  70%  { transform: rotateY(300deg) scale(1.04, 0.96); }
  100% { transform: rotateY(360deg) scale(1); }
}

/* กดที — ไม่ยืดหยุ่น/เด้งที่ปุ่ม (หมุนเหรียญอย่างเดียว) */
.spin-btn-wrap.is-flick {
  animation: none !important;
  transform: none !important;
}

#slotPage.slot-page-themed.is-spin-bounce .slot-stage {
  overflow: visible;
}

.spin-btn-wrap.is-flick:not(:has(.spin-coin-3d.is-ready)) .spin-coin-fallback {
  animation: spinCoinFlick 0.9s linear both;
}
.spin-btn-wrap.is-hold-wind:not(:has(.spin-coin-3d.is-ready)) .spin-coin-fallback {
  animation: spinCoinHoldWind 1s linear both;
}
.spin-btn-wrap.is-auto-spin:not(:has(.spin-coin-3d.is-ready)) .spin-coin-fallback {
  animation: spinCoinAutoFast 0.28s linear infinite;
}
.spin-btn-wrap.is-auto-stop:not(:has(.spin-coin-3d.is-ready)) .spin-coin-fallback {
  animation: spinCoinStop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.spin-hold-ring {
  display: none !important;
}

@media (max-width: 768px) {
  .reel-col .reel-strip span {
    font-size: min(28cqh, 74cqw, 48px);
  }
  .diamond-btn-new {
    width: var(--slot-spin-size, 150px);
    height: var(--slot-spin-size, 150px);
    font-size: 34px;
  }
  .spin-btn-wrap {
    width: var(--slot-spin-size, 150px);
    height: var(--slot-spin-size, 150px);
  }
  #slotPage.slot-page-themed .slot-diamond-display {
    font-size: 34px;
  }
}

/* มือถือ/แท็บเล็ตแนวตั้ง: ขยายตู้เต็มจอแบบ cover ให้ขอบรูปชิดจอ */
@media (max-width: 1024px) {
  #slotPage.slot-page-themed {
    overflow: hidden;
  }
  #slotPage.slot-page-themed .slot-stage {
    position: absolute;
    inset: auto;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    aspect-ratio: 764 / 1024;
    width: max(100%, calc(100vh * 764 / 1024));
    height: auto;
    max-width: none;
    max-height: none;
  }
  @supports (height: 100dvh) {
    #slotPage.slot-page-themed .slot-stage {
      width: max(100%, calc(100dvh * 764 / 1024));
    }
  }
  #slotPage.slot-page-themed .slot-stage-bg {
    object-fit: fill;
  }
}

/* Session reward bag — bottom-right on ROBIT page */
.slot-session-bag-btn {
  position: fixed;
  bottom: 4px;
  right: 4px;
  z-index: 200;
  width: 86px;
  height: 86px;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: #d4af37;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.slot-session-bag-btn:hover {
  background: transparent;
  transform: scale(1.06);
}

.slot-session-bag-btn.is-catch {
  animation: slotBagCatch 0.45s ease;
}

@keyframes slotBagCatch {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.slot-session-bag-icon {
  font-size: 66px;
  line-height: 1;
}

.slot-session-bag-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff4d4d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.slot-session-bag-count[hidden] {
  display: none !important;
}

.slot-session-bag-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
  max-height: min(55vh, 420px);
  overflow-y: auto;
  padding: 12px 4px 8px;
  justify-items: center;
}

.slot-session-bag-list[hidden],
#slotSessionBagEmpty[hidden] {
  display: none !important;
}

.slot-session-bag-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  min-width: 0;
}

.slot-session-bag-item-icon {
  font-size: 56px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-session-bag-item-icon .game-icon-coin,
.slot-session-bag-item-icon .game-icon-grenade,
.slot-session-bag-item-icon .game-icon-shield,
.slot-session-bag-item-icon .game-icon-starship,
.slot-session-bag-item-icon .game-icon-reaper,
.slot-session-bag-item-icon .game-icon-bust,
.slot-session-bag-item-icon .game-icon-crate,
.slot-session-bag-item-icon .game-icon-diamond,
.slot-session-bag-item-icon .game-icon-star {
  width: 56px;
  height: 56px;
}

.slot-session-bag-item-amount {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

@media (max-width: 768px) {
  .slot-session-bag-btn {
    width: 80px;
    height: 80px;
    bottom: 2px;
    right: 2px;
  }
  .slot-session-bag-icon { font-size: 62px; }
  .slot-session-bag-item-icon { font-size: 48px; }
  .slot-session-bag-item-icon .game-icon-coin,
  .slot-session-bag-item-icon .game-icon-grenade,
  .slot-session-bag-item-icon .game-icon-shield,
  .slot-session-bag-item-icon .game-icon-starship,
  .slot-session-bag-item-icon .game-icon-reaper,
  .slot-session-bag-item-icon .game-icon-bust,
  .slot-session-bag-item-icon .game-icon-crate,
  .slot-session-bag-item-icon .game-icon-diamond,
  .slot-session-bag-item-icon .game-icon-star {
    width: 48px;
    height: 48px;
  }
  .slot-session-bag-item-amount { font-size: 18px; }
}


.slot-diamond-display .game-icon-diamond {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

#slotPage.slot-page-themed .slot-diamond-display,
#slotPage.slot-page-themed .slot-diamond-display .format-number {
  color: #f0c14d;
  text-shadow: 0 1px 0 #8a6a18, 0 0 12px rgba(240, 193, 77, 0.35);
}