/* Helbreath Sonic X - modern dark theme (replaces the legacy BlueBlack phpBB skin).
   Restyles the shared wiki/info page classes so every page matches the homepage. */
@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#080b14; --surface:#111829; --surface2:#161f34; --line:#20293f;
  --text:#dbe4f2; --muted:#8b98b2; --blue:#2f9bff; --gold:#f4b740;
}

html,body{
  background:var(--bg) !important; background-image:none !important;
  color:var(--text) !important;
  font-family:"Manrope",Verdana,Arial,Helvetica,sans-serif !important;
  margin:0 !important; padding:0 !important; line-height:1.55;
}

/* generic tags */
font,th,td,p{ font-family:"Manrope",Verdana,Arial,Helvetica,sans-serif !important; }
p,td{ font-size:14px !important; color:var(--text) !important; }
a:link,a:active,a:visited{ color:var(--blue) !important; text-decoration:none; }
a:hover{ color:var(--gold) !important; text-decoration:none; }
hr{ height:0; border:0; border-top:1px solid var(--line) !important; margin:14px 0; }
img{ max-width:100%; height:auto; border-radius:8px; }
h1,h2,h3,h4{ font-family:"Russo One",sans-serif !important; letter-spacing:.01em; color:var(--text); }

/* page frame: the outer border + content wrapper -> dark surface card */
.bodyline{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  box-shadow:0 24px 60px -30px #000;
  padding:6px !important;
}

/* panels / tables */
.forumline,.tableline{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  overflow:hidden;
}

/* header cells (th) -> blue-accented bar */
th,th.thHead,th.thSides,th.thLeft,th.thRight,th.thBottom,
th.thCornerL,th.thTop,th.thCornerR{
  background:linear-gradient(180deg,var(--surface2),#0f1626) !important;
  background-image:linear-gradient(180deg,var(--surface2),#0f1626) !important;
  color:var(--blue) !important; font-family:"Russo One",sans-serif !important;
  font-size:13px !important; font-weight:400 !important; letter-spacing:.03em;
  text-transform:uppercase; height:34px !important;
  border-bottom:1px solid var(--line) !important; padding:6px 12px !important;
}

/* category header cells */
td.cat,td.catHead,td.catBottom,td.catSides,td.catLeft,td.catRight,td.rowpic{
  background:var(--surface2) !important; background-image:none !important;
  color:var(--gold) !important; border-color:var(--line) !important;
}

/* body cells */
td.row1{ background:var(--surface) !important; }
td.row2,td.row3,td.row3Right,td.spaceRow,td.row_helped{
  background:var(--surface2) !important; border-color:var(--line) !important;
}
td{ padding:8px 12px !important; border-color:var(--line) !important; }

/* titles + text classes */
.maintitle{
  font-family:"Russo One",sans-serif !important; font-weight:400 !important;
  font-size:26px !important; color:var(--gold) !important; line-height:1.15 !important;
}
.gen,.genmed,.gensmall{ color:var(--text) !important; }
.gen{ font-size:14px !important; } .genmed{ font-size:13px !important; } .gensmall{ font-size:12px !important; color:var(--muted) !important; }
a.gen,a.genmed,a.gensmall{ color:var(--blue) !important; }
a.gen:hover,a.genmed:hover,a.gensmall:hover{ color:var(--gold) !important; }
.cattitle,.forumlink{ color:var(--gold) !important; font-family:"Russo One",sans-serif !important; font-weight:400 !important; }
a.cattitle,a.forumlink{ color:var(--gold) !important; }
.nav,a.nav{ color:var(--muted) !important; font-weight:600; }
.mainmenu,a.mainmenu{ color:var(--muted) !important; }
a.mainmenu:hover{ color:var(--gold) !important; }

/* left navigation menu (#navi) -> modern pill buttons */
#navi{ list-style:none; margin:0; padding:0; }
#navi li{ margin-bottom:5px; padding:0; }
#navi li a{
  display:block; width:auto !important;
  border:1px solid var(--line) !important; border-radius:9px !important;
  padding:9px 12px !important; font-size:13px !important; font-weight:600;
  color:var(--muted) !important; background:var(--surface2) !important;
  text-align:left; transition:.15s;
}
#navi li a:hover{
  color:#fff !important; background:#1c2740 !important;
  border-color:var(--blue) !important; transform:translateX(2px);
}

/* scrollbar (modern browsers) */
*{ scrollbar-color:#2a3450 var(--bg); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2a3450; border-radius:6px; border:2px solid var(--bg); }

/* the legacy .Estilo1 black text -> readable */
.Estilo1{ color:var(--text) !important; }

/* ============================================================================
   Legacy standalone content pages (info / classes / armors / magics / ...).
   These aren't phpBB: they carry inline bgcolor="#ededed" panels and black inline
   text from the old 2005 skin. Neutralise those so the modern dark theme shows
   through and every page reads like the new homepage. Bright accent colours
   (yellow/orange headings) are intentionally left untouched.
   ============================================================================ */

/* kill the light presentational cell backgrounds -> let the dark page show through */
table,tbody,tr,td,th{ background-color:transparent !important; background-image:none !important; }

/* re-assert the surface cards on the structural containers */
.bodyline,.forumline,.tableline{ background:var(--surface) !important; }
td.row1{ background:var(--surface) !important; }
td.row2,td.row3,td.row3Right,td.spaceRow,td.row_helped,
td.cat,td.catHead,td.catBottom,td.catSides,td.catLeft,td.catRight,td.rowpic{
  background:var(--surface2) !important;
}
th,th.thHead,th.thSides,th.thLeft,th.thRight,th.thBottom,
th.thCornerL,th.thTop,th.thCornerR{
  background:linear-gradient(180deg,var(--surface2),#0f1626) !important;
}

/* explicit black legacy text (Estilo classes, black <font>, inline black) -> readable */
.Estilo1,.Estilo2,
font[color="#000000"],font[color="black"],font[color="#000"],
[style*="color: rgb(0, 0, 0)"],[style*="color:rgb(0,0,0)"],
[style*="color:#000000"],[style*="color: #000000"]{
  color:var(--text) !important;
}