/* TOTOSLOTJP — Slot catalog integration
   Read-only catalog UI. Uses the user's provider-slot-api Worker.
*/
body.slot-view{
  background:#000;
  min-height:100vh;
  padding-bottom:48px;
}
body.slot-view .jp-hero,
body.slot-view .jp-results-strip,
body.slot-view .coupon-widget,
body.slot-view .football-widget,
body.slot-view .jp-info-visual,
body.slot-view .jp-safe-note,
body.slot-view .home-extra,
body.slot-view .jp-service-art,
body.slot-view > main.page,
body.slot-view > footer.footer,
body.slot-view .jp-info-badge{
  display:none !important;
}
body.slot-view .jp-mainnav{
  margin-bottom:0;
}
body.slot-view .jp-contact-tab{
  display:flex;
}
body.slot-view .slot-catalog{
  display:block;
}
.slot-catalog{
  display:none;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:14px 18px 38px;
  color:#fff;
}
.slot-catalog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
}
.slot-catalog-title{
  margin:0;
  color:#fff;
  font-size:18px;
  line-height:1.1;
  font-weight:900;
}
.slot-catalog-status{
  color:#999;
  font-size:10px;
  white-space:nowrap;
}
.slot-provider-bar{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:0 0 11px;
  scrollbar-width:thin;
}
.slot-provider-bar::-webkit-scrollbar{height:6px}
.slot-provider-bar::-webkit-scrollbar-thumb{background:#777;border-radius:8px}
.slot-provider-btn{
  flex:0 0 auto;
  min-width:86px;
  height:32px;
  padding:0 12px;
  border:1px solid #555;
  border-radius:5px;
  background:#171717;
  color:#fff;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.slot-provider-btn:hover,
.slot-provider-btn.active{
  border-color:#ffc735;
  background:linear-gradient(#ffc94a,#b98116);
  color:#16110a;
}
.slot-search-row{
  display:flex;
  gap:8px;
  margin:0 0 17px;
}
.slot-search{
  flex:1;
  min-width:0;
  height:34px;
  border:1px solid #444;
  border-radius:5px;
  background:#111;
  color:#fff;
  padding:0 11px;
  outline:0;
  font-size:11px;
}
.slot-search:focus{border-color:#ffc735}
.slot-search::placeholder{color:#777}
.slot-grid{
  display:block;
}
.slot-provider-section{
  margin:0 0 22px;
}
.slot-provider-games{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:20px 14px;
}
.slot-provider-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 11px;
  color:#ddd;
  font-size:14px;
  font-weight:900;
}
.slot-provider-title::before{
  content:"◉";
  color:#ffc735;
  font-size:12px;
}
.slot-game{
  min-width:0;
  text-align:center;
}
.slot-game-media{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:linear-gradient(145deg,#242424 0%,#111 55%,#080808 100%);
  border:1px solid #1f1f1f;
  border-radius:1px;
}
.slot-game-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.slot-game-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  align-content:center;
  gap:6px;
  padding:12px;
  color:#f2f2f2;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,199,55,.16),transparent 32%),
    linear-gradient(145deg,#252525,#0c0c0c);
  font-size:10px;
  line-height:1.2;
  text-align:center;
}
.slot-game-placeholder strong{
  display:block;
  max-width:95%;
  font-size:10px;
  line-height:1.25;
}
.slot-game-placeholder span{
  color:#a9a9a9;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.slot-game-badge{
  position:absolute;
  left:4px;
  top:4px;
  z-index:2;
  padding:3px 5px;
  border-radius:3px;
  background:#e9b51f;
  color:#111;
  font-size:7px;
  line-height:1;
  font-weight:900;
}
.slot-game-name{
  min-height:30px;
  padding:7px 2px 0;
  color:#eee;
  font-size:9px;
  line-height:1.25;
  font-weight:600;
}
.slot-empty{
  padding:40px 12px;
  border:1px solid #292929;
  background:#090909;
  color:#888;
  text-align:center;
  font-size:11px;
}
.slot-error{
  padding:25px 12px;
  border:1px solid #4a2929;
  background:#120909;
  color:#e2a6a6;
  text-align:center;
  font-size:11px;
}
.slot-catalog-back{
  display:none;
}
@media(max-width:900px){
  .slot-catalog{max-width:760px}
  .slot-provider-games{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 11px}
}
@media(max-width:600px){
  .slot-catalog{padding:10px 14px 30px}
  .slot-catalog-head{display:block;margin-bottom:11px}
  .slot-catalog-title{font-size:16px}
  .slot-catalog-status{display:block;margin-top:5px}
  .slot-provider-games{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 8px}
  .slot-game-name{font-size:8px}
  .slot-provider-btn{height:30px;font-size:9px;min-width:76px}
}
@media(max-width:430px){
  .slot-provider-games{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 9px}
}

/* Slot catalog stability fix: isolate the catalog from legacy card/section sizing. */
body.slot-view .slot-catalog,
body.slot-view .slot-catalog *{box-sizing:border-box}
body.slot-view .slot-catalog{position:relative;z-index:5;overflow:visible}
body.slot-view .slot-provider-games{width:100%;align-items:start}
body.slot-view .slot-game{overflow:visible}
body.slot-view .slot-game-media{min-height:0}
@media(max-width:600px){
  body.slot-view .slot-catalog{width:100%;padding-left:12px;padding-right:12px}
}


/* ===== LIVE DEMO GAME VIEW ===== */

.slot-game{
  cursor:pointer;
  outline:none;
  transition:transform .16s ease, filter .16s ease;
}

.slot-game:hover,
.slot-game:focus-visible{
  transform:translateY(-3px);
  filter:brightness(1.08);
}

.slot-game-media{
  position:relative;
}

.slot-game-play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  opacity:0;
  background:rgba(0,0,0,.58);
  color:#fff;
  transition:opacity .16s ease;
  pointer-events:none;
}

.slot-game:hover .slot-game-play-overlay,
.slot-game:focus-visible .slot-game-play-overlay{
  opacity:1;
}

.slot-game-play-overlay span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:2px solid #fff;
  border-radius:50%;
  font-size:17px;
  padding-left:3px;
}

.slot-game-play-overlay b{
  font-size:9px;
  letter-spacing:1px;
}

.slot-game-provider{
  color:#777;
  font-size:7px;
  line-height:1.2;
  margin-top:2px;
  text-transform:uppercase;
}

.slot-demo-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
}

.slot-demo-modal.open{
  display:flex;
}

.slot-demo-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(4px);
}

.slot-demo-dialog{
  position:relative;
  z-index:1;
  width:min(1100px,100%);
  height:min(90vh,760px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#090909;
  border:1px solid #765916;
  border-radius:10px;
  box-shadow:0 20px 70px rgba(0,0,0,.75);
}

.slot-demo-head{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  background:#151515;
  border-bottom:1px solid #292929;
}

.slot-demo-head strong{
  display:block;
  color:#fff;
  font-size:12px;
  line-height:1.2;
}

.slot-demo-head span{
  display:block;
  color:#888;
  font-size:8px;
  margin-top:3px;
}

.slot-demo-close{
  width:34px;
  height:34px;
  border:1px solid #444;
  border-radius:6px;
  background:#222;
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.slot-demo-frame-wrap{
  position:relative;
  flex:1;
  min-height:0;
  background:#000;
}

.slot-demo-frame-wrap iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}

.slot-demo-loading{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  color:#aaa;
  background:#000;
  font-size:11px;
  pointer-events:none;
}

.slot-demo-foot{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  background:#151515;
  border-top:1px solid #292929;
  color:#777;
  font-size:8px;
}

.slot-demo-external{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid #765916;
  border-radius:5px;
  background:#201800;
  color:#f4c63d;
  text-decoration:none;
  font-size:9px;
  font-weight:800;
}

body.slot-demo-open{
  overflow:hidden;
}

@media(max-width:600px){
  .slot-demo-modal{
    padding:0;
  }

  .slot-demo-dialog{
    width:100%;
    height:100%;
    max-height:none;
    border-radius:0;
    border-left:0;
    border-right:0;
  }

  .slot-demo-foot{
    min-height:48px;
  }

  .slot-demo-foot > span{
    max-width:58%;
  }

  .slot-game-play-overlay span{
    width:36px;
    height:36px;
    font-size:14px;
  }
}


/* =========================================================
   GOLD INTERACTION EFFECT
   Hover / focus / active navigation and game cards
   ========================================================= */

/* Main top navigation */
.jp-mainnav .jp-nav-item{
  position:relative;
  color:#fff;
  background:linear-gradient(180deg,#050505 0%,#050505 100%);
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.jp-mainnav .jp-nav-item:hover,
.jp-mainnav .jp-nav-item:focus-visible{
  color:#17110a;
  background:linear-gradient(
    180deg,
    #ffe36a 0%,
    #f7c43d 45%,
    #c88d18 100%
  );
  border-right-color:#ffe98a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(116,73,0,.35),
    0 0 10px rgba(247,196,61,.20);
  transform:translateY(-1px);
  z-index:2;
}

.jp-mainnav .jp-nav-item:hover img,
.jp-mainnav .jp-nav-item:focus-visible img{
  filter:
    brightness(.45)
    drop-shadow(0 0 3px rgba(255,255,255,.55));
}

.jp-mainnav .jp-nav-item:hover span,
.jp-mainnav .jp-nav-item:focus-visible span{
  color:#17110a;
}

/* Keep SLOT visibly selected while its page is open */
body.slot-view .jp-mainnav .jp-nav-item[href="#slot"]{
  color:#17110a;
  background:linear-gradient(
    180deg,
    #ffe36a 0%,
    #f7c43d 45%,
    #c88d18 100%
  );
  border-right-color:#ffe98a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(116,73,0,.35),
    0 0 10px rgba(247,196,61,.18);
}

body.slot-view .jp-mainnav .jp-nav-item[href="#slot"] img{
  filter:
    brightness(.45)
    drop-shadow(0 0 3px rgba(255,255,255,.55));
}

body.slot-view .jp-mainnav .jp-nav-item[href="#slot"] span{
  color:#17110a;
}

/* Game card gold hover */
.slot-game{
  position:relative;
  cursor:pointer;
  border-radius:3px;
  transition:
    transform .18s ease,
    filter .18s ease;
}

.slot-game:hover,
.slot-game:focus-visible{
  transform:translateY(-4px);
  filter:brightness(1.04);
}

.slot-game-media{
  border:1px solid #292929;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.slot-game:hover .slot-game-media,
.slot-game:focus-visible .slot-game-media{
  border-color:#f7c43d;
  box-shadow:
    0 0 0 1px rgba(247,196,61,.35),
    0 0 14px rgba(247,196,61,.28),
    inset 0 0 18px rgba(247,196,61,.08);
}

/* Gold overlay instead of the previous plain dark overlay */
.slot-game-play-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(20,14,2,.18),
      rgba(20,14,2,.72)
    );
}

.slot-game:hover .slot-game-play-overlay,
.slot-game:focus-visible .slot-game-play-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(247,196,61,.12),
      rgba(20,14,2,.74)
    );
}

.slot-game-play-overlay span{
  border-color:#f7c43d;
  color:#f7c43d;
  box-shadow:
    0 0 10px rgba(247,196,61,.35),
    inset 0 0 7px rgba(247,196,61,.08);
}

.slot-game-play-overlay b{
  color:#ffe36a;
}

.slot-game-name{
  transition:
    color .18s ease,
    text-shadow .18s ease;
}

.slot-game:hover .slot-game-name,
.slot-game:focus-visible .slot-game-name{
  color:#ffc735;
  text-shadow:0 0 7px rgba(247,196,61,.22);
}

.slot-game-provider{
  transition:color .18s ease;
}

.slot-game:hover .slot-game-provider,
.slot-game:focus-visible .slot-game-provider{
  color:#b98a2b;
}

/* Provider filter buttons */
.slot-provider-btn{
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .15s ease;
}

.slot-provider-btn:hover,
.slot-provider-btn:focus-visible{
  border-color:#f7c43d;
  background:linear-gradient(
    180deg,
    #ffe36a 0%,
    #f7c43d 50%,
    #b98116 100%
  );
  color:#17110a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 0 8px rgba(247,196,61,.18);
  transform:translateY(-1px);
}

.slot-provider-btn.active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 0 8px rgba(247,196,61,.16);
}

