/* ================================================================
   Dragon89 — Reference Design System
   Matching gorjessbbyx3/JadeRoyale.webapp
   Deep Purple · Royal Gold · Neon Accents
   Applies to ALL screen sizes (portrait + landscape + desktop)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  --jr-bg:      #050208;
  --jr-bg2:     #0A0514;
  --jr-bg3:     #150A28;
  --jr-gold:    #D4AF37;
  --jr-gold-lt: #FFD700;
  --jr-green:   #00FF87;
  --jr-purple:  #A020F0;
  --jr-blue:    #0099FF;
  --jr-pink:    #FF1493;
  --jr-red:     #FF3366;
  --jr-orange:  #FF6B35;
  --jr-sidebar: 72px;
  --jr-header:  52px;
  --jr-cat-h:   38px;
  --jr-card-w:  160px;
  --jr-card-h:  110px;
  --jr-gap:     10px;
}

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes jrFloatOrb {
  0%,100% { transform: translateY(0) scale(1); }
  33%     { transform: translateY(-20px) scale(1.08); }
  66%     { transform: translateY(10px) scale(0.94); }
}
@keyframes jrNeonPulse {
  0%,100% {
    filter: brightness(1.05)
      drop-shadow(0 0 10px rgba(255,130,200,0.55))
      drop-shadow(0 0 25px rgba(255,80,180,0.3));
  }
  50% {
    filter: brightness(1.2)
      drop-shadow(0 0 18px rgba(255,150,220,0.85))
      drop-shadow(0 0 40px rgba(255,80,180,0.5));
  }
}
@keyframes jrFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes jrSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── GLOBAL — show jr-app at ALL sizes, hide legacy layouts ──── */
html, body {
  background: var(--jr-bg) !important;
  overflow: hidden !important;
}

/* Show mobile layout div as the universal layout */
.mobile-casino-layout {
  display: flex !important;
}

/* Hide all legacy page elements — the jr-app covers the full viewport */
.desktop-navbar,
.carcass__body,
.carcass__footer,
.top-winners-bar,
.ng-scope > .mobile-slider,
footer {
  display: none !important;
}

/* Kill debugbar completely */
#phpdebugbar,
#phpdebugbar-toggler,
.phpdebugbar-indicator,
phpdebugbar,
[class*="phpdebugbar"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* ── APP SHELL ───────────────────────────────────────────────── */
.jr-app {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--jr-bg) !important;
  font-family: 'Inter', sans-serif !important;
  color: #fff !important;
  z-index: 9000 !important;
}

/* ── ANIMATED BACKGROUND ─────────────────────────────────────── */
.jr-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg,
    #050208 0%,
    #0A0514 30%,
    #150A28 70%,
    #0A0514 100%);
}
.jr-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.jr-orb--1 {
  right: 10%; top: 20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(160,32,240,0.12) 0%, transparent 70%);
  filter: blur(50px);
  opacity: 0.5;
  animation: jrFloatOrb 8s ease-in-out infinite alternate;
}
.jr-orb--2 {
  left: 15%; bottom: 15%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,153,255,0.10) 0%, transparent 70%);
  filter: blur(35px);
  opacity: 0.45;
  animation: jrFloatOrb 10s ease-in-out 2s infinite alternate;
}
.jr-orb--3 {
  right: 30%; bottom: 35%;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(0,255,135,0.07) 0%, transparent 70%);
  filter: blur(28px);
  opacity: 0.4;
  animation: jrFloatOrb 12s ease-in-out 1s infinite alternate;
}
.jr-orb--4 {
  left: 40%; top: 8%;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,20,147,0.08) 0%, transparent 70%);
  filter: blur(22px);
  opacity: 0.4;
  animation: jrFloatOrb 9s ease-in-out 3s infinite alternate;
}

/* ── LAYOUT ──────────────────────────────────────────────────── */
.jr-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.jr-sidebar {
  width: var(--jr-sidebar);
  min-width: var(--jr-sidebar);
  height: 100%;
  background: linear-gradient(180deg,
    rgba(15,5,30,0.98) 0%,
    rgba(25,10,50,0.95) 50%,
    rgba(15,5,30,0.98) 100%);
  border-right: 1px solid rgba(212,175,55,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
}
.jr-sidebar::-webkit-scrollbar { width: 0; }

.jr-sidebar__btn {
  width: 56px;
  height: 56px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.jr-sidebar__btn:hover,
.jr-sidebar__btn:active {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
}

/* Active states — per category color */
.jr-sidebar__btn[data-cat="hot"].active {
  color: #FF6B35;
  background: rgba(255,107,53,0.14);
  border-color: rgba(255,107,53,0.45);
  box-shadow: 0 0 14px rgba(255,107,53,0.3);
}
.jr-sidebar__btn[data-cat="favorites"].active {
  color: #FF1493;
  background: rgba(255,20,147,0.14);
  border-color: rgba(255,20,147,0.45);
  box-shadow: 0 0 14px rgba(255,20,147,0.3);
}
.jr-sidebar__btn[data-cat="slots"].active {
  color: #FFD700;
  background: rgba(255,215,0,0.12);
  border-color: rgba(255,215,0,0.45);
  box-shadow: 0 0 14px rgba(255,215,0,0.3);
}
.jr-sidebar__btn[data-cat="fish"].active {
  color: #0099FF;
  background: rgba(0,153,255,0.14);
  border-color: rgba(0,153,255,0.45);
  box-shadow: 0 0 14px rgba(0,153,255,0.3);
}
.jr-sidebar__btn[data-cat="table"].active {
  color: #A020F0;
  background: rgba(160,32,240,0.14);
  border-color: rgba(160,32,240,0.45);
  box-shadow: 0 0 14px rgba(160,32,240,0.3);
}

.jr-sidebar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: filter 0.2s ease;
}
.jr-sidebar__btn.active .jr-sidebar__icon {
  filter: drop-shadow(0 0 5px currentColor);
}
.jr-sidebar__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
}

