/* ==========================================================================
   superaceapp.cyou - Base Stylesheet
   Mobile-first (320-430px canvas). Prefix: s7c8-
   Palette: #1A1A1A (background) | #C0C0C0 (text)
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --s7c8-bg:#1A1A1A;
  --s7c8-bg-2:#232323;
  --s7c8-bg-3:#2e2e2e;
  --s7c8-surface:#202020;
  --s7c8-line:#3a3a3a;
  --s7c8-text:#C0C0C0;
  --s7c8-text-dim:#8d8d8d;
  --s7c8-text-bright:#f2f2f2;
  --s7c8-accent:#d9a14a;
  --s7c8-accent-2:#e8c079;
  --s7c8-danger:#c44;
  --s7c8-ok:#5aa15a;
  --s7c8-radius:12px;
  --s7c8-radius-sm:8px;
  --s7c8-header-h:54px;
  --s7c8-bottomnav-h:62px;
  --s7c8-maxw:440px;
  --s7c8-shadow:0 6px 22px rgba(0,0,0,.45);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Helvetica Neue",Arial,"Segoe UI",sans-serif;
  background:var(--s7c8-bg);
  color:var(--s7c8-text);
  line-height:1.55;
  font-size:15px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border:0;}
a{color:var(--s7c8-accent-2);text-decoration:none;}
a:hover{color:#fff;}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--s7c8-text-bright);line-height:1.3;font-weight:700;}
h1{font-size:1.55rem;}
h2{font-size:1.2rem;}
h3{font-size:1.02rem;}
p{margin:0 0 .85em;}

/* ---------- Mobile canvas frame ---------- */
.s7c8-canvas{
  width:100%;
  max-width:var(--s7c8-maxw);
  margin:0 auto;
  min-height:100vh;
  background:var(--s7c8-bg);
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.5);
}
@media(min-width:460px){
  body{background:#0e0e0e;}
}

/* ---------- Skip link ---------- */
.s7c8-skip{
  position:absolute;left:-9999px;top:0;background:#000;color:#fff;
  padding:8px 12px;z-index:2000;
}
.s7c8-skip:focus{left:8px;top:8px;}

/* ==========================================================================
   Header
   ========================================================================== */
.s7c8-header{
  position:sticky;top:0;z-index:100;
  height:var(--s7c8-header-h);
  background:linear-gradient(180deg,#1f1f1f,#151515);
  border-bottom:1px solid var(--s7c8-line);
  display:flex;align-items:center;
}
.s7c8-header-inner{
  width:100%;max-width:var(--s7c8-maxw);margin:0 auto;
  padding:0 12px;height:100%;
  display:flex;align-items:center;gap:8px;
}
.s7c8-brand{
  display:flex;align-items:center;gap:8px;flex:1;min-width:0;
  text-decoration:none;
}
.s7c8-brand img{
  width:34px;height:34px;border-radius:8px;object-fit:cover;
  border:1px solid var(--s7c8-line);flex-shrink:0;background:#000;
}
.s7c8-brand-name{
  color:var(--s7c8-text-bright);
  font-weight:800;font-size:1.02rem;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.s7c8-brand-name span{color:var(--s7c8-accent);}

.s7c8-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.s7c8-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:0 14px;border-radius:20px;
  font-weight:700;font-size:.86rem;
  transition:transform .15s ease, background .2s ease;
}
.s7c8-btn:active{transform:translateY(1px);}
.s7c8-btn-login{
  background:transparent;color:var(--s7c8-text);
  border:1px solid var(--s7c8-line);
}
.s7c8-btn-register{
  background:linear-gradient(180deg,var(--s7c8-accent-2),var(--s7c8-accent));
  color:#1a1a1a;font-weight:800;
  box-shadow:0 2px 8px rgba(217,161,74,.35);
}
.s7c8-menu-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--s7c8-bg-3);border:1px solid var(--s7c8-line);
  display:flex;align-items:center;justify-content:center;
}
.s7c8-menu-btn span{
  display:block;width:16px;height:2px;background:var(--s7c8-text);
  position:relative;border-radius:2px;
}
.s7c8-menu-btn span::before,
.s7c8-menu-btn span::after{
  content:"";position:absolute;left:0;width:16px;height:2px;
  background:var(--s7c8-text);border-radius:2px;
}
.s7c8-menu-btn span::before{top:-5px;}
.s7c8-menu-btn span::after{top:5px;}

