/* ============================================================
   SOUTH DIAMOND SLOTS ARCADE - Complete stylesheet
   ============================================================ */

/* ----- Reset & base ----- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: hidden; }
body.slots-arcade-body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  background: #0a0210;
  background-image:
    radial-gradient(ellipse at top, rgba(120, 50, 150, .4), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(150, 60, 80, .3), transparent 60%),
    linear-gradient(180deg, #1a0828 0%, #0a0210 100%);
  min-height: 100vh;
  overflow-y: auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
body.slots-arcade-body.is-lobby-active,
body.slots-arcade-body:has(.lobby-view:not(.hidden)) {
  background-color: #07020a;
  background-image:
    linear-gradient(180deg, rgba(5, 0, 8, .38) 0%, rgba(5, 0, 8, .2) 34%, rgba(5, 0, 8, .72) 100%),
    image-set(
      url("assets/slots/south-diamond-lobby-bg-desktop.webp?v=20260525-lobby-bg") type("image/webp"),
      url("assets/slots/south-diamond-lobby-bg-desktop.jpg?v=20260525-lobby-bg") type("image/jpeg")
    );
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ----- HEADER ----- */
.arcade-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.6));
  border-bottom: 2px solid rgba(255, 215, 107, .25);
  backdrop-filter: blur(10px);
}
.arcade-back {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f6c85f, #b8830a);
  color: #1a0d06;
  border: 2px solid #fff;
  font-size: 1.3rem;
  font-weight: 900;
  box-shadow: 0 4px 0 #5a3a00, 0 6px 12px rgba(0,0,0,.5);
}
.arcade-back:active { transform: translateY(2px); box-shadow: 0 2px 0 #5a3a00; }
.arcade-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: #ffd76b;
  font-family: Georgia, serif;
  font-weight: 900;
}
.brand-mark {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ffd76b, #d4002a);
  border: 2px solid #fff;
  box-shadow: 0 0 12px rgba(255, 215, 107, .8);
  position: relative;
}
.brand-mark::after {
  content: "SD"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .65rem; color: #fff;
}
.brand-text { font-size: 1.1rem; letter-spacing: .05em; text-shadow: 0 0 8px rgba(255, 215, 107, .6); }
.arcade-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 215, 107, 0.45);
  border-radius: 999px;
  color: #fff7df;
  background: rgba(255, 215, 107, 0.12);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.arcade-home:hover,
.arcade-brand:hover {
  color: #ffffff;
}
.arcade-balance {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #000, #1a0820);
  border: 1px solid rgba(255, 215, 107, .35);
  box-shadow: inset 0 0 12px rgba(0,0,0,.7);
}
.balance-label {
  grid-column: 1; grid-row: 1;
  font-size: .55rem; letter-spacing: .2em; color: rgba(255,255,255,.6);
}
.arcade-balance strong {
  grid-column: 1; grid-row: 2;
  font-family: "Courier New", monospace;
  font-size: 1.1rem;
  color: #52ef9f;
  text-shadow: 0 0 8px rgba(82, 239, 159, .8);
}
.arcade-toggles { display: flex; gap: 6px; }
.toggle-btn {
  padding: 6px 10px;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .05em;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.15);
}
.toggle-btn.is-active {
  background: linear-gradient(180deg, #ffd76b, #b8830a);
  color: #1a0d06;
  border-color: #fff;
  box-shadow: 0 0 14px rgba(255, 215, 107, .6);
}
.arcade-player {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(26, 8, 40, .64));
  border: 1px solid rgba(123, 232, 255, .28);
}
.arcade-player > span {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7be8ff;
  font-weight: 900;
  font-size: .82rem;
}
.arcade-pill-button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color: #fff;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: 0;
}
.arcade-pill-button.primary,
.arcade-pill-button.is-ready {
  background: linear-gradient(180deg, #52ef9f, #0b8f4a);
  color: #04150c;
  border-color: rgba(255, 255, 255, .72);
  box-shadow: 0 0 14px rgba(82, 239, 159, .36);
}
.arcade-pill-button.danger {
  background: linear-gradient(180deg, #ff6b6b, #b4232c);
  color: #fff;
}
.arcade-pill-button:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.arcade-auth-panel {
  position: sticky;
  top: 62px;
  z-index: 90;
  padding: 10px 12px;
  background: rgba(5, 0, 10, .78);
  border-bottom: 1px solid rgba(255, 215, 107, .22);
  backdrop-filter: blur(10px);
}
.arcade-auth-panel.is-collapsed {
  display: none;
}
.arcade-login-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) minmax(130px, 200px) auto auto;
  gap: 8px;
  align-items: end;
  max-width: 1080px;
  margin: 0 auto;
}
.arcade-login-form strong {
  display: block;
  color: #ffd76b;
  font-size: .95rem;
}
.arcade-login-form div span,
.arcade-login-form label span {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: .68rem;
}
.arcade-login-form [data-arcade-auth-status].is-good {
  color: #52ef9f;
}
.arcade-login-form input,
.arcade-guest-name-form input,
.arcade-chat-form input {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 215, 107, .28);
  background: rgba(0, 0, 0, .62);
  color: #fff;
  padding: 8px 10px;
  font: inherit;
}
.arcade-guest-name-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  background: rgba(255, 215, 107, .08);
  border-top: 1px solid rgba(255, 215, 107, .16);
  border-bottom: 1px solid rgba(255, 215, 107, .12);
}
.arcade-guest-name-form label span {
  display: block;
  margin-bottom: 4px;
  color: rgba(255,255,255,.72);
  font-size: .68rem;
}
.arcade-guest-name-form small {
  grid-column: 1 / -1;
  min-height: 16px;
  color: #ffd76b;
  font-size: .72rem;
}
.arcade-chat-drawer {
  position: sticky;
  top: 62px;
  z-index: 95;
  max-width: 760px;
  margin: 8px auto 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(8, 2, 14, .98), rgba(16, 4, 28, .96));
  border: 1px solid rgba(123, 232, 255, .35);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .42), 0 0 22px rgba(123, 232, 255, .12);
  overflow: hidden;
}
.arcade-menu-panel {
  position: sticky;
  top: 62px;
  z-index: 96;
  width: min(420px, calc(100vw - 20px));
  margin: 8px 10px 0 auto;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(8, 2, 14, .98), rgba(16, 4, 28, .96));
  border: 1px solid rgba(123, 232, 255, .35);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .42), 0 0 22px rgba(123, 232, 255, .12);
}
.arcade-menu-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.arcade-menu-head span,
.arcade-menu-form > span {
  display: block;
  color: rgba(255,255,255,.7);
  font-size: .72rem;
  font-weight: 900;
}
.arcade-menu-head strong {
  color: #7be8ff;
  font-size: 1rem;
}
.arcade-menu-form {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.arcade-menu-form input {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 215, 107, .28);
  background: rgba(0, 0, 0, .62);
  color: #fff;
  padding: 8px 10px;
  font: inherit;
}
.arcade-menu-form small {
  min-height: 16px;
  color: #ffd76b;
  font-size: .72rem;
}
.arcade-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(123, 232, 255, .1);
}
.arcade-chat-head strong {
  color: #7be8ff;
}
.arcade-chat-messages {
  max-height: 220px;
  overflow: auto;
  padding: 10px;
  display: grid;
  gap: 8px;
}
.arcade-chat-message {
  max-width: 86%;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}
.arcade-chat-message.player {
  justify-self: end;
  background: rgba(82, 239, 159, .14);
  border-color: rgba(82, 239, 159, .26);
}
.arcade-chat-message span {
  display: block;
  margin-bottom: 3px;
  color: #ffd76b;
  font-size: .68rem;
  font-weight: 900;
}
.arcade-chat-message p {
  color: #fff;
  font-size: .88rem;
  line-height: 1.35;
}
.arcade-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.arcade-spin-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(7px);
}
.arcade-spin-card {
  position: relative;
  width: min(360px, 94vw);
  padding: 18px;
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(180deg, #1a0828, #08020d);
  border: 2px solid #ffd76b;
  box-shadow: 0 0 34px rgba(255, 215, 107, .32);
}
.arcade-spin-card > strong {
  display: block;
  margin-bottom: 12px;
  color: #ffd76b;
  font-size: 1.2rem;
}
.arcade-spin-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
}
/* Stage holds the wheel, the fixed pointer, and the centre hub. */
.arcade-spin-stage {
  position: relative;
  width: min(280px, 80vw);
  height: min(280px, 80vw);
  margin: 6px auto 14px;
}
.arcade-spin-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8px solid #ffd76b;
  box-shadow: 0 0 0 4px #5a0017, 0 0 26px rgba(255, 215, 107, .45), inset 0 0 18px rgba(0,0,0,.6);
  position: relative;
  overflow: hidden;
  transform: rotate(0deg);
  transition: transform 5s cubic-bezier(.12, .67, .12, 1);
  will-change: transform;
}
.arcade-spin-wheel svg { display: block; width: 100%; height: 100%; }
/* Pointer sits at the very top, pointing down into the winning segment. */
.arcade-spin-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 26px solid #fff;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7));
  z-index: 3;
}
/* Centre hub cap. */
.arcade-spin-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #ffb000 55%, #a85d00);
  border: 3px solid #fff;
  color: #5a0017;
  font-weight: 900;
  font-size: .95rem;
  letter-spacing: .5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
  z-index: 2;
}
.arcade-spin-card p {
  min-height: 48px;
  color: rgba(255,255,255,.9);
  line-height: 1.4;
  margin: 6px 0 14px;
}
.arcade-spin-balance { color: #ffd76b; font-weight: 700; }
.arcade-spin-run {
  width: 100%;
  padding: 14px;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 1px;
  border: none;
  border-radius: 14px;
  color: #2a0010;
  background: linear-gradient(180deg, #ffe9a8, #ffb000);
  box-shadow: 0 4px 14px rgba(255, 176, 0, .45);
  cursor: pointer;
  transition: transform .1s ease, filter .15s ease;
}
.arcade-spin-run:hover:not(:disabled) { filter: brightness(1.06); }
.arcade-spin-run:active:not(:disabled) { transform: translateY(1px); }
.arcade-spin-run:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }
/* Menu entry highlights when a spin is ready. */
.arcade-menu-spin.is-ready {
  animation: arcadeSpinReadyPulse 1.6s ease-in-out infinite;
}
@keyframes arcadeSpinReadyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 107, .55); }
  50% { box-shadow: 0 0 16px 3px rgba(255, 215, 107, .85); }
}

