/* === Dusk Reborn UI Refresh (overrides) === */

:root{
  --bg: #1d1d1d;
  --panel: rgba(16,18,22,.72);
  --panel-strong: rgba(16,18,22,.88);
  --stroke: #2a2f3a;
  --muted: #9aa3af;
  --brand: #32c27d;
  --brand-2: #7dd3fc;
  --accent: #ffdd41;
}

/* Subtle page vignette for contrast */
body::after{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  background: radial-gradient(900px 400px at 50% -10%, rgba(125,211,252,.12), transparent 70%),
              linear-gradient(180deg, rgba(0,0,0,.15), transparent 40%, rgba(0,0,0,.35));
  z-index:-1;
}

/* Wider container without breaking existing */
.container{ max-width: 1100px; padding: 0 16px; }

/* Top bar cleanup */
.top-bar{
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--stroke);
  border-radius: 0 0 12px 12px;
}
.top-bar .stats{ gap:10px; padding:0; background:transparent; }
.top-bar .stats p{
  background: rgba(255,255,255,.08);
  border: 1px solid var(--stroke);
  padding: 6px 10px; border-radius: 999px; font-weight: 600; color:#e6edf3;
}
.top-bar .stats .divider{ display:none; }
.top-bar .login input:not([type="submit"]){
  height: 34px; border: 1px solid var(--stroke);
  background: #11161d; color:#e6edf3; padding-left:36px;
}
.top-bar .login .btn{ height: 33px; border-radius: 8px; }