/* ==========================================================================
   Slide-up route panel
   ========================================================================== */
.s7c8-panel-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:150;opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.s7c8-panel-backdrop.is-open{opacity:1;pointer-events:auto;}
.s7c8-panel{
  position:fixed;left:0;right:0;bottom:0;
  max-width:var(--s7c8-maxw);margin:0 auto;
  background:#1c1c1c;border-top:1px solid var(--s7c8-line);
  border-radius:18px 18px 0 0;padding:14px 16px 22px;
  z-index:160;transform:translateY(105%);transition:transform .28s ease;
  max-height:78vh;overflow-y:auto;
  box-shadow:0 -10px 30px rgba(0,0,0,.5);
}
.s7c8-panel.is-open{transform:translateY(0);}
.s7c8-panel-handle{
  width:42px;height:5px;background:#444;border-radius:3px;
  margin:0 auto 12px;
}
.s7c8-panel-title{
  color:var(--s7c8-text-bright);font-weight:800;font-size:1.05rem;margin-bottom:10px;
}
.s7c8-panel-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
.s7c8-panel-link{
  display:flex;flex-direction:column;gap:4px;
  padding:10px 12px;background:var(--s7c8-bg-2);
  border:1px solid var(--s7c8-line);border-radius:10px;
  min-height:54px;color:var(--s7c8-text);
}
.s7c8-panel-link strong{color:var(--s7c8-text-bright);font-size:.92rem;}
.s7c8-panel-link small{color:var(--s7c8-text-dim);font-size:.74rem;}
.s7c8-panel-link:active{background:var(--s7c8-bg-3);}
.s7c8-panel-promo{
  margin-top:12px;display:flex;gap:8px;
}
.s7c8-panel-promo button{
  flex:1;padding:12px;border-radius:10px;font-weight:800;font-size:.92rem;
  background:linear-gradient(180deg,var(--s7c8-accent-2),var(--s7c8-accent));
  color:#1a1a1a;
}
.s7c8-panel-promo button.secondary{
  background:var(--s7c8-bg-3);color:var(--s7c8-text-bright);
  border:1px solid var(--s7c8-line);
}

/* ==========================================================================
   Page wrapper
   ========================================================================== */
.s7c8-main{
  padding:14px 12px calc(var(--s7c8-bottomnav-h) + 24px);
}
.s7c8-section{margin-bottom:26px;}
.s7c8-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.s7c8-section-head h2{margin:0;font-size:1.15rem;}
.s7c8-section-head a{font-size:.82rem;color:var(--s7c8-accent-2);}
.s7c8-eyebrow{
  display:inline-block;font-size:.72rem;color:var(--s7c8-accent);
  letter-spacing:1.5px;text-transform:uppercase;font-weight:800;
  margin-bottom:6px;
}

/* ==========================================================================
   Hero / carousel
   ========================================================================== */
.s7c8-hero{
  position:relative;border-radius:var(--s7c8-radius);overflow:hidden;
  background:#000;margin-bottom:18px;box-shadow:var(--s7c8-shadow);
  aspect-ratio:16/9;
}
.s7c8-hero-track{
  display:flex;width:100%;height:100%;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
.s7c8-hero-slide{
  flex:0 0 100%;height:100%;position:relative;cursor:pointer;
}
.s7c8-hero-slide img{
  width:100%;height:100%;object-fit:cover;opacity:.85;
}
.s7c8-hero-cap{
  position:absolute;left:14px;right:14px;bottom:12px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78));
  padding:18px 14px 12px;color:#fff;
}
.s7c8-hero-cap .s7c8-eyebrow{color:var(--s7c8-accent-2);}
.s7c8-hero-cap h2{
  color:#fff;font-size:1.15rem;margin:0 0 4px;
}
.s7c8-hero-cap p{margin:0;font-size:.82rem;color:#e8e8e8;}
.s7c8-hero-dots{
  position:absolute;bottom:8px;right:12px;display:flex;gap:5px;z-index:3;
}
.s7c8-hero-dots button{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);
  padding:0;
}
.s7c8-hero-dots button.active{background:var(--s7c8-accent);width:18px;border-radius:4px;}

/* ==========================================================================
   Promo CTA strip
   ========================================================================== */
