/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			prosilver (the default phpBB 3.3.x style)
	Based on style:
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		phpBB Limited ( https://www.phpbb.com/ )
    --------------------------------------------------------------
*/

@import url("normalize.css?v=3.3");
@import url("base.css?v=3.3");
@import url("utilities.css?v=3.3");
@import url("common.css?v=19");
@import url("links.css?v=3.3");
@import url("content.css?v=3.3");
@import url("buttons.css?v=3.3");
@import url("cp.css?v=3.3");
@import url("forms.css?v=3.3");
@import url("icons.css?v=3.3");
@import url("colours.css?v=3.3");
@import url("responsive.css?v=3.3");

/* XL Oldies Homepage Modern Dark Patch v2
   Homepage optisch näher an HLstatsX / StatsX Dashboard
   2026-06-12
*/

/* Hintergrund komplett vom alten Stoffbild lösen */
html,
body {
    background-color: #0b0f18 !important;
    background-image: none !important;
    color: #d8dee9 !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 8%, rgba(124, 58, 237, 0.18), transparent 28%),
        radial-gradient(circle at 82% 15%, rgba(88, 169, 240, 0.10), transparent 30%),
        linear-gradient(135deg, #070a10 0%, #111827 45%, #090d14 100%) !important;
}

/* Weniger Abstand wie beim StatsX Dashboard */
body:not(.simple) {
    margin: 64px 0 36px 0 !important;
}

/* Gesamtbreite und Grundcontainer cleaner */
.wrap,
#wrap,
.page-footer,
#page-footer {
    background: transparent !important;
    box-shadow: none !important;
}

main,
main.main {
    background: #111827 !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,0.55) !important;
}

/* Header/Banner ohne alten Hintergrund */
.headerbar {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
}

.logo,
#logo {
    background: transparent !important;
}

#logo img {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    margin: 0 !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.42) !important;
}

/* Panels und Forenboxen dunkler / moderner */
.forabg,
.forumbg,
.panel,
.post,
.bg1,
.bg2,
.bg3,
ul.forums,
#recenttopicstop .bg1,
.forumbg .bg1,
.page-sidebar .forabg,
.page-sidebar .forumbg,
.page-sidebar .panel,
.stat-block,
#upcoming-birthdays .forums,
#lgsl .forums {
    background: #171b24 !important;
    background-image: none !important;
    color: #d8dee9 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.32) !important;
}

/* Tabellen/Listen etwas näher an HLstatsX */
.forums dd.topics,
.forums dd.posts,
.forumbg .topics dd.posts,
.forums dd.lastpost,
.forumbg .topics dd.lastpost,
li.row,
li.row dd,
ul.topiclist li {
    background: #1b202b !important;
    color: #d8dee9 !important;
}

li.header dt,
li.header dd,
table.table1 thead th {
    color: #e5e7eb !important;
}

li.row,
li.row dd,
ul.topiclist dd,
table.table1 tbody tr,
table.table1 tbody td {
    border-color: rgba(255,255,255,0.06) !important;
}

li.row:hover,
li.row:hover dd,
table.table1 tbody tr:hover,
table.table1 tbody tr.hover {
    background: rgba(124,58,237,0.18) !important;
    color: #ffffff !important;
}

/* Navbar moderner */
.navbar,
#page-header .navbar {
    background: linear-gradient(180deg, #1a1f2a 0%, #111827 52%, #0b0f18 100%) !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55) !important;
}

#nav-main,
#nav-main.nav-main {
    background: transparent !important;
}