/* Hero as a soft card */
.hero-wrap{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 18px 18px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.hero-wrap::before{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(600px 240px at 20% -10%, rgba(50,194,125,.12), transparent 60%),
              radial-gradient(600px 240px at 80% -10%, rgba(125,211,252,.10), transparent 60%);
  pointer-events:none;
}
.header .about{ font-size: clamp(18px, 2.2vw, 24px); color:#e6edf3; }
.header .about a{ color: var(--accent); }

/* Value props under CTA */
.feature-row{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:12px;
}
.feature-row li{
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  color:#cfd6de; padding:6px 10px; border-radius:999px; font-size:13px;
}

/* CTA buttons */
.header .btn-join{ border-radius:10px; padding:14px 28px; font-size:15px; letter-spacing:.2px; }
.btn-discord{ background:#5865F2 !important; border-color:#3e46a8 !important; }
.btn-discord:hover{ filter:brightness(110%); }

/* Main content card */
.content{
  background: var(--panel-strong);
  border: 1px solid var(--stroke);
  border-radius: 16px;
}

/* Trainers art polish */
.trainer{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)) saturate(1.05); }
@media (max-width: 1100px){ .trainer.ash{ right:-10px; opacity:.85; } .trainer.dawn{ left:-20px; opacity:.85; } }
@media (max-width: 800px){ .trainer.ash,.trainer.dawn{ display:none; } }

/* Tabs */
.switch-content{ padding-bottom: 0; }
.switch-content .tabs{ height:auto; gap:10px; flex-wrap:wrap; }
.tab{
  min-width: 180px; height: 44px; border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color:#cbd5e1; font-weight:600; border-radius: 10px 10px 0 0;
}
.tab:hover{ color:#fff; background: rgba(255,255,255,.07); }
.tab-active{
  background: linear-gradient(180deg, rgba(50,194,125,.18), rgba(255,255,255,.07));
  color:#fff; border-bottom-color: transparent;
  box-shadow: 0 6px 0 0 var(--panel-strong);
}

/* Tab content */
.tab-content{
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: 0 12px 12px 12px;
  padding: 18px; gap:22px;
}
.tab-content .left-side{
  padding-right: 25px;
  margin-right: 25px;
  border-right: 1px solid var(--stroke);
}
@media (max-width: 650px){
  .tab-content{ flex-direction:column; }
  .tab-content .left-side{ border-right:none; margin-right:0; padding-right:0; }
}

/* Posts */
.post{ padding:0; }
.post-head{ padding: 8px 6px 0; }
.post-body{
  background: rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  border-radius: 12px;
  padding: 16px;
  line-height: 1.6;
  font-size: 15px;
  color:#dde6ee;
  text-align:left; /* more natural than justify */
}
.post-date{ color: var(--muted); }
.post-body a{ color: var(--accent); text-decoration: underline; }

/* Tables */
.pretty-table th{
  background: linear-gradient(180deg,#7b5aa2,#6b4e90);
  border-top-left-radius:8px; border-top-right-radius:8px;
}
.pretty-table td{
  background: rgba(255,255,255,.03);
  border-color: var(--stroke);
}

/* Emoji chips */
.spanstyle{
  background: rgba(255,255,255,.06);
  border-color: var(--stroke);
  color:#d7dee6;
}

/* Footer polish */
.footer{
  background: rgba(0,0,0,.35);
  border:1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 12px;
}
.footer a{ color: var(--brand-2); }

/* Mobile top bar and login alignment */
@media (max-width: 650px){
  .top-bar{ height:auto; padding:8px 12px; border-radius: 0 0 12px 12px; }
  .top-bar .login form{
    margin: 10px 0 0 0 !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap:8px;
  }
  .top-bar .login input:not([type="submit"]){ width: calc(50% - 10px); }
  .btn{ width:auto; }
  .hiddenlogo{ display:none; }
  .header{ margin-top: 18px; }
}

/* Social rail -> compact row on mobile */
@media (max-width: 900px){
  .social{ position: static; height:auto; display:flex; gap:8px; margin:12px 0; }
  .social li a{ width:36px; height:36px; border-radius:8px; }
  .social li a span{ display:none; }
}

.register-container {
    width: 100%;
    top: 0%;
    left: 5%;
    position: absolute;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0px 0px 400px 1000px rgb(0 0 0 / 60%);
    border: 3px solid rgb(190 47 58);
}

/* Improve headings inside longform */
.post-body h1,.post-body h2,.post-body h3{ color:#eaf2fa; }

/* =========================================================
   MOBILE HOTFIX — restore stacking, remove old negative margins,
   allow horizontal scroll for tabs, fix post width.
   ========================================================= */

@media (max-width: 900px){
  /* Social rail -> compact row */
  .social{ position: static; height:auto; display:flex; gap:8px; margin:12px 0; }
  .social li a{ width:36px; height:36px; border-radius:8px; }
  .social li a span{ display:none; }
}

@media (max-width: 650px){
  /* Kill legacy offsets from old CSS */
  .top-bar .login form{
    position: static !important;
    margin: 8px 0 0 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Stack inputs & make controls full width for easy tapping */
  .top-bar .login input:not([type="submit"]){ width: 100% !important; height: 44px; font-size: 16px; }
  .top-bar .login .btn,
  .btn.btn-login,
  .btn.btn-register{ width: 100% !important; height: 44px; }

  /* Keep header near the top on mobile */
  .header{ margin-top: 16px !important; }

  /* Tabs: enable swipe/scroll horizontally, avoid wrapping glitches */
  .switch-content .tabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .tab{ flex: 0 0 auto; min-width: 200px; }

  /* Tab content in a single column */
  .tab-content{ flex-direction: column; padding: 14px; }
  .tab-content .left-side{ border-right: none; margin-right: 0; padding-right: 0; }

  /* Posts should use full width */
  .post-body{ max-width: 100% !important; }

  /* Hide tiny hidden logo sprite on very small screens */
      .hiddenlogo {
        display: initial;
        position: absolute;
        height: 6%;
        right: 0px;
        width: auto;
        top: 60px;
        z-index: 0;
        pointer-events: none;}
}

@media (max-width: 525px){
  /* Avoid huge top spacing from legacy rules */
  .header{ margin-top: 18px !important; }
}

/* === MOBILE POLISH (based on latest screenshot) === */
@media (max-width: 650px){
  /* 1) Stats pills: center and keep in one row above the form */
  .top-bar { padding-bottom: 8px; }
  .top-bar .stats{
    width: 100%;
    justify-content: center;
    margin: 8px 0 6px;
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    position: absolute;
    top: 100px;
    right: 0%;
  }
  .top-bar .stats p{
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 13px;
  }

  /* 2) Login card spacing + full-width buttons */
  .top-bar .login form{
    gap: 12px !important;
    align-items: center !important;
  }
  .top-bar .login input:not([type="submit"]),
  .top-bar .login .btn,
  .btn.btn-login,
  .btn.btn-register{
        width: 90% !important;
        max-width: 320px !important;
        margin-left: auto;
        margin-right: auto;
  }

  /* 3) Discord CTA spacing */
  .header .btn-join.btn-discord{
    margin-top: 10px;
    width: 92%;
    max-width: 380px;
  }

  /* 4) Hero card breathing room */
  .hero-wrap{ margin-top: 10px; padding: 14px 14px 18px !important; }

  /* 5) Tabs: tighter height + visible scroll cue */
  .switch-content .tabs{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;               /* space for scrollbar glow */
    gap: 8px !important;
  }
  .tab{ flex: 0 0 auto !important; min-width: 200px !important; height: 44px; }
  .register-container {
    max-width: 100%;
    width: 98%;
    top: -180px;
    left: 0%;
  }
  
  /* Center the login form controls and make buttons truly centered */
  .top-bar .login form{
    align-items: stretch !important;  /* let children take full width */
    padding-bottom: 20px;
  }
  .top-bar .login .btn,
  .btn.btn-login,
  .btn.btn-register{
    width: 92% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;    /* <-- centers them */
    display: block !important;
  }

}
.header .logo{ width:201px; height:84px; display:inline-block; }   /* exact */

/* Safety: social row must never exceed the viewport width */
@media (max-width: 900px){
  .social{ max-width: 100%; overflow: hidden;
  box-shadow: 0px 2px 0px 0px #ff3232;
      
  }
  .social li a{ flex: 0 0 44px; }
  .header .logo{display: none;}
}

/* --- PERF: mobile-friendly paints & defer offscreen work --- */

/* 1) Backdrop filters are expensive on mobile GPUs */
@media (max-width: 650px){
  .top-bar{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0,0,0,.6);
  }
.container, .content, .hero-wrap { max-width: 100%; width: 96%; }
}

/* 2) Disable heavy page bg blur/animation on mobile */
@media (max-width: 736px){
  #bg { filter: none !important; }
  #bg div { animation: none !important; -webkit-animation: none !important; }
  
/* 8) Tab row scrolls inside itself (not the page) */
.switch-content .tabs{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
}

/* 3) Only render what’s visible: below-the-fold tabs */
.tabcnt-2, .tabcnt-3, .tabcnt-4{
  content-visibility: auto;
  contain-intrinsic-size: 600px; /* reserve space to avoid CLS */
}

/* 4) Make hero an LCP-friendly block */
.hero-wrap { contain: layout paint style; }

/* 5) Animation/filters trim on low-end devices */
@media (prefers-reduced-motion: reduce){
  .shadowfilter { filter: none !important; -webkit-filter: none !important; }
}

.trainer.dawn{ width:323px; height:318px; }
.trainer.ash { width:247px; height:412px; }

/* Tabs: prevent height jump when fonts load */
.switch-content .tabs{ min-height:54px; }

/* News area: give first panel intrinsic size so content doesn't pop in */
.tabcnt-1{ content-visibility:auto; contain-intrinsic-size: 700px; }


/* Background animations/filters can trigger repaints; trim on initial paint */
@media (min-width: 991px){
  .top-bar{ backdrop-filter: none; -webkit-backdrop-filter:none; background: rgba(0,0,0,.6); }
}