/* =====================================================================
   Casino App — base-191b9c.css
   Mobile-first (320-430px) styles for casino-app.sbs
   Palette: #BDC3C7 | #FF91A4 | #2F2F2F | #0A0A0A | #2C3E50 | #FAFAFA
   Class prefix: ui91-
===================================================================== */

:root{
  --ui91-silver:#BDC3C7;
  --ui91-pink:#FF91A4;
  --ui91-pink-soft:#ffb3c1;
  --ui91-ink:#2F2F2F;
  --ui91-black:#0A0A0A;
  --ui91-blue:#2C3E50;
  --ui91-paper:#FAFAFA;
  --ui91-bg:#0A0A0A;
  --ui91-bg-2:#141414;
  --ui91-panel:#1b1b1b;
  --ui91-panel-2:#202020;
  --ui91-line:rgba(189,195,199,.14);
  --ui91-line-strong:rgba(255,145,164,.35);
  --ui91-text:#FAFAFA;
  --ui91-muted:#BDC3C7;
  --ui91-muted-2:#8b9094;
  --ui91-accent:#FF91A4;
  --ui91-blue-d:#2C3E50;
  --ui91-radius:14px;
  --ui91-radius-lg:20px;
  --ui91-shadow:0 10px 26px rgba(0,0,0,.45);
  --ui91-shadow-pink:0 8px 22px rgba(255,145,164,.28);
  --ui91-header-h:56px;
  --ui91-bottom-h:68px;
  --ui91-max:480px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{background:#050505;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ui91-text);
  background:
    radial-gradient(900px 480px at 50% -120px, rgba(255,145,164,.18), transparent 60%),
    radial-gradient(700px 400px at 110% 10%, rgba(44,62,80,.55), transparent 60%),
    linear-gradient(180deg,#0c0c0c 0%, #0A0A0A 30%, #0e0e10 100%);
  background-attachment:fixed;
  font-size:14px;
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
}

/* The mobile canvas keeps a centered phone-width column on wide screens */
.ui91-shell{
  max-width:var(--ui91-max);
  margin:0 auto;
  min-height:100vh;
  position:relative;
  background:linear-gradient(180deg, rgba(20,20,20,.6), rgba(10,10,10,.4));
  box-shadow:0 0 60px rgba(0,0,0,.6);
}

a{color:var(--ui91-pink-soft);text-decoration:none;}
a:active{opacity:.8;}
img{display:block;max-width:100%;}

/* ===================== Header ===================== */
.ui91-header{
  position:sticky;
  top:0;
  z-index:60;
  height:var(--ui91-header-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  background:linear-gradient(180deg, rgba(10,10,10,.96), rgba(20,20,20,.88));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ui91-line);
}
.ui91-brand{
  display:flex;align-items:center;gap:9px;min-width:0;flex:1;
}
.ui91-logo{
  width:36px;height:36px;border-radius:10px;object-fit:cover;
  background:linear-gradient(135deg,#2C3E50,#FF91A4);
  padding:2px;
  box-shadow:0 0 0 1px rgba(255,145,164,.4), var(--ui91-shadow-pink);
}
.ui91-brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0;}
.ui91-brand-name{
  font-weight:800;font-size:15px;letter-spacing:.2px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ui91-brand-tag{
  font-size:10px;color:var(--ui91-pink);font-weight:600;letter-spacing:.6px;text-transform:uppercase;
}
.ui91-header-actions{display:flex;align-items:center;gap:7px;}
.ui91-btn{
  -webkit-appearance:none;appearance:none;border:none;cursor:pointer;
  font-weight:700;font-size:13px;border-radius:10px;
  padding:9px 14px;min-height:38px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
  font-family:inherit;
}
.ui91-btn:active{transform:translateY(1px);}
.ui91-btn-primary{
  background:linear-gradient(135deg,#FF91A4,#ff6f86);
  color:#1a0a0d;
  box-shadow:var(--ui91-shadow-pink);
}
.ui91-btn-ghost{
  background:transparent;color:var(--ui91-text);
  border:1px solid rgba(189,195,199,.4);
}
.ui91-btn-ghost:active{border-color:var(--ui91-pink);}
.ui91-menu-btn{
  width:38px;height:38px;border-radius:10px;
  background:rgba(189,195,199,.08);
  border:1px solid var(--ui91-line);
  color:var(--ui91-text);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.ui91-menu-btn:active{background:rgba(255,145,164,.16);}
.ui91-menu-btn svg{width:20px;height:20px;}

/* ===================== Slide-up route panel ===================== */
.ui91-panel-backdrop{
  position:fixed;inset:0;z-index:70;
  background:rgba(0,0,0,.55);
  opacity:0;visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}
.ui91-panel-backdrop.ui91-is-open{opacity:1;visibility:visible;}
.ui91-panel{
  position:fixed;left:0;right:0;bottom:0;z-index:71;
  max-width:var(--ui91-max);margin:0 auto;
  background:linear-gradient(180deg,#161616,#0d0d0d);
  border-top:1px solid var(--ui91-line-strong);
  border-radius:22px 22px 0 0;
  padding:18px 16px calc(var(--ui91-bottom-h) + 18px);
  transform:translateY(110%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 -20px 50px rgba(0,0,0,.6);
}
.ui91-panel.ui91-is-open{transform:translateY(0);}
.ui91-panel-handle{
  width:46px;height:5px;border-radius:3px;
  background:rgba(189,195,199,.35);margin:0 auto 14px;
}
.ui91-panel-title{
  font-size:13px;color:var(--ui91-pink);font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;margin:0 0 12px;
}
.ui91-panel-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.ui91-panel-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 8px;border-radius:14px;
  background:rgba(189,195,199,.06);
  border:1px solid var(--ui91-line);
  color:var(--ui91-text);font-size:12px;font-weight:600;
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
  text-align:center;
}
.ui91-panel-item:active{transform:translateY(-2px);border-color:var(--ui91-pink);background:rgba(255,145,164,.1);}
.ui91-panel-item .ui91-ico{width:24px;height:24px;color:var(--ui91-pink);}
.ui91-panel-cta{
  margin-top:14px;display:flex;gap:10px;
}
.ui91-panel-cta .ui91-btn{flex:1;}

/* ===================== Layout containers ===================== */
.ui91-main{
  padding:14px 12px 0;
  padding-bottom:calc(var(--ui91-bottom-h) + 26px);
}
.ui91-section{margin-bottom:22px;}
.ui91-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin:6px 2px 12px;
}
.ui91-section-title{
  font-size:16px;font-weight:800;color:#fff;letter-spacing:.2px;
  display:flex;align-items:center;gap:8px;margin:0;
}
.ui91-section-title::before{
  content:"";width:4px;height:16px;border-radius:2px;
  background:linear-gradient(180deg,#FF91A4,#ff6f86);
  display:inline-block;
}
.ui91-section-more{font-size:12px;color:var(--ui91-pink);font-weight:600;}

/* ===================== Hero / Banner carousel ===================== */
.ui91-hero{
  position:relative;border-radius:var(--ui91-radius-lg);
  overflow:hidden;margin-bottom:18px;
  box-shadow:var(--ui91-shadow);
  border:1px solid var(--ui91-line);
}
.ui91-hero-track{
  display:flex;scroll-snap-type:x mandatory;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ui91-hero-track::-webkit-scrollbar{display:none;}
.ui91-hero-slide{
  flex:0 0 100%;scroll-snap-align:center;
  position:relative;cursor:pointer;
}
.ui91-hero-slide img{width:100%;height:190px;object-fit:cover;}
.ui91-hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.05) 30%, rgba(10,10,10,.85) 100%);
}
.ui91-hero-copy{
  position:absolute;left:14px;right:14px;bottom:12px;color:#fff;
}
.ui91-hero-eyebrow{
  display:inline-block;padding:3px 9px;border-radius:999px;
  background:rgba(255,145,164,.92);color:#1a0a0d;
  font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  margin-bottom:7px;
}
.ui91-hero-title{font-size:18px;font-weight:800;margin:0 0 3px;line-height:1.2;}
.ui91-hero-sub{font-size:12px;color:var(--ui91-silver);margin:0 0 9px;}
.ui91-hero-cta{
  display:inline-block;padding:8px 16px;border-radius:10px;
  background:linear-gradient(135deg,#FF91A4,#ff6f86);color:#1a0a0d;
  font-size:12px;font-weight:800;box-shadow:var(--ui91-shadow-pink);
}
.ui91-hero-dots{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;
}
.ui91-hero-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .2s, width .2s;}
.ui91-hero-dot.ui91-active{background:var(--ui91-pink);width:18px;border-radius:3px;}

/* ===================== Quick stats ===================== */
.ui91-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-bottom:18px;
}
.ui91-stat{
  background:linear-gradient(180deg, rgba(44,62,80,.35), rgba(20,20,20,.6));
  border:1px solid var(--ui91-line);
  border-radius:12px;padding:10px 6px;text-align:center;
}
.ui91-stat-num{font-size:15px;font-weight:800;color:var(--ui91-pink);line-height:1;}
.ui91-stat-lbl{font-size:10px;color:var(--ui91-muted);margin-top:4px;}

/* ===================== Category chips ===================== */
.ui91-chips{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:2px 0 10px;margin:0 0 6px;
}
.ui91-chips::-webkit-scrollbar{display:none;}
.ui91-chip{
  flex:0 0 auto;padding:7px 13px;border-radius:999px;
  background:rgba(189,195,199,.08);border:1px solid var(--ui91-line);
  color:var(--ui91-muted);font-size:12px;font-weight:700;cursor:pointer;
  transition:all .14s ease;
}
.ui91-chip.ui91-active{
  background:linear-gradient(135deg,#FF91A4,#ff6f86);color:#1a0a0d;
  border-color:transparent;box-shadow:var(--ui91-shadow-pink);
}

/* ===================== Game grid ===================== */
.ui91-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
@media (min-width:375px){
  .ui91-grid{grid-template-columns:repeat(5,1fr);gap:9px;}
}
.ui91-card{
  position:relative;display:block;cursor:pointer;
  background:linear-gradient(180deg,#1d1d1d,#131313);
  border:1px solid var(--ui91-line);
  border-radius:12px;overflow:hidden;
  padding:6px 6px 8px;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.ui91-card:active{transform:translateY(-2px);border-color:var(--ui91-line-strong);box-shadow:var(--ui91-shadow-pink);}
.ui91-card-img{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;
  background:#0d0d0d;
}
.ui91-card-name{
  margin-top:5px;font-size:10.5px;color:var(--ui91-text);font-weight:600;
  line-height:1.25;height:26px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.ui91-card-tag{
  position:absolute;top:9px;left:9px;
  font-size:8.5px;font-weight:800;padding:2px 6px;border-radius:6px;
  background:rgba(255,145,164,.92);color:#1a0a0d;letter-spacing:.4px;
}
.ui91-card-tag.ui91-tag-hot{background:#FF91A4;}
.ui91-card-tag.ui91-tag-new{background:#2C3E50;color:#fff;}

.ui91-cat-links{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
  font-size:11px;
}
.ui91-cat-links a{
  padding:5px 10px;border-radius:8px;
  background:rgba(44,62,80,.45);border:1px solid var(--ui91-line);
  color:var(--ui91-silver);font-weight:600;
}
.ui91-cat-links a:active{color:#fff;border-color:var(--ui91-pink);}

/* ===================== Promo strip ===================== */
.ui91-promo{
  display:flex;align-items:center;gap:12px;
  padding:14px;border-radius:var(--ui91-radius);
  background:
    radial-gradient(120px 60px at 90% 0%, rgba(255,145,164,.35), transparent 70%),
    linear-gradient(135deg,#2C3E50,#0A0A0A);
  border:1px solid var(--ui91-line-strong);
  cursor:pointer;
}
.ui91-promo-text{flex:1;min-width:0;}
.ui91-promo-title{font-size:14px;font-weight:800;color:#fff;margin:0 0 3px;}
.ui91-promo-sub{font-size:11px;color:var(--ui91-silver);margin:0;}

/* ===================== Feature / info cards ===================== */
.ui91-cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.ui91-feature{
  background:linear-gradient(180deg, rgba(44,62,80,.35), rgba(20,20,20,.6));
  border:1px solid var(--ui91-line);
  border-radius:var(--ui91-radius);
  padding:14px 12px;
}
.ui91-feature-ico{
  width:34px;height:34px;border-radius:10px;
  background:rgba(255,145,164,.16);
  color:var(--ui91-pink);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.ui91-feature-ico svg{width:20px;height:20px;}
.ui91-feature h3{margin:0 0 6px;font-size:14px;color:#fff;font-weight:700;}
.ui91-feature p{margin:0;font-size:12px;color:var(--ui91-muted);line-height:1.5;}

/* ===================== Article / SEO content ===================== */
.ui91-article{
  background:linear-gradient(180deg, rgba(20,20,20,.85), rgba(12,12,12,.85));
  border:1px solid var(--ui91-line);
  border-radius:var(--ui91-radius-lg);
  padding:18px 16px;
}
.ui91-article h1{
  font-size:22px;line-height:1.25;font-weight:800;color:#fff;margin:0 0 10px;
}
.ui91-article .ui91-h1-eyebrow{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:1.2px;
  color:var(--ui91-pink);text-transform:uppercase;margin-bottom:6px;
}
.ui91-article h2{
  font-size:16px;font-weight:800;color:#fff;margin:18px 0 8px;
  display:flex;align-items:center;gap:8px;
}
.ui91-article h2::before{
  content:"";width:4px;height:14px;border-radius:2px;background:var(--ui91-pink);
}
.ui91-article h3{font-size:14px;font-weight:700;color:var(--ui91-pink-soft);margin:14px 0 6px;}
.ui91-article p{color:var(--ui91-silver);font-size:13px;line-height:1.65;margin:0 0 10px;}
.ui91-article ul{margin:0 0 10px;padding-left:18px;color:var(--ui91-silver);}
.ui91-article li{font-size:13px;line-height:1.6;margin-bottom:5px;}
.ui91-article a{color:var(--ui91-pink-soft);border-bottom:1px dashed rgba(255,145,164,.4);}
.ui91-article strong{color:#fff;}

.ui91-callout{
  margin-top:14px;padding:14px;border-radius:14px;
  background:linear-gradient(135deg, rgba(255,145,164,.12), rgba(44,62,80,.18));
  border:1px solid var(--ui91-line-strong);
}
.ui91-callout h3{margin-top:0;}
.ui91-callout p:last-child{margin-bottom:0;}

/* ===================== Extended footer ===================== */
.ui91-ext-footer{
  margin-top:6px;padding:18px 14px;
  background:linear-gradient(180deg,#111,#0a0a0a);
  border-top:1px solid var(--ui91-line);
  border-radius:18px 18px 0 0;
}
.ui91-ext-foot-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.ui91-ext-foot-col h4{
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--ui91-pink);margin:0 0 9px;font-weight:700;
}
.ui91-ext-foot-col a{
  display:block;font-size:12px;color:var(--ui91-muted);
  padding:5px 0;border-bottom:1px dashed rgba(189,195,199,.12);
}
.ui91-ext-foot-col a:last-child{border-bottom:none;}
.ui91-ext-foot-col a:active{color:#fff;}
.ui91-ext-foot-brand{
  grid-column:1 / -1;
  padding:14px;border-radius:14px;
  background:linear-gradient(135deg, rgba(255,145,164,.1), rgba(44,62,80,.25));
  border:1px solid var(--ui91-line);
}
.ui91-ext-foot-brand p{margin:0;font-size:12px;color:var(--ui91-silver);line-height:1.6;}
.ui91-ext-foot-brand strong{color:#fff;}
.ui91-ext-foot-promos{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.ui91-ext-foot-promos button{
  padding:9px 4px;border-radius:10px;border:1px solid var(--ui91-line-strong);
  background:linear-gradient(135deg,#FF91A4,#ff6f86);color:#1a0a0d;
  font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;
  transition:transform .14s;
}
.ui91-ext-foot-promos button:active{transform:translateY(-1px);}
.ui91-ext-disclaimer{
  grid-column:1 / -1;margin-top:8px;
  font-size:11px;color:var(--ui91-muted-2);line-height:1.55;text-align:center;
}

/* ===================== Bottom navigation ===================== */
.ui91-bottom{
  position:fixed;left:0;right:0;bottom:0;z-index:65;
  max-width:var(--ui91-max);margin:0 auto;
  height:var(--ui91-bottom-h);
  display:flex;justify-content:space-around;align-items:stretch;
  background:linear-gradient(180deg, rgba(16,16,16,.97), rgba(8,8,8,.99));
  backdrop-filter:blur(12px);
  border-top:1px solid var(--ui91-line-strong);
  box-shadow:0 -8px 22px rgba(0,0,0,.5);
  padding:2px 0 env(safe-area-inset-bottom);
}
.ui91-bottom-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--ui91-muted);font-size:10px;font-weight:600;
  background:none;border:none;cursor:pointer;font-family:inherit;
  padding:6px 2px;position:relative;
  transition:transform .14s ease, color .14s ease;
}
.ui91-bottom-item:active{transform:translateY(-2px);}
.ui91-bottom-item .ui91-b-ico{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  color:inherit;
}
.ui91-bottom-item .ui91-b-ico svg{width:22px;height:22px;}
.ui91-bottom-item.ui91-active{color:var(--ui91-pink);}
.ui91-bottom-item.ui91-active .ui91-b-ico{
  background:rgba(255,145,164,.15);
  border-radius:10px;
  box-shadow:0 6px 14px rgba(255,145,164,.25);
}
.ui91-bottom-item.ui91-active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--ui91-pink);
}
.ui91-bottom-item span{font-size:10px;letter-spacing:.2px;}

/* The center promo button gets a lifted pink capsule */
.ui91-bottom-item.ui91-lift .ui91-b-ico{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#FF91A4,#ff6f86);
  color:#1a0a0d;margin-top:-14px;
  box-shadow:var(--ui91-shadow-pink);
  border:3px solid #0A0A0A;
}
.ui91-bottom-item.ui91-lift.ui91-active .ui91-b-ico{background:linear-gradient(135deg,#FF91A4,#ff6f86);}
.ui91-bottom-item.ui91-lift span{margin-top:1px;}

/* ===================== Visibility helpers ===================== */
.ui91-only-mobile{display:block;}
@media (min-width:600px){
  /* keep mobile canvas; nothing else needed */
}

/* Focus states for accessibility */
.ui91-btn:focus-visible,
.ui91-bottom-item:focus-visible,
.ui91-chip:focus-visible,
.ui91-panel-item:focus-visible,
.ui91-card:focus-visible{
  outline:2px solid var(--ui91-pink);outline-offset:2px;
}