.s7c8-cta{
  display:flex;gap:8px;margin-bottom:18px;
}
.s7c8-cta button{
  flex:1;padding:14px 10px;border-radius:var(--s7c8-radius-sm);
  font-weight:800;font-size:.95rem;min-height:48px;
  background:linear-gradient(180deg,var(--s7c8-accent-2),var(--s7c8-accent));
  color:#1a1a1a;
}
.s7c8-cta button.alt{
  background:var(--s7c8-bg-3);color:var(--s7c8-text-bright);
  border:1px solid var(--s7c8-line);
}

/* ==========================================================================
   Info / feature grid
   ========================================================================== */
.s7c8-feature-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
.s7c8-feature{
  background:var(--s7c8-bg-2);border:1px solid var(--s7c8-line);
  border-radius:var(--s7c8-radius-sm);padding:12px;
}
.s7c8-feature .s7c8-ic-badge{
  width:32px;height:32px;border-radius:8px;background:var(--s7c8-bg-3);
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;
  color:var(--s7c8-accent-2);font-size:1.1rem;
}
.s7c8-feature h3{margin:0 0 4px;font-size:.94rem;}
.s7c8-feature p{margin:0;font-size:.78rem;color:var(--s7c8-text-dim);}

/* ==========================================================================
   Game grid
   ========================================================================== */
.s7c8-game-section{margin-bottom:28px;}
.s7c8-cat-head{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--s7c8-line);
}
.s7c8-cat-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:26px;padding:0 8px;border-radius:6px;
  font-size:.74rem;font-weight:800;letter-spacing:.4px;
  background:var(--s7c8-accent);color:#1a1a1a;
}
.s7c8-cat-head h2{margin:0;font-size:1.1rem;flex:1;}
.s7c8-cat-head .s7c8-count{font-size:.76rem;color:var(--s7c8-text-dim);}

.s7c8-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
@media(min-width:375px){
  .s7c8-grid{grid-template-columns:repeat(4,1fr);gap:9px;}
}
@media(min-width:415px){
  .s7c8-grid{grid-template-columns:repeat(5,1fr);}
}
.s7c8-game{
  display:block;background:var(--s7c8-bg-2);border:1px solid var(--s7c8-line);
  border-radius:var(--s7c8-radius-sm);overflow:hidden;cursor:pointer;
  transition:transform .15s ease, border-color .2s ease;
}
.s7c8-game:active{transform:translateY(-2px);border-color:var(--s7c8-accent);}
.s7c8-game-img{
  width:100%;aspect-ratio:1/1;background:#000;
  object-fit:cover;display:block;
}
.s7c8-game-name{
  font-size:.72rem;color:var(--s7c8-text);
  padding:5px 6px 6px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.25;
}

/* ==========================================================================
   Cards / content blocks
   ========================================================================== */
.s7c8-card{
  background:var(--s7c8-bg-2);border:1px solid var(--s7c8-line);
  border-radius:var(--s7c8-radius);padding:14px;margin-bottom:12px;
}
.s7c8-card h3{margin-top:0;}
.s7c8-card p{font-size:.88rem;color:var(--s7c8-text);}
.s7c8-card a{font-weight:600;}

.s7c8-prose{
  background:var(--s7c8-bg-2);border:1px solid var(--s7c8-line);
  border-radius:var(--s7c8-radius);padding:14px 16px;margin-bottom:14px;
}
.s7c8-prose h2{margin-top:0;}
.s7c8-prose h3{color:var(--s7c8-accent-2);}
.s7c8-prose p{font-size:.88rem;color:var(--s7c8-text);}
.s7c8-prose ul{padding-left:18px;margin:0 0 .8em;list-style:disc;}
.s7c8-prose li{margin-bottom:5px;font-size:.86rem;}

.s7c8-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
.s7c8-list li{
  background:var(--s7c8-bg-2);border:1px solid var(--s7c8-line);
  border-radius:var(--s7c8-radius-sm);padding:10px;font-size:.82rem;
}
.s7c8-list li strong{display:block;color:var(--s7c8-text-bright);margin-bottom:3px;}