/* ----- JACKPOT STRIP ----- */
.jackpot-strip {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.4), transparent);
}
.jp-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.4));
  border: 2px solid;
  isolation: isolate;
}
.jp-grand { border-color: #ff5630; box-shadow: 0 0 18px rgba(255, 86, 48, .5); }
.jp-major { border-color: #52ef9f; box-shadow: 0 0 14px rgba(82, 239, 159, .4); }
.jp-minor { border-color: #7be8ff; box-shadow: 0 0 10px rgba(123, 232, 255, .35); }
.jp-mini  { border-color: #ff5fe5; box-shadow: 0 0 10px rgba(255, 95, 229, .35); }
.jp-frame { width: 100%; text-align: center; padding: 4px; }
.jp-stars {
  font-size: .65rem; color: #ffd76b;
  text-shadow: 0 0 4px rgba(255, 215, 107, .8);
  letter-spacing: .15em;
}
.jp-label {
  font-family: "Georgia", serif;
  font-weight: 900;
  letter-spacing: .15em;
  font-size: .85rem;
  padding: 4px 8px;
  margin: 2px 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #2a0f1d, #1a0212);
}
.jp-grand .jp-label { color: #ff8a4a; background: linear-gradient(180deg, #5a1500, #2a0500); }
.jp-major .jp-label { color: #52ef9f; background: linear-gradient(180deg, #052f15, #021a0a); }
.jp-minor .jp-label { color: #7be8ff; background: linear-gradient(180deg, #002240, #00111f); }
.jp-mini  .jp-label { color: #ff5fe5; background: linear-gradient(180deg, #2a0026, #150013); }
.jp-value {
  font-family: "Courier New", monospace;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .03em;
  padding: 4px 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, #1a0d06, #000);
  border: 1px solid rgba(255, 215, 107, .3);
  box-shadow: inset 0 0 6px rgba(0,0,0,.8);
}
.jp-grand .jp-value { color: #ff8a4a; text-shadow: 0 0 8px rgba(255, 138, 74, .8); }
.jp-major .jp-value { color: #52ef9f; text-shadow: 0 0 8px rgba(82, 239, 159, .8); }
.jp-minor .jp-value { color: #7be8ff; text-shadow: 0 0 8px rgba(123, 232, 255, .8); }
.jp-mini  .jp-value { color: #ff5fe5; text-shadow: 0 0 8px rgba(255, 95, 229, .8); }
.jp-bulbs {
  display: flex; gap: 4px;
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
}
.jp-bulbs i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: bulb-blink 1.2s infinite;
}
.jp-grand .jp-bulbs i { color: #ff5630; }
.jp-major .jp-bulbs i { color: #52ef9f; }
.jp-minor .jp-bulbs i { color: #7be8ff; }
.jp-mini  .jp-bulbs i { color: #ff5fe5; }
.jp-bulbs i:nth-child(2) { animation-delay: .15s; }
.jp-bulbs i:nth-child(3) { animation-delay: .3s; }
.jp-bulbs i:nth-child(4) { animation-delay: .45s; }
.jp-bulbs i:nth-child(5) { animation-delay: .6s; }
@keyframes bulb-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px currentColor; }
  50% { opacity: .3; box-shadow: none; }
}

/* ----- LOBBY ----- */
.lobby-view { padding: 16px; }
.lobby-intro {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0 auto 20px;
  max-width: min(1180px, 100%);
}
.lobby-title-fallback {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.lobby-title-art {
  display: block;
  width: min(100%, 1086px);
  aspect-ratio: 2172 / 724;
  overflow: hidden;
  border-radius: 12px;
  background: #08020d;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .35), 0 0 28px rgba(255, 154, 28, .18);
}
.lobby-title-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lobby-intro h1 {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 2.4rem;
  letter-spacing: .1em;
  background: linear-gradient(180deg, #fff8cd, #ffd76b 40%, #d4002a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 12px rgba(255, 215, 107, .5);
  filter: drop-shadow(0 2px 0 #5a0017);
}
.lobby-intro p { color: rgba(255, 255, 255, .7); letter-spacing: .05em; }
.lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  max-width: 1400px;
  margin: 0 auto;
}
.lobby-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 240px;
  padding: 0;
  border-radius: 18px;
  border: 3px solid transparent;
  overflow: hidden;
  background: #1a0820;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  isolation: isolate;
  text-align: left;
  color: #fff;
}
.lobby-tile:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 36px rgba(0,0,0,.6);
}
.tile-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.tile-decor {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.tile-decor span {
  position: absolute;
  font-size: 1.8rem;
  opacity: .35;
  animation: float-bg 8s ease-in-out infinite alternate;
}
.tile-decor span:nth-child(1) { top: 12%; left: 12%; }
.tile-decor span:nth-child(2) { top: 25%; right: 18%; animation-delay: 1s; }
.tile-decor span:nth-child(3) { bottom: 30%; left: 22%; animation-delay: 2s; }
.tile-decor span:nth-child(4) { bottom: 18%; right: 10%; animation-delay: 3s; }
@keyframes float-bg {
  0%   { transform: translateY(0) rotate(-5deg); }
  100% { transform: translateY(-12px) rotate(5deg); }
}
.tile-mascot {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 5rem;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.6)) drop-shadow(0 0 14px var(--tile-accent, #ffd76b));
  z-index: 2;
  animation: mascot-bob 2.5s ease-in-out infinite alternate;
}
@keyframes mascot-bob {
  0%   { transform: translateX(-50%) translateY(0) rotate(-3deg); }
  100% { transform: translateX(-50%) translateY(-6px) rotate(3deg); }
}
.tile-info {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding: 10px 12px 6px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85) 30%);
}
.tile-info strong {
  display: block;
  font-family: "Georgia", serif;
  font-size: 1.2rem;
  text-shadow: 0 2px 4px rgba(0,0,0,.8);
  letter-spacing: .02em;
  margin-bottom: 2px;
}
.tile-info span {
  display: block;
  font-size: .75rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 4px;
}
.tile-info small {
  display: inline-block;
  font-size: .65rem;
  letter-spacing: .15em;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
}
.tile-play {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  padding: 4px 12px;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .15em;
  border-radius: 999px;
  background: linear-gradient(135deg, #52ef9f, #1a6e3e);
  color: #042412;
  border: 2px solid #fff;
  box-shadow: 0 0 12px rgba(82, 239, 159, .6);
}

/* Lobby tile theme backgrounds */
.lobby-tile.theme-buffalo  { --tile-accent: #ff8533; border-color: #ff8533; }
.lobby-tile.theme-buffalo .tile-bg {
  background: linear-gradient(180deg, #6ec1ff 0%, #e9b585 50%, #b86430 100%);
}
.lobby-tile.theme-kingkong  { --tile-accent: #ff3030; border-color: #ff3030; }
.lobby-tile.theme-kingkong .tile-bg {
  background: linear-gradient(180deg, #1a1a3a 0%, #3d3d6e 50%, #7b1818 100%);
}
.lobby-tile.theme-triple777 { --tile-accent: #ff2540; border-color: #ffd76b; }
.lobby-tile.theme-triple777 .tile-bg {
  background: radial-gradient(circle, #d11645 0%, #5a0017 100%);
}
.lobby-tile.theme-blackjack { --tile-accent: #2dd55b; border-color: #2dd55b; }
.lobby-tile.theme-blackjack .tile-bg {
  background: radial-gradient(ellipse, #1a8a30 0%, #042412 100%);
}
.lobby-tile.theme-gorilla   { --tile-accent: #ffd200; border-color: #ffd200; }
.lobby-tile.theme-gorilla .tile-bg {
  background: linear-gradient(180deg, #4a6b22 0%, #2a3a14 100%);
}
.lobby-tile.theme-wolf      { --tile-accent: #95e3ff; border-color: #95e3ff; }
.lobby-tile.theme-wolf .tile-bg {
  background: linear-gradient(180deg, #0a1830 0%, #1a3a5a 60%, #5a7a9a 100%);
}
.lobby-tile.theme-bull      { --tile-accent: #ffd95e; border-color: #ffd95e; }
.lobby-tile.theme-bull .tile-bg {
  background: linear-gradient(180deg, #ffce6a 0%, #c87a32 100%);
}
.lobby-tile.theme-dragon    { --tile-accent: #d4002a; border-color: #ffd200; }
.lobby-tile.theme-dragon .tile-bg {
  background: radial-gradient(circle, #ff2540 0%, #5a0017 100%);
}
.lobby-tile.theme-mammoth   { --tile-accent: #5dcef0; border-color: #5dcef0; }
.lobby-tile.theme-mammoth .tile-bg {
  background: linear-gradient(180deg, #b8e3f0 0%, #5dcef0 60%, #2a6e8a 100%);
}
.lobby-tile.theme-pharaoh   { --tile-accent: #f7c000; border-color: #f7c000; }
.lobby-tile.theme-pharaoh .tile-bg {
  background: linear-gradient(180deg, #f5c876 0%, #d49530 100%);
}
.lobby-tile.theme-ocean     { --tile-accent: #00b4d8; border-color: #00b4d8; }
.lobby-tile.theme-ocean .tile-bg {
  background: linear-gradient(180deg, #00b4d8 0%, #003a52 100%);
}
.lobby-tile.theme-vegas     { --tile-accent: #ff5fe5; border-color: #ff5fe5; }
.lobby-tile.theme-vegas .tile-bg {
  background: linear-gradient(180deg, #1a0828 0%, #5a1854 50%, #ff5fe5 100%);
}

.lobby-tip {
  text-align: center;
  margin-top: 24px;
  color: rgba(255,255,255,.5);
  font-size: .85rem;
}

/* ============================================================
   GAME VIEW
   ============================================================ */
.game-view {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);
  padding: 8px;
  isolation: isolate;
}
.game-view .game-decor {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.game-view .game-decor span {
  position: absolute;
  animation: drift 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift {
  0%   { transform: translate(0, 0) rotate(-5deg); }
  100% { transform: translate(12px, -16px) rotate(5deg); }
}

/* Per-theme background scenes */
.game-view.scene-prairie {
  background:
    linear-gradient(180deg, #6ec1ff 0%, #b9d8ff 35%, #e9b585 60%, #b86430 100%);
}
.game-view.scene-prairie::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 200px 80px at 20% 60%, #8a3a18 0%, transparent 70%),
    radial-gradient(ellipse 300px 100px at 75% 70%, #8a3a18 0%, transparent 70%);
}
.game-view.scene-skyscraper {
  background:
    linear-gradient(180deg, #050828 0%, #1a1a4a 40%, #3d2860 70%, #7b1818 100%);
}
.game-view.scene-skyscraper::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent, #0a0a1a 80%),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(80, 100, 150, .35) 30px 36px, transparent 36px 50px, rgba(80, 100, 150, .25) 50px 60px, transparent 60px 80px);
  pointer-events: none;
}
.game-view.scene-classic-vegas {
  background:
    radial-gradient(ellipse at top, rgba(255, 215, 107, .25), transparent 60%),
    linear-gradient(180deg, #d11645 0%, #5a0017 100%);
}
.game-view.scene-table {
  background:
    radial-gradient(ellipse at center, #2dd55b 0%, #1a8a30 30%, #042412 80%);
}
.game-view.scene-jungle {
  background:
    radial-gradient(ellipse at top, rgba(255, 215, 107, .2), transparent 70%),
    linear-gradient(180deg, #2a4a18 0%, #1a3a14 50%, #0a1a08 100%);
}
.game-view.scene-jungle::before {
  content: "";
  position: absolute;
  inset: 30% 0 0 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 180px 120px at 10% 50%, #5a8a32, transparent 70%),
    radial-gradient(ellipse 240px 140px at 90% 60%, #5a8a32, transparent 70%);
  pointer-events: none;
}
.game-view.scene-snow {
  background:
    linear-gradient(180deg, #0a1830 0%, #1a3a5a 50%, #5a7a9a 100%);
}
.game-view.scene-snow::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 0, transparent 1px),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.4) 0, transparent 1px),
    radial-gradient(circle at 80% 50%, rgba(255,255,255,.5) 0, transparent 1px),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.3) 0, transparent 1px);
  background-size: 100px 100px, 80px 80px, 120px 120px, 60px 60px;
  animation: snow-fall 20s linear infinite;
  pointer-events: none;
}
@keyframes snow-fall {
  to { background-position: 100px 100px, 80px 80px, 120px 120px, 60px 60px; }
}
.game-view.scene-rodeo {
  background:
    linear-gradient(180deg, #ffce6a 0%, #c87a32 60%, #8b4a18 100%);
}
.game-view.scene-temple {
  background:
    radial-gradient(ellipse at top, rgba(255, 215, 107, .3), transparent 60%),
    linear-gradient(180deg, #d4002a 0%, #5a0010 70%, #2a0005 100%);
}
.game-view.scene-iceage {
  background:
    linear-gradient(180deg, #b8e3f0 0%, #5dcef0 40%, #2a6e8a 100%);
}
.game-view.scene-egypt {
  background:
    radial-gradient(ellipse at top, rgba(255, 240, 180, .5), transparent 60%),
    linear-gradient(180deg, #f5c876 0%, #d49530 70%, #8b4a18 100%);
}
.game-view.scene-egypt::before {
  content: "";
  position: absolute;
  inset: 35% 0 30% 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 120px 100px at 20% 70%, #5a3a18, transparent 70%),
    radial-gradient(ellipse 180px 140px at 80% 70%, #5a3a18, transparent 70%);
  pointer-events: none;
}
.game-view.scene-ocean {
  background:
    linear-gradient(180deg, #00b4d8 0%, #00455a 60%, #001a25 100%);
}
.game-view.scene-ocean::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.3) 0, transparent 4px),
    radial-gradient(circle at 75% 30%, rgba(255,255,255,.25) 0, transparent 4px),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.3) 0, transparent 4px),
    radial-gradient(circle at 85% 60%, rgba(255,255,255,.2) 0, transparent 4px);
  background-size: 150px 150px;
  animation: bubble-rise 8s linear infinite;
  pointer-events: none;
}
@keyframes bubble-rise {
  to { background-position: 0 -150px; }
}
.game-view.scene-neon {
  background:
    linear-gradient(180deg, #1a0828 0%, #5a1854 50%, #ff5fe5 100%);
}
.game-view.scene-neon::before {
  content: "";
  position: absolute;
  inset: 35% 0 0 0;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent, #1a0828 90%),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(123, 232, 255, .3) 24px 28px, transparent 28px 44px, rgba(255, 95, 229, .3) 44px 48px);
  pointer-events: none;
}

/* Game logo bar */
.game-logo-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 4px auto 8px;
  max-width: 700px;
}
.mobile-lobby-btn {
  display: none;
}
.game-mascot {
  font-size: 3rem;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.5)) drop-shadow(0 0 16px var(--accent, #ffd76b));
  animation: mascot-bob 2.4s ease-in-out infinite alternate;
}
.game-titles { text-align: center; }
.game-titles strong {
  display: block;
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 2rem;
  letter-spacing: .08em;
  color: var(--accent2, #ffd76b);
  text-shadow:
    0 0 12px var(--accent, #ff5630),
    0 0 24px var(--accent, #ff5630),
    0 3px 0 rgba(0,0,0,.7);
}
.game-titles span {
  display: block;
  font-size: .8rem;
  color: rgba(255,255,255,.85);
  letter-spacing: .1em;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}

/* Play area: paytable | reels | paytable */
.play-area {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(50px, 90px) 1fr minmax(50px, 90px);
  gap: 6px;
  flex: 1;
  align-items: stretch;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* Paytable ladders */
.paytable {
  display: flex;
  align-items: center;
}
.paytable-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.4));
  border: 2px solid var(--accent, #ffd76b);
  box-shadow: inset 0 0 12px rgba(0,0,0,.6), 0 0 18px var(--accent, transparent);
}
.pt-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.pt-icon { display: grid; place-items: center; }
.pt-icon svg { width: 26px; height: 26px; }
.pt-symbol-img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: auto;
}
.pt-emoji { font-size: 1.4rem; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.pt-value {
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-align: right;
  font-size: .85rem;
  color: var(--accent2, #ffd76b);
  text-shadow: 0 0 6px var(--accent2, currentColor);
  padding-right: 4px;
}

/* Reels area */
.reels-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reels-frame {
  position: relative;
  width: 100%;
  border-radius: 18px;
  padding: 10px;
  background: linear-gradient(180deg, #000 0%, #1a0212 50%, #000 100%);
  border: 4px solid var(--accent, #ffd76b);
  box-shadow:
    inset 0 4px 24px rgba(0, 0, 0, .9),
    0 0 36px var(--accent, rgba(255, 215, 107, .5));
  overflow: hidden;
}
.reel-strip {
  display: grid;
  gap: 4px;
  position: relative;
}
.reel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: linear-gradient(180deg, #1f0a18, #07020a 50%, #1f0a18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 8px 14px rgba(0,0,0,.8),
    inset 0 -8px 14px rgba(0,0,0,.8);
  overflow: hidden;
  min-height: 0;
}
.reel::before, .reel::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 16px;
  z-index: 4;
  pointer-events: none;
}
.reel::before { top: 0; background: linear-gradient(180deg, rgba(0,0,0,.85), transparent); }
.reel::after  { bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); }
.reel-cell {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.04);
  overflow: hidden;
  position: relative;
}
.sym-cell {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.sym-inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 2px;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.sym-cell.sym-image .sym-inner {
  /* Make a square that's as large as possible while staying inside the cell.
     Removing explicit width lets aspect-ratio derive the square from height,
     and max-width caps it if the cell is narrower than tall. */
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  padding: 1px;
  box-sizing: border-box;
}
.sym-cell.sym-svg .sym-inner svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sym-cell.sym-image .sym-inner img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  user-select: none;
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.sym-cell.sym-emoji .sym-inner {
  font-size: 2.6rem;
  line-height: 1;
}

/* Spinning state */
.reel.is-spinning {
  filter: blur(.5px);
}
.reel.is-spinning .reel-cell {
  animation: cell-blur 80ms linear infinite;
}
@keyframes cell-blur {
  0% { transform: translateY(-8px); opacity: .7; }
  50% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(8px); opacity: .7; }
}
.reel.just-landed .reel-cell {
  animation: cell-thud 360ms cubic-bezier(.5, -.4, .3, 1.5);
}
@keyframes cell-thud {
  0% { transform: translateY(-20px); }
  50% { transform: translateY(6px); }
  100% { transform: translateY(0); }
}

/* Winning symbols */
.sym-cell.is-winning {
  animation: sym-celebrate 700ms ease-in-out infinite alternate;
  z-index: 3;
}
.sym-cell.is-winning::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 8px;
  background: radial-gradient(circle, var(--accent, #ffd76b), transparent 70%);
  z-index: -1;
  animation: sym-glow 700ms ease-in-out infinite alternate;
}
@keyframes sym-celebrate {
  0%   { transform: scale(1) rotate(0); }
  100% { transform: scale(1.18) rotate(-3deg); }
}
@keyframes sym-glow {
  0%   { opacity: .6; }
  100% { opacity: 1; }
}
.reel-strip.is-winning {
  animation: strip-pulse 1s ease-in-out 2;
}
@keyframes strip-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 215, 107, 0); }
  50% { box-shadow: 0 0 80px var(--accent, rgba(255, 215, 107, 1)); }
}

/* Win burst */
.win-burst {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 215, 107, .25), transparent 60%);
}
.burst-amount {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 3.5rem;
  color: #ffd76b;
  text-shadow:
    0 0 0 #ff2540,
    0 0 16px #ffd76b,
    0 0 36px #ff5630,
    0 4px 0 rgba(0,0,0,.8);
  animation: burst-pop 1.6s ease-out;
  text-align: center;
  line-height: 1.1;
}
.burst-amount span { font-size: 1.8rem; display: block; }
.win-burst.mega .burst-amount {
  font-size: 5rem;
  animation: burst-mega 2.4s ease-in-out infinite alternate;
}
@keyframes burst-pop {
  0%   { transform: scale(.3) rotate(-15deg); opacity: 0; }
  20%  { transform: scale(1.4) rotate(6deg); opacity: 1; }
  60%  { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(1.3) rotate(0); opacity: 0; }
}
@keyframes burst-mega {
  0%   { transform: scale(1) rotate(-3deg); }
  100% { transform: scale(1.18) rotate(3deg); }
}
.coin-box {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.coin {
  position: absolute;
  top: 30%;
  font-size: 2rem;
  filter: drop-shadow(0 0 8px #ffd76b);
  animation: coin-drop 1.5s cubic-bezier(.4, 0, .6, 1) forwards;
}
@keyframes coin-drop {
  0%   { transform: translateY(-40px) rotate(0) scale(.5); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(280px) rotate(720deg) scale(1.1); opacity: 0; }
}

/* Jackpot burst */
.jackpot-burst {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 86, 48, .5), transparent 70%);
}
.jp-burst-stars { font-size: 1.8rem; color: #ffd76b; animation: stars-flash .4s infinite alternate; letter-spacing: .15em; }
@keyframes stars-flash {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: .5; transform: scale(1.1); }
}
.jp-burst-level {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 3rem;
  color: #fff;
  letter-spacing: .15em;
  text-shadow:
    0 0 12px #ffd76b,
    0 0 24px #ff5630,
    0 4px 0 rgba(0,0,0,.8);
  animation: burst-pop 1s ease-out;
}
.jp-burst-amount {
  font-family: "Courier New", monospace;
  font-size: 2.4rem;
  color: #ffd76b;
  margin-top: 6px;
  text-shadow: 0 0 14px #ffd76b;
}
.jp-burst-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.jp-burst-confetti span {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  background: hsl(calc(var(--i, 0) * 25deg), 90%, 60%);
  animation: confetti-fall 2.5s ease-in infinite;
}
.jp-burst-confetti span:nth-child(1)  { left: 5%;  --i: 1; animation-delay: 0s; }
.jp-burst-confetti span:nth-child(2)  { left: 15%; --i: 2; animation-delay: .1s; background: #ff5630; }
.jp-burst-confetti span:nth-child(3)  { left: 25%; --i: 3; animation-delay: .2s; background: #ffd76b; }
.jp-burst-confetti span:nth-child(4)  { left: 35%; --i: 4; animation-delay: .3s; background: #52ef9f; }
.jp-burst-confetti span:nth-child(5)  { left: 45%; --i: 5; animation-delay: .4s; background: #7be8ff; }
.jp-burst-confetti span:nth-child(6)  { left: 55%; --i: 6; animation-delay: .5s; background: #ff5fe5; }
.jp-burst-confetti span:nth-child(7)  { left: 65%; --i: 7; animation-delay: .15s; background: #ff5630; }
.jp-burst-confetti span:nth-child(8)  { left: 75%; --i: 8; animation-delay: .25s; background: #ffd76b; }
.jp-burst-confetti span:nth-child(9)  { left: 85%; --i: 9; animation-delay: .35s; background: #52ef9f; }
.jp-burst-confetti span:nth-child(10) { left: 95%; --i: 10; animation-delay: .45s; background: #7be8ff; }
.jp-burst-confetti span:nth-child(11) { left: 10%; --i: 11; animation-delay: .55s; background: #ff5fe5; }
.jp-burst-confetti span:nth-child(12) { left: 20%; --i: 12; animation-delay: .65s; background: #ff5630; }
.jp-burst-confetti span:nth-child(13) { left: 50%; --i: 13; animation-delay: .75s; background: #ffd76b; }
.jp-burst-confetti span:nth-child(14) { left: 70%; --i: 14; animation-delay: .85s; background: #52ef9f; }
.jp-burst-confetti span:nth-child(15) { left: 90%; --i: 15; animation-delay: .95s; background: #7be8ff; }
@keyframes confetti-fall {
  to { transform: translateY(500px) rotate(720deg); opacity: 0; }
}


/* ============================================================
   WIN MESSAGE BAR & CONTROLS
   ============================================================ */
.win-msg-bar {
  position: relative;
  z-index: 2;
  margin: 8px auto;
  padding: 10px 18px;
  max-width: 600px;
  text-align: center;
  border-radius: 14px;
  background: linear-gradient(180deg, #ff5630 0%, #d4002a 100%);
  border: 2px solid #ffd76b;
  box-shadow: 0 0 18px rgba(255, 215, 107, .6), inset 0 0 12px rgba(0,0,0,.3);
}
.win-msg-bar span {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 1.1rem;
  letter-spacing: .15em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.7);
}
.win-msg-bar span.flash {
  animation: msg-flash .25s 4;
}
@keyframes msg-flash {
  0%, 100% { color: #fff; }
  50% { color: #ffd76b; }
}

.controls-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr;
  gap: 8px;
  padding: 10px 12px;
  max-width: 900px;
  margin: 0 auto 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.6));
  border-radius: 18px;
  border: 2px solid var(--accent, #ffd76b);
  box-shadow: 0 0 20px var(--accent, rgba(255,215,107,.4));
  align-items: center;
}
.ctrl-label {
  font-size: .6rem;
  letter-spacing: .25em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  text-align: center;
}
.bet-control { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bet-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #000, #1a0212);
  border: 1px solid var(--accent, #ffd76b);
}
.bet-row button {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd76b, #b8830a);
  color: #1a0d06;
  border: 2px solid #fff;
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: 0 3px 0 #5a3a00;
}
.bet-row button:active { transform: translateY(2px); box-shadow: 0 1px 0 #5a3a00; }
.bet-row span {
  min-width: 60px;
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 1.2rem;
  font-weight: 900;
  color: #ffd76b;
  text-shadow: 0 0 6px rgba(255, 215, 107, .6);
}
.bet-meta {
  font-size: .65rem;
  color: rgba(255,255,255,.6);
  letter-spacing: .1em;
}
.bet-meta b { color: var(--accent, #ffd76b); font-size: .9rem; }

.win-control { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.win-control strong {
  font-family: "Courier New", monospace;
  font-size: 1.6rem;
  color: #52ef9f;
  text-shadow: 0 0 12px rgba(82, 239, 159, .8);
  padding: 4px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #000, #042412);
  border: 1px solid rgba(82, 239, 159, .35);
  min-width: 100px;
  text-align: center;
}

/* SPIN BUTTON */
.spin-btn {
  position: relative;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #88ff9a, #2dd55b 50%, #0f6b22) ;
  color: #fff;
  border: 5px solid #fff;
  box-shadow:
    0 0 0 5px #0f6b22,
    0 0 32px rgba(82, 239, 159, .8),
    0 10px 0 #042412,
    0 12px 28px rgba(0,0,0,.6);
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 1.3rem;
  letter-spacing: .15em;
  isolation: isolate;
  overflow: hidden;
}
.spin-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 5px #0f6b22,
    0 0 42px rgba(82, 239, 159, 1),
    0 12px 0 #042412,
    0 14px 32px rgba(0,0,0,.6);
}
.spin-btn:active:not(:disabled) {
  transform: translateY(7px);
  box-shadow:
    0 0 0 5px #0f6b22,
    0 0 20px rgba(82, 239, 159, .6),
    0 3px 0 #042412,
    0 5px 14px rgba(0,0,0,.6);
}
.spin-btn-text {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 0 rgba(0,0,0,.7);
}
.spin-btn-glow {
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 215, 107, .8), transparent 50%);
  z-index: 1;
  animation: glow-spin 1s linear infinite;
  opacity: 0;
}
.spin-btn:active .spin-btn-glow,
.spin-btn.is-spinning .spin-btn-glow {
  opacity: 1;
}
@keyframes glow-spin {
  to { transform: rotate(360deg); }
}

.aux-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aux-controls button {
  padding: 6px 12px;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .15em;
  border-radius: 8px;
  background: linear-gradient(180deg, #2a0f1d, #1a0212);
  color: var(--accent, #ffd76b);
  border: 1.5px solid var(--accent, #ffd76b);
}
.aux-controls button.is-active {
  background: var(--accent, #ffd76b);
  color: #1a0d06;
  box-shadow: 0 0 12px var(--accent, currentColor);
}

/* ============================================================
   RESPONSIVE / MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .arcade-header { grid-template-columns: auto 1fr auto; padding: 8px; gap: 8px; }
  .brand-text { font-size: .9rem; }
  .arcade-home { padding: 6px 10px; font-size: .68rem; }
  .arcade-toggles { grid-column: 1 / -1; justify-content: center; }
  .arcade-balance { gap: 1px 6px; padding: 4px 8px; }
  .balance-label { font-size: .5rem; }
  .arcade-balance strong { font-size: .95rem; }
  .jackpot-strip { gap: 4px; padding: 6px; grid-template-columns: 2fr 1.4fr 1fr 1fr; }
  .jp-panel { padding: 4px; }
  .jp-label { font-size: .65rem; padding: 2px 4px; }
  .jp-value { font-size: .75rem; padding: 2px 4px; }
  .jp-stars { font-size: .55rem; }
  .lobby-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
  .lobby-tile { height: 200px; }
  .tile-mascot { font-size: 3.5rem; top: 24px; }
  .tile-info strong { font-size: 1rem; }
  .tile-info span { font-size: .7rem; }
  .tile-info small { font-size: .55rem; }
  .tile-play { padding: 3px 8px; font-size: .6rem; }
  .lobby-intro h1 { font-size: 1.8rem; }
  .game-titles strong { font-size: 1.4rem; }
  .game-titles span { font-size: .7rem; }
  .game-mascot { font-size: 2.4rem; }
  .play-area { grid-template-columns: minmax(42px, 60px) 1fr minmax(42px, 60px); gap: 4px; }
  .pt-row { grid-template-columns: 22px 1fr; }
  .pt-icon svg { width: 20px; height: 20px; }
  .pt-emoji { font-size: 1.1rem; }
  .pt-value { font-size: .7rem; }
  .reels-frame { padding: 6px; border-width: 3px; }
  .reel { padding: 2px; }
  .reel-cell { border-radius: 6px; }
  .sym-cell.sym-emoji .sym-inner { font-size: 1.8rem; }
  .win-msg-bar { padding: 6px 12px; }
  .win-msg-bar span { font-size: .9rem; }
  .controls-bar { grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 8px; }
  .win-control { display: none; }
  .spin-btn { width: 88px; height: 88px; font-size: 1rem; }
  .aux-controls button { padding: 5px 8px; font-size: .6rem; }
  .bet-row button { width: 26px; height: 26px; font-size: .9rem; }
  .bet-row span { min-width: 46px; font-size: .95rem; }
  .burst-amount { font-size: 2.4rem; }
  .win-burst.mega .burst-amount { font-size: 3.4rem; }
  .jp-burst-level { font-size: 2rem; }
  .jp-burst-amount { font-size: 1.6rem; }
}

@media (max-width: 480px) {
  .lobby-grid { grid-template-columns: repeat(2, 1fr); }
  .lobby-tile { height: 170px; }
  .tile-mascot { font-size: 2.8rem; top: 18px; }
  .play-area { grid-template-columns: minmax(36px, 50px) 1fr minmax(36px, 50px); }
  .pt-row { grid-template-columns: 18px 1fr; padding: 1px; }
  .pt-icon svg { width: 16px; height: 16px; }
  .pt-emoji { font-size: .9rem; }
  .pt-value { font-size: .6rem; }
  .sym-cell.sym-emoji .sym-inner { font-size: 1.3rem; }
  .game-titles strong { font-size: 1.1rem; }
  .game-mascot { font-size: 1.8rem; }
  .spin-btn { width: 70px; height: 70px; font-size: .85rem; }
  .controls-bar { padding: 6px; gap: 4px; }
}

/* Landscape mobile */
@media (max-height: 600px) and (orientation: landscape) {
  .arcade-header { padding: 4px 8px; }
  .arcade-toggles { grid-column: auto; }
  .jackpot-strip { padding: 4px 6px; }
  .game-logo-bar { padding: 4px; margin: 2px auto; }
  .game-mascot { font-size: 2rem; }
  .game-titles strong { font-size: 1.2rem; }
  .play-area { max-width: 100%; }
  .controls-bar { padding: 6px; }
  .spin-btn { width: 80px; height: 80px; }
}

/* Fullscreen */
:fullscreen .arcade-header { padding: 6px 10px; }
:fullscreen .lobby-intro { margin-bottom: 12px; }
:fullscreen .lobby-intro h1 { font-size: 2rem; }

/* ============================================================
   v2: SCROLLING REEL FIX + LAYOUT VARIANTS + RICHER MASCOTS
   ============================================================ */

/* New scrolling reel structure: .reel > .reel-track > .reel-cell[] */
.reel-strip { gap: 6px !important; }
.reel {
  height: calc(var(--cell-base, 90px) * var(--rows, 3));
  overflow: hidden;
  display: block !important;
  position: relative;
  border-radius: 12px;
  background: linear-gradient(180deg, #1f0a18, #07020a 50%, #1f0a18) !important;
  padding: 0 !important;
}
.reel-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  will-change: transform;
}
.reel .reel-cell {
  flex: 0 0 var(--cell-base, 90px);
  height: var(--cell-base, 90px);
  width: 100%;
  display: grid;
  place-items: center;
  aspect-ratio: auto !important;
  padding: 2px;
  position: relative;
  border-radius: 0;
  background: transparent;
  border: 0;
}
.reel .reel-cell::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
  z-index: 0;
}
.reel .reel-cell .sym-cell {
  position: relative; z-index: 1;
}
/* Top/bottom fade still in place */
.reel::before, .reel::after {
  z-index: 5;
}

/* Sizes per viewport - the cell-base CSS var controls reel cell height */
.reels-frame { --cell-base: 110px; }
@media (max-width: 900px) { .reels-frame { --cell-base: 88px; } }
@media (max-width: 600px) { .reels-frame { --cell-base: 70px; } }
@media (max-width: 420px) { .reels-frame { --cell-base: 56px; } }

/* During spin: subtle motion blur via repeated layer, no opacity flicker */
.reel.is-spinning {
  filter: none;
}
.reel.is-spinning::before,
.reel.is-spinning::after {
  height: 30px;
  opacity: .95;
}
.reel.is-spinning .reel-cell .sym-cell {
  filter: blur(0.6px);
}
/* Settle bounce is handled by the rAF engine (landReel) via inline transform.
   The old CSS keyframe fought that transform, so it is disabled here. */
.reel.just-landed .reel-track {
  animation: none;
}
@keyframes track-bounce {
  0%   { transform: translateY(calc(-1 * var(--final-offset, 0px) - 16px)); }
  60%  { transform: translateY(calc(-1 * var(--final-offset, 0px) + 6px)); }
  100% { transform: translateY(calc(-1 * var(--final-offset, 0px))); }
}

/* Override prior cell animation that fought with the strip */
.reel.is-spinning .reel-cell { animation: none !important; transform: none !important; }

/* Layout variants */
.game-view.layout-mascot-watermark .play-area::before {
  content: "";
  position: absolute;
  inset: -10% -5% 30% -5%;
  z-index: 0;
  background-image: var(--mascot-bg, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: .18;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}

.game-view.layout-mascot-top .game-logo-bar {
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px 14px;
  position: relative;
  z-index: 5;
}
.game-view.layout-mascot-top .game-mascot-art {
  width: clamp(160px, 32vw, 280px);
  height: clamp(120px, 24vw, 220px);
  margin: 0 auto -20px;
  position: relative;
  z-index: 6;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.6));
}
.game-view.layout-mascot-top .game-mascot-art svg { width: 100%; height: 100%; display: block; }

.game-view.layout-classic-compact .play-area {
  grid-template-columns: 1fr;
  max-width: 520px;
}
.game-view.layout-classic-compact .paytable { display: none; }
.game-view.layout-classic-compact .reels-frame {
  border-width: 6px;
  border-image: linear-gradient(180deg, #ffd76b 0%, #d4002a 60%, #ffd76b 100%) 1;
  background:
    linear-gradient(180deg, #2a0510, #5a0017 30%, #2a0510 70%, #5a0017) !important;
  padding: 14px;
  box-shadow:
    inset 0 4px 24px rgba(0, 0, 0, .9),
    0 0 50px var(--accent, #ffd76b),
    0 0 0 4px rgba(0,0,0,.5),
    0 0 0 8px var(--accent2, #ffd76b);
}
.game-view.layout-classic-compact .reels-frame::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 16px;
  background: radial-gradient(ellipse, var(--accent2, #ffd76b), transparent 70%);
  z-index: -1;
}

.game-view.layout-table-felt {
  background:
    radial-gradient(ellipse 60% 60% at 50% 65%, #2dd55b 0%, #1a8a30 40%, #042412 80%);
}
.game-view.layout-table-felt .reels-frame {
  background: radial-gradient(ellipse 70% 80% at 50% 50%, #134b22, #082818 80%) !important;
  border-color: #ffd76b;
}
.game-view.layout-table-felt .paytable-list {
  background: linear-gradient(180deg, rgba(8, 40, 24, .9), rgba(8, 40, 24, .7));
  border-color: #ffd76b;
}

/* Per-game character-row paytable (top of game) for King Kong style */
.character-paytable {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 4px;
  padding: 8px;
  margin: 4px auto 6px;
  max-width: 700px;
  background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.45));
  border: 2px solid var(--accent, #ffd76b);
  border-radius: 14px;
  box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}
.char-pt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}
.char-pt-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-size: 1.6rem;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.char-pt-icon svg { width: 36px; height: 36px; }
.char-pt-value {
  font-family: "Courier New", monospace;
  font-size: .75rem;
  font-weight: 900;
  color: var(--accent2, #ffd76b);
  text-shadow: 0 0 6px currentColor;
  padding: 1px 6px;
  border-radius: 4px;
  background: linear-gradient(180deg, #1a0d06, #000);
  border: 1px solid rgba(255, 215, 107, .3);
  min-width: 100%;
  text-align: center;
}
@media (max-width: 480px) {
  .character-paytable { grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); gap: 2px; padding: 4px; }
  .char-pt-icon { width: 28px; height: 28px; font-size: 1.1rem; }
  .char-pt-icon svg { width: 24px; height: 24px; }
  .char-pt-value { font-size: .6rem; padding: 1px 3px; }
}

/* Big mascot illustration containers */
.mascot-art {
  display: block;
  pointer-events: none;
}
.mascot-art svg { width: 100%; height: 100%; display: block; }


/* ============================================================
   v3: Cinematic lobby tiles
   ============================================================ */
.lobby-tile {
  height: 280px !important;
  border-radius: 18px !important;
  border: 3px solid transparent !important;
  background: #1a0820;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.lobby-tile .tile-bg {
  z-index: 0;
}
.lobby-tile.has-full-tile-art .tile-bg {
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  filter: blur(10px) saturate(1.12) brightness(.82);
  transform: scale(1.08);
}
.lobby-tile.has-full-tile-art .tile-decor,
.lobby-tile.has-full-tile-art .tile-info {
  display: none !important;
}
.lobby-tile.has-full-tile-art .tile-mascot-art {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none !important;
  z-index: 3;
  filter: none;
}
.lobby-tile.has-full-tile-art .tile-mascot-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.lobby-tile.has-full-tile-art:hover .tile-mascot-art {
  transform: none !important;
}
.lobby-tile.has-full-tile-art .tile-shine {
  opacity: .25;
}
.lobby-tile .tile-mascot { display: none !important; } /* old emoji mascot - hide */
.lobby-tile .tile-mascot-art {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 130px;
  z-index: 3;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.7));
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.3);
}
.lobby-tile .tile-mascot-art svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lobby-tile:hover .tile-mascot-art {
  transform: translateX(-50%) translateY(-6px) scale(1.06);
}
.lobby-tile .tile-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  background-size: 200% 200%;
  background-position: 100% 100%;
  pointer-events: none;
  transition: background-position .8s ease;
}
.lobby-tile:hover .tile-shine {
  background-position: 0% 0%;
}

.lobby-tile .tile-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
  margin-top: 0 !important;
  padding: 36px 12px 10px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.65) 30%, rgba(0,0,0,.95) 100%);
  text-align: center;
}
.lobby-tile .tile-info strong {
  font-family: "Impact", "Arial Black", sans-serif !important;
  font-size: 1.35rem !important;
  letter-spacing: .06em;
  background: linear-gradient(180deg, var(--tile-accent, #ffd76b), var(--tile-accent, #ff5630) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.9));
  text-shadow: none !important;
}
.lobby-tile .tile-info span {
  font-size: .68rem !important;
  letter-spacing: .03em;
  color: rgba(255,255,255,.8) !important;
  margin: 4px 0 6px !important;
}
.lobby-tile .tile-info small {
  font-size: .55rem !important;
  letter-spacing: .12em !important;
  padding: 3px 8px !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.15);
}

.lobby-tile .tile-play {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px !important;
  font-size: .65rem !important;
  background: linear-gradient(135deg, var(--tile-accent, #52ef9f), color-mix(in srgb, var(--tile-accent, #52ef9f) 60%, #000));
  color: #042412 !important;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 14px var(--tile-accent, rgba(82, 239, 159, .6));
  top: 12px !important;
  right: 12px !important;
}
.play-icon { font-size: .7rem; }

.tile-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .15em;
  font-family: "Impact", "Arial Black", sans-serif;
  border: 2px solid #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  animation: badge-shine 2s ease-in-out infinite;
}
.badge-featured {
  background: linear-gradient(135deg, #ff5630, #d4002a);
  color: #fff;
  box-shadow: 0 0 14px rgba(255, 86, 48, .9);
}
.badge-new {
  background: linear-gradient(135deg, #52ef9f, #1a6e3e);
  color: #fff;
  box-shadow: 0 0 14px rgba(82, 239, 159, .9);
}
.badge-hot {
  background: linear-gradient(135deg, #ffd76b, #b8830a);
  color: #1a0d06;
  box-shadow: 0 0 14px rgba(255, 215, 107, .9);
}
.badge-maintenance {
  background: linear-gradient(135deg, #d9dee7, #687386);
  color: #111827;
  box-shadow: 0 0 14px rgba(217, 222, 231, .5);
}
.lobby-tile.is-maintenance {
  filter: grayscale(.55);
  opacity: .72;
}
.lobby-tile.is-maintenance .tile-play {
  background: linear-gradient(135deg, #d9dee7, #687386);
  color: #111827 !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.lobby-tile.is-maintenance .tile-mascot-art {
  opacity: .58;
}
@keyframes badge-shine {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Add subtle scene-specific atmospherics for lobby tiles */
.lobby-tile.theme-buffalo .tile-bg {
  background:
    radial-gradient(ellipse 90% 50% at 50% 20%, rgba(255, 255, 200, .35), transparent 70%),
    linear-gradient(180deg, #5fb8ff 0%, #ffb070 50%, #6a3a18 100%);
}
.lobby-tile.theme-kingkong .tile-bg {
  background:
    radial-gradient(ellipse at top, rgba(255, 150, 90, .4), transparent 60%),
    linear-gradient(180deg, #2a1430 0%, #5a2030 50%, #7b1818 100%);
}
.lobby-tile.theme-kingkong .tile-bg::after {
  content: "";
  position: absolute; bottom: 30%; left: 0; right: 0; height: 35%;
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(100,80,60,.7) 12px 18px);
  pointer-events: none;
}
.lobby-tile.theme-triple777 .tile-bg {
  background:
    radial-gradient(circle at center, #ff4d6d 0%, #d4002a 40%, #5a0017 100%);
}
.lobby-tile.theme-blackjack .tile-bg {
  background:
    radial-gradient(ellipse at center, #2dd55b 0%, #1a8a30 30%, #042412 80%);
}
.lobby-tile.theme-gorilla .tile-bg {
  background:
    radial-gradient(ellipse at top, rgba(255, 220, 120, .25), transparent 70%),
    linear-gradient(180deg, #3a5a18 0%, #1a3a10 100%);
}
.lobby-tile.theme-wolf .tile-bg {
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 245, 200, .8), transparent 30%),
    linear-gradient(180deg, #0a1830 0%, #2a4a7a 60%, #5a7aaa 100%);
}
.lobby-tile.theme-bull .tile-bg {
  background:
    linear-gradient(180deg, #ffce6a 0%, #c87a32 60%, #5a3a18 100%);
}
.lobby-tile.theme-dragon .tile-bg {
  background:
    radial-gradient(ellipse at center, #ffd76b 0%, #ff2540 25%, #5a0010 80%);
}
.lobby-tile.theme-mammoth .tile-bg {
  background:
    linear-gradient(180deg, #c8ecfa 0%, #6acef0 50%, #2a4a7a 100%);
}
.lobby-tile.theme-pharaoh .tile-bg {
  background:
    radial-gradient(ellipse at top, rgba(255, 245, 180, .6), transparent 60%),
    linear-gradient(180deg, #f5c876 0%, #c87a32 60%, #5a3a18 100%);
}
.lobby-tile.theme-ocean .tile-bg {
  background:
    linear-gradient(180deg, #00b4d8 0%, #007aa0 50%, #001a25 100%);
}
.lobby-tile.theme-vegas .tile-bg {
  background:
    linear-gradient(180deg, #1a0828 0%, #5a1854 40%, #ff5fe5 100%);
}

@media (max-width: 768px) {
  .lobby-tile { height: 220px !important; }
  .lobby-tile .tile-mascot-art { height: 100px; top: 10px; }
  .lobby-tile .tile-info strong { font-size: 1.1rem !important; }
  .lobby-tile .tile-info span { font-size: .6rem !important; }
  .tile-badge { font-size: .55rem; padding: 3px 7px; top: 8px; left: 8px; }
}
@media (max-width: 480px) {
  .lobby-tile { height: 190px !important; }
  .lobby-tile .tile-mascot-art { height: 80px; }
  .lobby-tile .tile-info strong { font-size: .95rem !important; }
}

/* Better lobby intro heading */
.lobby-intro h1 {
  font-size: 3rem !important;
  letter-spacing: .12em !important;
  text-shadow: 0 0 24px rgba(255, 215, 107, .8), 0 4px 0 rgba(90, 0, 17, .9) !important;
  animation: title-glow 3s ease-in-out infinite alternate;
}
@keyframes title-glow {
  0%   { filter: drop-shadow(0 2px 0 #5a0017) drop-shadow(0 0 12px #ffd76b); }
  100% { filter: drop-shadow(0 2px 0 #5a0017) drop-shadow(0 0 24px #ff5630); }
}
.lobby-intro p {
  font-size: 1rem !important;
  font-weight: 700 !important;
}
.lobby-intro .lobby-title-fallback {
  animation: none !important;
  text-shadow: none !important;
  filter: none !important;
}

@media (max-width: 768px) {
  body.slots-arcade-body.is-lobby-active,
  body.slots-arcade-body:has(.lobby-view:not(.hidden)) {
    background-image:
      linear-gradient(180deg, rgba(5, 0, 8, .2) 0%, rgba(5, 0, 8, .18) 38%, rgba(5, 0, 8, .74) 100%),
      image-set(
        url("assets/slots/south-diamond-lobby-bg-phone.webp?v=20260525-lobby-bg") type("image/webp"),
        url("assets/slots/south-diamond-lobby-bg-phone.jpg?v=20260525-lobby-bg") type("image/jpeg")
      );
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
  }

  .lobby-view {
    padding: 12px 10px;
  }

  .lobby-intro {
    margin-bottom: 14px;
  }

  .lobby-title-art {
    width: min(100%, calc(100vw - 20px));
    max-width: 100%;
    aspect-ratio: 2172 / 724;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32), 0 0 18px rgba(255, 154, 28, .16);
  }

  .lobby-title-art img {
    object-fit: contain;
    object-position: center center;
  }
}

@media (max-width: 420px) {
  .lobby-view {
    padding-inline: 8px;
  }

  .lobby-title-art {
    width: min(100%, calc(100vw - 16px));
    aspect-ratio: 2172 / 724;
    border-radius: 8px;
  }

  .lobby-title-art img {
    object-position: center center;
  }
}

/* Animated jackpot pulse on lobby */
.lobby-view::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 215, 107, .15), transparent 60%);
  z-index: -1;
  pointer-events: none;
  animation: ambient-glow 8s ease-in-out infinite alternate;
}
@keyframes ambient-glow {
  0%   { opacity: .5; }
  100% { opacity: 1; }
}

/* ============================================================
   v4: SMOOTH LANDING + PER-GAME SPIN EFFECTS + ANTICIPATION
   ============================================================ */

/* Remove the blur during spin - clearer scrolling symbols */
.reel.is-spinning .reel-cell .sym-cell { filter: none !important; }
.reel.is-spinning { filter: none !important; }

/* Subtle motion streaks during spin (overlay gradient) */
.reel.is-spinning::before {
  height: 35% !important;
  background: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.4) 70%, transparent);
}
.reel.is-spinning::after {
  height: 35% !important;
  background: linear-gradient(0deg, rgba(0,0,0,.95), rgba(0,0,0,.4) 70%, transparent);
}

/* Slow-finish glow on the last reel during anticipation */
.reel.slow-finish {
  box-shadow:
    inset 0 0 0 2px var(--accent, #ffd76b),
    0 0 30px var(--accent, #ffd76b);
  animation: slow-finish-pulse .35s ease-in-out infinite alternate;
}
@keyframes slow-finish-pulse {
  0%   { box-shadow: inset 0 0 0 2px var(--accent), 0 0 20px var(--accent); }
  100% { box-shadow: inset 0 0 0 3px #ffd76b, 0 0 50px #ff5630; }
}

/* Refined landing bounce */
.reel.just-landed .reel-track {
  animation: track-bounce-v2 420ms cubic-bezier(.36, -.5, .35, 1.5);
}
@keyframes track-bounce-v2 {
  0%   { transform: translateY(calc(-1 * var(--final-offset, 0px) - 12px)); }
  40%  { transform: translateY(calc(-1 * var(--final-offset, 0px) + 6px)); }
  70%  { transform: translateY(calc(-1 * var(--final-offset, 0px) - 3px)); }
  100% { transform: translateY(calc(-1 * var(--final-offset, 0px))); }
}

/* ===== Landing visual effects (per-game) ===== */
.landing-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  border-radius: inherit;
  overflow: hidden;
}

/* DUST (Buffalo) - brown puff at bottom */
.fx-dust {
  background:
    radial-gradient(ellipse 70% 30% at 50% 100%, rgba(180, 110, 60, .55), transparent 70%);
  animation: fx-dust-rise 500ms ease-out forwards;
}
@keyframes fx-dust-rise {
  0%   { opacity: 1; transform: scaleY(.4) translateY(0); }
  100% { opacity: 0; transform: scaleY(1.5) translateY(-30%); }
}

/* SHAKE (King Kong) - reel shakes briefly */
.reel.effect-shake { animation: fx-shake 280ms ease-out; }
@keyframes fx-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.fx-shake { display: none; }

/* FLASH (Triple 777) - white burst */
.fx-flash {
  background: radial-gradient(circle, rgba(255, 255, 255, .9), transparent 60%);
  animation: fx-flash-burst 380ms ease-out forwards;
}
@keyframes fx-flash-burst {
  0%   { opacity: 0; transform: scale(.2); }
  20%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* SMOKE (Black Jack) - greenish smoke */
.fx-smoke {
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(45, 213, 91, .5), transparent 70%);
  animation: fx-smoke-rise 500ms ease-out forwards;
}
@keyframes fx-smoke-rise {
  0%   { opacity: 1; transform: scaleY(.4); }
  100% { opacity: 0; transform: scaleY(1.5) translateY(-30%); }
}

/* DRUM (Gorilla) - radiating bounce */
.fx-drum {
  border: 4px solid rgba(255, 210, 0, .6);
  animation: fx-drum-pulse 350ms ease-out forwards;
}
@keyframes fx-drum-pulse {
  0%   { opacity: 1; transform: scale(.95); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* MIST (Gold Wolf) - cold blue mist */
.fx-mist {
  background:
    radial-gradient(ellipse 70% 100% at 50% 50%, rgba(149, 227, 255, .35), transparent 70%);
  animation: fx-mist-fade 600ms ease-out forwards;
}
@keyframes fx-mist-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* STREAK (Wild Bull) - speed lines */
.fx-streak {
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 217, 94, .35) 6px 8px);
  animation: fx-streak-fade 400ms ease-out forwards;
}
@keyframes fx-streak-fade {
  0%   { opacity: .85; }
  100% { opacity: 0; }
}

/* EMBERS (Dragon Empress) - red sparks */
.fx-embers {
  background:
    radial-gradient(circle at 30% 60%, rgba(255, 80, 30, .6), transparent 30%),
    radial-gradient(circle at 70% 50%, rgba(255, 215, 107, .6), transparent 30%),
    radial-gradient(circle at 50% 70%, rgba(255, 50, 30, .6), transparent 30%);
  animation: fx-embers-rise 500ms ease-out forwards;
}
@keyframes fx-embers-rise {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20%); }
}

/* STOMP (Mammoth) - heavy ground impact */
.fx-stomp {
  background:
    radial-gradient(ellipse 80% 25% at 50% 100%, rgba(150, 200, 220, .6), transparent 70%);
  animation: fx-stomp-impact 480ms ease-out forwards;
}
@keyframes fx-stomp-impact {
  0%   { opacity: 1; transform: scaleX(.5); }
  60%  { opacity: 1; transform: scaleX(1.4); }
  100% { opacity: 0; transform: scaleX(2); }
}

/* SAND (Pharaoh) - golden sand puff */
.fx-sand {
  background:
    radial-gradient(ellipse 70% 30% at 50% 100%, rgba(247, 192, 0, .55), transparent 70%);
  animation: fx-sand-puff 520ms ease-out forwards;
}
@keyframes fx-sand-puff {
  0%   { opacity: 1; transform: scaleY(.4); }
  100% { opacity: 0; transform: scaleY(1.6) translateY(-30%); }
}

/* WAVE (Ocean) - rippling blue */
.fx-wave {
  background:
    repeating-linear-gradient(180deg, rgba(0, 180, 216, .35) 0 6px, transparent 6px 14px);
  animation: fx-wave-flow 500ms ease-out forwards;
}
@keyframes fx-wave-flow {
  0%   { opacity: 1; transform: translateY(-100%); }
  100% { opacity: 0; transform: translateY(0); }
}

/* NEON (Vegas) - pink pulse */
.fx-neon {
  background: radial-gradient(circle, rgba(255, 95, 229, .7), transparent 70%);
  animation: fx-neon-flash 380ms ease-out forwards;
}
@keyframes fx-neon-flash {
  0%   { opacity: 0; transform: scale(.4); }
  40%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ============================================================
   ANTICIPATION OVERLAY
   ============================================================ */
.anticipation-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.anticipation-overlay.hidden { display: none; }

.ant-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, transparent 30%, rgba(0, 0, 0, .85) 100%);
  animation: vignette-fade 400ms ease-out;
}
@keyframes vignette-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.ant-rays {
  position: absolute;
  width: 240%;
  height: 240%;
  top: -70%;
  left: -70%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255, 215, 107, .35) 8deg,
      transparent 16deg,
      transparent 30deg,
      rgba(255, 215, 107, .35) 38deg,
      transparent 46deg,
      transparent 60deg,
      rgba(255, 215, 107, .35) 68deg,
      transparent 76deg,
      transparent 90deg,
      rgba(255, 215, 107, .35) 98deg,
      transparent 106deg,
      transparent 120deg,
      rgba(255, 215, 107, .35) 128deg,
      transparent 136deg,
      transparent 150deg,
      rgba(255, 215, 107, .35) 158deg,
      transparent 166deg,
      transparent 180deg,
      rgba(255, 215, 107, .35) 188deg,
      transparent 196deg,
      transparent 210deg,
      rgba(255, 215, 107, .35) 218deg,
      transparent 226deg,
      transparent 240deg,
      rgba(255, 215, 107, .35) 248deg,
      transparent 256deg,
      transparent 270deg,
      rgba(255, 215, 107, .35) 278deg,
      transparent 286deg,
      transparent 300deg,
      rgba(255, 215, 107, .35) 308deg,
      transparent 316deg,
      transparent 330deg,
      rgba(255, 215, 107, .35) 338deg,
      transparent 346deg,
      transparent 360deg
    );
  animation: rays-spin 6s linear infinite;
  filter: blur(.5px);
}
@keyframes rays-spin {
  to { transform: rotate(360deg); }
}

.anticipation-overlay[data-level="grand"] .ant-rays {
  filter: hue-rotate(-30deg) saturate(1.5) blur(1px);
}
.anticipation-overlay[data-level="major"] .ant-rays {
  filter: hue-rotate(50deg) saturate(1.3) blur(.5px);
}
.anticipation-overlay[data-level="minor"] .ant-rays {
  filter: hue-rotate(170deg) saturate(1.3) blur(.5px);
}
.anticipation-overlay[data-level="mini"] .ant-rays {
  filter: hue-rotate(280deg) saturate(1.3) blur(.5px);
}

.ant-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ant-sparkles span {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #fff, rgba(255, 215, 107, .8) 30%, transparent 70%);
  border-radius: 50%;
  animation: sparkle-fly 2.4s ease-out infinite;
}
.ant-sparkles span:nth-child(1)  { top: 10%; left: 15%; animation-delay: 0s; }
.ant-sparkles span:nth-child(2)  { top: 20%; left: 80%; animation-delay: .1s; }
.ant-sparkles span:nth-child(3)  { top: 75%; left: 25%; animation-delay: .2s; }
.ant-sparkles span:nth-child(4)  { top: 60%; left: 88%; animation-delay: .3s; }
.ant-sparkles span:nth-child(5)  { top: 30%; left: 50%; animation-delay: .4s; }
.ant-sparkles span:nth-child(6)  { top: 80%; left: 65%; animation-delay: .5s; }
.ant-sparkles span:nth-child(7)  { top: 15%; left: 35%; animation-delay: .6s; }
.ant-sparkles span:nth-child(8)  { top: 90%; left: 45%; animation-delay: .7s; }
.ant-sparkles span:nth-child(9)  { top: 45%; left: 10%; animation-delay: .8s; }
.ant-sparkles span:nth-child(10) { top: 55%; left: 92%; animation-delay: .9s; }
.ant-sparkles span:nth-child(11) { top: 5%;  left: 60%; animation-delay: 1.0s; }
.ant-sparkles span:nth-child(12) { top: 70%; left: 8%;  animation-delay: 1.1s; }
.ant-sparkles span:nth-child(13) { top: 35%; left: 72%; animation-delay: 1.2s; }
.ant-sparkles span:nth-child(14) { top: 85%; left: 18%; animation-delay: 1.3s; }
.ant-sparkles span:nth-child(15) { top: 25%; left: 6%;  animation-delay: 1.4s; }
.ant-sparkles span:nth-child(16) { top: 65%; left: 78%; animation-delay: 1.5s; }
.ant-sparkles span:nth-child(17) { top: 50%; left: 32%; animation-delay: 1.6s; }
.ant-sparkles span:nth-child(18) { top: 12%; left: 90%; animation-delay: 1.7s; }
.ant-sparkles span:nth-child(19) { top: 78%; left: 55%; animation-delay: 1.8s; }
.ant-sparkles span:nth-child(20) { top: 40%; left: 22%; animation-delay: 1.9s; }
@keyframes sparkle-fly {
  0%   { transform: scale(0) rotate(0); opacity: 0; }
  10%  { transform: scale(1.2) rotate(45deg); opacity: 1; }
  90%  { transform: scale(.6) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

.ant-content {
  position: relative;
  z-index: 5;
  text-align: center;
  animation: content-zoom 600ms cubic-bezier(.4, -.4, .3, 1.6);
}
@keyframes content-zoom {
  0%   { transform: scale(.2); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.ant-stars {
  font-size: 1.8rem;
  color: #ffd76b;
  letter-spacing: .25em;
  animation: stars-pulse .5s ease-in-out infinite alternate;
  text-shadow: 0 0 10px #ffd76b, 0 0 24px #ff5630;
  margin-bottom: 8px;
}
@keyframes stars-pulse {
  0%   { opacity: .6; transform: scale(.95); }
  100% { opacity: 1; transform: scale(1.05); }
}

.ant-text {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: clamp(1.6rem, 7vw, 3.6rem);
  font-weight: 900;
  letter-spacing: .12em;
  color: #fff;
  text-shadow:
    0 0 18px #ffd76b,
    0 0 40px #ff5630,
    0 0 80px #d4002a,
    0 4px 0 rgba(0, 0, 0, .9);
  animation: text-bounce .8s ease-in-out infinite alternate;
  padding: 8px 18px;
  background: linear-gradient(180deg, rgba(212, 0, 42, .35), rgba(90, 0, 17, .55));
  border: 3px solid #ffd76b;
  border-radius: 14px;
  box-shadow:
    inset 0 0 18px rgba(255, 215, 107, .3),
    0 0 30px rgba(255, 215, 107, .8);
}
@keyframes text-bounce {
  0%   { transform: scale(1) rotate(-1deg); }
  100% { transform: scale(1.05) rotate(1deg); }
}

.ant-subtext {
  margin-top: 8px;
  font-family: "Georgia", serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, .8);
  letter-spacing: .2em;
  animation: subtext-fade 1.2s ease-in-out infinite alternate;
}
@keyframes subtext-fade {
  0% { opacity: .5; }
  100% { opacity: 1; }
}

/* Tint anticipation overlay by jackpot level */
.anticipation-overlay[data-level="grand"] .ant-text { border-color: #ff5630; box-shadow: inset 0 0 18px rgba(255, 86, 48, .4), 0 0 40px rgba(255, 86, 48, .9); }
.anticipation-overlay[data-level="major"] .ant-text { border-color: #52ef9f; box-shadow: inset 0 0 18px rgba(82, 239, 159, .4), 0 0 40px rgba(82, 239, 159, .9); }
.anticipation-overlay[data-level="minor"] .ant-text { border-color: #7be8ff; box-shadow: inset 0 0 18px rgba(123, 232, 255, .4), 0 0 40px rgba(123, 232, 255, .9); }
.anticipation-overlay[data-level="mini"]  .ant-text { border-color: #ff5fe5; box-shadow: inset 0 0 18px rgba(255, 95, 229, .4), 0 0 40px rgba(255, 95, 229, .9); }

@media (max-width: 480px) {
  .ant-stars { font-size: 1.2rem; }
  .ant-text { font-size: 1.6rem; padding: 6px 12px; }
  .ant-subtext { font-size: .8rem; }
}

/* ============================================================
   v5: PAYTABLE MODAL + MAINTENANCE OVERLAY + REAL-IMAGE SUPPORT
   ============================================================ */

/* Paytable button in game logo bar */
.paytable-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .15em;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 215, 107, .25), rgba(255, 215, 107, .08));
  color: var(--accent2, #ffd76b);
  border: 1.5px solid var(--accent2, #ffd76b);
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 215, 107, .4);
  transition: all .15s ease;
}
.paytable-btn:hover {
  background: var(--accent2, #ffd76b);
  color: #1a0d06;
  box-shadow: 0 0 18px rgba(255, 215, 107, .8);
}
.paytable-btn span {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent2, #ffd76b);
  color: #1a0d06;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: .9rem;
}
.paytable-btn:hover span {
  background: #1a0d06;
  color: var(--accent2, #ffd76b);
}

/* Paytable modal */
.paytable-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 20px;
}
.paytable-modal.hidden { display: none; }
.ptm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.ptm-card {
  position: relative;
  width: min(720px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, #1a0820 0%, #07020a 100%);
  border: 3px solid var(--accent, #ffd76b);
  box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 40px var(--accent, rgba(255, 215, 107, .4));
  color: #fff;
}
.ptm-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d4002a, #5a0017);
  color: #fff;
  border: 2px solid #fff;
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.ptm-card h2 {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 1.6rem;
  letter-spacing: .08em;
  color: var(--accent2, #ffd76b);
  text-shadow: 0 2px 0 rgba(0,0,0,.7), 0 0 12px var(--accent, rgba(255, 215, 107, .6));
  margin-bottom: 4px;
}
.ptm-game-info {
  font-size: .9rem;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 14px;
  letter-spacing: .02em;
}
.ptm-symbols-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.ptm-symbol-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(255, 215, 107, .15);
}
.ptm-symbol-row.is-wild {
  background: linear-gradient(135deg, rgba(255, 215, 107, .25), rgba(255, 215, 107, .05));
  border-color: #ffd76b;
  box-shadow: inset 0 0 16px rgba(255, 215, 107, .2);
}
.ptm-symbol-row.is-scatter {
  background: linear-gradient(135deg, rgba(255, 95, 229, .25), rgba(255, 95, 229, .05));
  border-color: #ff5fe5;
  box-shadow: inset 0 0 16px rgba(255, 95, 229, .2);
}
.ptm-sym-icon {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.5);
  border-radius: 10px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.ptm-sym-icon svg { width: 48px; height: 48px; }
.ptm-symbol-img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: auto;
}
.ptm-sym-icon .pt-emoji { font-size: 2.4rem; line-height: 1; }
.ptm-sym-label strong {
  display: block;
  font-family: "Georgia", serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--accent2, #ffd76b);
  letter-spacing: .03em;
}
.ptm-tier {
  display: inline-block;
  padding: 2px 8px;
  margin-top: 2px;
  font-size: .65rem;
  letter-spacing: .15em;
  border-radius: 999px;
  background: var(--accent, #ffd76b);
  color: #1a0d06;
  font-weight: 900;
}
.ptm-payouts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}
.ptm-payouts span {
  display: inline-block;
  padding: 2px 8px;
  font-family: "Courier New", monospace;
  font-size: .8rem;
  background: rgba(0,0,0,.4);
  border-radius: 4px;
  color: #fff;
  min-width: 80px;
  text-align: right;
}
.ptm-payouts span b {
  display: inline-block;
  margin-right: 8px;
  color: var(--accent2, #ffd76b);
  font-size: .7rem;
}
.ptm-rules {
  padding: 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255, 255, 255, .08);
}
.ptm-rules h3 {
  font-family: "Georgia", serif;
  color: var(--accent2, #ffd76b);
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.ptm-rules ul {
  list-style: none;
  padding: 0; margin: 0;
}
.ptm-rules li {
  padding: 4px 0 4px 20px;
  font-size: .85rem;
  color: rgba(255, 255, 255, .85);
  position: relative;
}
.ptm-rules li::before {
  content: "♦";
  position: absolute;
  left: 0;
  color: var(--accent, #ffd76b);
}

@media (max-width: 600px) {
  .ptm-card { padding: 14px; }
  .ptm-card h2 { font-size: 1.2rem; }
  .ptm-symbol-row { grid-template-columns: 44px 1fr auto; gap: 8px; padding: 8px; }
  .ptm-sym-icon { width: 44px; height: 44px; }
  .ptm-sym-icon svg { width: 38px; height: 38px; }
  .ptm-sym-icon .pt-emoji { font-size: 1.8rem; }
  .ptm-payouts span { font-size: .7rem; min-width: 60px; padding: 1px 6px; }
}

/* Maintenance overlay */
.maintenance-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(6px);
}
.maintenance-overlay.hidden { display: none; }
.maint-card {
  padding: 32px;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(180deg, #1a0820, #07020a);
  border: 3px solid #ff5630;
  box-shadow: 0 0 30px rgba(255, 86, 48, .6);
  max-width: 90%;
}
.maint-icon { font-size: 4rem; margin-bottom: 8px; }
.maint-card h2 {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 1.6rem;
  color: #ff5630;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.maint-card p {
  font-size: .9rem;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 16px;
}

/* Real-image support */
.game-view.has-real-bg {
  background-image: var(--game-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
}
.game-view.has-real-bg::before,
.game-view.has-real-bg .game-decor { opacity: .3; }

/* ============================================================
   v6: 12 NEW GAME THEMES (Lucky Panda through Lucky Charms)
   ============================================================ */

/* ----- LUCKY PANDA 88 - Asian fortune ----- */
.game-view.scene-panda {
  background:
    radial-gradient(ellipse at top, rgba(255, 210, 0, .35), transparent 60%),
    linear-gradient(180deg, #e8222e 0%, #8b0017 50%, #2a0005 100%);
}
.game-view.scene-panda::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle 40px at 15% 25%, rgba(255, 210, 0, .35), transparent 70%),
    radial-gradient(circle 35px at 85% 30%, rgba(255, 210, 0, .35), transparent 70%),
    radial-gradient(circle 50px at 30% 75%, rgba(255, 210, 0, .25), transparent 70%);
  pointer-events: none;
}
.lobby-tile.theme-panda88 { --tile-accent: #e8222e; border-color: #ffd200; }
.lobby-tile.theme-panda88 .tile-bg {
  background:
    radial-gradient(ellipse at top, rgba(255, 210, 0, .4), transparent 60%),
    linear-gradient(180deg, #e8222e 0%, #5a0010 100%);
}
.fx-lantern {
  background:
    radial-gradient(circle 30px at 20% 60%, rgba(255, 210, 0, .7), transparent 70%),
    radial-gradient(circle 30px at 80% 60%, rgba(232, 34, 46, .7), transparent 70%);
  animation: fx-lantern-rise 500ms ease-out forwards;
}
@keyframes fx-lantern-rise {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40%); }
}

/* ----- LION'S PRIDE - Safari ----- */
.game-view.scene-savanna {
  background:
    radial-gradient(ellipse at top, rgba(255, 220, 120, .4), transparent 60%),
    linear-gradient(180deg, #f5c876 0%, #ce8838 50%, #6a3a18 100%);
}
.game-view.scene-savanna::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: 0;
  background:
    radial-gradient(ellipse 120px 70px at 15% 80%, #8b4a18, transparent 70%),
    radial-gradient(ellipse 180px 80px at 80% 75%, #6a3a08, transparent 70%);
  pointer-events: none;
}
.lobby-tile.theme-lion { --tile-accent: #ff7530; border-color: #ffce6a; }
.lobby-tile.theme-lion .tile-bg {
  background: linear-gradient(180deg, #ffce6a 0%, #ce8838 60%, #6a3a18 100%);
}
.fx-savannah {
  background:
    radial-gradient(ellipse 70% 30% at 50% 100%, rgba(255, 200, 100, .55), transparent 70%);
  animation: fx-dust-rise 500ms ease-out forwards;
}

/* ----- PIRATE'S TREASURE - Sea ----- */
.game-view.scene-pirate {
  background:
    radial-gradient(ellipse at top, rgba(184, 138, 58, .3), transparent 50%),
    linear-gradient(180deg, #2a2030 0%, #1a3a5a 40%, #082030 100%);
}
.game-view.scene-pirate::before {
  content: ""; position: absolute; inset: 50% 0 0 0; z-index: 0;
  background:
    repeating-linear-gradient(180deg, rgba(0, 50, 100, .3) 0 8px, transparent 8px 16px);
  pointer-events: none;
}
.lobby-tile.theme-pirate { --tile-accent: #b88a3a; border-color: #d4002a; }
.lobby-tile.theme-pirate .tile-bg {
  background: linear-gradient(180deg, #2a2030 0%, #1a3a5a 50%, #082030 100%);
}
.fx-splash {
  background:
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(123, 232, 255, .65), transparent 70%);
  animation: fx-stomp-impact 480ms ease-out forwards;
}

/* ----- ZEUS THUNDER - Olympus ----- */
.game-view.scene-olympus {
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, .35), transparent 60%),
    linear-gradient(180deg, #2dd6f5 0%, #4a78a8 50%, #1a3858 100%);
}
.game-view.scene-olympus::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle 80px at 20% 30%, rgba(255, 255, 255, .4), transparent 70%),
    radial-gradient(circle 100px at 75% 25%, rgba(255, 255, 255, .35), transparent 70%);
  pointer-events: none;
}
.lobby-tile.theme-zeus { --tile-accent: #2dd6f5; border-color: #ffd76b; }
.lobby-tile.theme-zeus .tile-bg {
  background: linear-gradient(180deg, #2dd6f5 0%, #4a78a8 60%, #1a3858 100%);
}
.fx-lightning {
  background:
    linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, .9) 50%, transparent 70%);
  animation: fx-flash-burst 380ms ease-out forwards;
}

/* ----- CLEOPATRA DIAMONDS - Egyptian queen ----- */
.game-view.scene-cleo {
  background:
    radial-gradient(ellipse at top, rgba(78, 197, 225, .35), transparent 60%),
    linear-gradient(180deg, #f7c000 0%, #c89000 50%, #6a5008 100%);
}
.lobby-tile.theme-cleopatra { --tile-accent: #ffd200; border-color: #4ec5e1; }
.lobby-tile.theme-cleopatra .tile-bg {
  background: linear-gradient(180deg, #ffd76b 0%, #c89000 60%, #4ec5e1 100%);
}
.fx-sandgold {
  background:
    radial-gradient(ellipse 70% 30% at 50% 100%, rgba(247, 192, 0, .55), transparent 70%);
  animation: fx-sand-puff 520ms ease-out forwards;
}

/* ----- FROZEN RICHES - Arctic ----- */
.game-view.scene-arctic {
  background:
    linear-gradient(180deg, #5dd0f5 0%, #b8e3f0 30%, #2a6e8a 100%);
}
.game-view.scene-arctic::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.7) 0, transparent 2px),
    radial-gradient(circle at 75% 15%, rgba(255,255,255,.5) 0, transparent 2px),
    radial-gradient(circle at 55% 60%, rgba(255,255,255,.6) 0, transparent 2px);
  background-size: 80px 80px;
  animation: snow-fall 25s linear infinite;
  pointer-events: none;
}
.lobby-tile.theme-arctic { --tile-accent: #5dd0f5; border-color: #c8e8ff; }
.lobby-tile.theme-arctic .tile-bg {
  background: linear-gradient(180deg, #c8e8ff 0%, #5dd0f5 60%, #2a6e8a 100%);
}
.fx-snow {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .7), transparent 5%),
    radial-gradient(circle at 70% 50%, rgba(255, 255, 255, .7), transparent 5%),
    radial-gradient(circle at 40% 70%, rgba(255, 255, 255, .7), transparent 5%);
  animation: fx-mist-fade 600ms ease-out forwards;
}

/* ----- GALAXY STARS - Deep space ----- */
.game-view.scene-galaxy {
  background:
    radial-gradient(ellipse at center, rgba(167, 139, 255, .3), transparent 60%),
    linear-gradient(180deg, #0a0628 0%, #2a0848 50%, #050010 100%);
}
.game-view.scene-galaxy::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,1) 0, transparent 2px),
    radial-gradient(circle at 45% 10%, rgba(255,255,255,.8) 0, transparent 1.5px),
    radial-gradient(circle at 78% 35%, rgba(255,255,255,1) 0, transparent 2px),
    radial-gradient(circle at 92% 60%, rgba(255,255,255,.6) 0, transparent 1.5px),
    radial-gradient(circle at 30% 75%, rgba(255,255,255,1) 0, transparent 2px),
    radial-gradient(circle at 8% 50%, rgba(255,255,255,.7) 0, transparent 1.5px);
  background-size: 200px 200px;
  pointer-events: none;
}
.lobby-tile.theme-galaxy { --tile-accent: #a78bff; border-color: #2dd6f5; }
.lobby-tile.theme-galaxy .tile-bg {
  background: linear-gradient(180deg, #0a0628 0%, #2a0848 50%, #050010 100%);
}
.fx-starburst {
  background:
    radial-gradient(circle at 50% 50%, rgba(167, 139, 255, .8), transparent 60%);
  animation: fx-neon-flash 420ms ease-out forwards;
}

/* ----- FRUIT MANIA - Bright classic ----- */
.game-view.scene-fruit {
  background:
    radial-gradient(ellipse at top, rgba(255, 244, 90, .35), transparent 60%),
    linear-gradient(180deg, #ff5630 0%, #d4002a 100%);
}
.lobby-tile.theme-fruit { --tile-accent: #ff5630; border-color: #fff45a; }
.lobby-tile.theme-fruit .tile-bg {
  background:
    radial-gradient(circle, #ff8aa0 0%, #ff5630 50%, #5a0010 100%);
}
.fx-fruitpop {
  background:
    radial-gradient(circle at 30% 50%, rgba(255, 86, 48, .6), transparent 30%),
    radial-gradient(circle at 70% 50%, rgba(255, 244, 90, .6), transparent 30%);
  animation: fx-neon-flash 400ms ease-out forwards;
}

/* ----- VIKING GLORY - Norse ----- */
.game-view.scene-viking {
  background:
    radial-gradient(ellipse at top, rgba(255, 215, 107, .25), transparent 50%),
    linear-gradient(180deg, #4682b4 0%, #2a4878 50%, #0a1830 100%);
}
.game-view.scene-viking::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(200, 230, 255, .25) 0, transparent 30px);
  pointer-events: none;
}
.lobby-tile.theme-viking { --tile-accent: #4682b4; border-color: #ffd76b; }
.lobby-tile.theme-viking .tile-bg {
  background: linear-gradient(180deg, #4682b4 0%, #2a4878 60%, #0a1830 100%);
}
.fx-axehit {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 215, 107, .4) 8px 10px);
  animation: fx-streak-fade 400ms ease-out forwards;
}

/* ----- AZTEC EMPIRE - Mayan ----- */
.game-view.scene-aztec {
  background:
    radial-gradient(ellipse at top, rgba(255, 210, 0, .3), transparent 60%),
    linear-gradient(180deg, #5a8a32 0%, #2a4810 50%, #0a1a05 100%);
}
.game-view.scene-aztec::before {
  content: ""; position: absolute; inset: 30% 0 0 0; z-index: 0;
  background:
    radial-gradient(ellipse 160px 100px at 18% 60%, #3a6e22, transparent 70%),
    radial-gradient(ellipse 200px 120px at 82% 65%, #3a6e22, transparent 70%);
  pointer-events: none;
}
.lobby-tile.theme-aztec { --tile-accent: #2dd55b; border-color: #ffd200; }
.lobby-tile.theme-aztec .tile-bg {
  background: linear-gradient(180deg, #5a8a32 0%, #2a4810 60%, #0a1a05 100%);
}
.fx-templefire {
  background:
    radial-gradient(circle at 30% 80%, rgba(255, 80, 30, .7), transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(255, 215, 0, .7), transparent 30%);
  animation: fx-embers-rise 500ms ease-out forwards;
}

/* ----- HALLOWEEN HUNT - Spooky ----- */
.game-view.scene-halloween {
  background:
    radial-gradient(ellipse at top, rgba(255, 248, 200, .25), transparent 50%),
    linear-gradient(180deg, #2a1838 0%, #5a2840 50%, #1a0810 100%);
}
.game-view.scene-halloween::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle at 80% 15%, rgba(255, 240, 180, .8) 0, transparent 40px);
  pointer-events: none;
}
.lobby-tile.theme-halloween { --tile-accent: #ff7530; border-color: #9c5cff; }
.lobby-tile.theme-halloween .tile-bg {
  background: linear-gradient(180deg, #2a1838 0%, #5a2840 60%, #1a0810 100%);
}
.fx-spook {
  background:
    radial-gradient(circle at 50% 50%, rgba(167, 139, 255, .5), transparent 60%);
  animation: fx-mist-fade 600ms ease-out forwards;
}

/* ----- LUCKY CHARMS - Irish ----- */
.game-view.scene-irish {
  background:
    radial-gradient(ellipse at top, rgba(255, 210, 0, .25), transparent 60%),
    linear-gradient(180deg, #52ef9f 0%, #2dd55b 40%, #0a4a1f 100%);
}
.game-view.scene-irish::before {
  content: ""; position: absolute; inset: 0 0 30% 0; z-index: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, .15) 16%, rgba(255, 165, 0, .15) 33%, rgba(255, 255, 0, .15) 50%, rgba(0, 255, 0, .15) 67%, rgba(0, 100, 255, .15) 83%, transparent 100%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
.lobby-tile.theme-irish { --tile-accent: #2dd55b; border-color: #ffd200; }
.lobby-tile.theme-irish .tile-bg {
  background: linear-gradient(180deg, #52ef9f 0%, #2dd55b 50%, #0a4a1f 100%);
}
.fx-rainbow {
  background:
    linear-gradient(135deg, rgba(255,0,0,.4), rgba(255,165,0,.4), rgba(255,255,0,.4), rgba(0,255,0,.4), rgba(0,100,255,.4));
  animation: fx-flash-burst 480ms ease-out forwards;
}

/* ============================================================
   Phone play fixes: readable points, jackpots, and controls
   ============================================================ */
body.is-pseudo-fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: auto;
  background: #0a0210;
}

body.is-pseudo-fullscreen .arcade-header {
  position: sticky;
  top: 0;
}

body.is-pseudo-fullscreen .game-view {
  min-height: calc(100dvh - 72px);
}

@media (max-width: 768px) {
  body.slots-arcade-body {
    min-height: 100dvh;
  }

  .arcade-header {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "brand balance balance balance"
      "home menu chat chat"
      "toggles toggles toggles toggles";
    align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px;
    gap: 8px;
  }

  .arcade-brand {
    grid-area: brand;
    min-width: 0;
  }

  .arcade-home {
    grid-area: home;
  }

  .arcade-chat-home {
    grid-area: chat;
  }

  .arcade-menu-open {
    grid-area: menu;
  }

  .brand-mark {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
  }

  .brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
  }

  .arcade-balance {
    grid-area: balance;
    min-width: 108px;
    justify-self: end;
    padding: 6px 9px;
    border-radius: 9px;
  }

  .balance-label {
    letter-spacing: .14em;
  }

  .arcade-balance strong {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
  }

  .arcade-pill-button {
    min-height: 34px;
    padding: 6px 8px;
    font-size: .66rem;
  }

  .arcade-login-form {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .arcade-login-form input,
  .arcade-guest-name-form input,
  .arcade-chat-form input {
    min-height: 42px;
    font-size: 16px;
  }

  .arcade-guest-name-form {
    grid-template-columns: 1fr;
  }

  .arcade-toggles {
    grid-area: toggles;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .toggle-btn {
    min-height: 36px;
    padding: 6px 4px;
    font-size: .68rem;
    letter-spacing: 0;
  }

  .arcade-back:not(.hidden) {
    display: none;
  }

  .jackpot-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
  }

  .jp-panel {
    min-width: 0;
    padding: 5px;
    border-radius: 10px;
  }

  .jp-stars,
  .jp-bulbs {
    display: none;
  }

  .jp-label {
    margin: 0 0 3px;
    border-radius: 7px;
    font-size: .7rem;
    letter-spacing: .08em;
  }

  .jp-value {
    width: 100%;
    font-size: .88rem;
    padding: 4px 3px;
    letter-spacing: 0;
  }

  .game-view {
    min-height: calc(100dvh - 176px);
    padding: 6px 6px calc(env(safe-area-inset-bottom, 0px) + 8px);
  }

  .game-logo-bar {
    display: grid;
    grid-template-columns: 64px auto minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    margin: 2px auto 6px;
    padding: 6px 4px;
  }

  .mobile-lobby-btn {
    display: block;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f6c85f, #b8830a);
    color: #1a0d06;
    border: 2px solid #fff;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .05em;
    box-shadow: 0 3px 0 #5a3a00, 0 6px 12px rgba(0,0,0,.35);
  }

  .game-titles {
    min-width: 0;
  }

  .game-titles strong,
  .game-titles span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .paytable-btn {
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: .62rem;
    letter-spacing: .02em;
  }

  .play-area {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
    align-items: start;
    align-content: start;
    flex: 0 0 auto;
    max-width: 520px;
  }

  .reels-shell {
    grid-column: 1 / -1;
    order: 2;
    width: 100%;
  }

  .paytable {
    order: 1;
    min-width: 0;
  }

  .paytable-list {
    gap: 2px;
    padding: 4px;
    border-radius: 10px;
  }

  .pt-row {
    grid-template-columns: 22px 1fr;
    min-height: 26px;
  }

  .reels-frame {
    --cell-base: clamp(50px, 15.5vw, 68px);
    max-width: min(100%, 390px);
    margin: 0 auto;
    padding: 6px;
  }

  .reel-strip {
    gap: 3px !important;
  }

  .win-msg-bar {
    width: 100%;
    margin: 6px auto;
    padding: 7px 9px;
    border-radius: 10px;
  }

  .win-msg-bar span {
    display: block;
    font-size: .82rem;
    letter-spacing: .04em;
    line-height: 1.2;
  }

  .controls-bar {
    grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
    width: 100%;
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
  }

  .bet-row {
    gap: 4px;
    padding: 4px 5px;
  }

  .bet-row span {
    min-width: 42px;
  }

  .spin-btn {
    width: 76px;
    height: 76px;
  }

  .aux-controls {
    width: 100%;
  }

  .aux-controls button {
    min-height: 33px;
    padding: 5px 6px;
    letter-spacing: .06em;
  }
}

@media (max-width: 420px) {
  .arcade-header {
    padding-left: 8px;
    padding-right: 8px;
  }

  .arcade-balance {
    min-width: 98px;
  }

  .arcade-balance strong {
    max-width: 86px;
    font-size: .9rem;
  }

  .arcade-pill-button {
    width: 100%;
    padding-inline: 5px;
  }

  .jackpot-strip {
    padding: 6px;
    gap: 5px;
  }

  .jp-label {
    font-size: .62rem;
  }

  .jp-value {
    font-size: .76rem;
  }

  .game-logo-bar {
    grid-template-columns: 56px auto minmax(0, 1fr) 68px;
  }

  .mobile-lobby-btn {
    min-height: 34px;
    padding: 5px 4px;
    font-size: .58rem;
  }

  .game-mascot {
    font-size: 1.7rem;
  }

  .game-titles strong {
    font-size: 1rem;
  }

  .game-titles span {
    font-size: .62rem;
  }

  .paytable-btn {
    font-size: .54rem;
    padding: 5px 4px;
  }

  .play-area {
    gap: 4px;
  }

  .pt-row {
    grid-template-columns: 18px 1fr;
    min-height: 22px;
  }

  .pt-icon svg {
    width: 16px;
    height: 16px;
  }

  .pt-emoji {
    font-size: .86rem;
  }

  .pt-value {
    font-size: .58rem;
    padding-right: 1px;
  }

  .reels-frame {
    --cell-base: clamp(44px, 14.4vw, 56px);
    padding: 5px;
    border-width: 2px;
    border-radius: 12px;
  }

  .sym-cell.sym-emoji .sym-inner {
    font-size: 1.15rem;
  }

  .controls-bar {
    grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
    padding: 6px;
  }

  .spin-btn {
    width: 68px;
    height: 68px;
    font-size: .78rem;
    border-width: 4px;
  }

  .ctrl-label,
  .bet-meta {
    font-size: .55rem;
    letter-spacing: .08em;
  }

  .bet-row button {
    width: 25px;
    height: 25px;
  }
}

@media (max-height: 740px) and (max-width: 480px) {
  .game-view {
    padding-top: 4px;
  }

  .game-logo-bar {
    margin-bottom: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .win-msg-bar {
    margin: 4px auto;
  }
}

/* =========================================================================
   South Diamond — branded reel cell frame.
   This is a thin overlay applied on top of every reel cell to give all 24
   arcade games a unified South Diamond look without replacing the per-game
   symbol artwork. WILD and SCATTER cells get a slightly stronger glow.
   ========================================================================= */
.reel .reel-cell::after {
  /* Replace the original subtle ::after with the South Diamond frame.
     Same selector, more specific styling. */
  background: linear-gradient(
    180deg,
    rgba(247, 201, 72, 0.06),
    rgba(247, 201, 72, 0.01) 50%,
    rgba(214, 51, 132, 0.04)
  );
  border: 1px solid rgba(247, 201, 72, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 6px rgba(247, 201, 72, 0.12);
}

/* Slightly brighter frame on the landing flash so winning rows still pop. */
.reel.just-landed .reel-cell::after {
  border-color: rgba(247, 201, 72, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 16px rgba(247, 201, 72, 0.4);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

/* WILD symbol gets a slightly stronger glow on every game, regardless of artwork.
   Targets any image whose filename is wild.png (works across all 24 game folders). */
.reel .reel-cell img[src*="/wild.png"],
.pt-symbol-img[src*="/wild.png"],
.ptm-symbol-img[src*="/wild.png"] {
  filter: drop-shadow(0 0 6px rgba(247, 201, 72, 0.45));
}
/* BONUS/SCATTER same idea — soft pink-gold glow. */
.reel .reel-cell img[src*="/bonus.png"],
.pt-symbol-img[src*="/bonus.png"],
.ptm-symbol-img[src*="/bonus.png"] {
  filter: drop-shadow(0 0 6px rgba(214, 51, 132, 0.45));
}

/* ============================================================
   ADVANCED ENGINE: Free-spin counter badge
   ============================================================ */
.free-spin-badge {
  position: absolute;
  top: 86px;
  right: 16px;
  z-index: 38;
  min-width: 132px;
  padding: 10px 14px 12px;
  border-radius: 14px;
  background: linear-gradient(160deg, #4a0a72 0%, #150028 100%);
  border: 2px solid #ffd76b;
  box-shadow: 0 6px 28px rgba(255, 215, 107, 0.25), inset 0 0 16px rgba(255, 95, 229, 0.18);
  color: #fff8cd;
  font-family: "Impact", "Arial Black", sans-serif;
  text-align: center;
  animation: fsbPulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
.free-spin-badge.hidden { display: none; }
.free-spin-badge .fsb-title {
  font-size: 13px;
  letter-spacing: 2px;
  color: #ffd76b;
  text-shadow: 0 0 8px rgba(255, 215, 107, 0.6);
}
.free-spin-badge .fsb-count {
  font-size: 42px;
  line-height: 1;
  margin: 4px 0 2px;
  color: #fff;
  text-shadow: 0 0 14px rgba(255, 95, 229, 0.8), 0 2px 6px rgba(0,0,0,0.45);
}
.free-spin-badge .fsb-meta {
  font-family: "Arial", sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: #ffe8c2;
  opacity: 0.85;
}
@keyframes fsbPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 28px rgba(255, 215, 107, 0.25), inset 0 0 16px rgba(255, 95, 229, 0.18); }
  50%      { transform: scale(1.04); box-shadow: 0 8px 36px rgba(255, 215, 107, 0.45), inset 0 0 22px rgba(255, 95, 229, 0.35); }
}
@media (max-width: 720px) {
  .free-spin-badge { top: 70px; right: 10px; min-width: 108px; padding: 8px 10px 10px; }
  .free-spin-badge .fsb-count { font-size: 32px; }
}