/* Search field gold focus */
.slot-search{
  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.slot-search:focus{
  border-color:#f7c43d;
  box-shadow:
    0 0 0 1px rgba(247,196,61,.18),
    0 0 8px rgba(247,196,61,.12);
}

/* Keyboard users get the same gold treatment */
.jp-mainnav .jp-nav-item:focus-visible,
.slot-game:focus-visible,
.slot-provider-btn:focus-visible{
  outline:2px solid #ffe36a;
  outline-offset:2px;
}


/* =========================================================
   TOTOSLOTJP — TOP NAV HOVER / TOUCH MATCH
   Matches the original navigation interaction:
   black at rest -> gold panel while hovered/touched/focused.
   ========================================================= */

.jp-mainnav .jp-nav-item{
  position:relative;
  color:#fff;
  background:#030303;
  transition:
    background .12s ease,
    color .12s ease,
    box-shadow .12s ease,
    filter .12s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Original-style gold hover/touch state */
.jp-mainnav .jp-nav-item:hover,
.jp-mainnav .jp-nav-item:active,
.jp-mainnav .jp-nav-item:focus-visible{
  color:#17110a;
  background:linear-gradient(
    180deg,
    #ffe36a 0%,
    #f6c43f 48%,
    #d49a20 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(117,76,5,.45);
  z-index:2;
}

.jp-mainnav .jp-nav-item:hover span,
.jp-mainnav .jp-nav-item:active span,
.jp-mainnav .jp-nav-item:focus-visible span{
  color:#17110a;
}

/* The original icon becomes a darker/gold-toned icon over the gold tile. */
.jp-mainnav .jp-nav-item:hover img,
.jp-mainnav .jp-nav-item:active img,
.jp-mainnav .jp-nav-item:focus-visible img{
  filter:
    brightness(.58)
    saturate(1.15)
    drop-shadow(0 1px 0 rgba(255,255,255,.25));
}

/* Emoji-based PROMOSI/EVENT icons should also darken naturally. */
.jp-mainnav .jp-nav-item:hover span:first-child[style],
.jp-mainnav .jp-nav-item:active span:first-child[style],
.jp-mainnav .jp-nav-item:focus-visible span:first-child[style]{
  filter:saturate(.75) brightness(.65);
}

/* Keep the selected SLOT tile gold on the Slot catalogue view,
   while preserving the same visual treatment as the original. */
body.slot-view .jp-mainnav .jp-nav-item[href="#slot"]{
  color:#17110a;
  background:linear-gradient(
    180deg,
    #ffe36a 0%,
    #f6c43f 48%,
    #d49a20 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(117,76,5,.45);
}

body.slot-view .jp-mainnav .jp-nav-item[href="#slot"] span{
  color:#17110a;
}

body.slot-view .jp-mainnav .jp-nav-item[href="#slot"] img{
  filter:
    brightness(.58)
    saturate(1.15)
    drop-shadow(0 1px 0 rgba(255,255,255,.25));
}

/* Mobile/touch: make the pressed navigation tile visibly gold
   for the duration of the touch without changing any API. */
@media (hover:none){
  .jp-mainnav .jp-nav-item:active{
    color:#17110a;
    background:linear-gradient(
      180deg,
      #ffe36a 0%,
      #f6c43f 48%,
      #d49a20 100%
    );
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.62),
      inset 0 -1px 0 rgba(117,76,5,.45);
  }

  .jp-mainnav .jp-nav-item:active span{
    color:#17110a;
  }

  .jp-mainnav .jp-nav-item:active img{
    filter:
      brightness(.58)
      saturate(1.15)
      drop-shadow(0 1px 0 rgba(255,255,255,.25));
  }
}


/* =========================================================
   FINAL NAV INTERACTION — ORIGINAL STYLE
   Gold only on the navigation content, NOT a gold rectangle.
   ========================================================= */
.jp-mainnav .jp-nav-item{
  background:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
  transform:none !important;
  border-right:1px solid #1c1c1c;
  transition:color .16s ease, text-shadow .16s ease, filter .16s ease;
}

/* Hover / touch: keep the black navigation tile; only the
   icon + label turn gold like the original site. */
.jp-mainnav .jp-nav-item:hover,
.jp-mainnav .jp-nav-item:active,
.jp-mainnav .jp-nav-item:focus-visible{
  background:transparent !important;
  color:#f6c33d !important;
  box-shadow:none !important;
  transform:none !important;
  border-right-color:#1c1c1c;
  z-index:2;
  text-shadow:0 0 6px rgba(246,195,61,.25);
}

.jp-mainnav .jp-nav-item:hover span,
.jp-mainnav .jp-nav-item:active span,
.jp-mainnav .jp-nav-item:focus-visible span{
  color:#f6c33d !important;
}

/* White image icons -> gold appearance without adding a tile */
.jp-mainnav .jp-nav-item:hover img,
.jp-mainnav .jp-nav-item:active img,
.jp-mainnav .jp-nav-item:focus-visible img{
  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(77%)
    saturate(760%)
    hue-rotate(355deg)
    brightness(101%)
    contrast(96%) !important;
}

/* Emoji-based navigation icons */
.jp-mainnav .jp-nav-item:hover span:first-child[style],
.jp-mainnav .jp-nav-item:active span:first-child[style],
.jp-mainnav .jp-nav-item:focus-visible span:first-child[style]{
  filter:none !important;
  color:#f6c33d !important;
}

/* Do NOT keep SLOT gold after navigation is no longer hovered/touched.
   The original interaction is transient. */
body.slot-view .jp-mainnav .jp-nav-item[href="#slot"]{
  background:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
  transform:none !important;
}

body.slot-view .jp-mainnav .jp-nav-item[href="#slot"] span{
  color:#fff !important;
}

body.slot-view .jp-mainnav .jp-nav-item[href="#slot"] img{
  filter:none !important;
}

/* On touch devices the gold state exists only while the finger
   is pressing the navigation item. */
@media (hover:none){
  .jp-mainnav .jp-nav-item:active{
    background:transparent !important;
    color:#f6c33d !important;
    box-shadow:none !important;
  }

  .jp-mainnav .jp-nav-item:active span{
    color:#f6c33d !important;
  }

  .jp-mainnav .jp-nav-item:active img{
    filter:
      brightness(0)
      saturate(100%)
      invert(78%)
      sepia(77%)
      saturate(760%)
      hue-rotate(355deg)
      brightness(101%)
      contrast(96%) !important;
  }
}


/* =========================================================
   SLOT UI — FINAL REFERENCE MATCH
   Match the supplied original screenshot: compact heading,
   provider tabs + search, 5-column game grid, no oversized
   provider blocks or decorative hover treatment.
   ========================================================= */
body.slot-view .slot-catalog{
  display:block;
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:12px 16px 36px;
  color:#fff;
  background:#000;
}
body.slot-view .slot-catalog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}
body.slot-view .slot-catalog-title{
  margin:0;
  color:#fff;
  font-size:16px;
  line-height:1.15;
  font-weight:900;
}
body.slot-view .slot-catalog-status{
  color:#999;
  font-size:9px;
  line-height:1;
  white-space:nowrap;
}
body.slot-view .slot-provider-bar{
  display:flex;
  align-items:center;
  gap:5px;
  overflow-x:auto;
  padding:0 0 10px;
  scrollbar-width:none;
}
body.slot-view .slot-provider-bar::-webkit-scrollbar{display:none}
body.slot-view .slot-provider-btn{
  min-width:auto;
  height:28px;
  padding:0 12px;
  border:1px solid #555;
  border-radius:4px;
  background:#171717;
  color:#fff;
  font-size:9px;
  font-weight:900;
  line-height:28px;
  box-shadow:none;
  transform:none;
}
body.slot-view .slot-provider-btn.active{
  border-color:#d8a52c;
  background:linear-gradient(180deg,#ffd05a 0%,#e5ad35 100%);
  color:#17110a;
  box-shadow:none;
}
body.slot-view .slot-provider-btn:hover,
body.slot-view .slot-provider-btn:focus-visible{
  border-color:#d8a52c;
  background:linear-gradient(180deg,#ffd05a 0%,#e5ad35 100%);
  color:#17110a;
  box-shadow:none;
  transform:none;
}
body.slot-view .slot-search-row{
  display:flex;
  margin:0 0 16px;
}
body.slot-view .slot-search{
  width:100%;
  height:32px;
  border:1px solid #444;
  border-radius:4px;
  background:#111;
  color:#fff;
  padding:0 10px;
  font-size:10px;
  box-shadow:none;
}
body.slot-view .slot-search:focus{
  border-color:#666;
  box-shadow:none;
}
body.slot-view .slot-provider-section{
  margin:0 0 24px;
}
body.slot-view .slot-provider-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 10px;
  color:#ddd;
  font-size:13px;
  line-height:1.2;
  font-weight:900;
}
body.slot-view .slot-provider-title::before{
  content:"●";
  color:#ffc735;
  font-size:9px;
}
body.slot-view .slot-provider-games{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px 13px;
  width:100%;
  align-items:start;
}
body.slot-view .slot-game{
  min-width:0;
  text-align:center;
  cursor:pointer;
  border-radius:0;
  transform:none !important;
  filter:none !important;
}
body.slot-view .slot-game-media{
  width:100%;
  aspect-ratio:1/1;
  min-height:0;
  overflow:hidden;
  border:1px solid #262626;
  border-radius:0;
  background:#0b0b0b;
  box-shadow:none !important;
  transform:none !important;
}
body.slot-view .slot-game-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
body.slot-view .slot-game-name{
  min-height:26px;
  padding:6px 1px 0;
  color:#eee;
  font-size:8px;
  line-height:1.25;
  font-weight:600;
  text-shadow:none !important;
}
body.slot-view .slot-game-provider{
  margin-top:1px;
  color:#777;
  font-size:6px;
  line-height:1.2;
  text-transform:uppercase;
}
body.slot-view .slot-game:hover .slot-game-name,
body.slot-view .slot-game:focus-visible .slot-game-name{
  color:#eee;
  text-shadow:none;
}
body.slot-view .slot-game:hover .slot-game-provider,
body.slot-view .slot-game:focus-visible .slot-game-provider{
  color:#777;
}
body.slot-view .slot-game:hover .slot-game-media,
body.slot-view .slot-game:focus-visible .slot-game-media{
  border-color:#262626;
  box-shadow:none;
}
body.slot-view .slot-game-play-overlay{
  display:none !important;
}
body.slot-view .slot-game-badge{
  left:3px;
  top:3px;
  padding:3px 5px;
  border-radius:3px;
  font-size:7px;
}

@media(max-width:700px){
  body.slot-view .slot-catalog{
    max-width:900px;
    padding:10px 16px 30px;
  }
  body.slot-view .slot-provider-games{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px 8px;
  }
  body.slot-view .slot-game-name{font-size:7px;min-height:24px}
  body.slot-view .slot-game-provider{font-size:5px}
}

@media(max-width:480px){
  body.slot-view .slot-provider-games{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px 8px;
  }
  body.slot-view .slot-catalog-title{font-size:15px}
  body.slot-view .slot-provider-title{font-size:12px}
}


/* =========================================================
   ORIGINAL SLOT PAGE — PRAGMATIC PLAY ONLY
   The original layout goes directly from "Slot" to the
   Pragmatic Play section. Provider buttons and search are
   intentionally not shown.
   ========================================================= */
body.slot-view .slot-provider-bar{
  display:none !important;
}
body.slot-view .slot-search-row{
  display:none !important;
}
body.slot-view .slot-catalog-head{
  margin-bottom:38px;
}
body.slot-view .slot-provider-section{
  margin-top:0;
}
body.slot-view .slot-provider-title{
  margin-bottom:24px;
  font-size:18px;
  color:#e7e7e7;
}
body.slot-view .slot-provider-title::before{
  color:#f5a623;
  font-size:16px;
}
@media(max-width:600px){
  body.slot-view .slot-catalog-head{
    margin-bottom:28px;
  }
  body.slot-view .slot-provider-title{
    font-size:16px;
    margin-bottom:16px;
  }
}