/* ---------- Winners strip ---------- */
.s7c8-winners{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.s7c8-winners::-webkit-scrollbar{display:none;}
.s7c8-winner{
  flex:0 0 auto;width:160px;
  background:var(--s7c8-bg-2);border:1px solid var(--s7c8-line);
  border-radius:var(--s7c8-radius-sm);padding:10px;
}
.s7c8-winner .who{color:var(--s7c8-accent-2);font-weight:700;font-size:.84rem;}
.s7c8-winner .amt{color:#fff;font-weight:800;font-size:1.05rem;margin:3px 0;}
.s7c8-winner .meta{color:var(--s7c8-text-dim);font-size:.72rem;}

/* ==========================================================================
   Extended footer (home only)
   ========================================================================== */
.s7c8-ext-footer{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--s7c8-line);
}
.s7c8-ext-footer .s7c8-brand-block{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.s7c8-ext-footer .s7c8-brand-block img{
  width:42px;height:42px;border-radius:10px;border:1px solid var(--s7c8-line);
}
.s7c8-ext-footer p{font-size:.84rem;color:var(--s7c8-text-dim);}

.s7c8-dir{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0 14px;
}
.s7c8-dir a{
  display:block;padding:10px 12px;
  background:var(--s7c8-bg-2);border:1px solid var(--s7c8-line);
  border-radius:var(--s7c8-radius-sm);font-size:.82rem;color:var(--s7c8-text);
}
.s7c8-dir a strong{display:block;color:var(--s7c8-text-bright);}

.s7c8-promo-row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0;
}
.s7c8-promo-row button{
  padding:12px;background:var(--s7c8-bg-3);border:1px solid var(--s7c8-line);
  border-radius:var(--s7c8-radius-sm);color:var(--s7c8-text-bright);
  font-weight:700;font-size:.84rem;text-align:left;min-height:50px;
}
.s7c8-promo-row button.primary{
  background:linear-gradient(180deg,var(--s7c8-accent-2),var(--s7c8-accent));
  color:#1a1a1a;border:0;
}

.s7c8-disclaimer{
  margin-top:14px;padding:12px;background:#141414;
  border:1px solid var(--s7c8-line);border-radius:var(--s7c8-radius-sm);
  font-size:.76rem;color:var(--s7c8-text-dim);line-height:1.6;
}

/* ==========================================================================
   Footer (common)
   ========================================================================== */
.s7c8-footer{
  padding:16px 12px calc(var(--s7c8-bottomnav-h) + 16px);
  text-align:center;font-size:.76rem;color:var(--s7c8-text-dim);
  border-top:1px solid var(--s7c8-line);background:#141414;
}
.s7c8-footer .s7c8-foot-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:10px;
}
.s7c8-footer .s7c8-foot-links a{color:var(--s7c8-text);font-size:.78rem;}

/* ==========================================================================
   Bottom nav (floating dock)
   ========================================================================== */
.s7c8-bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  max-width:var(--s7c8-maxw);margin:0 auto;
  height:var(--s7c8-bottomnav-h);
  background:linear-gradient(180deg,#1c1c1c,#0f0f0f);
  border-top:1px solid var(--s7c8-line);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:6px 4px 8px;
  box-shadow:0 -4px 18px rgba(0,0,0,.5);
}
.s7c8-bottomnav a,
.s7c8-bottomnav button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--s7c8-text-dim);
  font-size:.66rem;min-height:48px;position:relative;padding:2px 2px;
  text-decoration:none;
  transition:transform .15s ease, color .2s ease;
}
.s7c8-bottomnav a:active,
.s7c8-bottomnav button:active{transform:translateY(-2px);}
.s7c8-bottomnav .s7c8-ic{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
}
.s7c8-bottomnav .s7c8-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;}
.s7c8-bottomnav .active{color:var(--s7c8-accent-2);}
.s7c8-bottomnav .active::before{
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:24px;height:3px;border-radius:3px;background:var(--s7c8-accent);
}
.s7c8-bottomnav .s7c8-promo-dot{
  position:absolute;top:2px;right:18px;
  width:6px;height:6px;border-radius:50%;background:var(--s7c8-accent);
}

/* ---------- Utility ---------- */
.s7c8-text-center{text-align:center;}
.s7c8-mt-0{margin-top:0;}
.s7c8-mb-0{margin-bottom:0;}
.s7c8-hidden{display:none !important;}
.s7c8-divider{
  height:1px;background:var(--s7c8-line);margin:18px 0;border:0;
}