.navbar ul#nav-main li:not(#quick-links):not(.forum):not(.admin):not(.moderator):hover,
body[class*="index"] .navbar ul li#quick-links,
body[class*="index"] .navbar ul li.forum,
body[class*="news"] .navbar ul li.news,
body[class*="rules"] .navbar ul li.rules,
body[class*="memberlist"] .navbar ul li.memberlist,
body[class*="team"] .navbar ul li.team,
body[class*="history"] .navbar ul li.history {
    background: linear-gradient(90deg, #7c3aed 0%, #9333ea 100%) !important;
    color: #ffffff !important;
}

/* Links und Akzente */
a,
a:link,
a:visited,
.forumbg .header a,
.forabg .header a,
th a {
    color: #93c5fd !important;
}

a:hover,
.forumbg .header a:hover,
.forabg .header a:hover,
th a:hover {
    color: #c084fc !important;
    text-decoration: none !important;
}

/* Buttons lila wie StatsX */
.button,
a.button1,
a.button2,
input.button1,
input.button2,
input.button3,
.button-secondary,
.pagination li.active span {
    background: linear-gradient(90deg, #7c3aed 0%, #9333ea 100%) !important;
    border: 1px solid rgba(196,181,253,0.25) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 18px rgba(124,58,237,0.22) !important;
}

.button:hover,
a.button1:hover,
a.button2:hover,
input.button1:hover,
input.button2:hover,
input.button3:hover,
.pagination li a:hover {
    filter: brightness(1.12) !important;
    color: #ffffff !important;
}

/* Inputs / Suche */
.inputbox,
select,
textarea,
.search-box .inputbox,
.search-box .inputbox:hover,
.search-box .inputbox:focus {
    background: #111827 !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 6px !important;
}

.inputbox:focus,
select:focus,
textarea:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 2px rgba(139,92,246,0.25) !important;
}

/* Link-Leiste unter Banner */
.xl-line a,
.stamm-link,
.gameme-link,
.steam-link,
.twitch-link,
.ts-link,
.sb-link {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    color: #e5e7eb !important;
}

.xl-line a:hover,
.stamm-link:hover,
.gameme-link:hover,
.steam-link:hover,
.twitch-link:hover,
.ts-link:hover,
.sb-link:hover {
    background: linear-gradient(90deg, #7c3aed 0%, #9333ea 100%) !important;
    box-shadow: 0 0 14px rgba(124,58,237,0.55) !important;
    border-color: rgba(196,181,253,0.35) !important;
}

/* Footer */
.copyright {
    background: linear-gradient(180deg, #111827 0%, #05070b 100%) !important;
    color: #9ca3af !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* XL Oldies - Scrollbar wie auf der Stamm-Seite */

/* Firefox */
html, body {
    scrollbar-width: thin;
    scrollbar-color: #a7a7a7 #f1f1f1;
}

/* Chrome, Edge, Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 14px;
    background: #f1f1f1;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-left: 1px solid #cfcfcf;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #bdbdbd 0%, #9b9b9b 100%);
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #c9c9c9 0%, #aaaaaa 100%);
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button {
    background: #f1f1f1;
    height: 14px;
}

/* =========================
   XL Oldies Scrollbar Style
   ========================= */

/* Firefox */
html,
body,
* {
    scrollbar-width: thin;
    scrollbar-color: #9f9f9f #0a0f18;
}

/* Chrome / Edge / Opera / Safari */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    background: #05080d;
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #0b1018 0%, #05080d 100%);
    border-left: 1px solid rgba(214,179,90,0.35);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.65);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8c8c8c 0%, #6f6f6f 100%);
    border: 2px solid rgba(214,179,90,0.80);
    border-radius: 10px;
    box-shadow:
        inset 0 0 3px rgba(255,255,255,0.15),
        0 0 8px rgba(214,179,90,0.18);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a5a5a5 0%, #7f7f7f 100%);
    border-color: rgba(214,179,90,1);
    box-shadow:
        inset 0 0 3px rgba(255,255,255,0.20),
        0 0 10px rgba(214,179,90,0.28);
}

::-webkit-scrollbar-corner {
    background: #05080d;
}

::-webkit-scrollbar-button {
    background: #0b1018;
    border-left: 1px solid rgba(214,179,90,0.25);
    border-top: 1px solid rgba(214,179,90,0.15);
}

::-webkit-scrollbar-button:hover {
    background: #121a26;
}

/* XL Oldies scrollbar thumb gold override */
html,
body,
* {
    scrollbar-color: #d6b35a #0a0f18;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f3d777 0%, #cfa53a 45%, #9b7422 100%);
    border: 2px solid rgba(214,179,90,0.95);
    border-radius: 10px;
    box-shadow:
        inset 0 0 4px rgba(255,255,255,0.18),
        0 0 10px rgba(214,179,90,0.28);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffe08a 0%, #ddb54a 45%, #b8872e 100%);
    border-color: #f6d36d;
    box-shadow:
        inset 0 0 4px rgba(255,255,255,0.24),
        0 0 12px rgba(214,179,90,0.40);
}

/* XL Oldies - oberes Menü: lila Active weg, goldenen Punkt stattdessen */
#nav-main li.activetab,
#nav-main li.activetab > a,
#nav-main li.activetab > a:hover,
#nav-main li.activetab > a:focus,
#nav-main li.activetab > a span,
#nav-main li.activetab.responsive-tab > a,
.headerbar #nav-main li.activetab > a {
    background: linear-gradient(180deg, #182434 0%, #0b1119 100%) !important;
    color: #cfe4ff !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}

/* aktiver Menüpunkt wie normal darstellen, aber mit goldenem Punkt */
#nav-main li.activetab > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* goldener Leuchtpunkt */
#nav-main li.activetab > a::after {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ffd54a !important;
    box-shadow:
        0 0 6px rgba(255, 213, 74, 1),
        0 0 12px rgba(214, 179, 90, .95),
        0 0 18px rgba(214, 179, 90, .65) !important;
    vertical-align: middle !important;
    flex: 0 0 8px !important;
}

/* beim kleinen Menü-Icon links nicht doppelt/unsauber anzeigen */
#nav-main li.responsive-tab.activetab > a::after {
    display: none !important;
}

/* falls das aktive Feld trotzdem noch violett reinleuchtet */
#nav-main li.activetab,
#nav-main li.activetab > a {
    background-image: linear-gradient(180deg, #182434 0%, #0b1119 100%) !important;
}

/* Hover vom aktiven Tab ebenfalls ohne Lila */
#nav-main li.activetab > a:hover,
#nav-main li.activetab > a:focus {
    color: #ffffff !important;
    background: linear-gradient(180deg, #1b2940 0%, #0d141f 100%) !important;
}


/* XL Oldies FINAL: Top-Menü lila aktiv weg + Goldpunkt */
.navbar ul#nav-main li,
.navbar ul#nav-main li a,
.navbar ul#nav-main li.forum,
.navbar ul#nav-main li.forum a,
body[class*="index"] .navbar ul li.forum,
body[class*="index"] .navbar ul li.forum a,
body[class*="index"] .navbar ul li#quick-links,
body[class*="index"] .navbar ul li#quick-links a {
    background: linear-gradient(180deg, #182434 0%, #0b1119 100%) !important;
    background-color: #0b1119 !important;
    color: #93c5fd !important;
    box-shadow: none !important;
}

/* Forum-Link als aktiv markieren mit Goldpunkt */
.navbar ul#nav-main li.forum a {
    position: relative !important;
    padding-right: 26px !important;
}

.navbar ul#nav-main li.forum a::after {
    content: "" !important;
    position: absolute !important;
    right: 9px !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    margin-top: -3px !important;
    border-radius: 50% !important;
    background: #ffd54a !important;
    box-shadow:
        0 0 6px rgba(255,213,74,1),
        0 0 12px rgba(214,179,90,.9),
        0 0 18px rgba(214,179,90,.55) !important;
}

/* Menü-Icon links nicht mit Punkt versehen */
.navbar ul#nav-main li#quick-links a::after {
    content: none !important;
    display: none !important;
}


/* XL Oldies: alte Top-Menü-Goldpunkte neutralisieren */
#nav-main a:not(.xl-active-nav-dot)::after,
.navbar #nav-main a:not(.xl-active-nav-dot)::after,
.navbar ul#nav-main li a:not(.xl-active-nav-dot)::after {
    content: none !important;
    display: none !important;
}