/* ── CONTENT ─────────────────────────────────────────────────── */
.jr-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── HEADER ──────────────────────────────────────────────────── */
.jr-header {
  height: var(--jr-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: rgba(5,2,8,0.88);
  border-bottom: 1px solid rgba(212,175,55,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  flex-shrink: 0;
  gap: 10px;
  z-index: 10;
  position: relative;
}

.jr-header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.jr-logo-img {
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  mix-blend-mode: screen;
  animation: jrNeonPulse 3s ease-in-out infinite;
}

.jr-header__right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.jr-balance-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 10px;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--jr-gold);
  transition: all 0.15s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.jr-balance-pill:hover,
.jr-balance-pill:active {
  background: rgba(212,175,55,0.18);
  border-color: rgba(212,175,55,0.5);
}
.jr-balance-pill span {
  font-size: 13px;
  font-weight: 700;
  color: var(--jr-gold-lt);
}
.jr-balance-pill svg.jr-refresh-ico {
  opacity: 0.7;
  flex-shrink: 0;
}
.jr-balance-pill.refreshing .jr-refresh-ico {
  animation: jrSpin 0.7s linear infinite;
}

.jr-action-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.jr-action-btn:hover,
.jr-action-btn:active {
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 8px rgba(255,255,255,0.12);
}

.jr-login-btn {
  background: linear-gradient(135deg, #D4AF37, #B8860B);
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  color: #000;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 0 14px rgba(212,175,55,0.4);
  transition: all 0.15s ease;
  font-family: 'Orbitron', sans-serif;
  white-space: nowrap;
}
.jr-login-btn:hover {
  box-shadow: 0 0 22px rgba(212,175,55,0.6);
  transform: translateY(-1px);
}

/* ── CATEGORY BAR ────────────────────────────────────────────── */
.jr-cat-bar {
  height: var(--jr-cat-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 12px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.jr-cat-bar__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--jr-gold);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.jr-cat-bar__count {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.jr-cat-bar__arrows {
  margin-left: auto;
  display: flex;
  gap: 5px;
}
.jr-cat-bar__arrows button {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  padding: 0;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.jr-cat-bar__arrows button:hover,
.jr-cat-bar__arrows button:active {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}

/* ── CAROUSEL ────────────────────────────────────────────────── */
.jr-carousel {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: var(--jr-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--jr-gap) var(--jr-gap) var(--jr-gap) var(--jr-gap);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
}
.jr-carousel::-webkit-scrollbar { height: 3px; }
.jr-carousel::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.jr-carousel::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.3);
  border-radius: 2px;
}

.jr-col {
  display: flex;
  flex-direction: column;
  gap: var(--jr-gap);
  flex-shrink: 0;
  animation: jrFadeIn 0.25s ease forwards;
}

/* ── GAME CARD ───────────────────────────────────────────────── */
.jr-card__inner {
  position: relative;
  width: var(--jr-card-w);
  height: var(--jr-card-h);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: all 0.2s ease;
  background: #150A28;
  -webkit-tap-highlight-color: transparent;
}
.jr-card__inner:hover,
.jr-card__inner:active {
  border-color: rgba(212,175,55,0.6);
  box-shadow: 0 0 20px rgba(212,175,55,0.3), 0 8px 24px rgba(0,0,0,0.5);
  transform: scale(1.03);
}
.jr-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jr-card__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  pointer-events: none;
}
.jr-card__title {
  position: absolute;
  bottom: 6px; left: 8px; right: 26px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.2;
}
.jr-card__fav {
  position: absolute;
  top: 5px; right: 5px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.jr-card__fav:hover,
.jr-card__fav:active {
  background: rgba(0,0,0,0.78);
  transform: scale(1.2);
}
.jr-card__badge {
  position: absolute;
  top: 5px; left: 5px;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 8px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}
.jr-card__badge--hot    { background: linear-gradient(135deg, #FF6B35, #FF3366); }
.jr-card__badge--new    { background: linear-gradient(135deg, #00FF87, #0099FF); }
.jr-card__badge--vip    { background: linear-gradient(135deg, #D4AF37, #B8860B); }
.jr-card__badge--jackpot { background: linear-gradient(135deg, #A020F0, #5B00A8); }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.jr-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  padding: 40px 20px;
}
.jr-empty p {
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

/* ── PHONE PORTRAIT — 2-row grid, bottom nav (Game Vault style) ─ */
@media (orientation: portrait) and (max-width: 799px) {
  :root {
    --jr-header:  48px;
    --jr-cat-h:   34px;
    --jr-card-w:  clamp(120px, calc((100vw - 20px) / 2.6), 160px);
    --jr-card-h:  clamp(90px,  calc((100svh - 174px) / 2), 180px);
    --jr-gap:     9px;
  }
  /* Bottom nav replaces sidebar in portrait */
  .jr-sidebar    { display: none !important; }
  .jr-bottom-nav { display: flex !important; }

  /* Game Vault style card frames */
  .jr-card__inner {
    border: 1.5px solid rgba(80,160,255,0.55);
    box-shadow:
      0 0 10px rgba(60,130,255,0.3),
      inset 0 0 12px rgba(0,80,200,0.1);
    border-radius: 10px;
  }
  .jr-card__inner:hover,
  .jr-card__inner:active {
    border-color: rgba(160,80,255,0.8);
    box-shadow:
      0 0 18px rgba(120,80,255,0.5),
      inset 0 0 12px rgba(80,40,200,0.15);
  }
  .jr-card__title { font-size: 10px; }
}

/* ── TABLET / DESKTOP — sidebar stays, larger cards ─────────── */
@media (min-width: 800px) {
  :root {
    --jr-sidebar: 80px;
    --jr-header:  58px;
    --jr-card-w:  175px;
    --jr-card-h:  118px;
    --jr-gap:     12px;
  }
  .jr-sidebar__btn {
    width: 62px;
    height: 62px;
    min-height: 62px;
    border-radius: 14px;
  }
  .jr-sidebar__icon { width: 22px; height: 22px; }
  .jr-sidebar__label { font-size: 10px; }
  .jr-logo-img { height: 42px; max-width: 220px; }
  .jr-action-btn { width: 34px; height: 34px; border-radius: 10px; }
  .jr-header__right { gap: 8px; }
  .jr-cat-bar__title { font-size: 13px; }
  .jr-bottom-nav { display: none !important; }
}

/* ── WIDE DESKTOP ────────────────────────────────────────────── */
@media (min-width: 1100px) {
  :root {
    --jr-sidebar: 88px;
    --jr-header:  62px;
    --jr-card-w:  185px;
    --jr-card-h:  125px;
    --jr-gap:     14px;
  }
  .jr-sidebar__btn { width: 68px; height: 68px; min-height: 68px; }
  .jr-logo-img { height: 46px; max-width: 260px; }
  .jr-balance-pill span { font-size: 14px; }
  .jr-card__title { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   PROMO SLIDESHOW
   Sits between the header and the bonus strip. Two image sets per
   slide (desktop wide + mobile square) — CSS shows the right set
   based on viewport. Default: desktop image. Mobile-landscape: mobile.
   ═══════════════════════════════════════════════════════════════ */
.jr-slider {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  background: #000;
  overflow: hidden;
  /* Default desktop / portrait: aspect ratio of the wide slider gifs (~1310x380 ≈ 3.45:1) */
  aspect-ratio: 3.45 / 1;
  max-height: 320px;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}
.jr-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}
.jr-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.jr-slider__slide--active {
  opacity: 1;
  pointer-events: auto;
}
.jr-slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Default: show desktop image, hide mobile image */
.jr-slider__img--mobile  { display: none; }
.jr-slider__img--desktop { display: block; }
.jr-slider__img--tall    { display: none; }

/* Nav arrows */
.jr-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.jr-slider__nav:hover { background: rgba(212,175,55,0.85); color: #1A0828; transform: translateY(-50%) scale(1.06); }
.jr-slider__nav--prev { left: 12px; }
.jr-slider__nav--next { right: 12px; }

/* Dots */
.jr-slider__dots {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 2;
}
.jr-slider__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.25s ease, background 0.25s ease;
}
.jr-slider__dot--active {
  width: 22px;
  border-radius: 5px;
  background: linear-gradient(90deg, #D4AF37, #FFD700);
  box-shadow: 0 0 8px rgba(212,175,55,0.6);
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP / TABLET LANDSCAPE — Netflix-style horizontal carousel
   Applies to ANY landscape viewport that's tall enough to NOT be a
   phone (≥501px tall). Sidebar stays, slider stays at the top, but
   the games render as compact 16:10 thumbnails in TWO stacked rows
   that scroll horizontally — true Netflix style.
   ═══════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (min-height: 501px) {
  :root {
    --jr-card-w: 220px;          /* Netflix-style thumbnail width */
    --jr-card-h: 138px;          /* 16:10 aspect ratio */
    --jr-gap:    12px;
  }

  /* Trim the slider on landscape desktop so 2 rows of Netflix thumbnails
     fit on screen without scrolling. (Portrait keeps the full-size slider.) */
  .jr-slider { max-height: 200px; aspect-ratio: 4.2 / 1; }

  /* Tighten the bonus strip + jackpot tiles for landscape — gives the
     carousel ~70 more pixels of breathing room. */
  .jr-bonus-strip   { padding: 4px 14px !important; gap: 14px !important; }
  .jr-bonus-icon__circle { width: 36px !important; height: 36px !important; }
  .jr-bonus-icon__circle svg { width: 18px !important; height: 18px !important; }
  .jr-bonus-icon__lbl    { font-size: 9px !important; margin-top: 2px !important; }
  .jr-jackpots      { padding: 4px 14px !important; gap: 8px !important; }
  .jr-jackpots > *  { padding: 4px 8px !important; }

  /* Carousel: pure horizontal scroll, top-aligned so cards keep their
     fixed Netflix-thumbnail size instead of stretching to fill height. */
  .jr-carousel {
    padding: 10px 14px !important;
    align-items: flex-start !important;
    gap: 12px !important;
    scroll-snap-type: x mandatory;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  /* Each .jr-col holds 2 stacked thumbnails for that column */
  .jr-col {
    gap: 12px !important;
    flex-direction: column;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  /* Lock card dimensions — no stretching, no aspect-ratio override */
  .jr-card,
  .jr-card__inner {
    width:  220px !important;
    height: 138px !important;
    aspect-ratio: auto !important;
    border-radius: 10px !important;
    flex-shrink: 0;
  }
  .jr-card__title  { font-size: 12px; bottom: 6px; left: 8px; right: 28px; }
  .jr-card__fav    { width: 22px; height: 22px; top: 6px; right: 6px; }
  .jr-card__badge  { font-size: 9px; padding: 2px 6px; }
}

/* ── PHONE LANDSCAPE — Netflix-style horizontal carousel ──────────
   Phone in landscape is short (≤500px tall) and wide (~700-900px).
   Layout: compact header → tall left slider strip → games carousel
   on the right, slim bottom-nav at the floor. Every pixel is precious. */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --jr-header:    40px;          /* tighter header in landscape */
    --jr-cat-h:     26px;
    --jr-sidebar:   0px;           /* sidebar suppressed (see rule below) */
    --jr-card-w:    140px;         /* fixed Netflix thumbnail width */
    --jr-card-h:    86px;          /* ~16:10 thumbnail */
    --jr-gap:       8px;
    --jr-strip-w:   148px;         /* slider strip width */
    --jr-strip-pad: 156px;         /* slider width + 8px gutter */
  }

  /* Kill the doubled safe-area padding — bottom-nav handles it on its own */
  .jr-app { padding-bottom: 0 !important; }

  /* Sidebar OUT, slim bottom-nav IN — frees full width for the carousel */
  .jr-sidebar    { display: none !important; }
  .jr-bottom-nav { display: flex !important; }

  /* ── HEADER — sleek, balanced ─────────────────────────────── */
  .jr-header {
    padding: 0 12px;
    gap: 8px;
    height: var(--jr-header);
    min-height: var(--jr-header);
  }
  .jr-logo-img    { height: 24px; max-width: 130px; }
  .jr-action-btn  { width: 30px; height: 30px; min-width: 30px; font-size: 12px; border-radius: 8px; }
  .jr-balance-pill {
    padding: 4px 10px;
    gap: 5px;
    border-radius: 100px;
    height: 28px;
  }
  .jr-balance-pill span { font-size: 11.5px; font-weight: 600; }

  /* ── CAT BAR — slim & integrated, sits to the RIGHT of slider ── */
  .jr-cat-bar {
    padding: 0 12px 0 var(--jr-strip-pad) !important;
    height: var(--jr-cat-h);
    min-height: var(--jr-cat-h);
  }
  .jr-cat-bar__title {
    font-size: 11px;
    letter-spacing: 1.4px;
    font-weight: 700;
  }
  .jr-cat-bar__count {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 100px;
  }
  .jr-cat-bar__arrows { gap: 4px; }
  .jr-cat-bar__arrow  { width: 22px; height: 22px; }

  /* ── CAROUSEL — horizontal scroll, two stacked rows ─────────── */
  .jr-carousel {
    padding: 6px 10px 8px !important;
    align-items: flex-start !important;
    gap: 8px !important;
    scroll-snap-type: x mandatory;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .jr-col {
    gap: 8px !important;
    flex-direction: column;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .jr-card,
  .jr-card__inner {
    width:  var(--jr-card-w) !important;
    height: var(--jr-card-h) !important;
    aspect-ratio: auto !important;
    border-radius: 9px !important;
    flex-shrink: 0;
  }
  .jr-card__title    { font-size: 10px; bottom: 4px; left: 6px; right: 22px; font-weight: 600; }
  .jr-card__fav      { width: 20px; height: 20px; top: 4px; right: 4px; }
  .jr-card__badge    { font-size: 7px; padding: 1px 5px; letter-spacing: 0.5px; }
  .jr-card__play-btn { font-size: 8.5px; padding: 5px 9px; letter-spacing: 0.6px; }
  /* Lock-overlay text trimmed — blur already signals "logged out" */
  .jr-app--guest .jr-card__inner::after { font-size: 7px; letter-spacing: 0.6px; }

  /* ── SLIDER STRIP — tall left column with gold gradient edge ── */
  .jr-content { position: relative; }

  .jr-slider {
    position: absolute;
    left: 0;
    top:    var(--jr-header);
    bottom: 0;
    width:  var(--jr-strip-w);
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: none;
    background: #07030f;
    z-index: 5;
    box-shadow:
      inset -1px 0 0 rgba(212,175,55,0.18),
      4px 0 14px rgba(0,0,0,0.45);
  }
  /* Soft inner top-shadow keeps the slider visually tied to the header */
  .jr-slider::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.55) 100%);
    z-index: 2;
  }
  /* Gold gradient edge — way more elegant than a flat hairline */
  .jr-slider::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(212,175,55,0.55) 18%,
      rgba(255,215,120,0.7) 50%,
      rgba(212,175,55,0.55) 82%,
      transparent 100%);
    pointer-events: none;
    z-index: 6;
  }

  /* Tall portrait gifs (~9:16) fit the vertical strip natively */
  .jr-slider__img--desktop { display: none; }
  .jr-slider__img--mobile  { display: none; }
  .jr-slider__img--tall    { display: block; }
  .jr-slider__img          { object-fit: cover; }

  /* Compact controls for the narrow vertical strip */
  .jr-slider__nav {
    width: 26px; height: 26px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(212,175,55,0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .jr-slider__nav--prev { left: 5px; }
  .jr-slider__nav--next { right: 5px; }
  .jr-slider__dots { bottom: 8px; gap: 5px; z-index: 4; }
  .jr-slider__dot {
    width: 5px; height: 5px;
    background: rgba(255,255,255,0.35);
    border-radius: 100px;
    transition: width 0.3s ease, background 0.3s ease;
  }
  .jr-slider__dot--active {
    width: 16px;
    background: linear-gradient(90deg, #d4af37, #ffd770);
    box-shadow: 0 0 8px rgba(212,175,55,0.6);
  }

  /* Push the rest of the content to the right of the slider strip */
  .jr-bonus-strip,
  .jr-carousel-wrap { padding-left: var(--jr-strip-pad) !important; }

  /* The bonus strip is too tall to keep alongside a tall slider on
     a ~400px-tall phone. Hide it in landscape — the bonus modal is
     still reachable from the bottom-nav. */
  .jr-bonus-strip { display: none !important; }

  /* The decorative top-line of the carousel tray would extend
     under the slider strip and look broken — start it at the
     gutter instead. */
  .jr-carousel-wrap::before { left: var(--jr-strip-pad); }

  /* ── TICKER — slim, sits to the right of the slider ─────────── */
  .jr-ticker {
    height: 22px;
    min-height: 22px;
    padding-left: var(--jr-strip-pad);
  }
  .jr-ticker__prefix { font-size: 10px; padding: 0 5px 0 6px; }
  .jr-ticker__inner  { font-size: 9.5px; letter-spacing: 0.3px; }
  .jr-ticker__live   { font-size: 8.5px; padding: 0 6px; }
}

/* ── BOTTOM NAV component (phone landscape) ──────────────────── */
.jr-bottom-nav {
  display: none;
  height: 54px;
  min-height: 54px;
  flex-shrink: 0;
  flex-direction: row;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(8,3,22,0.98) 0%, rgba(14,5,32,0.99) 100%);
  border-top: 1px solid rgba(140,60,240,0.4);
  box-shadow: 0 -6px 24px rgba(120,40,220,0.2);
  padding: 0 6px;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  z-index: 20;
}

.jr-bnav__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.38);
  padding: 5px 3px;
  border-radius: 10px;
  transition: all 0.18s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.jr-bnav__btn:active { opacity: 0.7; }

/* Lit-up active pill — glows from behind like Game Vault */
.jr-bnav__btn.active {
  color: #fff;
}
.jr-bnav__btn.active::before {
  content: '';
  position: absolute;
  inset: 3px 6px;
  border-radius: 8px;
  z-index: -1;
  background: linear-gradient(135deg, rgba(160,32,240,0.75), rgba(255,20,147,0.6));
  box-shadow: 0 0 14px rgba(160,32,240,0.55);
}
.jr-bnav__btn[data-cat="hot"].active::before {
  background: linear-gradient(135deg, rgba(255,107,53,0.8), rgba(255,51,102,0.65));
  box-shadow: 0 0 14px rgba(255,107,53,0.5);
}
.jr-bnav__btn[data-cat="favorites"].active::before {
  background: linear-gradient(135deg, rgba(255,20,147,0.8), rgba(160,32,240,0.65));
  box-shadow: 0 0 14px rgba(255,20,147,0.5);
}
.jr-bnav__btn[data-cat="slots"].active::before {
  background: linear-gradient(135deg, rgba(180,140,20,0.8), rgba(255,200,0,0.5));
  box-shadow: 0 0 14px rgba(212,175,55,0.45);
}
.jr-bnav__btn[data-cat="fish"].active::before {
  background: linear-gradient(135deg, rgba(0,130,255,0.8), rgba(0,220,120,0.55));
  box-shadow: 0 0 14px rgba(0,153,255,0.5);
}
.jr-bnav__btn[data-cat="table"].active::before {
  background: linear-gradient(135deg, rgba(130,20,220,0.8), rgba(0,130,255,0.55));
  box-shadow: 0 0 14px rgba(130,20,220,0.5);
}

.jr-bnav__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: filter 0.18s ease;
}
.jr-bnav__btn.active .jr-bnav__icon {
  filter: drop-shadow(0 0 4px currentColor);
}
.jr-bnav__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
}

/* ── PULL-DOWN FULLSCREEN INDICATOR ─────────────────────────── */
.jr-pull-indicator-DEPRECATED-UNUSED {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: rgba(212,175,55,0.35);
  border-radius: 0 0 6px 6px;
  transition: all 0.22s ease;
  pointer-events: none;
  z-index: 99998;
}
/* While actively dragging, kill the transition so the bar tracks the finger */
.jr-pull-indicator.jr-pull-active { transition: none; }
.jr-pull-indicator.pulling {
  background: linear-gradient(90deg, #D4AF37, #FFD700, #D4AF37);
  box-shadow: 0 0 14px rgba(255,215,0,0.7), 0 0 28px rgba(212,175,55,0.4);
}
.jr-pull-ripple {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 0;
  background: linear-gradient(180deg, rgba(212,175,55,0.22) 0%, rgba(255,61,172,0.08) 60%, transparent 100%);
  pointer-events: none;
  z-index: 99997;
  transition: height 0.08s ease;
}

/* Block native pull-to-refresh so our gesture wins */
html, body { overscroll-behavior-y: contain; }

/* ── CAROUSEL TRAY — frames the game grid ───────────────────── */
.jr-carousel-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(10,5,20,0.55) 0%, rgba(4,1,10,0.82) 100%);
  position: relative;
}
.jr-carousel-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.14) 40%, rgba(212,175,55,0.14) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── WIN TICKER STRIP ───────────────────────────────────────── */
.jr-ticker {
  height: 24px;
  min-height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(212,175,55,0.05);
  border-bottom: 1px solid rgba(212,175,55,0.09);
  position: relative;
  z-index: 2;
}
.jr-ticker__prefix {
  font-size: 11px;
  padding: 0 6px 0 8px;
  flex-shrink: 0;
  color: rgba(212,175,55,0.55);
  line-height: 1;
}
.jr-ticker__track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.jr-ticker__inner {
  display: inline-block;
  animation: jrTickerScroll 34s linear infinite;
  font-size: 10px;
  font-weight: 600;
  color: rgba(212,175,55,0.58);
  letter-spacing: 0.2px;
}
@keyframes jrTickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── CAT-BAR — per-category neon color theming ──────────────── */
.jr-cat-bar { transition: border-bottom-color 0.22s ease; }

.jr-cat-bar[data-cat="hot"]       { border-bottom-color: rgba(255,107,53,0.4); }
.jr-cat-bar[data-cat="slots"]     { border-bottom-color: rgba(255,215,0,0.38); }
.jr-cat-bar[data-cat="fish"]      { border-bottom-color: rgba(0,153,255,0.4);  }
.jr-cat-bar[data-cat="table"]     { border-bottom-color: rgba(160,32,240,0.4); }
.jr-cat-bar[data-cat="favorites"] { border-bottom-color: rgba(255,20,147,0.4); }

.jr-cat-bar[data-cat="hot"]       .jr-cat-bar__title { color: #FF6B35; text-shadow: 0 0 14px rgba(255,107,53,0.55); }
.jr-cat-bar[data-cat="slots"]     .jr-cat-bar__title { color: #FFD700; text-shadow: 0 0 14px rgba(255,215,0,0.55);  }
.jr-cat-bar[data-cat="fish"]      .jr-cat-bar__title { color: #0099FF; text-shadow: 0 0 14px rgba(0,153,255,0.55);  }
.jr-cat-bar[data-cat="table"]     .jr-cat-bar__title { color: #A020F0; text-shadow: 0 0 14px rgba(160,32,240,0.55); }
.jr-cat-bar[data-cat="favorites"] .jr-cat-bar__title { color: #FF1493; text-shadow: 0 0 14px rgba(255,20,147,0.55); }

.jr-cat-bar[data-cat="hot"]       .jr-cat-bar__count { background: rgba(255,107,53,0.15); color: rgba(255,107,53,0.85); }
.jr-cat-bar[data-cat="slots"]     .jr-cat-bar__count { background: rgba(255,215,0,0.12);  color: rgba(255,215,0,0.85);  }
.jr-cat-bar[data-cat="fish"]      .jr-cat-bar__count { background: rgba(0,153,255,0.15);  color: rgba(0,153,255,0.85);  }
.jr-cat-bar[data-cat="table"]     .jr-cat-bar__count { background: rgba(160,32,240,0.15); color: rgba(160,32,240,0.85); }
.jr-cat-bar[data-cat="favorites"] .jr-cat-bar__count { background: rgba(255,20,147,0.15); color: rgba(255,20,147,0.85); }

/* ── CAROUSEL CROSSFADE ON CAT SWITCH ───────────────────────── */
@keyframes jrCatFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.jr-carousel.jr-fading  { opacity: 0; transition: opacity 0.09s ease; pointer-events: none; }
.jr-carousel.jr-showing { animation: jrCatFadeIn 0.2s ease forwards; }

/* ── COUNT BADGE on nav + sidebar buttons ───────────────────── */
.jr-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 13px;
  padding: 0 4px;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 800;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.45);
  line-height: 1;
  letter-spacing: 0;
  transition: all 0.15s ease;
}
.jr-sidebar__btn.active .jr-count-badge,
.jr-bnav__btn.active .jr-count-badge {
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
}

/* ── GUEST SHIMMER PILL ─────────────────────────────────────── */
.jr-guest-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid rgba(212,175,55,0.22);
  background: linear-gradient(90deg,
    rgba(212,175,55,0.05) 0%,
    rgba(212,175,55,0.13) 50%,
    rgba(212,175,55,0.05) 100%);
  background-size: 200% 100%;
  animation: jrGuestShimmer 2.8s ease-in-out infinite;
  color: rgba(212,175,55,0.55);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
@keyframes jrGuestShimmer {
  0%,100% { background-position: 200% 0; }
  50%     { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════
   10X UPGRADE — JACKPOT BANNER, PLAY OVERLAY, SCROLL BAR, EFFECTS
   ═══════════════════════════════════════════════════════════════ */

/* ── LIVE JACKPOT BANNER ───────────────────────────────────────── */
.jr-jackpots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 12px 0;
  margin: 0;
}
.jr-jackpot {
  position: relative;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(20,8,38,0.9), rgba(40,15,70,0.7));
  border: 1px solid rgba(212,175,55,0.25);
  overflow: hidden;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.4);
}
.jr-jackpot__label {
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 2px;
}
.jr-jackpot__amt {
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  font-weight: 900;
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255,215,0,0.6), 0 0 20px rgba(255,215,0,0.3);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
}
.jr-jackpot--mini  .jr-jackpot__amt { color: #FFB347; text-shadow: 0 0 10px rgba(255,179,71,0.6); }
.jr-jackpot--mini  { border-color: rgba(255,179,71,0.3); }
.jr-jackpot--major .jr-jackpot__amt { color: #FFD700; text-shadow: 0 0 12px rgba(255,215,0,0.7); }
.jr-jackpot--major { border-color: rgba(255,215,0,0.4); }
.jr-jackpot--mega  .jr-jackpot__amt {
  color: #FF3DAC;
  text-shadow: 0 0 14px rgba(255,61,172,0.8), 0 0 28px rgba(255,61,172,0.4);
  font-size: 20px;
}
.jr-jackpot--mega {
  border-color: rgba(255,61,172,0.5);
  background: linear-gradient(135deg, rgba(40,8,50,0.95), rgba(80,15,90,0.8));
}
.jr-jackpot__pulse {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,215,0,0.15), transparent 60%);
  animation: jrJackpotPulse 3s ease-in-out infinite;
  pointer-events: none;
}
.jr-jackpot--mega .jr-jackpot__pulse { background: radial-gradient(circle at 50% 50%, rgba(255,61,172,0.2), transparent 60%); }
@keyframes jrJackpotPulse { 0%,100% { opacity: 0.4; transform: scale(0.95);} 50% { opacity: 1; transform: scale(1.05);} }
.jr-jackpot__amt.jr-jp-tick { animation: jrJpTick 0.18s ease; }
@keyframes jrJpTick { 0%{ transform: translateY(0);} 50%{ transform: translateY(-2px); filter: brightness(1.4);} 100%{ transform: translateY(0);} }

/* ── LIVE indicator on ticker ──────────────────────────────────── */
.jr-ticker__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #FF4D6D;
  padding: 0 10px 0 6px;
}
.jr-ticker__livedot {
  width: 6px; height: 6px;
  background: #FF4D6D;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255,77,109,0.9);
  animation: jrLiveBlink 1.2s ease-in-out infinite;
}
@keyframes jrLiveBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── CARD PLAY OVERLAY (slide-up on hover) ─────────────────────── */
.jr-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(20,8,38,0.4) 0%, rgba(20,8,38,0.85) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1;
}
.jr-card__inner:hover .jr-card__play { opacity: 1; }
.jr-card__play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #D4AF37, #FFD700);
  color: #1A0828;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  box-shadow: 0 0 18px rgba(255,215,0,0.6), 0 4px 14px rgba(0,0,0,0.5);
  transform: translateY(8px) scale(0.92);
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1.4);
}
.jr-card__inner:hover .jr-card__play-btn { transform: translateY(0) scale(1); }

/* ── BADGE PULSE ───────────────────────────────────────────────── */
.jr-card__badge--hot { animation: jrBadgePulseHot 2s ease-in-out infinite; }
.jr-card__badge--new { animation: jrBadgePulseNew 2s ease-in-out infinite; }
@keyframes jrBadgePulseHot { 0%,100% { box-shadow: 0 0 0 rgba(255,107,53,0); } 50% { box-shadow: 0 0 12px rgba(255,107,53,0.8); } }
@keyframes jrBadgePulseNew { 0%,100% { box-shadow: 0 0 0 rgba(0,255,135,0);  } 50% { box-shadow: 0 0 12px rgba(0,255,135,0.8); } }

/* ── SCROLL PROGRESS ───────────────────────────────────────────── */
.jr-scroll-progress {
  height: 2px;
  background: rgba(255,255,255,0.05);
  margin: 6px 12px 0;
  border-radius: 2px;
  overflow: hidden;
}
.jr-scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #D4AF37, #FFD700, #FF3DAC);
  border-radius: 2px;
  transition: width 0.12s linear;
  box-shadow: 0 0 8px rgba(212,175,55,0.6);
}

/* ── CARD STAGGER ENTRANCE ─────────────────────────────────────── */
.jr-col { animation: jrColEnter 0.32s cubic-bezier(.2,.9,.3,1) backwards; }
@keyframes jrColEnter { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ── PER-CATEGORY CARD HOVER GLOW ──────────────────────────────── */
[data-cat="hot"]      .jr-card__inner:hover { border-color: rgba(255,107,53,0.7);  box-shadow: 0 0 22px rgba(255,107,53,0.45),  0 8px 24px rgba(0,0,0,0.5); }
[data-cat="favorites"].jr-card__inner:hover { border-color: rgba(255,61,172,0.7);  box-shadow: 0 0 22px rgba(255,61,172,0.45),  0 8px 24px rgba(0,0,0,0.5); }
[data-cat="slots"]    .jr-card__inner:hover { border-color: rgba(255,215,0,0.7);   box-shadow: 0 0 22px rgba(255,215,0,0.45),   0 8px 24px rgba(0,0,0,0.5); }
[data-cat="fish"]     .jr-card__inner:hover { border-color: rgba(64,196,255,0.75); box-shadow: 0 0 22px rgba(64,196,255,0.45),  0 8px 24px rgba(0,0,0,0.5); }
[data-cat="table"]    .jr-card__inner:hover { border-color: rgba(168,107,255,0.75);box-shadow: 0 0 22px rgba(168,107,255,0.45), 0 8px 24px rgba(0,0,0,0.5); }

/* ── COMPACT JACKPOTS ON SMALL SCREENS ─────────────────────────── */
@media (max-width: 600px) {
  .jr-jackpots { gap: 5px; padding: 6px 8px 0; }
  .jr-jackpot { padding: 5px 6px; border-radius: 7px; }
  .jr-jackpot__label { font-size: 7px; letter-spacing: 1px; }
  .jr-jackpot__amt { font-size: 13px; }
  .jr-jackpot--mega .jr-jackpot__amt { font-size: 14px; }
  .jr-card__play-btn { font-size: 9px; padding: 5px 10px; }
}
@media (orientation: landscape) and (max-width: 900px) {
  .jr-jackpots { padding: 4px 8px 0; gap: 4px; }
  .jr-jackpot { padding: 3px 6px; }
  .jr-jackpot__label { font-size: 6px; }
  .jr-jackpot__amt, .jr-jackpot--mega .jr-jackpot__amt { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT FIX — Portrait = vertical feed, Landscape = no sidebar
   ═══════════════════════════════════════════════════════════════ */

/* ── PORTRAIT PHONE: vertical scrolling 2-column grid ─────────── */
@media (orientation: portrait) and (max-width: 799px) {
  /* Carousel becomes a vertical grid */
  .jr-carousel {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: min-content !important;
    gap: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 10px 10px 14px !important;
    align-items: stretch !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  /* Columns dissolve so cards flow as direct grid items */
  .jr-col {
    display: contents !important;
    animation: none !important;
  }
  /* Cards fill column width, square-ish aspect */
  .jr-card,
  .jr-card__inner {
    width: 100% !important;
    height: auto !important;
  }
  .jr-card__inner {
    aspect-ratio: 1 / 1 !important;
  }
  /* Card titles get a touch larger since cards are bigger */
  .jr-card__title { font-size: 12px !important; }
  /* Horizontal arrows + horizontal progress bar don't apply */
  .jr-cat-bar__arrows { display: none !important; }
  .jr-scroll-progress { display: none !important; }
  /* Tray no longer needs its decorative inner border on a vertical scroller */
  .jr-carousel-wrap::before { display: none; }
  /* Jackpots stay compact */
  .jr-jackpots { gap: 6px; padding: 8px 10px 0; }
}

/* ── LANDSCAPE PHONE: slim bottom-nav, jackpots, badges ─────────
   Sized down for ≤540px viewport heights. Card width is governed
   by the more specific ≤500px block above; here we just ensure the
   nav, jackpots, and badges feel right when the slider strip is on. */
@media (orientation: landscape) and (max-height: 540px) {
  :root {
    --jr-sidebar: 0px !important;
  }
  /* Sidebar OUT — bottom nav IN (slim, premium glow) */
  .jr-sidebar    { display: none !important; }
  .jr-bottom-nav {
    display: flex !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 4px !important;
    padding-bottom: 0 !important;       /* safe-area handled by .jr-app */
  }
  .jr-bnav__btn   { padding: 4px 3px !important; gap: 2px !important; border-radius: 8px !important; }
  .jr-bnav__icon  { width: 17px !important; height: 17px !important; }
  .jr-bnav__label { font-size: 8.5px !important; letter-spacing: 0.5px !important; }
  /* Lit-up active pill — keep the glow but tighten the inset */
  .jr-bnav__btn.active::before { inset: 3px 4px !important; border-radius: 7px !important; }
  /* Slim jackpots — recover vertical space */
  .jr-jackpots { padding: 4px 8px 0 !important; gap: 5px !important; }
  .jr-jackpot { padding: 3px 8px !important; border-radius: 7px !important; }
  .jr-jackpot__label { font-size: 7px !important; letter-spacing: 1px !important; margin-bottom: 0 !important; }
  .jr-jackpot__amt,
  .jr-jackpot--mega .jr-jackpot__amt { font-size: 12px !important; }
  /* Compact bnav badges so they fit at 40px */
  .jr-bnav__btn .jr-nav-badge {
    top: 2px !important; right: 4px !important;
    min-width: 14px !important; height: 14px !important;
    font-size: 8px !important; padding: 0 3px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BONUS ICONS STRIP + PORTRAIT MULTI-SECTION FEED
   ═══════════════════════════════════════════════════════════════ */

/* ── Bonus icons strip — sits above cat-bar ──────────────────── */
.jr-bonus-strip {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(20,8,38,0.4), rgba(20,8,38,0));
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.jr-bonus-strip::-webkit-scrollbar { display: none; }
.jr-bonus-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease;
}
.jr-bonus-icon:active { transform: scale(0.92); }
.jr-bonus-icon__circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.12);
  position: relative;
  animation: jrBonusFloat 3.4s ease-in-out infinite;
}
.jr-bonus-icon:nth-child(2) .jr-bonus-icon__circle { animation-delay: 0.4s; }
.jr-bonus-icon:nth-child(3) .jr-bonus-icon__circle { animation-delay: 0.8s; }
.jr-bonus-icon:nth-child(4) .jr-bonus-icon__circle { animation-delay: 1.2s; }
.jr-bonus-icon:nth-child(5) .jr-bonus-icon__circle { animation-delay: 1.6s; }
@keyframes jrBonusFloat {
  0%,100% { transform: translateY(0); box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18); }
  50%     { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.22); }
}
.jr-bonus-icon__lbl {
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.7);
}

/* ── Portrait stacked sections ─────────────────────────────────── */
.jr-section {
  margin: 0 0 14px;
  padding: 0;
}
.jr-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 8px;
}
.jr-section__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--jr-gold);
  text-shadow: 0 0 10px rgba(212,175,55,0.4);
}
.jr-section__count {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.07);
  padding: 2px 8px;
  border-radius: 10px;
}
.jr-section__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.jr-section__empty {
  grid-column: 1 / -1;
  padding: 20px;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  font-size: 12px;
}
/* Color tints per section */
.jr-section--hot       .jr-section__title { color: #FF6B35; text-shadow: 0 0 12px rgba(255,107,53,0.5); }
.jr-section--favorites .jr-section__title { color: #FF3DAC; text-shadow: 0 0 12px rgba(255,61,172,0.5); }
.jr-section--slots     .jr-section__title { color: #FFD700; text-shadow: 0 0 12px rgba(255,215,0,0.5); }
.jr-section--fish      .jr-section__title { color: #40C4FF; text-shadow: 0 0 12px rgba(64,196,255,0.5); }
.jr-section--table     .jr-section__title { color: #A86BFF; text-shadow: 0 0 12px rgba(168,107,255,0.5); }

/* When the carousel is in portrait section mode, override layout */
.jr-carousel.jr-portrait-mode {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 12px 14px !important;
}
.jr-carousel.jr-portrait-mode .jr-section__grid .jr-card,
.jr-carousel.jr-portrait-mode .jr-section__grid .jr-card__inner {
  width: 100% !important;
  height: auto !important;
}
.jr-carousel.jr-portrait-mode .jr-section__grid .jr-card__inner {
  aspect-ratio: 1 / 1 !important;
}

/* In portrait, hide the single cat-bar (sections have their own headers) */
@media (orientation: portrait) and (max-width: 799px) {
  .jr-cat-bar { display: none !important; }
  .jr-bonus-strip { padding: 6px 10px; }
  .jr-bonus-icon__circle { width: 40px; height: 40px; }
  .jr-bonus-icon__lbl { font-size: 7px; }
}

/* ── Landscape: slim bonus strip + ENFORCE no-sidebar ──────────── */
@media (orientation: landscape) and (max-height: 540px) {
  .jr-bonus-strip { padding: 3px 8px !important; gap: 8px; }
  .jr-bonus-icon__circle { width: 32px !important; height: 32px !important; }
  .jr-bonus-icon__circle svg { width: 16px !important; height: 16px !important; }
  .jr-bonus-icon__lbl { font-size: 6px !important; letter-spacing: 0.5px !important; }
}

/* HIGH-SPECIFICITY landscape override — wins over the older max-height:500px rule */
@media (orientation: landscape) and (max-height: 540px) {
  html body .jr-app .jr-sidebar { display: none !important; }
  html body .jr-app .jr-bottom-nav { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════════
   GUEST MODE: blurred game cards + login gate toast
   ═══════════════════════════════════════════════════════════════ */
.jr-app--guest .jr-card__img {
  filter: blur(6px) saturate(0.7) brightness(0.55);
  transition: filter 0.25s ease;
}
.jr-app--guest .jr-card__inner::after {
  content: "🔒 LOG IN TO PLAY";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #FFD700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 14px rgba(255,215,0,0.5);
  background: linear-gradient(180deg, rgba(20,8,38,0.45), rgba(20,8,38,0.7));
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}
/* Hide game names for guests — the actual catalog is shop-specific, so the
   names a logged-out visitor would see do not necessarily reflect what they'll
   get after signing in to their assigned shop. Avoid leaking misleading titles. */
.jr-app--guest .jr-card__title,
.jr-app--guest .netflix-game-card__title { display: none !important; }

/* Same reasoning for the per-category counters next to "Hot Games", "Slots", etc.
   and the small numeric badges on the side/bottom nav (Hot 17, Slots 32, etc.). */
.jr-app--guest .jr-count-badge,
.jr-app--guest .jr-cat-bar__count,
.jr-app--guest #jrCatCount { display: none !important; }

.jr-app--guest .jr-card__play  { display: none !important; }

/* Login gate toast */
.jr-login-gate {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(20px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1.2), opacity 0.25s ease;
  max-width: calc(100vw - 24px);
}
.jr-login-gate.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.jr-login-gate__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  background: linear-gradient(135deg, rgba(40,12,68,0.96), rgba(20,8,38,0.96));
  border: 1.5px solid rgba(212,175,55,0.5);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 30px rgba(212,175,55,0.25);
  backdrop-filter: blur(12px);
}
.jr-login-gate__icon { font-size: 22px; }
.jr-login-gate__msg {
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  flex: 1;
  min-width: 0;
}
.jr-login-gate__btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #D4AF37, #FFD700);
  color: #1A0828;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(212,175,55,0.5);
  white-space: nowrap;
}
.jr-login-gate__btn:active { transform: scale(0.96); }
.jr-login-gate__close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   STACKED SECTIONS — RESPONSIVE GRID FOR ALL VIEWPORTS
   ═══════════════════════════════════════════════════════════════ */

/* Desktop / tablet: auto-fill multi-column grid (cards ~190px wide) */
@media (min-width: 800px) {
  .jr-section__grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 14px !important;
  }
  .jr-section { margin: 0 0 22px !important; }
  .jr-section__title { font-size: 16px !important; letter-spacing: 1.6px !important; }
  .jr-section__count { font-size: 11px !important; padding: 3px 10px !important; }
  .jr-section__head { padding: 10px 6px 12px !important; }

  /* Hide the cat-bar on desktop too — each section now owns its header */
  .jr-cat-bar { display: none !important; }

  /* Carousel becomes a vertical scroll container with stacked sections */
  .jr-carousel.jr-portrait-mode {
    padding: 12px 18px 24px !important;
  }
  .jr-carousel.jr-portrait-mode .jr-section__grid .jr-card,
  .jr-carousel.jr-portrait-mode .jr-section__grid .jr-card__inner {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
}

/* Tablet landscape between 600-900: 3-col grid feels best */
@media (min-width: 600px) and (max-width: 999px) {
  .jr-section__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Smooth-scroll the carousel itself when jumping to anchors */
.jr-carousel.jr-portrait-mode { scroll-behavior: smooth; }