/* ===== Rokubet — non-critical styles ===== */

/* TRUST TICKER */
.ticker{
  overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(255,122,24,.07),rgba(13,13,28,.4),rgba(255,122,24,.07));
  padding:12px 0;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{display:inline-flex;gap:34px;animation:scroll 38s linear infinite;will-change:transform}
.ticker-track span{
  font-family:var(--head);font-weight:600;font-size:.92rem;color:var(--accent2);
  letter-spacing:.5px;flex:none;
}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;flex-wrap:wrap;white-space:normal;justify-content:center;gap:14px 24px}
}

/* PROMOTIONS GRID */
.bonus-grid{grid-template-columns:repeat(3,1fr)}
.bonus{display:flex;flex-direction:column;align-items:flex-start}
.bonus::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 90% 0%,rgba(255,122,24,.16),transparent 50%);
  pointer-events:none;
}
.bonus-ico{font-size:2rem;margin-bottom:8px}
.bonus-val{
  font-family:var(--head);font-weight:700;font-size:1.7rem;color:var(--accent2);
  text-shadow:0 0 16px rgba(255,122,24,.5);margin-bottom:6px;
}
.bonus h3{font-size:1.12rem;margin-bottom:10px}
.bonus p{color:var(--muted);font-size:.95rem;margin-bottom:18px;flex:1}
.bonus .btn{margin-top:auto;min-height:42px;padding:9px 20px;font-size:.9rem}

/* ABOUT */
.about-intro{display:grid;grid-template-columns:1.25fr 1fr;gap:38px;align-items:center;margin-bottom:34px}
.about-txt p{color:var(--muted);margin-bottom:16px}
.about-txt p:last-child{margin-bottom:0}
.about-img img{width:100%;height:auto;border-radius:16px;border:1px solid var(--border);box-shadow:0 0 40px rgba(255,122,24,.22)}
.about-sub{grid-template-columns:repeat(2,1fr)}
.about-sub h3{font-size:1.1rem;color:var(--accent2);margin-bottom:10px}
.about-sub p{color:var(--muted);font-size:.95rem}

/* GAMES */
.game-feature{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.game-feature figure{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);margin:0}
.game-feature img{width:100%;height:180px;object-fit:cover}
.game-feature figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(10,10,20,.94));
  padding:30px 14px 12px;font-family:var(--head);font-weight:700;font-size:.98rem;color:#fff;
}
.game-grid{grid-template-columns:repeat(5,1fr)}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:96px;background:var(--panel);border:1px solid var(--border);border-radius:14px;
  font-family:var(--head);font-weight:600;font-size:.92rem;text-align:center;padding:14px 8px;
  backdrop-filter:blur(8px);transition:transform .15s,border-color .2s,box-shadow .2s;
}
.tile span{font-size:1.7rem}
.tile:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 0 22px rgba(255,122,24,.25);color:var(--accent2)}

/* WHY */
.why-grid{grid-template-columns:repeat(3,1fr)}
.feat-ico{
  font-size:1.6rem;width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:rgba(255,122,24,.1);border:1px solid var(--border);margin-bottom:14px;
}
.feat h3{font-size:1.12rem;margin-bottom:8px}
.feat p{color:var(--muted);font-size:.95rem}

/* PAYMENT */
.pay-grid{grid-template-columns:repeat(4,1fr)}
.pm{text-align:center}
.pm-ico{font-size:1.8rem;margin-bottom:8px}
.pm h3{font-size:1.05rem;margin-bottom:12px}
.pm-lim{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted)}
.pm-lim b{color:var(--accent2)}

/* SEO CONTENT */
.narrow{max-width:840px}
.seo-content article{
  background:var(--panel);border:1px solid var(--border2);border-radius:16px;
  padding:30px 34px;backdrop-filter:blur(8px);
}
.seo-content h3{font-size:1.25rem;color:var(--accent2);margin:24px 0 10px}
.seo-content h3:first-child{margin-top:0}
.seo-content p{color:var(--muted);margin-bottom:6px}
.seo-content strong{color:var(--txt)}

/* FINAL CTA */
.cta-box{
  text-align:center;background:
    radial-gradient(circle at 50% 0%,rgba(255,122,24,.18),transparent 60%),
    rgba(255,255,255,.03);
  border:1px solid var(--border);border-radius:22px;padding:48px 28px;backdrop-filter:blur(10px);
  box-shadow:0 0 50px rgba(255,122,24,.18);
}
.cta-box h2{margin-bottom:14px}
.cta-box p{color:var(--muted);max-width:680px;margin:0 auto 26px}

/* FOOTER */
.ftr{border-top:1px solid var(--border);background:rgba(8,8,16,.6);padding:50px 0 26px;margin-top:30px}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;margin-bottom:32px}
.ftr-logo{height:38px;width:auto;margin-bottom:14px;filter:drop-shadow(0 0 8px rgba(255,122,24,.3))}
.ftr-about p{color:var(--muted);font-size:.92rem;max-width:420px}
.ftr-col h4{font-family:var(--head);color:var(--accent2);font-size:1rem;margin-bottom:14px;letter-spacing:.5px}
.ftr-col ul{list-style:none}
.ftr-col li{margin-bottom:6px}
.ftr-col a{color:var(--muted);font-size:.92rem;transition:color .15s;display:inline-block;padding:4px 0}
.ftr-col a:hover{color:var(--accent2)}
.ftr-bottom{
  border-top:1px solid var(--border2);padding-top:20px;display:flex;align-items:center;gap:14px;
  justify-content:center;flex-wrap:wrap;
}
.age-badge{
  font-family:var(--head);font-weight:700;background:var(--accent);color:#160a00;
  padding:4px 10px;border-radius:8px;font-size:.85rem;
}
.ftr-bottom p{color:var(--muted);font-size:.85rem}

/* MOBILE FAB */
.fab{
  display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:80;
  align-items:center;justify-content:center;gap:8px;min-height:52px;
  font-family:var(--head);font-weight:700;font-size:1rem;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#160a00;
  border-radius:14px;box-shadow:0 0 26px rgba(255,122,24,.5),0 6px 20px rgba(0,0,0,.4);
}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  .bonus-grid,.why-grid{grid-template-columns:repeat(2,1fr)}
  .pay-grid{grid-template-columns:repeat(2,1fr)}
  .game-grid{grid-template-columns:repeat(3,1fr)}
  .game-feature{grid-template-columns:repeat(2,1fr)}
  .about-intro{grid-template-columns:1fr}
  .about-img{order:-1}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr-about{grid-column:1/-1}
}
@media(max-width:620px){
  .sec{padding:48px 0}
  .bonus-grid,.why-grid,.about-sub,.game-grid{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:repeat(2,1fr)}
  .game-feature{grid-template-columns:1fr}
  .game-feature img{height:200px}
  .ftr-grid{grid-template-columns:1fr}
  .seo-content article{padding:24px 18px}
  .fab{display:flex}
  body{padding-bottom:80px}
}