/* =========================================================
   Iron Play (iron-play.click) — Mobile-First Gaming Styles
   Prefix : sb8c-
   Palette: #FF8A80 | #2C2C2C | #20B2AA | #BC8F8F | #0097A7
   ========================================================= */

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --sb8c-coral:#FF8A80;
  --sb8c-charcoal:#2C2C2C;
  --sb8c-teal:#20B2AA;
  --sb8c-rose:#BC8F8F;
  --sb8c-deep:#0097A7;
  --sb8c-bg:#1a1a1a;
  --sb8c-bg-2:#232323;
  --sb8c-card:#2c2c2c;
  --sb8c-card-2:#333;
  --sb8c-text:#f5f5f5;
  --sb8c-text-dim:#cfcfcf;
  --sb8c-muted:#9a9a9a;
  --sb8c-gold:#FFD180;
  --sb8c-border:#3a3a3a;
  --sb8c-shadow:0 6px 22px rgba(0,0,0,.45);
  --sb8c-radius:14px;
  --sb8c-header-h:56px;
  --sb8c-nav-h:62px;
}

html,body{
  background:var(--sb8c-bg);
  color:var(--sb8c-text);
  font-family:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

body{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,138,128,.18), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(32,178,170,.14), transparent 60%),
    var(--sb8c-bg);
  position:relative;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul,ol{ list-style:none; }

/* ---------- Skip link ---------- */
.sb8c-skip{
  position:absolute; left:-999px; top:0; z-index:-1;
  background:var(--sb8c-coral); color:#1a1a1a; padding:10px 14px; border-radius:0 0 8px 0;
}
.sb8c-skip:focus{ left:0; top:0; z-index:1000; }

/* ---------- Header ---------- */
.sb8c-header{
  position:sticky; top:0; z-index:60;
  height:var(--sb8c-header-h);
  display:flex; align-items:center; gap:10px;
  padding:0 12px;
  background:linear-gradient(180deg,#1f1f1f,#171717);
  border-bottom:1px solid var(--sb8c-border);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.sb8c-brand{
  display:flex; align-items:center; gap:8px; flex:1; min-width:0;
}
.sb8c-brand img{
  width:34px; height:34px; border-radius:8px;
  object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,138,128,.55), 0 2px 6px rgba(0,0,0,.5);
  background:#0e0e0e;
}
.sb8c-brand-name{
  font-weight:800; letter-spacing:.3px; font-size:16px;
  background:linear-gradient(90deg,var(--sb8c-coral),var(--sb8c-gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb8c-brand-name small{
  display:block; font-size:9px; color:var(--sb8c-teal);
  letter-spacing:2px; text-transform:uppercase; font-weight:700;
  -webkit-text-fill-color:var(--sb8c-teal);
}

.sb8c-header-actions{ display:flex; align-items:center; gap:6px; }
.sb8c-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:20px;
  font-size:13px; font-weight:700; letter-spacing:.3px;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.sb8c-btn:active{ transform:scale(.95); }
.sb8c-btn-primary{
  background:linear-gradient(135deg,var(--sb8c-coral),#ff5b4d);
  color:#1a1a1a;
  box-shadow:0 4px 14px rgba(255,138,128,.45);
}
.sb8c-btn-ghost{
  background:transparent; color:var(--sb8c-text);
  border:1px solid var(--sb8c-border);
}
.sb8c-btn-ghost:active{ border-color:var(--sb8c-teal); }

.sb8c-icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border:1px solid var(--sb8c-border);
  font-size:18px; color:var(--sb8c-text);
}
.sb8c-icon-btn:active{ background:rgba(32,178,170,.18); }

/* ---------- Mobile slide menu ---------- */
.sb8c-menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  z-index:70;
}
.sb8c-menu-backdrop.sb8c-open{ opacity:1; visibility:visible; }
.sb8c-side-menu{
  position:fixed; top:0; right:-82%; width:78%; max-width:320px;
  height:100vh; background:#1c1c1c; z-index:80;
  padding:18px 16px; overflow-y:auto;
  transition:right .28s ease;
  border-left:1px solid var(--sb8c-border);
  box-shadow:-8px 0 24px rgba(0,0,0,.5);
}
.sb8c-side-menu.sb8c-open{ right:0; }
.sb8c-menu-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; margin-bottom:12px;
  border-bottom:1px solid var(--sb8c-border);
}
.sb8c-menu-head img{ width:32px; height:32px; border-radius:8px; }
.sb8c-menu-close{
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--sb8c-border);
  font-size:18px; line-height:1;
}
.sb8c-menu-section-title{
  font-size:11px; color:var(--sb8c-teal); letter-spacing:2px;
  text-transform:uppercase; font-weight:700; margin:14px 4px 6px;
}
.sb8c-menu-list a{
  display:block; padding:11px 10px; border-radius:8px;
  color:var(--sb8c-text); font-size:14px; font-weight:600;
  border:1px solid transparent;
}
.sb8c-menu-list a:active{ background:rgba(32,178,170,.12); border-color:var(--sb8c-border); }
.sb8c-menu-cta{
  display:flex; flex-direction:column; gap:8px; margin-top:14px;
}

/* ---------- Hero / Carousel ---------- */
.sb8c-main{ padding:0 0 calc(var(--sb8c-nav-h) + 24px); }

.sb8c-hero{
  position:relative; margin:12px; border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg,#2c1a1a,#1a2a2a);
  border:1px solid var(--sb8c-border);
  box-shadow:var(--sb8c-shadow);
}
.sb8c-slides{ position:relative; }
.sb8c-slide{
  display:none; padding:18px 16px;
  background:linear-gradient(135deg,rgba(255,138,128,.18),rgba(0,151,167,.18));
}
.sb8c-slide.sb8c-active{ display:block; animation:sb8cFade .5s ease; }
@keyframes sb8cFade{ from{opacity:.3} to{opacity:1} }
.sb8c-slide-tag{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:1.5px;
  color:#1a1a1a; background:var(--sb8c-gold);
  padding:3px 8px; border-radius:4px; text-transform:uppercase;
}
.sb8c-slide h2{
  font-size:20px; line-height:1.25; margin:8px 0 6px;
  background:linear-gradient(90deg,#fff,var(--sb8c-coral));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sb8c-slide p{ font-size:13px; color:var(--sb8c-text-dim); margin-bottom:12px; }
.sb8c-slide .sb8c-btn{ padding:10px 18px; font-size:13px; }

.sb8c-slide-dots{
  display:flex; justify-content:center; gap:6px; padding:0 0 12px;
}
.sb8c-slide-dots button{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.25); transition:all .2s ease;
}
.sb8c-slide-dots button.sb8c-active{
  width:22px; border-radius:4px; background:var(--sb8c-coral);
}

/* ---------- Section ---------- */
.sb8c-section{ margin:18px 12px 0; }
.sb8c-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.sb8c-section-title{
  display:flex; align-items:center; gap:8px;
  font-size:16px; font-weight:800;
}
.sb8c-section-title::before{
  content:""; width:4px; height:18px; border-radius:3px;
  background:linear-gradient(180deg,var(--sb8c-coral),var(--sb8c-deep));
}
.sb8c-section-more{
  font-size:12px; color:var(--sb8c-teal); font-weight:700;
}

/* ---------- Category chips ---------- */
.sb8c-chips{
  display:flex; gap:8px; overflow-x:auto; padding:4px 0 8px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.sb8c-chips::-webkit-scrollbar{ display:none; }
.sb8c-chip{
  flex:0 0 auto; padding:7px 14px; border-radius:18px;
  background:var(--sb8c-card); border:1px solid var(--sb8c-border);
  font-size:12px; font-weight:700; color:var(--sb8c-text-dim);
  transition:all .18s ease;
}
.sb8c-chip.sb8c-active{
  background:linear-gradient(135deg,var(--sb8c-coral),#ff5b4d);
  color:#1a1a1a; border-color:transparent;
  box-shadow:0 3px 10px rgba(255,138,128,.4);
}

/* ---------- Game grid ---------- */
.sb8c-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
@media (min-width:375px){
  .sb8c-grid{ grid-template-columns:repeat(5,1fr); gap:10px; }
}
.sb8c-card{
  position:relative; border-radius:12px; overflow:hidden;
  background:var(--sb8c-card); border:1px solid var(--sb8c-border);
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sb8c-card:active{
  transform:scale(.96);
  border-color:var(--sb8c-coral);
  box-shadow:0 4px 12px rgba(255,138,128,.35);
}
.sb8c-card .sb8c-card-img{
  width:100%; aspect-ratio:1/1; object-fit:cover; background:#0e0e0e;
  transition:transform .35s ease;
}
.sb8c-card:hover .sb8c-card-img{ transform:scale(1.06); }
.sb8c-card-name{
  font-size:10px; line-height:1.25; font-weight:600;
  padding:5px 6px 6px; color:var(--sb8c-text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:center;
}
.sb8c-card-hot{
  position:absolute; top:4px; left:4px;
  font-size:8px; font-weight:800; padding:2px 5px; border-radius:4px;
  background:var(--sb8c-coral); color:#1a1a1a; letter-spacing:.5px;
}

/* Featured row (2-3 larger cards) */
.sb8c-feat-row{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.sb8c-feat{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--sb8c-border);
  background:linear-gradient(135deg,#262626,#1a1a1a);
}
.sb8c-feat img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.sb8c-feat-body{ padding:10px 12px; }
.sb8c-feat-body h4{ font-size:13px; font-weight:700; margin-bottom:3px; }
.sb8c-feat-body p{ font-size:11px; color:var(--sb8c-muted); line-height:1.4; }

/* ---------- Promo banner ---------- */
.sb8c-promo{
  margin:18px 12px 0; padding:14px;
  border-radius:16px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--sb8c-deep),#006d7a);
  border:1px solid rgba(32,178,170,.4);
  box-shadow:0 6px 18px rgba(0,151,167,.25);
}
.sb8c-promo::before{
  content:""; position:absolute; right:-30px; top:-30px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,209,128,.35),transparent 70%);
}
.sb8c-promo-tag{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:1px;
  background:var(--sb8c-gold); color:#1a1a1a; padding:3px 8px; border-radius:4px;
  text-transform:uppercase; margin-bottom:8px;
}
.sb8c-promo h3{ font-size:17px; margin-bottom:4px; }
.sb8c-promo p{ font-size:12px; color:rgba(255,255,255,.85); margin-bottom:10px; }

/* ---------- Why / Feature list ---------- */
.sb8c-features{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.sb8c-feature{
  padding:12px; border-radius:12px;
  background:var(--sb8c-card); border:1px solid var(--sb8c-border);
}
.sb8c-feature-ico{
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; margin-bottom:8px;
  background:linear-gradient(135deg,rgba(255,138,128,.25),rgba(0,151,167,.25));
  border:1px solid var(--sb8c-border);
}
.sb8c-feature h4{ font-size:13px; margin-bottom:3px; }
.sb8c-feature p{ font-size:11px; color:var(--sb8c-muted); line-height:1.45; }

/* ---------- SEO content block ---------- */
.sb8c-seo{
  margin:18px 12px 0; padding:14px;
  background:var(--sb8c-bg-2); border:1px solid var(--sb8c-border);
  border-radius:14px;
}
.sb8c-seo h3{
  font-size:15px; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.sb8c-seo h3::before{
  content:""; width:4px; height:15px; border-radius:2px;
  background:linear-gradient(180deg,var(--sb8c-coral),var(--sb8c-deep));
}
.sb8c-seo p{ font-size:13px; color:var(--sb8c-text-dim); margin-bottom:10px; }
.sb8c-seo ul{ margin:0 0 10px; padding-left:18px; list-style:disc; }
.sb8c-seo li{ font-size:12.5px; color:var(--sb8c-text-dim); margin-bottom:5px; }
.sb8c-seo a{ color:var(--sb8c-coral); font-weight:600; }

/* Inline internal link clusters */
.sb8c-link-cluster{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.sb8c-link-cluster a{
  display:inline-block; padding:5px 10px; border-radius:14px;
  background:rgba(32,178,170,.12); border:1px solid rgba(32,178,170,.35);
  font-size:11.5px; color:var(--sb8c-teal); font-weight:600;
}

/* ---------- FAQ ---------- */
.sb8c-faq{ margin:18px 12px 0; }
.sb8c-faq-item{
  border:1px solid var(--sb8c-border); border-radius:12px;
  margin-bottom:8px; overflow:hidden; background:var(--sb8c-card);
}
.sb8c-faq-q{
  width:100%; text-align:left; padding:12px 14px;
  font-size:13.5px; font-weight:700; color:var(--sb8c-text);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.sb8c-faq-q::after{
  content:"+"; font-size:18px; color:var(--sb8c-coral); font-weight:700;
  transition:transform .2s ease;
}
.sb8c-faq-item.sb8c-open .sb8c-faq-q::after{ transform:rotate(45deg); }
.sb8c-faq-a{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  padding:0 14px;
}
.sb8c-faq-item.sb8c-open .sb8c-faq-a{ max-height:300px; padding:0 14px 12px; }
.sb8c-faq-a p{ font-size:12.5px; color:var(--sb8c-text-dim); }

/* ---------- Footer ---------- */
.sb8c-footer{
  margin:24px 12px 0; padding:18px 14px;
  background:var(--sb8c-bg-2); border:1px solid var(--sb8c-border);
  border-radius:14px;
}
.sb8c-footer-brand{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.sb8c-footer-brand img{ width:32px; height:32px; border-radius:8px; }
.sb8c-footer-brand strong{
  font-size:15px;
  background:linear-gradient(90deg,var(--sb8c-coral),var(--sb8c-gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sb8c-footer-cols{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:14px;
}
.sb8c-footer-col h5{
  font-size:11px; color:var(--sb8c-teal); letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:8px;
}
.sb8c-footer-col a{
  display:block; font-size:12px; color:var(--sb8c-text-dim); padding:3px 0;
}
.sb8c-footer-col a:active{ color:var(--sb8c-coral); }
.sb8c-footer-note{
  font-size:11px; color:var(--sb8c-muted); line-height:1.6;
  border-top:1px solid var(--sb8c-border); padding-top:12px;
}
.sb8c-18{
  display:inline-block; padding:2px 7px; border-radius:4px;
  border:1px solid var(--sb8c-coral); color:var(--sb8c-coral);
  font-size:10px; font-weight:800; margin-right:6px;
}

/* ---------- Mobile bottom nav ---------- */
.sb8c-bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  max-width:430px; margin:0 auto;
  height:var(--sb8c-nav-h);
  display:flex; align-items:stretch; justify-content:space-around;
  background:linear-gradient(180deg,#1d1d1d,#121212);
  border-top:1px solid var(--sb8c-border);
  box-shadow:0 -3px 14px rgba(0,0,0,.5);
  padding-bottom:env(safe-area-inset-bottom);
}
.sb8c-nav-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--sb8c-muted); position:relative;
  font-size:10px; font-weight:600;
  transition:color .18s ease;
}
.sb8c-nav-btn svg{ width:22px; height:22px; }
.sb8c-nav-btn.sb8c-active{ color:var(--sb8c-coral); }
.sb8c-nav-btn.sb8c-active::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 3px 3px;
  background:var(--sb8c-coral);
}
.sb8c-nav-btn.sb8c-promo-cta{
  color:#1a1a1a;
}
.sb8c-nav-cta-pill{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--sb8c-coral),#ff5b4d);
  display:flex; align-items:center; justify-content:center;
  margin-top:-18px;
  box-shadow:0 4px 12px rgba(255,138,128,.55);
  border:3px solid #1a1a1a;
}
.sb8c-nav-cta-pill svg{ width:22px; height:22px; color:#1a1a1a; }
.sb8c-nav-btn.sb8c-promo-cta span{ color:var(--sb8c-coral); }

/* ---------- Utility ---------- */
.sb8c-hidden{ display:none !important; }
.sb8c-center{ text-align:center; }

/* ---------- Wide screen: keep mobile canvas centered ---------- */
@media (min-width:431px){
  body{
    box-shadow:0 0 40px rgba(0,0,0,.6);
    border-left:1px solid #000; border-right:1px solid #000;
  }
}